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           }
 188         }
 189
 190         // For nesting containers, have to redeclare for alignment purposes
 191         %container-nesting-#{$breakpoint} {
 192           flex-wrap: nowrap;
 193         }
 194
 195         > .container,
 196         > .container-fluid {
 197           @extend %container-nesting-#{$breakpoint};
 198         }
 199
 200         @each $size, $container-max-width in $container-max-widths {
 201           > .container#{breakpoint-infix($size, $container-max-widths)} {
 202             @extend %container-nesting-#{$breakpoint};
 203           }
 204         }
 205
 206         .navbar-nav-scroll {
 207           overflow: visible;
 208         }
 209
 210         .navbar-collapse {
 211           display: flex !important; // stylelint-disable-line declaration-no-important
 212
 213           // Changes flex-bases to auto because of an IE10 bug
 214           flex-basis: auto;
 215         }
 216
 217         .navbar-toggler {
 218           display: none;
 219         }
 220       }
 221     }
 222   }
 223 }
 224
 225
 226 // Navbar themes
 227 //
 228 // Styles for switching between navbars with light or dark background.
 229
 230 // Dark links against a light background
 231 .navbar-light {
 232   .navbar-brand {
 233     color: $navbar-light-brand-color;
 234
 235     @include hover-focus() {
 236       color: $navbar-light-brand-hover-color;
 237     }
 238   }
 239
 240   .navbar-nav {
 241     .nav-link {
 242       color: $navbar-light-color;
 243
 244       @include hover-focus() {
 245         color: $navbar-light-hover-color;
 246         background-color: $navbar-light-hover-bg; // Nick
 247       }
 248
 249       &.disabled {
 250         color: $navbar-light-disabled-color;
 251       }
 252     }
 253
 254     .show > .nav-link,
 255     .active > .nav-link,
 256     .nav-link.show,
 257     .nav-link.active {
 258       color: $navbar-light-active-color;
 259       background-color: $navbar-light-active-bg; // Nick
 260     }
 261   }
 262
 263   .navbar-toggler {
 264     color: $navbar-light-color;
 265     border-color: $navbar-light-toggler-border-color;
 266   }
 267
 268   .navbar-toggler-icon {
 269     background-image: escape-svg($navbar-light-toggler-icon-bg);
 270   }
 271
 272   .navbar-text {
 273     color: $navbar-light-color;
 274     a {
 275       color: $navbar-light-active-color;
 276
 277       @include hover-focus() {
 278         color: $navbar-light-active-color;
 279       }
 280     }
 281   }
 282 }
 283
 284 // White links against a dark background
 285 .navbar-dark {
 286   .navbar-brand {
 287     color: $navbar-dark-brand-color;
 288
 289     @include hover-focus() {
 290       color: $navbar-dark-brand-hover-color;
 291     }
 292   }
 293
 294   .navbar-nav {
 295     .nav-link {
 296       color: $navbar-dark-color;
 297
 298       @include hover-focus() {
 299         color: $navbar-dark-hover-color;
 300         background-color: $navbar-dark-hover-bg; // Nick
 301       }
 302
 303       &.disabled {
 304         color: $navbar-dark-disabled-color;
 305       }
 306     }
 307
 308     .show > .nav-link,
 309     .active > .nav-link,
 310     .nav-link.show,
 311     .nav-link.active {
 312       color: $navbar-dark-active-color;
 313       background-color: $navbar-dark-active-bg; // Nick
 314     }
 315   }
 316
 317   .navbar-toggler {
 318     color: $navbar-dark-color;
 319     border-color: $navbar-dark-toggler-border-color;
 320   }
 321
 322   .navbar-toggler-icon {
 323     background-image: escape-svg($navbar-dark-toggler-icon-bg);
 324   }
 325
 326   .navbar-text {
 327     color: $navbar-dark-color;
 328     a {
 329       color: $navbar-dark-active-color;
 330
 331       @include hover-focus() {
 332         color: $navbar-dark-active-color;
 333       }
 334     }
 335   }
 336 }