unit.gl 0.0.29 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/css/unit.gl.css +288 -271
  2. package/css/unit.gl.min.css +1 -1
  3. package/package.json +1 -1
  4. package/scss/_global.scss +3 -1
  5. package/scss/_reset.scss +2 -1
  6. package/scss/classes/_index.scss +17 -0
  7. package/scss/classes/_paper.scss +97 -0
  8. package/scss/{math/_math_arithmetic.scss → functions/_arithmetic.scss} +1 -1
  9. package/scss/functions/_index.scss +13 -0
  10. package/scss/{math/_math_ratio.scss → functions/_ratio.scss} +1 -1
  11. package/scss/{math/_math_scale.scss → functions/_scale.scss} +1 -1
  12. package/scss/{math/_math_sequence.scss → functions/_sequence.scss} +1 -1
  13. package/scss/index.scss +6 -19
  14. package/scss/mixins/_device.scss +42 -0
  15. package/scss/{display/_display_orientation.scss → mixins/_display.scss} +9 -13
  16. package/scss/{_guide.scss → mixins/_guide.scss} +3 -1
  17. package/scss/{_helper.scss → mixins/_helper.scss} +2 -4
  18. package/scss/mixins/_index.scss +23 -0
  19. package/scss/mixins/_paper.scss +35 -0
  20. package/scss/mixins/_ratio.scss +171 -0
  21. package/scss/mixins/_view.scss +79 -0
  22. package/scss/{display → variables}/_device.scss +5 -31
  23. package/scss/variables/_index.scss +32 -0
  24. package/scss/{_layer.scss → variables/_layer.scss} +1 -2
  25. package/scss/{_paper.scss → variables/_paper.scss} +3 -109
  26. package/scss/{_scale.scss → variables/_scale.scss} +4 -14
  27. package/scss/{_unit.scss → variables/_unit.scss} +3 -1
  28. package/scss/{_unit_conversion.scss → variables/_unit_conversion.scss} +1 -1
  29. package/scss/{_unit_functions.scss → variables/_unit_functions.scss} +14 -0
  30. package/scss/{_view.scss → variables/_view.scss} +2 -61
  31. package/scss/_ratio.scss +0 -97
package/css/unit.gl.css CHANGED
@@ -9,276 +9,6 @@
9
9
  * @repository https://github.com/scape-agency/unit.gl/
10
10
  * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
11
11
  */
