diff options
Diffstat (limited to 'app/common')
26 files changed, 265 insertions, 494 deletions
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-20: #F0F2F5; $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--teal-20: #CCF0F5; $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; - -// Dark background -$darkbg__grey: #E3ECEC; -$darkbg__accent: #79a6f6; -$darkbg__primary: #19273c; - -//Disabled table elements -$disabled-row: #dddee0; -$disabled-row-txt: $color--grey-60; - -//Forms -$input-border: #a7a7a7; - -// Light Background -$lightbg__grey: #b8c1c1; -$lightbg__accent: #d8e2fc; -$lightbg__primary: $color--blue-40; - -// Primary Button colors -$primebtn__bg: $color--blue-40; -$primebtn__text: $white; - -// 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; +$primary-light: $base-02--08; +$primary-dark: $base-02--01; +$primary-accent: $base-01--03; + +$primary-action: $base-01--03; +$primary-action--hover: $base-01--04; + +$text-01: $base-02--01; +$text-02: $base-02--02; +$text-03: $base-02--06; + +$background-01: $primary-light; +$background-02: $base-02--06; +$background-03: $base-02--05; +$background-04: $base-01--01; +$background-05: $base-01--02; + +$border-color-01: $base-02--05; +$border-color-02: $base-02--03; + +$box-shadow-color: $base-02--05; + +$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 @@ html, body { @include fontFamily; font-size: 16px; font-weight: 400; - color: $black; + color: $primary-dark; } p { @@ -11,19 +11,20 @@ p { 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 @@ label, legend { 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='date'], 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 @@ textarea { } //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 @@ select{ 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 @@ select{ } } .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 @@ h3, h4, h5 { line-height: 1.25; - color: #333; + color: $text-01; } h1, .h1 { @@ -44,7 +44,7 @@ h4, .h4 { 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 @@ $nav__seclvlWidth: 240px; 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 @@ $nav__seclvlWidth: 240px; .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 @@ $nav__seclvlWidth: 240px; 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 @@ $nav__seclvlWidth: 240px; @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 @@ input.toggle-switch__round-flat + label { 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 @@ input.toggle-switch__round-flat + label:before { left: 2px; bottom: 2px; right: 2px; - background-color: $white; + background-color: $primary-light; @include borderRadius; @include marginTransition; } @@ -66,19 +66,19 @@ input.toggle-switch__round-flat + label:after { 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 @@ $nav__seclvlWidth: 240px; .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 @@ $nav__seclvlWidth: 240px; .content-label, label { - color: $darkgrey; + color: $text-02; text-transform: uppercase; font-weight: 700; font-size: 0.75em; @@ -52,6 +52,6 @@ label { .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 @@ $logoMaxWidth: 125px; .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 @@ $logoMaxWidth: 125px; 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 @@ $logoMaxWidth: 125px; bottom: 0; z-index: 100; margin: .3em 0; - background: $white; + background: $primary-light; @include fastTransition-all; &.active { right: 1em; @@ -108,14 +108,14 @@ $logoMaxWidth: 125px; } 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 @@ $logoMaxWidth: 125px; .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 @@ $logoMaxWidth: 125px; 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 @@ $logoMaxWidth: 125px; } .header__refresh { - color: $darkgrey; + color: $text-02; line-height: 1.4; border-radius: 6px; span { @@ -212,7 +212,7 @@ $logoMaxWidth: 125px; span { font-size: 0.875em; font-weight: 400; - color: $darkgrey; + color: $text-02; display: block; margin-bottom: .2em; } @@ -224,7 +224,7 @@ $logoMaxWidth: 125px; svg { width: 25px; height: auto; - fill: $color--blue-40; + fill: $primary-accent; } } } |
