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/buttons.scss b/app/common/styles/base/buttons.scss
index a04aebd..1d90036 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -1,18 +1,18 @@
-$btn-primary__bg: $color--blue-40;
-$btn-primary__bg--hover: $color--blue-30;
-$btn-primary__bg--disabled: $color--grey-40;
-$btn-primary__txt: $color--grey-0;
-$btn-primary__txt--disabled: $color--grey-60;
+$btn-primary__bg: $base-01--03;
+$btn-primary__bg--hover: $base-01--04;
+$btn-primary__bg--disabled: $base-02--04;
+$btn-primary__txt: $base-02--08;
+$btn-primary__txt--disabled: $base-02--03;
-$btn-secondary__bg: $color--grey-0;
-$btn-secondary__txt: $color--blue-40;
-$btn-secondary__txt--hover: $color--blue-30;
-$btn-secondary__txt--disabled: $color--grey-60;
+$btn-secondary__bg: $base-02--08;
+$btn-secondary__txt: $base-01--03;
+$btn-secondary__txt--hover: $base-01--04;
+$btn-secondary__txt--disabled: $base-02--03;
$btn-tertiary__bg: transparent;
-$btn-tertiary__txt: $color--blue-40;
-$btn-tertiary__txt--hover: $color--blue-30;
-$btn-tertiary__txt--disabled: $color--grey-60;
+$btn-tertiary__txt: $base-01--03;
+$btn-tertiary__txt--hover: $base-01--04;
+$btn-tertiary__txt--disabled: $base-02--03;
/***
Include .btn class in addition to the button type.
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index bb07bd0..a31c603 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -14,7 +14,7 @@
$color--grey-10: #FAFBFC;
$color--grey-0: #FFFFFF;
-// Status colors
+// Accent colors
$color--teal-70: #098292;
$color--teal-50: #00B6CB;
$color--teal-20: #CCF0F5;
@@ -22,117 +22,66 @@
$color--green-50: #0A7D06;
$color--green-20: #C6E8C5;
-$color--yellow-70: #EFC100;
+$color--yellow-70: #DB7C00;
$color--yellow-50: #FEDF39;
-$color--yellow-40: #FFDF99;
$color--yellow-20: #FFF8E4;
$color--red-50: #DA1416;
$color--red-20: #FAD3D3;
+// Color mapping
+$base-01--01: $color--blue-100;
+$base-01--02: $color--blue-50;
+$base-01--03: $color--blue-40;
+$base-01--04: $color--blue-30;
+$base-01--05: $color--blue-20;
+
+$base-02--01: $color--grey-100;
+$base-02--02: $color--grey-80;
+$base-02--03: $color--grey-60;
+$base-02--04: $color--grey-40;
+$base-02--05: $color--grey-30;
+$base-02--06: $color--grey-20;
+$base-02--07: $color--grey-10;
+$base-02--08: $color--grey-0;
+
+$accent-01--01: $color--teal-70;
+$accent-01--02: $color--teal-50;
+$accent-01--03: $color--teal-20;
+
+$accent-02--01: $color--green-50;
+$accent-02--02: $color--green-20;
+
+$accent-03--01: $color--yellow-70;
+$accent-03--02: $color--yellow-50;
+$accent-03--03: $color--yellow-20;
+
+$accent-04--01: $color--red-50;
+$accent-04--02: $color--red-20;
+
// Global
-$white: $color--grey-0;
-$black: $color--grey-100;
-$darkgrey: $color--grey-80;
-$medgrey: #d7dbe0;
-$lightgrey: #f5f7fa;
-$lightblue: #f1f2f6;
-$medblue: #3f71ec;
-$darkblue: #1e3359;
-$purple: #5A3EC8;
-$field__disabled: #e6e6e6;
-$field__focus: #3C6DEF;
-$btn__disabled-txt: #a6a5a6;
-$btn__disabled-bg: #d8d8d8;
-$btn__disabled-border: #CCCCCC;
-$primebtn__disabled-txt: #999999;
-$primebtn__disabled-bg: #CCCCCC;
+$primary-light: $base-02--08;
+$primary-dark: $base-02--01;
+$primary-accent: $base-01--03;
-// Dark background
-$darkbg__grey: #E3ECEC;
-$darkbg__accent: #79a6f6;
-$darkbg__primary: #19273c;
+$primary-action: $base-01--03;
+$primary-action--hover: $base-01--04;
-//Disabled table elements
-$disabled-row: #dddee0;
-$disabled-row-txt: $color--grey-60;
+$text-01: $base-02--01;
+$text-02: $base-02--02;
+$text-03: $base-02--06;
-//Forms
-$input-border: #a7a7a7;
+$background-01: $primary-light;
+$background-02: $base-02--06;
+$background-03: $base-02--05;
+$background-04: $base-01--01;
+$background-05: $base-01--02;
-// Light Background
-$lightbg__grey: #b8c1c1;
-$lightbg__accent: #d8e2fc;
-$lightbg__primary: $color--blue-40;
+$border-color-01: $base-02--05;
+$border-color-02: $base-02--03;
-// Primary Button colors
-$primebtn__bg: $color--blue-40;
-$primebtn__text: $white;
+$box-shadow-color: $base-02--05;
-// Secondary Button colors
-$secbtn__bg: #ebf0fc;
-$secbtn__border: #3863ce;
-$secbtn__text: #3863ce;
-
-// Dropdowns
-$dropdown__focus-bg: #e6e9ee;
-
-// Status colors
-$error-color: #e62425;
-$status-ok: #34bc6e;
-$status-ok-light: #cceedf;
-$status-warn: #ffb000;
-
-// Alerts
-$alert__error: rgb(230, 35, 37);
-$alert__warning: rgb(255, 127, 0);
-$alert__message: rgb(203, 221, 235);
-$alert__danger: #fad3D3;
-
-// Severity
-$critical-lightbg: #da1416;
-$critical-darkbg: #ff5c49;
-$severity-medium-lightbg: #dc267f;
-$medium-darkbg: #FF509E;
-$warning-lightbg: #fff8e4;
-$warning-border: #ffdf99;
-$warning-darkbg: #ffb000;
-$low-lightbg: #c42cd6;
-$normal: #00baa1;
-
-// Priority tags
-$lowPriorityColor: $color--teal-50;
-$lowPriorty-bg: #cdf0f6;
-$medPriorityColor: #feb101;
-$medPriorty-bg: #fef0cd;
-$highPriorityColor: #e62425;
-$highPriority-bg: #edc9cb;
-$resolvedColor: $color--grey-60;
-$resolved-bg: #d6d6d6;
-
-
-// Threshold graphs
-$thresh-critical: $error-color;
-$thresh-warning: #ffb001;
-$thresh-normal: #cceedf;
-
-//Inventory
-$active: #c6b6f5;
-$inactive: $severity-medium-lightbg;
-
-// Links
-$links: $color--blue-40;
-$links__hover: $lightbg__primary;
-$links__visited: #8ea7ea;
-$links__disabled: rgba(27, 40, 52, 0.70);
-
-// Navigation
-$nav__top-level-color: #1a273b;
-$nav__second-level-color: #e6e9ed;
-$nav__second-level-text-color: #4b5d78;
-
-//Upload
-$upload__background: #f0f2f5;
-
-//Loader
-$loaderColor: $color--blue-50;
+$status-error: $accent-04--01;
+$status-ok: $accent-02--01;
+$status-warn: $accent-03--01;
diff --git a/app/common/styles/base/core.scss b/app/common/styles/base/core.scss
index 10ce9c3..7b627a2 100644
--- a/app/common/styles/base/core.scss
+++ b/app/common/styles/base/core.scss
@@ -3,7 +3,7 @@
@include fontFamily;
font-size: 16px;
font-weight: 400;
- color: $black;
+ color: $primary-dark;
}
p {
@@ -11,19 +11,20 @@
transition: margin .05s;
}
-a, button.link {
- color: $links;
+a,
+button.link {
+ color: $primary-action;
text-decoration: none;
font-weight: 700;
&:visited {
- color: lighten($links, 5%);
+ color: lighten($primary-action, 5%);
}
&:hover {
text-decoration: underline;
cursor: pointer;
}
:focus {
- color: $links;
+ color: $primary-action;
}
}
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;
}
diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index bd5b9a6..9a9646b 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -5,8 +5,8 @@
}
.icon__more {
- fill: $medblue;
- stroke: $medblue;
+ fill: $primary-accent;
+ stroke: $primary-accent;
background: transparent;
overflow: visible;
&:hover {
@@ -15,7 +15,7 @@
}
.icon__more-dropdown {
- background: $lightgrey;
+ background: $background-02;
position: absolute;
right: 3px;
white-space: normal;
@@ -23,7 +23,7 @@
z-index: 200;
padding: 1em;
font-size: 1em;
- box-shadow: 2px 4px 5px $medgrey;
+ box-shadow: 2px 4px 5px $box-shadow-color;
}
.icon__bar-arrow {
@@ -47,7 +47,7 @@
display: inline-block;
font-size: 1em;
margin-left: 1em;
- color: lighten($darkgrey, 4%);
+ color: $text-02;
}
}
//Status icons
@@ -89,7 +89,7 @@
margin-right: .5em;
width: 25px;
height: 25px;
- fill: $medblue;
+ fill: $primary-accent;
float: left;
}
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index 6b68114..87708da 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -154,7 +154,7 @@
@mixin table-row-save {
@-webkit-keyframes row-flash {
from {
- background-color: $lightblue;
+ background-color: $background-02;
}
to {
background-color: inherit;
@@ -162,7 +162,7 @@
}
@-moz-keyframes row-flash {
from {
- background-color: $lightblue;
+ background-color: $background-02;
}
to {
background-color: inherit;
@@ -170,7 +170,7 @@
}
@-o-keyframes row-flash {
from {
- background-color: $lightblue;
+ background-color: $background-02;
}
to {
background-color: inherit;
@@ -178,7 +178,7 @@
}
@keyframes row-flash {
from {
- background-color: $lightblue;
+ background-color: $background-02;
}
to {
background-color: inherit;
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index 0457fc2..f0a5e20 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -17,7 +17,7 @@
h4,
h5 {
line-height: 1.25;
- color: #333;
+ color: $text-01;
}
h1, .h1 {
@@ -44,7 +44,7 @@
h5, .h5 {
font-size: .875rem;
font-weight: 500;
- color: $darkgrey;
+ color: $text-02;
}
// Fonts
diff --git a/app/common/styles/base/utility.scss b/app/common/styles/base/utility.scss
index 7a19475..7297628 100644
--- a/app/common/styles/base/utility.scss
+++ b/app/common/styles/base/utility.scss
@@ -3,8 +3,6 @@
}
.disabled {
- color: $lightbg__grey;
- @include fastTransition-all;
&:hover {
cursor: default;
text-decoration: none;
@@ -22,7 +20,7 @@
}
}
.error {
- color: $error-color;
+ color: $status-error;
}
.hide {
@@ -34,7 +32,7 @@
}
.close {
- color: $lightbg__primary;
+ color: $primary-accent;
font-size: 1.5em;
padding: 1em;
box-sizing: border-box;
@@ -46,7 +44,7 @@
border: 0px;
margin: 0;
&:hover {
- color: $lightbg__accent;
+ color: $text-03;
background: transparent;
}
}
@@ -78,7 +76,7 @@
}
.btm-border-grey {
- border-bottom: 1px solid $lightbg__grey;
+ border-bottom: 1px solid $border-color-02;
}
.transitionAll {
@@ -108,7 +106,7 @@
.show-scroll {
// Force scrollbar to always be visible in webkit browsers
&::-webkit-scrollbar {
- background-color: lighten($medgrey, 5%);
+ background-color: $background-03;
width: 8px;
}
@@ -126,14 +124,14 @@
-webkit-animation-name: flash;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1s;
- color: $white;
+ color: $primary-light;
}
@-webkit-keyframes flash {
- from { background: $field__focus; }
+ from { background: $primary-accent; }
to { background: none; }
}
@keyframes flash {
- 0% { background: $field__focus; }
+ 0% { background: $primary-accent; }
100% { background: none; }
}
\ No newline at end of file
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
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index c26ba59..67dc0be 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -2,11 +2,11 @@
// Table Header
.table-header {
width: 100%;
- color: $black;
+ color: $primary-dark;
line-height: 30px;
padding: .8em 0 0;
margin-bottom: .8em;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
font-size: 1.25em;
@include mediaQuery(medium) {
margin: 1.8em 0;
@@ -30,8 +30,8 @@
font-weight: 400;
position: relative;
&.disabled {
- background-color: $disabled-row;
- color: $disabled-row-txt;
+ background-color: $background-03;
+ color: $text-02;
}
}
@@ -41,9 +41,9 @@
left: 0;
width: 100%;
height:100%;
- background: $darkbg__primary;
+ background: $background-04;
z-index:200;
- color: $white;
+ color: $primary-light;
padding: .8em 1em;
text-align: center;
font-size: 1.5em;
@@ -57,7 +57,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
@include mediaQuery(small) {
flex: 1;
}
@@ -84,9 +84,9 @@
.table__row {
display: none;
font-weight: 700;
- border-bottom: 1px solid $medgrey;
- background-color: $darkbg__primary;
- color: $white;
+ border-bottom: 1px solid $border-color-01;
+ background-color: $background-05;
+ color: $primary-light;
@include mediaQuery(small) {
display: flex;
@@ -104,7 +104,7 @@
}
.table__row-uploading {
- color: $darkgrey;
+ color: $text-02;
font-weight: 700;
@include indeterminate-bar;
}
@@ -119,7 +119,7 @@
//sortable heading
.sort-heading {
position: relative;
- color: $lightblue;
+ color: $text-03;
&::after {
content: '\025be';
position: absolute;
@@ -137,12 +137,12 @@
}
&.sort-up {
&::before {
- color: $darkbg__accent;
+ color: $primary-accent;
}
}
&.sort-down {
&::after {
- color: $darkbg__accent;
+ color: $primary-accent;
}
}
}
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 79eb11e..3baa214 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -1,10 +1,13 @@
$nav__toplvlWidth: 125px;
$nav__seclvlWidth: 240px;
+$nav__top-level-color: $base-01--01;
+$nav__second-level-color: $base-02--06;
+$nav__second-level-text-color: $base-02--01;
//Navigation icons
@mixin navIcons {
- color: $white;
- fill: $white;
+ color: $primary-light;
+ fill: $primary-light;
max-height: 40px;
stroke-width: .5;
display: block;
@@ -12,13 +15,13 @@
overflow: hidden;
.st0 {
fill: none;
- stroke: $white;
+ stroke: $primary-light;
stroke-width: 2;
stroke-miterlimit: 10;
}
.st1 {
fill: none;
- stroke: $white;
+ stroke: $primary-light;
stroke-width: 4;
stroke-miterlimit: 10;
}
@@ -62,8 +65,8 @@
.button, button, a {
background: transparent;
border: 0;
- color: $white;
- fill: $white;
+ color: $primary-light;
+ fill: $primary-light;
width: 100%;
padding: 1em;
display: block;
@@ -73,52 +76,52 @@
border-radius: 0;
text-decoration: none;
border-top: 1px solid transparent;
- border-bottom: 1px solid $darkgrey;
+ border-bottom: 1px solid $border-color-02;
font-weight: normal;
font-size: .9em;
line-height: 1.2;
&:hover {
- background: $white;
- fill: $black;
- color: $medblue;
+ background: $primary-light;
+ fill: $primary-dark;
+ color: $primary-action;
padding: 1em;
border-radius: 0;
- border-bottom: 1px solid $lightgrey;
+ border-bottom: 1px solid $border-color-01;
.nav__icon-help__outer {
- stroke: $black;
+ stroke: $primary-dark;
}
.nav__icon-help__inner {
- fill: $lightbg__primary;
+ fill: $primary-action;
}
.nav-icon {
- fill: $medblue;
- color: $medblue;
+ fill: $primary-action;
+ color: $primary-action;
.st0 {
- stroke: $medblue;
+ stroke: $primary-action;
}
.st1 {
- fill: $medblue;
- color: $medblue;
- stroke: $medblue;
+ fill: $primary-action;
+ color: $primary-action;
+ stroke: $primary-action;
}
}
}
}
.opened {
background: $nav__second-level-color;
- fill: $black;
- color: darken($medblue, 10%);
- border-bottom: 1px solid $lightgrey;
+ fill: $primary-dark;
+ color: darken($primary-action, 10%);
+ border-bottom: 1px solid $border-color-01;
.nav-icon {
- fill: $medblue;
- color: $medblue;
+ fill: $primary-action;
+ color: $primary-action;
.st0 {
- stroke: $medblue;
+ stroke: $primary-action;
}
.st1 {
- fill: $medblue;
- color: $medblue;
- stroke: $medblue;
+ fill: $primary-action;
+ color: $primary-action;
+ stroke: $primary-action;
}
}
}
@@ -139,20 +142,20 @@
@include fastTransition-all;
&.opened {
left: $nav__toplvlWidth;
- box-shadow: 7px 0 28px -10px $darkgrey;
+ box-shadow: 7px 0 28px -10px $base-02--02;
@include fastTransition-all;
}
a {
padding: 1.2em 1em 1.2em 1em;
display: block;
- color: $black;
+ color: $primary-dark;
text-decoration: none;
position: relative;
font-weight: 400;
text-align: left;
border-bottom: 1px solid transparent;
&:hover {
- background: $white;
+ background: $primary-light;
}
}
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
index a709349..6f4c62e 100644
--- a/app/common/styles/elements/accordion.scss
+++ b/app/common/styles/elements/accordion.scss
@@ -5,8 +5,8 @@
padding-top: 1em;
padding-bottom: 1em;
padding-right: 1em;
- background: $darkblue;
- color: $white;
+ background: $background-05;
+ color: $primary-light;
margin-left: 0;
.event__actions {
margin-right: 10px;
@@ -21,7 +21,7 @@
.accord-trigger {
transform: rotate(90deg);
font-size: 1.5em;
- color: lighten($darkgrey, 10%);
+ color: $text-02;
padding: .3em;
display: block;
margin: 0 auto;
@@ -34,7 +34,7 @@
}
&:focus {
outline: 0;
- color: $darkbg__accent;
+ color: $primary-action;
}
}
diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss
index 8853c70..70fc247 100644
--- a/app/common/styles/elements/alerts.scss
+++ b/app/common/styles/elements/alerts.scss
@@ -1,19 +1,15 @@
//Fixed alerts
-
.alert-danger {
- background-color: $alert__danger;
- border-color: $critical-lightbg;
+ background-color: $accent-04--02;
+ border-color: $accent-04--01;
border-radius: 0;
- color: $black;
+ color: $primary-dark;
text-align: left;
}
-
.alert-warning {
- background-color: $warning-lightbg;
- border-color: $warning-border;
+ background-color: $accent-03--03;
+ border-color: $accent-03--02;
border-radius: 0;
- color: $black;
+ color: $primary-dark;
text-align: left;
}
-
-
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
index 4f4dfa4..869a4b6 100644
--- a/app/common/styles/elements/content-search.scss
+++ b/app/common/styles/elements/content-search.scss
@@ -10,7 +10,7 @@
#content__search-input {
margin: 0;
- border: 1px solid $input-border;
+ border: 1px solid $border-color-02;
padding-left: 40px;
padding-right: 5px;
height: 3em;
@@ -35,7 +35,7 @@
display: inline-block;
height: 30px;
width: 20px;
- color: $darkgrey;
+ color: $text-02;
padding: 0;
margin-right: .5em;
}
@@ -64,7 +64,7 @@
.tag-filter-label {
text-transform: uppercase;
- color: $darkgrey;
+ color: $text-02;
font-size: .7em;
font-weight: 700;
min-height: 20px;
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index c8bbfce..0588813 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -7,7 +7,6 @@
@import "loader";
@import "content-search";
@import "paginate";
-@import "tags";
@import "modals";
@import "quicklinks";
@import "toast";
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index 873e66e..d6fc2c2 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -7,8 +7,8 @@
width: 100%;
height: 100%;
z-index: 5;
- background: $darkbg__primary;
- color: $white;
+ background: $background-04;
+ color: $primary-light;
padding: 2em 2em 1.55em 2em;
overflow: hidden;
@include fastTransition-all;
@@ -20,43 +20,13 @@
// Power confirmation buttons
.inline__confirm-buttons {
- margin-left: 1.8em;
- .btn-primary {
- background: transparent;
- border: 2px solid $white;
- padding: 1em 2.2em;
- margin: 0 10px;
- &:focus,
- &.default {
- background: $primebtn__bg;
- border: 2px solid $primebtn__bg;
- }
- &:hover {
- background: darken($primebtn__bg, 10%);
- border: 2px solid $primebtn__bg;
- }
- }
@media (min-width: 900px) {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
-}
-
-// confirmation message
-.inline__confirm-message {
- display: inline-block;
- font-weight: 400;
-}
-
-// Power confirmation message icon
-.inline__confirm-message i::before {
- content: '\26A0';
- color: $status-warn;
- display: inline-block;
- font-size: 2em;
- vertical-align: middle;
- font-style: normal;
- margin-right: 15px;
+ .btn {
+ min-width: 100px!important;
+ }
}
\ No newline at end of file
diff --git a/app/common/styles/elements/loader.scss b/app/common/styles/elements/loader.scss
index 7eaea60..bfd0272 100644
--- a/app/common/styles/elements/loader.scss
+++ b/app/common/styles/elements/loader.scss
@@ -32,7 +32,7 @@
cx: 50px;
cy: 50px;
fill: transparent;
- stroke: $loaderColor;
+ stroke: $base-01--02;
stroke-width: 5px;
stroke-linecap: round;
transition: stroke-dashoffset 1s cubic-bezier(.5,.08,0,1);
@@ -45,7 +45,7 @@
position: fixed;
top: 0;
left: 0;
- background: #fefefe;
+ background: $base-02--07;
height: 100%;
z-index: 90;
width: 100%;
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 0bb81d5..87ad432 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -2,7 +2,7 @@
width: 100%;
height: 100%;
z-index: -1;
- background-color: #000;
+ background-color: $primary-dark;
position: fixed;
top: 0;
left: 0;
@@ -27,8 +27,8 @@
max-width: 850px;
min-width: 450px;
padding: .8em 1.5em;
- border: thin #000 solid;
- background-color :#fff;
+ border: thin $primary-dark solid;
+ background-color :$background-01;
z-index: 101;
position: fixed;
overflow: hidden;
@@ -55,7 +55,7 @@
top: auto;
}
.modal__content {
- border-bottom: 1px solid $lightbg__grey;
+ border-bottom: 1px solid $border-color-02;
padding-bottom: 1em;
margin-bottom: 2em;
}
@@ -92,7 +92,7 @@
}
.modal-content {
border-radius: 0;
- border-color: $black;
+ border-color: $primary-dark;
}
}
diff --git a/app/common/styles/elements/paginate.scss b/app/common/styles/elements/paginate.scss
index 461b854..49e1163 100644
--- a/app/common/styles/elements/paginate.scss
+++ b/app/common/styles/elements/paginate.scss
@@ -20,21 +20,20 @@
font-weight: 300;
padding-top: 1px;
text-decoration:none;
- border: 1px solid $medgrey;
+ border: 1px solid $border-color-01;
border-left-width: 0;
min-width:44px;
min-height:44px;
- color: $darkbg__primary;
+ color: $text-01;
}
.pagination li:not([class*="current"]) a:hover {
- background-color: $primebtn__bg;
- color: $white;
+ background-color: $primary-accent;
+ color: $primary-light;
}
.pagination li:not([class*="current"]) a:focus,
-.pagination li:not([class*="current"]) a:active {;
- //box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
+.pagination li:not([class*="current"]) a:active {
border-left-width:1px;
}
@@ -76,8 +75,8 @@
.pagination li.current a, .pagination li.active a {
padding-top:.25em;
- color: $white;
- background-color: $lightbg__primary;
+ color: $primary-light;
+ background-color: $background-05;
cursor: default;
pointer-events: none;
font-weight: 700;
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index 9fec160..9d6ea48 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -1,6 +1,6 @@
//Quick links block
.quick-links {
- background-color: $lightgrey;
+ background-color: $background-02;
padding: .5em 1em;
font-size: .9em;
font-weight: 400;
@@ -9,7 +9,7 @@
margin: 0 0 0 1em;
}
a {
- color: $black;
+ color: $primary-dark;
text-decoration: none;
display: block;
}
@@ -23,7 +23,7 @@
.quick-links__item {
padding: 1em 0 1em 0;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
position: relative;
&:after {
content: '\203A';
@@ -31,7 +31,7 @@
top: 50%;
right: 0;
font-size: 3em;
- color: lighten($darkgrey, 15%);
+ color: $text-02;
transform: translateY(-50%);
}
&.no-icon {
@@ -69,12 +69,12 @@
}
.quick-links__event-copy {
- color: $alert__error;
+ color: $status-error;
margin-bottom: 0;
font-weight: 700;
font-size: .9em;
a {
- color: $alert__error;
+ color: $status-error;
}
}
diff --git a/app/common/styles/elements/tags.scss b/app/common/styles/elements/tags.scss
deleted file mode 100644
index e6f9bc7..0000000
--- a/app/common/styles/elements/tags.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-// Tags
-
-.tag {
- font-size: .9em;
- padding: .4em .8em .2em;
- position: relative;
- display: inline-block;
- font-weight: 700;
- padding-right: 60px;
- border-radius: 3px;
- line-height: 1.5;
- overflow: hidden;
- margin: .4em .3em;
- min-width: 185px;
- text-align: left;
- &:hover {
- cursor: pointer;
- }
- &:before { // close icon
- content: '+';
- font-size: 2em;
- font-weight: 400;
- transform: rotate(45deg);
- display: inline-block;
- position: absolute;
- right: 0;
- top: 50%;
- margin-top: -18px;
- color: $darkgrey;
- height: 20px;
- width: 20px;
- }
- &:after { // white separator
- content: '';
- height: 100%;
- position: absolute;
- top: 0;
- right: 40px;
- border-left: 1px solid $white;
- }
-}
-
-//Custom tag
-.tag.custom {
- background: lighten($darkbg__primary, 65%);
-}
-
-//Event log tags
-.event__resolved {
- background: lighten($purple, 40%);
-}
-.event__unresolved {
- background: lighten($purple, 40%);
-}
-.event__high {
- background: lighten($error-color, 30%);
-}
-.event__medium{
- background: lighten($alert__warning, 30%);
-}
-.event__low {
- background: lighten($lightbg__primary, 30%);
-}
-
-// Priority tags
-.priority-tag {
- color: $white;
- font-size: .8em;
- text-transform: uppercase;
- padding: 2px 2em;
- font-weight: 700;
- line-height: inherit;
- min-width: 103px;
- text-align: center;
-
- &.high-priority {
- background: $error-color;
-
- }
- &.med-priority {
- background: $alert__warning;
-
- }
- &.low-priority {
- background: $lightbg__primary;
- }
- &.event-resolved {
- background: $purple;
- padding: 2px 1em;
- }
-}
-
-.priority-tag-circ {
- //padding: 0;
- //line-height: inherit;
- width: 20px;
- height: 20px;
- border-radius: 50%;
- background: rgba( $normal, .4);
- position: relative;
- border-width: 2px;
- border-style: solid;
- border-color: $normal;
- &.high-priority {
- color: $critical-lightbg;
- background-color: rgba( $critical-lightbg, .4 );
- background-image: url(../assets/images/crit-x.svg);
- border-color: $critical-lightbg;
- &:before {
- content: '';
- position: absolute;
- top: -11px;
- left: -3px;
- font-weight: 600;
- font-size: 1.5em;
- -webkit-font-smoothing: antialiased;
- text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
- }
- }
- &.medium-priority {
- background: rgba($severity-medium-lightbg, .5);
- border-color: rgba($severity-medium-lightbg, 1);
- }
- &.warn-priority {
- border-color: $warning-lightbg;
- background-image: url(../assets/images/warn-slash.svg);
- background-color: rgba($thresh-warning, .3);
- }
- &.normal-priority {
- background: rgba( $normal, .4);
- }
- &.disabled {
- background: rgba( $darkgrey, .2);
- border-color: rgba( $darkgrey, .2);
- }
- &.event-resolved {
- background: $purple;
- padding: 2px 1em;
- }
-}
diff --git a/app/common/styles/elements/toast.scss b/app/common/styles/elements/toast.scss
index a530472..e9b1980 100644
--- a/app/common/styles/elements/toast.scss
+++ b/app/common/styles/elements/toast.scss
@@ -11,7 +11,7 @@
max-width: 400px;
}
.alert {
- color: #333;
+ color: $text-01;
border-radius: 0;
text-align: left;
}
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index 94c94d1..88189ad 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -6,7 +6,7 @@
margin-bottom: .4em;
}
.filter-label {
- color: darken($lightgrey, 10%);
+ color: $text-02;
text-transform: uppercase;
font-weight: 700;
font-size: .75em;
@@ -22,6 +22,6 @@
}
}
.btn-primary {
- border: 2px solid $primebtn__bg;
+ border: 2px solid $primary-accent;
}
}
diff --git a/app/common/styles/elements/toggle-switch.scss b/app/common/styles/elements/toggle-switch.scss
index f24dfae..ae8c276 100644
--- a/app/common/styles/elements/toggle-switch.scss
+++ b/app/common/styles/elements/toggle-switch.scss
@@ -39,13 +39,13 @@
padding: 2px;
width: 50px;
height: 30px;
- background-color: darken($medgrey, 8%);
+ background-color: $border-color-02;
@include borderRadius;
@include marginTransition;
}
input.toggle-switch__round-flat:focus + label {
- box-shadow: 0 0 4px 4px $darkbg__accent;
+ box-shadow: 0 0 4px 4px $primary-accent;
}
input.toggle-switch__round-flat + label:before, input.toggle-switch__round-flat + label:after {
display: block;
@@ -57,7 +57,7 @@
left: 2px;
bottom: 2px;
right: 2px;
- background-color: $white;
+ background-color: $primary-light;
@include borderRadius;
@include marginTransition;
}
@@ -66,19 +66,19 @@
left: 4px;
bottom: 4px;
width: 20px;
- background-color: darken($medgrey, 8%);
+ background-color: $border-color-02;
-webkit-border-radius: 52px;
-moz-border-radius: 52px;
border-radius: 52px;
@include marginTransition;
}
input.toggle-switch__round-flat:checked + label {
- background-color: $primebtn__bg;
+ background-color: $primary-accent;
}
input.toggle-switch__round-flat:checked + label:before {
- background-color: $lightbg__accent;
+ background-color: $background-02;
}
input.toggle-switch__round-flat:checked + label:after {
margin-left: 20px;
- background-color: $primebtn__bg;
+ background-color: $primary-accent;
}
\ No newline at end of file
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 79229b6..61e082b 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -6,7 +6,7 @@
.page-header {
width: 100%;
position: relative;
- border-bottom: 1px solid $lightbg__grey;
+ border-bottom: 1px solid $border-color-02;
margin: 0.5em 0 2.2em;
padding-left: 0;
}
@@ -43,7 +43,7 @@
.content-label,
label {
- color: $darkgrey;
+ color: $text-02;
text-transform: uppercase;
font-weight: 700;
font-size: 0.75em;
@@ -52,6 +52,6 @@
.subhead {
width: 100%;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
padding-bottom: 0.5em;
}
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 034c49e..3593780 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -30,37 +30,37 @@
.header__info-section {
position: relative;
- background: $black;
- color: $white;
+ background: $primary-dark;
+ color: $primary-light;
overflow: hidden;
}
.header__logout {
float: right;
- color: $white;
+ color: $primary-light;
font-size: .9em;
text-decoration: none;
padding: 1em;
font-weight: 400;
&:visited {
- color: $white;
+ color: $primary-light;
}
}
.header__functions-section {
- color: $white;
+ color: $primary-light;
padding: 0 1.1em;
box-sizing: border-box;
display: block;
position: relative;
overflow: hidden;
min-height: 5em;
- border-bottom: 1px solid $medgrey;
- background: $white;
+ border-bottom: 1px solid $border-color-01;
+ background: $primary-light;
.header__server-name {
font-size: 1.5em;
font-weight: 500;
- color: $darkgrey;
+ color: $text-02;
padding: .4em 0 0 1em;
height: 100%;
background: transparent;
@@ -68,7 +68,7 @@
white-space: nowrap;
overflow: hidden;
.header__hostname {
- color: $black;
+ color: $primary-dark;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0;
@@ -98,7 +98,7 @@
bottom: 0;
z-index: 100;
margin: .3em 0;
- background: $white;
+ background: $primary-light;
@include fastTransition-all;
&.active {
right: 1em;
@@ -108,14 +108,14 @@
}
span {
display: block;
- color: $black;
+ color: $primary-dark;
font-size: 1em;
}
a, p {
display: block;
float: left;
text-decoration: none;
- color: $darkgrey;
+ color: $text-02;
padding: 1.250em;
height: 100%;
font-size: 0.875em;
@@ -135,15 +135,15 @@
.header__server-health,
.header__info,
.header__multi-server {
- background: $lightgrey;
+ background: $background-02;
@include round-corners;
margin: 0 .3em;
height: 100%;
- border: 1px solid $medgrey;
+ border: 1px solid $border-color-01;
opacity: 1;
@include fastTransition-all;
&:hover {
- background: rgba(255, 255, 255, 1);
+ background: $background-01;
}
}
@@ -175,7 +175,7 @@
padding: .7em 0 .3em;
font-size: 1em;
font-weight: 400;
- color: $darkgrey;
+ color: $text-02;
}
.icon-angle {
margin: 0.2em 0 0 0;
@@ -199,7 +199,7 @@
}
.header__refresh {
- color: $darkgrey;
+ color: $text-02;
line-height: 1.4;
border-radius: 6px;
span {
@@ -212,7 +212,7 @@
span {
font-size: 0.875em;
font-weight: 400;
- color: $darkgrey;
+ color: $text-02;
display: block;
margin-bottom: .2em;
}
@@ -224,7 +224,7 @@
svg {
width: 25px;
height: auto;
- fill: $color--blue-40;
+ fill: $primary-accent;
}
}
}
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;
}
diff --git a/app/login/styles/index.scss b/app/login/styles/index.scss
index 24df1b9..d8464f8 100644
--- a/app/login/styles/index.scss
+++ b/app/login/styles/index.scss
@@ -1,6 +1,6 @@
#login {
@include mediaQuery(medium) {
- background: linear-gradient(to right, #ffffff 49.999%, #e6e9ed 50%);
+ background: linear-gradient(to right, $background-01 49.999%, $background-02 50%);
@include fastTransition-all;
}
}
@@ -8,7 +8,7 @@
.login__wrapper {
position: relative;
padding-top: 1em;
- color: $black;
+ color: $primary-dark;
.row {
max-width: 1080px;
}
@@ -39,7 +39,7 @@
}
#login__form {
- color: $black;
+ color: $primary-dark;
background: transparent;
padding: 1em 0;
display: block;
@@ -59,7 +59,7 @@
input:disabled,
input:disabled:hover {
- background-color: $lightbg__grey;
+ background-color: $background-03;
cursor: default;
}
}
@@ -84,7 +84,7 @@
}
li {
padding: 1em 0;
- border-top: 1px solid $medgrey;
+ border-top: 1px solid $border-color-01;
}
p {
margin-bottom: 0;
@@ -102,6 +102,6 @@
.login__status {
color: $status-ok;
&.error {
- color: $error-color;
+ color: $status-error;
}
}
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index 3558873..ed010aa 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -3,7 +3,7 @@
}
.overview__server-metadata {
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
padding: 1.8em 0 0 0;
}
.overview__metadata-wrapper {
@@ -26,7 +26,7 @@
.overview__event-log {
padding-top: 2em;
.event__description {
- color: $black;
+ color: $primary-dark;
text-decoration: none;
}
.control-check {display: none;}
@@ -48,9 +48,9 @@
.modal__char-count,
.modal__error {
font-size: .8em;
- color: $darkgrey;
+ color: $text-02;
}
.modal__error {
- color: $error-color;
+ color: $status-error;
}
\ No newline at end of file
diff --git a/app/server-control/styles/bmc-reboot.scss b/app/server-control/styles/bmc-reboot.scss
index bd50dcc..164f8be 100644
--- a/app/server-control/styles/bmc-reboot.scss
+++ b/app/server-control/styles/bmc-reboot.scss
@@ -4,7 +4,7 @@
overflow: hidden;
padding-bottom: 1.5em;
margin-bottom: 1em;
- border-bottom: 1px solid $lightbg__grey;
+ border-bottom: 1px solid $border-color-02;
.btn {
margin-bottom: 1.5em;
margin-top: 1.5em;
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 3279914..fbc5a7f 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -4,7 +4,7 @@
// Power Current status wrapper
.power__current-status {
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
margin: 1.3em 0 1.2em 0;
}
@@ -27,7 +27,7 @@
padding: 1em 2em .7em;
margin-bottom: 3em;
background-size: 200% 100%;
- background-image: linear-gradient(to right, darken($lightgrey,3%) 50%, $status-ok-light 50%);
+ background-image: linear-gradient(to right, darken($background-02,3%) 50%, $accent-02--02 50%);
background-position: 0;
transition: background-position 2s ease;
overflow: hidden;
@@ -50,7 +50,7 @@
}
&.power__state-off {
background-position: 0;
- color: $black;
+ color: $primary-dark;
.power__state {
span:before {
content: '';
@@ -59,7 +59,7 @@
}
}
&.power__state-indet {
- color: $darkgrey;
+ color: $text-02;
@include indeterminate-bar;
.power__state {
span:before {
@@ -71,7 +71,7 @@
}
&.power__state-error {
background-position: 0;
- color: $black;
+ color: $primary-dark;
.power__state {
span:before {
content: '';
diff --git a/app/server-control/styles/power-usage.scss b/app/server-control/styles/power-usage.scss
index 59ec4e7..0f612ae 100644
--- a/app/server-control/styles/power-usage.scss
+++ b/app/server-control/styles/power-usage.scss
@@ -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/server-control/styles/remote-console.scss b/app/server-control/styles/remote-console.scss
index 2c121f4..1a5f6ae 100644
--- a/app/server-control/styles/remote-console.scss
+++ b/app/server-control/styles/remote-console.scss
@@ -10,7 +10,7 @@
}
.serial-lan__header {
- background: $white;
+ background: $primary-light;
padding-bottom: 1.2em;
line-height: 0;
}
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;
}
}
}
diff --git a/app/users/controllers/user-accounts-controller.html b/app/users/controllers/user-accounts-controller.html
index f9ff260..11cc85c 100644
--- a/app/users/controllers/user-accounts-controller.html
+++ b/app/users/controllers/user-accounts-controller.html
@@ -74,7 +74,7 @@
<label class="col-md-1 control-label" for="user-manage__passwd">Password</label>
<div class="col-md-3 user-manage__input-wrapper inline">
<input type="{{showpassword ? 'text' : 'password'}}" class="user-manage__new-password inline" name="Password" id="user-manage__passwd" ng-model="selectedUser.Password" ng-minlength="properties.MinPasswordLength" ng-maxlength="properties.MaxPasswordLength" required autocomplete="off"/>
- <button ng-model="showpassword" ng-click="togglePassword = !togglePassword; showpassword = !showpassword;" class="password-toggle">
+ <button ng-model="showpassword" ng-click="togglePassword = !togglePassword; showpassword = !showpassword;" class="btn btn-tertiary password-toggle">
<span ng-hide="togglePassword">Show</span>
<span ng-show="togglePassword">Hide</span>
</button>
@@ -89,7 +89,7 @@
<label class="col-md-1 control-label" for="user-manage__verifypasswd">Retype Password</label>
<div class="col-md-3 user-manage__input-wrapper inline">
<input type="{{showpasswordVerify ? 'text' : 'password'}}" class="user-manage__verify-password inline" name="VerifyPassword" id="user-manage__verifypasswd" ng-model="selectedUser.VerifyPassword" has-error="selectedUser.VerifyPassword != selectedUser.Password" required autocomplete="off">
- <button ng-model="showpasswordVerify" ng-click="toggleVerify = !toggleVerify; showpasswordVerify = !showpasswordVerify;" class="password-toggle">
+ <button ng-model="showpasswordVerify" ng-click="toggleVerify = !toggleVerify; showpasswordVerify = !showpasswordVerify;" class="btn btn-tertiary password-toggle">
<span ng-hide="toggleVerify">Show</span>
<span ng-show="toggleVerify">Hide</span>
</button>
diff --git a/app/users/styles/user-accounts.scss b/app/users/styles/user-accounts.scss
index f49d47c..a91bca6 100644
--- a/app/users/styles/user-accounts.scss
+++ b/app/users/styles/user-accounts.scss
@@ -1,6 +1,6 @@
.acnt-prop-header {
width: 100%;
- border-bottom: 2px solid #b8c1c1;
+ border-bottom: 2px solid $border-color-01;
margin: 0px 0px 15px;
}
.user-manage__form {
@@ -23,7 +23,7 @@
display: block;
padding-left: 1.5em;
margin-bottom: 1em;
- border-bottom: 1px solid $medgrey;
+ border-bottom: 1px solid $border-color-01;
}
.acnt-prop__input-wrapper,
.user-manage__input-wrapper {
@@ -42,7 +42,6 @@
right: 20px;
top: .6em;
padding: 3px;
- color: $primebtn__bg;
font-size: .8em;
}
.acnt-prop__submit-wrapper,
@@ -50,24 +49,24 @@
width: 100%;
margin-top: 6px;
padding-top: 1px;
- border-top: 1px solid $medgrey;
+ border-top: 1px solid $border-color-01;
button {
float: right;
margin: .5em;
}
}
.user-manage__error {
- background: lighten($error-color, 20%);
+ background: lighten($status-error, 20%);
padding: 1em;
text-align: center;
font-size: 1em;
- border: 1px solid $error-color;
- color: $black;
+ border: 1px solid $status-error;
+ color: $primary-dark;
font-family: "Courier New", Helvetica, Arial, sans-serif;
font-weight: 700;
}
.user-manage__success {
- color: $primebtn__bg;
+ color: $primary-accent;
padding: 1em;
font-size: 1em;
font-family: "Courier New", Helvetica, Arial, sans-serif;