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/common/styles/components/form-elements.scss b/app/common/styles/components/form-elements.scss
index 8b26339..61ca4d3 100644
--- a/app/common/styles/components/form-elements.scss
+++ b/app/common/styles/components/form-elements.scss
@@ -6,7 +6,7 @@
padding-left: .5em;
padding-right: 1.5em;
margin-top: 0;
- border: 1px solid $input-border;
+ border: 1px solid $border-color-02;
min-width: 70px;
font-weight: 400;
@include bgImage__arrowDown-primary;
@@ -25,12 +25,12 @@
z-index: 100;
right: 0;
top: 100%;
- background: $white;
+ background: $primary-light;
padding: 0;
width: 100%;
- border: 1px solid $lightbg__grey;
+ border: 1px solid $border-color-02;
margin-top: -5px;
- box-shadow: 0 4px 10px -2px $darkgrey;
+ box-shadow: 0 4px 10px -2px $base-02--02;
li {
list-style-type: none;
}
@@ -40,7 +40,7 @@
width: 100%;
font-weight: 400;
&:hover {
- background: $dropdown__focus-bg;
+ background: $background-02;
}
}
}
@@ -57,7 +57,7 @@
display: inline-block;
top: 50%;
left: .6em;
- color: $lightbg__primary;
+ color: $primary-accent;
transform: translateY(-50%);
}
}
@@ -71,7 +71,7 @@
}
input {
max-width: 170px;
- color: $darkgrey;
+ color: $text-01;
}
}
@@ -101,35 +101,34 @@
left: 0;
width: 20px;
height: 20px;
- background: $white;
- border: 1px solid $lightbg__grey;
+ background: $primary-light;
+ border: 1px solid $border-color-02;
font-size: 0;
}
/* Hover and focus states */
.control-check:hover input ~ .control__indicator,
.control-check input:focus ~ .control__indicator {
- border: 1px solid $primebtn__bg;
- background-color: $primebtn__bg;
+ border: 1px solid $primary-accent;
+ background-color: $primary-accent;
}
/* Checked state */
.control-check input:checked ~ .control__indicator {
- background: $primebtn__bg;
-
+ background: $primary-accent;
}
/* Hover state whilst checked */
.control-check:hover input:not([disabled]):checked ~ .control__indicator {
- background: $primebtn__bg;
+ background: $primary-accent;
}
/* Disabled state */
.control-check input:disabled ~ .control__indicator {
pointer-events: none;
opacity: .6;
- background: #ccc;
- border: 1px solid $white;
+ background: $base-02--04;
+ border: 1px solid $primary-light;
}
.control-check:hover > input:disabled ~ .control__indicator {
@@ -156,14 +155,14 @@
width: 5px;
height: 10px;
transform: rotate(45deg);
- border: solid $white;
+ border: solid $primary-light;
border-width: 0 2px 2px 0;
}
/* Disabled tick colour */
.control-check input:disabled ~ .control__indicator:after {
- border-color: $white;
- color: $white;
+ border-color: $primary-light;
+ color: $primary-light;
}
// Radio Buttons
@@ -179,8 +178,8 @@
left: 0;
width: 30px;
height: 30px;
- background: $white;
- border: 2px solid $darkgrey;
+ background: $primary-light;
+ border: 2px solid $border-color-02;
}
.control-radio input{
position: absolute;
@@ -194,22 +193,22 @@
/* Hover and focus states */
.control-radio input:focus ~ .control__indicator {
- background: $primebtn__bg;
- outline: 1px solid $primebtn__bg;
+ background: $primary-accent;
+ outline: 1px solid $primary-accent;
outline-offset: 3px;
}
.control-radio input:checked ~ .control__indicator {
- background: $lightbg__accent;
- border: 2px solid $primebtn__bg;
+ background: $background-02;
+ border: 2px solid $primary-accent;
}
/* Disabled state */
.control-radio input:disabled ~ .control__indicator{
pointer-events: none;
opacity: .6;
- background: #ccc;
- border: 1px solid $medgrey;
+ background: $base-02--04;
+ border: 1px solid $border-color-01;
}
.control-radio:hover > input:disabled ~ .control__indicator{
@@ -234,8 +233,8 @@
/* Disabled tick colour */
.control-radio input:disabled ~ .control__indicator:after{
- border-color: $white;
- color: $white;
+ border-color: $primary-light;
+ color: $primary-light;
}
/* Radio button inner circle */
@@ -245,7 +244,7 @@
width: 18px;
height: 18px;
border-radius: 50%;
- background: $primebtn__bg;
+ background: $primary-accent;
}
.control-radio:hover .control__indicator:after {
@@ -254,7 +253,7 @@
/* Disabled circle colour */
.control-radio input:disabled ~ .control__indicator:after {
- background: #7b7b7b;
+ background: $base-02--03;
width: 20px;
height: 20px;
}
\ No newline at end of file