12
- *,
13
- a,
14
- abbr,
15
- acronym,
16
- address,
17
- applet,
18
- area,
19
- article,
20
- aside,
21
- audio,
22
- b,
23
- base,
24
- basefont,
25
- bb,
26
- bdo,
27
- big,
28
- blockquote,
29
- body,
30
- br,
31
- button,
32
- canvas,
33
- caption,
34
- center,
35
- cite,
36
- code,
37
- col,
38
- colgroup,
39
- command,
40
- datalist,
41
- dd,
42
- del,
43
- details,
44
- dfn,
45
- dialog,
46
- dir,
47
- div,
48
- dl,
49
- dt,
50
- em,
51
- embed,
52
- eventsource,
53
- fieldset,
54
- figcaption,
55
- figure,
56
- font,
57
- footer,
58
- form,
59
- frame,
60
- frameset,
61
- h1,
62
- h2,
63
- h3,
64
- h4,
65
- h5,
66
- h6,
67
- head,
68
- header,
69
- hgroup,
70
- hr,
71
- html,
72
- i,
73
- iframe,
74
- img,
75
- input,
76
- ins,
77
- isindex,
78
- kbd,
79
- keygen,
80
- label,
81
- legend,
82
- li,
83
- link,
84
- map,
85
- mark,
86
- menu,
87
- meta,
88
- meter,
89
- nav,
90
- noframes,
91
- noscript,
92
- object,
93
- ol,
94
- optgroup,
95
- option,
96
- output,
97
- p,
98
- param,
99
- pre,
100
- progress,
101
- q,
102
- rp,
103
- rt,
104
- ruby,
105
- s,
106
- samp,
107
- script,
108
- section,
109
- select,
110
- small,
111
- source,
112
- span,
113
- strike,
114
- strong,
115
- style,
116
- sub,
117
- sup,
118
- table,
119
- tbody,
120
- td,
121
- textarea,
122
- tfoot,
123
- th,
124
- thead,
125
- time,
126
- title,
127
- tr,
128
- track,
129
- tt,
130
- u,
131
- ul,
132
- var,
133
- video,
134
- wbr {
135
- margin: 0;
136
- -webkit-margin-before: 0;
137
- margin-block-start: 0;
138
- -webkit-margin-after: 0;
139
- margin-block-end: 0;
140
- -webkit-margin-start: 0;
141
- margin-inline-start: 0;
142
- -webkit-margin-end: 0;
143
- margin-inline-end: 0;
144
- padding: 0;
145
- }
146
-
147
- html {
148
- box-sizing: border-box;
149
- -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
150
- word-break: normal;
151
- -moz-tab-size: 4;
152
- -o-tab-size: 4;
153
- tab-size: 4;
154
- height: 100%;
155
- }
156
-
157
- body {
158
- min-height: 100%;
159
- margin: 0;
160
- position: absolute;
161
- height: 100vh;
162
- width: 100vw;
163
- }
164
-
165
- html, body {
166
- height: 100%;
167
- margin: 0;
168
- }
169
-
170
- *,
171
- ::before,
172
- ::after {
173
- background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
174
- box-sizing: inherit;
175
- }
176
-
177
- ::before,
178
- ::after {
179
- text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
180
- vertical-align: inherit;
181
- }
182
-
183
- * {
184
- padding: 0; /* Reset `padding` and `margin` of all elements */
185
- margin: 0;
186
- }
187
-
188
- .paper.ansi_a {
189
- width: 8.5in;
190
- height: 11in;
191
- }
192
-
193
- .paper.q0 {
194
- width: 720mm;
195
- height: 1080mm;
196
- }
197
- .paper.q1 {
198
- width: 540mm;
199
- height: 720mm;
200
- }
201
- .paper.q2 {
202
- width: 360mm;
203
- height: 540mm;
204
- }
205
- .paper.q3 {
206
- width: 270mm;
207
- height: 360mm;
208
- }
209
- .paper.q4 {
210
- width: 180mm;
211
- height: 270mm;
212
- }
213
- .paper.q5 {
214
- width: 135mm;
215
- height: 180mm;
216
- }
217
- .paper.q6 {
218
- width: 90mm;
219
- height: 135mm;
220
- }
221
- .paper.q7 {
222
- width: 62.5mm;
223
- height: 90mm;
224
- }
225
- .paper.q8 {
226
- width: 45mm;
227
- height: 62.5mm;
228
- }
229
- .paper.q9 {
230
- width: 31.25mm;
231
- height: 45mm;
232
- }
233
- .paper.q10 {
234
- width: 22.5mm;
235
- height: 31.25mm;
236
- }
237
- .paper.iso_a0 {
238
- width: 841mm;
239
- height: 1189mm;
240
- }
241
- .paper.iso_a1 {
242
- width: 594mm;
243
- height: 841mm;
244
- }
245
- .paper.iso_a2 {
246
- width: 420mm;
247
- height: 594mm;
248
- }
249
- .paper.iso_a3 {
250
- width: 297mm;
251
- height: 420mm;
252
- }
253
- .paper.iso_a4 {
254
- width: 210mm;
255
- height: 297mm;
256
- }
257
- .paper.iso_a5 {
258
- width: 148mm;
259
- height: 210mm;
260
- }
261
- .paper.iso_a6 {
262
- width: 105mm;
263
- height: 148mm;
264
- }
265
- .paper.iso_a7 {
266
- width: 74mm;
267
- height: 105mm;
268
- }
269
- .paper.iso_a8 {
270
- width: 52mm;
271
- height: 74mm;
272
- }
273
- .paper.iso_a9 {
274
- width: 37mm;
275
- height: 52mm;
276
- }
277
- .paper.iso_a10 {
278
- width: 26mm;
279
- height: 37mm;
280
- }
281
-
282
12
  :root {
283
13
  --q: $q;
284
14
  }
@@ -288,7 +18,7 @@ html {
288
18
  }
289
19
  @media screen and (min-width: 320px) {
290
20
  html {
291
- font-size: calc(12px + 12 * (100vw - 320px) / 1120);
21
+ font-size: calc(12px + unit_strip(12px) * (100vw - 320px) / unit_strip(1120px));
292
22
  }
293
23
  }
