@andreyshpigunov/x 0.4.4 → 0.5.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 (21) 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 +24 -24
  10. package/src/components/x/colors.css +18 -0
  11. package/src/components/x/dropdown.css +5 -5
  12. package/src/components/x/dropdown.js +19 -19
  13. package/src/components/x/helpers.css +10 -10
  14. package/src/components/x/icons.css +10 -10
  15. package/src/components/x/lib.js +4 -4
  16. package/src/components/x/links.css +10 -10
  17. package/src/components/x/modal.css +26 -26
  18. package/src/components/x/modal.js +23 -23
  19. package/src/components/x/scroll.css +14 -12
  20. package/src/components/x/sticky.js +5 -5
  21. package/src/css/x.css +17 -17
package/src/components/x/scroll.css CHANGED
@@ -9,9 +9,11 @@ All right reserved.
9
9
 
10
10
  /*
11
11
  .scroll
12
- .scroll--contain
13
- .scroll--x-proximity
14
- .scroll--x-mandatory
12
+ .scroll_x
13
+ .scroll_y
14
+ .scroll_contain
15
+ .scroll_x-proximity
16
+ .scroll_x-mandatory
15
17
  */
16
18
 
17
19
  :root {
@@ -61,38 +63,38 @@ All right reserved.
61
63
  }
62
64
  }
63
65
 
64
- .scroll.scroll--x {
66
+ .scroll_x {
65
67
  overflow-x: scroll;
66
68
  overflow-y: hidden;
67
69
  touch-action: pan-x;
68
70
  }
69
71
 
70
- .scroll.scroll--y {
72
+ .scroll_y {
71
73
  overflow-x: hidden;
72
74
  overflow-y: scroll;
73
75
  touch-action: pan-y;
74
76
  }
75
77
 
76
- .scroll--contain {
78
+ .scroll_contain {
77
79
  overscroll-behavior: contain;
78
80
  }
79
81
 
80
- .scroll--x-proximity {
82
+ .scroll_x-proximity {
81
83
  scroll-snap-type: x proximity;
82
84
  }
83
- .scroll--x-mandatory {
85
+ .scroll_x-mandatory {
84
86
  scroll-snap-type: x mandatory;
85
87
  }
86
88
 
87
- .scroll--x-proximity,
88
- .scroll--x-mandatory {
89
+ .scroll_x-proximity,
90
+ .scroll_x-mandatory {
89
91
  & > * {
90
92
  scroll-snap-align: start;
91
93
  }
92
- &.scroll--align-center > * {
94
+ &.scroll_align-center > * {
93
95
  scroll-snap-align: center;
94
96
  }
95
- &.scroll--align-end > * {
97
+ &.scroll_align-end > * {
96
98
  scroll-snap-align: end;
97
99
  }
98
100
  }
package/src/components/x/sticky.js CHANGED
@@ -23,7 +23,7 @@
23
23
  * top: 0;
24
24
  * z-index: 100;
25
25
  * }
26
- * .sticky.sticky--on {
26
+ * .sticky.sticky_on {
27
27
  * box-shadow: 0 2px 4px rgba(0,0,0,0.1);
28
28
  * }
29
29
  *
@@ -76,7 +76,7 @@
76
76
  * CSS classes:
77
77
  *
78
78
  * - `.sticky` - Required class to mark element for observation
79
- * - `.sticky--on` - Added when element is in sticky state (not fully visible)
79
+ * - `.sticky_on` - Added when element is in sticky state (not fully visible)
80
80
  * - Removed when element returns to normal flow
81
81
  *
82
82
  * How it works:
@@ -85,7 +85,7 @@
85
85
  * 2. Uses threshold: 1 (element must be fully visible)
86
86
  * 3. Uses rootMargin: '-1px 0px 0px 0px' (triggers when top edge leaves viewport)
87
87
  * 4. When intersectionRatio < 1, element is sticky
88
- * 5. Toggles `sticky--on` class and dispatches events
88
+ * 5. Toggles `sticky_on` class and dispatches events
89
89
  *
90
90
  * Observer configuration:
91
91
  *
@@ -122,7 +122,7 @@
122
122
  * //
123
123
  * // <style>
124
124
  * // .sticky { position: sticky; top: 0; z-index: 100; }
125
- * // .sticky.sticky--on { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
125
+ * // .sticky.sticky_on { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
126
126
  * // </style>
127
127
  * //
128
128
  * // <script type="module">
@@ -150,7 +150,7 @@ class Sticky {
150
150
  * Class to apply when sticky state is active.
151
151
  * @type {string}
152
152
  */
153
- this.activeClass = 'sticky--on';
153
+ this.activeClass = 'sticky_on';
154
154
 
155
155
  /**
156
156
  * Root margin for IntersectionObserver.
package/src/css/x.css CHANGED
@@ -29,15 +29,15 @@ All right reserved.
29
29
 
30
30
  /*
31
31
  .button
32
- .button--label
33
- .button--primary
34
- .button--success
35
- .button--warning
36
- .button--danger
37
- .button--white
38
- .button--black
39
- .button--clear
40
- .button--dropdown
32
+ .button_label
33
+ .button_primary
34
+ .button_success
35
+ .button_warning
36
+ .button_danger
37
+ .button_white
38
+ .button_black
39
+ .button_clear
40
+ .button_dropdown
41
41
  .buttons-group
42
42
  */
43
43
 
@@ -197,18 +197,18 @@ All right reserved.
197
197
  a.link
198
198
  a.hover
199
199
  a.active
200
- a.link--noline
201
- a.link--underline
202
- a.link--dashed
203
- a.link--dotted
204
- a.link--wavy
200
+ a.link_noline
201
+ a.link_underline
202
+ a.link_dashed
203
+ a.link_dotted
204
+ a.link_wavy
205
205
  */
206
206
 
207
207
  /*
208
208
  .scroll
209
- .scroll--contain
210
- .scroll--x-proximity
211
- .scroll--x-mandatory
209
+ .scroll_contain
210
+ .scroll_x-proximity
211
+ .scroll_x-mandatory
212
212
  */
213
213
 
214
214
  /*