_alert.scss
6 years ago
_background-variant.scss
6 years ago
_badge.scss
6 years ago
_border-radius.scss
6 years ago
_box-shadow.scss
6 years ago
_breakpoints.scss
6 years ago
_buttons.scss
6 years ago
_caret.scss
6 years ago
_clearfix.scss
6 years ago
_deprecate.scss
6 years ago
_float.scss
6 years ago
_forms.scss
6 years ago
_gradients.scss
6 years ago
_grid-framework.scss
6 years ago
_grid.scss
6 years ago
_hover.scss
6 years ago
_image.scss
6 years ago
_list-group.scss
6 years ago
_lists.scss
6 years ago
_nav-divider.scss
6 years ago
_pagination.scss
6 years ago
_reset-text.scss
6 years ago
_resize.scss
6 years ago
_screen-reader.scss
6 years ago
_size.scss
6 years ago
_table-row.scss
6 years ago
_text-emphasis.scss
6 years ago
_text-hide.scss
6 years ago
_text-truncate.scss
6 years ago
_transition.scss
6 years ago
_visibility.scss
6 years ago
_breakpoints.scss
124 lines
| 1 | // Breakpoint viewport sizes and media queries. |
| 2 | // |
| 3 | // Breakpoints are defined as a map of (name: minimum width), order from small to large: |
| 4 | // |
| 5 | // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) |
| 6 | // |
| 7 | // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. |
| 8 | |
| 9 | // Name of the next breakpoint, or null for the last breakpoint. |
| 10 | // |
| 11 | // >> breakpoint-next(sm) |
| 12 | // md |
| 13 | // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) |
| 14 | // md |
| 15 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) |
| 16 | // md |
| 17 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { |
| 18 | $n: index($breakpoint-names, $name); |
| 19 | @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); |
| 20 | } |
| 21 | |
| 22 | // Minimum breakpoint width. Null for the smallest (first) breakpoint. |
| 23 | // |
| 24 | // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) |
| 25 | // 576px |
| 26 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { |
| 27 | $min: map-get($breakpoints, $name); |
| 28 | @return if($min != 0, $min, null); |
| 29 | } |
| 30 | |
| 31 | // Maximum breakpoint width. Null for the largest (last) breakpoint. |
| 32 | // The maximum value is calculated as the minimum of the next one less 0.02px |
| 33 | // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. |
| 34 | // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max |
| 35 | // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. |
| 36 | // See https://bugs.webkit.org/show_bug.cgi?id=178261 |
| 37 | // |
| 38 | // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) |
| 39 | // 767.98px |
| 40 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { |
| 41 | $next: breakpoint-next($name, $breakpoints); |
| 42 | @return if($next, breakpoint-min($next, $breakpoints) - .02, null); |
| 43 | } |
| 44 | |
| 45 | // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front. |
| 46 | // Useful for making responsive utilities. |
| 47 | // |
| 48 | // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) |
| 49 | // "" (Returns a blank string) |
| 50 | // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) |
| 51 | // "-sm" |
| 52 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { |
| 53 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); |
| 54 | } |
| 55 | |
| 56 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. |
| 57 | // Makes the @content apply to the given breakpoint and wider. |
| 58 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { |
| 59 | $min: breakpoint-min($name, $breakpoints); |
| 60 | @if $min { |
| 61 | @media (min-width: $min) { |
| 62 | @content; |
| 63 | } |
| 64 | } @else { |
| 65 | @content; |
| 66 | } |
| 67 | } |
| 68 | |
| 69 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint. |
| 70 | // Makes the @content apply to the given breakpoint and narrower. |
| 71 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { |
| 72 | $max: breakpoint-max($name, $breakpoints); |
| 73 | @if $max { |
| 74 | @media (max-width: $max) { |
| 75 | @content; |
| 76 | } |
| 77 | } @else { |
| 78 | @content; |
| 79 | } |
| 80 | } |
| 81 | |
| 82 | // Media that spans multiple breakpoint widths. |
| 83 | // Makes the @content apply between the min and max breakpoints |
| 84 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { |
| 85 | $min: breakpoint-min($lower, $breakpoints); |
| 86 | $max: breakpoint-max($upper, $breakpoints); |
| 87 | |
| 88 | @if $min != null and $max != null { |
| 89 | @media (min-width: $min) and (max-width: $max) { |
| 90 | @content; |
| 91 | } |
| 92 | } @else if $max == null { |
| 93 | @include media-breakpoint-up($lower, $breakpoints) { |
| 94 | @content; |
| 95 | } |
| 96 | } @else if $min == null { |
| 97 | @include media-breakpoint-down($upper, $breakpoints) { |
| 98 | @content; |
| 99 | } |
| 100 | } |
| 101 | } |
| 102 | |
| 103 | // Media between the breakpoint's minimum and maximum widths. |
| 104 | // No minimum for the smallest breakpoint, and no maximum for the largest one. |
| 105 | // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. |
| 106 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { |
| 107 | $min: breakpoint-min($name, $breakpoints); |
| 108 | $max: breakpoint-max($name, $breakpoints); |
| 109 | |
| 110 | @if $min != null and $max != null { |
| 111 | @media (min-width: $min) and (max-width: $max) { |
| 112 | @content; |
| 113 | } |
| 114 | } @else if $max == null { |
| 115 | @include media-breakpoint-up($name, $breakpoints) { |
| 116 | @content; |
| 117 | } |
| 118 | } @else if $min == null { |
| 119 | @include media-breakpoint-down($name, $breakpoints) { |
| 120 | @content; |
| 121 | } |
| 122 | } |
| 123 | } |
| 124 |