mgr/dashboard: Introduces SASS modules

Fixes: https://tracker.ceph.com/issues/45934
Signed-off-by: Enno Gotthold <egotthold@suse.de>

diff --git a/src/pybind/mgr/dashboard/frontend/.stylelintrc b/src/pybind/mgr/dashboard/frontend/.stylelintrc
index 1d2dde45254d71017c28222d50d6d97d3b4deaa0..244a8f22cdfc55835b5f72c84285382ccfe3c44f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/.stylelintrc
+++ b/src/pybind/mgr/dashboard/frontend/.stylelintrc
@@ -27,7 +27,8 @@
             "inherit",
             "initial",
             "transparent",
-            "/darken/"
+            "/darken/",
+            "/\\w+\\.\\$.+/"
           ]
         }
       ]

diff --git a/src/pybind/mgr/dashboard/frontend/angular.json b/src/pybind/mgr/dashboard/frontend/angular.json
index 6ed23a879eaf29cfc589faa441fbcd1d4b35c844..73d9118ec169804b5e29b89019e99bde55695dd4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/angular.json
+++ b/src/pybind/mgr/dashboard/frontend/angular.json
@@ -51,15 +51,13 @@
             ],
             "styles": [
               "node_modules/ngx-toastr/toastr.css",
-              "src/styles.scss",
-              "src/styles/vendor.overrides.scss"
+              "src/styles.scss"
             ],
             "scripts": [
               "node_modules/chart.js/dist/Chart.bundle.js"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
-                "src/styles",
                 "src"
               ]
             }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
