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

   1 @use './src/styles/vendor/variables' as vv;
   2
   3 /* --------------------------------------------------
   4    MAIN NAVBAR STYLE
   5 --------------------------------------------------- */
   6
   7 .cd-navbar-main {
   8   display: flex;
   9   flex: 1;
  10   flex-direction: column;
  11   height: 100%;
  12 }
  13
  14 /* ---------------------------------------------------
  15     NAVBAR STYLE
  16 --------------------------------------------------- */
  17
  18 ::ng-deep cd-navigation .cd-navbar-top {
  19   .cd-navbar-brand {
  20     background: vv.$secondary;
  21     border-top: 4px solid vv.$primary;
  22
  23     .navbar-brand,
  24     .navbar-brand:hover {
  25       color: vv.$gray-200;
  26       height: auto;
  27       padding: 0;
  28     }
  29
  30     .navbar-brand > img {
  31       height: 25px;
  32     }
  33
  34     .navbar-toggler {
  35       border: 0;
  36
  37       &:focus,
  38       &:hover {
  39         outline: 0;
  40       }
  41
  42       .fa-navicon {
  43         color: vv.$gray-200;
  44       }
  45     }
  46
  47     .navbar-collapse {
  48       padding: 0;
  49     }
  50
  51     .cd-navbar-utility > .active > a {
  52       background-color: vv.$primary;
  53       color: vv.$gray-200;
  54     }
  55
  56     .cd-navbar-utility > li > .open > a,
  57     .cd-navbar-utility > li > .open > a:focus,
  58     .cd-navbar-utility > li > .open > a:hover {
  59       background-color: transparent;
  60       border-color: transparent;
  61       color: vv.$gray-200;
  62     }
  63   }
  64
  65   .navbar-nav > li > .cd-navbar > [ngbDropdown] > a,
  66   .navbar-nav > li > .cd-navbar > a,
  67   .navbar-nav > li > a {
  68     color: vv.$gray-200;
  69     display: block;
  70     line-height: 1;
  71     padding: 13.5px 18px !important;
  72     position: relative;
  73     text-decoration: none;
  74   }
  75
  76   .navbar-nav .nav-link,
  77   .navbar-nav .nav-link:hover {
  78     color: vv.$gray-200;
  79   }
  80
  81   .navbar-nav > li > .cd-navbar > [ngbDropdown] > a:hover,
  82   .navbar-nav > li > .cd-navbar > [ngbDropdown].open > a,
  83   .navbar-nav > li > .cd-navbar > a:hover,
  84   .navbar-nav > li > a:hover,
  85   .navbar-nav > li:hover {
  86     background-color: vv.$primary;
  87   }
  88
  89   .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
  90   .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a:hover,
  91   .navbar-nav > .open > .cd-navbar > a,
  92   .navbar-nav > .open > .cd-navbar > a:focus,
  93   .navbar-nav > .open > .cd-navbar > a:hover,
  94   .navbar-nav > .open > .cd-navbar > li > a:focus,
  95   .navbar-nav > .open > a,
  96   .navbar-nav > .open > a:focus,
  97   .navbar-nav > .open > a:hover {
  98     background-color: transparent;
  99     border-color: transparent;
 100     color: vv.$gray-200;
 101   }
 102
 103   @media (min-width: vv.$screen-md-min) {
 104     .cd-navbar-utility {
 105       border-bottom: 0;
 106       font-size: 1.1rem;
 107       position: absolute;
 108       right: 0;
 109       top: 0;
 110     }
 111   }
 112
 113   @media (max-width: vv.$screen-sm-max) {
 114     .navbar-nav {
 115       margin: 0;
 116
 117       .fa {
 118         margin-right: 0.5em;
 119       }
 120
 121       .open .dropdown-menu {
 122         background-color: vv.$primary;
 123         border: 0;
 124         padding-bottom: 0;
 125         padding-top: 0;
 126       }
 127
 128       .open .dropdown-menu > li > a {
 129         color: vv.$gray-200;
 130         padding: 5px 15px 5px 35px;
 131       }
 132
 133       .open .dropdown-menu > .active > a {
 134         background-color: vv.$primary;
 135       }
 136     }
 137
 138     .navbar-nav > li > a:hover {
 139       background-color: vv.$primary;
 140     }
 141   }
 142 }
 143
 144 /* ---------------------------------------------------
 145     SIDEBAR STYLE
 146 --------------------------------------------------- */
 147
 148 $sidebar-width: 200px;
 149
 150 .cd-navbar-primary .active > a,
 151 .cd-navbar-primary > .active > a:focus,
 152 .cd-navbar-primary > .active > a:hover {
 153   background-color: vv.$primary !important;
 154   border: 0 !important;
 155   color: vv.$gray-200 !important;
 156 }
 157
 158 .wrapper {
 159   display: flex;
 160   height: 100%;
 161   width: 100%;
 162
 163   #sidebar {
 164     background: vv.$secondary;
 165     bottom: 0;
 166     color: vv.$white;
 167     height: auto;
 168     left: 0;
 169     overflow-y: auto;
 170     position: relative;
 171     transition: all 0.3s;
 172     width: $sidebar-width;
 173     z-index: 999;
 174
 175     &.active {
 176       margin-left: -$sidebar-width;
 177     }
 178
 179     ul {
 180       &.component {
 181         margin: 0;
 182         padding: 20px 0;
 183       }
 184
 185       p {
 186         color: vv.$white;
 187         padding: 10px;
 188       }
 189
 190       li a {
 191         color: vv.$white;
 192         display: block;
 193         font-size: 1.1em;
 194         padding: 10px;
 195         padding-left: 27px;
 196
 197         text-decoration: none;
 198
 199         &:hover {
 200           background: vv.$primary;
 201           color: vv.$white;
 202         }
 203
 204         > .badge {
 205           margin-left: 5px;
 206         }
 207       }
 208
 209       li.active > a,
 210       li > a a[aria-expanded='true'] {
 211         color: vv.$white;
 212       }
 213     }
 214   }
 215
 216   a.dropdown-toggle {
 217     position: relative;
 218
 219     &::after {
 220       border: 0;
 221       content: '\f054';
 222       font-family: 'ForkAwesome';
 223       font-size: 1rem;
 224       position: absolute;
 225       right: 20px;
 226       transition: transform 0.3s ease-in-out;
 227     }
 228
 229     &[aria-expanded='true']::after {
 230       transform: rotate(90deg);
 231     }
 232   }
 233
 234   ul ul a {
 235     background: lighten(vv.$secondary, 10);
 236     font-size: 0.9em !important;
 237     padding-left: 40px !important;
 238   }
 239
 240   .cd-navbar-primary a:focus {
 241     outline: none;
 242   }
 243
 244   ngx-simplebar {
 245     height: 100%;
 246   }
 247 }
 248
 249 /* ---------------------------------------------------
 250     CONTENT STYLE
 251 --------------------------------------------------- */
 252
 253 #content {
 254   bottom: 0;
 255   position: relative;
 256   right: 0;
 257   transition: all 0.3s;
 258   width: calc(100% - #{$sidebar-width});
 259
 260   &.active {
 261     width: 100vw;
 262   }
 263 }