@andreyshpigunov/x 0.5.25 → 0.5.26
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/lib.css +37 -37
- package/src/components/x/space.css +6 -6
- package/src/components/x/variables.css +1 -0
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.26</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
package/src/components/x/lib.css
CHANGED
|
@@ -32,11 +32,11 @@ All right reserved.
|
|
|
32
32
|
.fit-none (s,m,l,xl)
|
|
33
33
|
.fit-cover (s,m,l,xl)
|
|
34
34
|
.fit-contain (s,m,l,xl)
|
|
35
|
-
.t[0-
|
|
36
|
-
.b[0-
|
|
37
|
-
.l[0-
|
|
38
|
-
.r[0-
|
|
39
|
-
.z[0-
|
|
35
|
+
.t[0-10][n] (s,m,l,xl)
|
|
36
|
+
.b[0-10][n] (s,m,l,xl)
|
|
37
|
+
.l[0-10][n] (s,m,l,xl)
|
|
38
|
+
.r[0-10][n] (s,m,l,xl)
|
|
39
|
+
.z[0-10] (s,m,l,xl)
|
|
40
40
|
.op[0-10]
|
|
41
41
|
.ratio1x1 (s,m,l,xl)
|
|
42
42
|
.ratio2x1 (s,m,l,xl)
|
|
@@ -102,13 +102,13 @@ All right reserved.
|
|
|
102
102
|
.br[0-12] (s,m,l,xl)
|
|
103
103
|
.br100 (s,m,l,xl)
|
|
104
104
|
.sh[0-5] (s,m,l,xl)
|
|
105
|
-
.o[0-
|
|
105
|
+
.o[0-10] (s,m,l,xl)
|
|
106
106
|
.mono
|
|
107
107
|
.italic
|
|
108
108
|
.strike
|
|
109
109
|
.fs[10-19] step 1 (m,l,xl) - size in rem - 1.0, 1.1, 1.2, ..., 1.9
|
|
110
110
|
.fs[20-100] step 2 (m,l,xl) - size in rem - 2.0, 2.2, 2.4, ..., 6.4
|
|
111
|
-
.fw[100-
|
|
111
|
+
.fw[100-1000] step 100 (m,l,xl)
|
|
112
112
|
.ls[0-4] (m,l,xl)
|
|
113
113
|
.lh[0-9] (m,l,xl) - values: 1.0-1.9
|
|
114
114
|
.no-print
|
|
@@ -246,7 +246,7 @@ html.touch .touch-hide { display: none }
|
|
|
246
246
|
|
|
247
247
|
|
|
248
248
|
/* !- Top, bottom, left, right, z-index */
|
|
249
|
-
@for $i from 0 to
|
|
249
|
+
@for $i from 0 to 10 {
|
|
250
250
|
.t$(i) { top: var(--space-$(i)) }
|
|
251
251
|
.b$(i) { bottom: var(--space-$(i)) }
|
|
252
252
|
.l$(i) { left: var(--space-$(i)) }
|
|
@@ -258,7 +258,7 @@ html.touch .touch-hide { display: none }
|
|
|
258
258
|
.z$(i) { z-index: $(i) }
|
|
259
259
|
}
|
|
260
260
|
@media (min-width: 640px) {
|
|
261
|
-
@for $i from 0 to
|
|
261
|
+
@for $i from 0 to 10 {
|
|
262
262
|
.s\:t$(i) { top: var(--space-$(i)) }
|
|
263
263
|
.s\:b$(i) { bottom: var(--space-$(i)) }
|
|
264
264
|
.s\:l$(i) { left: var(--space-$(i)) }
|
|
@@ -271,7 +271,7 @@ html.touch .touch-hide { display: none }
|
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
273
|
@media (min-width: 768px) {
|
|
274
|
-
@for $i from 0 to
|
|
274
|
+
@for $i from 0 to 10 {
|
|
275
275
|
.m\:t$(i) { top: var(--space-$(i)) }
|
|
276
276
|
.m\:b$(i) { bottom: var(--space-$(i)) }
|
|
277
277
|
.m\:l$(i) { left: var(--space-$(i)) }
|
|
@@ -284,7 +284,7 @@ html.touch .touch-hide { display: none }
|
|
|
284
284
|
}
|
|
285
285
|
}
|
|
286
286
|
@media (min-width: 1024px) {
|
|
287
|
-
@for $i from 0 to
|
|
287
|
+
@for $i from 0 to 10 {
|
|
288
288
|
.l\:t$(i) { top: var(--space-$(i)) }
|
|
289
289
|
.l\:b$(i) { bottom: var(--space-$(i)) }
|
|
290
290
|
.l\:l$(i) { left: var(--space-$(i)) }
|
|
@@ -297,7 +297,7 @@ html.touch .touch-hide { display: none }
|
|
|
297
297
|
}
|
|
298
298
|
}
|
|
299
299
|
@media (min-width: 1280px) {
|
|
300
|
-
@for $i from 0 to
|
|
300
|
+
@for $i from 0 to 10 {
|
|
301
301
|
.xl\:t$(i) { top: var(--space-$(i)) }
|
|
302
302
|
.xl\:b$(i) { bottom: var(--space-$(i)) }
|
|
303
303
|
.xl\:l$(i) { left: var(--space-$(i)) }
|
|
@@ -689,7 +689,7 @@ html.touch .touch-hide { display: none }
|
|
|
689
689
|
|
|
690
690
|
|
|
691
691
|
/* !- Margin */
|
|
692
|
-
@for $i from 0 to
|
|
692
|
+
@for $i from 0 to 10 {
|
|
693
693
|
.m$(i) { margin: var(--space-$(i)) }
|
|
694
694
|
.mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
695
695
|
.my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -721,7 +721,7 @@ html.touch .touch-hide { display: none }
|
|
|
721
721
|
.mra { margin-right: auto }
|
|
722
722
|
|
|
723
723
|
@media (min-width: 640px) {
|
|
724
|
-
@for $i from 0 to
|
|
724
|
+
@for $i from 0 to 10 {
|
|
725
725
|
.s\:m$(i) { margin: var(--space-$(i)) }
|
|
726
726
|
.s\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
727
727
|
.s\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -754,7 +754,7 @@ html.touch .touch-hide { display: none }
|
|
|
754
754
|
}
|
|
755
755
|
|
|
756
756
|
@media (min-width: 768px) {
|
|
757
|
-
@for $i from 0 to
|
|
757
|
+
@for $i from 0 to 10 {
|
|
758
758
|
.m\:m$(i) { margin: var(--space-$(i)) }
|
|
759
759
|
.m\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
760
760
|
.m\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -787,7 +787,7 @@ html.touch .touch-hide { display: none }
|
|
|
787
787
|
}
|
|
788
788
|
|
|
789
789
|
@media (min-width: 1024px) {
|
|
790
|
-
@for $i from 0 to
|
|
790
|
+
@for $i from 0 to 10 {
|
|
791
791
|
.l\:m$(i) { margin: var(--space-$(i)) }
|
|
792
792
|
.l\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
793
793
|
.l\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -820,7 +820,7 @@ html.touch .touch-hide { display: none }
|
|
|
820
820
|
}
|
|
821
821
|
|
|
822
822
|
@media (min-width: 1280px) {
|
|
823
|
-
@for $i from 0 to
|
|
823
|
+
@for $i from 0 to 10 {
|
|
824
824
|
.xl\:m$(i) { margin: var(--space-$(i)) }
|
|
825
825
|
.xl\:mx$(i) { margin-left: var(--space-$(i)); margin-right: var(--space-$(i)) }
|
|
826
826
|
.xl\:my$(i) { margin-top: var(--space-$(i)); margin-bottom: var(--space-$(i)) }
|
|
@@ -854,7 +854,7 @@ html.touch .touch-hide { display: none }
|
|
|
854
854
|
|
|
855
855
|
|
|
856
856
|
/* !- Padding */
|
|
857
|
-
@for $i from 0 to
|
|
857
|
+
@for $i from 0 to 10 {
|
|
858
858
|
.p$(i) { padding: var(--space-$(i)) }
|
|
859
859
|
.px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
860
860
|
.py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -865,7 +865,7 @@ html.touch .touch-hide { display: none }
|
|
|
865
865
|
}
|
|
866
866
|
|
|
867
867
|
@media (min-width: 640px) {
|
|
868
|
-
@for $i from 0 to
|
|
868
|
+
@for $i from 0 to 10 {
|
|
869
869
|
.s\:p$(i) { padding: var(--space-$(i)) }
|
|
870
870
|
.s\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
871
871
|
.s\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -877,7 +877,7 @@ html.touch .touch-hide { display: none }
|
|
|
877
877
|
}
|
|
878
878
|
|
|
879
879
|
@media (min-width: 768px) {
|
|
880
|
-
@for $i from 0 to
|
|
880
|
+
@for $i from 0 to 10 {
|
|
881
881
|
.m\:p$(i) { padding: var(--space-$(i)) }
|
|
882
882
|
.m\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
883
883
|
.m\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -889,7 +889,7 @@ html.touch .touch-hide { display: none }
|
|
|
889
889
|
}
|
|
890
890
|
|
|
891
891
|
@media (min-width: 1024px) {
|
|
892
|
-
@for $i from 0 to
|
|
892
|
+
@for $i from 0 to 10 {
|
|
893
893
|
.l\:p$(i) { padding: var(--space-$(i)) }
|
|
894
894
|
.l\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
895
895
|
.l\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -901,7 +901,7 @@ html.touch .touch-hide { display: none }
|
|
|
901
901
|
}
|
|
902
902
|
|
|
903
903
|
@media (min-width: 1280px) {
|
|
904
|
-
@for $i from 0 to
|
|
904
|
+
@for $i from 0 to 10 {
|
|
905
905
|
.xl\:p$(i) { padding: var(--space-$(i)) }
|
|
906
906
|
.xl\:px$(i) { padding-left: var(--space-$(i)); padding-right: var(--space-$(i)) }
|
|
907
907
|
.xl\:py$(i) { padding-top: var(--space-$(i)); padding-bottom: var(--space-$(i)) }
|
|
@@ -914,14 +914,14 @@ html.touch .touch-hide { display: none }
|
|
|
914
914
|
|
|
915
915
|
|
|
916
916
|
/* !- Gap */
|
|
917
|
-
@for $i from 0 to
|
|
917
|
+
@for $i from 0 to 10 {
|
|
918
918
|
.gap$(i) { gap: var(--space-$(i)) }
|
|
919
919
|
.gapx$(i) { column-gap: var(--space-$(i)) }
|
|
920
920
|
.gapy$(i) { row-gap: var(--space-$(i)) }
|
|
921
921
|
}
|
|
922
922
|
|
|
923
923
|
@media (min-width: 640px) {
|
|
924
|
-
@for $i from 0 to
|
|
924
|
+
@for $i from 0 to 10 {
|
|
925
925
|
.s\:gap$(i) { gap: var(--space-$(i)) }
|
|
926
926
|
.s\:gapx$(i) { column-gap: var(--space-$(i)) }
|
|
927
927
|
.s\:gapy$(i) { row-gap: var(--space-$(i)) }
|
|
@@ -929,7 +929,7 @@ html.touch .touch-hide { display: none }
|
|
|
929
929
|
}
|
|
930
930
|
|
|
931
931
|
@media (min-width: 768px) {
|
|
932
|
-
@for $i from 0 to
|
|
932
|
+
@for $i from 0 to 10 {
|
|
933
933
|
.m\:gap$(i) { gap: var(--space-$(i)) }
|
|
934
934
|
.m\:gapx$(i) { column-gap: var(--space-$(i)) }
|
|
935
935
|
.m\:gapy$(i) { row-gap: var(--space-$(i)) }
|
|
@@ -937,7 +937,7 @@ html.touch .touch-hide { display: none }
|
|
|
937
937
|
}
|
|
938
938
|
|
|
939
939
|
@media (min-width: 1024px) {
|
|
940
|
-
@for $i from 0 to
|
|
940
|
+
@for $i from 0 to 10 {
|
|
941
941
|
.l\:gap$(i) { gap: var(--space-$(i)) }
|
|
942
942
|
.l\:gapx$(i) { column-gap: var(--space-$(i)) }
|
|
943
943
|
.l\:gapy$(i) { row-gap: var(--space-$(i)) }
|
|
@@ -945,7 +945,7 @@ html.touch .touch-hide { display: none }
|
|
|
945
945
|
}
|
|
946
946
|
|
|
947
947
|
@media (min-width: 1280px) {
|
|
948
|
-
@for $i from 0 to
|
|
948
|
+
@for $i from 0 to 10 {
|
|
949
949
|
.xl\:gap$(i) { gap: var(--space-$(i)) }
|
|
950
950
|
.xl\:gapx$(i) { column-gap: var(--space-$(i)) }
|
|
951
951
|
.xl\:gapy$(i) { row-gap: var(--space-$(i)) }
|
|
@@ -954,34 +954,34 @@ html.touch .touch-hide { display: none }
|
|
|
954
954
|
|
|
955
955
|
|
|
956
956
|
/* !- Border radius */
|
|
957
|
-
@for $i from 0 to
|
|
957
|
+
@for $i from 0 to 10 {
|
|
958
958
|
.br$(i) { border-radius: var(--space-$(i)) }
|
|
959
959
|
}
|
|
960
960
|
.br100 { border-radius: 100% }
|
|
961
961
|
|
|
962
962
|
@media (min-width: 640px) {
|
|
963
|
-
@for $i from 0 to
|
|
963
|
+
@for $i from 0 to 10 {
|
|
964
964
|
.s\:br$(i) { border-radius: var(--space-$(i)) }
|
|
965
965
|
}
|
|
966
966
|
.s\:br100 { border-radius: 100% }
|
|
967
967
|
}
|
|
968
968
|
|
|
969
969
|
@media (min-width: 768px) {
|
|
970
|
-
@for $i from 0 to
|
|
970
|
+
@for $i from 0 to 10 {
|
|
971
971
|
.m\:br$(i) { border-radius: var(--space-$(i)) }
|
|
972
972
|
}
|
|
973
973
|
.m\:br100 { border-radius: 100% }
|
|
974
974
|
}
|
|
975
975
|
|
|
976
976
|
@media (min-width: 1024px) {
|
|
977
|
-
@for $i from 0 to
|
|
977
|
+
@for $i from 0 to 10 {
|
|
978
978
|
.l\:br$(i) { border-radius: var(--space-$(i)) }
|
|
979
979
|
}
|
|
980
980
|
.l\:br100 { border-radius: 100% }
|
|
981
981
|
}
|
|
982
982
|
|
|
983
983
|
@media (min-width: 1280px) {
|
|
984
|
-
@for $i from 0 to
|
|
984
|
+
@for $i from 0 to 10 {
|
|
985
985
|
.xl\:br$(i) { border-radius: var(--space-$(i)) }
|
|
986
986
|
}
|
|
987
987
|
.xl\:br100 { border-radius: 100% }
|
|
@@ -1034,26 +1034,26 @@ html.touch .touch-hide { display: none }
|
|
|
1034
1034
|
|
|
1035
1035
|
|
|
1036
1036
|
/* !- Order */
|
|
1037
|
-
@for $i from 0 to
|
|
1037
|
+
@for $i from 0 to 10 {
|
|
1038
1038
|
.o$(i) { order: $(i) }
|
|
1039
1039
|
}
|
|
1040
1040
|
@media (min-width: 640px) {
|
|
1041
|
-
@for $i from 0 to
|
|
1041
|
+
@for $i from 0 to 10 {
|
|
1042
1042
|
.s\:o$(i) { order: $(i) }
|
|
1043
1043
|
}
|
|
1044
1044
|
}
|
|
1045
1045
|
@media (min-width: 768px) {
|
|
1046
|
-
@for $i from 0 to
|
|
1046
|
+
@for $i from 0 to 10 {
|
|
1047
1047
|
.m\:o$(i) { order: $(i) }
|
|
1048
1048
|
}
|
|
1049
1049
|
}
|
|
1050
1050
|
@media (min-width: 1024px) {
|
|
1051
|
-
@for $i from 0 to
|
|
1051
|
+
@for $i from 0 to 10 {
|
|
1052
1052
|
.l\:o$(i) { order: $(i) }
|
|
1053
1053
|
}
|
|
1054
1054
|
}
|
|
1055
1055
|
@media (min-width: 1280px) {
|
|
1056
|
-
@for $i from 0 to
|
|
1056
|
+
@for $i from 0 to 10 {
|
|
1057
1057
|
.xl\:o$(i) { order: $(i) }
|
|
1058
1058
|
}
|
|
1059
1059
|
}
|
|
@@ -8,17 +8,17 @@ All right reserved.
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
/*
|
|
11
|
-
.space[0-
|
|
11
|
+
.space[0-10] (s,m,l,xl) - vertical space
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
@for $i from 0 to
|
|
14
|
+
@for $i from 0 to 10 {
|
|
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 10 {
|
|
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 10 {
|
|
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 10 {
|
|
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 10 {
|
|
46
46
|
.xl\:space$(i) {
|
|
47
47
|
height: var(--space-$(i));
|
|
48
48
|
}
|