codekingpro/portable-devtools

1// Contents2//3// Navbar4// Navbar brand5// Navbar nav6// Navbar text7// Navbar divider8// Responsive navbar9// Navbar position10// Navbar themes11 12 13// Navbar14//15// Provide a static navbar from which we expand to create full-width, fixed, and16// 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 content22  align-items: center;23  justify-content: space-between; // space out brand from logo24  padding: $navbar-padding-y $navbar-padding-x;25 26  // Because flex properties aren't inherited, we need to redeclare these first27  // 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 brand49//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 nav68//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 value74  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 text91//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 navbar102//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 in107// 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 itself113  // 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 state118.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 style123  border: $border-width solid transparent; // remove default button style124  @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 icon132// 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 configuring148// 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 purposes191        %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-important212 213          // Changes flex-bases to auto because of an IE10 bug214          flex-basis: auto;215        }216 217        .navbar-toggler {218          display: none;219        }220      }221    }222  }223}224 225 226// Navbar themes227//228// Styles for switching between navbars with light or dark background.229 230// Dark links against a light background231.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      }247 248      &.disabled {249        color: $navbar-light-disabled-color;250      }251    }252 253    .show > .nav-link,254    .active > .nav-link,255    .nav-link.show,256    .nav-link.active {257      color: $navbar-light-active-color;258    }259  }260 261  .navbar-toggler {262    color: $navbar-light-color;263    border-color: $navbar-light-toggler-border-color;264  }265 266  .navbar-toggler-icon {267    background-image: escape-svg($navbar-light-toggler-icon-bg);268  }269 270  .navbar-text {271    color: $navbar-light-color;272    a {273      color: $navbar-light-active-color;274 275      @include hover-focus() {276        color: $navbar-light-active-color;277      }278    }279  }280}281 282// White links against a dark background283.navbar-dark {284  .navbar-brand {285    color: $navbar-dark-brand-color;286 287    @include hover-focus() {288      color: $navbar-dark-brand-hover-color;289    }290  }291 292  .navbar-nav {293    .nav-link {294      color: $navbar-dark-color;295 296      @include hover-focus() {297        color: $navbar-dark-hover-color;298      }299 300      &.disabled {301        color: $navbar-dark-disabled-color;302      }303    }304 305    .show > .nav-link,306    .active > .nav-link,307    .nav-link.show,308    .nav-link.active {309      color: $navbar-dark-active-color;310    }311  }312 313  .navbar-toggler {314    color: $navbar-dark-color;315    border-color: $navbar-dark-toggler-border-color;316  }317 318  .navbar-toggler-icon {319    background-image: escape-svg($navbar-dark-toggler-icon-bg);320  }321 322  .navbar-text {323    color: $navbar-dark-color;324    a {325      color: $navbar-dark-active-color;326 327      @include hover-focus() {328        color: $navbar-dark-active-color;329      }330    }331  }332}333