diff options
Diffstat (limited to 'assets/stylesheets/bootstrap/mixins/_breakpoints.scss')
-rw-r--r-- | assets/stylesheets/bootstrap/mixins/_breakpoints.scss | 41 |
1 files changed, 25 insertions, 16 deletions
diff --git a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss index a868833..6fd2e8e 100644 --- a/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +++ b/assets/stylesheets/bootstrap/mixins/_breakpoints.scss @@ -2,7 +2,7 @@ // // Breakpoints are defined as a map of (name: minimum width), order from small to large: // -// (xs: 0, sm: 544px, md: 768px) +// (xs: 0, sm: 576px, md: 768px) // // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. @@ -10,7 +10,7 @@ // // >> breakpoint-next(sm) // md -// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px)) // md // >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) // md @@ -21,8 +21,8 @@ // Minimum breakpoint width. Null for the smallest (first) breakpoint. // -// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px)) -// 544px +// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px)) +// 576px @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { $min: map-get($breakpoints, $name); @return if($min != 0, $min, null); @@ -31,13 +31,24 @@ // Maximum breakpoint width. Null for the largest (last) breakpoint. // The maximum value is calculated as the minimum of the next one less 0.1. // -// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px)) +// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px)) // 767px @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { $next: breakpoint-next($name, $breakpoints); @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); } +// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. +// Useful for making responsive utilities. +// +// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px)) +// "" (Returns a blank string) +// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px)) +// "-sm" +@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { + @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); +} + // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { @@ -64,17 +75,6 @@ } } -// Media between the breakpoint's minimum and maximum widths. -// No minimum for the smallest breakpoint, and no maximum for the largest one. -// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. -@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { - @include media-breakpoint-up($name, $breakpoints) { - @include media-breakpoint-down($name, $breakpoints) { - @content; - } - } -} - // Media that spans multiple breakpoint widths. // Makes the @content apply between the min and max breakpoints @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { @@ -84,3 +84,12 @@ } } } + +// Media between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + @include media-breakpoint-between($name, $name, $breakpoints) { + @content; + } +} |