diff options
Diffstat (limited to 'sass/vendor/bootstrap/scss/_navbar.scss')
| -rwxr-xr-x | sass/vendor/bootstrap/scss/_navbar.scss | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/sass/vendor/bootstrap/scss/_navbar.scss b/sass/vendor/bootstrap/scss/_navbar.scss new file mode 100755 index 0000000..80beec8 --- /dev/null +++ b/sass/vendor/bootstrap/scss/_navbar.scss @@ -0,0 +1,268 @@ +// Contents +// +// Navbar +// Navbar brand +// Navbar nav +// Navbar text +// Navbar divider +// Responsive navbar +// Navbar position +// Navbar themes + + +// Navbar +// +// Provide a static navbar from which we expand to create full-width, fixed, and +// other navbar variations. + +.navbar { + position: relative; + display: flex; + flex-direction: column; + padding: $navbar-padding-y $navbar-padding-x; +} + + +// Navbar brand +// +// Used for brand, project, or site names. + +.navbar-brand { + display: inline-block; + padding-top: .25rem; + padding-bottom: .25rem; + margin-right: $navbar-padding-x; + font-size: $font-size-lg; + line-height: inherit; + white-space: nowrap; + + @include hover-focus { + text-decoration: none; + } +} + + +// Navbar nav +// +// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`). + +.navbar-nav { + display: flex; + flex-direction: column; // cannot use `inherit` to get the `.navbar`s value + padding-left: 0; + margin-bottom: 0; + list-style: none; + + .nav-link { + padding-right: 0; + padding-left: 0; + } +} + + +// Navbar text +// +// + +.navbar-text { + display: inline-block; + padding-top: .425rem; + padding-bottom: .425rem; +} + + +// Responsive navbar +// +// Custom styles for responsive collapsing and toggling of navbar contents. +// Powered by the collapse Bootstrap JavaScript plugin. + +// Button for toggling the navbar when in its collapsed state +.navbar-toggler { + align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child + padding: $navbar-toggler-padding-y $navbar-toggler-padding-x; + font-size: $navbar-toggler-font-size; + line-height: 1; + background: transparent; // remove default button style + border: $border-width solid transparent; // remove default button style + @include border-radius($navbar-toggler-border-radius); + + @include hover-focus { + text-decoration: none; + } +} + +// Keep as a separate element so folks can easily override it with another icon +// or image file as needed. +.navbar-toggler-icon { + display: inline-block; + width: 1.5em; + height: 1.5em; + vertical-align: middle; + content: ""; + background: no-repeat center center; + background-size: 100% 100%; +} + +// Use `position` on the toggler to prevent it from being auto placed as a flex +// item and allow easy placement. +.navbar-toggler-left { + position: absolute; + left: $navbar-padding-x; +} +.navbar-toggler-right { + position: absolute; + right: $navbar-padding-x; +} + +// Generate series of `.navbar-toggleable-*` responsive classes for configuring +// where your navbar collapses. +.navbar-toggleable { + @each $breakpoint in map-keys($grid-breakpoints) { + $next: breakpoint-next($breakpoint, $grid-breakpoints); + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + &#{$infix} { + @include media-breakpoint-down($breakpoint) { + .navbar-nav { + .dropdown-menu { + position: static; + float: none; + } + } + + > .container { + padding-right: 0; + padding-left: 0; + } + } + + @include media-breakpoint-up($next) { + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + + .navbar-nav { + flex-direction: row; + + .nav-link { + padding-right: .5rem; + padding-left: .5rem; + } + } + + // For nesting containers, have to redeclare for alignment purposes + > .container { + display: flex; + flex-wrap: nowrap; + align-items: center; + } + + // scss-lint:disable ImportantRule + .navbar-collapse { + display: flex !important; + width: 100%; + } + // scss-lint:enable ImportantRule + + .navbar-toggler { + display: none; + } + } + } + } +} + + +// Navbar themes +// +// Styles for switching between navbars with light or dark background. + +// Dark links against a light background +.navbar-light { + .navbar-brand, + .navbar-toggler { + color: $navbar-light-active-color; + + @include hover-focus { + color: $navbar-light-active-color; + } + } + + .navbar-nav { + .nav-link { + color: $navbar-light-color; + + @include hover-focus { + color: $navbar-light-hover-color; + } + + &.disabled { + color: $navbar-light-disabled-color; + } + } + + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + color: $navbar-light-active-color; + } + } + + .navbar-toggler { + border-color: $navbar-light-toggler-border; + } + + .navbar-toggler-icon { + background-image: $navbar-light-toggler-bg; + } + + .navbar-text { + color: $navbar-light-color; + } +} + +// White links against a dark background +.navbar-inverse { + .navbar-brand, + .navbar-toggler { + color: $navbar-inverse-active-color; + + @include hover-focus { + color: $navbar-inverse-active-color; + } + } + + .navbar-nav { + .nav-link { + color: $navbar-inverse-color; + + @include hover-focus { + color: $navbar-inverse-hover-color; + } + + &.disabled { + color: $navbar-inverse-disabled-color; + } + } + + .open > .nav-link, + .active > .nav-link, + .nav-link.open, + .nav-link.active { + color: $navbar-inverse-active-color; + } + } + + .navbar-toggler { + border-color: $navbar-inverse-toggler-border; + } + + .navbar-toggler-icon { + background-image: $navbar-inverse-toggler-bg; + } + + .navbar-text { + color: $navbar-inverse-color; + } +} |