@vaadin/react-components 25.0.0-alpha2 → 25.0.0-alpha21
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/ConfirmDialog.d.ts +1 -1
- package/ConfirmDialog.d.ts.map +1 -1
- package/ConfirmDialog.js.map +1 -1
- package/ContextMenu.js +1 -1
- package/ContextMenu.js.map +2 -2
- package/Dialog.d.ts +2 -2
- package/Dialog.d.ts.map +1 -1
- package/Dialog.js +1 -1
- package/Dialog.js.map +1 -1
- package/LoginOverlay.js +1 -1
- package/LoginOverlay.js.map +2 -2
- package/MultiSelectComboBox.js +1 -1
- package/MultiSelectComboBox.js.map +2 -2
- package/Popover.d.ts +8 -2
- package/Popover.d.ts.map +1 -1
- package/Popover.js +1 -1
- package/Popover.js.map +3 -3
- package/Select.js.map +2 -2
- package/TabSheet.d.ts +0 -23
- package/TabSheet.d.ts.map +1 -1
- package/TabSheet.js +1 -1
- package/TabSheet.js.map +3 -3
- package/TimePicker.d.ts +1 -1
- package/TimePicker.js +1 -1
- package/TimePicker.js.map +2 -2
- package/Tooltip.js +1 -1
- package/Tooltip.js.map +2 -2
- package/css/lumo/Utility.module.css +16 -47
- package/css/lumo/utilities/Accessibility.module.css +17 -15
- package/css/lumo/utilities/Background.module.css +189 -150
- package/css/lumo/utilities/Border.module.css +173 -141
- package/css/lumo/utilities/Filter.module.css +35 -26
- package/css/lumo/utilities/FlexboxGrid.module.css +780 -2
- package/css/lumo/utilities/Layout.module.css +544 -413
- package/css/lumo/utilities/Shadows.module.css +27 -20
- package/css/lumo/utilities/Sizing.module.css +142 -115
- package/css/lumo/utilities/Spacing.module.css +682 -536
- package/css/lumo/utilities/Transition.module.css +46 -43
- package/css/lumo/utilities/Typography.module.css +366 -280
- package/generated/ContextMenu.d.ts +2 -0
- package/generated/ContextMenu.d.ts.map +1 -1
- package/generated/GridColumnGroup.d.ts +1 -1
- package/generated/LoginOverlay.d.ts +2 -0
- package/generated/LoginOverlay.d.ts.map +1 -1
- package/generated/MultiSelectComboBox.d.ts +2 -2
- package/generated/MultiSelectComboBox.d.ts.map +1 -1
- package/generated/TimePicker.d.ts +2 -2
- package/generated/TimePicker.d.ts.map +1 -1
- package/generated/Tooltip.d.ts +8 -3
- package/generated/Tooltip.d.ts.map +1 -1
- package/package.json +69 -77
- package/renderers/useRenderer.js +1 -1
- package/renderers/useRenderer.js.map +2 -2
- package/utils/createComponent.js +1 -1
- package/utils/createComponent.js.map +2 -2
- package/utils/warnings.d.ts +2 -0
- package/utils/warnings.d.ts.map +1 -0
- package/utils/warnings.js +2 -0
- package/utils/warnings.js.map +7 -0
- package/css/Lumo.css +0 -15
- package/css/lumo/Badge.css +0 -165
- package/css/lumo/Color.css +0 -122
- package/css/lumo/ColorBase.css +0 -87
- package/css/lumo/Font.css +0 -22
- package/css/lumo/FontIcons.css +0 -57
- package/css/lumo/Globals.css +0 -85
- package/css/lumo/Sizing.css +0 -17
- package/css/lumo/Spacing.css +0 -25
- package/css/lumo/Style.css +0 -21
- package/css/lumo/Typography.css +0 -96
- package/css/lumo/UserColors.css +0 -22
- package/css/lumo/mixins/FieldButton.css +0 -29
- package/css/lumo/mixins/MenuOverlay.css +0 -66
- package/css/lumo/mixins/MenuOverlayCore.css +0 -32
- package/css/lumo/mixins/Overlay.css +0 -67
- package/css/lumo/mixins/RequiredField.css +0 -103
- package/css/lumo/utilities/FlexboxAndGrid.module.css +0 -613
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/* Generated file, do not edit */
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
html([opening]),
|
|
5
|
-
:host([closing]) {
|
|
6
|
-
animation: 0.14s lumo-overlay-dummy-animation;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
[part='overlay'] {
|
|
10
|
-
will-change: opacity, transform;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([opening]) [part='overlay'] {
|
|
14
|
-
animation: 0.1s lumo-menu-overlay-enter ease-out both;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
@keyframes lumo-menu-overlay-enter {
|
|
18
|
-
0% {
|
|
19
|
-
opacity: 0;
|
|
20
|
-
transform: translateY(-4px);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:host([closing]) [part='overlay'] {
|
|
25
|
-
animation: 0.1s lumo-menu-overlay-exit both;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
@keyframes lumo-menu-overlay-exit {
|
|
29
|
-
100% {
|
|
30
|
-
opacity: 0;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
/* Generated file, do not edit */
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
html {
|
|
5
|
-
top: var(--lumo-space-m);
|
|
6
|
-
right: var(--lumo-space-m);
|
|
7
|
-
bottom: var(--lumo-space-m);
|
|
8
|
-
left: var(--lumo-space-m);
|
|
9
|
-
/* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
|
|
10
|
-
/* stylelint-disable-next-line */
|
|
11
|
-
outline: 0px solid transparent;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
[part='overlay'] {
|
|
15
|
-
background-color: var(--lumo-base-color);
|
|
16
|
-
background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
|
|
17
|
-
border-radius: var(--lumo-border-radius-m);
|
|
18
|
-
box-shadow:
|
|
19
|
-
0 0 0 1px var(--lumo-shade-5pct),
|
|
20
|
-
var(--lumo-box-shadow-m);
|
|
21
|
-
color: var(--lumo-body-text-color);
|
|
22
|
-
font-family: var(--lumo-font-family);
|
|
23
|
-
font-size: var(--lumo-font-size-m);
|
|
24
|
-
font-weight: 400;
|
|
25
|
-
line-height: var(--lumo-line-height-m);
|
|
26
|
-
letter-spacing: 0;
|
|
27
|
-
text-transform: none;
|
|
28
|
-
-webkit-text-size-adjust: 100%;
|
|
29
|
-
-webkit-font-smoothing: antialiased;
|
|
30
|
-
-moz-osx-font-smoothing: grayscale;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
[part='content'] {
|
|
34
|
-
padding: var(--lumo-space-xs);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
[part='backdrop'] {
|
|
38
|
-
background-color: var(--lumo-shade-20pct);
|
|
39
|
-
animation: 0.2s lumo-overlay-backdrop-enter both;
|
|
40
|
-
will-change: opacity;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
@keyframes lumo-overlay-backdrop-enter {
|
|
44
|
-
0% {
|
|
45
|
-
opacity: 0;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:host([closing]) [part='backdrop'] {
|
|
50
|
-
animation: 0.2s lumo-overlay-backdrop-exit both;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
@keyframes lumo-overlay-backdrop-exit {
|
|
54
|
-
100% {
|
|
55
|
-
opacity: 0;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
@keyframes lumo-overlay-dummy-animation {
|
|
60
|
-
0% {
|
|
61
|
-
opacity: 1;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
100% {
|
|
65
|
-
opacity: 1;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
/* Generated file, do not edit */
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
[part='label'] {
|
|
5
|
-
align-self: flex-start;
|
|
6
|
-
color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
|
|
7
|
-
font-weight: var(--vaadin-input-field-label-font-weight, 500);
|
|
8
|
-
font-size: var(--vaadin-input-field-label-font-size, var(--lumo-font-size-s));
|
|
9
|
-
transition: color 0.2s;
|
|
10
|
-
line-height: 1;
|
|
11
|
-
padding-inline-start: calc(var(--lumo-border-radius-m) / 4);
|
|
12
|
-
padding-inline-end: 1em;
|
|
13
|
-
padding-bottom: 0.5em;
|
|
14
|
-
/* As a workaround for diacritics being cut off, add a top padding and a
|
|
15
|
-
negative margin to compensate */
|
|
16
|
-
padding-top: 0.25em;
|
|
17
|
-
margin-top: -0.25em;
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
white-space: nowrap;
|
|
20
|
-
text-overflow: ellipsis;
|
|
21
|
-
position: relative;
|
|
22
|
-
max-width: 100%;
|
|
23
|
-
box-sizing: border-box;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
html([focused]:not([readonly])) [part='label'] {
|
|
27
|
-
color: var(--vaadin-input-field-focused-label-color, var(--lumo-primary-text-color));
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
:host(:hover:not([readonly]):not([focused])) [part='label'] {
|
|
31
|
-
color: var(--vaadin-input-field-hovered-label-color, var(--lumo-body-text-color));
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/* Touch device adjustment */
|
|
35
|
-
@media (pointer: coarse) {
|
|
36
|
-
:host(:hover:not([readonly]):not([focused])) [part='label'] {
|
|
37
|
-
color: var(--vaadin-input-field-label-color, var(--lumo-secondary-text-color));
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:host([has-label])::before {
|
|
42
|
-
margin-top: calc(var(--lumo-font-size-s) * 1.5);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
:host([has-label][theme~='small'])::before {
|
|
46
|
-
margin-top: calc(var(--lumo-font-size-xs) * 1.5);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:host([has-label]) {
|
|
50
|
-
padding-top: var(--lumo-space-m);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
:host([has-label]) ::slotted([slot='tooltip']) {
|
|
54
|
-
--vaadin-tooltip-offset-bottom: calc((var(--lumo-space-m) - var(--lumo-space-xs)) * -1);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
:host([required]) [part='required-indicator']::after {
|
|
58
|
-
content: var(--lumo-required-field-indicator, '\\2022');
|
|
59
|
-
color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
|
|
60
|
-
position: absolute;
|
|
61
|
-
right: 0;
|
|
62
|
-
width: 1em;
|
|
63
|
-
text-align: center;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
:host([invalid]) [part='required-indicator']::after {
|
|
67
|
-
color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
[part='error-message'] {
|
|
71
|
-
margin-left: calc(var(--lumo-border-radius-m) / 4);
|
|
72
|
-
font-size: var(--vaadin-input-field-error-font-size, var(--lumo-font-size-xs));
|
|
73
|
-
line-height: var(--lumo-line-height-xs);
|
|
74
|
-
font-weight: var(--vaadin-input-field-error-font-weight, 400);
|
|
75
|
-
color: var(--vaadin-input-field-error-color, var(--lumo-error-text-color));
|
|
76
|
-
will-change: max-height;
|
|
77
|
-
transition: 0.4s max-height;
|
|
78
|
-
max-height: 5em;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
:host([has-error-message]) [part='error-message']::before,
|
|
82
|
-
:host([has-error-message]) [part='error-message']::after {
|
|
83
|
-
content: '';
|
|
84
|
-
display: block;
|
|
85
|
-
height: 0.4em;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
:host(:not([invalid])) [part='error-message'] {
|
|
89
|
-
max-height: 0;
|
|
90
|
-
overflow: hidden;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
/* RTL specific styles */
|
|
94
|
-
|
|
95
|
-
:host([dir='rtl']) [part='required-indicator']::after {
|
|
96
|
-
right: auto;
|
|
97
|
-
left: 0;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
:host([dir='rtl']) [part='error-message'] {
|
|
101
|
-
margin-left: 0;
|
|
102
|
-
margin-right: calc(var(--lumo-border-radius-m) / 4);
|
|
103
|
-
}
|