[Summary view] [Print] [Text view]

   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: no-repeat center center;
 140    background-size: 100% 100%;
 141  }
 142  
 143  // Generate series of `.navbar-expand-*` responsive classes for configuring
 144  // where your navbar collapses.
 145  .navbar-expand {
 146    @each $breakpoint in map-keys($grid-breakpoints) {
 147      $next: breakpoint-next($breakpoint, $grid-breakpoints);
 148      $infix: breakpoint-infix($next, $grid-breakpoints);
 149  
 150      &#{$infix} {
 151        @include media-breakpoint-down($breakpoint) {
 152          %container-navbar-expand-#{$breakpoint} {
 153            padding-right: 0;
 154            padding-left: 0;
 155          }
 156  
 157          > .container,
 158          > .container-fluid {
 159            @extend %container-navbar-expand-#{$breakpoint};
 160          }
 161  
 162          @each $size, $container-max-width in $container-max-widths {
 163            > .container#{breakpoint-infix($size, $container-max-widths)} {
 164              @extend %container-navbar-expand-#{$breakpoint};
 165            }
 166          }
 167        }
 168  
 169        @include media-breakpoint-up($next) {
 170          flex-flow: row nowrap;
 171          justify-content: flex-start;
 172  
 173          .navbar-nav {
 174            flex-direction: row;
 175  
 176            .dropdown-menu {
 177              position: absolute;
 178            }
 179  
 180            .nav-link {
 181              padding-right: $navbar-nav-link-padding-x;
 182              padding-left: $navbar-nav-link-padding-x;
 183            }
 184          }
 185  
 186          // For nesting containers, have to redeclare for alignment purposes
 187          %container-nesting-#{$breakpoint} {
 188            flex-wrap: nowrap;
 189          }
 190  
 191          > .container,
 192          > .container-fluid {
 193            @extend %container-nesting-#{$breakpoint};
 194          }
 195  
 196          @each $size, $container-max-width in $container-max-widths {
 197            > .container#{breakpoint-infix($size, $container-max-widths)} {
 198              @extend %container-nesting-#{$breakpoint};
 199            }
 200          }
 201  
 202          .navbar-collapse {
 203            display: flex !important; // stylelint-disable-line declaration-no-important
 204  
 205            // Changes flex-bases to auto because of an IE10 bug
 206            flex-basis: auto;
 207          }
 208  
 209          .navbar-toggler {
 210            display: none;
 211          }
 212        }
 213      }
 214    }
 215  }
 216  
 217  
 218  // Navbar themes
 219  //
 220  // Styles for switching between navbars with light or dark background.
 221  
 222  // Dark links against a light background
 223  .navbar-light {
 224    .navbar-brand {
 225      color: $navbar-light-brand-color;
 226  
 227      @include hover-focus() {
 228        color: $navbar-light-brand-hover-color;
 229      }
 230    }
 231  
 232    .navbar-nav {
 233      .nav-link {
 234        color: $navbar-light-color;
 235  
 236        @include hover-focus() {
 237          color: $navbar-light-hover-color;
 238        }
 239  
 240        &.disabled {
 241          color: $navbar-light-disabled-color;
 242        }
 243      }
 244  
 245      .show > .nav-link,
 246      .active > .nav-link,
 247      .nav-link.show,
 248      .nav-link.active {
 249        color: $navbar-light-active-color;
 250      }
 251    }
 252  
 253    .navbar-toggler {
 254      color: $navbar-light-color;
 255      border-color: $navbar-light-toggler-border-color;
 256    }
 257  
 258    .navbar-toggler-icon {
 259      background-image: escape-svg($navbar-light-toggler-icon-bg);
 260    }
 261  
 262    .navbar-text {
 263      color: $navbar-light-color;
 264      a {
 265        color: $navbar-light-active-color;
 266  
 267        @include hover-focus() {
 268          color: $navbar-light-active-color;
 269        }
 270      }
 271    }
 272  }
 273  
 274  // White links against a dark background
 275  .navbar-dark {
 276    .navbar-brand {
 277      color: $navbar-dark-brand-color;
 278  
 279      @include hover-focus() {
 280        color: $navbar-dark-brand-hover-color;
 281      }
 282    }
 283  
 284    .navbar-nav {
 285      .nav-link {
 286        color: $navbar-dark-color;
 287  
 288        @include hover-focus() {
 289          color: $navbar-dark-hover-color;
 290        }
 291  
 292        &.disabled {
 293          color: $navbar-dark-disabled-color;
 294        }
 295      }
 296  
 297      .show > .nav-link,
 298      .active > .nav-link,
 299      .nav-link.show,
 300      .nav-link.active {
 301        color: $navbar-dark-active-color;
 302      }
 303    }
 304  
 305    .navbar-toggler {
 306      color: $navbar-dark-color;
 307      border-color: $navbar-dark-toggler-border-color;
 308    }
 309  
 310    .navbar-toggler-icon {
 311      background-image: escape-svg($navbar-dark-toggler-icon-bg);
 312    }
 313  
 314    .navbar-text {
 315      color: $navbar-dark-color;
 316      a {
 317        color: $navbar-dark-active-color;
 318  
 319        @include hover-focus() {
 320          color: $navbar-dark-active-color;
 321        }
 322      }
 323    }
 324  }