@vaadin/vaadin-lumo-styles 25.0.0-alpha8 → 25.0.0-beta1

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 (188) hide show
  1. package/all-imports.d.ts +0 -8
  2. package/all-imports.js +0 -18
  3. package/components/accordion-heading.css +4 -3
  4. package/components/accordion-panel.css +4 -3
  5. package/components/app-layout.css +4 -3
  6. package/components/avatar-group.css +10 -9
  7. package/components/avatar.css +6 -4
  8. package/components/button.css +4 -4
  9. package/components/card.css +6 -4
  10. package/components/charts.css +4 -3
  11. package/components/checkbox-group.css +4 -3
  12. package/components/checkbox.css +4 -3
  13. package/components/combo-box.css +8 -7
  14. package/components/confirm-dialog.css +4 -3
  15. package/components/context-menu.css +8 -7
  16. package/components/crud.css +13 -12
  17. package/components/custom-field.css +4 -3
  18. package/components/dashboard.css +12 -11
  19. package/components/date-picker.css +12 -11
  20. package/components/date-time-picker.css +4 -3
  21. package/components/details-summary.css +4 -3
  22. package/components/details.css +4 -3
  23. package/components/dialog.css +4 -3
  24. package/components/drawer-toggle.css +4 -3
  25. package/components/email-field.css +4 -3
  26. package/components/field-highlighter.css +8 -7
  27. package/components/form-item.css +4 -3
  28. package/components/form-layout.css +8 -5
  29. package/components/grid-filter.css +4 -3
  30. package/components/grid-pro-edit-column.css +8 -7
  31. package/components/grid-pro.css +4 -3
  32. package/components/grid-sorter.css +4 -3
  33. package/components/grid-tree-toggle.css +4 -3
  34. package/components/grid.css +4 -3
  35. package/components/horizontal-layout.css +4 -3
  36. package/components/icon.css +4 -3
  37. package/components/index.css +71 -0
  38. package/components/input-container.css +4 -3
  39. package/components/integer-field.css +4 -3
  40. package/components/item.css +4 -3
  41. package/components/list-box.css +4 -3
  42. package/components/login-form.css +4 -3
  43. package/components/login.css +4 -3
  44. package/components/map.css +4 -3
  45. package/components/master-detail-layout.css +14 -5
  46. package/components/menu-bar.css +12 -11
  47. package/components/message-input-button.css +12 -0
  48. package/components/message-input.css +5 -4
  49. package/components/message.css +4 -3
  50. package/components/multi-select-combo-box.css +12 -11
  51. package/components/notification.css +6 -5
  52. package/components/number-field.css +4 -3
  53. package/components/overlay.css +4 -3
  54. package/components/password-field.css +6 -5
  55. package/components/popover.css +4 -3
  56. package/components/progress-bar.css +4 -3
  57. package/components/radio-button.css +4 -3
  58. package/components/radio-group.css +4 -3
  59. package/components/rich-text-editor.css +6 -5
  60. package/components/scroller.css +4 -3
  61. package/components/select.css +12 -11
  62. package/components/side-nav-item.css +4 -3
  63. package/components/side-nav.css +4 -3
  64. package/components/split-layout.css +4 -3
  65. package/components/tab.css +4 -3
  66. package/components/tabs.css +4 -3
  67. package/components/tabsheet.css +6 -5
  68. package/components/text-area.css +4 -3
  69. package/components/text-field.css +4 -3
  70. package/components/time-picker.css +8 -7
  71. package/components/tooltip.css +4 -3
  72. package/components/upload.css +15 -10
  73. package/components/vertical-layout.css +4 -3
  74. package/dist/lumo.css +43 -0
  75. package/dist/presets/compact.css +1 -0
  76. package/dist/utility.css +1 -0
  77. package/lumo.css +3 -3
  78. package/mixins/field-button.js +3 -4
  79. package/mixins/helper.js +3 -4
  80. package/mixins/input-field-shared.js +4 -7
  81. package/mixins/loader.js +3 -2
  82. package/mixins/menu-overlay.js +3 -2
  83. package/mixins/overlay.js +3 -4
  84. package/mixins/required-field.js +3 -4
  85. package/package.json +15 -9
  86. package/presets/compact.css +32 -0
  87. package/src/components/app-layout.css +5 -5
  88. package/src/components/avatar-group-overlay.css +0 -4
  89. package/src/components/chart.css +3 -5
  90. package/src/components/checkbox.css +2 -3
  91. package/src/components/combo-box.css +1 -1
  92. package/src/components/confirm-dialog-overlay.css +0 -4
  93. package/src/components/context-menu-overlay.css +21 -1
  94. package/src/components/dashboard-layout.css +0 -66
  95. package/src/components/dashboard-section.css +3 -31
  96. package/src/components/dashboard-widget.css +1 -85
  97. package/src/components/dashboard.css +0 -9
  98. package/src/components/date-picker-overlay-content.css +6 -40
  99. package/src/components/date-picker-overlay.css +2 -14
  100. package/src/components/date-picker.css +2 -2
  101. package/src/components/dialog-overlay.css +10 -19
  102. package/src/components/grid-pro-edit-select.css +1 -1
  103. package/src/components/grid-pro.css +14 -8
  104. package/src/components/grid.css +0 -7
  105. package/src/components/horizontal-layout.css +0 -4
  106. package/src/components/icon.css +2 -2
  107. package/src/components/input-container.css +1 -3
  108. package/src/components/login-form-wrapper.css +5 -26
  109. package/src/components/login-overlay-wrapper.css +14 -4
  110. package/src/components/menu-bar-button.css +7 -7
  111. package/src/components/message.css +7 -32
  112. package/src/components/multi-select-combo-box.css +6 -2
  113. package/src/components/notification-container.css +8 -1
  114. package/src/components/number-field.css +6 -6
  115. package/src/components/password-field.css +4 -4
  116. package/src/components/popover-overlay.css +2 -138
  117. package/src/components/radio-button.css +1 -1
  118. package/src/components/rich-text-editor.css +40 -142
  119. package/src/components/scroller.css +3 -22
  120. package/src/components/select.css +15 -2
  121. package/src/components/side-nav-item.css +13 -0
  122. package/src/components/split-layout.css +19 -97
  123. package/src/components/tabsheet.css +5 -1
  124. package/src/components/text-area.css +2 -2
  125. package/src/components/time-picker.css +1 -1
  126. package/src/components/tooltip-overlay.css +4 -1
  127. package/src/components/upload-file.css +27 -61
  128. package/src/components/upload-icon.css +6 -0
  129. package/src/components/user-tags-overlay.css +2 -5
  130. package/src/components/vertical-layout.css +0 -4
  131. package/src/global/color-scheme.css +2 -1
  132. package/{user-colors.d.ts → src/global/index.css} +3 -3
  133. package/src/global/typography.css +2 -1
  134. package/src/mixins/dashboard-item.css +10 -142
  135. package/src/mixins/field-base.css +1 -1
  136. package/src/mixins/field-button.css +3 -3
  137. package/src/mixins/overlay.css +11 -1
  138. package/src/mixins/resizable-overlay.css +2 -1
  139. package/src/props/color.css +4 -2
  140. package/src/props/icons.css +21 -18
  141. package/src/props/index.css +12 -0
  142. package/src/props/reset.css +2 -1
  143. package/src/props/sizing.css +2 -1
  144. package/src/props/spacing.css +2 -1
  145. package/src/props/style.css +2 -1
  146. package/src/props/typography.css +2 -1
  147. package/utility.css +0 -1
  148. package/vaadin-iconset.js +2 -0
  149. package/auto-complete.css +0 -2512
  150. package/badge-global.js +0 -9
  151. package/badge.d.ts +0 -3
  152. package/badge.js +0 -178
  153. package/color-global.js +0 -9
  154. package/color.d.ts +0 -5
  155. package/color.js +0 -221
  156. package/components.css +0 -71
  157. package/font-icons.js +0 -69
  158. package/global.css +0 -8
  159. package/global.js +0 -5
  160. package/presets/compact.js +0 -40
  161. package/props.css +0 -12
  162. package/sizing.d.ts +0 -3
  163. package/sizing.js +0 -29
  164. package/spacing.d.ts +0 -3
  165. package/spacing.js +0 -37
  166. package/src/components/form-layout.css +0 -11
  167. package/src/components/master-detail-layout.css +0 -21
  168. package/src/components/upload-file-list.css +0 -24
  169. package/style.d.ts +0 -3
  170. package/style.js +0 -31
  171. package/typography-global.js +0 -13
  172. package/typography.d.ts +0 -7
  173. package/typography.js +0 -129
  174. package/user-colors.js +0 -33
  175. package/utilities/accessibility.js +0 -21
  176. package/utilities/background.js +0 -156
  177. package/utilities/border.js +0 -147
  178. package/utilities/filter.js +0 -34
  179. package/utilities/flexbox-grid.js +0 -619
  180. package/utilities/layout.js +0 -504
  181. package/utilities/shadows.js +0 -28
  182. package/utilities/sizing.js +0 -121
  183. package/utilities/spacing.js +0 -542
  184. package/utilities/transition.js +0 -50
  185. package/utilities/typography.js +0 -344
  186. package/utility-global.js +0 -9
  187. package/utility.d.ts +0 -3
  188. package/utility.js +0 -34
