]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
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) | |
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)) | |
14 | // md | |
15 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) | |
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 < 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)) | |
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.1. | |
33 | // | |
34 | // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px)) | |
35 | // 767px | |
36 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { | |
37 | $next: breakpoint-next($name, $breakpoints); | |
38 | @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); | |
39 | } | |
40 | ||
41 | // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. | |
42 | // Useful for making responsive utilities. | |
43 | // | |
44 | // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px)) | |
45 | // "" (Returns a blank string) | |
46 | // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px)) | |
47 | // "-sm" | |
48 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { | |
49 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); | |
50 | } | |
51 | ||
52 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. | |
53 | // Makes the @content apply to the given breakpoint and wider. | |
54 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { | |
55 | $min: breakpoint-min($name, $breakpoints); | |
56 | @if $min { | |
57 | @media (min-width: $min) { | |
58 | @content; | |
59 | } | |
60 | } @else { | |
61 | @content; | |
62 | } | |
63 | } | |
64 | ||
65 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint. | |
66 | // Makes the @content apply to the given breakpoint and narrower. | |
67 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { | |
68 | $max: breakpoint-max($name, $breakpoints); | |
69 | @if $max { | |
70 | @media (max-width: $max) { | |
71 | @content; | |
72 | } | |
73 | } @else { | |
74 | @content; | |
75 | } | |
76 | } | |
77 | ||
78 | // Media that spans multiple breakpoint widths. | |
79 | // Makes the @content apply between the min and max breakpoints | |
80 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { | |
81 | @include media-breakpoint-up($lower, $breakpoints) { | |
82 | @include media-breakpoint-down($upper, $breakpoints) { | |
83 | @content; | |
84 | } | |
85 | } | |
86 | } | |
87 | ||
88 | // Media between the breakpoint's minimum and maximum widths. | |
89 | // No minimum for the smallest breakpoint, and no maximum for the largest one. | |
90 | // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. | |
91 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { | |
92 | @include media-breakpoint-between($name, $name, $breakpoints) { | |
93 | @content; | |
94 | } | |
95 | } |