@andreyshpigunov/x 0.5.0 → 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.
@@ -11,40 +11,44 @@ All right reserved.
11
11
  .space[0-10] (s,m,l,xl) - vertical space
12
12
  */
13
13
 
14
- @for $i from 0 to 10 {
15
- .space$(i) {
16
- height: var(--space-$(i));
17
- }
18
- }
19
-
20
- @media (min-width: 640px) {
14
+ @layer space {
15
+
21
16
  @for $i from 0 to 10 {
22
- .s\:space$(i) {
17
+ .space$(i) {
23
18
  height: var(--space-$(i));
24
19
  }
25
20
  }
26
- }
27
-
28
- @media (min-width: 768px) {
29
- @for $i from 0 to 10 {
30
- .m\:space$(i) {
31
- height: var(--space-$(i));
21
+
22
+ @media (min-width: 640px) {
23
+ @for $i from 0 to 10 {
24
+ .s\:space$(i) {
25
+ height: var(--space-$(i));
26
+ }
32
27
  }
33
28
  }
34
- }
35
-
36
- @media (min-width: 1024px) {
37
- @for $i from 0 to 10 {
38
- .l\:space$(i) {
39
- height: var(--space-$(i));
29
+
30
+ @media (min-width: 768px) {
31
+ @for $i from 0 to 10 {
32
+ .m\:space$(i) {
33
+ height: var(--space-$(i));
34
+ }
40
35
  }
41
36
  }
42
- }
43
-
44
- @media (min-width: 1280px) {
45
- @for $i from 0 to 10 {
46
- .xl\:space$(i) {
47
- height: var(--space-$(i));
37
+
38
+ @media (min-width: 1024px) {
39
+ @for $i from 0 to 10 {
40
+ .l\:space$(i) {
41
+ height: var(--space-$(i));
42
+ }
43
+ }
44
+ }
45
+
46
+ @media (min-width: 1280px) {
47
+ @for $i from 0 to 10 {
48
+ .xl\:space$(i) {
49
+ height: var(--space-$(i));
50
+ }
48
51
  }
49
52
  }
53
+
50
54
  }
@@ -9,18 +9,22 @@ All right reserved.
9
9
 
10
10
  /* .sticky (s,m,l,xl) */
11
11
 
12
- .sticky {
13
- position: sticky;
14
- }
15
- @media (max-width: 640px) {
16
- .s\:sticky { position: sticky }
17
- }
18
- @media (min-width: 768px) {
19
- .m\:sticky { position: sticky }
20
- }
21
- @media (min-width: 1024px) {
22
- .l\:sticky { position: sticky }
23
- }
24
- @media (min-width: 1280px) {
25
- .xl\:sticky { position: sticky }
12
+ @layer sticky {
13
+
14
+ .sticky {
15
+ position: sticky;
16
+ }
17
+ @media (max-width: 640px) {
18
+ .s\:sticky { position: sticky }
19
+ }
20
+ @media (min-width: 768px) {
21
+ .m\:sticky { position: sticky }
22
+ }
23
+ @media (min-width: 1024px) {
24
+ .l\:sticky { position: sticky }
25
+ }
26
+ @media (min-width: 1280px) {
27
+ .xl\:sticky { position: sticky }
28
+ }
29
+
26
30
  }
@@ -55,235 +55,238 @@ All right reserved.
55
55
  --table-header-font-weight: 700;
56
56
  }
57
57
 
58
-
59
- /* !- Headers */
60
-
61
- h1, .h1,
62
- h2, .h2,
63
- h3, .h3,
64
- h4, .h4,
65
- h5, .h5,
66
- h6, .h6 {
67
- margin-top: 0;
68
- margin-bottom: var(--headers-margin-bottom);
69
- font-family: var(--headers-font-family);
70
- font-weight: var(--headers-font-weight);
71
- color: var(--headers-font-color);
72
- }
73
- * + h2, * + .h2,
74
- * + h3, * + .h3,
75
- * + h4, * + .h4,
76
- * + h5, * + .h5,
77
- * + h6, * + .h6 {
78
- margin-top: var(--headers-margin-top);
79
- }
80
-
81
- h1, .h1 {
82
- line-height: var(--h1-line-height);
83
- font-size: var(--h1-font-size);
84
- }
85
- h2, .h2 {
86
- line-height: var(--h2-line-height);
87
- font-size: var(--h2-font-size);
88
- }
89
- h3, .h3 {
90
- line-height: var(--h3-line-height);
91
- font-size: var(--h3-font-size);
92
- }
93
- h4, .h4 { font-size: var(--h4-font-size) }
94
- h5, .h5 { font-size: var(--h5-font-size) }
95
- h6, .h6 { font-size: var(--h6-font-size) }
96
-
97
-
98
- /* !- Paragraph */
99
-
100
- p {
101
- margin: var(--paragraph-margin) 0;
102
- font-style: inherit;
58
+ @layer typo {
103
59
 
104
- &:first-child { margin-top: 0 }
105
- &:last-child { margin-bottom: 0 }
106
- }
107
-
108
-
109
- /* !- Figure */
110
-
111
- figure {
112
- margin: var(--figure-margin);
113
- }
114
- figcaption {
115
- margin-top: var(--figcaption-margin-top);
116
- /* Negative margin pulls next block closer (optical balance) */
117
- margin-bottom: calc(var(--figcaption-margin-top) * -1);
118
- font-size: var(--figcaption-font-size);
119
- color: var(--figcaption-color);
120
- }
121
-
122
-
123
- /* !- Blockquote */
124
-
125
- blockquote {
126
- margin: var(--blockquote-margin);
127
- padding: var(--blockquote-padding);
128
- font-style: var(--blockquote-font-style);
129
- hyphens: auto;
130
- border-left: var(--blockquote-border);
131
- }
132
-
133
-
134
- /* !- Preformatted */
135
-
136
- pre {
137
- margin: var(--paragraph-margin) 0;
138
- font-family: var(--font-family-mono, monospace);
139
- }
140
-
141
-
142
- /* !- Lists */
143
-
144
- ul,
145
- ol,
146
- dl {
147
- margin: var(--paragraph-margin) 0;
148
- padding-left: calc(var(--paragraph-margin) * 1.5);
149
-
150
- & ul,
151
- & ol,
152
- & dl,
153
- & li {
154
- margin: var(--space-1) 0;
60
+ /* !- Headers */
61
+
62
+ h1, .h1,
63
+ h2, .h2,
64
+ h3, .h3,
65
+ h4, .h4,
66
+ h5, .h5,
67
+ h6, .h6 {
68
+ margin-top: 0;
69
+ margin-bottom: var(--headers-margin-bottom);
70
+ font-family: var(--headers-font-family);
71
+ font-weight: var(--headers-font-weight);
72
+ color: var(--headers-font-color);
73
+ }
74
+ * + h2, * + .h2,
75
+ * + h3, * + .h3,
76
+ * + h4, * + .h4,
77
+ * + h5, * + .h5,
78
+ * + h6, * + .h6 {
79
+ margin-top: var(--headers-margin-top);
155
80
  }
156
- }
157
- dl {
158
- padding-left: 0;
159
81
 
160
- & dt,
161
- & dd { margin: var(--space-1) 0 }
162
- & dt { font-weight: bold }
163
- }
164
-
165
-
166
- /* !- Table */
167
-
168
- table {
169
- border-collapse: collapse;
170
- border-spacing: 0;
171
-
172
- & caption {
173
- margin-bottom: var(--space-1);
174
- padding: 0 var(--space-3);
175
- font-weight: var(--table-caption-font-weight);
176
- text-align: left;
82
+ h1, .h1 {
83
+ line-height: var(--h1-line-height);
84
+ font-size: var(--h1-font-size);
177
85
  }
178
- & tr th {
179
- font-weight: var(--table-header-font-weight);
86
+ h2, .h2 {
87
+ line-height: var(--h2-line-height);
88
+ font-size: var(--h2-font-size);
180
89
  }
181
- & tr th,
182
- & tr td {
183
- padding: var(--table-padding);
184
- border: var(--table-border);
185
- vertical-align: top;
90
+ h3, .h3 {
91
+ line-height: var(--h3-line-height);
92
+ font-size: var(--h3-font-size);
186
93
  }
187
- }
188
-
189
-
190
- /* !- Font styles */
191
-
192
- .mono { font-family: var(--font-family-mono, monospace) }
193
- .italic { font-style: italic }
194
- .strike { text-decoration: line-through }
195
-
196
-
197
- /* !- Font sizes */
198
-
199
- @for $i from 10 to 19 {
200
- .fs$(i) { font-size: calc($(i)rem / 10) }
201
- }
202
- @for $i from 20 to 64 by 2 {
203
- .fs$(i) { font-size: calc($(i)rem / 10) }
204
- }
205
- @for $i from 100 to 900 by 100 {
206
- .fw$(i) { font-weight: $(i) }
207
- }
208
-
209
- @media (min-width: 768px) {
210
- @for $i from 10 to 19 {
211
- .m\:fs$(i) { font-size: calc($(i)rem / 10) }
94
+ h4, .h4 { font-size: var(--h4-font-size) }
95
+ h5, .h5 { font-size: var(--h5-font-size) }
96
+ h6, .h6 { font-size: var(--h6-font-size) }
97
+
98
+
99
+ /* !- Paragraph */
100
+
101
+ p {
102
+ margin: var(--paragraph-margin) 0;
103
+ font-style: inherit;
104
+
105
+ &:first-child { margin-top: 0 }
106
+ &:last-child { margin-bottom: 0 }
212
107
  }
213
- @for $i from 20 to 64 by 2 {
214
- .m\:fs$(i) { font-size: calc($(i)rem / 10) }
108
+
109
+
110
+ /* !- Figure */
111
+
112
+ figure {
113
+ margin: var(--figure-margin);
215
114
  }
216
- @for $i from 100 to 900 by 100 {
217
- .m\:fw$(i) { font-weight: $(i) }
115
+ figcaption {
116
+ margin-top: var(--figcaption-margin-top);
117
+ /* Negative margin pulls next block closer (optical balance) */
118
+ margin-bottom: calc(var(--figcaption-margin-top) * -1);
119
+ font-size: var(--figcaption-font-size);
120
+ color: var(--figcaption-color);
218
121
  }
219
- }
220
-
221
- @media (min-width: 1024px) {
222
- @for $i from 10 to 19 {
223
- .l\:fs$(i) { font-size: calc($(i)rem / 10) }
122
+
123
+
124
+ /* !- Blockquote */
125
+
126
+ blockquote {
127
+ margin: var(--blockquote-margin);
128
+ padding: var(--blockquote-padding);
129
+ font-style: var(--blockquote-font-style);
130
+ hyphens: auto;
131
+ border-left: var(--blockquote-border);
224
132
  }
225
- @for $i from 20 to 64 by 2 {
226
- .l\:fs$(i) { font-size: calc($(i)rem / 10) }
133
+
134
+
135
+ /* !- Preformatted */
136
+
137
+ pre {
138
+ margin: var(--paragraph-margin) 0;
139
+ font-family: var(--font-family-mono, monospace);
227
140
  }
228
- @for $i from 100 to 900 by 100 {
229
- .l\:fw$(i) { font-weight: $(i) }
141
+
142
+
143
+ /* !- Lists */
144
+
145
+ ul,
146
+ ol,
147
+ dl {
148
+ margin: var(--paragraph-margin) 0;
149
+ padding-left: calc(var(--paragraph-margin) * 1.5);
150
+
151
+ & ul,
152
+ & ol,
153
+ & dl,
154
+ & li {
155
+ margin: var(--space-1) 0;
156
+ }
230
157
  }
231
- }
232
-
233
- @media (min-width: 1280px) {
158
+ dl {
159
+ padding-left: 0;
160
+
161
+ & dt,
162
+ & dd { margin: var(--space-1) 0 }
163
+ & dt { font-weight: bold }
164
+ }
165
+
166
+
167
+ /* !- Table */
168
+
169
+ table {
170
+ border-collapse: collapse;
171
+ border-spacing: 0;
172
+
173
+ & caption {
174
+ margin-bottom: var(--space-1);
175
+ padding: 0 var(--space-3);
176
+ font-weight: var(--table-caption-font-weight);
177
+ text-align: left;
178
+ }
179
+ & tr th {
180
+ font-weight: var(--table-header-font-weight);
181
+ }
182
+ & tr th,
183
+ & tr td {
184
+ padding: var(--table-padding);
185
+ border: var(--table-border);
186
+ vertical-align: top;
187
+ }
188
+ }
189
+
190
+
191
+ /* !- Font styles */
192
+
193
+ .mono { font-family: var(--font-family-mono, monospace) }
194
+ .italic { font-style: italic }
195
+ .strike { text-decoration: line-through }
196
+
197
+
198
+ /* !- Font sizes */
199
+
234
200
  @for $i from 10 to 19 {
235
- .xl\:fs$(i) { font-size: calc($(i)rem / 10) }
201
+ .fs$(i) { font-size: calc($(i)rem / 10) }
236
202
  }
237
203
  @for $i from 20 to 64 by 2 {
238
- .xl\:fs$(i) { font-size: calc($(i)rem / 10) }
204
+ .fs$(i) { font-size: calc($(i)rem / 10) }
239
205
  }
240
206
  @for $i from 100 to 900 by 100 {
241
- .xl\:fw$(i) { font-weight: $(i) }
207
+ .fw$(i) { font-weight: $(i) }
242
208
  }
243
- }
244
-
245
-
246
- /* !- Letter spacing */
247
-
248
- @for $i from 0 to 4 {
249
- .ls$(i) { letter-spacing: calc($(i)em * 0.625) }
250
- }
251
-
252
- @media (min-width: 768px) {
253
- @for $i from 0 to 4 {
254
- .m\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
209
+
210
+ @media (min-width: 768px) {
211
+ @for $i from 10 to 19 {
212
+ .m\:fs$(i) { font-size: calc($(i)rem / 10) }
213
+ }
214
+ @for $i from 20 to 64 by 2 {
215
+ .m\:fs$(i) { font-size: calc($(i)rem / 10) }
216
+ }
217
+ @for $i from 100 to 900 by 100 {
218
+ .m\:fw$(i) { font-weight: $(i) }
219
+ }
255
220
  }
256
- }
257
- @media (min-width: 1024px) {
258
- @for $i from 0 to 4 {
259
- .l\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
221
+
222
+ @media (min-width: 1024px) {
223
+ @for $i from 10 to 19 {
224
+ .l\:fs$(i) { font-size: calc($(i)rem / 10) }
225
+ }
226
+ @for $i from 20 to 64 by 2 {
227
+ .l\:fs$(i) { font-size: calc($(i)rem / 10) }
228
+ }
229
+ @for $i from 100 to 900 by 100 {
230
+ .l\:fw$(i) { font-weight: $(i) }
231
+ }
260
232
  }
261
- }
262
- @media (min-width: 1280px) {
233
+
234
+ @media (min-width: 1280px) {
235
+ @for $i from 10 to 19 {
236
+ .xl\:fs$(i) { font-size: calc($(i)rem / 10) }
237
+ }
238
+ @for $i from 20 to 64 by 2 {
239
+ .xl\:fs$(i) { font-size: calc($(i)rem / 10) }
240
+ }
241
+ @for $i from 100 to 900 by 100 {
242
+ .xl\:fw$(i) { font-weight: $(i) }
243
+ }
244
+ }
245
+
246
+
247
+ /* !- Letter spacing */
248
+
263
249
  @for $i from 0 to 4 {
264
- .xl\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
250
+ .ls$(i) { letter-spacing: calc($(i)em * 0.625) }
265
251
  }
266
- }
267
-
268
-
269
- /* !- Line height */
270
-
271
- @for $i from 0 to 9 {
272
- .lh$(i) { line-height: 1.$(i) }
273
- }
274
-
275
- @media (min-width: 768px) {
276
- @for $i from 0 to 9 {
277
- .m\:lh$(i) { line-height: 1.$(i) }
252
+
253
+ @media (min-width: 768px) {
254
+ @for $i from 0 to 4 {
255
+ .m\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
256
+ }
278
257
  }
279
- }
280
- @media (min-width: 1024px) {
281
- @for $i from 0 to 9 {
282
- .l\:lh$(i) { line-height: 1.$(i) }
258
+ @media (min-width: 1024px) {
259
+ @for $i from 0 to 4 {
260
+ .l\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
261
+ }
283
262
  }
284
- }
285
- @media (min-width: 1280px) {
263
+ @media (min-width: 1280px) {
264
+ @for $i from 0 to 4 {
265
+ .xl\:ls$(i) { letter-spacing: calc($(i)em * 0.625) }
266
+ }
267
+ }
268
+
269
+
270
+ /* !- Line height */
271
+
286
272
  @for $i from 0 to 9 {
287
- .xl\:lh$(i) { line-height: 1.$(i) }
273
+ .lh$(i) { line-height: 1.$(i) }
274
+ }
275
+
276
+ @media (min-width: 768px) {
277
+ @for $i from 0 to 9 {
278
+ .m\:lh$(i) { line-height: 1.$(i) }
279
+ }
288
280
  }
281
+ @media (min-width: 1024px) {
282
+ @for $i from 0 to 9 {
283
+ .l\:lh$(i) { line-height: 1.$(i) }
284
+ }
285
+ }
286
+ @media (min-width: 1280px) {
287
+ @for $i from 0 to 9 {
288
+ .xl\:lh$(i) { line-height: 1.$(i) }
289
+ }
290
+ }
291
+
289
292
  }
package/src/css/x.css CHANGED
@@ -7,6 +7,8 @@ All right reserved.
7
7
  ----------------------------------------*/
8
8
 
9
9
 
10
+ @layer reset, space, links, grid, flex, flow, form, buttons, dropdown, sheets, slider, sticky, modal, scroll, icons, typo, helpers, colors;
11
+
10
12
  @import "../components/x/reset.css";
11
13
  @import "../components/x/space.css";
12
14
  @import "../components/x/links.css";
@@ -27,6 +29,7 @@ All right reserved.
27
29
  @import "../components/x/helpers.css";
28
30
  @import "../components/x/colors.css";
29
31
 
32
+
30
33
  /*
31
34
  .button
32
35
  .button_label