css/bootstrap/_navbar.scss

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