Clean up color values
This update will clean up slight color variations in the
code base by creating and using Sass color variables
instead of hex values. Available colors are defined in
colors.scss. Any usage of CSS color properties should
refer to the mapped color variables in colors.scss.
- Removed tags.scss file since tag components no longer used
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I045030a158469e59d07a9fa8cd8aa9f125f0d383
diff --git a/app/server-health/styles/inventory.scss b/app/server-health/styles/inventory.scss
index 44cb9c9..7b1d0dd 100644
--- a/app/server-health/styles/inventory.scss
+++ b/app/server-health/styles/inventory.scss
@@ -14,42 +14,42 @@
.inventory__table {
.hardware__header {
padding:1.2em 1.5em 1.2em 1.5em;
- background: $darkblue;
+ background: $background-05;
font-weight: 700;
- color: $white;
+ color: $primary-light;
}
.ng-hide {
height: 0;
}
.harware__details {
- background: $lightblue;
+ background: $background-02;
.hardware__title {
- border-left: 1px solid $medgrey;
- border-right: 1px solid $medgrey;
+ border-left: 1px solid $border-color-01;
+ border-right: 1px solid $border-color-01;
position: relative;
font-weight: 700;
text-transform: capitalize;
padding: 1em 1.5em 1em 1.5em;
- border-bottom: 1px solid $medgrey;
- background-color: $white;
+ border-bottom: 1px solid $border-color-01;
+ background-color: $primary-light;
&:hover {
- background: $lightblue;
+ background: $background-02;
cursor: pointer;
}
&.expanded {
- background: $lightblue;
+ background: $background-02;
}
}
.hardware__items {
- background: $lightgrey;
- border-right: 1px solid $medgrey;
- border-left: 1px solid $medgrey;
+ background: $background-02;
+ border-right: 1px solid $border-color-01;
+ border-left: 1px solid $border-color-01;
display: block;
overflow: hidden;
@include fastTransition-all;
&.expanded {
height: 100%;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
}
.items {
max-height: 320px;
@@ -61,10 +61,10 @@
max-height: 320px;
padding: 1em 1.5em 1em 1.5em;
overflow: auto;
- border-top:1px solid $medgrey;
+ border-top:1px solid $border-color-01;
@include mediaQuery(medium) {
border-top:0;
- border-left:1px solid $medgrey;
+ border-left:1px solid $border-color-01;
}
}
}
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index c02d1c4..7b82549 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -1,3 +1,13 @@
+// Priority tags
+$priority-high: $accent-04--01;
+$priority-high--light: $accent-04--02;
+$priority-medium: $accent-03--01;
+$priority-medium--light: $accent-03--03;
+$priority-low: $accent-01--01;
+$priority-low--light: $accent-01--03;
+$prioriy-resolved: $base-02--02;
+$priority-resolve--light: $base-02--04;
+
// Event Log SCSS
#event-log {
@@ -14,7 +24,7 @@
.event-log__timezone button {
position: relative;
text-transform: uppercase;
- color: $lightbg__primary;
+ color: $primary-accent;
font-size: .9em;
font-weight: 700;
border: 0;
@@ -29,7 +39,7 @@
#event-filter {
.filter-label {
- color: $darkgrey;
+ color: $text-02;
text-transform: uppercase;
font-weight: 700;
font-size: .75em;
@@ -49,7 +59,7 @@
}
.event__date-filter {
margin-right: 1.5em;
- color: $darkgrey;
+ color: $text-02;
float:left;
input {
width: 170px;
@@ -83,7 +93,7 @@
}
}
.empty__logs {
- border: 1px solid $lightbg__grey;
+ border: 1px solid $border-color-02;
margin-top: .5em;
text-align: center;
padding: 2em;
@@ -110,9 +120,9 @@
}
}
.btn:not([disabled]):not(.disabled) {
- color: $white;
+ color: $primary-light;
svg {
- fill: $white;
+ fill: $primary-light;
}
}
}
@@ -148,14 +158,14 @@
// Single event log card
.event-log__single-event {
- border: 1px solid $medgrey;
+ border: 1px solid $border-color-01;
padding: 1em 1em 1em .7em;
margin: .5em 0 .5em 0;
position: relative;
overflow: hidden;
@include fastTransition-all;
&.active {
- background-color: $lightgrey;
+ background-color: $background-02;
@include slowTransition-all;
}
}
@@ -167,7 +177,7 @@
//Event priorities
.event__priority {
- color: $white;
+ color: $primary-light;
font-size: .8em;
text-transform: uppercase;
padding: 2px 2em;
@@ -176,24 +186,24 @@
min-width: 103px;
text-align: center;
&.high-priority {
- background: $highPriority-bg;
- border: 2px solid $highPriorityColor;
- color: darken($highPriorityColor, 5%);
+ background: $priority-high--light;
+ border: 2px solid $priority-high;
+ color: $priority-high;
}
- &.med-priority {
- background: $medPriorty-bg;
- border: 2px solid $medPriorityColor;
- color: darken($medPriorityColor, 15%);
+ &.medium-priority {
+ background: $priority-medium--light;
+ border: 2px solid $priority-medium;
+ color: $priority-medium;
}
&.low-priority {
- background: $lowPriorty-bg;
- border: 2px solid $lowPriorityColor;
- color: darken($lowPriorityColor, 5%);
+ background: $priority-low--light;
+ border: 2px solid $priority-low;
+ color: $priority-low;
}
&.event-resolved {
- background: $resolved-bg;
- border: 2px solid $resolvedColor;
- color: $resolvedColor;
+ background: $priority-low--light;
+ border: 2px solid $priority-low;
+ color: $priority-low;
}
}
@@ -204,16 +214,16 @@
font-weight: 700;
min-width: 103px;
&.high-priority {
- color: darken($highPriorityColor, 5%);
+ color: $priority-high;
}
- &.med-priority {
- color: darken($medPriorityColor, 15%);
+ &.medium-priority {
+ color: $priority-medium;
}
&.low-priority {
- color: darken($lowPriorityColor, 5%);
+ color: $priority-low;
}
&.event-resolved {
- color: $resolvedColor;
+ color: $priority-low;
}
}
@@ -221,7 +231,7 @@
.event__id {
@include fontCourierBold;
font-size: .9em;
- color: $darkgrey;
+ color: $text-02;
margin-right: 1em;
}
@@ -229,7 +239,7 @@
text-align: left;
@include fontCourierBold;
font-size: .9em;
- color: $darkgrey;
+ color: $text-02;
max-width: 18em;
@include mediaQuery(medium) {
float: right;
@@ -256,9 +266,9 @@
.event__metadata {
height: 200px;
overflow-y: scroll;
- border: 1px solid $medgrey;
+ border: 1px solid $border-color-01;
padding: .5em .5em 0;
- background: $white;
+ background: $primary-light;
display: block;
margin-bottom: 1.5em;
&::-webkit-scrollbar {
@@ -298,9 +308,9 @@
}
.btn:not([disabled]):not(.disabled) {
- color: $black;
+ color: $primary-dark;
svg {
- fill: $black;
+ fill: $primary-dark;
}
}
}
diff --git a/app/server-health/styles/sensors.scss b/app/server-health/styles/sensors.scss
index 260c2a7..c9efd49 100644
--- a/app/server-health/styles/sensors.scss
+++ b/app/server-health/styles/sensors.scss
@@ -1,3 +1,8 @@
+// Threshold graphs
+$thresh-critical: $status-error;
+$thresh-warning: $accent-03--02;
+$thresh-normal: $accent-02--02;
+
.sensors {
max-width: 1196px;
}
@@ -13,8 +18,8 @@
.sensors__thead-row {
display: block;
- background: $darkblue;
- color: $white;
+ background: $background-05;
+ color: $primary-light;
margin-bottom: 1rem;
@include mediaQuery(medium) {
@@ -52,7 +57,7 @@
.sensors__tbody-row {
display: flex;
flex-direction: column;
- border: 1px solid $medgrey;
+ border: 1px solid $border-color-01;
margin-bottom: 1rem;
@include mediaQuery(medium) {
@@ -64,7 +69,7 @@
.sensors__tbody-header {
display: block;
- background: darken($lightgrey, 5%);
+ background: $background-02;
padding: 0.5rem 1rem;
font-weight: 700;
.icon.icon__normal {
@@ -109,7 +114,7 @@
.sensors__tbody-unit {
display: inline-block;
- color: $darkgrey;
+ color: $text-01;
margin-left: 0.5em;
font-weight: 700;
text-transform: uppercase;
@@ -134,18 +139,18 @@
.sensors__tbody-current--critical {
background: $thresh-critical;
- color: $white;
+ color: $primary-light;
.sensors__tbody-unit {
- color: $white;
+ color: $primary-light;
}
}
.sensors__tbody-current--warn {
background: $thresh-warning;
- color: $black;
+ color: $primary-dark;
.sensors__tbody-unit {
- color: $black;
+ color: $primary-dark;
}
}
diff --git a/app/server-health/styles/syslog.scss b/app/server-health/styles/syslog.scss
index 788e775..98b734e 100644
--- a/app/server-health/styles/syslog.scss
+++ b/app/server-health/styles/syslog.scss
@@ -11,7 +11,7 @@
.sys-log__timezone button {
position: relative;
text-transform: uppercase;
- color: $lightbg__primary;
+ color: $primary-action;
font-size: .9em;
font-weight: 700;
border: 0;
@@ -30,7 +30,7 @@
#sys-log-filter {
.filter-label {
- color: $darkgrey;
+ color: $text-02;
text-transform: uppercase;
font-weight: 700;
font-size: .75em;
@@ -50,7 +50,7 @@
}
.sys-log__date-filter {
margin-right: 1em;
- color: $darkgrey;
+ color: $text-02;
float:left;
input {
width: 170px;
@@ -80,7 +80,7 @@
.btn-export,
.btn-delete,
.btn-resolve {
- color: $white;
+ color: $primary-light;
}
}
.inline__confirm {
@@ -180,14 +180,14 @@
// Single event log card
.sys-log__single-event {
- border: 1px solid $medgrey;
+ border: 1px solid $border-color-01;
padding: 1em 1em 1em .7em;
margin: .5em 0 .5em 0;
position: relative;
overflow: hidden;
@include fastTransition-all;
&.active {
- background-color: $lightgrey;
+ background-color: $background-02;
@include slowTransition-all;
}
}
@@ -208,7 +208,7 @@
.event__id {
@include fontCourierBold;
font-size: .9em;
- color: $darkgrey;
+ color: $text-02;
margin-right: 1em;
}
@@ -216,7 +216,7 @@
text-align: right;
@include fontCourierBold;
font-size: .9em;
- color: $darkgrey;
+ color: $text-02;
max-width: 18em;
@media (min-width: 1105px) {
float: right;
@@ -243,9 +243,9 @@
.event__metadata {
height: 200px;
overflow-y: scroll;
- border: 1px solid $medgrey;
+ border: 1px solid $border-color-01;
padding: .5em .5em 0;
- background: $white;
+ background: $primary-light;
display: block;
margin-bottom: 1.5em;
&::-webkit-scrollbar {
@@ -297,16 +297,16 @@
padding: 0;
transform: rotate(-90deg);
font-size: 1em;
- color: lighten($darkgrey, 10%);
+ color: $text-02;
&:hover {
- color: $darkbg__accent;
+ color: $primary-action;
}
&:after {
content: '\276F'
}
&:focus {
outline: 0;
- color: $darkbg__accent;
+ color: $primary-action;
}
}
.sort-descending {
@@ -314,16 +314,16 @@
padding: 0;
transform: rotate(-90deg);
font-size: 1em;
- color: lighten($darkgrey, 10%);
+ color: $text-02;
&:hover {
- color: $darkbg__accent;
+ color: $primary-action;
}
&:after {
content: '\276e'
}
&:focus {
outline: 0;
- color: $darkbg__accent;
+ color: $primary-action;
}
}
}