Enhance hardware inventory layout

Change-Id: Ie013fdaa03a03682bb415a34e15155091fa3bf4a
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 514a631..780e319 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -4,7 +4,7 @@
 $darkgrey: #666;
 $medgrey: #d7dbe0;
 $lightgrey: #f5f7fa;
-$lightblue: #f0f2f5;
+$lightblue: #f1f2f6;
 $medblue: #3f71ec;
 $purple: #5A3EC8;
 $darkpurple: #20214f;
@@ -23,7 +23,7 @@
 $disabled-row-txt: #999999;
 
 //Forms
-$input-border: #505050;
+$input-border: #a7a7a7;
 
 // Light Background
 $lightbg__grey: #b8c1c1;
@@ -56,7 +56,7 @@
 // Severity
 $critical-lightbg: #e62325;
 $critical-darkbg: #ff5c49;
-$medium-lightbg: #dc267f;
+$severity-medium-lightbg: #dc267f;
 $medium-darkbg: #FF509E;
 $warning-lightbg: #ff836f;
 $warning-darkbg: #ffb000;
@@ -70,12 +70,12 @@
 
 //Inventory
 $active: #c6b6f5;
-$inactive: $medium-lightbg;
+$inactive: $severity-medium-lightbg;
 $present: #b1bef3;
-$not-present: $medium-lightbg;
+$not-present: $severity-medium-lightbg;
 
 // Links
-$links: #648FFF;
+$links: #3c6df0;
 $links__hover: $lightbg__primary;
 $links__visited: #8ea7ea;
 $links__disabled: rgba(27, 40, 52, 0.70);
diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss
index 9c31f8f..36e18c2 100644
--- a/app/common/styles/base/foundation.scss
+++ b/app/common/styles/base/foundation.scss
@@ -814,7 +814,7 @@
     display: block !important; } }
 
 .row {
-  max-width: 60.38rem; //960px
+  max-width: 67.500rem; //1080px
   margin-right: auto;
   margin-left: auto; }
 .row::before, .row::after {
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index e499095..27fe0e1 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -52,6 +52,14 @@
   vertical-align: middle;
 }
 
+.icon__critical{
+  width: 30px;
+  height: 30px;
+  background-image: url(/assets/images/icon-critical.svg);
+  background-repeat: no-repeat;
+  vertical-align: middle;
+}
+
 .icon__info{
   margin-top: -4px;
   margin-right: .5em;
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 33cf61a..d0c1e80 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -90,4 +90,18 @@
   width: 0;
   position: absolute;
   overflow: hidden;
+}
+
+.show-scroll {
+  // Force scrollbar to always be visible in webkit browsers
+  &::-webkit-scrollbar {
+    background-color: lighten($medgrey, 5%);
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+  }
 }
\ No newline at end of file