@seed-design/css 2.4.0 → 2.4.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 (34) hide show
  1. package/all.css +130 -64
  2. package/all.layered.css +134 -68
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +21 -4
  6. package/base.layered.css +21 -4
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +1 -1
  10. package/recipes/accordion.layered.css +6 -6
  11. package/recipes/action-button.layered.css +4 -4
  12. package/recipes/article.layered.css +1 -0
  13. package/recipes/attachment-input-item.layered.css +12 -0
  14. package/recipes/avatar.layered.css +15 -0
  15. package/recipes/bottom-sheet.css +1 -3
  16. package/recipes/bottom-sheet.layered.css +5 -7
  17. package/recipes/content-dialog.layered.css +7 -5
  18. package/recipes/help-bubble.layered.css +4 -4
  19. package/recipes/input-button.layered.css +9 -9
  20. package/recipes/layout.layered.css +2 -2
  21. package/recipes/list-item.layered.css +4 -4
  22. package/recipes/menu-item.layered.css +4 -3
  23. package/recipes/menu.layered.css +2 -2
  24. package/recipes/scroll-fog.layered.css +2 -0
  25. package/recipes/segmented-control.layered.css +1 -0
  26. package/recipes/select-item.layered.css +6 -5
  27. package/recipes/select-trigger.layered.css +5 -5
  28. package/recipes/select.layered.css +1 -1
  29. package/recipes/side-panel.layered.css +6 -5
  30. package/recipes/skeleton.layered.css +4 -4
  31. package/recipes/slider.layered.css +1 -0
  32. package/recipes/tag-group.layered.css +1 -0
  33. package/recipes/text-input.layered.css +34 -22
  34. package/recipes/wheel-picker.layered.css +1 -0
package/recipes/input-button.layered.css CHANGED
@@ -237,7 +237,7 @@
237
237
  padding-inline: var(--seed-dimension-x4);
238
238
  }
239
239
 
