@vaadin/dialog 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.
- package/package.json +11 -14
- package/src/styles/vaadin-dialog-overlay-base-styles.js +13 -10
- package/src/vaadin-dialog-base-mixin.d.ts +9 -10
- package/src/vaadin-dialog-base-mixin.js +33 -11
- package/src/vaadin-dialog-draggable-mixin.js +2 -1
- package/src/vaadin-dialog-overlay-mixin.js +32 -19
- package/src/vaadin-dialog-overlay.js +11 -2
- package/src/vaadin-dialog-renderer-mixin.d.ts +3 -3
- package/src/vaadin-dialog-renderer-mixin.js +3 -3
- package/src/vaadin-dialog-size-mixin.d.ts +2 -2
- package/src/vaadin-dialog-size-mixin.js +2 -2
- package/src/vaadin-dialog.d.ts +5 -21
- package/src/vaadin-dialog.js +35 -33
- package/vaadin-dialog.js +1 -1
- package/web-types.json +18 -62
- package/web-types.lit.json +11 -25
- package/src/styles/vaadin-dialog-overlay-core-styles.d.ts +0 -10
- package/src/styles/vaadin-dialog-overlay-core-styles.js +0 -184
- package/theme/lumo/vaadin-dialog-styles.d.ts +0 -3
- package/theme/lumo/vaadin-dialog-styles.js +0 -109
- package/theme/lumo/vaadin-dialog.d.ts +0 -2
- package/theme/lumo/vaadin-dialog.js +0 -2
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
2
|
-
import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
|
|
3
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
4
|
-
|
|
5
|
-
const dialogOverlay = css`
|
|
6
|
-
/* Optical centering */
|
|
7
|
-
:host::before,
|
|
8
|
-
:host::after {
|
|
9
|
-
content: '';
|
|
10
|
-
flex-basis: 0;
|
|
11
|
-
flex-grow: 1;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
:host::after {
|
|
15
|
-
flex-grow: 1.1;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
[part='overlay'] {
|
|
19
|
-
border-radius: var(--lumo-border-radius-l);
|
|
20
|
-
box-shadow:
|
|
21
|
-
0 0 0 1px var(--lumo-shade-5pct),
|
|
22
|
-
var(--lumo-box-shadow-xl);
|
|
23
|
-
background-image: none;
|
|
24
|
-
outline: none;
|
|
25
|
-
-webkit-tap-highlight-color: transparent;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
[part='content'] {
|
|
29
|
-
padding: var(--lumo-space-l);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:host(:is([has-header], [has-title])) [part='header'] + [part='content'] {
|
|
33
|
-
padding-top: 0;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
[part='header'],
|
|
37
|
-
[part='header-content'],
|
|
38
|
-
[part='footer'] {
|
|
39
|
-
gap: var(--lumo-space-xs) var(--lumo-space-s);
|
|
40
|
-
line-height: var(--lumo-line-height-s);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
[part='header'] {
|
|
44
|
-
padding: var(--lumo-space-m);
|
|
45
|
-
background-color: var(--lumo-base-color);
|
|
46
|
-
border-radius: var(--lumo-border-radius-l) var(--lumo-border-radius-l) 0 0; /* Needed for Safari */
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
[part='footer'] {
|
|
50
|
-
padding: var(--lumo-space-s) var(--lumo-space-m);
|
|
51
|
-
background-color: var(--lumo-contrast-5pct);
|
|
52
|
-
border-radius: 0 0 var(--lumo-border-radius-l) var(--lumo-border-radius-l); /* Needed for Safari */
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
[part='title'] {
|
|
56
|
-
font-size: var(--lumo-font-size-xl);
|
|
57
|
-
font-weight: 600;
|
|
58
|
-
color: var(--lumo-header-text-color);
|
|
59
|
-
margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/* No padding */
|
|
63
|
-
:host([theme~='no-padding']) [part='content'] {
|
|
64
|
-
padding: 0 !important;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
@media (min-height: 320px) {
|
|
68
|
-
:host([overflow~='top']) [part='header'] {
|
|
69
|
-
box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/* Animations */
|
|
74
|
-
|
|
75
|
-
:host([opening]),
|
|
76
|
-
:host([closing]) {
|
|
77
|
-
animation: 0.25s lumo-overlay-dummy-animation;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
:host([opening]) [part='overlay'] {
|
|
81
|
-
animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
@keyframes vaadin-dialog-enter {
|
|
85
|
-
0% {
|
|
86
|
-
opacity: 0;
|
|
87
|
-
transform: scale(0.95);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
:host([closing]) [part='overlay'] {
|
|
92
|
-
animation: 0.1s 0.03s vaadin-dialog-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
:host([closing]) [part='backdrop'] {
|
|
96
|
-
animation-delay: 0.05s;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
@keyframes vaadin-dialog-exit {
|
|
100
|
-
100% {
|
|
101
|
-
opacity: 0;
|
|
102
|
-
transform: scale(1.02);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
`;
|
|
106
|
-
|
|
107
|
-
registerStyles('vaadin-dialog-overlay', [overlay, dialogOverlay], { moduleId: 'lumo-dialog' });
|
|
108
|
-
|
|
109
|
-
export { dialogOverlay };
|