@andreyshpigunov/x 0.4.4 → 0.5.1

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/assets/css/app.css +1 -1
  2. package/assets/js/app.js +1 -1
  3. package/cheatsheet.html +18 -14
  4. package/dist/x.css +1 -1
  5. package/dist/x.js +1 -1
  6. package/index.html +102 -102
  7. package/package.json +1 -1
  8. package/src/components/x/animate.js +1 -1
  9. package/src/components/x/buttons.css +191 -187
  10. package/src/components/x/colors.css +57 -35
  11. package/src/components/x/dropdown.css +127 -123
  12. package/src/components/x/dropdown.js +19 -19
  13. package/src/components/x/flex.css +141 -137
  14. package/src/components/x/flow.css +35 -31
  15. package/src/components/x/form.css +97 -93
  16. package/src/components/x/grid.css +99 -94
  17. package/src/components/x/helpers.css +915 -912
  18. package/src/components/x/icons.css +40 -36
  19. package/src/components/x/lib.js +4 -4
  20. package/src/components/x/links.css +63 -59
  21. package/src/components/x/modal.css +218 -214
  22. package/src/components/x/modal.js +23 -23
  23. package/src/components/x/reset.css +166 -162
  24. package/src/components/x/scroll.css +77 -71
  25. package/src/components/x/sheets.css +6 -2
  26. package/src/components/x/slider.css +74 -70
  27. package/src/components/x/space.css +30 -26
  28. package/src/components/x/sticky.css +18 -14
  29. package/src/components/x/sticky.js +5 -5
  30. package/src/components/x/typo.css +208 -205
  31. package/src/css/x.css +20 -17
package/src/components/x/grid.css CHANGED
@@ -13,112 +13,117 @@ All right reserved.
13
13
  .grid > .c[1-12]/[1-12] (s,m,l,xl) - columns range for content
14
14
  */
15
15
 
16
- .grid { display: grid }
17
16
 
