diff options
Diffstat (limited to 'src/_responsive.scss')
-rw-r--r-- | src/_responsive.scss | 89 |
1 files changed, 46 insertions, 43 deletions
diff --git a/src/_responsive.scss b/src/_responsive.scss index a3d8445..9520dfc 100644 --- a/src/_responsive.scss +++ b/src/_responsive.scss | |||
@@ -17,20 +17,23 @@ | |||
17 | /// @access public | 17 | /// @access public |
18 | //// | 18 | //// |
19 | 19 | ||
20 | @use './functions'; | ||
21 | @use './contexts'; | ||
22 | |||
20 | /// | 23 | /// |
21 | /// If true, named viewports will be supported if a compatible $breakpoints map exists. | 24 | /// If true, named viewports will be supported if a compatible $breakpoints map exists. |
22 | /// This is the case for [include-media](https://include-media.com/), for example. | 25 | /// This is the case for [include-media](https://include-media.com/), for example. |
23 | /// | 26 | /// |
24 | /// @type bool | 27 | /// @type bool |
25 | /// | 28 | /// |
26 | $iro-responsive-support-named-viewports: true !default; | 29 | $support-named-viewports: true !default; |
27 | 30 | ||
28 | /// | 31 | /// |
29 | /// Context ID used for responsive environment-related mixins. | 32 | /// Context ID used for responsive environment-related mixins. |
30 | /// | 33 | /// |
31 | /// @type string | 34 | /// @type string |
32 | /// | 35 | /// |
33 | $iro-responsive-context-id: 'responsive' !default; | 36 | $context-id: 'responsive' !default; |
34 | 37 | ||
35 | /// | 38 | /// |
36 | /// Scale a property uniformly between a specific set of target viewports / values. | 39 | /// Scale a property uniformly between a specific set of target viewports / values. |
@@ -42,7 +45,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
42 | /// | 45 | /// |
43 | /// @example scss - Responsive font-size between 2 viewports | 46 | /// @example scss - Responsive font-size between 2 viewports |
44 | /// .something { | 47 | /// .something { |
45 | /// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px )); | 48 | /// @include property(font-size, ( 320px: 20px, 720px: 30px )); |
46 | /// } | 49 | /// } |
47 | /// | 50 | /// |
48 | /// // Generates: | 51 | /// // Generates: |
@@ -67,7 +70,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
67 | /// | 70 | /// |
68 | /// @example scss - Responsive font-size between 3 viewports | 71 | /// @example scss - Responsive font-size between 3 viewports |
69 | /// .something { | 72 | /// .something { |
70 | /// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px )); | 73 | /// @include property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px )); |
71 | /// } | 74 | /// } |
72 | /// | 75 | /// |
73 | /// // Generates: | 76 | /// // Generates: |
@@ -96,21 +99,21 @@ $iro-responsive-context-id: 'responsive' !default; | |||
96 | /// } | 99 | /// } |
97 | /// } | 100 | /// } |
98 | /// | 101 | /// |
99 | @mixin iro-responsive-property($props, $responsive-map, $fluid: true, $vertical: false) { | 102 | @mixin property($props, $responsive-map, $fluid: true, $vertical: false) { |
100 | @include iro-responsive-env(map-keys($responsive-map), $fluid, $vertical) { | 103 | @include env(map-keys($responsive-map), $fluid, $vertical) { |
101 | @if type-of($props) == list { | 104 | @if type-of($props) == list { |
102 | @each $prop in $props { | 105 | @each $prop in $props { |
103 | #{$prop}: iro-responsive-set(map-values($responsive-map)); | 106 | #{$prop}: set(map-values($responsive-map)); |
104 | } | 107 | } |
105 | } @else { | 108 | } @else { |
106 | #{$props}: iro-responsive-set(map-values($responsive-map)); | 109 | #{$props}: set(map-values($responsive-map)); |
107 | } | 110 | } |
108 | } | 111 | } |
109 | } | 112 | } |
110 | 113 | ||
111 | /// | 114 | /// |
112 | /// Create a new responsive environment by specifying a set of viewports. | 115 | /// Create a new responsive environment by specifying a set of viewports. |
113 | /// Inside a responsive environment, use the iro-responsive-set function to make a property scale automatically. | 116 | /// Inside a responsive environment, use the set function to make a property scale automatically. |
114 | /// | 117 | /// |
115 | /// @param {list} $viewports - Viewports sorted in ascending order | 118 | /// @param {list} $viewports - Viewports sorted in ascending order |
116 | /// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next | 119 | /// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next |
@@ -118,12 +121,12 @@ $iro-responsive-context-id: 'responsive' !default; | |||
118 | /// | 121 | /// |
119 | /// @content | 122 | /// @content |
120 | /// | 123 | /// |
121 | /// @see {function} iro-responsive-set | 124 | /// @see {function} set |
122 | /// | 125 | /// |
123 | /// @example scss - Responsive font-size between 2 viewports | 126 | /// @example scss - Responsive font-size between 2 viewports |
124 | /// .something { | 127 | /// .something { |
125 | /// @include iro-responsive-env((320px, 720px)) { | 128 | /// @include env((320px, 720px)) { |
126 | /// font-size: iro-responsive-set(20px, 30px); | 129 | /// font-size: set(20px, 30px); |
127 | /// } | 130 | /// } |
128 | /// } | 131 | /// } |
129 | /// | 132 | /// |
@@ -147,7 +150,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
147 | /// } | 150 | /// } |
148 | /// } | 151 | /// } |
149 | /// | 152 | /// |
150 | @mixin iro-responsive-env($viewports, $fluid: true, $vertical: false) { | 153 | @mixin env($viewports, $fluid: true, $vertical: false) { |
151 | @if length($viewports) <= 1 { | 154 | @if length($viewports) <= 1 { |
152 | @error '$viewports must contain at least two viewports.'; | 155 | @error '$viewports must contain at least two viewports.'; |
153 | } | 156 | } |
@@ -155,7 +158,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
155 | $new-viewports: (); | 158 | $new-viewports: (); |
156 | 159 | ||
157 | @each $viewport in $viewports { | 160 | @each $viewport in $viewports { |
158 | @if $iro-responsive-support-named-viewports and global-variable-exists(breakpoints) { | 161 | @if $support-named-viewports and global-variable-exists(breakpoints) { |
159 | @if map-has-key($breakpoints, $viewport) { | 162 | @if map-has-key($breakpoints, $viewport) { |
160 | $viewport: map-get($breakpoints, $viewport); | 163 | $viewport: map-get($breakpoints, $viewport); |
161 | } | 164 | } |
@@ -168,7 +171,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
168 | $new-viewports: append($new-viewports, $viewport); | 171 | $new-viewports: append($new-viewports, $viewport); |
169 | } | 172 | } |
170 | 173 | ||
171 | $viewports: iro-quicksort($new-viewports); | 174 | $viewports: functions.quicksort($new-viewports); |
172 | 175 | ||
173 | @if $new-viewports != $viewports { | 176 | @if $new-viewports != $viewports { |
174 | @error '$viewports was not sorted in ascending order.'; | 177 | @error '$viewports was not sorted in ascending order.'; |
@@ -178,7 +181,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
178 | $first-vp: nth($viewports, 1); | 181 | $first-vp: nth($viewports, 1); |
179 | $last-vp: nth($viewports, length($viewports)); | 182 | $last-vp: nth($viewports, length($viewports)); |
180 | 183 | ||
181 | @include iro-context-push($iro-responsive-context-id, 'env', ( | 184 | @include contexts.push($context-id, 'env', ( |
182 | 'viewports': $viewports, | 185 | 'viewports': $viewports, |
183 | 'mode': set, | 186 | 'mode': set, |
184 | 'index': 1, | 187 | 'index': 1, |
@@ -188,7 +191,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
188 | 191 | ||
189 | @content; | 192 | @content; |
190 | 193 | ||
191 | @include iro-context-pop($iro-responsive-context-id); | 194 | @include contexts.pop($context-id); |
192 | 195 | ||
193 | @for $i from 1 to length($viewports) { | 196 | @for $i from 1 to length($viewports) { |
194 | $prev-vp: nth($viewports, $i); | 197 | $prev-vp: nth($viewports, $i); |
@@ -196,7 +199,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
196 | 199 | ||
197 | @if not $vertical { | 200 | @if not $vertical { |
198 | @media (min-width: $prev-vp) and (max-width: $next-vp) { | 201 | @media (min-width: $prev-vp) and (max-width: $next-vp) { |
199 | @include iro-context-push($iro-responsive-context-id, 'env', ( | 202 | @include contexts.push($context-id, 'env', ( |
200 | 'viewports': $viewports, | 203 | 'viewports': $viewports, |
201 | 'mode': transition, | 204 | 'mode': transition, |
202 | 'index': $i, | 205 | 'index': $i, |
@@ -206,11 +209,11 @@ $iro-responsive-context-id: 'responsive' !default; | |||
206 | 209 | ||
207 | @content; | 210 | @content; |
208 | 211 | ||
209 | @include iro-context-pop($iro-responsive-context-id); | 212 | @include contexts.pop($context-id); |
210 | } | 213 | } |
211 | } @else { | 214 | } @else { |
212 | @media (min-height: $prev-vp) and (max-height: $next-vp) { | 215 | @media (min-height: $prev-vp) and (max-height: $next-vp) { |
213 | @include iro-context-push($iro-responsive-context-id, 'env', ( | 216 | @include contexts.push($context-id, 'env', ( |
214 | 'viewports': $viewports, | 217 | 'viewports': $viewports, |
215 | 'mode': transition, | 218 | 'mode': transition, |
216 | 'index': $i, | 219 | 'index': $i, |
@@ -220,14 +223,14 @@ $iro-responsive-context-id: 'responsive' !default; | |||
220 | 223 | ||
221 | @content; | 224 | @content; |
222 | 225 | ||
223 | @include iro-context-pop($iro-responsive-context-id); | 226 | @include contexts.pop($context-id); |
224 | } | 227 | } |
225 | } | 228 | } |
226 | } | 229 | } |
227 | 230 | ||
228 | @if not $vertical { | 231 | @if not $vertical { |
229 | @media (min-width: $last-vp) { | 232 | @media (min-width: $last-vp) { |
230 | @include iro-context-push($iro-responsive-context-id, 'env', ( | 233 | @include contexts.push($context-id, 'env', ( |
231 | 'viewports': $viewports, | 234 | 'viewports': $viewports, |
232 | 'mode': set, | 235 | 'mode': set, |
233 | 'index': length($viewports), | 236 | 'index': length($viewports), |
@@ -237,11 +240,11 @@ $iro-responsive-context-id: 'responsive' !default; | |||
237 | 240 | ||
238 | @content; | 241 | @content; |
239 | 242 | ||
240 | @include iro-context-pop($iro-responsive-context-id); | 243 | @include contexts.pop($context-id); |
241 | } | 244 | } |
242 | } @else { | 245 | } @else { |
243 | @media (min-height: $last-vp) { | 246 | @media (min-height: $last-vp) { |
244 | @include iro-context-push($iro-responsive-context-id, 'env', ( | 247 | @include contexts.push($context-id, 'env', ( |
245 | 'viewports': $viewports, | 248 | 'viewports': $viewports, |
246 | 'mode': set, | 249 | 'mode': set, |
247 | 'index': length($viewports), | 250 | 'index': length($viewports), |
@@ -251,11 +254,11 @@ $iro-responsive-context-id: 'responsive' !default; | |||
251 | 254 | ||
252 | @content; | 255 | @content; |
253 | 256 | ||
254 | @include iro-context-pop($iro-responsive-context-id); | 257 | @include contexts.pop($context-id); |
255 | } | 258 | } |
256 | } | 259 | } |
257 | } @else { | 260 | } @else { |
258 | @include iro-context-push($iro-responsive-context-id, 'env', ( | 261 | @include contexts.push($context-id, 'env', ( |
259 | 'viewports': $viewports, | 262 | 'viewports': $viewports, |
260 | 'mode': set, | 263 | 'mode': set, |
261 | 'index': 1, | 264 | 'index': 1, |
@@ -265,14 +268,14 @@ $iro-responsive-context-id: 'responsive' !default; | |||
265 | 268 | ||
266 | @content; | 269 | @content; |
267 | 270 | ||
268 | @include iro-context-pop($iro-responsive-context-id); | 271 | @include contexts.pop($context-id); |
269 | 272 | ||
270 | @for $i from 2 through length($viewports) { | 273 | @for $i from 2 through length($viewports) { |
271 | $vp: nth($viewports, $i); | 274 | $vp: nth($viewports, $i); |
272 | 275 | ||
273 | @if not $vertical { | 276 | @if not $vertical { |
274 | @media (min-width: $vp) { | 277 | @media (min-width: $vp) { |
275 | @include iro-context-push($iro-responsive-context-id, 'env', ( | 278 | @include contexts.push($context-id, 'env', ( |
276 | 'viewports': $viewports, | 279 | 'viewports': $viewports, |
277 | 'mode': set, | 280 | 'mode': set, |
278 | 'index': $i | 281 | 'index': $i |
@@ -280,11 +283,11 @@ $iro-responsive-context-id: 'responsive' !default; | |||
280 | 283 | ||
281 | @content; | 284 | @content; |
282 | 285 | ||
283 | @include iro-context-pop($iro-responsive-context-id); | 286 | @include contexts.pop($context-id); |
284 | } | 287 | } |
285 | } @else { | 288 | } @else { |
286 | @media (min-height: $vp) { | 289 | @media (min-height: $vp) { |
287 | @include iro-context-push($iro-responsive-context-id, 'env', ( | 290 | @include contexts.push($context-id, 'env', ( |
288 | 'viewports': $viewports, | 291 | 'viewports': $viewports, |
289 | 'mode': set, | 292 | 'mode': set, |
290 | 'index': $i | 293 | 'index': $i |
@@ -292,7 +295,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
292 | 295 | ||
293 | @content; | 296 | @content; |
294 | 297 | ||
295 | @include iro-context-pop($iro-responsive-context-id); | 298 | @include contexts.pop($context-id); |
296 | } | 299 | } |
297 | } | 300 | } |
298 | } | 301 | } |
@@ -306,10 +309,10 @@ $iro-responsive-context-id: 'responsive' !default; | |||
306 | /// | 309 | /// |
307 | /// @return {number|string} | 310 | /// @return {number|string} |
308 | /// | 311 | /// |
309 | @function iro-responsive-set($values, $without-calc: false) { | 312 | @function set($values, $without-calc: false) { |
310 | $noop: iro-context-assert-stack-must-contain($iro-responsive-context-id, 'env'); | 313 | $noop: contexts.assert-stack-must-contain($context-id, 'env'); |
311 | 314 | ||
312 | $data: nth(iro-context-get($iro-responsive-context-id, 'env'), 2); | 315 | $data: nth(contexts.get($context-id, 'env'), 2); |
313 | $viewports: map-get($data, 'viewports'); | 316 | $viewports: map-get($data, 'viewports'); |
314 | $mode: map-get($data, 'mode'); | 317 | $mode: map-get($data, 'mode'); |
315 | $fluid: map-get($data, 'fluid'); | 318 | $fluid: map-get($data, 'fluid'); |
@@ -328,7 +331,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
328 | $prev-value: nth($values, $index); | 331 | $prev-value: nth($values, $index); |
329 | $next-value: nth($values, $index + 1); | 332 | $next-value: nth($values, $index + 1); |
330 | 333 | ||
331 | @return iro-responsive-fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc); | 334 | @return fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc); |
332 | } | 335 | } |
333 | } | 336 | } |
334 | 337 | ||
@@ -344,7 +347,7 @@ $iro-responsive-context-id: 'responsive' !default; | |||
344 | /// | 347 | /// |
345 | /// @access private | 348 | /// @access private |
346 | /// | 349 | /// |
347 | @function iro-responsive-fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) { | 350 | @function fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) { |
348 | $value-unit: unit($min-value); | 351 | $value-unit: unit($min-value); |
349 | $max-value-unit: unit($max-value); | 352 | $max-value-unit: unit($max-value); |
350 | $viewport-unit: unit($min-viewport); | 353 | $viewport-unit: unit($min-viewport); |
@@ -368,12 +371,12 @@ $iro-responsive-context-id: 'responsive' !default; | |||
368 | } | 371 | } |
369 | 372 | ||
370 | @if ($value-unit == rem) and ($viewport-unit == px) { | 373 | @if ($value-unit == rem) and ($viewport-unit == px) { |
371 | $min-viewport: iro-px-to-rem($min-viewport); | 374 | $min-viewport: functions.px-to-rem($min-viewport); |
372 | $max-viewport: iro-px-to-rem($max-viewport); | 375 | $max-viewport: functions.px-to-rem($max-viewport); |
373 | $viewport-unit: rem; | 376 | $viewport-unit: rem; |
374 | } @else if ($value-unit == px) and ($viewport-unit == rem) { | 377 | } @else if ($value-unit == px) and ($viewport-unit == rem) { |
375 | $min-value: iro-px-to-rem($min-value); | 378 | $min-value: functions.px-to-rem($min-value); |
376 | $max-value: iro-px-to-rem($max-value); | 379 | $max-value: functions.px-to-rem($max-value); |
377 | $value-unit: rem; | 380 | $value-unit: rem; |
378 | } | 381 | } |
379 | 382 | ||
@@ -381,8 +384,8 @@ $iro-responsive-context-id: 'responsive' !default; | |||
381 | @error 'This combination of units is not supported.'; | 384 | @error 'This combination of units is not supported.'; |
382 | } | 385 | } |
383 | 386 | ||
384 | $value-diff: iro-strip-unit($max-value - $min-value); | 387 | $value-diff: functions.strip-unit($max-value - $min-value); |
385 | $viewport-diff: iro-strip-unit($max-viewport - $min-viewport); | 388 | $viewport-diff: functions.strip-unit($max-viewport - $min-viewport); |
386 | 389 | ||
387 | $calc: ''; | 390 | $calc: ''; |
388 | 391 | ||
@@ -403,4 +406,4 @@ $iro-responsive-context-id: 'responsive' !default; | |||
403 | } | 406 | } |
404 | } | 407 | } |
405 | 408 | ||
406 | @include iro-context-stack-create($iro-responsive-context-id); | 409 | @include contexts.create($context-id); |