294
24
  @media screen and (min-width: 1440px) {
@@ -297,6 +27,39 @@ html {
297
27
  }
298
28
  }
299
29
 
30
+ /**
31
+ * unit.gl
32
+ *
33
+ * @description Layout Engine
34
+ * @author Scape Agency (https://www.scape.agency)
35
+ * @version v1.0.0
36
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
37
+ * @website https://www.unit.gl/
38
+ * @repository https://github.com/scape-agency/unit.gl/
39
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
40
+ */
41
+ /**
42
+ * unit.gl
43
+ *
44
+ * @description Layout Engine
45
+ * @author Scape Agency (https://www.scape.agency)
46
+ * @version v1.0.0
47
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
48
+ * @website https://www.unit.gl/
49
+ * @repository https://github.com/scape-agency/unit.gl/
50
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
51
+ */
52
+ /**
53
+ * unit.gl
54
+ *
55
+ * @description Layout Engine
56
+ * @author Scape Agency (https://www.scape.agency)
57
+ * @version v1.0.0
58
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
59
+ * @website https://www.unit.gl/
60
+ * @repository https://github.com/scape-agency/unit.gl/
61
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
62
+ */
300
63
  .ratio_1x1 {
301
64
  aspect-ratio: 1;
302
65
  width: 100%;
@@ -505,6 +268,39 @@ html {
505
268
  display: inline-block;
506
269
  }
507
270
 
271
+ /**
272
+ * unit.gl
273
+ *
274
+ * @description Layout Engine
275
+ * @author Scape Agency (https://www.scape.agency)
276
+ * @version v1.0.0
277
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
278
+ * @website https://www.unit.gl/
279
+ * @repository https://github.com/scape-agency/unit.gl/
280
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
281
+ */
282
+ /**
283
+ * unit.gl
284
+ *
285
+ * @description Layout Engine
286
+ * @author Scape Agency (https://www.scape.agency)
287
+ * @version v1.0.0
288
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
289
+ * @website https://www.unit.gl/
290
+ * @repository https://github.com/scape-agency/unit.gl/
291
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
292
+ */
293
+ /**
294
+ * unit.gl
295
+ *
296
+ * @description Layout Engine
297
+ * @author Scape Agency (https://www.scape.agency)
298
+ * @version v1.0.0
299
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
300
+ * @website https://www.unit.gl/
301
+ * @repository https://github.com/scape-agency/unit.gl/
302
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
303
+ */
508
304
  .guide {
509
305
  position: absolute;
510
306
  top: 0;
@@ -541,4 +337,225 @@ html {
541
337
  background-size: 100% 1.5rem;
542
338
  background-image: repeating-linear-gradient(to bottom, cyan 0 1px, transparent 1px 100%);
543
339
  }
340
+
341
+ /**
342
+ * unit.gl
343
+ *
344
+ * @description Layout Engine
345
+ * @author Scape Agency (https://www.scape.agency)
346
+ * @version v1.0.0
347
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
348
+ * @website https://www.unit.gl/
349
+ * @repository https://github.com/scape-agency/unit.gl/
350
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
351
+ */
352
+ /**
353
+ * unit.gl
354
+ *
355
+ * @description Layout Engine
356
+ * @author Scape Agency (https://www.scape.agency)
357
+ * @version v1.0.0
358
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
359
+ * @website https://www.unit.gl/
360
+ * @repository https://github.com/scape-agency/unit.gl/
361
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
362
+ */
363
+ *,
364
+ a,
365
+ abbr,
366
+ acronym,
367
+ address,
368
+ applet,
369
+ area,
370
+ article,
371
+ aside,
372
+ audio,
373
+ b,
374
+ base,
375
+ basefont,
376
+ bb,
377
+ bdo,
378
+ big,
379
+ blockquote,
380
+ body,
381
+ br,
382
+ button,
383
+ canvas,
384
+ caption,
385
+ center,
386
+ cite,
387
+ code,
388
+ col,
389
+ colgroup,
390
+ command,
391
+ datalist,
392
+ dd,
393
+ del,
394
+ details,
395
+ dfn,
396
+ dialog,
397
+ dir,
398
+ div,
399
+ dl,
400
+ dt,
401
+ em,
402
+ embed,
403
+ eventsource,
404
+ fieldset,
405
+ figcaption,
406
+ figure,
407
+ font,
408
+ footer,
409
+ form,
410
+ frame,
411
+ frameset,
412
+ h1,
413
+ h2,
414
+ h3,
415
+ h4,
416
+ h5,
417
+ h6,
418
+ head,
419
+ header,
420
+ hgroup,
421
+ hr,
422
+ html,
423
+ i,
424
+ iframe,
425
+ img,
426
+ input,
427
+ ins,
428
+ isindex,
429
+ kbd,
430
+ keygen,
431
+ label,
432
+ legend,
433
+ li,
434
+ link,
435
+ map,
436
+ mark,
437
+ menu,
438
+ meta,
439
+ meter,
440
+ nav,
441
+ noframes,
442
+ noscript,
443
+ object,
444
+ ol,
445
+ optgroup,
446
+ option,
447
+ output,
448
+ p,
449
+ param,
450
+ pre,
451
+ progress,
452
+ q,
453
+ rp,
454
+ rt,
455
+ ruby,
456
+ s,
457
+ samp,
458
+ script,
459
+ section,
460
+ select,
461
+ small,
462
+ source,
463
+ span,
464
+ strike,
465
+ strong,
466
+ style,
467
+ sub,
468
+ sup,
469
+ table,
470
+ tbody,
471
+ td,
472
+ textarea,
473
+ tfoot,
474
+ th,
475
+ thead,
476
+ time,
477
+ title,
478
+ tr,
479
+ track,
480
+ tt,
481
+ u,
482
+ ul,
483
+ var,
484
+ video,
485
+ wbr {
486
+ margin: 0;
487
+ -webkit-margin-before: 0;
488
+ margin-block-start: 0;
489
+ -webkit-margin-after: 0;
490
+ margin-block-end: 0;
491
+ -webkit-margin-start: 0;
492
+ margin-inline-start: 0;
493
+ -webkit-margin-end: 0;
494
+ margin-inline-end: 0;
495
+ padding: 0;
496
+ }
497
+
498
+ /**
499
+ * unit.gl
500
+ *
501
+ * @description Layout Engine
502
+ * @author Scape Agency (https://www.scape.agency)
503
+ * @version v1.0.0
504
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
505
+ * @website https://www.unit.gl/
506
+ * @repository https://github.com/scape-agency/unit.gl/
507
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
508
+ */
509
+ html {
510
+ box-sizing: border-box;
511
+ -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
512
+ word-break: normal;
513
+ -moz-tab-size: 4;
514
+ -o-tab-size: 4;
515
+ tab-size: 4;
516
+ height: 100%;
517
+ }
518
+
519
+ body {
520
+ min-height: 100%;
521
+ margin: 0;
522
+ position: absolute;
523
+ height: 100vh;
524
+ width: 100vw;
525
+ }
526
+
527
+ html, body {
528
+ height: 100%;
529
+ margin: 0;
530
+ }
531
+
532
+ *,
533
+ ::before,
534
+ ::after {
535
+ background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
536
+ box-sizing: inherit;
537
+ }
538
+
539
+ ::before,
540
+ ::after {
541
+ text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
542
+ vertical-align: inherit;
543
+ }
544
+
545
+ * {
546
+ padding: 0; /* Reset `padding` and `margin` of all elements */
547
+ margin: 0;
548
+ }
549
+
550
+ /**
551
+ * unit.gl
552
+ *
553
+ * @description Layout Engine
554
+ * @author Scape Agency (https://www.scape.agency)
555
+ * @version v1.0.0
556
+ * @copyright 2020-2024 Scape Agency (https://www.scape.agency)
557
+ * @website https://www.unit.gl/
558
+ * @repository https://github.com/scape-agency/unit.gl/
559
+ * @license Apache 2.0 License (https://github.com/scape-agency/unit.gl/blob/main/LICENSE)
560
+ */
544
561
  /*# sourceMappingURL=to.css.map */
@@ -1,2 +1,2 @@
1
- *,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}.paper.ansi_a{height:11in;width:8.5in}.paper.q0{height:1080mm;width:720mm}.paper.q1{height:720mm;width:540mm}.paper.q2{height:540mm;width:360mm}.paper.q3{height:360mm;width:270mm}.paper.q4{height:270mm;width:180mm}.paper.q5{height:180mm;width:135mm}.paper.q6{height:135mm;width:90mm}.paper.q7{height:90mm;width:62.5mm}.paper.q8{height:62.5mm;width:45mm}.paper.q9{height:45mm;width:31.25mm}.paper.q10{height:31.25mm;width:22.5mm}.paper.iso_a0{height:1189mm;width:841mm}.paper.iso_a1{height:841mm;width:594mm}.paper.iso_a2{height:594mm;width:420mm}.paper.iso_a3{height:420mm;width:297mm}.paper.iso_a4{height:297mm;width:210mm}.paper.iso_a5{height:210mm;width:148mm}.paper.iso_a6{height:148mm;width:105mm}.paper.iso_a7{height:105mm;width:74mm}.paper.iso_a8{height:74mm;width:52mm}.paper.iso_a9{height:52mm;width:37mm}.paper.iso_a10{height:37mm;width:26mm}:root{--q:$q}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(8.57143px + 1.07143vw)}}@media screen and (min-width:1440px){html{font-size:24px}}.ratio_1x1{aspect-ratio:1}.ratio_1x1,.ratio_1x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x2{aspect-ratio:.5}.ratio_2x1{aspect-ratio:2}.ratio_1x3,.ratio_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x3{aspect-ratio:.3333333333}.ratio_3x1{aspect-ratio:3}.ratio_1x4,.ratio_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x4{aspect-ratio:.25}.ratio_4x1{aspect-ratio:4}.ratio_3x2,.ratio_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_3x2{aspect-ratio:1.5}.ratio_2x3{aspect-ratio:.6666666667}.ratio_2x3,.ratio_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_4x3{aspect-ratio:1.3333333333}.ratio_3x4{aspect-ratio:.75}.ratio_16x9,.ratio_3x4{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_16x9{aspect-ratio:1.7777777778}.ratio_16x10{aspect-ratio:1.6}.ratio_16x10,.ratio_p_1x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_1x1{padding-bottom:100%}.ratio_p_1x2{padding-bottom:200%}.ratio_p_1x2,.ratio_p_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x1{padding-bottom:50%}.ratio_p_1x3{padding-bottom:300%}.ratio_p_1x3,.ratio_p_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x1{padding-bottom:33.33%}.ratio_p_1x4{padding-bottom:400%}.ratio_p_1x4,.ratio_p_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_4x1{padding-bottom:25%}.ratio_p_3x2{padding-bottom:66.67%}.ratio_p_2x3,.ratio_p_3x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x3{padding-bottom:150%}.ratio_p_4x3{padding-bottom:75%}.ratio_p_3x4,.ratio_p_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x4{padding-bottom:133.33%}.ratio_p_16x9{padding-bottom:56.25%}.ratio_p_16x10,.ratio_p_16x9{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_16x10{padding-bottom:62.5%}.guide,.guide_graph{height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph{background-image:repeating-linear-gradient(180deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%);background-size:.25rem .25rem}.guide_baseline{background-image:repeating-linear-gradient(180deg,cyan 0 1px,transparent 1px 100%);background-size:100% 1.5rem;height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}
1
+ :root{--q:$q}html{font-size:12px}@media screen and (min-width:320px){html{font-size:calc(12px + unit_strip(12px)*(100vw - 320px)/unit_strip(1120px))}}@media screen and (min-width:1440px){html{font-size:24px}}.ratio_1x1{aspect-ratio:1}.ratio_1x1,.ratio_1x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x2{aspect-ratio:.5}.ratio_2x1{aspect-ratio:2}.ratio_1x3,.ratio_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x3{aspect-ratio:.3333333333}.ratio_3x1{aspect-ratio:3}.ratio_1x4,.ratio_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_1x4{aspect-ratio:.25}.ratio_4x1{aspect-ratio:4}.ratio_3x2,.ratio_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_3x2{aspect-ratio:1.5}.ratio_2x3{aspect-ratio:.6666666667}.ratio_2x3,.ratio_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_4x3{aspect-ratio:1.3333333333}.ratio_3x4{aspect-ratio:.75}.ratio_16x9,.ratio_3x4{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_16x9{aspect-ratio:1.7777777778}.ratio_16x10{aspect-ratio:1.6}.ratio_16x10,.ratio_p_1x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_1x1{padding-bottom:100%}.ratio_p_1x2{padding-bottom:200%}.ratio_p_1x2,.ratio_p_2x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x1{padding-bottom:50%}.ratio_p_1x3{padding-bottom:300%}.ratio_p_1x3,.ratio_p_3x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x1{padding-bottom:33.33%}.ratio_p_1x4{padding-bottom:400%}.ratio_p_1x4,.ratio_p_4x1{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_4x1{padding-bottom:25%}.ratio_p_3x2{padding-bottom:66.67%}.ratio_p_2x3,.ratio_p_3x2{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_2x3{padding-bottom:150%}.ratio_p_4x3{padding-bottom:75%}.ratio_p_3x4,.ratio_p_4x3{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_3x4{padding-bottom:133.33%}.ratio_p_16x9{padding-bottom:56.25%}.ratio_p_16x10,.ratio_p_16x9{display:inline-block;overflow:hidden;position:relative;width:100%}.ratio_p_16x10{padding-bottom:62.5%}.guide,.guide_graph{height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}.guide_graph{background-image:repeating-linear-gradient(180deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,rgba(50,50,50,.25) 0 1px,transparent 1px 100%);background-size:.25rem .25rem}.guide_baseline{background-image:repeating-linear-gradient(180deg,cyan 0 1px,transparent 1px 100%);background-size:100% 1.5rem;height:100%;left:0;margin:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:9999}*,a,abbr,acronym,address,applet,area,article,aside,audio,b,base,basefont,bb,bdo,big,blockquote,body,br,button,canvas,caption,center,cite,code,col,colgroup,command,datalist,dd,del,details,dfn,dialog,dir,div,dl,dt,em,embed,eventsource,fieldset,figcaption,figure,font,footer,form,frame,frameset,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,i,iframe,img,input,ins,isindex,kbd,keygen,label,legend,li,link,map,mark,menu,meta,meter,nav,noframes,noscript,object,ol,optgroup,option,output,p,param,pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strike,strong,style,sub,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,tt,u,ul,var,video,wbr{margin:0;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;padding:0}html{box-sizing:border-box;-webkit-text-size-adjust:100%;height:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}body{height:100vh;margin:0;min-height:100%;position:absolute;width:100vw}body,html{height:100%;margin:0}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{margin:0;padding:0}
2
2
  /*# sourceMappingURL=to.css.map */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unit.gl",
3
- "version": "0.0.29",
3
+ "version": "0.0.32",
4
4
  "description": "Layout Engine.",
5
5
  "keywords": [
6
6
  "unit.gl",
package/scss/_global.scss CHANGED
@@ -1,4 +1,4 @@
1
- // Copyright 2023 Scape Agency BV
1
+ // Copyright 2024 Scape Agency BV
2
2
 
3
3
  // Licensed under the Apache License, Version 2.0 (the "License");
4
4
  // you may not use this file except in compliance with the License.
@@ -13,6 +13,8 @@
13
13
  // limitations under the License.
14
14
 
15
15
 
16
+ @use "variables" as *;
17
+
16
18
  // Base | Body
17
19
  // ============================================================================
18
20
 
package/scss/_reset.scss CHANGED
@@ -1,4 +1,4 @@
1
- // Copyright 2023 Scape Agency BV
1
+ // Copyright 2024 Scape Agency BV
2
2
 
3
3
  // Licensed under the Apache License, Version 2.0 (the "License");
4
4
  // you may not use this file except in compliance with the License.
@@ -12,6 +12,7 @@
12
12
  // See the License for the specific language governing permissions and
13
13
  // limitations under the License.
14
14
 
15
+ @use "variables" as *;
15
16
 
16
17
  // ============================================================================
17
18
  // Base | Reset
@@ -0,0 +1,17 @@
1
+ // Copyright 2024 Scape Agency BV
2
+
3
+ // Licensed under the Apache License, Version 2.0 (the "License");
4
+ // you may not use this file except in compliance with the License.
5
+ // You may obtain a copy of the License at
6
+
7
+ // http://www.apache.org/licenses/LICENSE-2.0
8
+
9
+ // Unless required by applicable law or agreed to in writing, software
10
+ // distributed under the License is distributed on an "AS IS" BASIS,
11
+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
+ // See the License for the specific language governing permissions and
13
+ // limitations under the License.
14
+
15
+
16
+
17
+ @forward "paper";