mgr/dashboard: set 'vendor/variables' SASS module as the single source of truth

Fixes: https://tracker.ceph.com/issues/46869
Signed-off-by: Alfonso Martínez <almartin@redhat.com>

diff --git a/doc/dev/developer_guide/dash-devel.rst b/doc/dev/developer_guide/dash-devel.rst
index 29a84f683d3d074a93cd13f1d0363247b712190b..6c9fa1fb8ea226ec705fa6671f71c8838458d837 100644 (file)
--- a/doc/dev/developer_guide/dash-devel.rst
+++ b/doc/dev/developer_guide/dash-devel.rst
@@ -795,11 +795,11 @@ to add the file replacements manually to the angular.json file
 Nevertheless you should stick to the suggested naming scheme because it makes
 it easier for you to use glob expressions once it's supported in the future.
 
-To change the variable defaults you can overwrite them in the file
-``./frontend/src/vendor.variables.scss``. Just reassign the variable you want
-to change, for example ``$color-primary: teal;``
+To change the variable defaults or add your own ones you can overwrite them in
+``./frontend/src/styles/vendor/_variables.scss``.
+Just reassign the variable you want to change, for example ``$color-primary: teal;``
 To overwrite or extend the default CSS, you can add your own styles in
-``./frontend/src/vendor.overrides.scss``.
+``./frontend/src/styles/vendor/_style-overrides.scss``.
 
 I18N
 ----

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 6a3121191987ec1070992ba3e0b28e537232b707..3334f06182d6344857f15c1ff88e53517a21728d 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 // Angular2-Tree Component
 ::ng-deep cd-cephfs-directories tree-root {
@@ -8,10 +8,10 @@
 }
 
 .quota-origin {
-  color: bd.$primary;
+  color: vv.$primary;
   cursor: pointer;
 
   &:hover {
-    color: bd.$gray-900;
+    color: vv.$gray-900;
   }
 }

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 7638196c49dc9381d0a9f5ec43ebee8467dfc711..9db9ddc95f6468a4728e3d029b22383e5bae5df5 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 p {
   font-family: monospace;
@@ -27,19 +27,19 @@ p {
   }
 
   .err {
-    color: bd.$danger;
+    color: vv.$danger;
   }
 
   .warn {
-    color: bd.$warning;
+    color: vv.$warning;
   }
 
   .info {
-    color: bd.$info;
+    color: vv.$info;
   }
 
   .debug {
-    color: bd.$gray-700;
+    color: vv.$gray-700;
   }
 }
 

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 23560b00427cf12bc2b4d6c9d2f6ca40b9aea222..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,5 +1,4 @@
 @use './src/styles/chart-tooltip';
