resources/tools/dash/app/pal/static/sass/bootstrap/_navbar.scss

   1 // Navbar
   2 //
   3 // Provide a static navbar from which we expand to create full-width, fixed, and
   4 // other navbar variations.
   5
   6 .navbar {
   7   // scss-docs-start navbar-css-vars
   8   --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
   9   --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  10   --#{$prefix}navbar-color: #{$navbar-light-color};
  11   --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  12   --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  13   --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  14   --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  15   --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  16   --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  17   --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  18   --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  19   --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  20   --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  21   --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  22   --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  23   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  24   --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  25   --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  26   --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  27   --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
  28   // scss-docs-end navbar-css-vars
  29
  30   position: relative;
  31   display: flex;
  32   flex-wrap: wrap; // allow us to do the line break for collapsing content
  33   align-items: center;
  34   justify-content: space-between; // space out brand from logo
  35   padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
  36   @include gradient-bg();
  37
  38   // Because flex properties aren't inherited, we need to redeclare these first
  39   // few properties so that content nested within behave properly.
  40   // The `flex-wrap` property is inherited to simplify the expanded navbars
  41   %container-flex-properties {
  42     display: flex;
  43     flex-wrap: inherit;
  44     align-items: center;
  45     justify-content: space-between;
  46   }
  47
  48   > .container,
  49   > .container-fluid {
  50     @extend %container-flex-properties;
  51   }
  52
  53   @each $breakpoint, $container-max-width in $container-max-widths {
  54     > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
  55       @extend %container-flex-properties;
  56     }
  57   }
  58 }
  59
  60
  61 // Navbar brand
  62 //
  63 // Used for brand, project, or site names.
  64
  65 .navbar-brand {
  66   padding-top: var(--#{$prefix}navbar-brand-padding-y);
  67   padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
  68   margin-right: var(--#{$prefix}navbar-brand-margin-end);
  69   @include font-size(var(--#{$prefix}navbar-brand-font-size));
  70   color: var(--#{$prefix}navbar-brand-color);
  71   text-decoration: if($link-decoration == none, null, none);
  72   white-space: nowrap;
  73
  74   &:hover,
  75   &:focus {
  76     color: var(--#{$prefix}navbar-brand-hover-color);
  77     text-decoration: if($link-hover-decoration == underline, none, null);
  78   }
  79 }
  80
  81
  82 // Navbar nav
  83 //
  84 // Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
  85
  86 .navbar-nav {
  87   // scss-docs-start navbar-nav-css-vars
  88   --#{$prefix}nav-link-padding-x: 0;
  89   --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  90   @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  91   --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  92   --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  93   --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  94   --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
  95   // scss-docs-end navbar-nav-css-vars
  96
  97   display: flex;
  98   flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
  99   padding-left: 0;
 100   margin-bottom: 0;
 101   list-style: none;
 102
 103   .show > .nav-link,
 104   .nav-link.active {
 105     color: var(--#{$prefix}navbar-active-color);
 106   }
 107
 108   .dropdown-menu {
 109     position: static;
 110   }
 111 }
 112
 113
 114 // Navbar text
 115 //
 116 //
 117
 118 .navbar-text {
 119   padding-top: $nav-link-padding-y;
 120   padding-bottom: $nav-link-padding-y;
 121   color: var(--#{$prefix}navbar-color);
 122
 123   a,
 124   a:hover,
 125   a:focus  {
 126     color: var(--#{$prefix}navbar-active-color);
 127   }
 128 }
 129
 130
 131 // Responsive navbar
 132 //
 133 // Custom styles for responsive collapsing and toggling of navbar contents.
 134 // Powered by the collapse Bootstrap JavaScript plugin.
 135
 136 // When collapsed, prevent the toggleable navbar contents from appearing in
 137 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
 138 // on the `.navbar` parent.
 139 .navbar-collapse {
 140   flex-basis: 100%;
 141   flex-grow: 1;
 142   // For always expanded or extra full navbars, ensure content aligns itself
 143   // properly vertically. Can be easily overridden with flex utilities.
 144   align-items: center;
 145 }
 146
 147 // Button for toggling the navbar when in its collapsed state
 148 .navbar-toggler {
 149   padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
 150   @include font-size(var(--#{$prefix}navbar-toggler-font-size));
 151   line-height: 1;
 152   color: var(--#{$prefix}navbar-color);
 153   background-color: transparent; // remove default button style
 154   border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
 155   @include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
 156   @include transition(var(--#{$prefix}navbar-toggler-transition));
 157
 158   &:hover {
 159     text-decoration: none;
 160   }
 161
 162   &:focus {
 163     text-decoration: none;
 164     outline: 0;
 165     box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
 166   }
 167 }
 168
 169 // Keep as a separate element so folks can easily override it with another icon
 170 // or image file as needed.
 171 .navbar-toggler-icon {
 172   display: inline-block;
 173   width: 1.5em;
 174   height: 1.5em;
 175   vertical-align: middle;
 176   background-image: var(--#{$prefix}navbar-toggler-icon-bg);
 177   background-repeat: no-repeat;
 178   background-position: center;
 179   background-size: 100%;
 180 }
 181
 182 .navbar-nav-scroll {
 183   max-height: var(--#{$prefix}scroll-height, 75vh);
 184   overflow-y: auto;
 185 }
 186
 187 // scss-docs-start navbar-expand-loop
 188 // Generate series of `.navbar-expand-*` responsive classes for configuring
 189 // where your navbar collapses.
 190 .navbar-expand {
 191   @each $breakpoint in map-keys($grid-breakpoints) {
 192     $next: breakpoint-next($breakpoint, $grid-breakpoints);
 193     $infix: breakpoint-infix($next, $grid-breakpoints);
 194
 195     // stylelint-disable-next-line scss/selector-no-union-class-name
 196     &#{$infix} {
 197       @include media-breakpoint-up($next) {
 198         flex-wrap: nowrap;
 199         justify-content: flex-start;
 200
 201         .navbar-nav {
 202           flex-direction: row;
 203
 204           .dropdown-menu {
 205             position: absolute;
 206           }
 207
 208           .nav-link {
 209             padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
 210             padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
 211           }
 212         }
 213
 214         .navbar-nav-scroll {
 215           overflow: visible;
 216         }
 217
 218         .navbar-collapse {
 219           display: flex !important; // stylelint-disable-line declaration-no-important
 220           flex-basis: auto;
 221         }
 222
 223         .navbar-toggler {
 224           display: none;
 225         }
 226
 227         .offcanvas {
 228           // stylelint-disable declaration-no-important
 229           position: static;
 230           z-index: auto;
 231           flex-grow: 1;
 232           width: auto !important;
 233           height: auto !important;
 234           visibility: visible !important;
 235           background-color: transparent !important;
 236           border: 0 !important;
 237           transform: none !important;
 238           @include box-shadow(none);
 239           @include transition(none);
 240           // stylelint-enable declaration-no-important
 241
 242           .offcanvas-header {
 243             display: none;
 244           }
 245
 246           .offcanvas-body {
 247             display: flex;
 248             flex-grow: 0;
 249             padding: 0;
 250             overflow-y: visible;
 251           }
 252         }
 253       }
 254     }
 255   }
 256 }
 257 // scss-docs-end navbar-expand-loop
 258
 259 // Navbar themes
 260 //
 261 // Styles for switching between navbars with light or dark background.
 262
 263 .navbar-light {
 264   @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
 265 }
 266
 267 .navbar-dark {
 268   // scss-docs-start navbar-dark-css-vars
 269   --#{$prefix}navbar-color: #{$navbar-dark-color};
 270   --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
 271   --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
 272   --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
 273   --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
 274   --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
 275   --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
 276   --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
 277   // scss-docs-end navbar-dark-css-vars
 278 }