package/utilities/spacing.js DELETED
@@ -1,542 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
7
-
8
- export const spacing = css`
9
- /* === Margin === */
10
- .-m-xs {
11
- margin: calc(var(--lumo-space-xs) / -1);
12
- }
13
- .-m-s {
14
- margin: calc(var(--lumo-space-s) / -1);
15
- }
16
- .-m-m {
17
- margin: calc(var(--lumo-space-m) / -1);
18
- }
19
- .-m-l {
20
- margin: calc(var(--lumo-space-l) / -1);
21
- }
22
- .-m-xl {
23
- margin: calc(var(--lumo-space-xl) / -1);
24
- }
25
- .m-0 {
26
- margin: 0;
27
- }
28
- .m-xs {
29
- margin: var(--lumo-space-xs);
30
- }
31
- .m-s {
32
- margin: var(--lumo-space-s);
33
- }
34
- .m-m {
35
- margin: var(--lumo-space-m);
36
- }
37
- .m-l {
38
- margin: var(--lumo-space-l);
39
- }
40
- .m-xl {
41
- margin: var(--lumo-space-xl);
42
- }
43
- .m-auto {
44
- margin: auto;
45
- }
46
-
47
- /* === Margin (bottom) === */
48
- .-mb-xs {
49
- margin-bottom: calc(var(--lumo-space-xs) / -1);
50
- }
51
- .-mb-s {
52
- margin-bottom: calc(var(--lumo-space-s) / -1);
53
- }
54
- .-mb-m {
55
- margin-bottom: calc(var(--lumo-space-m) / -1);
56
- }
57
- .-mb-l {
58
- margin-bottom: calc(var(--lumo-space-l) / -1);
59
- }
60
- .-mb-xl {
61
- margin-bottom: calc(var(--lumo-space-xl) / -1);
62
- }
63
- .mb-0 {
64
- margin-bottom: 0;
65
- }
66
- .mb-xs {
67
- margin-bottom: var(--lumo-space-xs);
68
- }
69
- .mb-s {
70
- margin-bottom: var(--lumo-space-s);
71
- }
72
- .mb-m {
73
- margin-bottom: var(--lumo-space-m);
74
- }
75
- .mb-l {
76
- margin-bottom: var(--lumo-space-l);
77
- }
78
- .mb-xl {
79
- margin-bottom: var(--lumo-space-xl);
80
- }
81
- .mb-auto {
82
- margin-bottom: auto;
83
- }
84
-
85
- /* === Margin (end) === */
86
- .-me-xs {
87
- margin-inline-end: calc(var(--lumo-space-xs) / -1);
88
- }
89
- .-me-s {
90
- margin-inline-end: calc(var(--lumo-space-s) / -1);
91
- }
92
- .-me-m {
93
- margin-inline-end: calc(var(--lumo-space-m) / -1);
94
- }
95
- .-me-l {
96
- margin-inline-end: calc(var(--lumo-space-l) / -1);
97
- }
98
- .-me-xl {
99
- margin-inline-end: calc(var(--lumo-space-xl) / -1);
100
- }
101
- .me-0 {
102
- margin-inline-end: 0;
103
- }
104
- .me-xs {
105
- margin-inline-end: var(--lumo-space-xs);
106
- }
107
- .me-s {
108
- margin-inline-end: var(--lumo-space-s);
109
- }
110
- .me-m {
111
- margin-inline-end: var(--lumo-space-m);
112
- }
113
- .me-l {
114
- margin-inline-end: var(--lumo-space-l);
115
- }
116
- .me-xl {
117
- margin-inline-end: var(--lumo-space-xl);
118
- }
119
- .me-auto {
120
- margin-inline-end: auto;
121
- }
122
-
123
- /* === Margin (horizontal) === */
124
- .-mx-xs {
125
- margin-inline: calc(var(--lumo-space-xs) / -1);
126
- }
127
- .-mx-s {
128
- margin-inline: calc(var(--lumo-space-s) / -1);
129
- }
130
- .-mx-m {
131
- margin-inline: calc(var(--lumo-space-m) / -1);
132
- }
133
- .-mx-l {
134
- margin-inline: calc(var(--lumo-space-l) / -1);
135
- }
136
- .-mx-xl {
137
- margin-inline: calc(var(--lumo-space-xl) / -1);
138
- }
139
- .mx-0 {
140
- margin-inline: 0;
141
- }
142
- .mx-xs {
143
- margin-inline: var(--lumo-space-xs);
144
- }
145
- .mx-s {
146
- margin-inline: var(--lumo-space-s);
147
- }
148
- .mx-m {
149
- margin-inline: var(--lumo-space-m);
150
- }
151
- .mx-l {
152
- margin-inline: var(--lumo-space-l);
153
- }
154
- .mx-xl {
155
- margin-inline: var(--lumo-space-xl);
156
- }
157
- .mx-auto {
158
- margin-inline: auto;
159
- }
160
-
161
- /* === Margin (left) === */
162
- .-ml-xs {
163
- margin-left: calc(var(--lumo-space-xs) / -1);
164
- }
165
- .-ml-s {
166
- margin-left: calc(var(--lumo-space-s) / -1);
167
- }
168
- .-ml-m {
169
- margin-left: calc(var(--lumo-space-m) / -1);
170
- }
171
- .-ml-l {
172
- margin-left: calc(var(--lumo-space-l) / -1);
173
- }
174
- .-ml-xl {
175
- margin-left: calc(var(--lumo-space-xl) / -1);
176
- }
177
- .ml-0 {
178
- margin-left: 0;
179
- }
180
- .ml-xs {
181
- margin-left: var(--lumo-space-xs);
182
- }
183
- .ml-s {
184
- margin-left: var(--lumo-space-s);
185
- }
186
- .ml-m {
187
- margin-left: var(--lumo-space-m);
188
- }
189
- .ml-l {
190
- margin-left: var(--lumo-space-l);
191
- }
192
- .ml-xl {
193
- margin-left: var(--lumo-space-xl);
194
- }
195
- .ml-auto {
196
- margin-left: auto;
197
- }
198
-
199
- /* === Margin (right) === */
200
- .-mr-xs {
201
- margin-right: calc(var(--lumo-space-xs) / -1);
202
- }
203
- .-mr-s {
204
- margin-right: calc(var(--lumo-space-s) / -1);
205
- }
206
- .-mr-m {
207
- margin-right: calc(var(--lumo-space-m) / -1);
208
- }
209
- .-mr-l {
210
- margin-right: calc(var(--lumo-space-l) / -1);
211
- }
212
- .-mr-xl {
213
- margin-right: calc(var(--lumo-space-xl) / -1);
214
- }
215
- .mr-0 {
216
- margin-right: 0;
217
- }
218
- .mr-xs {
219
- margin-right: var(--lumo-space-xs);
220
- }
221
- .mr-s {
222
- margin-right: var(--lumo-space-s);
223
- }
224
- .mr-m {
225
- margin-right: var(--lumo-space-m);
226
- }
227
- .mr-l {
228
- margin-right: var(--lumo-space-l);
229
- }
230
- .mr-xl {
231
- margin-right: var(--lumo-space-xl);
232
- }
233
- .mr-auto {
234
- margin-right: auto;
235
- }
236
-
237
- /* === Margin (start) === */
238
- .-ms-xs {
239
- margin-inline-start: calc(var(--lumo-space-xs) / -1);
240
- }
241
- .-ms-s {
242
- margin-inline-start: calc(var(--lumo-space-s) / -1);
243
- }
244
- .-ms-m {
245
- margin-inline-start: calc(var(--lumo-space-m) / -1);
246
- }
247
- .-ms-l {
248
- margin-inline-start: calc(var(--lumo-space-l) / -1);
249
- }
250
- .-ms-xl {
251
- margin-inline-start: calc(var(--lumo-space-xl) / -1);
252
- }
253
- .ms-0 {
254
- margin-inline-start: 0;
255
- }
256
- .ms-xs {
257
- margin-inline-start: var(--lumo-space-xs);
258
- }
259
- .ms-s {
260
- margin-inline-start: var(--lumo-space-s);
261
- }
262
- .ms-m {
263
- margin-inline-start: var(--lumo-space-m);
264
- }
265
- .ms-l {
266
- margin-inline-start: var(--lumo-space-l);
267
- }
268
- .ms-xl {
269
- margin-inline-start: var(--lumo-space-xl);
270
- }
271
- .ms-auto {
272
- margin-inline-start: auto;
273
- }
274
-
275
- /* === Margin (top) === */
276
- .-mt-xs {
277
- margin-top: calc(var(--lumo-space-xs) / -1);
278
- }
279
- .-mt-s {
280
- margin-top: calc(var(--lumo-space-s) / -1);
281
- }
282
- .-mt-m {
283
- margin-top: calc(var(--lumo-space-m) / -1);
284
- }
285
- .-mt-l {
286
- margin-top: calc(var(--lumo-space-l) / -1);
287
- }
288
- .-mt-xl {
289
- margin-top: calc(var(--lumo-space-xl) / -1);
290
- }
291
- .mt-0 {
292
- margin-top: 0;
293
- }
294
- .mt-xs {
295
- margin-top: var(--lumo-space-xs);
296
- }
297
- .mt-s {
298
- margin-top: var(--lumo-space-s);
299
- }
300
- .mt-m {
301
- margin-top: var(--lumo-space-m);
302
- }
303
- .mt-l {
304
- margin-top: var(--lumo-space-l);
305
- }
306
- .mt-xl {
307
- margin-top: var(--lumo-space-xl);
308
- }
309
- .mt-auto {
310
- margin-top: auto;
311
- }
312
-
313
- /* === Margin (vertical) === */
314
- .-my-xs {
315
- margin-block: calc(var(--lumo-space-xs) / -1);
316
- }
317
- .-my-s {
318
- margin-block: calc(var(--lumo-space-s) / -1);
319
- }
320
- .-my-m {
321
- margin-block: calc(var(--lumo-space-m) / -1);
322
- }
323
- .-my-l {
324
- margin-block: calc(var(--lumo-space-l) / -1);
325
- }
326
- .-my-xl {
327
- margin-block: calc(var(--lumo-space-xl) / -1);
328
- }
329
- .my-0 {
330
- margin-block: 0;
331
- }
332
- .my-xs {
333
- margin-block: var(--lumo-space-xs);
334
- }
335
- .my-s {
336
- margin-block: var(--lumo-space-s);
337
- }
338
- .my-m {
339
- margin-block: var(--lumo-space-m);
340
- }
341
- .my-l {
342
- margin-block: var(--lumo-space-l);
343
- }
344
- .my-xl {
345
- margin-block: var(--lumo-space-xl);
346
- }
347
- .my-auto {
348
- margin-block: auto;
349
- }
350
-
351
- /* === Padding === */
352
- .p-0 {
353
- padding: 0;
354
- }
355
- .p-xs {
356
- padding: var(--lumo-space-xs);
357
- }
358
- .p-s {
359
- padding: var(--lumo-space-s);
360
- }
361
- .p-m {
362
- padding: var(--lumo-space-m);
363
- }
364
- .p-l {
365
- padding: var(--lumo-space-l);
366
- }
367
- .p-xl {
368
- padding: var(--lumo-space-xl);
369
- }
370
-
371
- /* === Padding (bottom) === */
372
- .pb-0 {
373
- padding-bottom: 0;
374
- }
375
- .pb-xs {
376
- padding-bottom: var(--lumo-space-xs);
377
- }
378
- .pb-s {
379
- padding-bottom: var(--lumo-space-s);
380
- }
381
- .pb-m {
382
- padding-bottom: var(--lumo-space-m);
383
- }
384
- .pb-l {
385
- padding-bottom: var(--lumo-space-l);
386
- }
387
- .pb-xl {
388
- padding-bottom: var(--lumo-space-xl);
389
- }
390
-
391
- /* === Padding (end) === */
392
- .pe-0 {
393
- padding-inline-end: 0;
394
- }
395
- .pe-xs {
396
- padding-inline-end: var(--lumo-space-xs);
397
- }
398
- .pe-s {
399
- padding-inline-end: var(--lumo-space-s);
400
- }
401
- .pe-m {
402
- padding-inline-end: var(--lumo-space-m);
403
- }
404
- .pe-l {
405
- padding-inline-end: var(--lumo-space-l);
406
- }
407
- .pe-xl {
408
- padding-inline-end: var(--lumo-space-xl);
409
- }
410
-
411
- /* === Padding (horizontal) === */
412
- .px-0 {
413
- padding-left: 0;
414
- padding-right: 0;
415
- }
416
- .px-xs {
417
- padding-left: var(--lumo-space-xs);
418
- padding-right: var(--lumo-space-xs);
419
- }
420
- .px-s {
421
- padding-left: var(--lumo-space-s);
422
- padding-right: var(--lumo-space-s);
423
- }
424
- .px-m {
425
- padding-left: var(--lumo-space-m);
426
- padding-right: var(--lumo-space-m);
427
- }
428
- .px-l {
429
- padding-left: var(--lumo-space-l);
430
- padding-right: var(--lumo-space-l);
431
- }
432
- .px-xl {
433
- padding-left: var(--lumo-space-xl);
434
- padding-right: var(--lumo-space-xl);
435
- }
436
-
437
- /* === Padding (left) === */
438
- .pl-0 {
439
- padding-left: 0;
440
- }
441
- .pl-xs {
442
- padding-left: var(--lumo-space-xs);
443
- }
444
- .pl-s {
445
- padding-left: var(--lumo-space-s);
446
- }
447
- .pl-m {
448
- padding-left: var(--lumo-space-m);
449
- }
450
- .pl-l {
451
- padding-left: var(--lumo-space-l);
452
- }
453
- .pl-xl {
454
- padding-left: var(--lumo-space-xl);
455
- }
456
-
457
- /* === Padding (right) === */
458
- .pr-0 {
459
- padding-right: 0;
460
- }
461
- .pr-xs {
462
- padding-right: var(--lumo-space-xs);
463
- }
464
- .pr-s {
465
- padding-right: var(--lumo-space-s);
466
- }
467
- .pr-m {
468
- padding-right: var(--lumo-space-m);
469
- }
470
- .pr-l {
471
- padding-right: var(--lumo-space-l);
472
- }
473
- .pr-xl {
474
- padding-right: var(--lumo-space-xl);
475
- }
476
-
477
- /* === Padding (start) === */
478
- .ps-0 {
479
- padding-inline-start: 0;
480
- }
481
- .ps-xs {
482
- padding-inline-start: var(--lumo-space-xs);
483
- }
484
- .ps-s {
485
- padding-inline-start: var(--lumo-space-s);
486
- }
487
- .ps-m {
488
- padding-inline-start: var(--lumo-space-m);
489
- }
490
- .ps-l {
491
- padding-inline-start: var(--lumo-space-l);
492
- }
493
- .ps-xl {
494
- padding-inline-start: var(--lumo-space-xl);
495
- }
496
-
497
- /* === Padding (top) === */
498
- .pt-0 {
499
- padding-top: 0;
500
- }
501
- .pt-xs {
502
- padding-top: var(--lumo-space-xs);
503
- }
504
- .pt-s {
505
- padding-top: var(--lumo-space-s);
506
- }
507
- .pt-m {
508
- padding-top: var(--lumo-space-m);
509
- }
510
- .pt-l {
511
- padding-top: var(--lumo-space-l);
512
- }
513
- .pt-xl {
514
- padding-top: var(--lumo-space-xl);
515
- }
516
-
517
- /* === Padding (vertical) === */
518
- .py-0 {
519
- padding-bottom: 0;
520
- padding-top: 0;
521
- }
522
- .py-xs {
523
- padding-bottom: var(--lumo-space-xs);
524
- padding-top: var(--lumo-space-xs);
525
- }
526
- .py-s {
527
- padding-bottom: var(--lumo-space-s);
528
- padding-top: var(--lumo-space-s);
529
- }
530
- .py-m {
531
- padding-bottom: var(--lumo-space-m);
532
- padding-top: var(--lumo-space-m);
533
- }
534
- .py-l {
535
- padding-bottom: var(--lumo-space-l);
536
- padding-top: var(--lumo-space-l);
537
- }
538
- .py-xl {
539
- padding-bottom: var(--lumo-space-xl);
540
- padding-top: var(--lumo-space-xl);
541
- }
542
- `;
package/utilities/transition.js DELETED
@@ -1,50 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2017 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
7
-
8
- export const transition = css`
9
- .transition {
10
- transition-property:
11
- -webkit-backdrop-filter, backdrop-filter, background-color, border-color, box-shadow, color, fill, filter,
12
- opacity, rotate, scale, stroke, text-decoration-color, transform, translate;
13
- transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
14
- transition-duration: var(--lumo-utility-transition-duration, 150ms);
15
- }
16
-
17
- .transition-all {
18
- transition-property: all;
19
- transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
20
- transition-duration: var(--lumo-utility-transition-duration, 150ms);
21
- }
22
-
23
- .transition-colors {
24
- transition-property: background-color, border-color, color, fill, stroke, text-decoration-color;
25
- transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
26
- transition-duration: var(--lumo-utility-transition-duration, 150ms);
27
- }
28
-
29
- .transition-opacity {
30
- transition-property: opacity;
31
- transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
32
- transition-duration: var(--lumo-utility-transition-duration, 150ms);
33
- }
34
-
35
- .transition-shadow {
36
- transition-property: box-shadow;
37
- transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
38
- transition-duration: var(--lumo-utility-transition-duration, 150ms);
39
- }
40
-
41
- .transition-transform {
42
- transition-property: rotate, scale, transform, translate;
43
- transition-timing-function: var(--lumo-utility-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1));
44
- transition-duration: var(--lumo-utility-transition-duration, 150ms);
45
- }
46
-
47
- .transition-none {
48
- transition-property: none;
49
- }
50
- `;