diff options
| author | Pierre-Denis Vanduynslager <[email protected]> | 2017-01-13 23:05:33 -0500 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-03-23 23:02:28 -0700 |
| commit | c1325a756ef1c19c197566f6889d49410b1dadf5 (patch) | |
| tree | 8ceff01b6b9be5312f223eb2fb785ea41e330b75 /scss | |
| parent | d0b568470f1623ef865eefa695503f642d802565 (diff) | |
| download | bootstrap-c1325a756ef1c19c197566f6889d49410b1dadf5.tar.xz bootstrap-c1325a756ef1c19c197566f6889d49410b1dadf5.zip | |
Generate correct breakpoints for navbar-toggleable-* and generate toggleable without media query to never collapse
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_navbar.scss | 6 | ||||
| -rw-r--r-- | scss/mixins/_breakpoints.scss | 15 |
2 files changed, 17 insertions, 4 deletions
diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 6c31017dc..a0856cb81 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -126,11 +126,11 @@ // where your navbar collapses. .navbar-toggleable { @each $breakpoint in map-keys($grid-breakpoints) { - $next: breakpoint-next($breakpoint, $grid-breakpoints); + $previous: breakpoint-previous($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($breakpoint, $grid-breakpoints); &#{$infix} { - @include media-breakpoint-down($breakpoint) { + @include media-breakpoint-down($previous) { .navbar-nav { .dropdown-menu { position: static; @@ -144,7 +144,7 @@ } } - @include media-breakpoint-up($next) { + @include media-breakpoint-up($breakpoint) { flex-direction: row; flex-wrap: nowrap; align-items: center; diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss index 904b60f7a..b2d90c447 100644 --- a/scss/mixins/_breakpoints.scss +++ b/scss/mixins/_breakpoints.scss @@ -16,9 +16,22 @@ // md @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { $n: index($breakpoint-names, $name); - @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); + @return if($n, if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null), null); } +// Name of the previous breakpoint, or null for the first breakpoint. +// +// >> breakpoint-previous(sm) +// xs +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) +// xs +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) +// xs +@function breakpoint-previous($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n != 1, nth($breakpoint-names, $n - 1), null); +}; + // Minimum breakpoint width. Null for the smallest (first) breakpoint. // // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) |