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 <skrah@suse.com>

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 e27c9b301e0ef05b24ba09394dba4e11dd9b0eeb..40a8a25603fbb19d7b0212390f8e332fbed7da56 100644 (file)
--- 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 1dcd954b032879966d9dd29cdc90105618213717..9a04f3efb17efe05a2e1b8a8434d35155c7ab24f 100644 (file)
--- 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 2ebe5e1b6574a6589e6d69445a39f2d8fff59618..876b42b626ba767d96d63becb31a78e0135d1634 100644 (file)
--- 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;