/
vaadin-dialog-styles.html
69 lines (57 loc) · 1.61 KB
/
vaadin-dialog-styles.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<link rel="import" href="../../../vaadin-lumo-styles/spacing.html">
<link rel="import" href="../../../vaadin-lumo-styles/mixins/overlay.html">
<dom-module id="lumo-dialog" theme-for="vaadin-dialog-overlay">
<template>
<style include="lumo-overlay">
/* Optical centering */
:host::before,
:host::after {
content: "";
flex-basis: 0;
flex-grow: 1;
}
:host::after {
flex-grow: 1.1;
}
[part="overlay"] {
box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl);
background-image: none;
outline: none;
-webkit-tap-highlight-color: transparent;
}
[part="content"] {
padding: var(--lumo-space-l);
}
/* No padding */
:host([theme~='no-padding']) [part='content'] {
padding: 0;
}
/* Animations */
:host([opening]),
:host([closing]) {
animation: 0.25s lumo-overlay-dummy-animation;
}
:host([opening]) [part="overlay"] {
animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(.215, .61, .355, 1) both;
}
@keyframes vaadin-dialog-enter {
0% {
opacity: 0;
transform: scale(0.95);
}
}
:host([closing]) [part="overlay"] {
animation: 0.1s 0.03s vaadin-dialog-exit cubic-bezier(.55, .055, .675, .19) both;
}
:host([closing]) [part="backdrop"] {
animation-delay: 0.05s;
}
@keyframes vaadin-dialog-exit {
100% {
opacity: 0;
transform: scale(1.02);
}
}
</style>
</template>
</dom-module>