@andreyshpigunov/x 0.3.89 → 0.4.0

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