corrade-http-templates – Blame information for rev 61
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
61 | office | 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 < 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) - .02px, 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 | } |