From c43b5b94404283d416159051e44f4e1f316095fb Mon Sep 17 00:00:00 2001 From: Sebastian Krah Date: Tue, 15 Jan 2019 11:15:20 +0100 Subject: [PATCH] mgr/dashboard: Introduce new scss variable Adds a new scss variable called color-primary that the primary color only has to be changed at one point Signed-off-by: Sebastian Krah --- .../pool/pool-list/pool-list.component.scss | 2 +- .../mgr/dashboard/frontend/src/defaults.scss | 44 ++++++++++--------- .../mgr/dashboard/frontend/src/styles.scss | 13 +++++- 3 files changed, 35 insertions(+), 24 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss index e27c9b301e0..40a8a25603f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/pool/pool-list/pool-list.component.scss @@ -5,7 +5,7 @@ } ::ng-deep .pg-working { - color: $color-blue; + color: $color-primary; } ::ng-deep .pg-warning { diff --git a/src/pybind/mgr/dashboard/frontend/src/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/defaults.scss index 1dcd954b032..9a04f3efb17 100644 --- a/src/pybind/mgr/dashboard/frontend/src/defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/defaults.scss @@ -12,8 +12,6 @@ $color-light-yellow: #fff3cd; $color-bright-green: #00bb00; $color-green: #71843f; -$color-darker-blue: #2172bf; -$color-dark-blue: #2582d9; $color-blue: #288cea; $color-light-blue: #d9edf7; $color-sky-blue: #afd9ee; @@ -35,25 +33,29 @@ $color-light-shade-gray: #f3f3f3; $color-whitesmoke-gray: #f5f5f5; $color-solid-white: #ffffff; $color-transparent: rgba(0, 0, 0, 0.09); +$color-brand-teal: #2b99a8; $color-brand-gray: #374249; -$color-brand-green: #2b99a8; + +$color-primary: #2b99a8; //$color-blue - ceph=$color-brand-teal - suse=#00C081 +$color-secondary: #0d2c40; //$color-dark-gray - ceph=$color-brand-gray - suse=#0D2C40 +$color-accent: #00b2e2; // ceph=#ef5c55 - suse=#00b2e2 $color-app-bg: $color-solid-white; $color-bg-darken: $color-dark-gray; -$color-links: $color-blue; +$color-links: $color-primary; $color-links-focus: $color-dark-gray; $color-breadcrumb: $color-dark-gray; $color-button-text: $color-white-gray; -$color-button: $color-blue; -$color-button-hover: $color-dark-blue; -$color-button-border: $color-darker-blue; +$color-button: $color-primary; +$color-button-hover: darken($color-primary, 3); +$color-button-border: darken($color-primary, 6); $color-button-badge: $color-white-gray; $color-button-caret: $color-white-gray; $color-dropdown-menu: $color-dark-gray; $color-dropdown-active-text: $color-white-gray; -$color-dropdown-active-bg: $color-blue; +$color-dropdown-active-bg: $color-primary; $color-caret-text: $color-solid-white; -$color-progress-bar-info-bg: $color-blue; +$color-progress-bar-info-bg: $color-primary; $color-progress-bar-freespace-bg: $color-light-gray; $color-oaprogress-text: $color-black; $color-tags-border: $color-light-gray; @@ -68,9 +70,9 @@ $color-login-row-text: $color-solid-white; $color-login-row-bg: $color-dark-gray; $color-password-toggle-text: $color-solid-white; $color-password-toggle-bg: $color-solid-gray; -$color-password-toggle-focus: $color-blue; -$color-login-checkbox-bg: $color-blue; -$color-login-checkbox-border: $color-blue; +$color-password-toggle-focus: $color-primary; +$color-login-checkbox-bg: $color-primary; +$color-login-checkbox-border: $color-primary; $color-login-active-row-bg: $color-light-yellow; $color-login-active-row-text: $color-black; @@ -84,21 +86,21 @@ $color-info-card-background: $color-whitesmoke-gray; $color-info-card-border: $color-soft-gray; /*Navigation*/ -$color-navbar-bg: $color-brand-gray; +$color-navbar-bg: $color-secondary; $color-navbar-brand: $color-white-gray; -$color-nav-top-bar: $color-blue; -$color-nav-bottom-bar: $color-brand-green; +$color-nav-top-bar: $color-primary; +$color-nav-bottom-bar: $color-primary; $color-nav-toggle-bar: $color-white-gray; $color-nav-toggle-shadow: $color-solid-white; $color-nav-collapse-border: $color-white-gray; -$color-nav-open-bg: $color-brand-green; +$color-nav-open-bg: $color-primary; $color-nav-links: $color-white-gray; -$color-nav-links-hover: $color-brand-green; -$color-nav-active-link-bg: $color-blue; +$color-nav-links-hover: $color-primary; +$color-nav-active-link-bg: $color-primary; $color-nav-border-top-collapse: $color-white-gray; /*Helper*/ -$color-helper-bg: $color-blue; +$color-helper-bg: $color-primary; /*Table*/ $color-table-seperator-border: $color-transparent; @@ -109,10 +111,10 @@ $color-table-header-border: $color-light-gray; $color-table-active-row: $color-sky-blue; $color-table-active-row-hover: $color-light-blue; $color-table-progress-bar-bg: $color-sky-blue; -$color-table-progress-bar-active: $color-blue; +$color-table-progress-bar-active: $color-primary; $color-table-gradient-1: $color-whitesmoke-gray; $color-table-gradient-2: $color-grad-gray; -$color-table-sort: $color-blue; +$color-table-sort: $color-primary; $color-table-empty-row: $color-light-yellow; $color-table-hover-row: $color-white-gray; $color-table-even-row-bg: $color-solid-white; diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index 2ebe5e1b657..876b42b626b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -117,11 +117,11 @@ fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { - background-color: $color-blue; + background-color: $color-primary; border-color: $color-button-border; } .btn-primary .badge { - color: $color-blue; + color: $color-primary; background-color: $color-button-badge; } .btn-primary .caret { @@ -287,6 +287,15 @@ uib-accordion .panel-title, padding-left: 4px; vertical-align: text-top; } +.form-control { + display: table-cell; + + &:focus { + border-color: rgba($color-primary, 0.8); + outline: 0; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px 2px rgba($color-primary, 0.5); + } +} /* Panel */ .panel-footer button.btn:not(:first-child) { margin-left: 5px; -- 2.39.5