240
- @media (width >= 1280px) {
240
+ @media (min-width: 1280px) {
241
241
  .seed-input-button__root--size_responsive {
242
242
  height: var(--seed-dimension-x10);
243
243
  gap: var(--seed-dimension-x2);
@@ -249,7 +249,7 @@
249
249
  border-radius: var(--seed-radius-r3);
250
250
  }
251
251
 
252
- @media (width >= 1280px) {
252
+ @media (min-width: 1280px) {
253
253
  .seed-input-button__button--size_responsive {
254
254
  border-radius: var(--seed-radius-r2);
255
255
  }
@@ -260,7 +260,7 @@
260
260
  line-height: var(--seed-line-height-t5);
261
261
  }
262
262
 
263
- @media (width >= 1280px) {
263
+ @media (min-width: 1280px) {
264
264
  .seed-input-button__value--size_responsive {
265
265
  font-size: var(--seed-font-size-t4);
266
266
  line-height: var(--seed-line-height-t4);
@@ -272,7 +272,7 @@
272
272
  line-height: var(--seed-line-height-t5);
273
273
  }
274
274
 
275
- @media (width >= 1280px) {
275
+ @media (min-width: 1280px) {
276
276
  .seed-input-button__placeholder--size_responsive {
277
277
  font-size: var(--seed-font-size-t4);
278
278
  line-height: var(--seed-line-height-t4);
@@ -284,7 +284,7 @@
284
284
  line-height: var(--seed-line-height-t5);
285
285
  }
286
286
 
287
- @media (width >= 1280px) {
287
+ @media (min-width: 1280px) {
288
288
  .seed-input-button__prefixText--size_responsive {
289
289
  font-size: var(--seed-font-size-t4);
290
290
  line-height: var(--seed-line-height-t4);
@@ -296,7 +296,7 @@
296
296
  height: var(--seed-dimension-x5);
297
297
  }
298
298
 
299
- @media (width >= 1280px) {
299
+ @media (min-width: 1280px) {
300
300
  .seed-input-button__prefixIcon--size_responsive {
301
301
  width: var(--seed-dimension-x4);
302
302
  height: var(--seed-dimension-x4);
@@ -308,7 +308,7 @@
308
308
  line-height: var(--seed-line-height-t5);
309
309
  }
310
310
 
311
- @media (width >= 1280px) {
311
+ @media (min-width: 1280px) {
312
312
  .seed-input-button__suffixText--size_responsive {
313
313
  font-size: var(--seed-font-size-t4);
314
314
  line-height: var(--seed-line-height-t4);
@@ -320,7 +320,7 @@
320
320
  height: var(--seed-dimension-x5);
321
321
  }
322
322
 
323
- @media (width >= 1280px) {
323
+ @media (min-width: 1280px) {
324
324
  .seed-input-button__suffixIcon--size_responsive {
325
325
  width: var(--seed-dimension-x4);
326
326
  height: var(--seed-dimension-x4);
@@ -331,7 +331,7 @@
331
331
  --seed-icon-size: 22px;
332
332
  }
333
333
 
334
- @media (width >= 1280px) {
334
+ @media (min-width: 1280px) {
335
335
  .seed-input-button__clearButton--size_responsive {
336
336
  --seed-icon-size: var(--seed-dimension-x4_5);
337
337
  }
package/recipes/layout.layered.css CHANGED
@@ -10,13 +10,13 @@
10
10
  margin-inline: auto;
11
11
  }
12
12
 
13
- @media (width >= 768px) {
13
+ @media (min-width: 768px) {
14
14
  .seed-layout__content--density_low, .seed-layout__content--density_medium {
15
15
  max-width: 720px;
16
16
  }
17
17
  }
18
18
 
19
- @media (width >= 1280px) {
19
+ @media (min-width: 1280px) {
20
20
  .seed-layout__content--density_medium {
21
21
  max-width: 1040px;
22
22
  }
package/recipes/list-item.layered.css CHANGED
@@ -199,7 +199,7 @@
199
199
  }
200
200
  }
201
201
 
202
- @media (width >= 480px) {
202
+ @media (min-width: 480px) {
203
203
  .seed-list-item__prefix {
204
204
  --seed-box-padding-right: var(--seed-box-padding-right-sm, initial);
205
205
  }
@@ -214,7 +214,7 @@
214
214
  }
215
215
  }
216
216
 
217
- @media (width >= 768px) {
217
+ @media (min-width: 768px) {
218
218
  .seed-list-item__prefix {
219
219
  --seed-box-padding-right: var(--seed-box-padding-right-md, initial);
220
220
  }
@@ -229,7 +229,7 @@
229
229
  }
230
230
  }
231
231
 
232
- @media (width >= 1280px) {
232
+ @media (min-width: 1280px) {
233
233
  .seed-list-item__prefix {
234
234
  --seed-box-padding-right: var(--seed-box-padding-right-lg, initial);
235
235
  }
@@ -244,7 +244,7 @@
244
244
  }
245
245
  }
246
246
 
247
- @media (width >= 1440px) {
247
+ @media (min-width: 1440px) {
248
248
  .seed-list-item__prefix {
249
249
  --seed-box-padding-right: var(--seed-box-padding-right-xl, initial);
250
250
  }
package/recipes/menu-item.layered.css CHANGED
@@ -3,6 +3,7 @@
3
3
  scroll-margin-top: var(--seed-dimension-x2);
4
4
  scroll-margin-bottom: var(--seed-dimension-x2);
5
5
  cursor: default;
6
+ -webkit-user-select: none;
6
7
  user-select: none;
7
8
  color: inherit;
8
9
  text-align: start;
@@ -134,7 +135,7 @@
134
135
  --seed-suffix-icon-size: 18px;
135
136
  }
136
137
 
137
- @media (width >= 1280px) {
138
+ @media (min-width: 1280px) {
138
139
  .seed-menu-item__root--size_responsive {
139
140
  padding-block: var(--seed-dimension-x2_5);
140
141
  padding-inline: var(--seed-dimension-x4);
@@ -149,7 +150,7 @@
149
150
  line-height: var(--seed-line-height-t5);
150
151
  }
151
152
 
152
- @media (width >= 1280px) {
153
+ @media (min-width: 1280px) {
153
154
  .seed-menu-item__label--size_responsive {
154
155
  font-size: var(--seed-font-size-t4);
155
156
  line-height: var(--seed-line-height-t4);
@@ -161,7 +162,7 @@
161
162
  line-height: var(--seed-line-height-t3);
162
163
  }
163
164
 
164
- @media (width >= 1280px) {
165
+ @media (min-width: 1280px) {
165
166
  .seed-menu-item__description--size_responsive {
166
167
  font-size: var(--seed-font-size-t2);
167
168
  line-height: var(--seed-line-height-t2);
package/recipes/menu.layered.css CHANGED
@@ -103,7 +103,7 @@
103
103
  width: var(--seed-menu-reference-width, 240px);
104
104
  }
105
105
 
106
- @media (width >= 1280px) {
106
+ @media (min-width: 1280px) {
107
107
  .seed-menu__content--size_responsive {
108
108
  width: var(--seed-menu-reference-width, 200px);
109
109
  }
@@ -117,7 +117,7 @@
117
117
  font-weight: var(--seed-font-weight-medium);
118
118
  }
119
119
 
120
- @media (width >= 1280px) {
120
+ @media (min-width: 1280px) {
121
121
  .seed-menu__groupLabel--size_responsive {
122
122
  padding-block: var(--seed-dimension-x2);
123
123
  padding-inline: var(--seed-dimension-x4);
package/recipes/scroll-fog.layered.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --scroll-fog-to-color: #000;
5
5
  width: 100%;
6
6
  height: 100%;
7
+ -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
7
8
  mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
8
9
  -webkit-mask-image: linear-gradient(to bottom, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-top) * var(--scroll-fog-size-top))), linear-gradient(to top, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-bottom) * var(--scroll-fog-size-bottom))), linear-gradient(to right, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-left) * var(--scroll-fog-size-left))), linear-gradient(to left, var(--scroll-fog-from-color) 0, var(--scroll-fog-to-color) calc(var(--scrollable-right) * var(--scroll-fog-size-right)));
9
10
  -webkit-mask-composite: source-in;
@@ -13,6 +14,7 @@
13
14
  mask-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
14
15
  -webkit-mask-repeat: no-repeat;
15
16
  mask-repeat: no-repeat;
17
+ -webkit-mask-composite: source-in;
16
18
  mask-composite: intersect;
17
19
  }
18
20
 
package/recipes/segmented-control.layered.css CHANGED
@@ -31,6 +31,7 @@
31
31
  .seed-segmented-control__item {
32
32
  text-align: center;
33
33
  cursor: pointer;
34
+ -webkit-user-select: none;
34
35
  user-select: none;
35
36
  box-sizing: border-box;
36
37
  overflow-wrap: break-word;
package/recipes/select-item.layered.css CHANGED
@@ -3,6 +3,7 @@
3
3
  scroll-margin-block: var(--seed-dimension-x2);
4
4
  padding-inline: var(--seed-dimension-x4);
5
5
  cursor: default;
6
+ -webkit-user-select: none;
6
7
  user-select: none;
7
8
  color: inherit;
8
9
  text-align: start;
@@ -134,7 +135,7 @@
134
135
  gap: var(--seed-dimension-x3);
135
136
  }
136
137
 
137
- @media (width >= 1280px) {
138
+ @media (min-width: 1280px) {
138
139
  .seed-select-item__root--size_responsive {
139
140
  padding-block: var(--seed-dimension-x2_5);
140
141
  gap: var(--seed-dimension-x2);
@@ -146,7 +147,7 @@
146
147
  height: 22px;
147
148
  }
148
149
 
149
- @media (width >= 1280px) {
150
+ @media (min-width: 1280px) {
150
151
  .seed-select-item__prefixIcon--size_responsive {
151
152
  width: var(--seed-dimension-x4_5);
152
153
  height: var(--seed-dimension-x4_5);
@@ -158,7 +159,7 @@
158
159
  line-height: var(--seed-line-height-t5);
159
160
  }
160
161
 
161
- @media (width >= 1280px) {
162
+ @media (min-width: 1280px) {
162
163
  .seed-select-item__label--size_responsive {
163
164
  font-size: var(--seed-font-size-t4);
164
165
  line-height: var(--seed-line-height-t4);
@@ -170,7 +171,7 @@
170
171
  line-height: var(--seed-line-height-t3);
171
172
  }
172
173
 
173
- @media (width >= 1280px) {
174
+ @media (min-width: 1280px) {
174
175
  .seed-select-item__description--size_responsive {
175
176
  font-size: var(--seed-font-size-t2);
176
177
  line-height: var(--seed-line-height-t2);
@@ -182,7 +183,7 @@
182
183
  height: var(--seed-dimension-x3_5);
183
184
  }
184
185
 
185
- @media (width >= 1280px) {
186
+ @media (min-width: 1280px) {
186
187
  .seed-select-item__indicator--size_responsive {
187
188
  width: var(--seed-dimension-x3);
188
189
  height: var(--seed-dimension-x3);
package/recipes/select-trigger.layered.css CHANGED
@@ -168,7 +168,7 @@
168
168
  border-radius: var(--seed-radius-r3);
169
169
  }
170
170
 
171
- @media (width >= 1280px) {
171
+ @media (min-width: 1280px) {
172
172
  .seed-select-trigger__root--size_responsive {
173
173
  height: var(--seed-dimension-x10);
174
174
  gap: var(--seed-dimension-x2);
@@ -182,7 +182,7 @@
182
182
  line-height: var(--seed-line-height-t5);
183
183
  }
184
184
 
185
- @media (width >= 1280px) {
185
+ @media (min-width: 1280px) {
186
186
  .seed-select-trigger__value--size_responsive {
187
187
  font-size: var(--seed-font-size-t4);
188
188
  line-height: var(--seed-line-height-t4);
@@ -194,7 +194,7 @@
194
194
  line-height: var(--seed-line-height-t5);
195
195
  }
196
196
 
197
- @media (width >= 1280px) {
197
+ @media (min-width: 1280px) {
198
198
  .seed-select-trigger__placeholder--size_responsive {
199
199
  font-size: var(--seed-font-size-t4);
200
200
  line-height: var(--seed-line-height-t4);
@@ -206,7 +206,7 @@
206
206
  height: var(--seed-dimension-x5);
207
207
  }
208
208
 
209
- @media (width >= 1280px) {
209
+ @media (min-width: 1280px) {
210
210
  .seed-select-trigger__prefixIcon--size_responsive {
211
211
  width: var(--seed-dimension-x4);
212
212
  height: var(--seed-dimension-x4);
@@ -218,7 +218,7 @@
218
218
  height: var(--seed-dimension-x5);
219
219
  }
220
220
 
221
- @media (width >= 1280px) {
221
+ @media (min-width: 1280px) {
222
222
  .seed-select-trigger__suffixIcon--size_responsive {
223
223
  width: var(--seed-dimension-x4);
224
224
  height: var(--seed-dimension-x4);
package/recipes/select.layered.css CHANGED
@@ -96,7 +96,7 @@
96
96
  font-weight: var(--seed-font-weight-medium);
97
97
  }
98
98
 
99
- @media (width >= 1280px) {
99
+ @media (min-width: 1280px) {
100
100
  .seed-select__groupLabel--size_responsive {
101
101
  padding-block: var(--seed-dimension-x2);
102
102
  padding-inline: var(--seed-dimension-x4);
package/recipes/side-panel.layered.css CHANGED
@@ -64,7 +64,7 @@
64
64
  inset-block: 0;
65
65
  }
66
66
 
67
- @media (width >= 768px) {
67
+ @media (min-width: 768px) {
68
68
  .seed-side-panel__content {
69
69
  --side-panel-default-width: var(--side-panel-size-width);
70
70
  }
@@ -224,6 +224,7 @@
224
224
  }
225
225
 
226
226
  .seed-side-panel__body {
227
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
227
228
  mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
228
229
  -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
229
230
  outline: var(--seed-dimension-x0_5) solid transparent;
@@ -292,7 +293,7 @@
292
293
  --side-panel-size-width: 960px;
293
294
  }
294
295
 
295
- @media (width >= 480px) {
296
+ @media (min-width: 480px) {
296
297
  .seed-side-panel__content {
297
298
  --seed-box-width: var(--seed-box-width-sm, initial);
298
299
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
@@ -306,7 +307,7 @@
306
307
  }
307
308
  }
308
309
 
309
- @media (width >= 768px) {
310
+ @media (min-width: 768px) {
310
311
  .seed-side-panel__content {
311
312
  --seed-box-width: var(--seed-box-width-md, initial);
312
313
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
@@ -320,7 +321,7 @@
320
321
  }
321
322
  }
322
323
 
323
- @media (width >= 1280px) {
324
+ @media (min-width: 1280px) {
324
325
  .seed-side-panel__content {
325
326
  --seed-box-width: var(--seed-box-width-lg, initial);
326
327
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
@@ -334,7 +335,7 @@
334
335
  }
335
336
  }
336
337
 
337
- @media (width >= 1440px) {
338
+ @media (min-width: 1440px) {
338
339
  .seed-side-panel__content {
339
340
  --seed-box-width: var(--seed-box-width-xl, initial);
340
341
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
package/recipes/skeleton.layered.css CHANGED
@@ -64,28 +64,28 @@
64
64
  background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
65
65
  }
66
66
 
67
- @media (width >= 480px) {
67
+ @media (min-width: 480px) {
68
68
  .seed-skeleton {
69
69
  --seed-box-width: var(--seed-box-width-sm, initial);
70
70
  --seed-box-height: var(--seed-box-height-sm, initial);
71
71
  }
72
72
  }
73
73
 
74
- @media (width >= 768px) {
74
+ @media (min-width: 768px) {
75
75
  .seed-skeleton {
76
76
  --seed-box-width: var(--seed-box-width-md, initial);
77
77
  --seed-box-height: var(--seed-box-height-md, initial);
78
78
  }
79
79
  }
80
80
 
81
- @media (width >= 1280px) {
81
+ @media (min-width: 1280px) {
82
82
  .seed-skeleton {
83
83
  --seed-box-width: var(--seed-box-width-lg, initial);
84
84
  --seed-box-height: var(--seed-box-height-lg, initial);
85
85
  }
86
86
  }
87
87
 
88
- @media (width >= 1440px) {
88
+ @media (min-width: 1440px) {
89
89
  .seed-skeleton {
90
90
  --seed-box-width: var(--seed-box-width-xl, initial);
91
91
  --seed-box-height: var(--seed-box-height-xl, initial);
package/recipes/slider.layered.css CHANGED
@@ -2,6 +2,7 @@
2
2
  .seed-slider__root {
3
3
  align-items: stretch;
4
4
  gap: var(--seed-dimension-x0_5);
5
+ -webkit-user-select: none;
5
6
  user-select: none;
6
7
  touch-action: none;
7
8
  flex-direction: column;
package/recipes/tag-group.layered.css CHANGED
@@ -3,6 +3,7 @@
3
3
  color: var(--seed-color-palette-gray-600);
4
4
  font-weight: var(--seed-font-weight-regular);
5
5
  white-space: pre;
6
+ -webkit-user-select: none;
6
7
  user-select: none;
7
8
  }
8
9
 
package/recipes/text-input.layered.css CHANGED
@@ -40,13 +40,25 @@
40
40
  font-weight: var(--seed-font-weight-regular);
41
41
  }
42
42
 
43
+ .seed-text-input__value:-webkit-any(:-webkit-autofill, :-webkit-autofill) {
44
+ -webkit-text-fill-color: var(--seed-color-fg-neutral);
45
+ transition: background-color 2147480000s 2147480000s;
46
+ }
47
+
43
48
  .seed-text-input__value:is(:autofill, :autofill) {
44
49
  -webkit-text-fill-color: var(--seed-color-fg-neutral);
45
50
  transition: background-color 2147480000s 2147480000s;
46
51
  }
47
52
 
48
- @supports (background-clip: text) {
53
+ @supports ((-webkit-background-clip: text) or (background-clip: text)) {
54
+ .seed-text-input__value:-webkit-any(:-webkit-autofill, :-webkit-autofill) {
55
+ -webkit-background-clip: text;
56
+ background-clip: text;
57
+ transition: none;
58
+ }
59
+
49
60
  .seed-text-input__value:is(:autofill, :autofill) {
61
+ -webkit-background-clip: text;
50
62
  background-clip: text;
51
63
  transition: none;
52
64
  }
@@ -158,7 +170,7 @@
158
170
  padding-block: var(--seed-dimension-x3_5);
159
171
  }
160
172
 
161
- @media (width >= 1280px) {
173
+ @media (min-width: 1280px) {
162
174
  .seed-text-input__value--size_responsive:is(textarea) {
163
175
  min-height: 82px;
164
176
  padding-block: var(--seed-dimension-x3);
@@ -281,7 +293,7 @@
281
293
  border-radius: var(--seed-radius-r3);
282
294
  }
283
295
 
284
- @media (width >= 1280px) {
296
+ @media (min-width: 1280px) {
285
297
  .seed-text-input__root--variant_outline-size_responsive {
286
298
  gap: var(--seed-dimension-x2);
287
299
  min-height: var(--seed-dimension-x10);
@@ -294,7 +306,7 @@
294
306
  line-height: var(--seed-line-height-t5);
295
307
  }
296
308
 
297
- @media (width >= 1280px) {
309
+ @media (min-width: 1280px) {
298
310
  .seed-text-input__value--variant_outline-size_responsive {
299
311
  font-size: var(--seed-font-size-t4);
300
312
  line-height: var(--seed-line-height-t4);
@@ -306,7 +318,7 @@
306
318
  line-height: var(--seed-line-height-t5);
307
319
  }
308
320
 
309
- @media (width >= 1280px) {
321
+ @media (min-width: 1280px) {
310
322
  .seed-text-input__value--variant_outline-size_responsive::placeholder {
311
323
  font-size: var(--seed-font-size-t4);
312
324
  line-height: var(--seed-line-height-t4);
@@ -317,7 +329,7 @@
317
329
  padding-left: var(--seed-dimension-x4);
318
330
  }
319
331
 
320
- @media (width >= 1280px) {
332
+ @media (min-width: 1280px) {
321
333
  .seed-text-input__value--variant_outline-size_responsive:first-child {
322
334
  padding-left: var(--seed-dimension-x3_5);
323
335
  }
@@ -327,7 +339,7 @@
327
339
  padding-right: var(--seed-dimension-x4);
328
340
  }
329
341
 
330
- @media (width >= 1280px) {
342
+ @media (min-width: 1280px) {
331
343
  .seed-text-input__value--variant_outline-size_responsive:last-child {
332
344
  padding-right: var(--seed-dimension-x3_5);
333
345
  }
@@ -338,7 +350,7 @@
338
350
  line-height: var(--seed-line-height-t5);
339
351
  }
340
352
 
341
- @media (width >= 1280px) {
353
+ @media (min-width: 1280px) {
342
354
  .seed-text-input__prefixText--variant_outline-size_responsive {
343
355
  font-size: var(--seed-font-size-t4);
344
356
  line-height: var(--seed-line-height-t4);
@@ -349,7 +361,7 @@
349
361
  margin-left: var(--seed-dimension-x4);
350
362
  }
351
363
 
352
- @media (width >= 1280px) {
364
+ @media (min-width: 1280px) {
353
365
  .seed-text-input__prefixText--variant_outline-size_responsive:first-child {
354
366
  margin-left: var(--seed-dimension-x3_5);
355
367
  }
@@ -360,7 +372,7 @@
360
372
  height: var(--seed-dimension-x5);
361
373
  }
362
374
 
363
- @media (width >= 1280px) {
375
+ @media (min-width: 1280px) {
364
376
  .seed-text-input__prefixIcon--variant_outline-size_responsive {
365
377
  width: var(--seed-dimension-x4);
366
378
  height: var(--seed-dimension-x4);
@@ -371,7 +383,7 @@
371
383
  margin-left: var(--seed-dimension-x4);
372
384
  }
373
385
 
374
- @media (width >= 1280px) {
386
+ @media (min-width: 1280px) {
375
387
  .seed-text-input__prefixIcon--variant_outline-size_responsive:first-child {
376
388
  margin-left: var(--seed-dimension-x3_5);
377
389
  }
@@ -382,7 +394,7 @@
382
394
  line-height: var(--seed-line-height-t5);
383
395
  }
384
396
 
385
- @media (width >= 1280px) {
397
+ @media (min-width: 1280px) {
386
398
  .seed-text-input__suffixText--variant_outline-size_responsive {
387
399
  font-size: var(--seed-font-size-t4);
388
400
  line-height: var(--seed-line-height-t4);
@@ -393,7 +405,7 @@
393
405
  margin-right: var(--seed-dimension-x4);
394
406
  }
395
407
 
396
- @media (width >= 1280px) {
408
+ @media (min-width: 1280px) {
397
409
  .seed-text-input__suffixText--variant_outline-size_responsive:last-child {
398
410
  margin-right: var(--seed-dimension-x3_5);
399
411
  }
@@ -404,7 +416,7 @@
404
416
  height: var(--seed-dimension-x5);
405
417
  }
406
418
 
407
- @media (width >= 1280px) {
419
+ @media (min-width: 1280px) {
408
420
  .seed-text-input__suffixIcon--variant_outline-size_responsive {
409
421
  width: var(--seed-dimension-x4);
410
422
  height: var(--seed-dimension-x4);
@@ -415,7 +427,7 @@
415
427
  margin-right: var(--seed-dimension-x4);
416
428
  }
417
429
 
418
- @media (width >= 1280px) {
430
+ @media (min-width: 1280px) {
419
431
  .seed-text-input__suffixIcon--variant_outline-size_responsive:last-child {
420
432
  margin-right: var(--seed-dimension-x3_5);
421
433
  }
@@ -479,7 +491,7 @@
479
491
  padding-block: var(--seed-dimension-x2);
480
492
  }
481
493
 
482
- @media (width >= 1280px) {
494
+ @media (min-width: 1280px) {
483
495
  .seed-text-input__root--variant_underline-size_responsive {
484
496
  gap: var(--seed-dimension-x2);
485
497
  min-height: 34px;
@@ -492,7 +504,7 @@
492
504
  line-height: var(--seed-line-height-t6);
493
505
  }
494
506
 
495
- @media (width >= 1280px) {
507
+ @media (min-width: 1280px) {
496
508
  .seed-text-input__value--variant_underline-size_responsive {
497
509
  font-size: var(--seed-font-size-t5);
498
510
  line-height: var(--seed-line-height-t5);
@@ -504,7 +516,7 @@
504
516
  line-height: var(--seed-line-height-t6);
505
517
  }
506
518
 
507
- @media (width >= 1280px) {
519
+ @media (min-width: 1280px) {
508
520
  .seed-text-input__value--variant_underline-size_responsive::placeholder {
509
521
  font-size: var(--seed-font-size-t5);
510
522
  line-height: var(--seed-line-height-t5);
@@ -516,7 +528,7 @@
516
528
  line-height: var(--seed-line-height-t6);
517
529
  }
518
530
 
519
- @media (width >= 1280px) {
531
+ @media (min-width: 1280px) {
520
532
  .seed-text-input__prefixText--variant_underline-size_responsive {
521
533
  font-size: var(--seed-font-size-t5);
522
534
  line-height: var(--seed-line-height-t5);
@@ -528,7 +540,7 @@
528
540
  height: var(--seed-dimension-x6);
529
541
  }
530
542
 
531
- @media (width >= 1280px) {
543
+ @media (min-width: 1280px) {
532
544
  .seed-text-input__prefixIcon--variant_underline-size_responsive {
533
545
  width: var(--seed-dimension-x5);
534
546
  height: var(--seed-dimension-x5);
@@ -540,7 +552,7 @@
540
552
  line-height: var(--seed-line-height-t6);
541
553
  }
542
554
 
543
- @media (width >= 1280px) {
555
+ @media (min-width: 1280px) {
544
556
  .seed-text-input__suffixText--variant_underline-size_responsive {
545
557
  font-size: var(--seed-font-size-t5);
546
558
  line-height: var(--seed-line-height-t5);
@@ -552,7 +564,7 @@
552
564
  height: var(--seed-dimension-x6);
553
565
  }
554
566
 
555
- @media (width >= 1280px) {
567
+ @media (min-width: 1280px) {
556
568
  .seed-text-input__suffixIcon--variant_underline-size_responsive {
557
569
  width: var(--seed-dimension-x5);
558
570
  height: var(--seed-dimension-x5);
package/recipes/wheel-picker.layered.css CHANGED
@@ -75,6 +75,7 @@
75
75
  justify-content: var(--seed-wheel-picker-item-justify-content, center);
76
76
  color: var(--seed-wheel-picker-item-color);
77
77
  scroll-snap-align: center;
78
+ -webkit-user-select: none;
78
79
  user-select: none;
79
80
  display: flex;
80
81
  }