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/configuration/styles/certificate.scss b/app/configuration/styles/certificate.scss
index e3ead19..5a122fe 100644
--- a/app/configuration/styles/certificate.scss
+++ b/app/configuration/styles/certificate.scss
@@ -1,17 +1,17 @@
.certificate__table {
- border-left: 1px solid $medgrey;
- border-right: 1px solid $medgrey;
- margin-top: .5em;
+ border-left: 1px solid $border-color-01;
+ border-right: 1px solid $border-color-01;
+ margin-top: 0.5em;
.table__row-header {
width: 100%;
- border-bottom: 1px solid $medgrey;
- background-color: $darkbg__primary;
- color: $white;
- font-weight: 700;
+ border-bottom: 1px solid $border-color-01;
+ background-color: $primary-dark;
+ color: $primary-light;
+ font-weight: 700;
}
.table__row-value {
width: 100%;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
}
.certificate__type-header {
@include mediaQuery(small) {
@@ -19,11 +19,11 @@
background: transparent;
}
width: 100%;
- padding: .8em;
+ padding: 0.8em;
padding-left: 1.5em;
}
.certificate__date-header {
- padding:.8em;
+ padding: 0.8em;
@include mediaQuery(small) {
width: 30%;
display: block;
@@ -31,7 +31,7 @@
display: none;
}
.certificate__status-header {
- padding: .8em;
+ padding: 0.8em;
@include mediaQuery(small) {
width: 5%;
display: block;
@@ -40,16 +40,16 @@
}
.certificate__type-cell {
width: 100%;
- padding: .8em .8em .8em 1.5em;
+ padding: 0.8em 0.8em 0.8em 1.5em;
word-wrap: break-word;
- background: $lightgrey;
+ background: $background-02;
@include mediaQuery(small) {
width: 25%;
background: transparent;
}
}
.certificate__date-cell {
- padding: .8em ;
+ padding: 0.8em;
word-wrap: break-word;
@include mediaQuery(small) {
width: 30%;
@@ -57,7 +57,7 @@
width: 70%;
}
.certificate__status-cell {
- padding: .8em;
+ padding: 0.8em;
@include mediaQuery(small) {
display: block;
width: 5%;
@@ -67,11 +67,11 @@
.certificate__buttons-cell {
@include mediaQuery(small) {
width: 10%;
- padding-top: .8em;
+ padding-top: 0.8em;
}
width: 100%;
text-align: right;
- padding: 0 1.5em .8em 0;
+ padding: 0 1.5em 0.8em 0;
}
.certificate__title-inline {
@include mediaQuery(small) {
@@ -79,17 +79,17 @@
}
width: 30%;
display: block;
- padding: .8em .8em .8em 1.5em;
+ padding: 0.8em 0.8em 0.8em 1.5em;
}
.upload__certificate {
- border-top: 1px solid $medgrey;
+ border-top: 1px solid $border-color-01;
width: 100%;
- background: $lightgrey;
- padding: .8em;
+ background: $background-02;
+ padding: 0.8em;
}
}
.certificate__upload-chooser {
- background: $lightgrey;
+ background: $background-02;
}
.add__certificate__modal {
@@ -106,7 +106,7 @@
font-size: 1.2em;
}
.file__name {
- background-color: $upload__background;
- padding: .5em;
+ background-color: $background-02;
+ padding: 0.5em;
}
}
diff --git a/app/configuration/styles/date-time.scss b/app/configuration/styles/date-time.scss
index 00f7b8b..a50a71a 100644
--- a/app/configuration/styles/date-time.scss
+++ b/app/configuration/styles/date-time.scss
@@ -12,7 +12,7 @@
.date-time__owner-dropdown {
width: 200px;
&:hover {
- background-color: $dropdown__focus-bg;
+ background-color: $background-02;
}
}
.date-time__ntp-servers{
@@ -39,7 +39,7 @@
width: 100%;
margin-top: 3em;
padding-top: 1em;
- border-top: 1px solid $medgrey;
+ border-top: 1px solid $border-color-01;
button {
float: right;
margin: .5em;
diff --git a/app/configuration/styles/firmware.scss b/app/configuration/styles/firmware.scss
index 8c7a304..b60f51c 100644
--- a/app/configuration/styles/firmware.scss
+++ b/app/configuration/styles/firmware.scss
@@ -14,10 +14,10 @@
font-weight: 700;
}
.icon {
- color: $medblue;
- fill: $medblue;
+ color: $primary-accent;
+ fill: $primary-accent;
&.disabled {
- color: $medgrey;
+ color: $base-02--05;
&:hover {
cursor: default;
}
@@ -43,7 +43,7 @@
.table__row.disabled {
.firmware__action-link {
- color: $medblue;
+ color: $primary-accent;
opacity: 1;
&:hover {
cursor: pointer;
@@ -51,7 +51,7 @@
}
}
.firmware__primary {
- background-color: lighten($status-ok, 40%);
+ background-color: $accent-02--02;
}
}
@@ -64,14 +64,14 @@
}
.firmware__active-version {
- color: $darkgrey;
+ color: $text-02;
font-size: .8em;
float: right;
font-weight: 400;
}
.firmware__action-link {
- color: $links;
+ color: $primary-action;
padding: 5px;
min-width: 90px;
text-align: left;
@@ -112,7 +112,7 @@
.firmware__upload-chooser {
display: inline-block;
width: 100%;
- background: $lightgrey;
+ background: $background-02;
padding-left: 1em;
padding-right: 1em;
margin-bottom: 1em;
@@ -129,7 +129,7 @@
}
.firmware__upload-station {
padding-bottom: 2em;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
padding-left: 1em;
margin-top: 2em;
}
diff --git a/app/configuration/styles/network.scss b/app/configuration/styles/network.scss
index 5b862e7..18973c0 100644
--- a/app/configuration/styles/network.scss
+++ b/app/configuration/styles/network.scss
@@ -40,7 +40,7 @@
}
.network-config__submit-wrapper {
padding-top: 1em;
- border-top: 1px solid $medgrey;
+ border-top: 1px solid $border-color-01;
margin-top: 2em;
.btn:not(:last-child) {
diff --git a/app/configuration/styles/snmp.scss b/app/configuration/styles/snmp.scss
index 96b71f0..f7df1c4 100644
--- a/app/configuration/styles/snmp.scss
+++ b/app/configuration/styles/snmp.scss
@@ -7,7 +7,7 @@
}
.help__text {
font-size: 0.8rem;
- color: $disabled-row-txt;
+ color: $text-02;
padding-top: .3em;
display: none;
}
@@ -15,7 +15,7 @@
display: none;
}
.manager_group {
- border-bottom: 1px solid $lightbg__grey;
+ border-bottom: 1px solid $border-color-02;
&.ng-invalid {
input {
color: black;
@@ -30,7 +30,7 @@
}
}
&.empty {
- color: $disabled-row-txt;
+ color: $text-02;
padding: 1em 0 1em 0;
}
}
@@ -47,12 +47,12 @@
input {
border-style: none;
pointer-events: none;
- color: $disabled-row-txt;
+ color: $text-02;
height: 2.4em;
}
&:focus-within {
input {
- color: $black;
+ color: $primary-dark;
border-style: solid;
pointer-events: auto;
}
@@ -70,7 +70,7 @@
padding: 0;
width: auto;
svg {
- fill: $color--blue-40;
+ fill: $primary-accent;
width: auto;
height: 1.3em;
}
@@ -79,7 +79,7 @@
.snmp__submit-wrapper {
width: 100%;
- border-top: 1px solid $medgrey;
+ border-top: 1px solid $border-color-01;
button {
float: right;
margin: .5em;
diff --git a/app/configuration/styles/virtual-media.scss b/app/configuration/styles/virtual-media.scss
index 1e7724b..4070e34 100644
--- a/app/configuration/styles/virtual-media.scss
+++ b/app/configuration/styles/virtual-media.scss
@@ -24,7 +24,7 @@
.vm__upload-choose-button {
padding: 0.5em 0.75em;
font-size: 1rem;
- background-color: $white;
+ background-color: $primary-light;
min-width: 3em;
}
@@ -48,13 +48,13 @@
.vm__upload-name {
flex: 1 0 220px;
- background-color: $medgrey;
+ background-color: $background-03;
padding: 0.5em;
}
.vm__error-border,
.vm__active-border {
- border-top: 2px solid $error-color;
+ border-top: 2px solid $status-error;
margin-top: 4px;
padding-top: 4px;
}