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/base/forms.scss b/app/common/styles/base/forms.scss
index 5e75bcc..3699521 100644
--- a/app/common/styles/base/forms.scss
+++ b/app/common/styles/base/forms.scss
@@ -2,16 +2,13 @@
font-size:1em;
font-weight: 300;
margin: 0;
- &.disabled {
- color: $lightbg__grey;
- }
.error {
font-size: .9em;
}
}
.label__helper-text {
- color: $darkgrey;
+ color: $text-02;
line-height: 1.2;
font-size: 0.9em;
margin-bottom: 0.4em;
@@ -28,50 +25,50 @@
input[type='time'],
textarea {
border-radius: 0px;
- border: 1px solid $input-border;
+ border: 1px solid $border-color-02;
margin: 0;
- background: $white;
+ background: $primary-light;
box-shadow: 0 0 0;
transition: none !important;
max-height: 2.1em;
&:focus {
- border-color: $medgrey;
- box-shadow: 0 -3px $field__focus inset;
+ border-color: $border-color-01;
+ box-shadow: 0 -3px $primary-accent inset;
}
&:disabled,
.disabled {
- background: $field__disabled;
- border: 1px solid $lightbg__grey;
+ background: $background-03;
+ border: 1px solid $border-color-02;
}
&.input__error {
- box-shadow: 0 -5px $error-color inset;
- color: $error-color;
+ box-shadow: 0 -5px $status-error inset;
+ color: $status-error;
&:focus {
- box-shadow: 0 -5px $field__focus inset;
+ box-shadow: 0 -5px $primary-accent inset;
}
}
}
//input validation
.ng-invalid.ng-touched {
- box-shadow: 0 -3px $error-color inset;
+ box-shadow: 0 -3px $status-error inset;
&:focus {
- border-color: $medgrey;
- box-shadow: 0 -3px $error-color inset;
+ border-color: $border-color-01;
+ box-shadow: 0 -3px $status-error inset;
}
}
.submitted .ng-invalid {
- box-shadow: 0 -3px $error-color inset;
+ box-shadow: 0 -3px $status-error inset;
&:focus {
- border-color: $medgrey;
- box-shadow: 0 -3px $error-color inset;
+ border-color: $border-color-01;
+ box-shadow: 0 -3px $status-error inset;
}
}
.form-error {
margin-bottom: .7em;
font-size: 0.8rem;
- color: #c60f13;
+ color: $status-error;
height:1rem;
display: block;
visibility: hidden;
@@ -81,14 +78,14 @@
}
//Foundation overwrite
[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
- border-color: $input-border;
+ border-color: $border-color-02;
}
input[readonly],
input[readonly]:focus{
box-shadow: 0 0 0;
- background: $field__disabled;
- border: 1px solid $lightbg__grey;
+ background: $background-03;
+ border: 1px solid $border-color-02;
}
textarea { padding: .2em;
@@ -103,7 +100,7 @@
border-radius: 0px;
height: auto;
padding-right: 0.5rem; //override inherited Foundation style
- border-color: $input-border;
+ border-color: $border-color-02;
@include fastTransition-all;
@include bgImage__arrowDown-primary;
&:focus {
@@ -121,6 +118,6 @@
}
}
.form__validation-message {
- color: $error-color;
+ color: $status-error;
font-size: 0.9em;
}