@vaadin/master-detail-layout 25.2.0-alpha1 → 25.2.0-alpha10
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/custom-elements.json +272 -25
- package/package.json +8 -8
- package/src/styles/vaadin-master-detail-layout-base-styles.js +219 -56
- package/src/vaadin-master-detail-layout-helpers.js +173 -0
- package/src/vaadin-master-detail-layout.d.ts +90 -22
- package/src/vaadin-master-detail-layout.js +393 -186
- package/web-types.json +62 -54
- package/web-types.lit.json +25 -11
- package/src/styles/vaadin-master-detail-layout-transition-base-styles.js +0 -107
package/web-types.json
CHANGED
|
@@ -1,34 +1,48 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/master-detail-layout",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-master-detail-layout",
|
|
11
|
-
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name
|
|
11
|
+
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Slots\n\nThe component has two main content areas: the master area (default slot)\nand the detail area (`detail` slot). When the detail doesn't fit next to\nthe master, it is shown as an overlay on top of the master area:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail\">Detail content</div>\n</vaadin-master-detail-layout>\n```\n\nThe component also supports a `detail-placeholder` slot for content shown\nin the detail area when no detail is selected. Unlike the `detail` slot,\nthe placeholder is simply hidden when it doesn't fit next to the master area,\nrather than shown as an overlay:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail-placeholder\">Select an item</div>\n</vaadin-master-detail-layout>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------------|----------------------\n`backdrop` | Backdrop covering the master area in the overlay mode\n`master` | The master area\n`detail` | The detail area\n`detail-placeholder` | The detail placeholder area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------------|----------------------\n`expand-master` | Set when the master area expands to fill available space.\n`expand-detail` | Set when the detail area expands to fill available space.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided and visible.\n`has-detail-placeholder` | Set when the detail placeholder content is provided.\n`overlay` | Set when columns don't fit and the detail is shown as an overlay.\n`overlay-containment` | Set to `layout` or `page`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "detail-size",
|
|
15
|
-
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout.
|
|
15
|
+
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"string"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"string"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
24
22
|
{
|
|
25
|
-
"name": "expand",
|
|
26
|
-
"description": "
|
|
23
|
+
"name": "expand-detail",
|
|
24
|
+
"description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.",
|
|
27
25
|
"value": {
|
|
28
26
|
"type": [
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
"boolean"
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"name": "expand-master",
|
|
33
|
+
"description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.",
|
|
34
|
+
"value": {
|
|
35
|
+
"type": [
|
|
36
|
+
"boolean"
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "force-overlay",
|
|
42
|
+
"description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
|
|
43
|
+
"value": {
|
|
44
|
+
"type": [
|
|
45
|
+
"boolean"
|
|
32
46
|
]
|
|
33
47
|
}
|
|
34
48
|
},
|
|
@@ -37,9 +51,7 @@
|
|
|
37
51
|
"description": "Size (in CSS length units) to be set on the master area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 30em.",
|
|
38
52
|
"value": {
|
|
39
53
|
"type": [
|
|
40
|
-
"string"
|
|
41
|
-
"null",
|
|
42
|
-
"undefined"
|
|
54
|
+
"string"
|
|
43
55
|
]
|
|
44
56
|
}
|
|
45
57
|
},
|
|
@@ -48,9 +60,7 @@
|
|
|
48
60
|
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
49
61
|
"value": {
|
|
50
62
|
"type": [
|
|
51
|
-
"boolean"
|
|
52
|
-
"null",
|
|
53
|
-
"undefined"
|
|
63
|
+
"boolean"
|
|
54
64
|
]
|
|
55
65
|
}
|
|
56
66
|
},
|
|
@@ -59,20 +69,16 @@
|
|
|
59
69
|
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
60
70
|
"value": {
|
|
61
71
|
"type": [
|
|
62
|
-
"string"
|
|
63
|
-
"null",
|
|
64
|
-
"undefined"
|
|
72
|
+
"string"
|
|
65
73
|
]
|
|
66
74
|
}
|
|
67
75
|
},
|
|
68
76
|
{
|
|
69
77
|
"name": "overlay-containment",
|
|
70
|
-
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `
|
|
78
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
71
79
|
"value": {
|
|
72
80
|
"type": [
|
|
73
|
-
"string"
|
|
74
|
-
"null",
|
|
75
|
-
"undefined"
|
|
81
|
+
"string"
|
|
76
82
|
]
|
|
77
83
|
}
|
|
78
84
|
},
|
|
@@ -81,9 +87,7 @@
|
|
|
81
87
|
"description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.",
|
|
82
88
|
"value": {
|
|
83
89
|
"type": [
|
|
84
|
-
"string"
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
90
|
+
"string"
|
|
87
91
|
]
|
|
88
92
|
}
|
|
89
93
|
},
|
|
@@ -103,23 +107,37 @@
|
|
|
103
107
|
"properties": [
|
|
104
108
|
{
|
|
105
109
|
"name": "detailSize",
|
|
106
|
-
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout.
|
|
110
|
+
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
|
|
111
|
+
"value": {
|
|
112
|
+
"type": [
|
|
113
|
+
"string"
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"name": "expandDetail",
|
|
119
|
+
"description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.",
|
|
120
|
+
"value": {
|
|
121
|
+
"type": [
|
|
122
|
+
"boolean"
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"name": "expandMaster",
|
|
128
|
+
"description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.",
|
|
107
129
|
"value": {
|
|
108
130
|
"type": [
|
|
109
|
-
"
|
|
110
|
-
"null",
|
|
111
|
-
"undefined"
|
|
131
|
+
"boolean"
|
|
112
132
|
]
|
|
113
133
|
}
|
|
114
134
|
},
|
|
115
135
|
{
|
|
116
|
-
"name": "
|
|
117
|
-
"description": "
|
|
136
|
+
"name": "forceOverlay",
|
|
137
|
+
"description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
|
|
118
138
|
"value": {
|
|
119
139
|
"type": [
|
|
120
|
-
"
|
|
121
|
-
"null",
|
|
122
|
-
"undefined"
|
|
140
|
+
"boolean"
|
|
123
141
|
]
|
|
124
142
|
}
|
|
125
143
|
},
|
|
@@ -128,9 +146,7 @@
|
|
|
128
146
|
"description": "Size (in CSS length units) to be set on the master area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 30em.",
|
|
129
147
|
"value": {
|
|
130
148
|
"type": [
|
|
131
|
-
"string"
|
|
132
|
-
"null",
|
|
133
|
-
"undefined"
|
|
149
|
+
"string"
|
|
134
150
|
]
|
|
135
151
|
}
|
|
136
152
|
},
|
|
@@ -139,9 +155,7 @@
|
|
|
139
155
|
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
140
156
|
"value": {
|
|
141
157
|
"type": [
|
|
142
|
-
"boolean"
|
|
143
|
-
"null",
|
|
144
|
-
"undefined"
|
|
158
|
+
"boolean"
|
|
145
159
|
]
|
|
146
160
|
}
|
|
147
161
|
},
|
|
@@ -150,20 +164,16 @@
|
|
|
150
164
|
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
151
165
|
"value": {
|
|
152
166
|
"type": [
|
|
153
|
-
"string"
|
|
154
|
-
"null",
|
|
155
|
-
"undefined"
|
|
167
|
+
"string"
|
|
156
168
|
]
|
|
157
169
|
}
|
|
158
170
|
},
|
|
159
171
|
{
|
|
160
172
|
"name": "overlayContainment",
|
|
161
|
-
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `
|
|
173
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
162
174
|
"value": {
|
|
163
175
|
"type": [
|
|
164
|
-
"string"
|
|
165
|
-
"null",
|
|
166
|
-
"undefined"
|
|
176
|
+
"string"
|
|
167
177
|
]
|
|
168
178
|
}
|
|
169
179
|
},
|
|
@@ -172,9 +182,7 @@
|
|
|
172
182
|
"description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.",
|
|
173
183
|
"value": {
|
|
174
184
|
"type": [
|
|
175
|
-
"string"
|
|
176
|
-
"null",
|
|
177
|
-
"undefined"
|
|
185
|
+
"string"
|
|
178
186
|
]
|
|
179
187
|
}
|
|
180
188
|
}
|
|
@@ -182,11 +190,11 @@
|
|
|
182
190
|
"events": [
|
|
183
191
|
{
|
|
184
192
|
"name": "backdrop-click",
|
|
185
|
-
"description": "
|
|
193
|
+
"description": "Fired when the user clicks the backdrop in the overlay mode."
|
|
186
194
|
},
|
|
187
195
|
{
|
|
188
196
|
"name": "detail-escape-press",
|
|
189
|
-
"description": "
|
|
197
|
+
"description": "Fired when the user presses Escape in the detail area."
|
|
190
198
|
}
|
|
191
199
|
]
|
|
192
200
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/master-detail-layout",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,26 +16,33 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-master-detail-layout",
|
|
19
|
-
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name
|
|
19
|
+
"description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Slots\n\nThe component has two main content areas: the master area (default slot)\nand the detail area (`detail` slot). When the detail doesn't fit next to\nthe master, it is shown as an overlay on top of the master area:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail\">Detail content</div>\n</vaadin-master-detail-layout>\n```\n\nThe component also supports a `detail-placeholder` slot for content shown\nin the detail area when no detail is selected. Unlike the `detail` slot,\nthe placeholder is simply hidden when it doesn't fit next to the master area,\nrather than shown as an overlay:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail-placeholder\">Select an item</div>\n</vaadin-master-detail-layout>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------------------|----------------------\n`backdrop` | Backdrop covering the master area in the overlay mode\n`master` | The master area\n`detail` | The detail area\n`detail-placeholder` | The detail placeholder area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------------|----------------------\n`expand-master` | Set when the master area expands to fill available space.\n`expand-detail` | Set when the detail area expands to fill available space.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided and visible.\n`has-detail-placeholder` | Set when the detail placeholder content is provided.\n`overlay` | Set when columns don't fit and the detail is shown as an overlay.\n`overlay-containment` | Set to `layout` or `page`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
23
|
-
"name": "
|
|
24
|
-
"description": "
|
|
23
|
+
"name": ".detailSize",
|
|
24
|
+
"description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
|
|
25
25
|
"value": {
|
|
26
26
|
"kind": "expression"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": "
|
|
31
|
-
"description": "
|
|
30
|
+
"name": "?expandDetail",
|
|
31
|
+
"description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.",
|
|
32
|
+
"value": {
|
|
33
|
+
"kind": "expression"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"name": "?expandMaster",
|
|
38
|
+
"description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|
|
35
42
|
},
|
|
36
43
|
{
|
|
37
|
-
"name": "
|
|
38
|
-
"description": "
|
|
44
|
+
"name": "?forceOverlay",
|
|
45
|
+
"description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
|
|
39
46
|
"value": {
|
|
40
47
|
"kind": "expression"
|
|
41
48
|
}
|
|
@@ -47,6 +54,13 @@
|
|
|
47
54
|
"kind": "expression"
|
|
48
55
|
}
|
|
49
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?noAnimation",
|
|
59
|
+
"description": "When true, the layout does not use animated transitions for the detail area.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
50
64
|
{
|
|
51
65
|
"name": ".orientation",
|
|
52
66
|
"description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
|
|
@@ -56,7 +70,7 @@
|
|
|
56
70
|
},
|
|
57
71
|
{
|
|
58
72
|
"name": ".overlayContainment",
|
|
59
|
-
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `
|
|
73
|
+
"description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
60
74
|
"value": {
|
|
61
75
|
"kind": "expression"
|
|
62
76
|
}
|
|
@@ -70,14 +84,14 @@
|
|
|
70
84
|
},
|
|
71
85
|
{
|
|
72
86
|
"name": "@backdrop-click",
|
|
73
|
-
"description": "
|
|
87
|
+
"description": "Fired when the user clicks the backdrop in the overlay mode.",
|
|
74
88
|
"value": {
|
|
75
89
|
"kind": "expression"
|
|
76
90
|
}
|
|
77
91
|
},
|
|
78
92
|
{
|
|
79
93
|
"name": "@detail-escape-press",
|
|
80
|
-
"description": "
|
|
94
|
+
"description": "Fired when the user presses Escape in the detail area.",
|
|
81
95
|
"value": {
|
|
82
96
|
"kind": "expression"
|
|
83
97
|
}
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2025 - 2026 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const masterDetailLayoutTransitionStyles = css`
|
|
9
|
-
@media (prefers-reduced-motion: no-preference) {
|
|
10
|
-
html {
|
|
11
|
-
--_vaadin-mdl-dir-multiplier: 1;
|
|
12
|
-
--_vaadin-mdl-easing: cubic-bezier(0.78, 0, 0.22, 1);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
html[dir='rtl'] {
|
|
16
|
-
--_vaadin-mdl-dir-multiplier: -1;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
::view-transition-group(vaadin-mdl-backdrop),
|
|
20
|
-
::view-transition-group(vaadin-mdl-master),
|
|
21
|
-
::view-transition-group(vaadin-mdl-detail) {
|
|
22
|
-
animation-duration: 0.4s;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
::view-transition-group(vaadin-mdl-master),
|
|
26
|
-
::view-transition-group(vaadin-mdl-detail) {
|
|
27
|
-
animation-timing-function: var(--_vaadin-mdl-easing);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
::view-transition-image-pair(vaadin-mdl-master),
|
|
31
|
-
::view-transition-image-pair(vaadin-mdl-detail),
|
|
32
|
-
::view-transition-new(vaadin-mdl-master),
|
|
33
|
-
::view-transition-new(vaadin-mdl-detail),
|
|
34
|
-
::view-transition-old(vaadin-mdl-master),
|
|
35
|
-
::view-transition-old(vaadin-mdl-detail) {
|
|
36
|
-
animation-timing-function: inherit;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
/* Needed to promote the backdrop on top the master during the transition */
|
|
40
|
-
vaadin-master-detail-layout[transition]::part(backdrop) {
|
|
41
|
-
view-transition-name: vaadin-mdl-backdrop;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
vaadin-master-detail-layout[transition][has-detail]:not([transition='replace']):not([overflow])::part(detail),
|
|
45
|
-
vaadin-master-detail-layout[transition][has-detail][overflow]::part(detail) {
|
|
46
|
-
view-transition-name: vaadin-mdl-detail;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
::view-transition-group(vaadin-mdl-detail) {
|
|
50
|
-
clip-path: inset(0);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
::view-transition-new(vaadin-mdl-detail),
|
|
54
|
-
::view-transition-old(vaadin-mdl-detail) {
|
|
55
|
-
animation-name: vaadin-mdl-detail-slide-in;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
::view-transition-old(vaadin-mdl-detail) {
|
|
59
|
-
animation-direction: reverse;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@keyframes vaadin-mdl-detail-slide-in {
|
|
63
|
-
0% {
|
|
64
|
-
translate: calc((100% + 30px) * var(--_vaadin-mdl-dir-multiplier));
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
vaadin-master-detail-layout[transition]::part(master) {
|
|
69
|
-
view-transition-name: vaadin-mdl-master;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
::view-transition-new(vaadin-mdl-master),
|
|
73
|
-
::view-transition-old(vaadin-mdl-master) {
|
|
74
|
-
object-fit: none;
|
|
75
|
-
object-position: 0% 0;
|
|
76
|
-
width: 100%;
|
|
77
|
-
height: 100%;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
:dir(rtl)::view-transition-new(vaadin-mdl-master),
|
|
81
|
-
:dir(rtl)::view-transition-old(vaadin-mdl-master) {
|
|
82
|
-
object-position: 100% 0;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
/* prettier-ignore */
|
|
86
|
-
vaadin-master-detail-layout[orientation='vertical'][has-detail]:not([overflow])[transition]:not([transition='replace'])::part(detail),
|
|
87
|
-
vaadin-master-detail-layout[orientation='vertical'][has-detail][overflow][transition]::part(detail) {
|
|
88
|
-
view-transition-name: vaadin-mdl-detail;
|
|
89
|
-
view-transition-class: vertical;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
::view-transition-new(vaadin-mdl-detail.vertical),
|
|
93
|
-
::view-transition-old(vaadin-mdl-detail.vertical) {
|
|
94
|
-
animation-name: vaadin-mdl-vertical-detail-slide-in;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
::view-transition-old(vaadin-mdl-detail.vertical) {
|
|
98
|
-
animation-direction: reverse;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
@keyframes vaadin-mdl-vertical-detail-slide-in {
|
|
102
|
-
0% {
|
|
103
|
-
transform: translateY(calc(100% + 30px));
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
`;
|