update source to Ceph Pacific 16.2.2

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / core / navigation / navigation / navigation.component.scss

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/ceph/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index 9c0d8f09d733416476f6242d608f0ecc563ce1de..f559abbf2b95be9605caad0778ed08601b6181b4 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -1,21 +1,21 @@
-@import 'defaults';
+@use './src/styles/vendor/variables' as vv;
 
 /* ---------------------------------------------------
     NAVBAR STYLE
 --------------------------------------------------- */
 
-::ng-deep .cd-navbar-top {
+::ng-deep cd-navigation .cd-navbar-top {
   .cd-navbar-brand {
-    background: $color-navbar-bg;
-    border-top: 4px solid $color-nav-top-bar;
+    background: vv.$secondary;
+    border-top: 4px solid vv.$primary;
 
     &.isPwdDisplayed {
-      top: $top-notification-height;
+      top: vv.$top-notification-height;
     }
 
     .navbar-brand,
     .navbar-brand:hover {
-      color: $color-navbar-brand;
+      color: vv.$gray-200;
       height: auto;
       padding: 0;
     }
@@ -33,7 +33,7 @@
       }
 
       .fa-navicon {
-        color: $color-nav-toggle-bar;
+        color: vv.$gray-200;
       }
     }
 
@@ -42,45 +42,45 @@
     }
 
     .cd-navbar-utility > .active > a {
-      color: $color-nav-links;
-      background-color: $color-nav-links-hover;
+      background-color: vv.$primary;
+      color: vv.$gray-200;
     }
 
     .cd-navbar-utility > li > .open > a,
     .cd-navbar-utility > li > .open > a:focus,
     .cd-navbar-utility > li > .open > a:hover {
-      color: $color-nav-links;
-      border-color: transparent;
       background-color: transparent;
+      border-color: transparent;
+      color: vv.$gray-200;
     }
   }
 
-  .navbar-nav > li > .cd-navbar > [dropdown] > a,
+  .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
   .navbar-nav > li > .cd-navbar > a,
   .navbar-nav > li > a {
-    color: $color-nav-links;
+    color: vv.$gray-200;
+    display: block;
     line-height: 1;
     padding: 13.5px 18px !important;
     position: relative;
-    display: block;
     text-decoration: none;
   }
 
   .navbar-nav .nav-link,
   .navbar-nav .nav-link:hover {
-    color: $color-nav-links;
+    color: vv.$gray-200;
   }
 
-  .navbar-nav > li > .cd-navbar > [dropdown] > a:hover,
-  .navbar-nav > li > .cd-navbar > [dropdown].open > a,
+  .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover,
+  .navbar-nav > li > .cd-navbar > [ngbDropdown].open > a,
   .navbar-nav > li > .cd-navbar > a:hover,
   .navbar-nav > li > a:hover,
   .navbar-nav > li:hover {
-    background-color: $color-nav-links-hover;
+    background-color: vv.$primary;
   }
 
-  .navbar-nav > .open > .cd-navbar > [dropdown] > a,
-  .navbar-nav > .open > .cd-navbar > [dropdown] > a:hover,
+  .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
+  .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a:hover,
   .navbar-nav > .open > .cd-navbar > a,
   .navbar-nav > .open > .cd-navbar > a:focus,
   .navbar-nav > .open > .cd-navbar > a:hover,
@@ -88,22 +88,22 @@
   .navbar-nav > .open > a,
   .navbar-nav > .open > a:focus,
   .navbar-nav > .open > a:hover {
-    color: $color-nav-links;
-    border-color: transparent;
     background-color: transparent;
+    border-color: transparent;
+    color: vv.$gray-200;
   }
 
