From 96044658e8801474fd7ddbb5e1c6ce7cf3d3139b Mon Sep 17 00:00:00 2001 From: Ishan Rai Date: Mon, 25 May 2020 06:53:12 +0000 Subject: [PATCH] mgr/dashboard: use bootstrap variables for colors Fixes: https://tracker.ceph.com/issues/38891 Signed-off-by: Ishan Rai --- .../cephfs-directories.component.scss | 6 ++++-- .../src/app/core/auth/login/login.component.scss | 2 +- .../src/app/core/navigation/about/about.component.scss | 10 ++++++---- .../navigation/navigation/navigation.component.scss | 10 +++++----- .../notifications/notifications.component.scss | 2 +- src/pybind/mgr/dashboard/frontend/src/styles.scss | 10 +++++----- .../mgr/dashboard/frontend/src/styles/defaults.scss | 7 ++++++- 7 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss index 33d580283df..948900bff8e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-directories/cephfs-directories.component.scss @@ -1,3 +1,5 @@ +@import 'defaults.scss'; + // Angular2-Tree Component ::ng-deep tree-root { .tree-children { @@ -7,8 +9,8 @@ .quota-origin { &:hover { - color: #212121; + color: $color-gray13; } cursor: pointer; - color: #2b99a8; + color: $color-brand-teal; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss index 0c99ccaf798..94d943cc803 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.scss @@ -6,7 +6,7 @@ } .form-group { - border-left: 4px solid white; + border-left: 4px solid $color-solid-white; background-color: $color-password-toggle-bg; height: auto; margin-bottom: 2rem; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss index b845113944c..c9af5b164c4 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/about/about.component.scss @@ -1,10 +1,12 @@ +@import 'defaults.scss'; + .about-container { - background-color: #374249; + background-color: $color-secondary; background-image: url('assets/ceph_background.gif'); background-position: right bottom; background-repeat: no-repeat; - color: #fff; - text-shadow: 1px 1px #374249; + color: $color-solid-white; + text-shadow: 1px 1px $color-secondary; } .product-versions { margin-top: 30px; @@ -16,7 +18,7 @@ border-bottom: none; } .modal-header .close { - color: #fff; + color: $color-solid-white; font-size: 2em; } .modal-body { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss index c3c0f942f6d..b64837b5b9c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss @@ -161,7 +161,7 @@ $sidebar-width: 200px; bottom: 0; left: 0; z-index: 999; - color: #fff; + color: $color-solid-white; transition: all 0.3s; &.active { @@ -175,7 +175,7 @@ $sidebar-width: 200px; } p { - color: #fff; + color: $color-solid-white; padding: 10px; } @@ -183,10 +183,10 @@ $sidebar-width: 200px; padding: 10px; font-size: 1.1em; display: block; - color: #fff; + color: $color-solid-white; &:hover { - color: #fff; + color: $color-solid-white; background: $color-primary; } @@ -199,7 +199,7 @@ $sidebar-width: 200px; li.active > a, li > a a[aria-expanded='true'] { - color: #fff; + color: $color-solid-white; } } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss index 5c7eb75377f..d86ba90bccc 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss @@ -5,5 +5,5 @@ } .running:hover i { - color: white; + color: $color-solid-white; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index ab63ed5ae57..7b9d975ffe0 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -299,9 +299,9 @@ a { display: table-cell; &:focus { - border-color: rgba($color-primary, 0.8); + border-color: $color-primary-transparent; outline: 0; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px 2px rgba($color-primary, 0.5); + box-shadow: inset 0 1px 1px $color-transparent-black1, 0 0 8px 2px $color-primary-transparent1; } } @@ -388,9 +388,9 @@ cd-modal { } .tooltip-inner { - background-color: white; - border: 1px solid grey; - color: #333; + background-color: $color-solid-white; + border: 1px solid $color-gray20; + color: $color-gray13; font-size: 1.1em; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss index afbb031ceb9..98a6fcf69f7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss @@ -34,9 +34,10 @@ $color-sky-blue: #afd9ee !default; $color-black: #000 !default; $color-transparent-black: rgba(0, 0, 0, 0.7) !default; +$color-transparent-black1: rgba(0, 0, 0, 0.075) !default; $color-solid-gray: #555555 !default; $color-dark-gray: #474544 !default; -// $color-gray: #505050 !default; +$color-gray: #808080 !default; $color-mild-gray: #777777 !default; $color-blue-gray: #90949c !default; $color-grad-gray: #ededed !default; @@ -45,6 +46,8 @@ $color-light-gray: #d1d1d1 !default; $color-soft-gray: #ddd !default; $color-white-gray: #eee !default; $color-shade-gray: #efefef !default; +$color-gray13: #212121; +$color-gray20: #333333 !default; $color-light-shade-gray: #f3f3f3 !default; $color-whitesmoke-gray: #f5f5f5 !default; $color-solid-white: #ffffff !default; @@ -58,6 +61,8 @@ $color-mirage-gray: #333e46 !default; $color-primary: $color-brand-teal !default; $color-secondary: $color-brand-gray !default; $color-accent: #ef5c55 !default; +$color-primary-transparent: rgba($color-primary, 0.8); +$color-primary-transparent1: rgba($color-primary, 0.5); $color-app-bg: $color-solid-white !default; // $color-bg-darken: $color-dark-gray !default; -- 2.47.3