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
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index fb49d39..26490f6 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -104,4 +104,6 @@
@include indeterminate-bar;
}
+.sort-heading {
+}
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
index 767f7f2..fcf0286 100644
--- a/app/common/styles/elements/accordion.scss
+++ b/app/common/styles/elements/accordion.scss
@@ -3,6 +3,7 @@
.header__actions-bar {
padding-top: 1em;
+ padding-bottom: 1em;
padding-right: 1em;
background: $darkpurple;
color: $white;
@@ -14,6 +15,7 @@
margin-right: -20px;
}
}
+ p {margin-bottom: 0;}
}
.accord-trigger {
@@ -29,7 +31,6 @@
}
&.active {
transform: rotate(-90deg);
- color: $darkbg__accent;
}
&:focus {
outline: 0;
@@ -37,23 +38,15 @@
}
}
-// Single event log card
.accord-row {
- position: relative;
- border: 1px solid $medgrey;
- padding: 1em 1em 1em 0em;
- margin: .65em 0;
- background: $white;
overflow: hidden;
- &.active,
- &.selected {
- background: $lightblue;
+ .accord-content.inactive {
+ max-height: 0;
+ height: 0;
}
- &:hover {
- background: $lightblue;
- cursor: pointer;
- }
- &:last-child {
- border-bottom: 1px solid $medgrey;
+ .accord-content.active {
+ height: auto;
+ max-height: 1000px;
+ @include fastTransition-all;
}
}
\ No newline at end of file
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index 3fa94f1..a8ae381 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -3,7 +3,6 @@
.content__search {
width: 100%;
- max-width: 99%;
display: inline-block;
float: left;
position: relative;
@@ -38,7 +37,7 @@
width: 100px;
top: .5em;
right: 5px;
- padding: 1em 2em;
+ padding: 1em 2em .9em;
min-height: 20px;
text-align: center;
margin: 0;
diff --git a/app/common/styles/elements/tags.scss b/app/common/styles/elements/tags.scss
index 8a480c9..d2fff03 100644
--- a/app/common/styles/elements/tags.scss
+++ b/app/common/styles/elements/tags.scss
@@ -118,8 +118,8 @@
}
}
&.medium-priority {
- background: rgba($medium-lightbg, .5);
- border-color: rgba($medium-lightbg, 1);
+ background: rgba($severity-medium-lightbg, .5);
+ border-color: rgba($severity-medium-lightbg, 1);
}
&.warn-priority {
border-color: $warning-lightbg;
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index f91940c..326d896 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -8,6 +8,7 @@
border-bottom: 1px solid $lightbg__grey;
margin: 1.625em 0 1.2em 0;
padding-left: 0;
+ overflow: hidden;
.h4 {
padding: 0;
margin: 0 0 .5em 0;
@@ -43,7 +44,3 @@
font-size: .75em;
margin-bottom: 0;
}
-
-.content__container h1 {
- margin-left: -.3em;
-}