-  @media (min-width: $screen-md-min) {
+  @media (min-width: vv.$screen-md-min) {
     .cd-navbar-utility {
       border-bottom: 0;
+      font-size: 1.1rem;
       position: absolute;
       right: 0;
       top: 0;
-      font-size: 1.1rem;
     }
   }
 
-  @media (max-width: $screen-sm-max) {
+  @media (max-width: vv.$screen-sm-max) {
     .navbar-nav {
       margin: 0;
 
@@ -112,24 +112,24 @@
       }
 
       .open .dropdown-menu {
+        background-color: vv.$primary;
         border: 0;
-        padding-top: 0;
         padding-bottom: 0;
-        background-color: $color-nav-open-bg;
+        padding-top: 0;
       }
 
       .open .dropdown-menu > li > a {
+        color: vv.$gray-200;
         padding: 5px 15px 5px 35px;
-        color: $color-nav-links;
       }
 
       .open .dropdown-menu > .active > a {
-        background-color: $color-nav-active-link-bg;
+        background-color: vv.$primary;
       }
+    }
 
-      & > li > a:hover {
-        background-color: $color-nav-active-link-bg;
-      }
+    .navbar-nav > li > a:hover {
+      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 {
-  color: $color-nav-links !important;
-  background-color: $color-nav-links-hover !important;
+  background-color: vv.$primary !important;
   border: 0 !important;
+  color: vv.$gray-200 !important;
 }
 
 .wrapper {
@@ -153,16 +153,16 @@ $sidebar-width: 200px;
   width: 100%;
 
   #sidebar {
-    width: $sidebar-width;
-    top: $navbar-height;
-    background: $color-navbar-bg;
-    overflow-y: auto;
-    position: fixed;
+    background: vv.$secondary;
     bottom: 0;
+    color: vv.$white;
     left: 0;
-    z-index: 999;
-    color: #fff;
+    overflow-y: auto;
+    position: fixed;
+    top: vv.$navbar-height;
     transition: all 0.3s;
+    width: $sidebar-width;
+    z-index: 999;
 
     &.active {
       margin-left: -$sidebar-width;
@@ -170,36 +170,37 @@ $sidebar-width: 200px;
 
     ul {
       &.component {
-        padding: 20px 0;
         margin: 0;
+        padding: 20px 0;
       }
 
       p {
-        color: #fff;
+        color: vv.$white;
         padding: 10px;
       }
 
       li a {
-        padding: 10px;
-        font-size: 1.1em;
+        color: vv.$white;
         display: block;
-        color: #fff;
+        font-size: 1.1em;
+        padding: 10px;
+        padding-left: 27px;
+
+        text-decoration: none;
 
         &:hover {
-          color: #fff;
-          background: $color-primary;
+          background: vv.$primary;
+          color: vv.$white;
         }
 
-        & > .badge {
+        > .badge {
           margin-left: 5px;
         }
-
-        text-decoration: none;
       }
 
       li.active > a,
       li > a a[aria-expanded='true'] {
-        color: #fff;
+        color: vv.$white;
       }
     }
   }
@@ -208,12 +209,12 @@ $sidebar-width: 200px;
     position: relative;
 
     &::after {
-      position: absolute;
-      right: 20px;
+      border: 0;
       content: '\f054';
       font-family: 'ForkAwesome';
-      border: 0;
       font-size: 1rem;
+      position: absolute;
+      right: 20px;
       transition: transform 0.3s ease-in-out;
     }
 
@@ -223,9 +224,9 @@ $sidebar-width: 200px;
   }
 
   ul ul a {
+    background: lighten(vv.$secondary, 10);
     font-size: 0.9em !important;
-    padding-left: 30px !important;
-    background: lighten($color-navbar-bg, 10);
+    padding-left: 40px !important;
   }
 
   .cd-navbar-primary a:focus {
@@ -242,12 +243,12 @@ $sidebar-width: 200px;
 --------------------------------------------------- */
 
 #content {
-  width: calc(100% - #{$sidebar-width});
-  transition: all 0.3s;
-  position: absolute;
-  top: $navbar-height;
   bottom: 0;
+  position: absolute;
   right: 0;
+  top: vv.$navbar-height;
+  transition: all 0.3s;
+  width: calc(100% - #{$sidebar-width});
 
   &.active {
     width: 100vw;
@@ -261,19 +262,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: vv.$top-notification-height * $i;
     }
 
     #sidebar {
-      top: $navbar-height + $top-notification-height * $i;
+      top: vv.$navbar-height + vv.$top-notification-height * $i;
     }
 
     #content {
-      top: $navbar-height + $top-notification-height * $i;
+      top: vv.$navbar-height + vv.$top-notification-height * $i;
     }
 
     cd-notifications-sidebar {
-      top: $navbar-height + $top-notification-height * $i + 10px;
+      top: vv.$navbar-height + vv.$top-notification-height * $i + 10px;
     }
   }
 }