-@use './src/styles/defaults/bootstrap-defaults' as bd;
 
 $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 fe26f5db0312bc0a4e478d527f35dd34cf038a09..8b45a05a2afab5c0a4223ab4b1c19ec4c86650d1 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 cd-info-card {
   padding: 0 0.5vw;
@@ -27,7 +27,7 @@ cd-info-card {
 }
 
 .card-text-error {
-  color: bd.$danger;
+  color: vv.$danger;
   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 2e366a87d065f09c21ec1f44824f41589d087d59..43cbe18ffcf09bfa20cebec2d4904a5ffd2eec24 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .info-card-popover-cluster-status {
   max-height: 20vh;
@@ -12,31 +12,31 @@
   }
 }
 
-@media (max-width: bd.$screen-lg-max) {
+@media (max-width: vv.$screen-lg-max) {
   .info-card-popover-cluster-status {
     max-width: 31vw;
   }
 }
 
-@media (max-width: bd.$screen-md-max) {
+@media (max-width: vv.$screen-md-max) {
   .info-card-popover-cluster-status {
     max-width: 46vw;
   }
 }
-@media (max-width: bd.$screen-sm-max) {
+@media (max-width: vv.$screen-sm-max) {
   .info-card-popover-cluster-status {
     max-width: 83vw;
   }
 }
 
 .info-card-content-clickable {
-  border: 1px solid bd.$gray-200;
+  border: 1px solid vv.$gray-200;
   border-radius: 3px;
   cursor: pointer;
   padding: 7px;
 }
 
 .info-card-content-clickable:hover {
-  background-color: bd.$gray-200;
-  border-color: bd.$gray-400;
+  background-color: vv.$gray-200;
+  border-color: vv.$gray-400;
 }

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 a0c5d1ce87db83955b4981dabfc42af38e9ea5f1..897d09a9a4b937d20dee95636059c29eda0883b9 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,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 @use './src/styles/defaults/mixins';
 
 $card-font-min-width: 320px;
@@ -13,7 +13,7 @@ $card-font-max-size: 21px;
     $card-font-min-size,
     $card-font-max-size
   );
-  border: 0.5px solid bd.$gray-300;
+  border: 0.5px solid vv.$gray-300;
   border-radius: 3px;
   height: 100%;
 

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 7a3906e4750adfffdd38f8477b6161acd3560e17..709e8aeb2428168ccc0273d2dbc2e88cb52f396e 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,19 +1,19 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 ::ng-deep cd-pool-list {
   .pg-clean {
-    color: bd.$success;
+    color: vv.$success;
   }
 
   .pg-working {
-    color: bd.$primary;
+    color: vv.$primary;
   }
 
   .pg-warning {
-    color: bd.$warning;
+    color: vv.$warning;
   }
 
   .pg-unknown {
-    color: bd.$danger;
+    color: vv.$danger;
   }
 }

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 4b7dbed62fba272b881dd3bb6a9b72669080cbdb..25df0569e2b233a3e2ab072e5c1c4096a8ab2b4f 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 ::ng-deep cd-login-password-form {
   h4 {
@@ -9,16 +9,16 @@
   .btn-password:focus,
   .form-control,
   .form-control:focus {
-    background-color: bd.$gray-800;
-    color: bd.$white;
+    background-color: vv.$gray-800;
+    color: vv.$white;
   }
 
   .form-control::placeholder {
-    color: bd.$gray-500;
+    color: vv.$gray-500;
   }
 
   .btn-password:focus {
-    outline-color: bd.$primary;
+    outline-color: vv.$primary;
   }
 
   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 486b1785072f74dfa7ddebf9726afed8fa7e08a2..0fdc3c6ba3275c5d917bc9ae46b0f7ca142ae15a 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,17 +1,17 @@
 @use 'sass:map';
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
-$dark-secondary: darken(bd.$secondary, 4%);
+$dark-secondary: darken(vv.$secondary, 4%);
 
 ::ng-deep cd-login {
   .form-group {
     background-color: $dark-secondary;
-    border-left: 4px solid bd.$white;
+    border-left: 4px solid vv.$white;
     height: auto;
     margin-bottom: 2rem;
 
     &:focus-within {
-      border-left: 4px solid map.get(bd.$theme-colors, 'accent');
+      border-left: 4px solid map.get(vv.$theme-colors, 'accent');
     }
   }
 
@@ -22,17 +22,17 @@ $dark-secondary: darken(bd.$secondary, 4%);
     background-color: $dark-secondary;
     border: 0;
     box-shadow: none;
-    color: bd.$body-color-bright;
+    color: vv.$body-color-bright;
     filter: none;
     outline: none;
   }
 
   .placeholder {
-    color: bd.$gray-600;
+    color: vv.$gray-600;
   }
 
   .btn-password:focus {
-    outline-color: bd.$primary;
+    outline-color: vv.$primary;
   }
 }
 
@@ -40,7 +40,7 @@ $dark-secondary: darken(bd.$secondary, 4%);
 @keyframes autofill {
   to {
     background-color: $dark-secondary;
-    color: bd.$body-color-bright;
+    color: vv.$body-color-bright;
   }
 }
 
@@ -49,6 +49,6 @@ input:-webkit-autofill {
   animation-name: autofill;
   border-radius: 0;
   box-shadow: 0 0 0 1000px $dark-secondary inset;
-  -webkit-text-fill-color: bd.$body-color-bright;
+  -webkit-text-fill-color: vv.$body-color-bright;
   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 606d10a6d9dbd5ddf3383c084bb9f8c350a48d61..2ec16099858270318cc007ea989c434379e8948b 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,9 +1,9 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .fa {
   font-size: large;
 
   &.fa-square-o {
-    color: bd.$gray-400;
+    color: vv.$gray-400;
   }
 }

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 43645d73cac840521f00c73527f957920bb07da2..f55ae8d0c5139c82fe0aae6dd1104af25a65f65d 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 ::ng-deep cd-login-layout .login {
-  background-color: bd.$secondary;
+  background-color: vv.$secondary;
   background-image: url('../../../../assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: bd.$body-color-bright;
+  color: vv.$body-color-bright;
 
   header {
     position: absolute;
@@ -17,7 +17,7 @@
 
         li a {
           &:hover {
-            background-color: bd.$primary;
+            background-color: vv.$primary;
           }
         }
       }
@@ -36,10 +36,10 @@
   }
 
   a {
-    color: bd.$fg-color-over-dark-bg;
+    color: vv.$fg-color-over-dark-bg;
 
     &:hover {
-      color: bd.$fg-hover-color-over-dark-bg;
+      color: vv.$fg-hover-color-over-dark-bg;
     }
   }
 }

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 44e07b322e82710de16c28954b22695e5a1078d2..1c3947873e2152bef6c86582efc81cd6e945c15a 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .dashboard {
-  background-color: bd.$gray-200;
+  background-color: vv.$gray-200;
   margin: 0;
   padding: 0;
 }

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 cd11eb1e82d283bf3c5410ef20fa17e7aaa24e3e..78c7fe550d57f3a677f1d9e2868b341e61cb7aa2 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .about-container {
-  background-color: bd.$secondary;
+  background-color: vv.$secondary;
   background-image: url('../../../../assets/ceph_background.gif');
   background-position: right bottom;
   background-repeat: no-repeat;
-  color: bd.$white;
-  text-shadow: 1px 1px bd.$secondary;
+  color: vv.$white;
+  text-shadow: 1px 1px vv.$secondary;
 }
 
 .product-versions {
@@ -22,7 +22,7 @@
 }
 
 .modal-header .close {
-  color: bd.$white;
+  color: vv.$white;
   font-size: 2em;
 }
 

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 288bc1e9729f77b993c0d6e521e4f52d39503594..f559abbf2b95be9605caad0778ed08601b6181b4 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 /* ---------------------------------------------------
     NAVBAR STYLE
@@ -6,16 +6,16 @@
 
 ::ng-deep cd-navigation .cd-navbar-top {
   .cd-navbar-brand {
-    background: bd.$secondary;
-    border-top: 4px solid bd.$primary;
+    background: vv.$secondary;
+    border-top: 4px solid vv.$primary;
 
     &.isPwdDisplayed {
-      top: bd.$top-notification-height;
+      top: vv.$top-notification-height;
     }
 
     .navbar-brand,
     .navbar-brand:hover {
-      color: bd.$gray-200;
+      color: vv.$gray-200;
       height: auto;
       padding: 0;
     }
@@ -33,7 +33,7 @@
       }
 
       .fa-navicon {
-        color: bd.$gray-200;
+        color: vv.$gray-200;
       }
     }
 
@@ -42,8 +42,8 @@
     }
 
     .cd-navbar-utility > .active > a {
-      background-color: bd.$primary;
-      color: bd.$gray-200;
+      background-color: vv.$primary;
+      color: vv.$gray-200;
     }
 
     .cd-navbar-utility > li > .open > a,
@@ -51,14 +51,14 @@
     .cd-navbar-utility > li > .open > a:hover {
       background-color: transparent;
       border-color: transparent;
-      color: bd.$gray-200;
+      color: vv.$gray-200;
     }
   }
 
   .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
   .navbar-nav > li > .cd-navbar > a,
   .navbar-nav > li > a {
-    color: bd.$gray-200;
+    color: vv.$gray-200;
     display: block;
     line-height: 1;
     padding: 13.5px 18px !important;
@@ -68,7 +68,7 @@
 
   .navbar-nav .nav-link,
   .navbar-nav .nav-link:hover {
-    color: bd.$gray-200;
+    color: vv.$gray-200;
   }
 
   .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: bd.$primary;
+    background-color: vv.$primary;
   }
 
   .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
@@ -90,10 +90,10 @@
   .navbar-nav > .open > a:hover {
     background-color: transparent;
     border-color: transparent;
-    color: bd.$gray-200;
+    color: vv.$gray-200;
   }
 
-  @media (min-width: bd.$screen-md-min) {
+  @media (min-width: vv.$screen-md-min) {
     .cd-navbar-utility {
       border-bottom: 0;
       font-size: 1.1rem;
@@ -103,7 +103,7 @@
     }
   }
 
-  @media (max-width: bd.$screen-sm-max) {
+  @media (max-width: vv.$screen-sm-max) {
     .navbar-nav {
       margin: 0;
 
@@ -112,24 +112,24 @@
       }
 
       .open .dropdown-menu {
-        background-color: bd.$primary;
+        background-color: vv.$primary;
         border: 0;
         padding-bottom: 0;
         padding-top: 0;
       }
 
       .open .dropdown-menu > li > a {
-        color: bd.$gray-200;
+        color: vv.$gray-200;
         padding: 5px 15px 5px 35px;
       }
 
       .open .dropdown-menu > .active > a {
-        background-color: bd.$primary;
+        background-color: vv.$primary;
       }
     }
 
     .navbar-nav > li > a:hover {
-      background-color: bd.$primary;
+      background-color: vv.$primary;
     }
   }
 }
@@ -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: bd.$primary !important;
+  background-color: vv.$primary !important;
   border: 0 !important;
-  color: bd.$gray-200 !important;
+  color: vv.$gray-200 !important;
 }
 
 .wrapper {
@@ -153,13 +153,13 @@ $sidebar-width: 200px;
   width: 100%;
 
   #sidebar {
-    background: bd.$secondary;
+    background: vv.$secondary;
     bottom: 0;
-    color: bd.$white;
+    color: vv.$white;
     left: 0;
     overflow-y: auto;
     position: fixed;
-    top: bd.$navbar-height;
+    top: vv.$navbar-height;
     transition: all 0.3s;
     width: $sidebar-width;
     z-index: 999;
@@ -175,12 +175,12 @@ $sidebar-width: 200px;
       }
 
       p {
-        color: bd.$white;
+        color: vv.$white;
         padding: 10px;
       }
 
       li a {
-        color: bd.$white;
+        color: vv.$white;
         display: block;
         font-size: 1.1em;
         padding: 10px;
@@ -189,8 +189,8 @@ $sidebar-width: 200px;
         text-decoration: none;
 
         &:hover {
-          background: bd.$primary;
-          color: bd.$white;
+          background: vv.$primary;
+          color: vv.$white;
         }
 
         > .badge {
@@ -200,7 +200,7 @@ $sidebar-width: 200px;
 
       li.active > a,
       li > a a[aria-expanded='true'] {
-        color: bd.$white;
+        color: vv.$white;
       }
     }
   }
@@ -224,7 +224,7 @@ $sidebar-width: 200px;
   }
 
   ul ul a {
-    background: lighten(bd.$secondary, 10);
+    background: lighten(vv.$secondary, 10);
     font-size: 0.9em !important;
     padding-left: 40px !important;
   }
@@ -246,7 +246,7 @@ $sidebar-width: 200px;
   bottom: 0;
   position: absolute;
   right: 0;
-  top: bd.$navbar-height;
+  top: vv.$navbar-height;
   transition: all 0.3s;
   width: calc(100% - #{$sidebar-width});
 
@@ -262,19 +262,19 @@ $sidebar-width: 200px;
 @for $i from 1 through 2 {
   :host.top-notification-#{$i} {
     .cd-navbar-top .cd-navbar-brand {
-      top: bd.$top-notification-height * $i;
+      top: vv.$top-notification-height * $i;
     }
 
     #sidebar {
-      top: bd.$navbar-height + bd.$top-notification-height * $i;
+      top: vv.$navbar-height + vv.$top-notification-height * $i;
     }
 
     #content {
-      top: bd.$navbar-height + bd.$top-notification-height * $i;
+      top: vv.$navbar-height + vv.$top-notification-height * $i;
     }
 
     cd-notifications-sidebar {
-      top: bd.$navbar-height + bd.$top-notification-height * $i + 10px;
+      top: vv.$navbar-height + vv.$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 22ebd0ecf057e4d02373adf0a98f05704242bdd1..5729f7625991bcd1c43152f13717bca2076da262 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,17 +1,17 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .running i {
-  color: bd.$primary;
+  color: vv.$primary;
 }
 
 .running:hover i {
-  color: bd.$white;
+  color: vv.$white;
 }
 
 a {
   .dot {
-    background-color: bd.$primary;
-    border: 2px solid bd.$secondary;
+    background-color: vv.$primary;
+    border: 2px solid vv.$secondary;
     border-radius: 50%;
     height: 11px;
     position: absolute;
@@ -21,7 +21,7 @@ a {
   }
 
   &:hover .dot {
-    background-color: bd.$white;
-    border-color: bd.$primary;
+    background-color: vv.$white;
+    border-color: vv.$primary;
   }
 }

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 5266834303cd93724ef84d48946f330938d97c2c..861b607cb7742e2a1ac8992ddd82d62fd8e96271 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 i {
-  color: bd.$primary;
+  color: vv.$primary;
   cursor: pointer;
   padding-left: 4px;
 }

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 52bb484f2a5e2738082de8fd3c7c8dc2ab01af29..8bbb3b95feca76c4f88053a187b3dd43668e1fb4 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 :host {
   bottom: 10px;
   max-width: 90vw;
   position: fixed;
   right: -350px;
-  top: bd.$navbar-height + 10px;
+  top: vv.$navbar-height + 10px;
 
   transition: all 0.6s;
 
@@ -31,14 +31,14 @@ ngx-simplebar {
 }
 
 .separator {
-  background-color: bd.$gray-200;
-  color: bd.$gray-600;
+  background-color: vv.$gray-200;
+  color: vv.$gray-600;
   font-size: 1rem;
   padding: 5px 12px;
 }
 
 .btn-link .fa-trash-o {
-  color: bd.$black;
+  color: vv.$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 aae5de5e9681ce273257eb5aecbecb0219e55c00..e1271c5e4202b1d6be6793362992cc339eeee604 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .badge-remove {
-  color: bd.$white;
+  color: vv.$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 252b44cd6cb9090fe6a5f1c8f3adc8b62fe6cd15..ce38728f7a44c6d74b024bc15d0b0a4f881f9d2e 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .select-menu-item {
-  border-bottom: 1px solid bd.$datatable-divider-color;
+  border-bottom: 1px solid vv.$datatable-divider-color;
   cursor: pointer;
   display: block;
   font-size: 1rem;
 
   &:hover {
-    background-color: bd.$gray-200;
+    background-color: vv.$gray-200;
   }
 }
 

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 e0cd3e55b0d18e786e1d510a9f7e9744789a8d9c..ef97d15d14da9804b98290df2711517ca586e8b5 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 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .bg-info {
-  background-color: bd.$primary !important;
+  background-color: vv.$primary !important;
 }
 
 .bg-freespace {
-  background-color: bd.$gray-400 !important;
+  background-color: vv.$gray-400 !important;
 }
 
 .progress {
@@ -18,7 +18,7 @@
   }
 
   span {
-    color: bd.$black;
+    color: vv.$black;
     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 b19c253917817e72ee3b160a857719b28cb82e96..bde26288494da24a4fc41519bb2fb0f566dfd56c 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,8 +1,8 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 @use './src/styles/defaults/mixins';
 
 @mixin row-details-icon {
-  color: bd.$gray-900;
+  color: vv.$gray-900;
   font-family: 'ForkAwesome', sans-serif;
   font-size: 1rem;
   line-height: 1;
@@ -12,7 +12,7 @@
   margin-bottom: 25px;
 
   .separator {
-    border-left: 1px solid bd.$datatable-divider-color;
+    border-left: 1px solid vv.$datatable-divider-color;
     display: inline-block;
     height: 30px;
     margin-left: 5px;
@@ -21,7 +21,7 @@
   }
 
   .widget-toolbar {
-    border-left: 1px solid bd.$datatable-divider-color;
+    border-left: 1px solid vv.$datatable-divider-color;
     float: right;
     padding: 0 8px;
 
@@ -37,8 +37,8 @@
 }
 
 .dataTables_header {
-  background-color: bd.$gray-100;
-  border: 1px solid bd.$gray-400;
+  background-color: vv.$gray-100;
+  border: 1px solid vv.$gray-400;
   border-bottom: 0;
   padding: 5px;
   position: relative;
@@ -52,7 +52,7 @@
   }
 
   .input-group {
-    border-left: 1px solid bd.$datatable-divider-color;
+    border-left: 1px solid vv.$datatable-divider-color;
     float: right;
     max-width: 250px;
     padding-left: 8px;
@@ -75,13 +75,13 @@
     padding: 0 8px;
 
     .badge-remove {
-      color: bd.$white;
+      color: vv.$white;
     }
   }
 }
 
 ::ng-deep cd-table .cd-datatable {
-  border: 1px solid bd.$gray-400;
+  border: 1px solid vv.$gray-400;
   margin-bottom: 0;
   max-width: none !important;
 
@@ -94,10 +94,10 @@
     width: 100%;
 
     .container {
-      background-color: bd.$primary;
+      background-color: vv.$primary;
 
       .bar {
-        background-color: bd.$primary;
+        background-color: vv.$primary;
         height: 100%;
         left: 0;
         overflow: hidden;
@@ -107,7 +107,7 @@
 
       .bar::before {
         animation: progress-loading 3s linear infinite;
-        background-color: bd.$primary;
+        background-color: vv.$primary;
         content: '';
         display: block;
         height: 100%;
@@ -120,14 +120,14 @@
 
   .datatable-header {
     background-clip: padding-box;
-    background-color: bd.$gray-100;
-    background-image: linear-gradient(to bottom, bd.$gray-100 0, bd.$gray-200 100%);
+    background-color: vv.$gray-100;
+    background-image: linear-gradient(to bottom, vv.$gray-100 0, vv.$gray-200 100%);
     background-repeat: repeat-x;
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffededed', GradientType=0);
 
     .sort-asc,
     .sort-desc {
-      color: bd.$primary;
+      color: vv.$primary;
     }
 
     .datatable-header-cell {
@@ -175,7 +175,7 @@
     margin-bottom: -6px;
 
     .empty-row {
-      background-color: lighten(bd.$primary, 45%);
+      background-color: lighten(vv.$primary, 45%);
       font-style: italic;
       font-weight: bold;
       padding-bottom: 5px;
@@ -185,23 +185,23 @@
 
     .datatable-body-row {
       &.clickable:hover .datatable-row-group {
-        background-color: lighten(bd.$primary, 45%);
+        background-color: lighten(vv.$primary, 45%);
         transition-duration: 0.3s;
         transition-property: background;
         transition-timing-function: linear;
       }
 
       &.datatable-row-even {
-        background-color: bd.$white;
+        background-color: vv.$white;
       }
 
       &.datatable-row-odd {
-        background-color: bd.$gray-100;
+        background-color: vv.$gray-100;
       }
 
       &.active,
       &.active:hover {
-        background-color: lighten(bd.$primary, 35%);
+        background-color: lighten(vv.$primary, 35%);
       }
 
       .datatable-body-cell {
@@ -219,7 +219,7 @@
     }
 
     .datatable-row-detail {
-      border-bottom: 2px solid bd.$gray-400;
+      border-bottom: 2px solid vv.$gray-400;
       overflow-y: visible !important;
       padding: 20px;
     }

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
index 47d09ae24f2d5dde946c93e338356de75590d217..29e1f1cc6a890c872f85092fbe1323b18da96b88 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/_chart-tooltip.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 .chart-container {
   cursor: pointer;
@@ -12,9 +12,9 @@ canvas {
 }
 
 .chartjs-tooltip {
-  background: rgba(bd.$black, 0.7);
+  background: rgba(vv.$black, 0.7);
   border-radius: 3px;
-  color: bd.$white;
+  color: vv.$white;
   font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !important;
   opacity: 0;
   pointer-events: none;
@@ -41,7 +41,7 @@ canvas {
 }
 
 .chartjs-tooltip::after {
-  border-color: bd.$black transparent transparent transparent;
+  border-color: vv.$black transparent transparent transparent;
   border-style: solid;
   border-width: 5px;
   content: ' ';

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
index ac5a6bbeec90160460a27ba58062169eec66df77..576320f5badf489b57fc2587ef75d3f2530cee97 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss
@@ -1,8 +1,8 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 /* Basics */
 html {
-  background-color: bd.$body-bg;
+  background-color: vv.$body-bg;
 }
 
 html,

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
index a0590861c52b73b89cca32bb8e766ef316c77590..13cb91d7136f3e721024fb03f22294b543bfbd04 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 /* Reset checkbox success color */
 .was-validated .custom-control-input:valid,
@@ -27,12 +27,12 @@
 
 /* Buttons */
 .btn-light {
-  background-color: bd.$white;
-  border-color: bd.$gray-400 !important;
+  background-color: vv.$white;
+  border-color: vv.$gray-400 !important;
 
   &:hover {
-    background-color: bd.$gray-300;
-    border-color: bd.$gray-600 !important;
+    background-color: vv.$gray-300;
+    border-color: vv.$gray-600 !important;
   }
 }
 
@@ -55,8 +55,8 @@
 }
 
 .btn-primary .badge {
-  background-color: bd.$gray-200;
-  color: bd.$primary;
+  background-color: vv.$gray-200;
+  color: vv.$primary;
 }
 
 .btn-group > .btn > i.fa,

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
index 1b8e3f3bed7b6c0db9e37754b7f431b341dd1813..ee07042111586aa8de9f863aaea1b49eabcf6c76 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_dropdown.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 /* Dropdown */
 .dropdown-menu {
@@ -20,13 +20,13 @@
 }
 
 .dropdown-menu > .active > a {
-  background-color: bd.$primary;
-  color: bd.$gray-200;
+  background-color: vv.$primary;
+  color: vv.$gray-200;
 
   &,
   &:hover,
   &:focus {
-    background-color: darken(bd.$primary, 10);
+    background-color: darken(vv.$primary, 10);
   }
 }
 

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
index dccdfbbc311af7622b6da23238e0a129f54eca9e..cac201a96a6f40de81c52e81c0080e24158e6871 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss
@@ -1,8 +1,8 @@
-@use '../defaults/bootstrap-defaults' as bd;
+@use '../vendor/variables' as vv;
 
 /* Forms */
 .required::after {
-  color: bd.$danger;
+  color: vv.$danger;
   content: '*';
   font-size: 1.167rem;
   padding-left: 4px;
@@ -17,8 +17,8 @@
   display: table-cell;
 
   &:focus {
-    border-color: rgba(bd.$primary, 0.8);
-    box-shadow: inset 0 1px 1px rgba(bd.$black, 0.75), 0 0 8px 2px rgba(bd.$primary, 0.5);
+    border-color: rgba(vv.$primary, 0.8);
+    box-shadow: inset 0 1px 1px rgba(vv.$black, 0.75), 0 0 8px 2px rgba(vv.$primary, 0.5);
     outline: 0;
   }
 }

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
index ebc002383ebf30cc18da1d5f08923315cb6f7fd0..e4074c92cf5a0e8c7067809d7b9e0ff6da1a8da7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_grid.scss
@@ -1,6 +1,6 @@
-@use '../defaults/bootstrap-defaults' as bd;
+@use '../vendor/variables' as vv;
 
 /* Grid */
 .container-fluid {
-  padding: 0 bd.$grid-gutter-width;
+  padding: 0 vv.$grid-gutter-width;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
index 15a6d15f55ba00aaa6d937dddb36ea6a1f1b7f66..2bad31f40512941b426ec06784e40102709e8d6e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_navs.scss
@@ -1,5 +1,5 @@
-@use '../defaults/bootstrap-defaults' as bd;
+@use '../vendor/variables' as vv;
 
 .nav-tabs {
-  margin-bottom: bd.$nav-tabs-margin-bottom;
+  margin-bottom: vv.$nav-tabs-margin-bottom;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss
index e5a6a01d77a68ddf4ca2fec4a0c7543378200500..ac2487cbb8170b8118d96a85df4f3cc037579f22 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_toast.scss
@@ -1,4 +1,4 @@
-@use './src/styles/defaults/bootstrap-defaults' as bd;
+@use './src/styles/vendor/variables' as vv;
 
 #toast-container {
   margin-top: 2vw;
@@ -7,7 +7,7 @@
     margin-top: 2.5vw;
   }
 
-  @media (max-width: bd.$screen-md-max) {
+  @media (max-width: vv.$screen-md-max) {
     margin-top: 9vw;
   }
 

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
index 52cc443b982b679fe827503b09ecbf779f5c56e9..4f40aa73971cc3c2499eb8d4d7a33872e905a77c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -1,5 +1,3 @@
-@use '../vendor/variables';
-
 // Color system
 
 $white: #fff !default;
@@ -17,62 +15,66 @@ $black: #000 !default;
 $blue: #007bff !default;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
-$pink: #a94442;
-$red: #ef5c55;
+$pink: #a94442 !default;
+$red: #ef5c55 !default;
 $orange: #fd7e14 !default;
-$yellow: #ffc200;
-$green: #0b0;
+$yellow: #ffc200 !default;
+$green: #0b0 !default;
 $teal: #20c997 !default;
 $cyan: #17a2b8 !default;
 
-$primary: #2b99a8;
-$secondary: #374249;
-$success: $green;
-$info: $primary;
-$warning: $yellow;
-$danger: $red;
-$light: $gray-100;
-$dark: #777;
+$primary: #2b99a8 !default;
+$secondary: #374249 !default;
+$success: $green !default;
+$info: $primary !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: #777 !default;
+
+// Extra theme colors.
+$accent: $red !default;
+$warning-dark: $orange !default;
 
-$fg-color-over-dark-bg: $white;
-$fg-hover-color-over-dark-bg: $gray-500;
+$fg-color-over-dark-bg: $white !default;
+$fg-hover-color-over-dark-bg: $gray-500 !default;
 
 $theme-colors: (
-  'accent': #ef5c55,
-  'warning-dark': $orange
-);
+  'accent': $accent,
+  'warning-dark': $warning-dark
+) !default;
 
 // Body
 
-$body-color-bright: $light;
-$body-bg: $white;
-$body-color: $gray-900;
+$body-color-bright: $light !default;
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
 
 // Typography
 
 $font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
 
 // Card
 
-$card-cap-bg: $gray-100;
+$card-cap-bg: $gray-100 !default;
 
 // Grid
 
-$grid-gutter-width: 30px;
+$grid-gutter-width: 30px !default;
 
 // Table
 
-$datatable-divider-color: rgba($black, 0.09);
+$datatable-divider-color: rgba($black, 0.09) !default;
 
 // Navs
 
-$nav-tabs-margin-bottom: 1rem;
+$nav-tabs-margin-bottom: 1rem !default;
 
 // Tooltips
 
-$tooltip-color: $white;
-$tooltip-bg: $body-color;
+$tooltip-color: $white !default;
+$tooltip-bg: $body-color !default;
 
 // Misc
 
@@ -81,10 +83,10 @@ $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);
+$screen-xs-max: calc(#{$screen-sm-min} - 1px) !default;
+$screen-sm-max: calc(#{$screen-md-min} - 1px) !default;
+$screen-md-max: calc(#{$screen-lg-min} - 1px) !default;
+$screen-lg-max: calc(#{$screen-xl-min} - 1px) !default;
 
-$navbar-height: 43px;
-$top-notification-height: 37.6px;
+$navbar-height: 43px !default;
+$top-notification-height: 37.6px !default;

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss
index 98a20db9fc24e0503e702e8d11f62f95d5995abb..ef08983f7ec3e33cacac716330ad4e1bbd7c09ed 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_index.scss
@@ -1,5 +1,4 @@
-@use '../vendor';
+@forward '../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
index d0f6aee913a1309154465b36c9fb58c1dcd83720..87c070731b7d9008d5339cab6ef915dfd2ac009d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_mixins.scss
@@ -1,17 +1,16 @@
-@use '../vendor/variables';
-@use 'bootstrap-defaults' as bd;
+@use '../vendor/variables' as vv;
 @use 'functions';
 
 @mixin table-cell {
   border: 0;
-  border-bottom: 1px solid bd.$gray-400;
-  border-left: 1px solid bd.$gray-400;
+  border-bottom: 1px solid vv.$gray-400;
+  border-left: 1px solid vv.$gray-400;
   padding: 5px;
 }
 
 @mixin hf {
-  background-color: bd.$gray-200;
-  border-bottom: 1px solid bd.$gray-400;
+  background-color: vv.$gray-200;
+  border-bottom: 1px solid vv.$gray-400;
 }
 
 @mixin fluid-font-size($min-vw, $max-vw, $min-font-size, $max-font-size) {

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss
index 0d73747bcc124a1a14a030c5808b2f924fbc03e8..182e69f3155370ddb8583324f867957b5badb2f5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_index.scss
@@ -1,2 +1,2 @@
-@use 'style-overrides';
-@use 'variables';
+@forward 'style-overrides';
+@forward '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
index cb697f0ed41d05db09909e9942202c996db7d260..2fbea9824ac2cd87308555a04a2130c31243103c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_style-overrides.scss
@@ -1 +1,4 @@
-/* Vendor specific scss */
+/* Vendor specific scss
+
+Custom styles, third-party libraries, frameworks, design systems, ...
+*/

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
index 4d011a9aaa6bd8ce7ff97338c2de04ab200c1e4c..1df7a90845c15548da7a22b7b6e69835f5385b18 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/vendor/_variables.scss
@@ -1 +1,17 @@
-/* Vendor specific variables */
+/* Vendor specific variables
+
+Example:
+$my-accent-color: #a18fff
+*/
+
+/* Bootstrap variables that are already defined can be overridden using configuration:
+https://sass-lang.com/documentation/at-rules/forward#configuring-modules
+
+Example:
+@forward '../defaults/bootstrap-defaults' with (
+  $theme-colors: (
+    'accent': $my-accent-color
+  )
+);
+*/
+@forward '../defaults/bootstrap-defaults';