[Summary view] [Print] [Text view]

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