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

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