@ozen-ui/kit 0.3.0 → 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.
- package/__inner__/cjs/components/Container/Container.css +4 -4
- package/__inner__/cjs/components/Grid/Grid.css +398 -8
- package/__inner__/cjs/components/Grid/Grid.d.ts +4 -0
- package/__inner__/cjs/components/Grid/Grid.js +3 -2
- package/__inner__/cjs/components/Grid/constants.d.ts +3 -0
- package/__inner__/cjs/components/Grid/constants.js +6 -0
- package/__inner__/cjs/components/Segment/components/SegmentItem.d.ts +2 -2
- package/__inner__/cjs/components/Skeleton/Skeleton.css +1 -1
- package/__inner__/cjs/components/Stack/Stack.css +4 -4
- package/__inner__/esm/components/Container/Container.css +4 -4
- package/__inner__/esm/components/Grid/Grid.css +398 -8
- package/__inner__/esm/components/Grid/Grid.d.ts +4 -0
- package/__inner__/esm/components/Grid/Grid.js +3 -2
- package/__inner__/esm/components/Grid/constants.d.ts +3 -0
- package/__inner__/esm/components/Grid/constants.js +3 -0
- package/__inner__/esm/components/Segment/components/SegmentItem.d.ts +2 -2
- package/__inner__/esm/components/Skeleton/Skeleton.css +1 -1
- package/__inner__/esm/components/Stack/Stack.css +4 -4
- package/package.json +1 -1
- package/useListState/package.json +0 -5
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
.Container_gutters_2xl {
|
|
45
45
|
padding: 0 var(--space-2xl);
|
|
46
46
|
}
|
|
47
|
-
@media (width
|
|
47
|
+
@media (min-width: 0) {
|
|
48
48
|
.Container_gutters_xs_xs {
|
|
49
49
|
padding: 0 var(--space-xs);
|
|
50
50
|
}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
max-inline-size: 100%;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
@media (width
|
|
79
|
+
@media (min-width: 640px) {
|
|
80
80
|
.Container_gutters_s_xs {
|
|
81
81
|
padding: 0 var(--space-xs);
|
|
82
82
|
}
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
max-inline-size: 100%;
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
@media (width
|
|
111
|
+
@media (min-width: 1024px) {
|
|
112
112
|
.Container_gutters_m_xs {
|
|
113
113
|
padding: 0 var(--space-xs);
|
|
114
114
|
}
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
max-inline-size: 100%;
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
|
-
@media (width
|
|
143
|
+
@media (min-width: 1280px) {
|
|
144
144
|
.Container_gutters_l_xs {
|
|
145
145
|
padding: 0 var(--space-xs);
|
|
146
146
|
}
|
|
@@ -80,7 +80,85 @@
|
|
|
80
80
|
.Grid_gap_8xl {
|
|
81
81
|
grid-gap: var(--space-8xl);
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
.Grid_colGap_0 {
|
|
84
|
+
grid-column-gap: 0;
|
|
85
|
+
}
|
|
86
|
+
.Grid_colGap_xs {
|
|
87
|
+
grid-column-gap: var(--space-xs);
|
|
88
|
+
}
|
|
89
|
+
.Grid_colGap_s {
|
|
90
|
+
grid-column-gap: var(--space-s);
|
|
91
|
+
}
|
|
92
|
+
.Grid_colGap_m {
|
|
93
|
+
grid-column-gap: var(--space-m);
|
|
94
|
+
}
|
|
95
|
+
.Grid_colGap_l {
|
|
96
|
+
grid-column-gap: var(--space-l);
|
|
97
|
+
}
|
|
98
|
+
.Grid_colGap_xl {
|
|
99
|
+
grid-column-gap: var(--space-xl);
|
|
100
|
+
}
|
|
101
|
+
.Grid_colGap_2xl {
|
|
102
|
+
grid-column-gap: var(--space-2xl);
|
|
103
|
+
}
|
|
104
|
+
.Grid_colGap_3xl {
|
|
105
|
+
grid-column-gap: var(--space-3xl);
|
|
106
|
+
}
|
|
107
|
+
.Grid_colGap_4xl {
|
|
108
|
+
grid-column-gap: var(--space-4xl);
|
|
109
|
+
}
|
|
110
|
+
.Grid_colGap_5xl {
|
|
111
|
+
grid-column-gap: var(--space-5xl);
|
|
112
|
+
}
|
|
113
|
+
.Grid_colGap_6xl {
|
|
114
|
+
grid-column-gap: var(--space-6xl);
|
|
115
|
+
}
|
|
116
|
+
.Grid_colGap_7xl {
|
|
117
|
+
grid-column-gap: var(--space-7xl);
|
|
118
|
+
}
|
|
119
|
+
.Grid_colGap_8xl {
|
|
120
|
+
grid-column-gap: var(--space-8xl);
|
|
121
|
+
}
|
|
122
|
+
.Grid_rowGap_0 {
|
|
123
|
+
grid-row-gap: 0;
|
|
124
|
+
}
|
|
125
|
+
.Grid_rowGap_xs {
|
|
126
|
+
grid-row-gap: var(--space-xs);
|
|
127
|
+
}
|
|
128
|
+
.Grid_rowGap_s {
|
|
129
|
+
grid-row-gap: var(--space-s);
|
|
130
|
+
}
|
|
131
|
+
.Grid_rowGap_m {
|
|
132
|
+
grid-row-gap: var(--space-m);
|
|
133
|
+
}
|
|
134
|
+
.Grid_rowGap_l {
|
|
135
|
+
grid-row-gap: var(--space-l);
|
|
136
|
+
}
|
|
137
|
+
.Grid_rowGap_xl {
|
|
138
|
+
grid-row-gap: var(--space-xl);
|
|
139
|
+
}
|
|
140
|
+
.Grid_rowGap_2xl {
|
|
141
|
+
grid-row-gap: var(--space-2xl);
|
|
142
|
+
}
|
|
143
|
+
.Grid_rowGap_3xl {
|
|
144
|
+
grid-row-gap: var(--space-3xl);
|
|
145
|
+
}
|
|
146
|
+
.Grid_rowGap_4xl {
|
|
147
|
+
grid-row-gap: var(--space-4xl);
|
|
148
|
+
}
|
|
149
|
+
.Grid_rowGap_5xl {
|
|
150
|
+
grid-row-gap: var(--space-5xl);
|
|
151
|
+
}
|
|
152
|
+
.Grid_rowGap_6xl {
|
|
153
|
+
grid-row-gap: var(--space-6xl);
|
|
154
|
+
}
|
|
155
|
+
.Grid_rowGap_7xl {
|
|
156
|
+
grid-row-gap: var(--space-7xl);
|
|
157
|
+
}
|
|
158
|
+
.Grid_rowGap_8xl {
|
|
159
|
+
grid-row-gap: var(--space-8xl);
|
|
160
|
+
}
|
|
161
|
+
@media (min-width: 0) {
|
|
84
162
|
.Grid_gap_xs_0 {
|
|
85
163
|
grid-gap: 0;
|
|
86
164
|
}
|
|
@@ -119,6 +197,84 @@
|
|
|
119
197
|
}
|
|
120
198
|
.Grid_gap_xs_8xl {
|
|
121
199
|
grid-gap: var(--space-8xl);
|
|
200
|
+
}
|
|
201
|
+
.Grid_colGap_xs_0 {
|
|
202
|
+
grid-column-gap: 0;
|
|
203
|
+
}
|
|
204
|
+
.Grid_colGap_xs_xs {
|
|
205
|
+
grid-column-gap: var(--space-xs);
|
|
206
|
+
}
|
|
207
|
+
.Grid_colGap_xs_s {
|
|
208
|
+
grid-column-gap: var(--space-s);
|
|
209
|
+
}
|
|
210
|
+
.Grid_colGap_xs_m {
|
|
211
|
+
grid-column-gap: var(--space-m);
|
|
212
|
+
}
|
|
213
|
+
.Grid_colGap_xs_l {
|
|
214
|
+
grid-column-gap: var(--space-l);
|
|
215
|
+
}
|
|
216
|
+
.Grid_colGap_xs_xl {
|
|
217
|
+
grid-column-gap: var(--space-xl);
|
|
218
|
+
}
|
|
219
|
+
.Grid_colGap_xs_2xl {
|
|
220
|
+
grid-column-gap: var(--space-2xl);
|
|
221
|
+
}
|
|
222
|
+
.Grid_colGap_xs_3xl {
|
|
223
|
+
grid-column-gap: var(--space-3xl);
|
|
224
|
+
}
|
|
225
|
+
.Grid_colGap_xs_4xl {
|
|
226
|
+
grid-column-gap: var(--space-4xl);
|
|
227
|
+
}
|
|
228
|
+
.Grid_colGap_xs_5xl {
|
|
229
|
+
grid-column-gap: var(--space-5xl);
|
|
230
|
+
}
|
|
231
|
+
.Grid_colGap_xs_6xl {
|
|
232
|
+
grid-column-gap: var(--space-6xl);
|
|
233
|
+
}
|
|
234
|
+
.Grid_colGap_xs_7xl {
|
|
235
|
+
grid-column-gap: var(--space-7xl);
|
|
236
|
+
}
|
|
237
|
+
.Grid_colGap_xs_8xl {
|
|
238
|
+
grid-column-gap: var(--space-8xl);
|
|
239
|
+
}
|
|
240
|
+
.Grid_rowGap_xs_0 {
|
|
241
|
+
grid-row-gap: 0;
|
|
242
|
+
}
|
|
243
|
+
.Grid_rowGap_xs_xs {
|
|
244
|
+
grid-row-gap: var(--space-xs);
|
|
245
|
+
}
|
|
246
|
+
.Grid_rowGap_xs_s {
|
|
247
|
+
grid-row-gap: var(--space-s);
|
|
248
|
+
}
|
|
249
|
+
.Grid_rowGap_xs_m {
|
|
250
|
+
grid-row-gap: var(--space-m);
|
|
251
|
+
}
|
|
252
|
+
.Grid_rowGap_xs_l {
|
|
253
|
+
grid-row-gap: var(--space-l);
|
|
254
|
+
}
|
|
255
|
+
.Grid_rowGap_xs_xl {
|
|
256
|
+
grid-row-gap: var(--space-xl);
|
|
257
|
+
}
|
|
258
|
+
.Grid_rowGap_xs_2xl {
|
|
259
|
+
grid-row-gap: var(--space-2xl);
|
|
260
|
+
}
|
|
261
|
+
.Grid_rowGap_xs_3xl {
|
|
262
|
+
grid-row-gap: var(--space-3xl);
|
|
263
|
+
}
|
|
264
|
+
.Grid_rowGap_xs_4xl {
|
|
265
|
+
grid-row-gap: var(--space-4xl);
|
|
266
|
+
}
|
|
267
|
+
.Grid_rowGap_xs_5xl {
|
|
268
|
+
grid-row-gap: var(--space-5xl);
|
|
269
|
+
}
|
|
270
|
+
.Grid_rowGap_xs_6xl {
|
|
271
|
+
grid-row-gap: var(--space-6xl);
|
|
272
|
+
}
|
|
273
|
+
.Grid_rowGap_xs_7xl {
|
|
274
|
+
grid-row-gap: var(--space-7xl);
|
|
275
|
+
}
|
|
276
|
+
.Grid_rowGap_xs_8xl {
|
|
277
|
+
grid-row-gap: var(--space-8xl);
|
|
122
278
|
}
|
|
123
279
|
.Grid_cols_xs_1 {
|
|
124
280
|
grid-template-columns: repeat(1, 1fr);
|
|
@@ -157,7 +313,7 @@
|
|
|
157
313
|
grid-template-columns: repeat(12, 1fr);
|
|
158
314
|
}
|
|
159
315
|
}
|
|
160
|
-
@media (width
|
|
316
|
+
@media (min-width: 640px) {
|
|
161
317
|
.Grid_gap_s_0 {
|
|
162
318
|
grid-gap: 0;
|
|
163
319
|
}
|
|
@@ -196,6 +352,84 @@
|
|
|
196
352
|
}
|
|
197
353
|
.Grid_gap_s_8xl {
|
|
198
354
|
grid-gap: var(--space-8xl);
|
|
355
|
+
}
|
|
356
|
+
.Grid_colGap_s_0 {
|
|
357
|
+
grid-column-gap: 0;
|
|
358
|
+
}
|
|
359
|
+
.Grid_colGap_s_xs {
|
|
360
|
+
grid-column-gap: var(--space-xs);
|
|
361
|
+
}
|
|
362
|
+
.Grid_colGap_s_s {
|
|
363
|
+
grid-column-gap: var(--space-s);
|
|
364
|
+
}
|
|
365
|
+
.Grid_colGap_s_m {
|
|
366
|
+
grid-column-gap: var(--space-m);
|
|
367
|
+
}
|
|
368
|
+
.Grid_colGap_s_l {
|
|
369
|
+
grid-column-gap: var(--space-l);
|
|
370
|
+
}
|
|
371
|
+
.Grid_colGap_s_xl {
|
|
372
|
+
grid-column-gap: var(--space-xl);
|
|
373
|
+
}
|
|
374
|
+
.Grid_colGap_s_2xl {
|
|
375
|
+
grid-column-gap: var(--space-2xl);
|
|
376
|
+
}
|
|
377
|
+
.Grid_colGap_s_3xl {
|
|
378
|
+
grid-column-gap: var(--space-3xl);
|
|
379
|
+
}
|
|
380
|
+
.Grid_colGap_s_4xl {
|
|
381
|
+
grid-column-gap: var(--space-4xl);
|
|
382
|
+
}
|
|
383
|
+
.Grid_colGap_s_5xl {
|
|
384
|
+
grid-column-gap: var(--space-5xl);
|
|
385
|
+
}
|
|
386
|
+
.Grid_colGap_s_6xl {
|
|
387
|
+
grid-column-gap: var(--space-6xl);
|
|
388
|
+
}
|
|
389
|
+
.Grid_colGap_s_7xl {
|
|
390
|
+
grid-column-gap: var(--space-7xl);
|
|
391
|
+
}
|
|
392
|
+
.Grid_colGap_s_8xl {
|
|
393
|
+
grid-column-gap: var(--space-8xl);
|
|
394
|
+
}
|
|
395
|
+
.Grid_rowGap_s_0 {
|
|
396
|
+
grid-row-gap: 0;
|
|
397
|
+
}
|
|
398
|
+
.Grid_rowGap_s_xs {
|
|
399
|
+
grid-row-gap: var(--space-xs);
|
|
400
|
+
}
|
|
401
|
+
.Grid_rowGap_s_s {
|
|
402
|
+
grid-row-gap: var(--space-s);
|
|
403
|
+
}
|
|
404
|
+
.Grid_rowGap_s_m {
|
|
405
|
+
grid-row-gap: var(--space-m);
|
|
406
|
+
}
|
|
407
|
+
.Grid_rowGap_s_l {
|
|
408
|
+
grid-row-gap: var(--space-l);
|
|
409
|
+
}
|
|
410
|
+
.Grid_rowGap_s_xl {
|
|
411
|
+
grid-row-gap: var(--space-xl);
|
|
412
|
+
}
|
|
413
|
+
.Grid_rowGap_s_2xl {
|
|
414
|
+
grid-row-gap: var(--space-2xl);
|
|
415
|
+
}
|
|
416
|
+
.Grid_rowGap_s_3xl {
|
|
417
|
+
grid-row-gap: var(--space-3xl);
|
|
418
|
+
}
|
|
419
|
+
.Grid_rowGap_s_4xl {
|
|
420
|
+
grid-row-gap: var(--space-4xl);
|
|
421
|
+
}
|
|
422
|
+
.Grid_rowGap_s_5xl {
|
|
423
|
+
grid-row-gap: var(--space-5xl);
|
|
424
|
+
}
|
|
425
|
+
.Grid_rowGap_s_6xl {
|
|
426
|
+
grid-row-gap: var(--space-6xl);
|
|
427
|
+
}
|
|
428
|
+
.Grid_rowGap_s_7xl {
|
|
429
|
+
grid-row-gap: var(--space-7xl);
|
|
430
|
+
}
|
|
431
|
+
.Grid_rowGap_s_8xl {
|
|
432
|
+
grid-row-gap: var(--space-8xl);
|
|
199
433
|
}
|
|
200
434
|
.Grid_cols_s_1 {
|
|
201
435
|
grid-template-columns: repeat(1, 1fr);
|
|
@@ -234,7 +468,7 @@
|
|
|
234
468
|
grid-template-columns: repeat(12, 1fr);
|
|
235
469
|
}
|
|
236
470
|
}
|
|
237
|
-
@media (width
|
|
471
|
+
@media (min-width: 1024px) {
|
|
238
472
|
.Grid_gap_m_0 {
|
|
239
473
|
grid-gap: 0;
|
|
240
474
|
}
|
|
@@ -273,6 +507,84 @@
|
|
|
273
507
|
}
|
|
274
508
|
.Grid_gap_m_8xl {
|
|
275
509
|
grid-gap: var(--space-8xl);
|
|
510
|
+
}
|
|
511
|
+
.Grid_colGap_m_0 {
|
|
512
|
+
grid-column-gap: 0;
|
|
513
|
+
}
|
|
514
|
+
.Grid_colGap_m_xs {
|
|
515
|
+
grid-column-gap: var(--space-xs);
|
|
516
|
+
}
|
|
517
|
+
.Grid_colGap_m_s {
|
|
518
|
+
grid-column-gap: var(--space-s);
|
|
519
|
+
}
|
|
520
|
+
.Grid_colGap_m_m {
|
|
521
|
+
grid-column-gap: var(--space-m);
|
|
522
|
+
}
|
|
523
|
+
.Grid_colGap_m_l {
|
|
524
|
+
grid-column-gap: var(--space-l);
|
|
525
|
+
}
|
|
526
|
+
.Grid_colGap_m_xl {
|
|
527
|
+
grid-column-gap: var(--space-xl);
|
|
528
|
+
}
|
|
529
|
+
.Grid_colGap_m_2xl {
|
|
530
|
+
grid-column-gap: var(--space-2xl);
|
|
531
|
+
}
|
|
532
|
+
.Grid_colGap_m_3xl {
|
|
533
|
+
grid-column-gap: var(--space-3xl);
|
|
534
|
+
}
|
|
535
|
+
.Grid_colGap_m_4xl {
|
|
536
|
+
grid-column-gap: var(--space-4xl);
|
|
537
|
+
}
|
|
538
|
+
.Grid_colGap_m_5xl {
|
|
539
|
+
grid-column-gap: var(--space-5xl);
|
|
540
|
+
}
|
|
541
|
+
.Grid_colGap_m_6xl {
|
|
542
|
+
grid-column-gap: var(--space-6xl);
|
|
543
|
+
}
|
|
544
|
+
.Grid_colGap_m_7xl {
|
|
545
|
+
grid-column-gap: var(--space-7xl);
|
|
546
|
+
}
|
|
547
|
+
.Grid_colGap_m_8xl {
|
|
548
|
+
grid-column-gap: var(--space-8xl);
|
|
549
|
+
}
|
|
550
|
+
.Grid_rowGap_m_0 {
|
|
551
|
+
grid-row-gap: 0;
|
|
552
|
+
}
|
|
553
|
+
.Grid_rowGap_m_xs {
|
|
554
|
+
grid-row-gap: var(--space-xs);
|
|
555
|
+
}
|
|
556
|
+
.Grid_rowGap_m_s {
|
|
557
|
+
grid-row-gap: var(--space-s);
|
|
558
|
+
}
|
|
559
|
+
.Grid_rowGap_m_m {
|
|
560
|
+
grid-row-gap: var(--space-m);
|
|
561
|
+
}
|
|
562
|
+
.Grid_rowGap_m_l {
|
|
563
|
+
grid-row-gap: var(--space-l);
|
|
564
|
+
}
|
|
565
|
+
.Grid_rowGap_m_xl {
|
|
566
|
+
grid-row-gap: var(--space-xl);
|
|
567
|
+
}
|
|
568
|
+
.Grid_rowGap_m_2xl {
|
|
569
|
+
grid-row-gap: var(--space-2xl);
|
|
570
|
+
}
|
|
571
|
+
.Grid_rowGap_m_3xl {
|
|
572
|
+
grid-row-gap: var(--space-3xl);
|
|
573
|
+
}
|
|
574
|
+
.Grid_rowGap_m_4xl {
|
|
575
|
+
grid-row-gap: var(--space-4xl);
|
|
576
|
+
}
|
|
577
|
+
.Grid_rowGap_m_5xl {
|
|
578
|
+
grid-row-gap: var(--space-5xl);
|
|
579
|
+
}
|
|
580
|
+
.Grid_rowGap_m_6xl {
|
|
581
|
+
grid-row-gap: var(--space-6xl);
|
|
582
|
+
}
|
|
583
|
+
.Grid_rowGap_m_7xl {
|
|
584
|
+
grid-row-gap: var(--space-7xl);
|
|
585
|
+
}
|
|
586
|
+
.Grid_rowGap_m_8xl {
|
|
587
|
+
grid-row-gap: var(--space-8xl);
|
|
276
588
|
}
|
|
277
589
|
.Grid_cols_m_1 {
|
|
278
590
|
grid-template-columns: repeat(1, 1fr);
|
|
@@ -311,7 +623,7 @@
|
|
|
311
623
|
grid-template-columns: repeat(12, 1fr);
|
|
312
624
|
}
|
|
313
625
|
}
|
|
314
|
-
@media (width
|
|
626
|
+
@media (min-width: 1280px) {
|
|
315
627
|
.Grid_gap_l_0 {
|
|
316
628
|
grid-gap: 0;
|
|
317
629
|
}
|
|
@@ -350,6 +662,84 @@
|
|
|
350
662
|
}
|
|
351
663
|
.Grid_gap_l_8xl {
|
|
352
664
|
grid-gap: var(--space-8xl);
|
|
665
|
+
}
|
|
666
|
+
.Grid_colGap_l_0 {
|
|
667
|
+
grid-column-gap: 0;
|
|
668
|
+
}
|
|
669
|
+
.Grid_colGap_l_xs {
|
|
670
|
+
grid-column-gap: var(--space-xs);
|
|
671
|
+
}
|
|
672
|
+
.Grid_colGap_l_s {
|
|
673
|
+
grid-column-gap: var(--space-s);
|
|
674
|
+
}
|
|
675
|
+
.Grid_colGap_l_m {
|
|
676
|
+
grid-column-gap: var(--space-m);
|
|
677
|
+
}
|
|
678
|
+
.Grid_colGap_l_l {
|
|
679
|
+
grid-column-gap: var(--space-l);
|
|
680
|
+
}
|
|
681
|
+
.Grid_colGap_l_xl {
|
|
682
|
+
grid-column-gap: var(--space-xl);
|
|
683
|
+
}
|
|
684
|
+
.Grid_colGap_l_2xl {
|
|
685
|
+
grid-column-gap: var(--space-2xl);
|
|
686
|
+
}
|
|
687
|
+
.Grid_colGap_l_3xl {
|
|
688
|
+
grid-column-gap: var(--space-3xl);
|
|
689
|
+
}
|
|
690
|
+
.Grid_colGap_l_4xl {
|
|
691
|
+
grid-column-gap: var(--space-4xl);
|
|
692
|
+
}
|
|
693
|
+
.Grid_colGap_l_5xl {
|
|
694
|
+
grid-column-gap: var(--space-5xl);
|
|
695
|
+
}
|
|
696
|
+
.Grid_colGap_l_6xl {
|
|
697
|
+
grid-column-gap: var(--space-6xl);
|
|
698
|
+
}
|
|
699
|
+
.Grid_colGap_l_7xl {
|
|
700
|
+
grid-column-gap: var(--space-7xl);
|
|
701
|
+
}
|
|
702
|
+
.Grid_colGap_l_8xl {
|
|
703
|
+
grid-column-gap: var(--space-8xl);
|
|
704
|
+
}
|
|
705
|
+
.Grid_rowGap_l_0 {
|
|
706
|
+
grid-row-gap: 0;
|
|
707
|
+
}
|
|
708
|
+
.Grid_rowGap_l_xs {
|
|
709
|
+
grid-row-gap: var(--space-xs);
|
|
710
|
+
}
|
|
711
|
+
.Grid_rowGap_l_s {
|
|
712
|
+
grid-row-gap: var(--space-s);
|
|
713
|
+
}
|
|
714
|
+
.Grid_rowGap_l_m {
|
|
715
|
+
grid-row-gap: var(--space-m);
|
|
716
|
+
}
|
|
717
|
+
.Grid_rowGap_l_l {
|
|
718
|
+
grid-row-gap: var(--space-l);
|
|
719
|
+
}
|
|
720
|
+
.Grid_rowGap_l_xl {
|
|
721
|
+
grid-row-gap: var(--space-xl);
|
|
722
|
+
}
|
|
723
|
+
.Grid_rowGap_l_2xl {
|
|
724
|
+
grid-row-gap: var(--space-2xl);
|
|
725
|
+
}
|
|
726
|
+
.Grid_rowGap_l_3xl {
|
|
727
|
+
grid-row-gap: var(--space-3xl);
|
|
728
|
+
}
|
|
729
|
+
.Grid_rowGap_l_4xl {
|
|
730
|
+
grid-row-gap: var(--space-4xl);
|
|
731
|
+
}
|
|
732
|
+
.Grid_rowGap_l_5xl {
|
|
733
|
+
grid-row-gap: var(--space-5xl);
|
|
734
|
+
}
|
|
735
|
+
.Grid_rowGap_l_6xl {
|
|
736
|
+
grid-row-gap: var(--space-6xl);
|
|
737
|
+
}
|
|
738
|
+
.Grid_rowGap_l_7xl {
|
|
739
|
+
grid-row-gap: var(--space-7xl);
|
|
740
|
+
}
|
|
741
|
+
.Grid_rowGap_l_8xl {
|
|
742
|
+
grid-row-gap: var(--space-8xl);
|
|
353
743
|
}
|
|
354
744
|
.Grid_cols_l_1 {
|
|
355
745
|
grid-template-columns: repeat(1, 1fr);
|
|
@@ -522,7 +912,7 @@
|
|
|
522
912
|
.GridItem_rowStart_6 {
|
|
523
913
|
--grid-row-start: 6;
|
|
524
914
|
}
|
|
525
|
-
@media (width
|
|
915
|
+
@media (min-width: 0) {
|
|
526
916
|
.GridItem_col_xs_1 {
|
|
527
917
|
--grid-col-start: auto;
|
|
528
918
|
--grid-col-end: span 1;
|
|
@@ -650,7 +1040,7 @@
|
|
|
650
1040
|
--grid-row-start: 6;
|
|
651
1041
|
}
|
|
652
1042
|
}
|
|
653
|
-
@media (width
|
|
1043
|
+
@media (min-width: 640px) {
|
|
654
1044
|
.GridItem_col_s_1 {
|
|
655
1045
|
--grid-col-start: auto;
|
|
656
1046
|
--grid-col-end: span 1;
|
|
@@ -778,7 +1168,7 @@
|
|
|
778
1168
|
--grid-row-start: 6;
|
|
779
1169
|
}
|
|
780
1170
|
}
|
|
781
|
-
@media (width
|
|
1171
|
+
@media (min-width: 1024px) {
|
|
782
1172
|
.GridItem_col_m_1 {
|
|
783
1173
|
--grid-col-start: auto;
|
|
784
1174
|
--grid-col-end: span 1;
|
|
@@ -906,7 +1296,7 @@
|
|
|
906
1296
|
--grid-row-start: 6;
|
|
907
1297
|
}
|
|
908
1298
|
}
|
|
909
|
-
@media (width
|
|
1299
|
+
@media (min-width: 1280px) {
|
|
910
1300
|
.GridItem_col_l_1 {
|
|
911
1301
|
--grid-col-start: auto;
|
|
912
1302
|
--grid-col-end: span 1;
|
|
@@ -11,6 +11,10 @@ export type GridProps = {
|
|
|
11
11
|
cols?: ResponsiveValue<GridColsVariant>;
|
|
12
12
|
/** Отступы между элементами */
|
|
13
13
|
gap?: ResponsiveValue<GridGapVariant>;
|
|
14
|
+
/** Отступы вокруг колонки */
|
|
15
|
+
colGap?: ResponsiveValue<GridGapVariant>;
|
|
16
|
+
/** Отступы вокруг строки */
|
|
17
|
+
rowGap?: ResponsiveValue<GridGapVariant>;
|
|
14
18
|
/** Содержимое компонента */
|
|
15
19
|
children?: ReactNode;
|
|
16
20
|
/** Дополнительные СSS-классы */
|
|
@@ -8,6 +8,7 @@ var classnames_1 = require("@bem-react/classnames");
|
|
|
8
8
|
var useThemeProps_1 = require("../../hooks/useThemeProps");
|
|
9
9
|
var classname_1 = require("../../utils/classname");
|
|
10
10
|
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
|
|
11
|
+
var constants_1 = require("./constants");
|
|
11
12
|
var useGrid_1 = require("./useGrid");
|
|
12
13
|
exports.gridColsVariant = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
|
13
14
|
exports.gridGapVariant = [
|
|
@@ -31,7 +32,7 @@ exports.Grid = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(fu
|
|
|
31
32
|
props: inProps,
|
|
32
33
|
name: 'Grid'
|
|
33
34
|
});
|
|
34
|
-
var _a = props.cols, cols = _a === void 0 ?
|
|
35
|
-
return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnGrid)({}), (0, useGrid_1.useGenerateGridModsCn)(exports.cnGrid, { cols: cols, gap: gap }), className) }, other, { ref: ref }), children));
|
|
35
|
+
var _a = props.cols, cols = _a === void 0 ? constants_1.GRID_DEFAULT_COLS : _a, _b = props.gap, gap = _b === void 0 ? constants_1.GRID_DEFAULT_GAP : _b, _c = props.as, Tag = _c === void 0 ? constants_1.GRID_DEFAULT_TAG : _c, colGap = props.colGap, rowGap = props.rowGap, children = props.children, className = props.className, other = tslib_1.__rest(props, ["cols", "gap", "as", "colGap", "rowGap", "children", "className"]);
|
|
36
|
+
return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnGrid)({}), (0, useGrid_1.useGenerateGridModsCn)(exports.cnGrid, { cols: cols, gap: gap, colGap: colGap, rowGap: rowGap }), className) }, other, { ref: ref }), children));
|
|
36
37
|
});
|
|
37
38
|
exports.Grid.displayName = 'Grid';
|
|
@@ -15,7 +15,7 @@ export type SegmentItemProps = {
|
|
|
15
15
|
/** Если {true} отображает компонент как выбранный */
|
|
16
16
|
selected?: boolean;
|
|
17
17
|
/** Содержимое компонента */
|
|
18
|
-
children
|
|
18
|
+
children?: ReactNode;
|
|
19
19
|
/** Ссылка на элемент SVG-иконки в компоненте */
|
|
20
20
|
iconRef?: Ref<SVGSVGElement>;
|
|
21
21
|
/** Ссылка на input-элемент в компоненте */
|
|
@@ -43,7 +43,7 @@ export declare const SegmentItem: React.ForwardRefExoticComponent<{
|
|
|
43
43
|
/** Если {true} отображает компонент как выбранный */
|
|
44
44
|
selected?: boolean | undefined;
|
|
45
45
|
/** Содержимое компонента */
|
|
46
|
-
children
|
|
46
|
+
children?: ReactNode;
|
|
47
47
|
/** Ссылка на элемент SVG-иконки в компоненте */
|
|
48
48
|
iconRef?: React.Ref<SVGSVGElement> | undefined;
|
|
49
49
|
/** Ссылка на input-элемент в компоненте */
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
.Stack_justify_spaceAround {
|
|
94
94
|
justify-content: space-around;
|
|
95
95
|
}
|
|
96
|
-
@media (width
|
|
96
|
+
@media (min-width: 0) {
|
|
97
97
|
.Stack_direction_xs_row {
|
|
98
98
|
flex-direction: row;
|
|
99
99
|
}
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
gap: var(--space-8xl);
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
|
-
@media (width
|
|
149
|
+
@media (min-width: 640px) {
|
|
150
150
|
.Stack_direction_s_row {
|
|
151
151
|
flex-direction: row;
|
|
152
152
|
}
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
gap: var(--space-8xl);
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
|
-
@media (width
|
|
202
|
+
@media (min-width: 1024px) {
|
|
203
203
|
.Stack_direction_m_row {
|
|
204
204
|
flex-direction: row;
|
|
205
205
|
}
|
|
@@ -252,7 +252,7 @@
|
|
|
252
252
|
gap: var(--space-8xl);
|
|
253
253
|
}
|
|
254
254
|
}
|
|
255
|
-
@media (width
|
|
255
|
+
@media (min-width: 1280px) {
|
|
256
256
|
.Stack_direction_l_row {
|
|
257
257
|
flex-direction: row;
|
|
258
258
|
}
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
.Container_gutters_2xl {
|
|
45
45
|
padding: 0 var(--space-2xl);
|
|
46
46
|
}
|
|
47
|
-
@media (width
|
|
47
|
+
@media (min-width: 0) {
|
|
48
48
|
.Container_gutters_xs_xs {
|
|
49
49
|
padding: 0 var(--space-xs);
|
|
50
50
|
}
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
max-inline-size: 100%;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
@media (width
|
|
79
|
+
@media (min-width: 640px) {
|
|
80
80
|
.Container_gutters_s_xs {
|
|
81
81
|
padding: 0 var(--space-xs);
|
|
82
82
|
}
|
|
@@ -108,7 +108,7 @@
|
|
|
108
108
|
max-inline-size: 100%;
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
@media (width
|
|
111
|
+
@media (min-width: 1024px) {
|
|
112
112
|
.Container_gutters_m_xs {
|
|
113
113
|
padding: 0 var(--space-xs);
|
|
114
114
|
}
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
max-inline-size: 100%;
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
|
-
@media (width
|
|
143
|
+
@media (min-width: 1280px) {
|
|
144
144
|
.Container_gutters_l_xs {
|
|
145
145
|
padding: 0 var(--space-xs);
|
|
146
146
|
}
|
|
@@ -80,7 +80,85 @@
|
|
|
80
80
|
.Grid_gap_8xl {
|
|
81
81
|
grid-gap: var(--space-8xl);
|
|
82
82
|
}
|
|
83
|
-
|
|
83
|
+
.Grid_colGap_0 {
|
|
84
|
+
grid-column-gap: 0;
|
|
85
|
+
}
|
|
86
|
+
.Grid_colGap_xs {
|
|
87
|
+
grid-column-gap: var(--space-xs);
|
|
88
|
+
}
|
|
89
|
+
.Grid_colGap_s {
|
|
90
|
+
grid-column-gap: var(--space-s);
|
|
91
|
+
}
|
|
92
|
+
.Grid_colGap_m {
|
|
93
|
+
grid-column-gap: var(--space-m);
|
|
94
|
+
}
|
|
95
|
+
.Grid_colGap_l {
|
|
96
|
+
grid-column-gap: var(--space-l);
|
|
97
|
+
}
|
|
98
|
+
.Grid_colGap_xl {
|
|
99
|
+
grid-column-gap: var(--space-xl);
|
|
100
|
+
}
|
|
101
|
+
.Grid_colGap_2xl {
|
|
102
|
+
grid-column-gap: var(--space-2xl);
|
|
103
|
+
}
|
|
104
|
+
.Grid_colGap_3xl {
|
|
105
|
+
grid-column-gap: var(--space-3xl);
|
|
106
|
+
}
|
|
107
|
+
.Grid_colGap_4xl {
|
|
108
|
+
grid-column-gap: var(--space-4xl);
|
|
109
|
+
}
|
|
110
|
+
.Grid_colGap_5xl {
|
|
111
|
+
grid-column-gap: var(--space-5xl);
|
|
112
|
+
}
|
|
113
|
+
.Grid_colGap_6xl {
|
|
114
|
+
grid-column-gap: var(--space-6xl);
|
|
115
|
+
}
|
|
116
|
+
.Grid_colGap_7xl {
|
|
117
|
+
grid-column-gap: var(--space-7xl);
|
|
118
|
+
}
|
|
119
|
+
.Grid_colGap_8xl {
|
|
120
|
+
grid-column-gap: var(--space-8xl);
|
|
121
|
+
}
|
|
122
|
+
.Grid_rowGap_0 {
|
|
123
|
+
grid-row-gap: 0;
|
|
124
|
+
}
|
|
125
|
+
.Grid_rowGap_xs {
|
|
126
|
+
grid-row-gap: var(--space-xs);
|
|
127
|
+
}
|
|
128
|
+
.Grid_rowGap_s {
|
|
129
|
+
grid-row-gap: var(--space-s);
|
|
130
|
+
}
|
|
131
|
+
.Grid_rowGap_m {
|
|
132
|
+
grid-row-gap: var(--space-m);
|
|
133
|
+
}
|
|
134
|
+
.Grid_rowGap_l {
|
|
135
|
+
grid-row-gap: var(--space-l);
|
|
136
|
+
}
|
|
137
|
+
.Grid_rowGap_xl {
|
|
138
|
+
grid-row-gap: var(--space-xl);
|
|
139
|
+
}
|
|
140
|
+
.Grid_rowGap_2xl {
|
|
141
|
+
grid-row-gap: var(--space-2xl);
|
|
142
|
+
}
|
|
143
|
+
.Grid_rowGap_3xl {
|
|
144
|
+
grid-row-gap: var(--space-3xl);
|
|
145
|
+
}
|
|
146
|
+
.Grid_rowGap_4xl {
|
|
147
|
+
grid-row-gap: var(--space-4xl);
|
|
148
|
+
}
|
|
149
|
+
.Grid_rowGap_5xl {
|
|
150
|
+
grid-row-gap: var(--space-5xl);
|
|
151
|
+
}
|
|
152
|
+
.Grid_rowGap_6xl {
|
|
153
|
+
grid-row-gap: var(--space-6xl);
|
|
154
|
+
}
|
|
155
|
+
.Grid_rowGap_7xl {
|
|
156
|
+
grid-row-gap: var(--space-7xl);
|
|
157
|
+
}
|
|
158
|
+
.Grid_rowGap_8xl {
|
|
159
|
+
grid-row-gap: var(--space-8xl);
|
|
160
|
+
}
|
|
161
|
+
@media (min-width: 0) {
|
|
84
162
|
.Grid_gap_xs_0 {
|
|
85
163
|
grid-gap: 0;
|
|
86
164
|
}
|
|
@@ -119,6 +197,84 @@
|
|
|
119
197
|
}
|
|
120
198
|
.Grid_gap_xs_8xl {
|
|
121
199
|
grid-gap: var(--space-8xl);
|
|
200
|
+
}
|
|
201
|
+
.Grid_colGap_xs_0 {
|
|
202
|
+
grid-column-gap: 0;
|
|
203
|
+
}
|
|
204
|
+
.Grid_colGap_xs_xs {
|
|
205
|
+
grid-column-gap: var(--space-xs);
|
|
206
|
+
}
|
|
207
|
+
.Grid_colGap_xs_s {
|
|
208
|
+
grid-column-gap: var(--space-s);
|
|
209
|
+
}
|
|
210
|
+
.Grid_colGap_xs_m {
|
|
211
|
+
grid-column-gap: var(--space-m);
|
|
212
|
+
}
|
|
213
|
+
.Grid_colGap_xs_l {
|
|
214
|
+
grid-column-gap: var(--space-l);
|
|
215
|
+
}
|
|
216
|
+
.Grid_colGap_xs_xl {
|
|
217
|
+
grid-column-gap: var(--space-xl);
|
|
218
|
+
}
|
|
219
|
+
.Grid_colGap_xs_2xl {
|
|
220
|
+
grid-column-gap: var(--space-2xl);
|
|
221
|
+
}
|
|
222
|
+
.Grid_colGap_xs_3xl {
|
|
223
|
+
grid-column-gap: var(--space-3xl);
|
|
224
|
+
}
|
|
225
|
+
.Grid_colGap_xs_4xl {
|
|
226
|
+
grid-column-gap: var(--space-4xl);
|
|
227
|
+
}
|
|
228
|
+
.Grid_colGap_xs_5xl {
|
|
229
|
+
grid-column-gap: var(--space-5xl);
|
|
230
|
+
}
|
|
231
|
+
.Grid_colGap_xs_6xl {
|
|
232
|
+
grid-column-gap: var(--space-6xl);
|
|
233
|
+
}
|
|
234
|
+
.Grid_colGap_xs_7xl {
|
|
235
|
+
grid-column-gap: var(--space-7xl);
|
|
236
|
+
}
|
|
237
|
+
.Grid_colGap_xs_8xl {
|
|
238
|
+
grid-column-gap: var(--space-8xl);
|
|
239
|
+
}
|
|
240
|
+
.Grid_rowGap_xs_0 {
|
|
241
|
+
grid-row-gap: 0;
|
|
242
|
+
}
|
|
243
|
+
.Grid_rowGap_xs_xs {
|
|
244
|
+
grid-row-gap: var(--space-xs);
|
|
245
|
+
}
|
|
246
|
+
.Grid_rowGap_xs_s {
|
|
247
|
+
grid-row-gap: var(--space-s);
|
|
248
|
+
}
|
|
249
|
+
.Grid_rowGap_xs_m {
|
|
250
|
+
grid-row-gap: var(--space-m);
|
|
251
|
+
}
|
|
252
|
+
.Grid_rowGap_xs_l {
|
|
253
|
+
grid-row-gap: var(--space-l);
|
|
254
|
+
}
|
|
255
|
+
.Grid_rowGap_xs_xl {
|
|
256
|
+
grid-row-gap: var(--space-xl);
|
|
257
|
+
}
|
|
258
|
+
.Grid_rowGap_xs_2xl {
|
|
259
|
+
grid-row-gap: var(--space-2xl);
|
|
260
|
+
}
|
|
261
|
+
.Grid_rowGap_xs_3xl {
|
|
262
|
+
grid-row-gap: var(--space-3xl);
|
|
263
|
+
}
|
|
264
|
+
.Grid_rowGap_xs_4xl {
|
|
265
|
+
grid-row-gap: var(--space-4xl);
|
|
266
|
+
}
|
|
267
|
+
.Grid_rowGap_xs_5xl {
|
|
268
|
+
grid-row-gap: var(--space-5xl);
|
|
269
|
+
}
|
|
270
|
+
.Grid_rowGap_xs_6xl {
|
|
271
|
+
grid-row-gap: var(--space-6xl);
|
|
272
|
+
}
|
|
273
|
+
.Grid_rowGap_xs_7xl {
|
|
274
|
+
grid-row-gap: var(--space-7xl);
|
|
275
|
+
}
|
|
276
|
+
.Grid_rowGap_xs_8xl {
|
|
277
|
+
grid-row-gap: var(--space-8xl);
|
|
122
278
|
}
|
|
123
279
|
.Grid_cols_xs_1 {
|
|
124
280
|
grid-template-columns: repeat(1, 1fr);
|
|
@@ -157,7 +313,7 @@
|
|
|
157
313
|
grid-template-columns: repeat(12, 1fr);
|
|
158
314
|
}
|
|
159
315
|
}
|
|
160
|
-
@media (width
|
|
316
|
+
@media (min-width: 640px) {
|
|
161
317
|
.Grid_gap_s_0 {
|
|
162
318
|
grid-gap: 0;
|
|
163
319
|
}
|
|
@@ -196,6 +352,84 @@
|
|
|
196
352
|
}
|
|
197
353
|
.Grid_gap_s_8xl {
|
|
198
354
|
grid-gap: var(--space-8xl);
|
|
355
|
+
}
|
|
356
|
+
.Grid_colGap_s_0 {
|
|
357
|
+
grid-column-gap: 0;
|
|
358
|
+
}
|
|
359
|
+
.Grid_colGap_s_xs {
|
|
360
|
+
grid-column-gap: var(--space-xs);
|
|
361
|
+
}
|
|
362
|
+
.Grid_colGap_s_s {
|
|
363
|
+
grid-column-gap: var(--space-s);
|
|
364
|
+
}
|
|
365
|
+
.Grid_colGap_s_m {
|
|
366
|
+
grid-column-gap: var(--space-m);
|
|
367
|
+
}
|
|
368
|
+
.Grid_colGap_s_l {
|
|
369
|
+
grid-column-gap: var(--space-l);
|
|
370
|
+
}
|
|
371
|
+
.Grid_colGap_s_xl {
|
|
372
|
+
grid-column-gap: var(--space-xl);
|
|
373
|
+
}
|
|
374
|
+
.Grid_colGap_s_2xl {
|
|
375
|
+
grid-column-gap: var(--space-2xl);
|
|
376
|
+
}
|
|
377
|
+
.Grid_colGap_s_3xl {
|
|
378
|
+
grid-column-gap: var(--space-3xl);
|
|
379
|
+
}
|
|
380
|
+
.Grid_colGap_s_4xl {
|
|
381
|
+
grid-column-gap: var(--space-4xl);
|
|
382
|
+
}
|
|
383
|
+
.Grid_colGap_s_5xl {
|
|
384
|
+
grid-column-gap: var(--space-5xl);
|
|
385
|
+
}
|
|
386
|
+
.Grid_colGap_s_6xl {
|
|
387
|
+
grid-column-gap: var(--space-6xl);
|
|
388
|
+
}
|
|
389
|
+
.Grid_colGap_s_7xl {
|
|
390
|
+
grid-column-gap: var(--space-7xl);
|
|
391
|
+
}
|
|
392
|
+
.Grid_colGap_s_8xl {
|
|
393
|
+
grid-column-gap: var(--space-8xl);
|
|
394
|
+
}
|
|
395
|
+
.Grid_rowGap_s_0 {
|
|
396
|
+
grid-row-gap: 0;
|
|
397
|
+
}
|
|
398
|
+
.Grid_rowGap_s_xs {
|
|
399
|
+
grid-row-gap: var(--space-xs);
|
|
400
|
+
}
|
|
401
|
+
.Grid_rowGap_s_s {
|
|
402
|
+
grid-row-gap: var(--space-s);
|
|
403
|
+
}
|
|
404
|
+
.Grid_rowGap_s_m {
|
|
405
|
+
grid-row-gap: var(--space-m);
|
|
406
|
+
}
|
|
407
|
+
.Grid_rowGap_s_l {
|
|
408
|
+
grid-row-gap: var(--space-l);
|
|
409
|
+
}
|
|
410
|
+
.Grid_rowGap_s_xl {
|
|
411
|
+
grid-row-gap: var(--space-xl);
|
|
412
|
+
}
|
|
413
|
+
.Grid_rowGap_s_2xl {
|
|
414
|
+
grid-row-gap: var(--space-2xl);
|
|
415
|
+
}
|
|
416
|
+
.Grid_rowGap_s_3xl {
|
|
417
|
+
grid-row-gap: var(--space-3xl);
|
|
418
|
+
}
|
|
419
|
+
.Grid_rowGap_s_4xl {
|
|
420
|
+
grid-row-gap: var(--space-4xl);
|
|
421
|
+
}
|
|
422
|
+
.Grid_rowGap_s_5xl {
|
|
423
|
+
grid-row-gap: var(--space-5xl);
|
|
424
|
+
}
|
|
425
|
+
.Grid_rowGap_s_6xl {
|
|
426
|
+
grid-row-gap: var(--space-6xl);
|
|
427
|
+
}
|
|
428
|
+
.Grid_rowGap_s_7xl {
|
|
429
|
+
grid-row-gap: var(--space-7xl);
|
|
430
|
+
}
|
|
431
|
+
.Grid_rowGap_s_8xl {
|
|
432
|
+
grid-row-gap: var(--space-8xl);
|
|
199
433
|
}
|
|
200
434
|
.Grid_cols_s_1 {
|
|
201
435
|
grid-template-columns: repeat(1, 1fr);
|
|
@@ -234,7 +468,7 @@
|
|
|
234
468
|
grid-template-columns: repeat(12, 1fr);
|
|
235
469
|
}
|
|
236
470
|
}
|
|
237
|
-
@media (width
|
|
471
|
+
@media (min-width: 1024px) {
|
|
238
472
|
.Grid_gap_m_0 {
|
|
239
473
|
grid-gap: 0;
|
|
240
474
|
}
|
|
@@ -273,6 +507,84 @@
|
|
|
273
507
|
}
|
|
274
508
|
.Grid_gap_m_8xl {
|
|
275
509
|
grid-gap: var(--space-8xl);
|
|
510
|
+
}
|
|
511
|
+
.Grid_colGap_m_0 {
|
|
512
|
+
grid-column-gap: 0;
|
|
513
|
+
}
|
|
514
|
+
.Grid_colGap_m_xs {
|
|
515
|
+
grid-column-gap: var(--space-xs);
|
|
516
|
+
}
|
|
517
|
+
.Grid_colGap_m_s {
|
|
518
|
+
grid-column-gap: var(--space-s);
|
|
519
|
+
}
|
|
520
|
+
.Grid_colGap_m_m {
|
|
521
|
+
grid-column-gap: var(--space-m);
|
|
522
|
+
}
|
|
523
|
+
.Grid_colGap_m_l {
|
|
524
|
+
grid-column-gap: var(--space-l);
|
|
525
|
+
}
|
|
526
|
+
.Grid_colGap_m_xl {
|
|
527
|
+
grid-column-gap: var(--space-xl);
|
|
528
|
+
}
|
|
529
|
+
.Grid_colGap_m_2xl {
|
|
530
|
+
grid-column-gap: var(--space-2xl);
|
|
531
|
+
}
|
|
532
|
+
.Grid_colGap_m_3xl {
|
|
533
|
+
grid-column-gap: var(--space-3xl);
|
|
534
|
+
}
|
|
535
|
+
.Grid_colGap_m_4xl {
|
|
536
|
+
grid-column-gap: var(--space-4xl);
|
|
537
|
+
}
|
|
538
|
+
.Grid_colGap_m_5xl {
|
|
539
|
+
grid-column-gap: var(--space-5xl);
|
|
540
|
+
}
|
|
541
|
+
.Grid_colGap_m_6xl {
|
|
542
|
+
grid-column-gap: var(--space-6xl);
|
|
543
|
+
}
|
|
544
|
+
.Grid_colGap_m_7xl {
|
|
545
|
+
grid-column-gap: var(--space-7xl);
|
|
546
|
+
}
|
|
547
|
+
.Grid_colGap_m_8xl {
|
|
548
|
+
grid-column-gap: var(--space-8xl);
|
|
549
|
+
}
|
|
550
|
+
.Grid_rowGap_m_0 {
|
|
551
|
+
grid-row-gap: 0;
|
|
552
|
+
}
|
|
553
|
+
.Grid_rowGap_m_xs {
|
|
554
|
+
grid-row-gap: var(--space-xs);
|
|
555
|
+
}
|
|
556
|
+
.Grid_rowGap_m_s {
|
|
557
|
+
grid-row-gap: var(--space-s);
|
|
558
|
+
}
|
|
559
|
+
.Grid_rowGap_m_m {
|
|
560
|
+
grid-row-gap: var(--space-m);
|
|
561
|
+
}
|
|
562
|
+
.Grid_rowGap_m_l {
|
|
563
|
+
grid-row-gap: var(--space-l);
|
|
564
|
+
}
|
|
565
|
+
.Grid_rowGap_m_xl {
|
|
566
|
+
grid-row-gap: var(--space-xl);
|
|
567
|
+
}
|
|
568
|
+
.Grid_rowGap_m_2xl {
|
|
569
|
+
grid-row-gap: var(--space-2xl);
|
|
570
|
+
}
|
|
571
|
+
.Grid_rowGap_m_3xl {
|
|
572
|
+
grid-row-gap: var(--space-3xl);
|
|
573
|
+
}
|
|
574
|
+
.Grid_rowGap_m_4xl {
|
|
575
|
+
grid-row-gap: var(--space-4xl);
|
|
576
|
+
}
|
|
577
|
+
.Grid_rowGap_m_5xl {
|
|
578
|
+
grid-row-gap: var(--space-5xl);
|
|
579
|
+
}
|
|
580
|
+
.Grid_rowGap_m_6xl {
|
|
581
|
+
grid-row-gap: var(--space-6xl);
|
|
582
|
+
}
|
|
583
|
+
.Grid_rowGap_m_7xl {
|
|
584
|
+
grid-row-gap: var(--space-7xl);
|
|
585
|
+
}
|
|
586
|
+
.Grid_rowGap_m_8xl {
|
|
587
|
+
grid-row-gap: var(--space-8xl);
|
|
276
588
|
}
|
|
277
589
|
.Grid_cols_m_1 {
|
|
278
590
|
grid-template-columns: repeat(1, 1fr);
|
|
@@ -311,7 +623,7 @@
|
|
|
311
623
|
grid-template-columns: repeat(12, 1fr);
|
|
312
624
|
}
|
|
313
625
|
}
|
|
314
|
-
@media (width
|
|
626
|
+
@media (min-width: 1280px) {
|
|
315
627
|
.Grid_gap_l_0 {
|
|
316
628
|
grid-gap: 0;
|
|
317
629
|
}
|
|
@@ -350,6 +662,84 @@
|
|
|
350
662
|
}
|
|
351
663
|
.Grid_gap_l_8xl {
|
|
352
664
|
grid-gap: var(--space-8xl);
|
|
665
|
+
}
|
|
666
|
+
.Grid_colGap_l_0 {
|
|
667
|
+
grid-column-gap: 0;
|
|
668
|
+
}
|
|
669
|
+
.Grid_colGap_l_xs {
|
|
670
|
+
grid-column-gap: var(--space-xs);
|
|
671
|
+
}
|
|
672
|
+
.Grid_colGap_l_s {
|
|
673
|
+
grid-column-gap: var(--space-s);
|
|
674
|
+
}
|
|
675
|
+
.Grid_colGap_l_m {
|
|
676
|
+
grid-column-gap: var(--space-m);
|
|
677
|
+
}
|
|
678
|
+
.Grid_colGap_l_l {
|
|
679
|
+
grid-column-gap: var(--space-l);
|
|
680
|
+
}
|
|
681
|
+
.Grid_colGap_l_xl {
|
|
682
|
+
grid-column-gap: var(--space-xl);
|
|
683
|
+
}
|
|
684
|
+
.Grid_colGap_l_2xl {
|
|
685
|
+
grid-column-gap: var(--space-2xl);
|
|
686
|
+
}
|
|
687
|
+
.Grid_colGap_l_3xl {
|
|
688
|
+
grid-column-gap: var(--space-3xl);
|
|
689
|
+
}
|
|
690
|
+
.Grid_colGap_l_4xl {
|
|
691
|
+
grid-column-gap: var(--space-4xl);
|
|
692
|
+
}
|
|
693
|
+
.Grid_colGap_l_5xl {
|
|
694
|
+
grid-column-gap: var(--space-5xl);
|
|
695
|
+
}
|
|
696
|
+
.Grid_colGap_l_6xl {
|
|
697
|
+
grid-column-gap: var(--space-6xl);
|
|
698
|
+
}
|
|
699
|
+
.Grid_colGap_l_7xl {
|
|
700
|
+
grid-column-gap: var(--space-7xl);
|
|
701
|
+
}
|
|
702
|
+
.Grid_colGap_l_8xl {
|
|
703
|
+
grid-column-gap: var(--space-8xl);
|
|
704
|
+
}
|
|
705
|
+
.Grid_rowGap_l_0 {
|
|
706
|
+
grid-row-gap: 0;
|
|
707
|
+
}
|
|
708
|
+
.Grid_rowGap_l_xs {
|
|
709
|
+
grid-row-gap: var(--space-xs);
|
|
710
|
+
}
|
|
711
|
+
.Grid_rowGap_l_s {
|
|
712
|
+
grid-row-gap: var(--space-s);
|
|
713
|
+
}
|
|
714
|
+
.Grid_rowGap_l_m {
|
|
715
|
+
grid-row-gap: var(--space-m);
|
|
716
|
+
}
|
|
717
|
+
.Grid_rowGap_l_l {
|
|
718
|
+
grid-row-gap: var(--space-l);
|
|
719
|
+
}
|
|
720
|
+
.Grid_rowGap_l_xl {
|
|
721
|
+
grid-row-gap: var(--space-xl);
|
|
722
|
+
}
|
|
723
|
+
.Grid_rowGap_l_2xl {
|
|
724
|
+
grid-row-gap: var(--space-2xl);
|
|
725
|
+
}
|
|
726
|
+
.Grid_rowGap_l_3xl {
|
|
727
|
+
grid-row-gap: var(--space-3xl);
|
|
728
|
+
}
|
|
729
|
+
.Grid_rowGap_l_4xl {
|
|
730
|
+
grid-row-gap: var(--space-4xl);
|
|
731
|
+
}
|
|
732
|
+
.Grid_rowGap_l_5xl {
|
|
733
|
+
grid-row-gap: var(--space-5xl);
|
|
734
|
+
}
|
|
735
|
+
.Grid_rowGap_l_6xl {
|
|
736
|
+
grid-row-gap: var(--space-6xl);
|
|
737
|
+
}
|
|
738
|
+
.Grid_rowGap_l_7xl {
|
|
739
|
+
grid-row-gap: var(--space-7xl);
|
|
740
|
+
}
|
|
741
|
+
.Grid_rowGap_l_8xl {
|
|
742
|
+
grid-row-gap: var(--space-8xl);
|
|
353
743
|
}
|
|
354
744
|
.Grid_cols_l_1 {
|
|
355
745
|
grid-template-columns: repeat(1, 1fr);
|
|
@@ -522,7 +912,7 @@
|
|
|
522
912
|
.GridItem_rowStart_6 {
|
|
523
913
|
--grid-row-start: 6;
|
|
524
914
|
}
|
|
525
|
-
@media (width
|
|
915
|
+
@media (min-width: 0) {
|
|
526
916
|
.GridItem_col_xs_1 {
|
|
527
917
|
--grid-col-start: auto;
|
|
528
918
|
--grid-col-end: span 1;
|
|
@@ -650,7 +1040,7 @@
|
|
|
650
1040
|
--grid-row-start: 6;
|
|
651
1041
|
}
|
|
652
1042
|
}
|
|
653
|
-
@media (width
|
|
1043
|
+
@media (min-width: 640px) {
|
|
654
1044
|
.GridItem_col_s_1 {
|
|
655
1045
|
--grid-col-start: auto;
|
|
656
1046
|
--grid-col-end: span 1;
|
|
@@ -778,7 +1168,7 @@
|
|
|
778
1168
|
--grid-row-start: 6;
|
|
779
1169
|
}
|
|
780
1170
|
}
|
|
781
|
-
@media (width
|
|
1171
|
+
@media (min-width: 1024px) {
|
|
782
1172
|
.GridItem_col_m_1 {
|
|
783
1173
|
--grid-col-start: auto;
|
|
784
1174
|
--grid-col-end: span 1;
|
|
@@ -906,7 +1296,7 @@
|
|
|
906
1296
|
--grid-row-start: 6;
|
|
907
1297
|
}
|
|
908
1298
|
}
|
|
909
|
-
@media (width
|
|
1299
|
+
@media (min-width: 1280px) {
|
|
910
1300
|
.GridItem_col_l_1 {
|
|
911
1301
|
--grid-col-start: auto;
|
|
912
1302
|
--grid-col-end: span 1;
|
|
@@ -11,6 +11,10 @@ export type GridProps = {
|
|
|
11
11
|
cols?: ResponsiveValue<GridColsVariant>;
|
|
12
12
|
/** Отступы между элементами */
|
|
13
13
|
gap?: ResponsiveValue<GridGapVariant>;
|
|
14
|
+
/** Отступы вокруг колонки */
|
|
15
|
+
colGap?: ResponsiveValue<GridGapVariant>;
|
|
16
|
+
/** Отступы вокруг строки */
|
|
17
|
+
rowGap?: ResponsiveValue<GridGapVariant>;
|
|
14
18
|
/** Содержимое компонента */
|
|
15
19
|
children?: ReactNode;
|
|
16
20
|
/** Дополнительные СSS-классы */
|
|
@@ -5,6 +5,7 @@ import { classnames } from '@bem-react/classnames';
|
|
|
5
5
|
import { useThemeProps } from '../../hooks/useThemeProps';
|
|
6
6
|
import { cn } from '../../utils/classname';
|
|
7
7
|
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
|
|
8
|
+
import { GRID_DEFAULT_COLS, GRID_DEFAULT_GAP, GRID_DEFAULT_TAG, } from './constants';
|
|
8
9
|
import { useGenerateGridModsCn } from './useGrid';
|
|
9
10
|
export var gridColsVariant = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
|
10
11
|
export var gridGapVariant = [
|
|
@@ -28,7 +29,7 @@ export var Grid = polymorphicComponentWithRef(function (inProps, ref) {
|
|
|
28
29
|
props: inProps,
|
|
29
30
|
name: 'Grid'
|
|
30
31
|
});
|
|
31
|
-
var _a = props.cols, cols = _a === void 0 ?
|
|
32
|
-
return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, { cols: cols, gap: gap }), className) }, other, { ref: ref }), children));
|
|
32
|
+
var _a = props.cols, cols = _a === void 0 ? GRID_DEFAULT_COLS : _a, _b = props.gap, gap = _b === void 0 ? GRID_DEFAULT_GAP : _b, _c = props.as, Tag = _c === void 0 ? GRID_DEFAULT_TAG : _c, colGap = props.colGap, rowGap = props.rowGap, children = props.children, className = props.className, other = __rest(props, ["cols", "gap", "as", "colGap", "rowGap", "children", "className"]);
|
|
33
|
+
return (React.createElement(Tag, __assign({ className: classnames(cnGrid({}), useGenerateGridModsCn(cnGrid, { cols: cols, gap: gap, colGap: colGap, rowGap: rowGap }), className) }, other, { ref: ref }), children));
|
|
33
34
|
});
|
|
34
35
|
Grid.displayName = 'Grid';
|
|
@@ -15,7 +15,7 @@ export type SegmentItemProps = {
|
|
|
15
15
|
/** Если {true} отображает компонент как выбранный */
|
|
16
16
|
selected?: boolean;
|
|
17
17
|
/** Содержимое компонента */
|
|
18
|
-
children
|
|
18
|
+
children?: ReactNode;
|
|
19
19
|
/** Ссылка на элемент SVG-иконки в компоненте */
|
|
20
20
|
iconRef?: Ref<SVGSVGElement>;
|
|
21
21
|
/** Ссылка на input-элемент в компоненте */
|
|
@@ -43,7 +43,7 @@ export declare const SegmentItem: React.ForwardRefExoticComponent<{
|
|
|
43
43
|
/** Если {true} отображает компонент как выбранный */
|
|
44
44
|
selected?: boolean | undefined;
|
|
45
45
|
/** Содержимое компонента */
|
|
46
|
-
children
|
|
46
|
+
children?: ReactNode;
|
|
47
47
|
/** Ссылка на элемент SVG-иконки в компоненте */
|
|
48
48
|
iconRef?: React.Ref<SVGSVGElement> | undefined;
|
|
49
49
|
/** Ссылка на input-элемент в компоненте */
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
.Stack_justify_spaceAround {
|
|
94
94
|
justify-content: space-around;
|
|
95
95
|
}
|
|
96
|
-
@media (width
|
|
96
|
+
@media (min-width: 0) {
|
|
97
97
|
.Stack_direction_xs_row {
|
|
98
98
|
flex-direction: row;
|
|
99
99
|
}
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
gap: var(--space-8xl);
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
|
-
@media (width
|
|
149
|
+
@media (min-width: 640px) {
|
|
150
150
|
.Stack_direction_s_row {
|
|
151
151
|
flex-direction: row;
|
|
152
152
|
}
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
gap: var(--space-8xl);
|
|
200
200
|
}
|
|
201
201
|
}
|
|
202
|
-
@media (width
|
|
202
|
+
@media (min-width: 1024px) {
|
|
203
203
|
.Stack_direction_m_row {
|
|
204
204
|
flex-direction: row;
|
|
205
205
|
}
|
|
@@ -252,7 +252,7 @@
|
|
|
252
252
|
gap: var(--space-8xl);
|
|
253
253
|
}
|
|
254
254
|
}
|
|
255
|
-
@media (width
|
|
255
|
+
@media (min-width: 1280px) {
|
|
256
256
|
.Stack_direction_l_row {
|
|
257
257
|
flex-direction: row;
|
|
258
258
|
}
|
package/package.json
CHANGED