@andreyshpigunov/x 0.5.0 → 0.5.2

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 (25) hide show
  1. package/assets/css/app.css +1 -1
  2. package/assets/js/app.js +1 -1
  3. package/dist/x.css +1 -1
  4. package/index.html +1 -1
  5. package/package.json +2 -2
  6. package/src/components/x/buttons.css +182 -178
  7. package/src/components/x/colors.css +51 -47
  8. package/src/components/x/dropdown.css +127 -123
  9. package/src/components/x/flex.css +141 -137
  10. package/src/components/x/flow.css +35 -31
  11. package/src/components/x/form.css +97 -93
  12. package/src/components/x/grid.css +99 -94
  13. package/src/components/x/helpers.css +912 -909
  14. package/src/components/x/icons.css +39 -35
  15. package/src/components/x/links.css +58 -54
  16. package/src/components/x/modal.css +218 -214
  17. package/src/components/x/reset.css +166 -162
  18. package/src/components/x/scroll.css +72 -68
  19. package/src/components/x/sheets.css +6 -2
  20. package/src/components/x/slider.css +74 -70
  21. package/src/components/x/space.css +30 -26
  22. package/src/components/x/sticky.css +18 -14
  23. package/src/components/x/typo.css +208 -205
  24. package/src/css/x.css +4 -1
  25. package/src/js/app.js +2 -2
package/src/components/x/form.css CHANGED
@@ -36,103 +36,107 @@ All right reserved.
36
36
  */
37
37
  }
38
38
 
