@andreyshpigunov/x 0.5.22 → 0.5.24
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} +119 -153
- 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.24</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,24 @@ All right reserved.
|
|
|
64
64
|
.flex (s,m,l,xl)
|
|
65
65
|
.grid (s,m,l,xl)
|
|
66
66
|
.fullscreen
|
|
67
|
-
.max
|
|
68
|
-
.w[
|
|
69
|
-
.w[
|
|
70
|
-
.
|
|
71
|
-
.max[
|
|
72
|
-
.
|
|
73
|
-
.
|
|
74
|
-
.
|
|
75
|
-
.
|
|
76
|
-
.
|
|
77
|
-
.
|
|
78
|
-
.
|
|
79
|
-
.
|
|
80
|
-
.
|
|
81
|
-
.
|
|
82
|
-
.
|
|
83
|
-
.
|
|
84
|
-
.
|
|
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)
|
|
67
|
+
.max (s,m,l,xl)
|
|
68
|
+
.w[2-38] step 2 (s,m,l,xl)
|
|
69
|
+
.w[40-160] step 10 (s,m,l,xl)
|
|
70
|
+
.max[2-38] step 2 (s,m,l,xl)
|
|
71
|
+
.max[40-160] step 10 (s,m,l,xl)
|
|
72
|
+
.min[2-38] step 2 (s,m,l,xl)
|
|
73
|
+
.min[40-160] step 10 (s,m,l,xl)
|
|
74
|
+
.al (s,m,l,xl)
|
|
75
|
+
.ar (s,m,l,xl)
|
|
76
|
+
.ac (s,m,l,xl)
|
|
77
|
+
.aj (s,m,l,xl)
|
|
78
|
+
.m[0-12][n] (s,m,l,xl)
|
|
79
|
+
.mx[0-12][n] (s,m,l,xl)
|
|
80
|
+
.my[0-12][n] (s,m,l,xl)
|
|
81
|
+
.mt[0-12][n] (s,m,l,xl)
|
|
82
|
+
.mb[0-12][n] (s,m,l,xl)
|
|
83
|
+
.ml[0-12][n] (s,m,l,xl)
|
|
84
|
+
.mr[0-12][n] (s,m,l,xl)
|
|
88
85
|
.ma (s,m,l,xl)
|
|
89
86
|
.mxa (s,m,l,xl)
|
|
90
87
|
.mya (s,m,l,xl)
|
|
@@ -92,20 +89,20 @@ All right reserved.
|
|
|
92
89
|
.mba (s,m,l,xl)
|
|
93
90
|
.mla (s,m,l,xl)
|
|
94
91
|
.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]
|
|
92
|
+
.p[0-12] (s,m,l,xl)
|
|
93
|
+
.px[0-12] (s,m,l,xl)
|
|
94
|
+
.py[0-12] (s,m,l,xl)
|
|
95
|
+
.pt[0-12] (s,m,l,xl)
|
|
96
|
+
.pb[0-12] (s,m,l,xl)
|
|
97
|
+
.pl[0-12] (s,m,l,xl)
|
|
98
|
+
.pr[0-12] (s,m,l,xl)
|
|
102
99
|
.gap[0-12] (s,m,l,xl)
|
|
103
100
|
.gapx[0-12] (s,m,l,xl)
|
|
104
101
|
.gapy[0-12] (s,m,l,xl)
|
|
105
|
-
.br[0-12]
|
|
106
|
-
.br100
|
|
107
|
-
.sh[0-5]
|
|
108
|
-
.o[0-9]
|
|
102
|
+
.br[0-12] (s,m,l,xl)
|
|
103
|
+
.br100 (s,m,l,xl)
|
|
104
|
+
.sh[0-5] (s,m,l,xl)
|
|
105
|
+
.o[0-9] (s,m,l,xl)
|
|
109
106
|
.mono
|
|
110
107
|
.italic
|
|
111
108
|
.strike
|
|
@@ -551,113 +548,107 @@ html.touch .touch-hide { display: none }
|
|
|
551
548
|
.wscreen { width: 100vw; }
|
|
552
549
|
.hscreen { height: 100vh; }
|
|
553
550
|
.max { max-width: 100%; }
|
|
554
|
-
.hmax { max-height: 100%; }
|
|
555
551
|
|
|
556
|
-
@for $i from
|
|
557
|
-
.w$(i) { width: $(i)
|
|
558
|
-
.max$(i) {
|
|
559
|
-
.min$(i) { min-width: $(i)
|
|
552
|
+
@for $i from 2 to 38 by 2 {
|
|
553
|
+
.w$(i) { width: $(i)rem }
|
|
554
|
+
.max$(i) { max-width: $(i)rem }
|
|
555
|
+
.min$(i) { min-width: $(i)rem }
|
|
560
556
|
}
|
|
561
|
-
@for $i from
|
|
562
|
-
.w$(i) { width: $(i)
|
|
563
|
-
.max$(i) {
|
|
564
|
-
.min$(i) { min-width: $(i)
|
|
565
|
-
}
|
|
566
|
-
@for $i from 400 to 1600 by 100 {
|
|
567
|
-
.w$(i) { width: $(i)px }
|
|
568
|
-
.max$(i) { width: 100%; max-width: $(i)px }
|
|
569
|
-
.min$(i) { min-width: $(i)px }
|
|
557
|
+
@for $i from 40 to 160 by 10 {
|
|
558
|
+
.w$(i) { width: $(i)rem }
|
|
559
|
+
.max$(i) { max-width: $(i)rem }
|
|
560
|
+
.min$(i) { min-width: $(i)rem }
|
|
570
561
|
}
|
|
571
562
|
|
|
572
563
|
@media (min-width: 640px) {
|
|
573
|
-
.s\:
|
|
574
|
-
width:
|
|
575
|
-
|
|
576
|
-
}
|
|
564
|
+
.s\:fullscreen {
|
|
565
|
+
width: 100vw;
|
|
566
|
+
height: 100vh;
|
|
567
|
+
}
|
|
568
|
+
.s\:wmax { width: 100%; }
|
|
569
|
+
.s\:hmax { width: 100%; }
|
|
570
|
+
.s\:wscreen { width: 100vw; }
|
|
571
|
+
.s\:hscreen { height: 100vh; }
|
|
572
|
+
.s\:max { max-width: 100%; }
|
|
577
573
|
|
|
578
|
-
@for $i from
|
|
579
|
-
.s\:w$(i) { width: $(i)
|
|
580
|
-
.s\:max$(i) {
|
|
581
|
-
.s\:min$(i) { min-width: $(i)
|
|
582
|
-
}
|
|
583
|
-
@for $i from 200 to 380 by 20 {
|
|
584
|
-
.s\:w$(i) { width: $(i)px }
|
|
585
|
-
.s\:max$(i) { width: 100%; max-width: $(i)px }
|
|
586
|
-
.s\:min$(i) { min-width: $(i)px }
|
|
574
|
+
@for $i from 2 to 38 by 2 {
|
|
575
|
+
.s\:w$(i) { width: $(i)rem }
|
|
576
|
+
.s\:max$(i) { max-width: $(i)rem }
|
|
577
|
+
.s\:min$(i) { min-width: $(i)rem }
|
|
587
578
|
}
|
|
588
|
-
@for $i from
|
|
589
|
-
.s\:w$(i) { width: $(i)
|
|
590
|
-
.s\:max$(i) {
|
|
591
|
-
.s\:min$(i) { min-width: $(i)
|
|
579
|
+
@for $i from 40 to 160 by 10 {
|
|
580
|
+
.s\:w$(i) { width: $(i)rem }
|
|
581
|
+
.s\:max$(i) { max-width: $(i)rem }
|
|
582
|
+
.s\:min$(i) { min-width: $(i)rem }
|
|
592
583
|
}
|
|
593
584
|
}
|
|
594
585
|
|
|
595
586
|
@media (min-width: 768px) {
|
|
596
|
-
.m\:
|
|
597
|
-
width:
|
|
598
|
-
|
|
599
|
-
}
|
|
587
|
+
.m\:fullscreen {
|
|
588
|
+
width: 100vw;
|
|
589
|
+
height: 100vh;
|
|
590
|
+
}
|
|
591
|
+
.m\:wmax { width: 100%; }
|
|
592
|
+
.m\:hmax { width: 100%; }
|
|
593
|
+
.m\:wscreen { width: 100vw; }
|
|
594
|
+
.m\:hscreen { height: 100vh; }
|
|
595
|
+
.m\:max { max-width: 100%; }
|
|
600
596
|
|
|
601
|
-
@for $i from
|
|
602
|
-
.m\:w$(i) { width: $(i)
|
|
603
|
-
.m\:max$(i) {
|
|
604
|
-
.m\:min$(i) { min-width: $(i)
|
|
605
|
-
}
|
|
606
|
-
@for $i from 200 to 380 by 20 {
|
|
607
|
-
.m\:w$(i) { width: $(i)px }
|
|
608
|
-
.m\:max$(i) { width: 100%; max-width: $(i)px }
|
|
609
|
-
.m\:min$(i) { min-width: $(i)px }
|
|
597
|
+
@for $i from 2 to 38 by 2 {
|
|
598
|
+
.m\:w$(i) { width: $(i)rem }
|
|
599
|
+
.m\:max$(i) { max-width: $(i)rem }
|
|
600
|
+
.m\:min$(i) { min-width: $(i)rem }
|
|
610
601
|
}
|
|
611
|
-
@for $i from
|
|
612
|
-
.m\:w$(i) { width: $(i)
|
|
613
|
-
.m\:max$(i) {
|
|
614
|
-
.m\:min$(i) { min-width: $(i)
|
|
602
|
+
@for $i from 40 to 160 by 10 {
|
|
603
|
+
.m\:w$(i) { width: $(i)rem }
|
|
604
|
+
.m\:max$(i) { max-width: $(i)rem }
|
|
605
|
+
.m\:min$(i) { min-width: $(i)rem }
|
|
615
606
|
}
|
|
616
607
|
}
|
|
617
608
|
|
|
618
609
|
@media (min-width: 1024px) {
|
|
619
|
-
.l\:
|
|
620
|
-
width:
|
|
621
|
-
|
|
622
|
-
}
|
|
610
|
+
.l\:fullscreen {
|
|
611
|
+
width: 100vw;
|
|
612
|
+
height: 100vh;
|
|
613
|
+
}
|
|
614
|
+
.l\:wmax { width: 100%; }
|
|
615
|
+
.l\:hmax { width: 100%; }
|
|
616
|
+
.l\:wscreen { width: 100vw; }
|
|
617
|
+
.l\:hscreen { height: 100vh; }
|
|
618
|
+
.l\:max { max-width: 100%; }
|
|
623
619
|
|
|
624
|
-
@for $i from
|
|
625
|
-
.l\:w$(i) { width: $(i)
|
|
626
|
-
.l\:max$(i) {
|
|
627
|
-
.l\:min$(i) { min-width: $(i)
|
|
628
|
-
}
|
|
629
|
-
@for $i from 200 to 380 by 20 {
|
|
630
|
-
.l\:w$(i) { width: $(i)px }
|
|
631
|
-
.l\:max$(i) { width: 100%; max-width: $(i)px }
|
|
632
|
-
.l\:min$(i) { min-width: $(i)px }
|
|
620
|
+
@for $i from 2 to 38 by 2 {
|
|
621
|
+
.l\:w$(i) { width: $(i)rem }
|
|
622
|
+
.l\:max$(i) { max-width: $(i)rem }
|
|
623
|
+
.l\:min$(i) { min-width: $(i)rem }
|
|
633
624
|
}
|
|
634
|
-
@for $i from
|
|
635
|
-
.l\:w$(i) { width: $(i)
|
|
636
|
-
.l\:max$(i) {
|
|
637
|
-
.l\:min$(i) { min-width: $(i)
|
|
625
|
+
@for $i from 40 to 160 by 10 {
|
|
626
|
+
.l\:w$(i) { width: $(i)rem }
|
|
627
|
+
.l\:max$(i) { max-width: $(i)rem }
|
|
628
|
+
.l\:min$(i) { min-width: $(i)rem }
|
|
638
629
|
}
|
|
639
630
|
}
|
|
640
631
|
|
|
641
632
|
@media (min-width: 1280px) {
|
|
642
|
-
.xl\:
|
|
643
|
-
width:
|
|
644
|
-
|
|
645
|
-
}
|
|
633
|
+
.xl\:fullscreen {
|
|
634
|
+
width: 100vw;
|
|
635
|
+
height: 100vh;
|
|
636
|
+
}
|
|
637
|
+
.xl\:wmax { width: 100%; }
|
|
638
|
+
.xl\:hmax { width: 100%; }
|
|
639
|
+
.xl\:wscreen { width: 100vw; }
|
|
640
|
+
.xl\:hscreen { height: 100vh; }
|
|
641
|
+
.xl\:max { max-width: 100%; }
|
|
646
642
|
|
|
647
|
-
@for $i from
|
|
648
|
-
.xl\:w$(i) { width: $(i)
|
|
649
|
-
.xl\:max$(i) {
|
|
650
|
-
.xl\:min$(i) { min-width: $(i)
|
|
651
|
-
}
|
|
652
|
-
@for $i from 200 to 380 by 20 {
|
|
653
|
-
.xl\:w$(i) { width: $(i)px }
|
|
654
|
-
.xl\:max$(i) { width: 100%; max-width: $(i)px }
|
|
655
|
-
.xl\:min$(i) { min-width: $(i)px }
|
|
643
|
+
@for $i from 2 to 38 by 2 {
|
|
644
|
+
.xl\:w$(i) { width: $(i)rem }
|
|
645
|
+
.xl\:max$(i) { max-width: $(i)rem }
|
|
646
|
+
.xl\:min$(i) { min-width: $(i)rem }
|
|
656
647
|
}
|
|
657
|
-
@for $i from
|
|
658
|
-
.xl\:w$(i) { width: $(i)
|
|
659
|
-
.xl\:max$(i) {
|
|
660
|
-
.xl\:min$(i) { min-width: $(i)
|
|
648
|
+
@for $i from 40 to 160 by 10 {
|
|
649
|
+
.xl\:w$(i) { width: $(i)rem }
|
|
650
|
+
.xl\:max$(i) { max-width: $(i)rem }
|
|
651
|
+
.xl\:min$(i) { min-width: $(i)rem }
|
|
661
652
|
}
|
|
662
653
|
}
|
|
663
654
|
|
|
@@ -1004,11 +995,6 @@ html.touch .touch-hide { display: none }
|
|
|
1004
995
|
.sh3 { box-shadow: var(--shadow-3) }
|
|
1005
996
|
.sh4 { box-shadow: var(--shadow-4) }
|
|
1006
997
|
.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
998
|
|
|
1013
999
|
@media (min-width: 640px) {
|
|
1014
1000
|
.s\:sh0 { box-shadow: none }
|
|
@@ -1017,11 +1003,6 @@ html.touch .touch-hide { display: none }
|
|
|
1017
1003
|
.s\:sh3 { box-shadow: var(--shadow-3) }
|
|
1018
1004
|
.s\:sh4 { box-shadow: var(--shadow-4) }
|
|
1019
1005
|
.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
1006
|
}
|
|
1026
1007
|
|
|
1027
1008
|
@media (min-width: 768px) {
|
|
@@ -1031,11 +1012,6 @@ html.touch .touch-hide { display: none }
|
|
|
1031
1012
|
.m\:sh3 { box-shadow: var(--shadow-3) }
|
|
1032
1013
|
.m\:sh4 { box-shadow: var(--shadow-4) }
|
|
1033
1014
|
.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
1015
|
}
|
|
1040
1016
|
|
|
1041
1017
|
@media (min-width: 1024px) {
|
|
@@ -1045,11 +1021,6 @@ html.touch .touch-hide { display: none }
|
|
|
1045
1021
|
.l\:sh3 { box-shadow: var(--shadow-3) }
|
|
1046
1022
|
.l\:sh4 { box-shadow: var(--shadow-4) }
|
|
1047
1023
|
.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
1024
|
}
|
|
1054
1025
|
|
|
1055
1026
|
@media (min-width: 1280px) {
|
|
@@ -1059,11 +1030,6 @@ html.touch .touch-hide { display: none }
|
|
|
1059
1030
|
.xl\:sh3 { box-shadow: var(--shadow-3) }
|
|
1060
1031
|
.xl\:sh4 { box-shadow: var(--shadow-4) }
|
|
1061
1032
|
.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
1033
|
}
|
|
1068
1034
|
|
|
1069
1035
|
|
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
|
|