Migrated from @blog -> @site
[editorial.git] / assets / main / sass / libs / _breakpoints.scss
1 // breakpoints.scss v1.0 | @ajlkn | MIT licensed */
2
3 // Vars.
4
5 /// Breakpoints.
6 /// @var {list}
7 $breakpoints: () !global;
8
9 // Mixins.
10
11 /// Sets breakpoints.
12 /// @param {map} $x Breakpoints.
13 @mixin breakpoints($x: ()) {
14 $breakpoints: $x !global;
15 }
16
17 /// Wraps @content in a @media block targeting a specific orientation.
18 /// @param {string} $orientation Orientation.
19 @mixin orientation($orientation) {
20 @media screen and (orientation: #{$orientation}) {
21 @content;
22 }
23 }
24
25 /// Wraps @content in a @media block using a given query.
26 /// @param {string} $query Query.
27 @mixin breakpoint($query: null) {
28
29 $breakpoint: null;
30 $op: null;
31 $media: null;
32
33 // Determine operator, breakpoint.
34
35 // Greater than or equal.
36 @if (str-slice($query, 0, 2) == '>=') {
37
38 $op: 'gte';
39 $breakpoint: str-slice($query, 3);
40
41 }
42
43 // Less than or equal.
44 @elseif (str-slice($query, 0, 2) == '<=') {
45
46 $op: 'lte';
47 $breakpoint: str-slice($query, 3);
48
49 }
50
51 // Greater than.
52 @elseif (str-slice($query, 0, 1) == '>') {
53
54 $op: 'gt';
55 $breakpoint: str-slice($query, 2);
56
57 }
58
59 // Less than.
60 @elseif (str-slice($query, 0, 1) == '<') {
61
62 $op: 'lt';
63 $breakpoint: str-slice($query, 2);
64
65 }
66
67 // Not.
68 @elseif (str-slice($query, 0, 1) == '!') {
69
70 $op: 'not';
71 $breakpoint: str-slice($query, 2);
72
73 }
74
75 // Equal.
76 @else {
77
78 $op: 'eq';
79 $breakpoint: $query;
80
81 }
82
83 // Build media.
84 @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
85
86 $a: map-get($breakpoints, $breakpoint);
87
88 // Range.
89 @if (type-of($a) == 'list') {
90
91 $x: nth($a, 1);
92 $y: nth($a, 2);
93
94 // Max only.
95 @if ($x == null) {
96
97 // Greater than or equal (>= 0 / anything)
98 @if ($op == 'gte') {
99 $media: 'screen';
100 }
101
102 // Less than or equal (<= y)
103 @elseif ($op == 'lte') {
104 $media: 'screen and (max-width: ' + $y + ')';
105 }
106
107 // Greater than (> y)
108 @elseif ($op == 'gt') {
109 $media: 'screen and (min-width: ' + ($y + 1) + ')';
110 }
111
112 // Less than (< 0 / invalid)
113 @elseif ($op == 'lt') {
114 $media: 'screen and (max-width: -1px)';
115 }
116
117 // Not (> y)
118 @elseif ($op == 'not') {
119 $media: 'screen and (min-width: ' + ($y + 1) + ')';
120 }
121
122 // Equal (<= y)
123 @else {
124 $media: 'screen and (max-width: ' + $y + ')';
125 }
126
127 }
128
129 // Min only.
130 @else if ($y == null) {
131
132 // Greater than or equal (>= x)
133 @if ($op == 'gte') {
134 $media: 'screen and (min-width: ' + $x + ')';
135 }
136
137 // Less than or equal (<= inf / anything)
138 @elseif ($op == 'lte') {
139 $media: 'screen';
140 }
141
142 // Greater than (> inf / invalid)
143 @elseif ($op == 'gt') {
144 $media: 'screen and (max-width: -1px)';
145 }
146
147 // Less than (< x)
148 @elseif ($op == 'lt') {
149 $media: 'screen and (max-width: ' + ($x - 1) + ')';
150 }
151
152 // Not (< x)
153 @elseif ($op == 'not') {
154 $media: 'screen and (max-width: ' + ($x - 1) + ')';
155 }
156
157 // Equal (>= x)
158 @else {
159 $media: 'screen and (min-width: ' + $x + ')';
160 }
161
162 }
163
164 // Min and max.
165 @else {
166
167 // Greater than or equal (>= x)
168 @if ($op == 'gte') {
169 $media: 'screen and (min-width: ' + $x + ')';
170 }
171
172 // Less than or equal (<= y)
173 @elseif ($op == 'lte') {
174 $media: 'screen and (max-width: ' + $y + ')';
175 }
176
177 // Greater than (> y)
178 @elseif ($op == 'gt') {
179 $media: 'screen and (min-width: ' + ($y + 1) + ')';
180 }
181
182 // Less than (< x)
183 @elseif ($op == 'lt') {
184 $media: 'screen and (max-width: ' + ($x - 1) + ')';
185 }
186
187 // Not (< x and > y)
188 @elseif ($op == 'not') {
189 $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')';
190 }
191
192 // Equal (>= x and <= y)
193 @else {
194 $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')';
195 }
196
197 }
198
199 }
200
201 // String.
202 @else {
203
204 // Missing a media type? Prefix with "screen".
205 @if (str-slice($a, 0, 1) == '(') {
206 $media: 'screen and ' + $a;
207 }
208
209 // Otherwise, use as-is.
210 @else {
211 $media: $a;
212 }
213
214 }
215
216 }
217
218 // Output.
219 @media #{$media} {
220 @content;
221 }
222
223 }