39
- input[type="color"],
40
- input[type="date"],
41
- input[type="datetime"],
42
- input[type="tel"],
43
- input[type="email"],
44
- input[type="month"],
45
- input[type="number"],
46
- input[type="password"],
47
- input[type="search"],
48
- input[type="text"],
49
- input[type="time"],
50
- input[type="url"],
51
- input[type="week"],
52
- input:not([type]),
53
- textarea,
54
- select {
55
- position: relative;
56
- width: 100%;
57
- height: var(--form-height);
58
- height: var(--form-height, calc(var(--form-font-size) * var(--form-height-coeff)));
59
- margin: 0;
60
- padding: 0 var(--form-side-padding);
61
- font-size: var(--form-font-size);
62
- color: var(--form-font-color);
63
- outline: none;
64
- border-width: var(--form-border-width);
65
- border-style: solid;
66
- border-color: var(--form-border-color);
67
- border-radius: var(--form-border-radius);
68
- background-color: var(--form-background-color);
69
- appearance: none;
70
-
71
- &[readonly],
72
- &[readonly]:focus {
73
- color: var(--form-font-color-readonly);
74
- border-color: var(--form-border-color-readonly);
75
- background-color: var(--form-background-color-readonly);
76
- box-shadow: none;
39
+ @layer form {
40
+
41
+ input[type="color"],
42
+ input[type="date"],
43
+ input[type="datetime"],
44
+ input[type="tel"],
45
+ input[type="email"],
46
+ input[type="month"],
47
+ input[type="number"],
48
+ input[type="password"],
49
+ input[type="search"],
50
+ input[type="text"],
51
+ input[type="time"],
52
+ input[type="url"],
53
+ input[type="week"],
54
+ input:not([type]),
55
+ textarea,
56
+ select {
57
+ position: relative;
58
+ width: 100%;
59
+ height: var(--form-height);
60
+ height: var(--form-height, calc(var(--form-font-size) * var(--form-height-coeff)));
61
+ margin: 0;
62
+ padding: 0 var(--form-side-padding);
63
+ font-size: var(--form-font-size);
64
+ color: var(--form-font-color);
65
+ outline: none;
66
+ border-width: var(--form-border-width);
67
+ border-style: solid;
68
+ border-color: var(--form-border-color);
69
+ border-radius: var(--form-border-radius);
70
+ background-color: var(--form-background-color);
71
+ appearance: none;
72
+
73
+ &[readonly],
74
+ &[readonly]:focus {
75
+ color: var(--form-font-color-readonly);
76
+ border-color: var(--form-border-color-readonly);
77
+ background-color: var(--form-background-color-readonly);
78
+ box-shadow: none;
79
+ }
80
+ &[disabled],
81
+ &[disabled]:focus {
82
+ color: var(--form-font-color-disabled);
83
+ border-color: var(--form-border-color-disabled);
84
+ background-color: var(--form-background-color-disabled);
85
+ cursor: not-allowed;
86
+ box-shadow: none;
87
+ }
88
+
89
+ &:focus {
90
+ border-color: var(--form-border-color-focused);
91
+ box-shadow: 0 0 0 1px var(--form-border-color-focused);
92
+ }
93
+ &.error,
94
+ &.error:focus,
95
+ &[pattern]:invalid,
96
+ &[pattern]:invalid:focus {
97
+ border-color: var(--form-border-color-error);
98
+ box-shadow: 0 0 0 1px var(--form-border-color-error);
99
+ }
100
+ }
101
+
102
+ select {
103
+ padding-right: calc(var(--form-side-padding) * 2.6);
104
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
105
+ background-position: right calc(var(--form-side-padding) - 4px) top 52%, 0 0;
106
+ background-repeat: no-repeat;
107
+ background-size: 1.6rem;
77
108
  }
78
- &[disabled],
79
- &[disabled]:focus {
80
- color: var(--form-font-color-disabled);
81
- border-color: var(--form-border-color-disabled);
82
- background-color: var(--form-background-color-disabled);
83
- cursor: not-allowed;
109
+
110
+ ::placeholder {
111
+ color: var(--form-font-color-placeholder);
112
+ }
113
+
114
+ input[placeholder],
115
+ input::-moz-placeholder,
116
+ input:-moz-placeholder,
117
+ input:-ms-input-placeholder {
118
+ text-overflow: ellipsis;
119
+ }
120
+
121
+ input,
122
+ textarea,
123
+ select,
124
+ button {
125
+ max-width: var(--form-width);
126
+ font-family: inherit;
127
+ font-size: var(--font-size);
128
+ box-sizing: border-box;
84
129
  box-shadow: none;
85
130
  }
86
-
87
- &:focus {
88
- border-color: var(--form-border-color-focused);
89
- box-shadow: 0 0 0 1px var(--form-border-color-focused);
131
+
132
+ textarea {
133
+ height: auto;
134
+ padding-top: calc(var(--form-side-padding) / 2);
135
+ padding-bottom: calc(var(--form-side-padding) / 2);
90
136
  }
91
- &.error,
92
- &.error:focus,
93
- &[pattern]:invalid,
94
- &[pattern]:invalid:focus {
95
- border-color: var(--form-border-color-error);
96
- box-shadow: 0 0 0 1px var(--form-border-color-error);
137
+
138
+ ::-webkit-file-upload-button {
139
+ cursor:pointer;
97
140
  }
98
- }
99
-
100
- select {
101
- padding-right: calc(var(--form-side-padding) * 2.6);
102
- background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='lucide lucide-chevrons-up-down-icon lucide-chevrons-up-down'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E");
103
- background-position: right calc(var(--form-side-padding) - 4px) top 52%, 0 0;
104
- background-repeat: no-repeat;
105
- background-size: 1.6rem;
106
- }
107
-
108
- ::placeholder {
109
- color: var(--form-font-color-placeholder);
110
- }
111
-
112
- input[placeholder],
113
- input::-moz-placeholder,
114
- input:-moz-placeholder,
115
- input:-ms-input-placeholder {
116
- text-overflow: ellipsis;
117
- }
118
-
119
- input,
120
- textarea,
121
- select,
122
- button {
123
- max-width: var(--form-width);
124
- font-family: inherit;
125
- font-size: var(--font-size);
126
- box-sizing: border-box;
127
- box-shadow: none;
128
- }
129
-
130
- textarea {
131
- height: auto;
132
- padding-top: calc(var(--form-side-padding) / 2);
133
- padding-bottom: calc(var(--form-side-padding) / 2);
134
- }
135
141
 
136
- ::-webkit-file-upload-button {
137
- cursor:pointer;
138
142
  }
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
  }