@andreyshpigunov/x 0.5.21 → 0.5.23
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.
- package/assets/css/app.css +1 -1
- package/dist/x.css +1 -1
- package/index.html +1 -1
- package/package.json +1 -1
- package/src/components/x/{helpers.css → lib.css} +133 -138
- package/src/components/x/space.css +6 -6
- package/src/components/x/variables.css +18 -24
- package/src/css/x.css +1 -1
package/index.html
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"functionName": "headerAnimation"
|
|
20
20
|
}'>
|
|
21
21
|
<header class="header flex aic sticky t0 px5 m:px6 l:px8 unselectable">
|
|
22
|
-
<div class="header-version nowrap">0.5.
|
|
22
|
+
<div class="header-version nowrap">0.5.23</div>
|
|
23
23
|
<div class="header-logo mxa">
|
|
24
24
|
<a role="button" x-scrollto="#top">
|
|
25
25
|
<img src="assets/img/logo.png" alt="x" />
|
package/package.json
CHANGED
|
@@ -27,29 +27,30 @@ All right reserved.
|
|
|
27
27
|
.fix
|
|
28
28
|
.rel
|
|
29
29
|
.abs
|
|
30
|
-
.
|
|
30
|
+
.inset
|
|
31
|
+
.fill
|
|
31
32
|
.fit-none (s,m,l,xl)
|
|
32
33
|
.fit-cover (s,m,l,xl)
|
|
33
34
|
.fit-contain (s,m,l,xl)
|
|
34
|
-
.t[0-
|
|
35
|
-
.b[0-
|
|
36
|
-
.l[0-
|
|
37
|
-
.r[0-
|
|
38
|
-
.z[0-
|
|
35
|
+
.t[0-9][n] (s,m,l,xl)
|
|
36
|
+
.b[0-9][n] (s,m,l,xl)
|
|
37
|
+
.l[0-9][n] (s,m,l,xl)
|
|
38
|
+
.r[0-9][n] (s,m,l,xl)
|
|
39
|
+
.z[0-9] (s,m,l,xl)
|
|
39
40
|
.op[0-10]
|
|
40
|
-
.ratio1x1
|
|
41
|
-
.ratio2x1
|
|
42
|
-
.ratio3x1
|
|
43
|
-
.ratio4x1
|
|
44
|
-
.ratio3x2
|
|
45
|
-
.ratio4x3
|
|
46
|
-
.ratio16x9
|
|
47
|
-
.ratio1x2
|
|
48
|
-
.ratio1x3
|
|
49
|
-
.ratio1x4
|
|
50
|
-
.ratio2x3
|
|
51
|
-
.ratio3x4
|
|
52
|
-
.ratio9x16
|
|
41
|
+
.ratio1x1 (s,m,l,xl)
|
|
42
|
+
.ratio2x1 (s,m,l,xl)
|
|
43
|
+
.ratio3x1 (s,m,l,xl)
|
|
44
|
+
.ratio4x1 (s,m,l,xl)
|
|
45
|
+
.ratio3x2 (s,m,l,xl)
|
|
46
|
+
.ratio4x3 (s,m,l,xl)
|
|
47
|
+
.ratio16x9 (s,m,l,xl)
|
|
48
|
+
.ratio1x2 (s,m,l,xl)
|
|
49
|
+
.ratio1x3 (s,m,l,xl)
|
|
50
|
+
.ratio1x4 (s,m,l,xl)
|
|
51
|
+
.ratio2x3 (s,m,l,xl)
|
|
52
|
+
.ratio3x4 (s,m,l,xl)
|
|
53
|
+
.ratio9x16 (s,m,l,xl)
|
|
53
54
|
.breakWord
|
|
54
55
|
.visuallyHidden
|
|
55
56
|
.invisible
|
|
@@ -63,27 +64,27 @@ All right reserved.
|
|
|
63
64
|
.flex (s,m,l,xl)
|
|
64
65
|
.grid (s,m,l,xl)
|
|
65
66
|
.fullscreen
|
|
66
|
-
.max
|
|
67
|
-
.w[10-190] step 10
|
|
68
|
-
.w[200-380] step 20
|
|
69
|
-
.w[400-1600] step 100
|
|
70
|
-
.max[10-190] step 10
|
|
71
|
-
.max[200-380] step 20
|
|
72
|
-
.max[400-1600] step 100
|
|
73
|
-
.min[10-190] step 10
|
|
74
|
-
.min[200-380] step 20
|
|
75
|
-
.min[400-1600] step 100
|
|
76
|
-
.al
|
|
77
|
-
.ar
|
|
78
|
-
.ac
|
|
79
|
-
.aj
|
|
80
|
-
.m[0-12][n]
|
|
81
|
-
.mx[0-12][n]
|
|
82
|
-
.my[0-12][n]
|
|
83
|
-
.mt[0-12][n]
|
|
84
|
-
.mb[0-12][n]
|
|
85
|
-
.ml[0-12][n]
|
|
86
|
-
.mr[0-12][n]
|
|
67
|
+
.max (s,m,l,xl)
|
|
68
|
+
.w[10-190] step 10 (s,m,l,xl)
|
|
69
|
+
.w[200-380] step 20 (s,m,l,xl)
|
|
70
|
+
.w[400-1600] step 100 (s,m,l,xl)
|
|
71
|
+
.max[10-190] step 10 (s,m,l,xl)
|
|
72
|
+
.max[200-380] step 20 (s,m,l,xl)
|
|
73
|
+
.max[400-1600] step 100 (s,m,l,xl)
|
|
74
|
+
.min[10-190] step 10 (s,m,l,xl)
|
|
75
|
+
.min[200-380] step 20 (s,m,l,xl)
|
|
76
|
+
.min[400-1600] step 100 (s,m,l,xl)
|
|
77
|
+
.al (s,m,l,xl)
|
|
78
|
+
.ar (s,m,l,xl)
|
|
79
|
+
.ac (s,m,l,xl)
|
|
80
|
+
.aj (s,m,l,xl)
|
|
81
|
+
.m[0-12][n] (s,m,l,xl)
|
|
82
|
+
.mx[0-12][n] (s,m,l,xl)
|
|
83
|
+
.my[0-12][n] (s,m,l,xl)
|
|
84
|
+
.mt[0-12][n] (s,m,l,xl)
|
|
85
|
+
.mb[0-12][n] (s,m,l,xl)
|
|
86
|
+
.ml[0-12][n] (s,m,l,xl)
|
|
87
|
+
.mr[0-12][n] (s,m,l,xl)
|
|
87
88
|
.ma (s,m,l,xl)
|
|
88
89
|
.mxa (s,m,l,xl)
|
|
89
90
|
.mya (s,m,l,xl)
|
|
@@ -91,20 +92,20 @@ All right reserved.
|
|
|
91
92
|
.mba (s,m,l,xl)
|
|
92
93
|
.mla (s,m,l,xl)
|
|
93
94
|
.mra (s,m,l,xl)
|
|
94
|
-
.p[0-12]
|
|
95
|
-
.px[0-12]
|
|
96
|
-
.py[0-12]
|
|
97
|
-
.pt[0-12]
|
|
98
|
-
.pb[0-12]
|
|
99
|
-
.pl[0-12]
|
|
100
|
-
.pr[0-12]
|
|
95
|
+
.p[0-12] (s,m,l,xl)
|
|
96
|
+
.px[0-12] (s,m,l,xl)
|
|
97
|
+
.py[0-12] (s,m,l,xl)
|
|
98
|
+
.pt[0-12] (s,m,l,xl)
|
|
99
|
+
.pb[0-12] (s,m,l,xl)
|
|
100
|
+
.pl[0-12] (s,m,l,xl)
|
|
101
|
+
.pr[0-12] (s,m,l,xl)
|
|
101
102
|
.gap[0-12] (s,m,l,xl)
|
|
102
103
|
.gapx[0-12] (s,m,l,xl)
|
|
103
104
|
.gapy[0-12] (s,m,l,xl)
|
|
104
|
-
.br[0-12]
|
|
105
|
-
.br100
|
|
106
|
-
.sh[0-
|
|
107
|
-
.o[0-
|
|
105
|
+
.br[0-12] (s,m,l,xl)
|
|
106
|
+
.br100 (s,m,l,xl)
|
|
107
|
+
.sh[0-5] (s,m,l,xl)
|
|
108
|
+
.o[0-9] (s,m,l,xl)
|
|
108
109
|
.mono
|
|
109
110
|
.italic
|
|
110
111
|
.strike
|
|
@@ -248,7 +249,7 @@ html.touch .touch-hide { display: none }
|
|
|
248
249
|
|
|
249
250
|
|
|
250
251
|
/* !- Top, bottom, left, right, z-index */
|
|
251
|
-
@for $i from 0 to
|
|
252
|
+
@for $i from 0 to 9 {
|
|
252
253
|
.t$(i) { top: var(--space-$(i)) }
|
|
253
254
|
.b$(i) { bottom: var(--space-$(i)) }
|
|
254
255
|
.l$(i) { left: var(--space-$(i)) }
|
|
@@ -260,7 +261,7 @@ html.touch .touch-hide { display: none }
|
|
|
260
261
|
.z$(i) { z-index: $(i) }
|
|
261
262
|
}
|
|
262
263
|
@media (min-width: 640px) {
|
|
263
|
-
@for $i from 0 to
|
|
264
|
+
@for $i from 0 to 9 {
|
|
264
265
|
.s\:t$(i) { top: var(--space-$(i)) }
|
|
265
266
|
.s\:b$(i) { bottom: var(--space-$(i)) }
|
|
266
267
|
.s\:l$(i) { left: var(--space-$(i)) }
|
|
@@ -273,7 +274,7 @@ html.touch .touch-hide { display: none }
|
|
|
273
274
|
}
|
|
274
275
|
}
|
|
275
276
|
@media (min-width: 768px) {
|
|
276
|
-
@for $i from 0 to
|
|
277
|
+
@for $i from 0 to 9 {
|
|
277
278
|
.m\:t$(i) { top: var(--space-$(i)) }
|
|
278
279
|
.m\:b$(i) { bottom: var(--space-$(i)) }
|
|
279
280
|
.m\:l$(i) { left: var(--space-$(i)) }
|
|
@@ -286,7 +287,7 @@ html.touch .touch-hide { display: none }
|
|
|
286
287
|
}
|
|
287
288
|
}
|
|
288
289
|
@media (min-width: 1024px) {
|
|
289
|
-
@for $i from 0 to
|
|
290
|
+
@for $i from 0 to 9 {
|
|
290
291
|
.l\:t$(i) { top: var(--space-$(i)) }
|
|
291
292
|
.l\:b$(i) { bottom: var(--space-$(i)) }
|
|
292
293
|
.l\:l$(i) { left: var(--space-$(i)) }
|
|
@@ -299,7 +300,7 @@ html.touch .touch-hide { display: none }
|
|
|
299
300
|
}
|
|
300
301
|
}
|
|
301
302
|
@media (min-width: 1280px) {
|
|
302
|
-
@for $i from 0 to
|
|
303
|
+
@for $i from 0 to 9 {
|
|
303
304
|
.xl\:t$(i) { top: var(--space-$(i)) }
|
|
304
305
|
.xl\:b$(i) { bottom: var(--space-$(i)) }
|
|
305
306
|
.xl\:l$(i) { left: var(--space-$(i)) }
|
|
@@ -550,112 +551,131 @@ html.touch .touch-hide { display: none }
|
|
|
550
551
|
.wscreen { width: 100vw; }
|
|
551
552
|
.hscreen { height: 100vh; }
|
|
552
553
|
.max { max-width: 100%; }
|
|
553
|
-
.hmax { max-height: 100%; }
|
|
554
554
|
|
|
555
555
|
@for $i from 10 to 190 by 10 {
|
|
556
556
|
.w$(i) { width: $(i)px }
|
|
557
|
-
.max$(i) {
|
|
557
|
+
.max$(i) { max-width: $(i)px }
|
|
558
558
|
.min$(i) { min-width: $(i)px }
|
|
559
559
|
}
|
|
560
560
|
@for $i from 200 to 380 by 20 {
|
|
561
561
|
.w$(i) { width: $(i)px }
|
|
562
|
-
.max$(i) {
|
|
562
|
+
.max$(i) { max-width: $(i)px }
|
|
563
563
|
.min$(i) { min-width: $(i)px }
|
|
564
564
|
}
|
|
565
565
|
@for $i from 400 to 1600 by 100 {
|
|
566
566
|
.w$(i) { width: $(i)px }
|
|
567
|
-
.max$(i) {
|
|
567
|
+
.max$(i) { max-width: $(i)px }
|
|
568
568
|
.min$(i) { min-width: $(i)px }
|
|
569
569
|
}
|
|
570
570
|
|
|
571
571
|
@media (min-width: 640px) {
|
|
572
|
-
.s\:
|
|
573
|
-
width:
|
|
574
|
-
|
|
575
|
-
}
|
|
572
|
+
.s\:fullscreen {
|
|
573
|
+
width: 100vw;
|
|
574
|
+
height: 100vh;
|
|
575
|
+
}
|
|
576
|
+
.s\:wmax { width: 100%; }
|
|
577
|
+
.s\:hmax { width: 100%; }
|
|
578
|
+
.s\:wscreen { width: 100vw; }
|
|
579
|
+
.s\:hscreen { height: 100vh; }
|
|
580
|
+
.s\:max { max-width: 100%; }
|
|
576
581
|
|
|
577
582
|
@for $i from 10 to 190 by 10 {
|
|
578
583
|
.s\:w$(i) { width: $(i)px }
|
|
579
|
-
.s\:max$(i) {
|
|
584
|
+
.s\:max$(i) { max-width: $(i)px }
|
|
580
585
|
.s\:min$(i) { min-width: $(i)px }
|
|
581
586
|
}
|
|
582
587
|
@for $i from 200 to 380 by 20 {
|
|
583
588
|
.s\:w$(i) { width: $(i)px }
|
|
584
|
-
.s\:max$(i) {
|
|
589
|
+
.s\:max$(i) { max-width: $(i)px }
|
|
585
590
|
.s\:min$(i) { min-width: $(i)px }
|
|
586
591
|
}
|
|
587
592
|
@for $i from 400 to 1600 by 100 {
|
|
588
593
|
.s\:w$(i) { width: $(i)px }
|
|
589
|
-
.s\:max$(i) {
|
|
594
|
+
.s\:max$(i) { max-width: $(i)px }
|
|
590
595
|
.s\:min$(i) { min-width: $(i)px }
|
|
591
596
|
}
|
|
592
597
|
}
|
|
593
598
|
|
|
594
599
|
@media (min-width: 768px) {
|
|
595
|
-
.m\:
|
|
596
|
-
width:
|
|
597
|
-
|
|
598
|
-
}
|
|
600
|
+
.m\:fullscreen {
|
|
601
|
+
width: 100vw;
|
|
602
|
+
height: 100vh;
|
|
603
|
+
}
|
|
604
|
+
.m\:wmax { width: 100%; }
|
|
605
|
+
.m\:hmax { width: 100%; }
|
|
606
|
+
.m\:wscreen { width: 100vw; }
|
|
607
|
+
.m\:hscreen { height: 100vh; }
|
|
608
|
+
.m\:max { max-width: 100%; }
|
|
599
609
|
|
|
600
610
|
@for $i from 10 to 190 by 10 {
|
|
601
611
|
.m\:w$(i) { width: $(i)px }
|
|
602
|
-
.m\:max$(i) {
|
|
612
|
+
.m\:max$(i) { max-width: $(i)px }
|
|
603
613
|
.m\:min$(i) { min-width: $(i)px }
|
|
604
614
|
}
|
|
605
615
|
@for $i from 200 to 380 by 20 {
|
|
606
616
|
.m\:w$(i) { width: $(i)px }
|
|
607
|
-
.m\:max$(i) {
|
|
617
|
+
.m\:max$(i) { max-width: $(i)px }
|
|
608
618
|
.m\:min$(i) { min-width: $(i)px }
|
|
609
619
|
}
|
|
610
620
|
@for $i from 400 to 1600 by 100 {
|
|
611
621
|
.m\:w$(i) { width: $(i)px }
|
|
612
|
-
.m\:max$(i) {
|
|
622
|
+
.m\:max$(i) { max-width: $(i)px }
|
|
613
623
|
.m\:min$(i) { min-width: $(i)px }
|
|
614
624
|
}
|
|
615
625
|
}
|
|
616
626
|
|
|
617
627
|
@media (min-width: 1024px) {
|
|
618
|
-
.l\:
|
|
619
|
-
width:
|
|
620
|
-
|
|
621
|
-
}
|
|
628
|
+
.l\:fullscreen {
|
|
629
|
+
width: 100vw;
|
|
630
|
+
height: 100vh;
|
|
631
|
+
}
|
|
632
|
+
.l\:wmax { width: 100%; }
|
|
633
|
+
.l\:hmax { width: 100%; }
|
|
634
|
+
.l\:wscreen { width: 100vw; }
|
|
635
|
+
.l\:hscreen { height: 100vh; }
|
|
636
|
+
.l\:max { max-width: 100%; }
|
|
622
637
|
|
|
623
638
|
@for $i from 10 to 190 by 10 {
|
|
624
639
|
.l\:w$(i) { width: $(i)px }
|
|
625
|
-
.l\:max$(i) {
|
|
640
|
+
.l\:max$(i) { max-width: $(i)px }
|
|
626
641
|
.l\:min$(i) { min-width: $(i)px }
|
|
627
642
|
}
|
|
628
643
|
@for $i from 200 to 380 by 20 {
|
|
629
644
|
.l\:w$(i) { width: $(i)px }
|
|
630
|
-
.l\:max$(i) {
|
|
645
|
+
.l\:max$(i) { max-width: $(i)px }
|
|
631
646
|
.l\:min$(i) { min-width: $(i)px }
|
|
632
647
|
}
|
|
633
648
|
@for $i from 400 to 1600 by 100 {
|
|
634
649
|
.l\:w$(i) { width: $(i)px }
|
|
635
|
-
.l\:max$(i) {
|
|
650
|
+
.l\:max$(i) { max-width: $(i)px }
|
|
636
651
|
.l\:min$(i) { min-width: $(i)px }
|
|
637
652
|
}
|
|
638
653
|
}
|
|
639
654
|
|
|
640
655
|
@media (min-width: 1280px) {
|
|
641
|
-
.xl\:
|
|
642
|
-
width:
|
|
643
|
-
|
|
644
|
-
}
|
|
656
|
+
.xl\:fullscreen {
|
|
657
|
+
width: 100vw;
|
|
658
|
+
height: 100vh;
|
|
659
|
+
}
|
|
660
|
+
.xl\:wmax { width: 100%; }
|
|
661
|
+
.xl\:hmax { width: 100%; }
|
|
662
|
+
.xl\:wscreen { width: 100vw; }
|
|
663
|
+
.xl\:hscreen { height: 100vh; }
|
|
664
|
+
.xl\:max { max-width: 100%; }
|
|
645
665
|
|
|
646
666
|
@for $i from 10 to 190 by 10 {
|
|
647
667
|
.xl\:w$(i) { width: $(i)px }
|
|
648
|
-
.xl\:max$(i) {
|
|
668
|
+
.xl\:max$(i) { max-width: $(i)px }
|
|
649
669
|
.xl\:min$(i) { min-width: $(i)px }
|
|
650
670
|
}
|
|
651
671
|
@for $i from 200 to 380 by 20 {
|
|
652
672
|
.xl\:w$(i) { width: $(i)px }
|
|
653
|
-
.xl\:max$(i) {
|
|
673
|
+
.xl\:max$(i) { max-width: $(i)px }
|
|
654
674
|
.xl\:min$(i) { min-width: $(i)px }
|
|
655
675
|
}
|
|
656
676
|
@for $i from 400 to 1600 by 100 {
|
|
657
677
|
.xl\:w$(i) { width: $(i)px }
|
|
658
|
-
.xl\:max$(i) {
|
|
678
|
+
.xl\:max$(i) { max-width: $(i)px }
|
|
659
679
|
.xl\:min$(i) { min-width: $(i)px }
|
|
660
680
|
}
|
|
661
681
|
}
|
|
@@ -697,7 +717,7 @@ html.touch .touch-hide { display: none }
|
|
|
697
717
|
|
|
698
718
|
|
|
699
719
|
/* !- Margin */
|
|
700
|
-
@for $i from 0 to
|
|
720
|
+
@for $i from 0 to 9 {
|
|
701
721
|
.m$(i) { margin: var(--space-$(i)) }
|
|
702
722
|
.mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
703
723
|
.my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -729,7 +749,7 @@ html.touch .touch-hide { display: none }
|
|
|
729
749
|
.mra { margin-right: auto }
|
|
730
750
|
|
|
731
751
|
@media (min-width: 640px) {
|
|
732
|
-
@for $i from 0 to
|
|
752
|
+
@for $i from 0 to 9 {
|
|
733
753
|
.s\:m$(i) { margin: var(--space-$(i)) }
|
|
734
754
|
.s\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
735
755
|
.s\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -762,7 +782,7 @@ html.touch .touch-hide { display: none }
|
|
|
762
782
|
}
|
|
763
783
|
|
|
764
784
|
@media (min-width: 768px) {
|
|
765
|
-
@for $i from 0 to
|
|
785
|
+
@for $i from 0 to 9 {
|
|
766
786
|
.m\:m$(i) { margin: var(--space-$(i)) }
|
|
767
787
|
.m\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
768
788
|
.m\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -795,7 +815,7 @@ html.touch .touch-hide { display: none }
|
|
|
795
815
|
}
|
|
796
816
|
|
|
797
817
|
@media (min-width: 1024px) {
|
|
798
|
-
@for $i from 0 to
|
|
818
|
+
@for $i from 0 to 9 {
|
|
799
819
|
.l\:m$(i) { margin: var(--space-$(i)) }
|
|
800
820
|
.l\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
801
821
|
.l\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -828,7 +848,7 @@ html.touch .touch-hide { display: none }
|
|
|
828
848
|
}
|
|
829
849
|
|
|
830
850
|
@media (min-width: 1280px) {
|
|
831
|
-
@for $i from 0 to
|
|
851
|
+
@for $i from 0 to 9 {
|
|
832
852
|
.xl\:m$(i) { margin: var(--space-$(i)) }
|
|
833
853
|
.xl\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
834
854
|
.xl\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -862,7 +882,7 @@ html.touch .touch-hide { display: none }
|
|
|
862
882
|
|
|
863
883
|
|
|
864
884
|
/* !- Padding */
|
|
865
|
-
@for $i from 0 to
|
|
885
|
+
@for $i from 0 to 9 {
|
|
866
886
|
.p$(i) { padding: var(--space-$(i)) }
|
|
867
887
|
.px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
868
888
|
.py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -873,7 +893,7 @@ html.touch .touch-hide { display: none }
|
|
|
873
893
|
}
|
|
874
894
|
|
|
875
895
|
@media (min-width: 640px) {
|
|
876
|
-
@for $i from 0 to
|
|
896
|
+
@for $i from 0 to 9 {
|
|
877
897
|
.s\:p$(i) { padding: var(--space-$(i)) }
|
|
878
898
|
.s\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
879
899
|
.s\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -885,7 +905,7 @@ html.touch .touch-hide { display: none }
|
|
|
885
905
|
}
|
|
886
906
|
|
|
887
907
|
@media (min-width: 768px) {
|
|
888
|
-
@for $i from 0 to
|
|
908
|
+
@for $i from 0 to 9 {
|
|
889
909
|
.m\:p$(i) { padding: var(--space-$(i)) }
|
|
890
910
|
.m\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
891
911
|
.m\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -897,7 +917,7 @@ html.touch .touch-hide { display: none }
|
|
|
897
917
|
}
|
|
898
918
|
|
|
899
919
|
@media (min-width: 1024px) {
|
|
900
|
-
@for $i from 0 to
|
|
920
|
+
@for $i from 0 to 9 {
|
|
901
921
|
.l\:p$(i) { padding: var(--space-$(i)) }
|
|
902
922
|
.l\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
903
923
|
.l\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -909,7 +929,7 @@ html.touch .touch-hide { display: none }
|
|
|
909
929
|
}
|
|
910
930
|
|
|
911
931
|
@media (min-width: 1280px) {
|
|
912
|
-
@for $i from 0 to
|
|
932
|
+
@for $i from 0 to 9 {
|
|
913
933
|
.xl\:p$(i) { padding: var(--space-$(i)) }
|
|
914
934
|
.xl\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
915
935
|
.xl\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -922,14 +942,14 @@ html.touch .touch-hide { display: none }
|
|
|
922
942
|
|
|
923
943
|
|
|
924
944
|
/* !- Gap */
|
|
925
|
-
@for $i from 0 to
|
|
945
|
+
@for $i from 0 to 9 {
|
|
926
946
|
.gap$(i) { gap: var(--space-$(i)) }
|
|
927
947
|
.gapx$(i) { column-gap: var(--space-$(i)) }
|
|
928
948
|
.gapy$(i) { row-gap: var(--space-$(i)) }
|
|
929
949
|
}
|
|
930
950
|
|
|
931
951
|
@media (min-width: 640px) {
|
|
932
|
-
@for $i from 0 to
|
|
952
|
+
@for $i from 0 to 9 {
|
|
933
953
|
.s\:gap$(i) { gap: var(--space-$(i)) }
|
|
934
954
|
.s\:gapx$(i) { column-gap: var(--space-$(i)) }
|
|
935
955
|
.s\:gapy$(i) { row-gap: var(--space-$(i)) }
|
|
@@ -937,7 +957,7 @@ html.touch .touch-hide { display: none }
|
|
|
937
957
|
}
|
|
938
958
|
|
|
939
959
|
@media (min-width: 768px) {
|
|
940
|
-
@for $i from 0 to
|
|
960
|
+
@for $i from 0 to 9 {
|
|
941
961
|
.m\:gap$(i) { gap: var(--space-$(i)) }
|
|
942
962
|
.m\:gapx$(i) { column-gap: var(--space-$(i)) }
|
|
943
963
|
.m\:gapy$(i) { row-gap: var(--space-$(i)) }
|
|
@@ -945,7 +965,7 @@ html.touch .touch-hide { display: none }
|
|
|
945
965
|
}
|
|
946
966
|
|
|
947
967
|
@media (min-width: 1024px) {
|
|
948
|
-
@for $i from 0 to
|
|
968
|
+
@for $i from 0 to 9 {
|
|
949
969
|
.l\:gap$(i) { gap: var(--space-$(i)) }
|
|
950
970
|
.l\:gapx$(i) { column-gap: var(--space-$(i)) }
|
|
951
971
|
.l\:gapy$(i) { row-gap: var(--space-$(i)) }
|
|
@@ -953,7 +973,7 @@ html.touch .touch-hide { display: none }
|
|
|
953
973
|
}
|
|
954
974
|
|
|
955
975
|
@media (min-width: 1280px) {
|
|
956
|
-
@for $i from 0 to
|
|
976
|
+
@for $i from 0 to 9 {
|
|
957
977
|
.xl\:gap$(i) { gap: var(--space-$(i)) }
|
|
958
978
|
.xl\:gapx$(i) { column-gap: var(--space-$(i)) }
|
|
959
979
|
.xl\:gapy$(i) { row-gap: var(--space-$(i)) }
|
|
@@ -962,34 +982,34 @@ html.touch .touch-hide { display: none }
|
|
|
962
982
|
|
|
963
983
|
|
|
964
984
|
/* !- Border radius */
|
|
965
|
-
@for $i from 0 to
|
|
985
|
+
@for $i from 0 to 9 {
|
|
966
986
|
.br$(i) { border-radius: var(--space-$(i)) }
|
|
967
987
|
}
|
|
968
988
|
.br100 { border-radius: 100% }
|
|
969
989
|
|
|
970
990
|
@media (min-width: 640px) {
|
|
971
|
-
@for $i from 0 to
|
|
991
|
+
@for $i from 0 to 9 {
|
|
972
992
|
.s\:br$(i) { border-radius: var(--space-$(i)) }
|
|
973
993
|
}
|
|
974
994
|
.s\:br100 { border-radius: 100% }
|
|
975
995
|
}
|
|
976
996
|
|
|
977
997
|
@media (min-width: 768px) {
|
|
978
|
-
@for $i from 0 to
|
|
998
|
+
@for $i from 0 to 9 {
|
|
979
999
|
.m\:br$(i) { border-radius: var(--space-$(i)) }
|
|
980
1000
|
}
|
|
981
1001
|
.m\:br100 { border-radius: 100% }
|
|
982
1002
|
}
|
|
983
1003
|
|
|
984
1004
|
@media (min-width: 1024px) {
|
|
985
|
-
@for $i from 0 to
|
|
1005
|
+
@for $i from 0 to 9 {
|
|
986
1006
|
.l\:br$(i) { border-radius: var(--space-$(i)) }
|
|
987
1007
|
}
|
|
988
1008
|
.l\:br100 { border-radius: 100% }
|
|
989
1009
|
}
|
|
990
1010
|
|
|
991
1011
|
@media (min-width: 1280px) {
|
|
992
|
-
@for $i from 0 to
|
|
1012
|
+
@for $i from 0 to 9 {
|
|
993
1013
|
.xl\:br$(i) { border-radius: var(--space-$(i)) }
|
|
994
1014
|
}
|
|
995
1015
|
.xl\:br100 { border-radius: 100% }
|
|
@@ -1003,11 +1023,6 @@ html.touch .touch-hide { display: none }
|
|
|
1003
1023
|
.sh3 { box-shadow: var(--shadow-3) }
|
|
1004
1024
|
.sh4 { box-shadow: var(--shadow-4) }
|
|
1005
1025
|
.sh5 { box-shadow: var(--shadow-5) }
|
|
1006
|
-
.sh6 { box-shadow: var(--shadow-6) }
|
|
1007
|
-
.sh7 { box-shadow: var(--shadow-7) }
|
|
1008
|
-
.sh8 { box-shadow: var(--shadow-8) }
|
|
1009
|
-
.sh9 { box-shadow: var(--shadow-9) }
|
|
1010
|
-
.sh10 { box-shadow: var(--shadow-10) }
|
|
1011
1026
|
|
|
1012
1027
|
@media (min-width: 640px) {
|
|
1013
1028
|
.s\:sh0 { box-shadow: none }
|
|
@@ -1016,11 +1031,6 @@ html.touch .touch-hide { display: none }
|
|
|
1016
1031
|
.s\:sh3 { box-shadow: var(--shadow-3) }
|
|
1017
1032
|
.s\:sh4 { box-shadow: var(--shadow-4) }
|
|
1018
1033
|
.s\:sh5 { box-shadow: var(--shadow-5) }
|
|
1019
|
-
.s\:sh6 { box-shadow: var(--shadow-6) }
|
|
1020
|
-
.s\:sh7 { box-shadow: var(--shadow-7) }
|
|
1021
|
-
.s\:sh8 { box-shadow: var(--shadow-8) }
|
|
1022
|
-
.s\:sh9 { box-shadow: var(--shadow-9) }
|
|
1023
|
-
.s\:sh10 { box-shadow: var(--shadow-10) }
|
|
1024
1034
|
}
|
|
1025
1035
|
|
|
1026
1036
|
@media (min-width: 768px) {
|
|
@@ -1030,11 +1040,6 @@ html.touch .touch-hide { display: none }
|
|
|
1030
1040
|
.m\:sh3 { box-shadow: var(--shadow-3) }
|
|
1031
1041
|
.m\:sh4 { box-shadow: var(--shadow-4) }
|
|
1032
1042
|
.m\:sh5 { box-shadow: var(--shadow-5) }
|
|
1033
|
-
.m\:sh6 { box-shadow: var(--shadow-6) }
|
|
1034
|
-
.m\:sh7 { box-shadow: var(--shadow-7) }
|
|
1035
|
-
.m\:sh8 { box-shadow: var(--shadow-8) }
|
|
1036
|
-
.m\:sh9 { box-shadow: var(--shadow-9) }
|
|
1037
|
-
.m\:sh10 { box-shadow: var(--shadow-10) }
|
|
1038
1043
|
}
|
|
1039
1044
|
|
|
1040
1045
|
@media (min-width: 1024px) {
|
|
@@ -1044,11 +1049,6 @@ html.touch .touch-hide { display: none }
|
|
|
1044
1049
|
.l\:sh3 { box-shadow: var(--shadow-3) }
|
|
1045
1050
|
.l\:sh4 { box-shadow: var(--shadow-4) }
|
|
1046
1051
|
.l\:sh5 { box-shadow: var(--shadow-5) }
|
|
1047
|
-
.l\:sh6 { box-shadow: var(--shadow-6) }
|
|
1048
|
-
.l\:sh7 { box-shadow: var(--shadow-7) }
|
|
1049
|
-
.l\:sh8 { box-shadow: var(--shadow-8) }
|
|
1050
|
-
.l\:sh9 { box-shadow: var(--shadow-9) }
|
|
1051
|
-
.l\:sh10 { box-shadow: var(--shadow-10) }
|
|
1052
1052
|
}
|
|
1053
1053
|
|
|
1054
1054
|
@media (min-width: 1280px) {
|
|
@@ -1058,35 +1058,30 @@ html.touch .touch-hide { display: none }
|
|
|
1058
1058
|
.xl\:sh3 { box-shadow: var(--shadow-3) }
|
|
1059
1059
|
.xl\:sh4 { box-shadow: var(--shadow-4) }
|
|
1060
1060
|
.xl\:sh5 { box-shadow: var(--shadow-5) }
|
|
1061
|
-
.xl\:sh6 { box-shadow: var(--shadow-6) }
|
|
1062
|
-
.xl\:sh7 { box-shadow: var(--shadow-7) }
|
|
1063
|
-
.xl\:sh8 { box-shadow: var(--shadow-8) }
|
|
1064
|
-
.xl\:sh9 { box-shadow: var(--shadow-9) }
|
|
1065
|
-
.xl\:sh10 { box-shadow: var(--shadow-10) }
|
|
1066
1061
|
}
|
|
1067
1062
|
|
|
1068
1063
|
|
|
1069
1064
|
/* !- Order */
|
|
1070
|
-
@for $i from 0 to
|
|
1065
|
+
@for $i from 0 to 9 {
|
|
1071
1066
|
.o$(i) { order: $(i) }
|
|
1072
1067
|
}
|
|
1073
1068
|
@media (min-width: 640px) {
|
|
1074
|
-
@for $i from 0 to
|
|
1069
|
+
@for $i from 0 to 9 {
|
|
1075
1070
|
.s\:o$(i) { order: $(i) }
|
|
1076
1071
|
}
|
|
1077
1072
|
}
|
|
1078
1073
|
@media (min-width: 768px) {
|
|
1079
|
-
@for $i from 0 to
|
|
1074
|
+
@for $i from 0 to 9 {
|
|
1080
1075
|
.m\:o$(i) { order: $(i) }
|
|
1081
1076
|
}
|
|
1082
1077
|
}
|
|
1083
1078
|
@media (min-width: 1024px) {
|
|
1084
|
-
@for $i from 0 to
|
|
1079
|
+
@for $i from 0 to 9 {
|
|
1085
1080
|
.l\:o$(i) { order: $(i) }
|
|
1086
1081
|
}
|
|
1087
1082
|
}
|
|
1088
1083
|
@media (min-width: 1280px) {
|
|
1089
|
-
@for $i from 0 to
|
|
1084
|
+
@for $i from 0 to 9 {
|
|
1090
1085
|
.xl\:o$(i) { order: $(i) }
|
|
1091
1086
|
}
|
|
1092
1087
|
}
|
|
@@ -8,17 +8,17 @@ All right reserved.
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
/*
|
|
11
|
-
.space[0-
|
|
11
|
+
.space[0-9] (s,m,l,xl) - vertical space
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
@for $i from 0 to
|
|
14
|
+
@for $i from 0 to 9 {
|
|
15
15
|
.space$(i) {
|
|
16
16
|
height: var(--space-$(i));
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
@media (min-width: 640px) {
|
|
21
|
-
@for $i from 0 to
|
|
21
|
+
@for $i from 0 to 9 {
|
|
22
22
|
.s\:space$(i) {
|
|
23
23
|
height: var(--space-$(i));
|
|
24
24
|
}
|
|
@@ -26,7 +26,7 @@ All right reserved.
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
@media (min-width: 768px) {
|
|
29
|
-
@for $i from 0 to
|
|
29
|
+
@for $i from 0 to 9 {
|
|
30
30
|
.m\:space$(i) {
|
|
31
31
|
height: var(--space-$(i));
|
|
32
32
|
}
|
|
@@ -34,7 +34,7 @@ All right reserved.
|
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
@media (min-width: 1024px) {
|
|
37
|
-
@for $i from 0 to
|
|
37
|
+
@for $i from 0 to 9 {
|
|
38
38
|
.l\:space$(i) {
|
|
39
39
|
height: var(--space-$(i));
|
|
40
40
|
}
|
|
@@ -42,7 +42,7 @@ All right reserved.
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@media (min-width: 1280px) {
|
|
45
|
-
@for $i from 0 to
|
|
45
|
+
@for $i from 0 to 9 {
|
|
46
46
|
.xl\:space$(i) {
|
|
47
47
|
height: var(--space-$(i));
|
|
48
48
|
}
|