@andreyshpigunov/x 0.5.22 → 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} +97 -103
- 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
|
@@ -36,21 +36,21 @@ All right reserved.
|
|
|
36
36
|
.b[0-9][n] (s,m,l,xl)
|
|
37
37
|
.l[0-9][n] (s,m,l,xl)
|
|
38
38
|
.r[0-9][n] (s,m,l,xl)
|
|
39
|
-
.z[0-9]
|
|
39
|
+
.z[0-9] (s,m,l,xl)
|
|
40
40
|
.op[0-10]
|
|
41
|
-
.ratio1x1
|
|
42
|
-
.ratio2x1
|
|
43
|
-
.ratio3x1
|
|
44
|
-
.ratio4x1
|
|
45
|
-
.ratio3x2
|
|
46
|
-
.ratio4x3
|
|
47
|
-
.ratio16x9
|
|
48
|
-
.ratio1x2
|
|
49
|
-
.ratio1x3
|
|
50
|
-
.ratio1x4
|
|
51
|
-
.ratio2x3
|
|
52
|
-
.ratio3x4
|
|
53
|
-
.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)
|
|
54
54
|
.breakWord
|
|
55
55
|
.visuallyHidden
|
|
56
56
|
.invisible
|
|
@@ -64,27 +64,27 @@ All right reserved.
|
|
|
64
64
|
.flex (s,m,l,xl)
|
|
65
65
|
.grid (s,m,l,xl)
|
|
66
66
|
.fullscreen
|
|
67
|
-
.max
|
|
68
|
-
.w[10-190] step 10
|
|
69
|
-
.w[200-380] step 20
|
|
70
|
-
.w[400-1600] step 100
|
|
71
|
-
.max[10-190] step 10
|
|
72
|
-
.max[200-380] step 20
|
|
73
|
-
.max[400-1600] step 100
|
|
74
|
-
.min[10-190] step 10
|
|
75
|
-
.min[200-380] step 20
|
|
76
|
-
.min[400-1600] step 100
|
|
77
|
-
.al
|
|
78
|
-
.ar
|
|
79
|
-
.ac
|
|
80
|
-
.aj
|
|
81
|
-
.m[0-12][n]
|
|
82
|
-
.mx[0-12][n]
|
|
83
|
-
.my[0-12][n]
|
|
84
|
-
.mt[0-12][n]
|
|
85
|
-
.mb[0-12][n]
|
|
86
|
-
.ml[0-12][n]
|
|
87
|
-
.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)
|
|
88
88
|
.ma (s,m,l,xl)
|
|
89
89
|
.mxa (s,m,l,xl)
|
|
90
90
|
.mya (s,m,l,xl)
|
|
@@ -92,20 +92,20 @@ All right reserved.
|
|
|
92
92
|
.mba (s,m,l,xl)
|
|
93
93
|
.mla (s,m,l,xl)
|
|
94
94
|
.mra (s,m,l,xl)
|
|
95
|
-
.p[0-12]
|
|
96
|
-
.px[0-12]
|
|
97
|
-
.py[0-12]
|
|
98
|
-
.pt[0-12]
|
|
99
|
-
.pb[0-12]
|
|
100
|
-
.pl[0-12]
|
|
101
|
-
.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)
|
|
102
102
|
.gap[0-12] (s,m,l,xl)
|
|
103
103
|
.gapx[0-12] (s,m,l,xl)
|
|
104
104
|
.gapy[0-12] (s,m,l,xl)
|
|
105
|
-
.br[0-12]
|
|
106
|
-
.br100
|
|
107
|
-
.sh[0-5]
|
|
108
|
-
.o[0-9]
|
|
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)
|
|
109
109
|
.mono
|
|
110
110
|
.italic
|
|
111
111
|
.strike
|
|
@@ -551,112 +551,131 @@ html.touch .touch-hide { display: none }
|
|
|
551
551
|
.wscreen { width: 100vw; }
|
|
552
552
|
.hscreen { height: 100vh; }
|
|
553
553
|
.max { max-width: 100%; }
|
|
554
|
-
.hmax { max-height: 100%; }
|
|
555
554
|
|
|
556
555
|
@for $i from 10 to 190 by 10 {
|
|
557
556
|
.w$(i) { width: $(i)px }
|
|
558
|
-
.max$(i) {
|
|
557
|
+
.max$(i) { max-width: $(i)px }
|
|
559
558
|
.min$(i) { min-width: $(i)px }
|
|
560
559
|
}
|
|
561
560
|
@for $i from 200 to 380 by 20 {
|
|
562
561
|
.w$(i) { width: $(i)px }
|
|
563
|
-
.max$(i) {
|
|
562
|
+
.max$(i) { max-width: $(i)px }
|
|
564
563
|
.min$(i) { min-width: $(i)px }
|
|
565
564
|
}
|
|
566
565
|
@for $i from 400 to 1600 by 100 {
|
|
567
566
|
.w$(i) { width: $(i)px }
|
|
568
|
-
.max$(i) {
|
|
567
|
+
.max$(i) { max-width: $(i)px }
|
|
569
568
|
.min$(i) { min-width: $(i)px }
|
|
570
569
|
}
|
|
571
570
|
|
|
572
571
|
@media (min-width: 640px) {
|
|
573
|
-
.s\:
|
|
574
|
-
width:
|
|
575
|
-
|
|
576
|
-
}
|
|
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%; }
|
|
577
581
|
|
|
578
582
|
@for $i from 10 to 190 by 10 {
|
|
579
583
|
.s\:w$(i) { width: $(i)px }
|
|
580
|
-
.s\:max$(i) {
|
|
584
|
+
.s\:max$(i) { max-width: $(i)px }
|
|
581
585
|
.s\:min$(i) { min-width: $(i)px }
|
|
582
586
|
}
|
|
583
587
|
@for $i from 200 to 380 by 20 {
|
|
584
588
|
.s\:w$(i) { width: $(i)px }
|
|
585
|
-
.s\:max$(i) {
|
|
589
|
+
.s\:max$(i) { max-width: $(i)px }
|
|
586
590
|
.s\:min$(i) { min-width: $(i)px }
|
|
587
591
|
}
|
|
588
592
|
@for $i from 400 to 1600 by 100 {
|
|
589
593
|
.s\:w$(i) { width: $(i)px }
|
|
590
|
-
.s\:max$(i) {
|
|
594
|
+
.s\:max$(i) { max-width: $(i)px }
|
|
591
595
|
.s\:min$(i) { min-width: $(i)px }
|
|
592
596
|
}
|
|
593
597
|
}
|
|
594
598
|
|
|
595
599
|
@media (min-width: 768px) {
|
|
596
|
-
.m\:
|
|
597
|
-
width:
|
|
598
|
-
|
|
599
|
-
}
|
|
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%; }
|
|
600
609
|
|
|
601
610
|
@for $i from 10 to 190 by 10 {
|
|
602
611
|
.m\:w$(i) { width: $(i)px }
|
|
603
|
-
.m\:max$(i) {
|
|
612
|
+
.m\:max$(i) { max-width: $(i)px }
|
|
604
613
|
.m\:min$(i) { min-width: $(i)px }
|
|
605
614
|
}
|
|
606
615
|
@for $i from 200 to 380 by 20 {
|
|
607
616
|
.m\:w$(i) { width: $(i)px }
|
|
608
|
-
.m\:max$(i) {
|
|
617
|
+
.m\:max$(i) { max-width: $(i)px }
|
|
609
618
|
.m\:min$(i) { min-width: $(i)px }
|
|
610
619
|
}
|
|
611
620
|
@for $i from 400 to 1600 by 100 {
|
|
612
621
|
.m\:w$(i) { width: $(i)px }
|
|
613
|
-
.m\:max$(i) {
|
|
622
|
+
.m\:max$(i) { max-width: $(i)px }
|
|
614
623
|
.m\:min$(i) { min-width: $(i)px }
|
|
615
624
|
}
|
|
616
625
|
}
|
|
617
626
|
|
|
618
627
|
@media (min-width: 1024px) {
|
|
619
|
-
.l\:
|
|
620
|
-
width:
|
|
621
|
-
|
|
622
|
-
}
|
|
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%; }
|
|
623
637
|
|
|
624
638
|
@for $i from 10 to 190 by 10 {
|
|
625
639
|
.l\:w$(i) { width: $(i)px }
|
|
626
|
-
.l\:max$(i) {
|
|
640
|
+
.l\:max$(i) { max-width: $(i)px }
|
|
627
641
|
.l\:min$(i) { min-width: $(i)px }
|
|
628
642
|
}
|
|
629
643
|
@for $i from 200 to 380 by 20 {
|
|
630
644
|
.l\:w$(i) { width: $(i)px }
|
|
631
|
-
.l\:max$(i) {
|
|
645
|
+
.l\:max$(i) { max-width: $(i)px }
|
|
632
646
|
.l\:min$(i) { min-width: $(i)px }
|
|
633
647
|
}
|
|
634
648
|
@for $i from 400 to 1600 by 100 {
|
|
635
649
|
.l\:w$(i) { width: $(i)px }
|
|
636
|
-
.l\:max$(i) {
|
|
650
|
+
.l\:max$(i) { max-width: $(i)px }
|
|
637
651
|
.l\:min$(i) { min-width: $(i)px }
|
|
638
652
|
}
|
|
639
653
|
}
|
|
640
654
|
|
|
641
655
|
@media (min-width: 1280px) {
|
|
642
|
-
.xl\:
|
|
643
|
-
width:
|
|
644
|
-
|
|
645
|
-
}
|
|
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%; }
|
|
646
665
|
|
|
647
666
|
@for $i from 10 to 190 by 10 {
|
|
648
667
|
.xl\:w$(i) { width: $(i)px }
|
|
649
|
-
.xl\:max$(i) {
|
|
668
|
+
.xl\:max$(i) { max-width: $(i)px }
|
|
650
669
|
.xl\:min$(i) { min-width: $(i)px }
|
|
651
670
|
}
|
|
652
671
|
@for $i from 200 to 380 by 20 {
|
|
653
672
|
.xl\:w$(i) { width: $(i)px }
|
|
654
|
-
.xl\:max$(i) {
|
|
673
|
+
.xl\:max$(i) { max-width: $(i)px }
|
|
655
674
|
.xl\:min$(i) { min-width: $(i)px }
|
|
656
675
|
}
|
|
657
676
|
@for $i from 400 to 1600 by 100 {
|
|
658
677
|
.xl\:w$(i) { width: $(i)px }
|
|
659
|
-
.xl\:max$(i) {
|
|
678
|
+
.xl\:max$(i) { max-width: $(i)px }
|
|
660
679
|
.xl\:min$(i) { min-width: $(i)px }
|
|
661
680
|
}
|
|
662
681
|
}
|
|
@@ -1004,11 +1023,6 @@ html.touch .touch-hide { display: none }
|
|
|
1004
1023
|
.sh3 { box-shadow: var(--shadow-3) }
|
|
1005
1024
|
.sh4 { box-shadow: var(--shadow-4) }
|
|
1006
1025
|
.sh5 { box-shadow: var(--shadow-5) }
|
|
1007
|
-
.sh6 { box-shadow: var(--shadow-6) }
|
|
1008
|
-
.sh7 { box-shadow: var(--shadow-7) }
|
|
1009
|
-
.sh8 { box-shadow: var(--shadow-8) }
|
|
1010
|
-
.sh9 { box-shadow: var(--shadow-9) }
|
|
1011
|
-
.sh10 { box-shadow: var(--shadow-10) }
|
|
1012
1026
|
|
|
1013
1027
|
@media (min-width: 640px) {
|
|
1014
1028
|
.s\:sh0 { box-shadow: none }
|
|
@@ -1017,11 +1031,6 @@ html.touch .touch-hide { display: none }
|
|
|
1017
1031
|
.s\:sh3 { box-shadow: var(--shadow-3) }
|
|
1018
1032
|
.s\:sh4 { box-shadow: var(--shadow-4) }
|
|
1019
1033
|
.s\:sh5 { box-shadow: var(--shadow-5) }
|
|
1020
|
-
.s\:sh6 { box-shadow: var(--shadow-6) }
|
|
1021
|
-
.s\:sh7 { box-shadow: var(--shadow-7) }
|
|
1022
|
-
.s\:sh8 { box-shadow: var(--shadow-8) }
|
|
1023
|
-
.s\:sh9 { box-shadow: var(--shadow-9) }
|
|
1024
|
-
.s\:sh10 { box-shadow: var(--shadow-10) }
|
|
1025
1034
|
}
|
|
1026
1035
|
|
|
1027
1036
|
@media (min-width: 768px) {
|
|
@@ -1031,11 +1040,6 @@ html.touch .touch-hide { display: none }
|
|
|
1031
1040
|
.m\:sh3 { box-shadow: var(--shadow-3) }
|
|
1032
1041
|
.m\:sh4 { box-shadow: var(--shadow-4) }
|
|
1033
1042
|
.m\:sh5 { box-shadow: var(--shadow-5) }
|
|
1034
|
-
.m\:sh6 { box-shadow: var(--shadow-6) }
|
|
1035
|
-
.m\:sh7 { box-shadow: var(--shadow-7) }
|
|
1036
|
-
.m\:sh8 { box-shadow: var(--shadow-8) }
|
|
1037
|
-
.m\:sh9 { box-shadow: var(--shadow-9) }
|
|
1038
|
-
.m\:sh10 { box-shadow: var(--shadow-10) }
|
|
1039
1043
|
}
|
|
1040
1044
|
|
|
1041
1045
|
@media (min-width: 1024px) {
|
|
@@ -1045,11 +1049,6 @@ html.touch .touch-hide { display: none }
|
|
|
1045
1049
|
.l\:sh3 { box-shadow: var(--shadow-3) }
|
|
1046
1050
|
.l\:sh4 { box-shadow: var(--shadow-4) }
|
|
1047
1051
|
.l\:sh5 { box-shadow: var(--shadow-5) }
|
|
1048
|
-
.l\:sh6 { box-shadow: var(--shadow-6) }
|
|
1049
|
-
.l\:sh7 { box-shadow: var(--shadow-7) }
|
|
1050
|
-
.l\:sh8 { box-shadow: var(--shadow-8) }
|
|
1051
|
-
.l\:sh9 { box-shadow: var(--shadow-9) }
|
|
1052
|
-
.l\:sh10 { box-shadow: var(--shadow-10) }
|
|
1053
1052
|
}
|
|
1054
1053
|
|
|
1055
1054
|
@media (min-width: 1280px) {
|
|
@@ -1059,11 +1058,6 @@ html.touch .touch-hide { display: none }
|
|
|
1059
1058
|
.xl\:sh3 { box-shadow: var(--shadow-3) }
|
|
1060
1059
|
.xl\:sh4 { box-shadow: var(--shadow-4) }
|
|
1061
1060
|
.xl\:sh5 { box-shadow: var(--shadow-5) }
|
|
1062
|
-
.xl\:sh6 { box-shadow: var(--shadow-6) }
|
|
1063
|
-
.xl\:sh7 { box-shadow: var(--shadow-7) }
|
|
1064
|
-
.xl\:sh8 { box-shadow: var(--shadow-8) }
|
|
1065
|
-
.xl\:sh9 { box-shadow: var(--shadow-9) }
|
|
1066
|
-
.xl\:sh10 { box-shadow: var(--shadow-10) }
|
|
1067
1061
|
}
|
|
1068
1062
|
|
|
1069
1063
|
|
package/src/css/x.css
CHANGED
|
@@ -30,7 +30,7 @@ All right reserved.
|
|
|
30
30
|
@import "../components/x/scroll.css" layer(scroll);
|
|
31
31
|
@import "../components/x/icons.css" layer(icons);
|
|
32
32
|
@import "../components/x/app.css" layer(app);
|
|
33
|
-
@import "../components/x/
|
|
33
|
+
@import "../components/x/lib.css" layer(lib);
|
|
34
34
|
@import "../components/x/colors.css" layer(colors);
|
|
35
35
|
|
|
36
36
|
|