18
- [class*=grid] {
19
- width: 100%;
20
- grid-template-columns: repeat(12, 1fr);
21
- grid-auto-flow: dense;
22
-
23
- @for $i from 1 to 12 {
24
- &.g$(i) { grid-template-columns: repeat($(i), 1fr) }
25
- & > .c$(i) { grid-column: span $(i) }
26
- @for $m from 12 to $i {
27
- & > .c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
28
- }
29
- }
17
+ @layer grid {
18
+
19
+ .grid { display: grid }
20
+
21
+ [class*=grid] {
22
+ width: 100%;
23
+ grid-template-columns: repeat(12, 1fr);
24
+ grid-auto-flow: dense;
30
25
 
31
- @media (min-width: 640px) {
32
26
  @for $i from 1 to 12 {
33
- &.s\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
34
- & > .s\:c$(i) { grid-column: span $(i) }
27
+ &.g$(i) { grid-template-columns: repeat($(i), 1fr) }
28
+ & > .c$(i) { grid-column: span $(i) }
35
29
  @for $m from 12 to $i {
36
- & > .s\:c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
30
+ & > .c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
37
31
  }
38
32
  }
39
- }
40
-
41
- @media (min-width: 768px) {
42
- @for $i from 1 to 12 {
43
- &.m\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
44
- & > .m\:c$(i) { grid-column: span $(i) }
45
- @for $m from 12 to $i {
46
- & > .m\:c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
33
+
34
+ @media (min-width: 640px) {
35
+ @for $i from 1 to 12 {
36
+ &.s\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
37
+ & > .s\:c$(i) { grid-column: span $(i) }
38
+ @for $m from 12 to $i {
39
+ & > .s\:c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
40
+ }
47
41
  }
48
42
  }
49
- }
50
-
51
- @media (min-width: 1024px) {
52
- @for $i from 1 to 12 {
53
- &.l\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
54
- & > .l\:c$(i) { grid-column: span $(i) }
55
- @for $m from 12 to $i {
56
- & > .l\:c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
43
+
44
+ @media (min-width: 768px) {
45
+ @for $i from 1 to 12 {
46
+ &.m\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
47
+ & > .m\:c$(i) { grid-column: span $(i) }
48
+ @for $m from 12 to $i {
49
+ & > .m\:c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
50
+ }
57
51
  }
58
52
  }
59
- }
60
-
61
- @media (min-width: 1280px) {
62
- @for $i from 1 to 12 {
63
- &.xl\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
64
- & > .xl\:c$(i) { grid-column: span $(i) }
65
- @for $m from 12 to $i {
66
- & > .xl\:c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
53
+
54
+ @media (min-width: 1024px) {
55
+ @for $i from 1 to 12 {
56
+ &.l\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
57
+ & > .l\:c$(i) { grid-column: span $(i) }
58
+ @for $m from 12 to $i {
59
+ & > .l\:c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
60
+ }
61
+ }
62
+ }
63
+
64
+ @media (min-width: 1280px) {
65
+ @for $i from 1 to 12 {
66
+ &.xl\:g$(i) { grid-template-columns: repeat($(i), 1fr) }
67
+ & > .xl\:c$(i) { grid-column: span $(i) }
68
+ @for $m from 12 to $i {
69
+ & > .xl\:c$(i)\/$(m) { grid-column: $(i) / calc($(m) + 1) }
70
+ }
67
71
  }
68
72
  }
69
73
  }
70
- }
71
-
72
- .jss { justify-self: start }
73
- .jse { justify-self: end }
74
- .jsc { justify-self: center }
75
- .jsstr { justify-self: stretch }
76
- .ass { align-self: start }
77
- .ase { align-self: end }
78
- .asc { align-self: center }
79
- .asstr { align-self: stretch }
80
-
81
- @media (min-width: 640px) {
82
- .s\:jss { justify-self: start }
83
- .s\:jse { justify-self: end }
84
- .s\:jsc { justify-self: center }
85
- .s\:jsstr { justify-self: stretch }
86
- .s\:ass { align-self: start }
87
- .s\:ase { align-self: end }
88
- .s\:asc { align-self: center }
89
- .s\:asstr { align-self: stretch }
90
- }
91
-
92
- @media (min-width: 768px) {
93
- .m\:jss { justify-self: start }
94
- .m\:jse { justify-self: end }
95
- .m\:jsc { justify-self: center }
96
- .m\:jsstr { justify-self: stretch }
97
- .m\:ass { align-self: start }
98
- .m\:ase { align-self: end }
99
- .m\:asc { align-self: center }
100
- .m\:asstr { align-self: stretch }
101
- }
102
-
103
- @media (min-width: 1024px) {
104
- .l\:jss { justify-self: start }
105
- .l\:jse { justify-self: end }
106
- .l\:jsc { justify-self: center }
107
- .l\:jsstr { justify-self: stretch }
108
- .l\:ass { align-self: start }
109
- .l\:ase { align-self: end }
110
- .l\:asc { align-self: center }
111
- .l\:asstr { align-self: stretch }
112
- }
113
-
74
+
75
+ .jss { justify-self: start }
76
+ .jse { justify-self: end }
77
+ .jsc { justify-self: center }
78
+ .jsstr { justify-self: stretch }
79
+ .ass { align-self: start }
80
+ .ase { align-self: end }
81
+ .asc { align-self: center }
82
+ .asstr { align-self: stretch }
83
+
84
+ @media (min-width: 640px) {
85
+ .s\:jss { justify-self: start }
86
+ .s\:jse { justify-self: end }
87
+ .s\:jsc { justify-self: center }
88
+ .s\:jsstr { justify-self: stretch }
89
+ .s\:ass { align-self: start }
90
+ .s\:ase { align-self: end }
91
+ .s\:asc { align-self: center }
92
+ .s\:asstr { align-self: stretch }
93
+ }
94
+
95
+ @media (min-width: 768px) {
96
+ .m\:jss { justify-self: start }
97
+ .m\:jse { justify-self: end }
98
+ .m\:jsc { justify-self: center }
99
+ .m\:jsstr { justify-self: stretch }
100
+ .m\:ass { align-self: start }
101
+ .m\:ase { align-self: end }
102
+ .m\:asc { align-self: center }
103
+ .m\:asstr { align-self: stretch }
104
+ }
105
+
106
+ @media (min-width: 1024px) {
107
+ .l\:jss { justify-self: start }
108
+ .l\:jse { justify-self: end }
109
+ .l\:jsc { justify-self: center }
110
+ .l\:jsstr { justify-self: stretch }
111
+ .l\:ass { align-self: start }
112
+ .l\:ase { align-self: end }
113
+ .l\:asc { align-self: center }
114
+ .l\:asstr { align-self: stretch }
115
+ }
116
+
117
+
118
+ @media (min-width: 1280px) {
119
+ .xl\:jss { justify-self: start }
120
+ .xl\:jse { justify-self: end }
121
+ .xl\:jsc { justify-self: center }
122
+ .xl\:jsstr { justify-self: stretch }
123
+ .xl\:ass { align-self: start }
124
+ .xl\:ase { align-self: end }
125
+ .xl\:asc { align-self: center }
126
+ .xl\:asstr { align-self: stretch }
127
+ }
114
128
 
115
- @media (min-width: 1280px) {
116
- .xl\:jss { justify-self: start }
117
- .xl\:jse { justify-self: end }
118
- .xl\:jsc { justify-self: center }
119
- .xl\:jsstr { justify-self: stretch }
120
- .xl\:ass { align-self: start }
121
- .xl\:ase { align-self: end }
122
- .xl\:asc { align-self: center }
123
- .xl\:asstr { align-self: stretch }
124
129
  }