index 753313a64cbbe38bf96f077dfc64c5814b50e994..f90af6f5a917fec944b520779097a15b65642c25 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cephfs/cephfs-chart/cephfs-chart.component.scss
@@ -1,4 +1,4 @@
-@import 'chart-tooltip.scss';
+@use './src/styles/chart-tooltip';
 
 .chart-container {
   height: 500px;

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 6e684fd6e7b84b4b89cee5f338b24be34b976e39..040c588dc865667e8aef27ccc0a796e838c2a815 100644 (file)
--- 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,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 // Angular2-Tree Component
 ::ng-deep tree-root {
@@ -8,10 +8,10 @@
 }
 
 .quota-origin {
-  color: $color-brand-teal;
+  color: bd.$color-brand-teal;
   cursor: pointer;
 
   &:hover {
-    color: $color-gray13;
+    color: bd.$color-gray13;
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
index 023ea6a03e443bb0db0ceaee51fa42fba1d58a59..d916170dc9764d18ca400f56de13773a5991732a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.scss
@@ -1,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 p {
   font-family: monospace;
@@ -27,15 +27,15 @@ p {
   }
 
   .err {
-    color: $color-pink;
+    color: bd.$color-pink;
   }
 
   .warn {
-    color: $color-bright-yellow;
+    color: bd.$color-bright-yellow;
   }
 
   .info {
-    color: $color-brand-teal;
+    color: bd.$color-brand-teal;
   }
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss
index 81c57a4d06a51c3018262f26c11e30cf5ff597a0..64e7a9822e22dd3bf8d7e411c2d131827ba57b11 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health-pie/health-pie.component.scss
@@ -1,4 +1,4 @@
-@import 'chart-tooltip.scss';
+@use './src/styles/chart-tooltip';
 
 $canvas-width: 100%;
 $canvas-height: 100%;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
index 4b76b22867703433c4ac21a07f7cf2934df09034..c89a4c1541da582cd39cc9a0e3a7285bdb1bd1ea 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/health/health.component.scss
@@ -1,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 cd-info-card {
   padding: 0 0.5vw;
@@ -27,7 +27,7 @@ cd-info-card {
 }
 
 .card-text-error {
-  color: $color-solid-red;
+  color: bd.$color-solid-red;
   display: inline;
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
index 164c74d196dbeb680dfa329ab7a516d49baf0f1f..4680dafe4026d44006b569c7cfd8f8b97dbb223f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card-popover.scss
@@ -1,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .info-card-popover-cluster-status {
   max-height: 20vh;
@@ -11,32 +11,31 @@
   }
 }
 
-@media (max-width: $screen-lg-max) {
+@media (max-width: bd.$screen-lg-max) {
   .info-card-popover-cluster-status {
     max-width: 31vw;
   }
 }
 
-@media (max-width: $screen-md-max) {
+@media (max-width: bd.$screen-md-max) {
   .info-card-popover-cluster-status {
     max-width: 46vw;
   }
 }
-@media (max-width: $screen-sm-max) {
+@media (max-width: bd.$screen-sm-max) {
   .info-card-popover-cluster-status {
     max-width: 83vw;
   }
 }
 
 .info-card-content-clickable {
-  border: 1px solid;
-  border-color: $color-shade-gray;
+  border: 1px solid bd.$color-shade-gray;
   border-radius: 3px;
   cursor: pointer;
   padding: 7px;
 }
 
 .info-card-content-clickable:hover {
-  background-color: $color-light-shade-gray;
-  border-color: $color-light-gray;
+  background-color: bd.$color-light-shade-gray;
+  border-color: bd.$color-light-gray;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
index c04a400e43df4424c4b7a94483f57805d966b89b..d1426d61bf8a528b5635dd50cdd23dc6f8c7d3ba 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss
@@ -1,4 +1,5 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/defaults/mixins';
 
 $card-font-min-width: 320px;
 $card-font-max-width: 2048px;
@@ -6,15 +7,15 @@ $card-font-min-size: 12px;
 $card-font-max-size: 21px;
 
 .card {
-  @include fluid-font-size(
+  @include mixins.fluid-font-size(
     $card-font-min-width,
     $card-font-max-width,
     $card-font-min-size,
     $card-font-max-size
   );
-  border: 0.5px solid $color-info-card-border;
+  border: 0.5px solid bd.$color-info-card-border;
   border-radius: 3px;
-  box-shadow: 0 1px 1px $color-shadow-gray;
+  box-shadow: 0 1px 1px bd.$color-shadow-gray;
   height: 100%;
 
   .card-body {

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 252903bee975ad0340e9defa6dd4ff9226b903f5..168b878e6cb8e2dbbdf889a56b05f4754841019f 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
@@ -1,17 +1,17 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 ::ng-deep .pg-clean {
-  color: $color-bright-green;
+  color: bd.$color-bright-green;
 }
 
 ::ng-deep .pg-working {
-  color: $color-primary;
+  color: bd.$color-primary;
 }
 
 ::ng-deep .pg-warning {
-  color: $color-bright-yellow;
+  color: bd.$color-bright-yellow;
 }
 
 ::ng-deep .pg-unknown {
-  color: $color-solid-red;
+  color: bd.$color-solid-red;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
index b99d90528793affc48ee74dd4eb015cf3f233396..a141e275f88f43fdb613148abbaf31b84270f27c 100755 (executable)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login-password-form/login-password-form.component.scss
@@ -1,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 ::ng-deep cd-login-password-form {
   h4 {
@@ -9,16 +9,16 @@
   .btn-password:focus,
   .form-control,
   .form-control:focus {
-    background-color: $color-password-toggle-bg;
-    color: $color-password-toggle-text;
+    background-color: bd.$color-password-toggle-bg;
+    color: bd.$color-password-toggle-text;
   }
 
   .form-control::placeholder {
-    color: $color-password-toggle-placeholder-text;
+    color: bd.$color-password-toggle-placeholder-text;
   }
 
   .btn-password:focus {
-    outline-color: $color-password-toggle-focus;
+    outline-color: bd.$color-password-toggle-focus;
   }
 
   button.btn:not(:first-child) {

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 3685a06eca17855018c2631a2048af954ee6ffc9..3e84175a425ade3fe43ab0ef19228844450660a9 100644 (file)
--- 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
@@ -1,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 ::ng-deep cd-login {
   h1 {
@@ -6,13 +6,13 @@
   }
 
   .form-group {
-    background-color: $color-password-toggle-bg;
-    border-left: 4px solid $color-solid-white;
+    background-color: bd.$color-password-toggle-bg;
+    border-left: 4px solid bd.$color-solid-white;
     height: auto;
     margin-bottom: 2rem;
 
     &:focus-within {
-      border-left: 4px solid $color-accent;
+      border-left: 4px solid bd.$color-accent;
     }
 
     .invalid-feedback {
@@ -24,28 +24,28 @@
   .btn-password:focus,
   .form-control,
   .form-control:focus {
-    background-color: $color-password-toggle-bg;
+    background-color: bd.$color-password-toggle-bg;
     border: 0;
     box-shadow: none;
-    color: $color-password-toggle-text;
+    color: bd.$color-password-toggle-text;
     filter: none;
     outline: none;
   }
 
   .placeholder {
-    color: $color-password-toggle-placeholder-text;
+    color: bd.$color-password-toggle-placeholder-text;
   }
 
   .btn-password:focus {
-    outline-color: $color-password-toggle-focus;
+    outline-color: bd.$color-password-toggle-focus;
   }
 }
 
 // This will override the colors applied by chrome
 @keyframes autofill {
   to {
-    background-color: $color-password-toggle-bg;
-    color: $color-password-toggle-text;
+    background-color: bd.$color-password-toggle-bg;
+    color: bd.$color-password-toggle-text;
   }
 }
 
@@ -53,7 +53,7 @@ input:-webkit-autofill {
   animation-fill-mode: both;
   animation-name: autofill;
   border-radius: 0;
-  box-shadow: 0 0 0 1000px $color-password-toggle-bg inset;
-  -webkit-text-fill-color: $color-password-toggle-text;
+  box-shadow: 0 0 0 1000px bd.$color-password-toggle-bg inset;
+  -webkit-text-fill-color: bd.$color-password-toggle-text;
   transition-property: none;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss
index ad27bd32273e924d6a7e704a0789dd53a7447e10..1eeaca9149a083aa6937d6b283c7f5e83351d8b7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/role-details/role-details.component.scss
@@ -1,13 +1,13 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 thead {
-  background-color: $color-table-header-bg;
+  background-color: bd.$color-table-header-bg;
 }
 
 .fa {
   font-size: large;
 
   &.fa-square-o {
-    color: $color-light-gray;
+    color: bd.$color-light-gray;
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss
index e5fbfa446aad85342d01512d237117fc4069744e..360d553692273b502a79047c72feb349e289cb95 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/blank-layout/blank-layout.component.scss
@@ -1,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 ::ng-deep #toast-container {
   margin-top: 2vw;
@@ -7,7 +7,7 @@
     margin-top: 2.5vw;
   }
 
-  @media (max-width: $screen-md-max) {
+  @media (max-width: bd.$screen-md-max) {
     margin-top: 9vw;
   }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
index df7819c0ded8796f9bb94bf908cf230423485ed5..956fb5abe87da3e07bd4765fe96230b4d38724af 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/login-layout/login-layout.component.scss
@@ -1,11 +1,11 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 ::ng-deep .login {
-  background-color: $color-login-row-bg;
+  background-color: bd.$color-login-row-bg;
   background-image: url('assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: $color-login-row-text;
+  color: bd.$color-login-row-text;
 
   header {
     position: absolute;
@@ -19,7 +19,7 @@
 
         li a {
           &:hover {
-            background-color: $color-brand-teal;
+            background-color: bd.$color-brand-teal;
           }
         }
       }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
index 71366d038350f04cde0356f9a26f98b3e22a882d..3de3264f199f638a3a01e37f0a9c60c8dd5eaa7f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
@@ -1,7 +1,7 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .dashboard {
-  background-color: $color-whitesmoke-gray;
+  background-color: bd.$color-whitesmoke-gray;
   margin: 0;
   padding: 0;
 }
@@ -17,7 +17,7 @@
     margin-top: 2.5vw;
   }
 
-  @media (max-width: $screen-md-max) {
+  @media (max-width: bd.$screen-md-max) {
     margin-top: 9vw;
   }
 

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 25b862564aaff5cd80221d0b940201bdf08ddc6e..10cfaa89c34a68d050dcbf0fc8e19c56473d68b9 100644 (file)
--- 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,12 +1,12 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .about-container {
-  background-color: $color-secondary;
+  background-color: bd.$color-secondary;
   background-image: url('assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: $color-solid-white;
-  text-shadow: 1px 1px $color-secondary;
+  color: bd.$color-solid-white;
+  text-shadow: 1px 1px bd.$color-secondary;
 }
 
 .product-versions {
@@ -22,7 +22,7 @@
 }
 
 .modal-header .close {
-  color: $color-solid-white;
+  color: bd.$color-solid-white;
   font-size: 2em;
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
index 89e7a715c2f3e24970c5b6ed6a3d4898fcdf42a9..979fa9c2e85a6ce8cd9dc9b08a6212640ec38dea 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/breadcrumbs/breadcrumbs.component.scss
@@ -1,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .breadcrumb {
   background-color: transparent;
@@ -8,12 +8,12 @@
 }
 
 .breadcrumb > li + li::before {
-  color: $color-breadcrumb;
+  color: bd.$color-breadcrumb;
   content: '\f101';
   font-family: 'ForkAwesome';
   padding: 0 5px 0 7px;
 }
 
 .breadcrumb > li > span {
-  color: $color-breadcrumb;
+  color: bd.$color-breadcrumb;
 }

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 c928dd9b8417d27de77afc01c7d611d2557b8d96..d905f52067c2a5ecd28eb7a8c6e764d28840ab99 100644 (file)
--- 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
@@ -1,4 +1,4 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 /* ---------------------------------------------------
     NAVBAR STYLE
@@ -6,16 +6,16 @@
 
 ::ng-deep .cd-navbar-top {
   .cd-navbar-brand {
-    background: $color-navbar-bg;
-    border-top: 4px solid $color-nav-top-bar;
+    background: bd.$color-navbar-bg;
+    border-top: 4px solid bd.$color-nav-top-bar;
 
     &.isPwdDisplayed {
-      top: $top-notification-height;
+      top: bd.$top-notification-height;
     }
 
     .navbar-brand,
     .navbar-brand:hover {
-      color: $color-navbar-brand;
+      color: bd.$color-navbar-brand;
       height: auto;
       padding: 0;
     }
@@ -33,7 +33,7 @@
       }
 
       .fa-navicon {
-        color: $color-nav-toggle-bar;
+        color: bd.$color-nav-toggle-bar;
       }
     }
 
@@ -42,8 +42,8 @@
     }
 
     .cd-navbar-utility > .active > a {
-      background-color: $color-nav-links-hover;
-      color: $color-nav-links;
+      background-color: bd.$color-nav-links-hover;
+      color: bd.$color-nav-links;
     }
 
     .cd-navbar-utility > li > .open > a,
@@ -51,14 +51,14 @@
     .cd-navbar-utility > li > .open > a:hover {
       background-color: transparent;
       border-color: transparent;
-      color: $color-nav-links;
+      color: bd.$color-nav-links;
     }
   }
 
   .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
   .navbar-nav > li > .cd-navbar > a,
   .navbar-nav > li > a {
-    color: $color-nav-links;
+    color: bd.$color-nav-links;
     display: block;
     line-height: 1;
     padding: 13.5px 18px !important;
@@ -68,7 +68,7 @@
 
   .navbar-nav .nav-link,
   .navbar-nav .nav-link:hover {
-    color: $color-nav-links;
+    color: bd.$color-nav-links;
   }
 
   .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover,
@@ -76,7 +76,7 @@
   .navbar-nav > li > .cd-navbar > a:hover,
   .navbar-nav > li > a:hover,
   .navbar-nav > li:hover {
-    background-color: $color-nav-links-hover;
+    background-color: bd.$color-nav-links-hover;
   }
 
   .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
@@ -90,10 +90,10 @@
   .navbar-nav > .open > a:hover {
     background-color: transparent;
     border-color: transparent;
-    color: $color-nav-links;
+    color: bd.$color-nav-links;
   }
 
-  @media (min-width: $screen-md-min) {
+  @media (min-width: bd.$screen-md-min) {
     .cd-navbar-utility {
       border-bottom: 0;
       font-size: 1.1rem;
@@ -103,7 +103,7 @@
     }
   }
 
-  @media (max-width: $screen-sm-max) {
+  @media (max-width: bd.$screen-sm-max) {
     .navbar-nav {
       margin: 0;
 
@@ -112,24 +112,24 @@
       }
 
       .open .dropdown-menu {
-        background-color: $color-nav-open-bg;
+        background-color: bd.$color-nav-open-bg;
         border: 0;
         padding-bottom: 0;
         padding-top: 0;
       }
 
       .open .dropdown-menu > li > a {
-        color: $color-nav-links;
+        color: bd.$color-nav-links;
         padding: 5px 15px 5px 35px;
       }
 
       .open .dropdown-menu > .active > a {
-        background-color: $color-nav-active-link-bg;
+        background-color: bd.$color-nav-active-link-bg;
       }
+    }
 
-      > li > a:hover {
-        background-color: $color-nav-active-link-bg;
-      }
+    .navbar-nav > li > a:hover {
+      background-color: bd.$color-nav-active-link-bg;
     }
   }
 }
@@ -143,9 +143,9 @@ $sidebar-width: 200px;
 .cd-navbar-primary .active > a,
 .cd-navbar-primary > .active > a:focus,
 .cd-navbar-primary > .active > a:hover {
-  background-color: $color-nav-links-hover !important;
+  background-color: bd.$color-nav-links-hover !important;
   border: 0 !important;
-  color: $color-nav-links !important;
+  color: bd.$color-nav-links !important;
 }
 
 .wrapper {
@@ -153,13 +153,13 @@ $sidebar-width: 200px;
   width: 100%;
 
   #sidebar {
-    background: $color-navbar-bg;
+    background: bd.$color-navbar-bg;
     bottom: 0;
-    color: $color-solid-white;
+    color: bd.$color-solid-white;
     left: 0;
     overflow-y: auto;
     position: fixed;
-    top: $navbar-height;
+    top: bd.$navbar-height;
     transition: all 0.3s;
     width: $sidebar-width;
     z-index: 999;
@@ -175,12 +175,12 @@ $sidebar-width: 200px;
       }
 
       p {
-        color: $color-solid-white;
+        color: bd.$color-solid-white;
         padding: 10px;
       }
 
       li a {
-        color: $color-solid-white;
+        color: bd.$color-solid-white;
         display: block;
         font-size: 1.1em;
         padding: 10px;
@@ -188,8 +188,8 @@ $sidebar-width: 200px;
         text-decoration: none;
 
         &:hover {
-          background: $color-primary;
-          color: $color-solid-white;
+          background: bd.$color-primary;
+          color: bd.$color-solid-white;
         }
 
         > .badge {
@@ -199,7 +199,7 @@ $sidebar-width: 200px;
 
       li.active > a,
       li > a a[aria-expanded='true'] {
-        color: $color-solid-white;
+        color: bd.$color-solid-white;
       }
     }
   }
@@ -223,7 +223,7 @@ $sidebar-width: 200px;
   }
 
   ul ul a {
-    background: lighten($color-navbar-bg, 10);
+    background: lighten(bd.$color-navbar-bg, 10);
     font-size: 0.9em !important;
     padding-left: 30px !important;
   }
@@ -245,7 +245,7 @@ $sidebar-width: 200px;
   bottom: 0;
   position: absolute;
   right: 0;
-  top: $navbar-height;
+  top: bd.$navbar-height;
   transition: all 0.3s;
   width: calc(100% - #{$sidebar-width});
 
@@ -261,19 +261,19 @@ $sidebar-width: 200px;
 @for $i from 1 through 2 {
   :host.top-notification-#{$i} {
     .cd-navbar-top .cd-navbar-brand {
-      top: $top-notification-height * $i;
+      top: bd.$top-notification-height * $i;
     }
 
     #sidebar {
-      top: $navbar-height + $top-notification-height * $i;
+      top: bd.$navbar-height + bd.$top-notification-height * $i;
     }
 
     #content {
-      top: $navbar-height + $top-notification-height * $i;
+      top: bd.$navbar-height + bd.$top-notification-height * $i;
     }
 
     cd-notifications-sidebar {
-      top: $navbar-height + $top-notification-height * $i + 10px;
+      top: bd.$navbar-height + bd.$top-notification-height * $i + 10px;
     }
   }
 }

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 d86ba90bccc7e9e9e5d194a47fcf702ba9f83ee0..a4e2673f63b8590fbde091e171e248cd45e92435 100644 (file)
--- 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
@@ -1,9 +1,9 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .running i {
-  color: $color-primary;
+  color: bd.$color-primary;
 }
 
 .running:hover i {
-  color: $color-solid-white;
+  color: bd.$color-solid-white;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
index e2844d0debbb9b5b6ee926e3f7a70fcc8c0826ea..fe48bea33a7adc33bf485dc365ca474d4c2255d5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/helper/helper.component.scss
@@ -1,7 +1,7 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 i {
-  color: $color-helper-bg;
+  color: bd.$color-helper-bg;
   cursor: pointer;
   padding-left: 4px;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
index 05ba40f50373ae09c0610a12ec6fd4a9a9f9153f..51af300723b0f3cd597c1768acacf0856cdb5076 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.scss
@@ -1,12 +1,12 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/mixins';
 
 .modal-header {
-  @include hf;
+  @include mixins.hf;
   border-radius: 5px 5px 0 0;
 }
 
 ::ng-deep .modal-footer {
-  @include hf;
+  @include mixins.hf;
   border-radius: 0 0 5px 5px;
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
index 8e1334853f04bdde02f396e009a892211429323c..d6b5f639dea161b175e4ef906227bb40f04f3843 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
@@ -1,11 +1,11 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 :host {
   bottom: 10px;
   max-width: 90vw;
   position: fixed;
   right: -350px;
-  top: $navbar-height + 10px;
+  top: bd.$navbar-height + 10px;
 
   transition: all 0.6s;
 
@@ -27,14 +27,14 @@ ngx-simplebar {
 }
 
 .separator {
-  background-color: $color-popover-seperator-bg;
-  color: $color-popover-seperator-text;
+  background-color: bd.$color-popover-seperator-bg;
+  color: bd.$color-popover-seperator-text;
   font-size: 1rem;
   padding: 5px 12px;
 }
 
 .btn-link .fa-trash-o {
-  color: $color-black;
+  color: bd.$color-black;
 }
 
 table {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss
index 925ef0df6a7d895df83fcbaa0e849ea2ff5cbb97..f6306f6700ddd3fcb3a5f51f1e488784b62ffded 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.scss
@@ -1,7 +1,7 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .badge-remove {
-  color: $color-solid-white;
+  color: bd.$color-solid-white;
 }
 
 i.fa-pencil {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss
index b8acc1fd8d22fffc19dc28510dfa495d61b8bd8a..6adfb0e3e1130e6c4ade0abe513ebafd0c9a24e1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select/select.component.scss
@@ -1,13 +1,13 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .select-menu-item {
-  border-bottom: 1px solid $color-transparent;
+  border-bottom: 1px solid bd.$color-transparent;
   cursor: pointer;
   display: block;
   font-size: 1rem;
 
   &:hover {
-    background-color: $color-whitesmoke-gray;
+    background-color: bd.$color-whitesmoke-gray;
   }
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.scss
index ef4ae7a322bc66bb8d8078e6870f819d8aadf493..25486150be45971cd037a57672c4d1cfcc64bd72 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/sparkline/sparkline.component.scss
@@ -1,4 +1,4 @@
-@import 'chart-tooltip.scss';
+@use './src/styles/chart-tooltip';
 
 .chart-container {
   position: static !important;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss
index 54131a6d413b5210a08676fbea63f8c1c458fc4c..80700d158504e06cebedc1d0ab27a99a76c604dc 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/usage-bar/usage-bar.component.scss
@@ -1,11 +1,11 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 .bg-info {
-  background-color: $color-progress-bar-info-bg !important;
+  background-color: bd.$color-progress-bar-info-bg !important;
 }
 
 .bg-freespace {
-  background-color: $color-progress-bar-freespace-bg !important;
+  background-color: bd.$color-progress-bar-freespace-bg !important;
 }
 
 .progress {
@@ -18,7 +18,7 @@
   }
 
   span {
-    color: $color-progress-text;
+    color: bd.$color-progress-text;
     display: block;
     font-weight: normal;
     position: absolute;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
index 27ffa89164ab2b38018f5d9d565213607be299f8..e102a91872e5a53e36cee119ea49b8c9a18f0b57 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.scss
@@ -1,7 +1,8 @@
-@import 'defaults.scss';
+@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/defaults/mixins';
 
 @mixin row-details-icon {
-  color: $gray-900;
+  color: bd.$gray-900;
   font-family: 'ForkAwesome', sans-serif;
   font-size: 1rem;
   line-height: 1;
@@ -11,7 +12,7 @@
   margin-bottom: 25px;
 
   .separator {
-    border-left: 1px solid $color-table-seperator-border;
+    border-left: 1px solid bd.$color-table-seperator-border;
     display: inline-block;
     height: 30px;
     margin-left: 5px;
@@ -20,7 +21,7 @@
   }
 
   .widget-toolbar {
-    border-left: 1px solid $color-table-seperator-border;
+    border-left: 1px solid bd.$color-table-seperator-border;
     float: right;
     padding: 0 8px;
 
@@ -36,8 +37,8 @@
 }
 
 .dataTables_header {
-  background-color: $color-table-header-bg;
-  border: 1px solid $color-table-header-border;
+  background-color: bd.$color-table-header-bg;
+  border: 1px solid bd.$color-table-header-border;
   border-bottom: 0;
   padding: 5px;
   position: relative;
@@ -47,7 +48,7 @@
   }
 
   ::ng-deep .table-filters {
-    border-left: 1px solid $color-table-seperator-border;
+    border-left: 1px solid bd.$color-table-seperator-border;
     float: right;
     padding-left: 8px;
   }
@@ -61,7 +62,7 @@
   }
 
   .input-group {
-    border-left: 1px solid $color-table-input-border;
+    border-left: 1px solid bd.$color-table-input-border;
     float: right;
     max-width: 250px;
     padding-left: 8px;
@@ -86,7 +87,7 @@
 }
 
 ::ng-deep .cd-datatable {
-  border: 1px solid $color-table-header-border;
+  border: 1px solid bd.$color-table-header-border;
   margin-bottom: 0;
   max-width: none !important;
 
@@ -99,10 +100,10 @@
     width: 100%;
 
     .container {
-      background-color: $color-table-active-row;
+      background-color: bd.$color-table-active-row;
 
       .bar {
-        background-color: $color-table-active-row;
+        background-color: bd.$color-table-active-row;
         height: 100%;
         left: 0;
         overflow: hidden;
@@ -112,7 +113,7 @@
 
       .bar::before {
         animation: progress-loading 3s linear infinite;
-        background-color: $color-table-progress-bar-active;
+        background-color: bd.$color-table-progress-bar-active;
         content: '';
         display: block;
         height: 100%;
@@ -125,24 +126,24 @@
 
   .datatable-header {
     background-clip: padding-box;
-    background-color: $color-table-datatable-header;
+    background-color: bd.$color-table-datatable-header;
     background-image: linear-gradient(
       to bottom,
-      $color-table-gradient-1 0,
-      $color-table-gradient-2 100%
+      bd.$color-table-gradient-1 0,
+      bd.$color-table-gradient-2 100%
     );
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
 
     .sort-asc,
     .sort-desc {
-      color: $color-table-sort;
+      color: bd.$color-table-sort;
     }
 
     .datatable-header-cell {
-      @include table-cell;
-      font-weight: bold;
+      @include mixins.table-cell;
 
+      font-weight: bold;
       text-align: left;
 
       .datatable-header-cell-label {
@@ -184,7 +185,7 @@
     margin-bottom: -6px;
 
     .empty-row {
-      background-color: $color-table-empty-row;
+      background-color: bd.$color-table-empty-row;
       font-style: italic;
       font-weight: bold;
       padding-bottom: 5px;
@@ -194,27 +195,27 @@
 
     .datatable-body-row {
       &.clickable:hover .datatable-row-group {
-        background-color: $color-table-hover-row;
+        background-color: bd.$color-table-hover-row;
         transition-duration: 0.3s;
         transition-property: background;
         transition-timing-function: linear;
       }
 
       &.datatable-row-even {
-        background-color: $color-table-even-row-bg;
+        background-color: bd.$color-table-even-row-bg;
       }
 
       &.datatable-row-odd {
-        background-color: $color-table-odd-row-bg;
+        background-color: bd.$color-table-odd-row-bg;
       }
 
       &.active,
       &.active:hover {
-        background-color: $color-table-active-row-hover;
+        background-color: bd.$color-table-active-row-hover;
       }
 
       .datatable-body-cell {
-        @include table-cell;
+        @include mixins.table-cell;
 
         &:first-child {
           border-left: 0;
@@ -228,7 +229,7 @@
     }
 
     .datatable-row-detail {
-      border-bottom: 2px solid $color-table-header-border;
+      border-bottom: 2px solid bd.$color-table-header-border;
       overflow-y: visible !important;
       padding: 20px;
     }

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 58f4eb7071565d10f322ab7d6291d3b6112f5ad5..6954c771453fc0469c31989b471a279b68e7ae7c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -1,5 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
-@import 'defaults.scss';
+@use './src/styles/defaults' as *;
 
 // Angular2-Tree Component
 @import '~angular-tree-component/dist/angular-tree-component.css';
@@ -25,291 +25,15 @@ $popover-max-width: 350px;
 @import '~bootstrap/scss/bootstrap';
 @import '~fork-awesome/scss/fork-awesome';
 @import 'app/ceph/dashboard/info-card/info-card-popover.scss';
-@import 'bootstrap-extends';
+@import './src/styles/bootstrap-extends';
 
-/* Reset checkbox success color */
-.was-validated .custom-control-input:valid,
-.custom-control-input.is-valid {
-  ~ .custom-control-label {
-    color: initial;
-  }
-
-  &:checked ~ .custom-control-label::before {
-    background-color: $component-active-bg;
-    border-color: $custom-control-indicator-checked-border-color;
-  }
-
-  ~ .custom-control-label::before {
-    border-color: $custom-control-indicator-border-color;
-  }
-
-  &:focus ~ .custom-control-label::before {
-    box-shadow: $custom-control-indicator-focus-box-shadow;
-  }
-
-  &:focus:not(:checked) ~ .custom-control-label::before {
-    border-color: $custom-control-indicator-focus-border-color;
-  }
-}
-
-/* Basics */
-html {
-  background-color: $color-app-bg;
-}
-
-html,
-body {
-  font-size: 12px;
-  height: 100%;
-  width: 100%;
-}
-
-h1 {
-  font-size: 2em;
-  letter-spacing: -1px;
-}
-
-h2 {
-  font-size: 1.833em;
-  letter-spacing: -1px;
-}
-
-h3 {
-  display: block;
-  font-size: 1.583em;
-  font-weight: 400;
-}
-
-h4 {
-  font-size: 1.5em;
-  line-height: normal;
-}
-
-option {
-  font-style: normal;
-  font-weight: normal;
-}
-
-.full-height {
-  height: 100vh;
-}
-
-.full-width {
-  width: 100vw;
-}
-
-.vertical-align {
-  align-items: center;
-  display: flex;
-}
+@import './src/styles/ceph-custom/basics';
+@import './src/styles/ceph-custom/buttons';
+@import './src/styles/ceph-custom/dropdown';
+@import './src/styles/ceph-custom/forms';
+@import './src/styles/ceph-custom/grid';
+@import './src/styles/ceph-custom/icons';
 
-.horizontal-align {
-  display: flex;
-  justify-content: center;
-}
-
-.loading {
-  left: 50%;
-  position: absolute;
-  top: 50%;
-}
-
-.margin-right-md {
-  margin-right: 15px;
-}
-
-.no-border {
-  border: 0;
-  box-shadow: 0 0 0 !important;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.bold {
-  font-weight: bold;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-monospace {
-  font-family: monospace;
-}
-
-.text-pre {
-  white-space: pre-wrap;
-}
-
-/* Buttons */
-.btn-light {
-  background-color: $color-solid-white;
-  border-color: $color-input-border !important;
-
-  &:hover {
-    background-color: $color-soft-gray;
-    border-color: $color-input-border-hover !important;
-  }
-}
-
-// We have some inputs that don't have a corresponding formControlName,
-// to be able to get the same styling and no JS errors we need use a different
-// class name
-.cd-form-control {
-  @extend .form-control;
-}
-
-.btn {
-  &,
-  &:active,
-  &.active {
-    &:focus,
-    &.focus {
-      outline: 0;
-    }
-  }
-}
-
-.btn-primary .badge {
-  background-color: $color-button-badge;
-  color: $color-primary;
-}
-
-.btn-group > .btn > i.fa,
-.cd-datatable-actions button.btn i.fa {
-  /** Add space between icon and text */
-  margin-right: 5px;
-}
-
-/* Dropdown */
-.dropdown-menu {
-  min-width: 50px;
-  z-index: 999999;
-
-  button.dropdown-item:focus {
-    outline: none;
-  }
-}
-
-.dropdown-menu > li > a {
-  color: $color-dropdown-menu;
-  cursor: pointer;
-}
-
-.dropdown-menu > li > a > i.fa {
-  /** Add space between icon and text */
-  margin-right: 5px;
-}
-
-.dropdown-menu > .active > a {
-  background-color: $color-dropdown-active-bg;
-  color: $color-dropdown-active-text;
-
-  &,
-  &:hover,
-  &:focus {
-    background-color: darken($color-dropdown-active-bg, 10);
-  }
-}
-
-.dataTables_wrapper .dropdown-menu > li.dropdown-divider {
-  cursor: auto;
-}
-
-/* Grid */
-.container,
-.container-fluid {
-  padding-left: 30px !important;
-  padding-right: 30px !important;
-}
-
-.row {
-  margin-left: -30px;
-  margin-right: -30px;
-}
-
-.col-lg-1,
-.col-lg-10,
-.col-lg-11,
-.col-lg-12,
-.col-lg-2,
-.col-lg-3,
-.col-lg-4,
-.col-lg-5,
-.col-lg-6,
-.col-lg-7,
-.col-lg-8,
-.col-lg-9,
-.col-md-1,
-.col-md-10,
-.col-md-11,
-.col-md-12,
-.col-md-2,
-.col-md-3,
-.col-md-4,
-.col-md-5,
-.col-md-6,
-.col-md-7,
-.col-md-8,
-.col-md-9,
-.col-sm-1,
-.col-sm-10,
-.col-sm-11,
-.col-sm-12,
-.col-sm-2,
-.col-sm-3,
-.col-sm-4,
-.col-sm-5,
-.col-sm-6,
-.col-sm-7,
-.col-sm-8,
-.col-sm-9,
-.col-1,
-.col-10,
-.col-11,
-.col-12,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9 {
-  padding-left: 30px;
-  padding-right: 30px;
-}
-
-tags-input .tags {
-  border: 1px solid $color-tags-border;
-  border-radius: 4px;
-  box-shadow: inset 0 1px 1px $color-tags-box-shadow;
-}
-
-.card-header {
-  font-size: 1.3em;
-}
-
-.card-body h2:first-child {
-  margin-top: 0;
-}
-
-.disabled {
-  pointer-events: none;
-}
-
-.clickable,
-a {
-  cursor: pointer;
-}
-
-:invalid .has-error-btn,
-:invalid .has-error-btn:disabled:hover {
-  background-color: $color-error-btn-bg;
-  border-color: $color-error-btn-border;
-}
 /* If javascript is disabled. */
 .noscript {
   padding-top: 5em;
@@ -318,71 +42,6 @@ a {
 .noscript p {
   color: $color-noscript-text;
 }
-/* Forms */
-.required::after {
-  color: $color-required-text;
-  content: '*';
-  font-size: 1.167rem;
-  padding-left: 4px;
-}
-
-.form-footer {
-  display: flex;
-  width: 100%;
-}
-
-.form-control {
-  display: table-cell;
-
-  &:focus {
-    border-color: $color-primary-transparent;
-    box-shadow: inset 0 1px 1px $color-transparent-black1, 0 0 8px 2px $color-primary-transparent1;
-    outline: 0;
-  }
-}
-
-.custom-checkbox {
-  padding-top: 7px;
-}
-
-.cd-col-form {
-  @extend .col-12;
-  @extend .col-lg-8;
-  @extend .col-xl-6;
-}
-
-.cd-col-form-label {
-  @extend .col-form-label;
-  @extend .col-sm-4;
-  @extend .col-md-4;
-  @extend .col-lg-3;
-}
-
-.cd-col-form-input {
-  @extend .col-sm-8;
-  @extend .col-md-8;
-  @extend .col-lg-9;
-}
-
-.cd-col-form-offset {
-  @extend .offset-sm-4;
-  @extend .offset-lg-3;
-  @extend .cd-col-form-input;
-}
-
-cd-modal {
-  .cd-col-form-label {
-    @extend .col-lg-4;
-  }
-
-  .cd-col-form-input {
-    @extend .col-lg-8;
-  }
-
-  .cd-col-form-offset {
-    @extend .offset-lg-4;
-  }
-}
 
 /* Card */
 .card-footer button.btn:not(:first-child) {
@@ -396,27 +55,7 @@ cd-modal {
 .nav-tabs {
   margin-bottom: 15px;
 }
-/* Icons */
-.ceph-icon {
-  background: url('assets/Ceph_Logo_Stacked_RGB_120411_fa_228x228.png');
-}
 
-.prometheus-icon {
-  background: url('assets/prometheus_logo.svg');
-}
-
-.custom-icon {
-  background-clip: padding-box;
-  background-repeat: no-repeat;
-  background-size: contain;
-  margin-right: 8px;
-  padding: 10px;
-}
-/* Notification icons */
-.toast-message .custom-icon {
-  /* Display icons in white, regardless of their origin color. */
-  filter: brightness(0) invert(1);
-}
 /* Block UI */
 .block-ui-wrapper {
   background: $color-transparent-black !important;

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
new file mode 100644 (file)
index 0000000..d05bede
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
@@ -0,0 +1,59 @@
+@use './src/styles/defaults/bootstrap-defaults' as bd;
+
+.chart-container {
+  cursor: pointer;
+  margin: auto;
+  overflow: visible;
+  position: absolute;
+}
+
+canvas {
+  user-select: none;
+}
+
+.chartjs-tooltip {
+  background: bd.$color-chart-tooltip-bg;
+  border-radius: 3px;
+  color: bd.$color-chat-tooltip-text;
+  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+
+  transform: translate(-50%, 0);
+  transition: all 0.1s ease;
+
+  &.transform-left {
+    transform: translate(-10%, 0);
+
+    &::after {
+      left: 10%;
+    }
+  }
+
+  &.transform-right {
+    transform: translate(-90%, 0);
+
+    &::after {
+      left: 90%;
+    }
+  }
+}
+
+.chartjs-tooltip::after {
+  border-color: bd.$color-chart-tooltip-border transparent transparent transparent;
+  border-style: solid;
+  border-width: 5px;
+  content: ' ';
+  left: 50%;
+  margin-left: -5px;
+  position: absolute;
+  top: 100%; /* At the bottom of the tooltip */
+}
+
+::ng-deep .chartjs-tooltip-key {
+  display: inline-block;
+  height: 10px;
+  margin-right: 10px;
+  width: 10px;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
new file mode 100644 (file)
index 0000000..7cfe924
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
@@ -0,0 +1,92 @@
+@use './src/styles/defaults/bootstrap-defaults' as bd;
+
+/* Basics */
+html {
+  background-color: bd.$color-app-bg;
+}
+
+html,
+body {
+  font-size: 12px;
+  height: 100%;
+  width: 100%;
+}
+
+h1 {
+  font-size: 2em;
+  letter-spacing: -1px;
+}
+
+h2 {
+  font-size: 1.833em;
+  letter-spacing: -1px;
+}
+
+h3 {
+  display: block;
+  font-size: 1.583em;
+  font-weight: 400;
+}
+
+h4 {
+  font-size: 1.5em;
+  line-height: normal;
+}
+
+option {
+  font-style: normal;
+  font-weight: normal;
+}
+
+.full-height {
+  height: 100vh;
+}
+
+.full-width {
+  width: 100vw;
+}
+
+.vertical-align {
+  align-items: center;
+  display: flex;
+}
+
+.horizontal-align {
+  display: flex;
+  justify-content: center;
+}
+
+.loading {
+  left: 50%;
+  position: absolute;
+  top: 50%;
+}
+
+.margin-right-md {
+  margin-right: 15px;
+}
+
+.no-border {
+  border: 0;
+  box-shadow: 0 0 0 !important;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-monospace {
+  font-family: monospace;
+}
+
+.text-pre {
+  white-space: pre-wrap;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss
new file mode 100644 (file)
index 0000000..6e82857
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss
@@ -0,0 +1,66 @@
+@use './src/styles/defaults/bootstrap-defaults' as bd;
+
+/* Reset checkbox success color */
+.was-validated .custom-control-input:valid,
+.custom-control-input.is-valid {
+  ~ .custom-control-label {
+    color: initial;
+  }
+
+  &:checked ~ .custom-control-label::before {
+    background-color: $component-active-bg;
+    border-color: $custom-control-indicator-checked-border-color;
+  }
+
+  ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-border-color;
+  }
+
+  &:focus ~ .custom-control-label::before {
+    box-shadow: $custom-control-indicator-focus-box-shadow;
+  }
+
+  &:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-focus-border-color;
+  }
+}
+
+/* Buttons */
+.btn-light {
+  background-color: bd.$color-solid-white;
+  border-color: bd.$color-input-border !important;
+
+  &:hover {
+    background-color: bd.$color-soft-gray;
+    border-color: bd.$color-input-border-hover !important;
+  }
+}
+
+// We have some inputs that don't have a corresponding formControlName,
+// to be able to get the same styling and no JS errors we need use a different
+// class name
+.cd-form-control {
+  @extend .form-control;
+}
+
+.btn {
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      outline: 0;
+    }
+  }
+}
+
+.btn-primary .badge {
+  background-color: bd.$color-button-badge;
+  color: bd.$color-primary;
+}
+
+.btn-group > .btn > i.fa,
+.cd-datatable-actions button.btn i.fa {
+  /** Add space between icon and text */
+  margin-right: 5px;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss
new file mode 100644 (file)
index 0000000..16c7ed7
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss
@@ -0,0 +1,36 @@
+@use './src/styles/defaults/bootstrap-defaults' as bd;
+
+/* Dropdown */
+.dropdown-menu {
+  min-width: 50px;
+  z-index: 999999;
+
+  button.dropdown-item:focus {
+    outline: none;
+  }
+}
+
+.dropdown-menu > li > a {
+  color: bd.$color-dropdown-menu;
+  cursor: pointer;
+}
+
+.dropdown-menu > li > a > i.fa {
+  /** Add space between icon and text */
+  margin-right: 5px;
+}
+
+.dropdown-menu > .active > a {
+  background-color: bd.$color-dropdown-active-bg;
+  color: bd.$color-dropdown-active-text;
+
+  &,
+  &:hover,
+  &:focus {
+    background-color: darken(bd.$color-dropdown-active-bg, 10);
+  }
+}
+
+.dataTables_wrapper .dropdown-menu > li.dropdown-divider {
+  cursor: auto;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
new file mode 100644 (file)
index 0000000..ad6cda1
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
@@ -0,0 +1,68 @@
+@use './src/styles/defaults/bootstrap-defaults' as bd;
+
+/* Forms */
+.required::after {
+  color: bd.$color-required-text;
+  content: '*';
+  font-size: 1.167rem;
+  padding-left: 4px;
+}
+
+.form-footer {
+  display: flex;
+  width: 100%;
+}
+
+.form-control {
+  display: table-cell;
+
+  &:focus {
+    border-color: bd.$color-primary-transparent;
+    box-shadow: inset 0 1px 1px bd.$color-transparent-black1,
+      0 0 8px 2px bd.$color-primary-transparent1;
+    outline: 0;
+  }
+}
+
+.custom-checkbox {
+  padding-top: 7px;
+}
+
+.cd-col-form {
+  @extend .col-12;
+  @extend .col-lg-8;
+  @extend .col-xl-6;
+}
+
+.cd-col-form-label {
+  @extend .col-form-label;
+  @extend .col-sm-4;
+  @extend .col-md-4;
+  @extend .col-lg-3;
+}
+
+.cd-col-form-input {
+  @extend .col-sm-8;
+  @extend .col-md-8;
+  @extend .col-lg-9;
+}
+
+.cd-col-form-offset {
+  @extend .offset-sm-4;
+  @extend .offset-lg-3;
+  @extend .cd-col-form-input;
+}
+
+cd-modal {
+  .cd-col-form-label {
+    @extend .col-lg-4;
+  }
+
+  .cd-col-form-input {
+    @extend .col-lg-8;
+  }
+
+  .cd-col-form-offset {
+    @extend .offset-lg-4;
+  }
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss
new file mode 100644 (file)
index 0000000..ef977e7
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss
@@ -0,0 +1,94 @@
+@use '../defaults/bootstrap-defaults' as bd;
+
+/* Grid */
+.container,
+.container-fluid {
+  padding-left: 30px !important;
+  padding-right: 30px !important;
+}
+
+.row {
+  margin-left: -30px;
+  margin-right: -30px;
+}
+
+.col-lg-1,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-md-1,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-sm-1,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-1,
+.col-10,
+.col-11,
+.col-12,
+.col-2,
+.col-3,
+.col-4,
+.col-5,
+.col-6,
+.col-7,
+.col-8,
+.col-9 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+tags-input .tags {
+  border: 1px solid bd.$color-tags-border;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px bd.$color-tags-box-shadow;
+}
+
+.card-header {
+  font-size: 1.3em;
+}
+
+.card-body h2:first-child {
+  margin-top: 0;
+}
+
+.disabled {
+  pointer-events: none;
+}
+
+.clickable,
+a {
+  cursor: pointer;
+}
+
+:invalid .has-error-btn,
+:invalid .has-error-btn:disabled:hover {
+  background-color: bd.$color-error-btn-bg;
+  border-color: bd.$color-error-btn-border;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_icons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_icons.scss
new file mode 100644 (file)
index 0000000..7d8cdf9
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_icons.scss
@@ -0,0 +1,16 @@
+/* Icons */
+.ceph-icon {
+  background: url('assets/Ceph_Logo_Stacked_RGB_White_120411_fa_256x256.png');
+}
+
+.prometheus-icon {
+  background: url('assets/prometheus_logo.svg');
+}
+
+.custom-icon {
+  background-clip: padding-box;
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin-right: 8px;
+  padding: 10px;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_index.scss
new file mode 100644 (file)
index 0000000..ec9c5b2
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_index.scss
@@ -0,0 +1,5 @@
+@forward 'basics';
+@forward 'buttons';
+@forward 'dropdown';
+@forward 'forms';
+@forward 'icons';

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss b/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss
deleted file mode 100644 (file)
index 3e9469e..0000000
--- a/src/pybind/mgr/dashboard/frontend/src/styles/chart-tooltip.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import 'defaults.scss';
-
-.chart-container {
-  cursor: pointer;
-  margin: auto;
-  overflow: visible;
-  position: absolute;
-}
-
-canvas {
-  user-select: none;
-}
-
-.chartjs-tooltip {
-  background: $color-chart-tooltip-bg;
-  border-radius: 3px;
-  color: $color-chat-tooltip-text;
-  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-
-  transform: translate(-50%, 0);
-  transition: all 0.1s ease;
-
-  &.transform-left {
-    transform: translate(-10%, 0);
-
-    &::after {
-      left: 10%;
-    }
-  }
-
-  &.transform-right {
-    transform: translate(-90%, 0);
-
-    &::after {
-      left: 90%;
-    }
-  }
-}
-
-.chartjs-tooltip::after {
-  border-color: $color-chart-tooltip-border transparent transparent transparent;
-  border-style: solid;
-  border-width: 5px;
-  content: ' ';
-  left: 50%;
-  margin-left: -5px;
-  position: absolute;
-  top: 100%; /* At the bottom of the tooltip */
-}
-
-::ng-deep .chartjs-tooltip-key {
-  display: inline-block;
-  height: 10px;
-  margin-right: 10px;
-  width: 10px;
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
deleted file mode 100644 (file)
index d58ab89..0000000
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
+++ /dev/null
@@ -1,197 +0,0 @@
-/*The file suppose to contain all variables, mixins and extends*/
-
-@import 'vendor.variables';
-
-// Bootstrap defaults
-
-$gray-900: #212529 !default;
-
-$screen-sm-min: 576px !default;
-$screen-md-min: 768px !default;
-$screen-lg-min: 992px !default;
-$screen-xl-min: 1200px !default;
-
-$screen-xs-max: calc(#{$screen-sm-min} - 1px);
-$screen-sm-max: calc(#{$screen-md-min} - 1px);
-$screen-md-max: calc(#{$screen-lg-min} - 1px);
-$screen-lg-max: calc(#{$screen-xl-min} - 1px);
-
-$color-solid-red: #f00 !default;
-$color-pink: #a94442 !default;
-$color-light-red: #f2dede !default;
-
-// $color-orange: #ff6600 !default;
-
-$color-bright-yellow: #ffc200 !default;
-$color-light-yellow: #fff3cd !default;
-
-$color-bright-green: #0b0 !default;
-$color-green: #245e03 !default;
-
-$color-blue: #288cea !default;
-$color-light-blue: #d1ecf1 !default;
-$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: #555 !default;
-$color-dark-gray: #474544 !default;
-$color-gray: #808080 !default;
-$color-mild-gray: #777 !default;
-$color-blue-gray: #90949c !default;
-$color-grad-gray: #ededed !default;
-$color-shadow-gray: rgba(3, 3, 3, 0.175) !default;
-$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: #333 !default;
-$color-light-shade-gray: #f3f3f3 !default;
-$color-whitesmoke-gray: #f5f5f5 !default;
-$color-solid-white: #fff !default;
-$color-transparent: rgba(0, 0, 0, 0.09) !default;
-$color-input-border: #ced4da;
-$color-input-border-hover: #adadad;
-$color-brand-teal: #2b99a8 !default;
-$color-brand-gray: #374249 !default;
-$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;
-// $color-links: $color-primary !default;
-// $color-links-focus: $color-dark-gray !default;
-$color-breadcrumb: $color-dark-gray !default;
-// $color-button-text: $color-white-gray !default;
-$color-button: $color-primary !default;
-// $color-button-hover: darken($color-primary, 3) !default;
-// $color-button-border: darken($color-primary, 6) !default;
-$color-button-badge: $color-white-gray !default;
-$color-dropdown-menu: $color-dark-gray !default;
-$color-dropdown-active-text: $color-white-gray !default;
-$color-dropdown-active-bg: $color-primary !default;
-$color-progress-bar-info-bg: $color-primary !default;
-$color-progress-bar-freespace-bg: $color-light-gray !default;
-$color-progress-text: $color-black !default;
-$color-tags-border: $color-light-gray !default;
-$color-tags-box-shadow: $color-transparent !default;
-$color-error-btn-bg: $color-light-red !default;
-$color-error-btn-border: $color-pink !default;
-$color-noscript-text: $color-mild-gray !default;
-$color-required-text: $color-pink !default;
-
-/*Login*/
-$color-login-row-text: $color-solid-white !default;
-$color-login-row-bg: $color-secondary !default;
-$color-password-toggle-text: $color-solid-white !default;
-$color-password-toggle-placeholder-text: $color-blue-gray !default;
-$color-password-toggle-bg: $color-mirage-gray !default;
-$color-password-toggle-focus: $color-primary !default;
-// $color-login-active-row-bg: $color-light-yellow !default;
-// $color-login-active-row-text: $color-black !default;
-
-/*Landing Page*/
-
-/*InfoGroup*/
-// $color-info-group-underline: $color-whitesmoke-gray !default;
-
-/*InfoCard*/
-// $color-info-card-background: $color-whitesmoke-gray !default;
-$color-info-card-border: $color-soft-gray !default;
-
-/*Navigation*/
-$color-navbar-bg: $color-secondary !default;
-$color-navbar-brand: $color-white-gray !default;
-$color-nav-top-bar: $color-primary !default;
-$color-nav-bottom-bar: $color-primary !default;
-$color-nav-toggle-bar: $color-white-gray !default;
-$color-nav-toggle-shadow: $color-solid-white !default;
-$color-nav-collapse-border: $color-white-gray !default;
-$color-nav-open-bg: $color-primary !default;
-$color-nav-links: $color-white-gray !default;
-$color-nav-links-hover: $color-primary !default;
-$color-nav-active-link-bg: $color-primary !default;
-$color-nav-border-top-collapse: $color-white-gray !default;
-
-$navbar-height: 43px;
-$top-notification-height: 37.6px;
-
-/*Helper*/
-$color-helper-bg: $color-primary !default;
-
-/*Table*/
-$color-table-seperator-border: $color-transparent !default;
-$color-table-input-border: $color-transparent !default;
-$color-table-dropdown-bg: $color-whitesmoke-gray !default;
-$color-table-header-bg: $color-whitesmoke-gray !default;
-$color-table-header-border: $color-light-gray !default;
-$color-table-active-row: $color-sky-blue !default;
-$color-table-active-row-hover: $color-light-blue !default;
-// $color-table-progress-bar-bg: $color-sky-blue !default;
-$color-table-progress-bar-active: $color-primary !default;
-$color-table-gradient-1: $color-whitesmoke-gray !default;
-$color-table-gradient-2: $color-grad-gray !default;
-$color-table-sort: $color-primary !default;
-$color-table-empty-row: $color-light-yellow !default;
-$color-table-hover-row: $color-white-gray !default;
-$color-table-even-row-bg: $color-solid-white !default;
-$color-table-odd-row-bg: $color-whitesmoke-gray !default;
-$color-table-datatable-header: $color-whitesmoke-gray !default;
-
-/*Chart tooltip*/
-$color-chart-tooltip-bg: $color-transparent-black !default;
-$color-chat-tooltip-text: $color-solid-white !default;
-$color-chart-tooltip-border: $color-black !default;
-
-/*Popover*/
-$color-popover-seperator-text: $color-blue-gray !default;
-$color-popover-seperator-bg: $color-white-gray !default;
-$color-popover-message-text: $color-dark-gray !default;
-$color-popover-table-text: $color-dark-gray !default;
-$color-popover-date: $color-solid-gray !default;
-
-/*RGW user form*/
-$color-rgw-icon: $color-blue-gray !default;
-
-@mixin table-cell {
-  border: 0;
-  border-bottom: 1px solid $color-light-gray;
-  border-left: 1px solid $color-light-gray;
-  padding: 5px;
-}
-
-@mixin hf {
-  background-color: $color-whitesmoke-gray;
-  border-bottom: 1px solid $color-light-gray;
-}
-
-@function strip-unit($value) {
-  @return $value / ($value * 0 + 1);
-}
-
-@mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) {
-  $u1: unit($min-vw);
-  $u2: unit($max-vw);
-  $u3: unit($min-font-size);
-  $u4: unit($max-font-size);
-
-  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
-    font-size: $min-font-size;
-    @media screen and (min-width: $min-vw) {
-      font-size: calc(
-        #{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} *
-          ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
-      );
-    }
-    @media screen and (min-width: $max-vw) {
-      font-size: $max-font-size;
-    }
-  }
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
new file mode 100644 (file)
index 0000000..cb2d966
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -0,0 +1,159 @@
+@use '../vendor/variables';
+
+// Bootstrap defaults
+
+$gray-900: #212529 !default;
+
+$screen-sm-min: 576px !default;
+$screen-md-min: 768px !default;
+$screen-lg-min: 992px !default;
+$screen-xl-min: 1200px !default;
+
+$screen-xs-max: calc(#{$screen-sm-min} - 1px);
+$screen-sm-max: calc(#{$screen-md-min} - 1px);
+$screen-md-max: calc(#{$screen-lg-min} - 1px);
+$screen-lg-max: calc(#{$screen-xl-min} - 1px);
+
+$color-solid-red: #f00 !default;
+$color-pink: #a94442 !default;
+$color-light-red: #f2dede !default;
+
+// $color-orange: #ff6600 !default;
+
+$color-bright-yellow: #ffc200 !default;
+$color-light-yellow: #fff3cd !default;
+
+$color-bright-green: #0b0 !default;
+$color-green: #245e03 !default;
+
+$color-blue: #288cea !default;
+$color-light-blue: #d1ecf1 !default;
+$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: #555 !default;
+$color-dark-gray: #474544 !default;
+$color-gray: #808080 !default;
+$color-mild-gray: #777 !default;
+$color-blue-gray: #90949c !default;
+$color-grad-gray: #ededed !default;
+$color-shadow-gray: rgba(3, 3, 3, 0.175) !default;
+$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: #333 !default;
+$color-light-shade-gray: #f3f3f3 !default;
+$color-whitesmoke-gray: #f5f5f5 !default;
+$color-solid-white: #fff !default;
+$color-transparent: rgba(0, 0, 0, 0.09) !default;
+$color-input-border: #ced4da;
+$color-input-border-hover: #adadad;
+$color-brand-teal: #2b99a8 !default;
+$color-brand-gray: #374249 !default;
+$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;
+// $color-links: $color-primary !default;
+// $color-links-focus: $color-dark-gray !default;
+$color-breadcrumb: $color-dark-gray !default;
+// $color-button-text: $color-white-gray !default;
+$color-button: $color-primary !default;
+// $color-button-hover: darken($color-primary, 3) !default;
+// $color-button-border: darken($color-primary, 6) !default;
+$color-button-badge: $color-white-gray !default;
+$color-dropdown-menu: $color-dark-gray !default;
+$color-dropdown-active-text: $color-white-gray !default;
+$color-dropdown-active-bg: $color-primary !default;
+$color-progress-bar-info-bg: $color-primary !default;
+$color-progress-bar-freespace-bg: $color-light-gray !default;
+$color-progress-text: $color-black !default;
+$color-tags-border: $color-light-gray !default;
+$color-tags-box-shadow: $color-transparent !default;
+$color-error-btn-bg: $color-light-red !default;
+$color-error-btn-border: $color-pink !default;
+$color-noscript-text: $color-mild-gray !default;
+$color-required-text: $color-pink !default;
+
+/*Login*/
+$color-login-row-text: $color-solid-white !default;
+$color-login-row-bg: $color-secondary !default;
+$color-password-toggle-text: $color-solid-white !default;
+$color-password-toggle-placeholder-text: $color-blue-gray !default;
+$color-password-toggle-bg: $color-mirage-gray !default;
+$color-password-toggle-focus: $color-primary !default;
+// $color-login-active-row-bg: $color-light-yellow !default;
+// $color-login-active-row-text: $color-black !default;
+
+/*Landing Page*/
+
+/*InfoGroup*/
+// $color-info-group-underline: $color-whitesmoke-gray !default;
+
+/*InfoCard*/
+// $color-info-card-background: $color-whitesmoke-gray !default;
+$color-info-card-border: $color-soft-gray !default;
+
+/*Navigation*/
+$color-navbar-bg: $color-secondary !default;
+$color-navbar-brand: $color-white-gray !default;
+$color-nav-top-bar: $color-primary !default;
+$color-nav-bottom-bar: $color-primary !default;
+$color-nav-toggle-bar: $color-white-gray !default;
+$color-nav-toggle-shadow: $color-solid-white !default;
+$color-nav-collapse-border: $color-white-gray !default;
+$color-nav-open-bg: $color-primary !default;
+$color-nav-links: $color-white-gray !default;
+$color-nav-links-hover: $color-primary !default;
+$color-nav-active-link-bg: $color-primary !default;
+$color-nav-border-top-collapse: $color-white-gray !default;
+
+$navbar-height: 43px;
+$top-notification-height: 37.6px;
+
+/*Helper*/
+$color-helper-bg: $color-primary !default;
+
+/*Table*/
+$color-table-seperator-border: $color-transparent !default;
+$color-table-input-border: $color-transparent !default;
+$color-table-dropdown-bg: $color-whitesmoke-gray !default;
+$color-table-header-bg: $color-whitesmoke-gray !default;
+$color-table-header-border: $color-light-gray !default;
+$color-table-active-row: $color-sky-blue !default;
+$color-table-active-row-hover: $color-light-blue !default;
+// $color-table-progress-bar-bg: $color-sky-blue !default;
+$color-table-progress-bar-active: $color-primary !default;
+$color-table-gradient-1: $color-whitesmoke-gray !default;
+$color-table-gradient-2: $color-grad-gray !default;
+$color-table-sort: $color-primary !default;
+$color-table-empty-row: $color-light-yellow !default;
+$color-table-hover-row: $color-white-gray !default;
+$color-table-even-row-bg: $color-solid-white !default;
+$color-table-odd-row-bg: $color-whitesmoke-gray !default;
+$color-table-datatable-header: $color-whitesmoke-gray !default;
+
+/*Chart tooltip*/
+$color-chart-tooltip-bg: $color-transparent-black !default;
+$color-chat-tooltip-text: $color-solid-white !default;
+$color-chart-tooltip-border: $color-black !default;
+
+/*Popover*/
+$color-popover-seperator-text: $color-blue-gray !default;
+$color-popover-seperator-bg: $color-white-gray !default;
+$color-popover-message-text: $color-dark-gray !default;
+$color-popover-table-text: $color-dark-gray !default;
+$color-popover-date: $color-solid-gray !default;
+
+/*RGW user form*/
+$color-rgw-icon: $color-blue-gray !default;

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_functions.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_functions.scss
new file mode 100644 (file)
index 0000000..9e4f87e
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_functions.scss
@@ -0,0 +1,3 @@
+@function strip-unit($value) {
+  @return $value / ($value * 0 + 1);
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss
new file mode 100644 (file)
index 0000000..98a20db
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss
@@ -0,0 +1,5 @@
+@use '../vendor';
+
+@forward 'bootstrap-defaults';
+@forward 'functions';
+@forward 'mixins';

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss
new file mode 100644 (file)
index 0000000..37d076a
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss
@@ -0,0 +1,35 @@
+@use '../vendor/variables';
+@use 'bootstrap-defaults';
+@use 'functions';
+
+@mixin table-cell {
+  border: 0;
+  border-bottom: 1px solid bootstrap-defaults.$color-light-gray;
+  border-left: 1px solid bootstrap-defaults.$color-light-gray;
+  padding: 5px;
+}
+
+@mixin hf {
+  background-color: bootstrap-defaults.$color-whitesmoke-gray;
+  border-bottom: 1px solid bootstrap-defaults.$color-light-gray;
+}
+
+@mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) {
+  $u1: unit($min-vw);
+  $u2: unit($max-vw);
+  $u3: unit($min-font-size);
+  $u4: unit($max-font-size);
+
+  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
+    font-size: $min-font-size;
+    @media screen and (min-width: $min-vw) {
+      font-size: calc(
+        #{$min-font-size} + #{functions.strip-unit($max-font-size - $min-font-size)} *
+          ((100vw - #{$min-vw}) / #{functions.strip-unit($max-vw - $min-vw)})
+      );
+    }
+    @media screen and (min-width: $max-vw) {
+      font-size: $max-font-size;
+    }
+  }
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor.overrides.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor.overrides.scss
deleted file mode 100644 (file)
index ac78087..0000000
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor.overrides.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-/* Vendor specific scss */
-
-@import 'defaults.scss';

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor.variables.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor.variables.scss
deleted file mode 100644 (file)
index 4d011a9..0000000
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor.variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-/* Vendor specific variables */

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss
new file mode 100644 (file)
index 0000000..0d73747
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss
@@ -0,0 +1,2 @@
+@use 'style-overrides';
+@use 'variables';

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
new file mode 100644 (file)
index 0000000..cb697f0
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
@@ -0,0 +1 @@
+/* Vendor specific scss */

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
new file mode 100644 (file)
index 0000000..4d011a9
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
@@ -0,0 +1 @@
+/* Vendor specific variables */