@vaadin/master-detail-layout 25.1.0 → 25.2.0-alpha2
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 +35 -84
- package/package.json +8 -8
- package/src/styles/vaadin-master-detail-layout-base-styles.js +107 -117
- package/src/vaadin-master-detail-layout.d.ts +61 -67
- package/src/vaadin-master-detail-layout.js +450 -295
- package/web-types.json +31 -75
- package/web-types.lit.json +15 -29
- package/src/styles/vaadin-master-detail-layout-transition-base-styles.js +0 -147
package/custom-elements.json
CHANGED
|
@@ -23,29 +23,9 @@
|
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
26
|
-
"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
|
|
26
|
+
"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` | Set to `master`, `detail`, or `both`.\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 `viewport`.\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.",
|
|
27
27
|
"name": "MasterDetailLayout",
|
|
28
28
|
"members": [
|
|
29
|
-
{
|
|
30
|
-
"kind": "field",
|
|
31
|
-
"name": "containment",
|
|
32
|
-
"privacy": "public",
|
|
33
|
-
"type": {
|
|
34
|
-
"text": "string"
|
|
35
|
-
},
|
|
36
|
-
"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 `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
37
|
-
"attribute": "containment"
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
"kind": "field",
|
|
41
|
-
"name": "detailMinSize",
|
|
42
|
-
"privacy": "public",
|
|
43
|
-
"type": {
|
|
44
|
-
"text": "string"
|
|
45
|
-
},
|
|
46
|
-
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
47
|
-
"attribute": "detail-min-size"
|
|
48
|
-
},
|
|
49
29
|
{
|
|
50
30
|
"kind": "field",
|
|
51
31
|
"name": "detailSize",
|
|
@@ -53,28 +33,18 @@
|
|
|
53
33
|
"type": {
|
|
54
34
|
"text": "string"
|
|
55
35
|
},
|
|
56
|
-
"description": "
|
|
36
|
+
"description": "Size (in CSS length units) to be set on the detail 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 15em.",
|
|
57
37
|
"attribute": "detail-size"
|
|
58
38
|
},
|
|
59
39
|
{
|
|
60
40
|
"kind": "field",
|
|
61
|
-
"name": "
|
|
62
|
-
"privacy": "public",
|
|
63
|
-
"type": {
|
|
64
|
-
"text": "boolean"
|
|
65
|
-
},
|
|
66
|
-
"description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
|
|
67
|
-
"attribute": "force-overlay"
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"kind": "field",
|
|
71
|
-
"name": "masterMinSize",
|
|
41
|
+
"name": "expand",
|
|
72
42
|
"privacy": "public",
|
|
73
43
|
"type": {
|
|
74
44
|
"text": "string"
|
|
75
45
|
},
|
|
76
|
-
"description": "
|
|
77
|
-
"attribute": "
|
|
46
|
+
"description": "Controls which column(s) expand to fill available space.\nPossible values: `'master'`, `'detail'`, `'both'`.\nDefaults to `'master'`.",
|
|
47
|
+
"attribute": "expand"
|
|
78
48
|
},
|
|
79
49
|
{
|
|
80
50
|
"kind": "field",
|
|
@@ -83,7 +53,7 @@
|
|
|
83
53
|
"type": {
|
|
84
54
|
"text": "string"
|
|
85
55
|
},
|
|
86
|
-
"description": "
|
|
56
|
+
"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.",
|
|
87
57
|
"attribute": "master-size"
|
|
88
58
|
},
|
|
89
59
|
{
|
|
@@ -108,18 +78,23 @@
|
|
|
108
78
|
},
|
|
109
79
|
{
|
|
110
80
|
"kind": "field",
|
|
111
|
-
"name": "
|
|
112
|
-
"
|
|
81
|
+
"name": "overlayContainment",
|
|
82
|
+
"privacy": "public",
|
|
83
|
+
"type": {
|
|
84
|
+
"text": "string"
|
|
85
|
+
},
|
|
86
|
+
"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 `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
87
|
+
"attribute": "overlay-containment"
|
|
113
88
|
},
|
|
114
89
|
{
|
|
115
90
|
"kind": "field",
|
|
116
|
-
"name": "
|
|
91
|
+
"name": "overlaySize",
|
|
117
92
|
"privacy": "public",
|
|
118
93
|
"type": {
|
|
119
|
-
"text": "
|
|
94
|
+
"text": "string"
|
|
120
95
|
},
|
|
121
|
-
"description": "
|
|
122
|
-
"attribute": "
|
|
96
|
+
"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.",
|
|
97
|
+
"attribute": "overlay-size"
|
|
123
98
|
}
|
|
124
99
|
],
|
|
125
100
|
"events": [
|
|
@@ -128,7 +103,7 @@
|
|
|
128
103
|
"type": {
|
|
129
104
|
"text": "CustomEvent"
|
|
130
105
|
},
|
|
131
|
-
"description": "Fired when the user clicks the backdrop in the
|
|
106
|
+
"description": "Fired when the user clicks the backdrop in the overlay mode."
|
|
132
107
|
},
|
|
133
108
|
{
|
|
134
109
|
"name": "detail-escape-press",
|
|
@@ -139,52 +114,28 @@
|
|
|
139
114
|
}
|
|
140
115
|
],
|
|
141
116
|
"attributes": [
|
|
142
|
-
{
|
|
143
|
-
"name": "containment",
|
|
144
|
-
"type": {
|
|
145
|
-
"text": "string"
|
|
146
|
-
},
|
|
147
|
-
"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 `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
148
|
-
"fieldName": "containment"
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
"name": "detail-min-size",
|
|
152
|
-
"type": {
|
|
153
|
-
"text": "string"
|
|
154
|
-
},
|
|
155
|
-
"description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
|
|
156
|
-
"fieldName": "detailMinSize"
|
|
157
|
-
},
|
|
158
117
|
{
|
|
159
118
|
"name": "detail-size",
|
|
160
119
|
"type": {
|
|
161
120
|
"text": "string"
|
|
162
121
|
},
|
|
163
|
-
"description": "
|
|
122
|
+
"description": "Size (in CSS length units) to be set on the detail 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 15em.",
|
|
164
123
|
"fieldName": "detailSize"
|
|
165
124
|
},
|
|
166
125
|
{
|
|
167
|
-
"name": "
|
|
168
|
-
"type": {
|
|
169
|
-
"text": "boolean"
|
|
170
|
-
},
|
|
171
|
-
"description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
|
|
172
|
-
"fieldName": "forceOverlay"
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
"name": "master-min-size",
|
|
126
|
+
"name": "expand",
|
|
176
127
|
"type": {
|
|
177
128
|
"text": "string"
|
|
178
129
|
},
|
|
179
|
-
"description": "
|
|
180
|
-
"fieldName": "
|
|
130
|
+
"description": "Controls which column(s) expand to fill available space.\nPossible values: `'master'`, `'detail'`, `'both'`.\nDefaults to `'master'`.",
|
|
131
|
+
"fieldName": "expand"
|
|
181
132
|
},
|
|
182
133
|
{
|
|
183
134
|
"name": "master-size",
|
|
184
135
|
"type": {
|
|
185
136
|
"text": "string"
|
|
186
137
|
},
|
|
187
|
-
"description": "
|
|
138
|
+
"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.",
|
|
188
139
|
"fieldName": "masterSize"
|
|
189
140
|
},
|
|
190
141
|
{
|
|
@@ -204,23 +155,23 @@
|
|
|
204
155
|
"fieldName": "orientation"
|
|
205
156
|
},
|
|
206
157
|
{
|
|
207
|
-
"name": "
|
|
158
|
+
"name": "overlay-containment",
|
|
208
159
|
"type": {
|
|
209
|
-
"text": "
|
|
160
|
+
"text": "string"
|
|
161
|
+
},
|
|
162
|
+
"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 `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
|
|
163
|
+
"fieldName": "overlayContainment"
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"name": "overlay-size",
|
|
167
|
+
"type": {
|
|
168
|
+
"text": "string"
|
|
210
169
|
},
|
|
211
|
-
"description": "
|
|
212
|
-
"fieldName": "
|
|
170
|
+
"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.",
|
|
171
|
+
"fieldName": "overlaySize"
|
|
213
172
|
}
|
|
214
173
|
],
|
|
215
174
|
"mixins": [
|
|
216
|
-
{
|
|
217
|
-
"name": "SlotStylesMixin",
|
|
218
|
-
"package": "@vaadin/component-base/src/slot-styles-mixin.js"
|
|
219
|
-
},
|
|
220
|
-
{
|
|
221
|
-
"name": "ResizeMixin",
|
|
222
|
-
"package": "@vaadin/component-base/src/resize-mixin.js"
|
|
223
|
-
},
|
|
224
175
|
{
|
|
225
176
|
"name": "ElementMixin",
|
|
226
177
|
"package": "@vaadin/component-base/src/element-mixin.js"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/master-detail-layout",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.2.0-alpha2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/a11y-base": "
|
|
38
|
-
"@vaadin/component-base": "
|
|
39
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
37
|
+
"@vaadin/a11y-base": "25.2.0-alpha2",
|
|
38
|
+
"@vaadin/component-base": "25.2.0-alpha2",
|
|
39
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha2",
|
|
40
40
|
"lit": "^3.0.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@vaadin/aura": "
|
|
44
|
-
"@vaadin/chai-plugins": "
|
|
43
|
+
"@vaadin/aura": "25.2.0-alpha2",
|
|
44
|
+
"@vaadin/chai-plugins": "25.2.0-alpha2",
|
|
45
45
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
46
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
46
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha2",
|
|
47
47
|
"sinon": "^21.0.2"
|
|
48
48
|
},
|
|
49
49
|
"customElements": "custom-elements.json",
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"web-types.json",
|
|
52
52
|
"web-types.lit.json"
|
|
53
53
|
],
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "34c9b41017bd4896f6e4b250ba50d1dd8535a061"
|
|
55
55
|
}
|
|
@@ -7,190 +7,180 @@ import '@vaadin/component-base/src/styles/style-props.js';
|
|
|
7
7
|
import { css } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const masterDetailLayoutStyles = css`
|
|
10
|
-
/* Layout and positioning styles */
|
|
11
|
-
|
|
12
10
|
:host {
|
|
13
|
-
|
|
11
|
+
--_master-size: 30em;
|
|
12
|
+
--_detail-size: 15em;
|
|
13
|
+
--_master-column: var(--_master-size) 0;
|
|
14
|
+
--_detail-column: var(--_detail-size) 0;
|
|
15
|
+
--_transition-duration: 0s;
|
|
16
|
+
--_transition-easing: cubic-bezier(0.78, 0, 0.22, 1);
|
|
17
|
+
--_rtl-multiplier: 1;
|
|
18
|
+
--_detail-offscreen: calc(30px * var(--_rtl-multiplier));
|
|
19
|
+
|
|
20
|
+
display: grid;
|
|
14
21
|
box-sizing: border-box;
|
|
15
22
|
height: 100%;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
position: relative; /* Keep the positioning context stable across all modes */
|
|
19
|
-
z-index: 0; /* Create a new stacking context, don't let "layout contained" detail element stack outside it */
|
|
23
|
+
position: relative;
|
|
24
|
+
z-index: 0;
|
|
20
25
|
overflow: hidden;
|
|
26
|
+
grid-template-columns: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
|
|
27
|
+
grid-template-rows: 100%;
|
|
21
28
|
}
|
|
22
29
|
|
|
23
30
|
:host([hidden]) {
|
|
24
31
|
display: none !important;
|
|
25
32
|
}
|
|
26
33
|
|
|
27
|
-
:host([
|
|
28
|
-
|
|
34
|
+
:host([dir='rtl']) {
|
|
35
|
+
--_rtl-multiplier: -1;
|
|
29
36
|
}
|
|
30
37
|
|
|
31
|
-
[
|
|
32
|
-
|
|
33
|
-
justify-content: end;
|
|
34
|
-
/* Disable pointer events for the detail wrapper to allow clicks to pass through to the backdrop */
|
|
35
|
-
pointer-events: none;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
[part='detail'] {
|
|
39
|
-
/* Re-enable pointer events for the actual detail content */
|
|
40
|
-
pointer-events: auto;
|
|
41
|
-
}
|
|
38
|
+
:host([orientation='vertical']) {
|
|
39
|
+
--_detail-offscreen: 0 30px;
|
|
42
40
|
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
grid-template-columns: 100%;
|
|
42
|
+
grid-template-rows: [master-start] var(--_master-column) [detail-start] var(--_detail-column) [detail-end];
|
|
45
43
|
}
|
|
46
44
|
|
|
47
|
-
:
|
|
48
|
-
|
|
49
|
-
display: flex;
|
|
50
|
-
position: absolute;
|
|
51
|
-
z-index: 1;
|
|
52
|
-
inset: 0;
|
|
53
|
-
overscroll-behavior: contain;
|
|
45
|
+
:is(#master, #detail, #detail-placeholder, #outgoing) {
|
|
46
|
+
box-sizing: border-box;
|
|
54
47
|
}
|
|
55
48
|
|
|
56
|
-
|
|
57
|
-
[part='backdrop'] {
|
|
49
|
+
#detail-placeholder {
|
|
58
50
|
display: none;
|
|
59
51
|
}
|
|
60
52
|
|
|
61
|
-
:host([
|
|
62
|
-
|
|
53
|
+
:host([has-detail-placeholder]:not([has-detail], [overlay])) #detail-placeholder {
|
|
54
|
+
display: block;
|
|
63
55
|
}
|
|
64
56
|
|
|
65
|
-
|
|
66
|
-
|
|
57
|
+
#master {
|
|
58
|
+
grid-column: master-start / detail-start;
|
|
59
|
+
grid-row: 1;
|
|
67
60
|
}
|
|
68
61
|
|
|
69
|
-
:
|
|
70
|
-
|
|
62
|
+
:is(#detail, #detail-placeholder, #outgoing) {
|
|
63
|
+
grid-column: detail-start / detail-end;
|
|
64
|
+
grid-row: 1;
|
|
71
65
|
}
|
|
72
66
|
|
|
73
|
-
:host(
|
|
74
|
-
|
|
75
|
-
|
|
67
|
+
:host([orientation='vertical']) #master {
|
|
68
|
+
grid-column: 1;
|
|
69
|
+
grid-row: master-start / detail-start;
|
|
76
70
|
}
|
|
77
71
|
|
|
78
|
-
:host([
|
|
79
|
-
|
|
72
|
+
:host([orientation='vertical']) :is(#detail, #detail-placeholder, #outgoing) {
|
|
73
|
+
grid-column: 1;
|
|
74
|
+
grid-row: detail-start / detail-end;
|
|
80
75
|
}
|
|
81
76
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
/* Sizing styles */
|
|
92
|
-
|
|
93
|
-
[part] {
|
|
94
|
-
box-sizing: border-box;
|
|
95
|
-
max-width: 100%;
|
|
96
|
-
max-height: 100%;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
/* No fixed size */
|
|
100
|
-
:host(:not([has-master-size])) [part='master'],
|
|
101
|
-
:host(:not([has-detail-size]):not([drawer], [stack])) [part='detail'] {
|
|
102
|
-
flex-grow: 1;
|
|
103
|
-
flex-basis: 50%;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/* Fixed size */
|
|
107
|
-
:host([has-master-size]) [part='master'],
|
|
108
|
-
:host([has-detail-size]) [part='detail'] {
|
|
109
|
-
flex-shrink: 0;
|
|
77
|
+
#backdrop {
|
|
78
|
+
position: absolute;
|
|
79
|
+
inset: 0;
|
|
80
|
+
z-index: 1;
|
|
81
|
+
opacity: 0;
|
|
82
|
+
pointer-events: none;
|
|
83
|
+
background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
|
|
84
|
+
forced-color-adjust: none;
|
|
110
85
|
}
|
|
111
86
|
|
|
112
|
-
:host([
|
|
113
|
-
|
|
87
|
+
:host([expand='both']),
|
|
88
|
+
:host([expand='master']) {
|
|
89
|
+
--_master-column: var(--_master-size) 1fr;
|
|
114
90
|
}
|
|
115
91
|
|
|
116
|
-
:host([
|
|
117
|
-
|
|
92
|
+
:host([keep-detail-column-offscreen]),
|
|
93
|
+
:host([has-detail-placeholder][overlay]),
|
|
94
|
+
:host(:not([has-detail-placeholder], [has-detail])) {
|
|
95
|
+
--_master-column: var(--_master-size) calc(100% - var(--_master-size));
|
|
118
96
|
}
|
|
119
97
|
|
|
120
|
-
:host([
|
|
121
|
-
|
|
98
|
+
:host([expand='both']),
|
|
99
|
+
:host([expand='detail']) {
|
|
100
|
+
--_detail-column: var(--_detail-size) 1fr;
|
|
122
101
|
}
|
|
123
102
|
|
|
124
|
-
:host([orientation='
|
|
125
|
-
|
|
103
|
+
:host([orientation='horizontal']) #detail-placeholder,
|
|
104
|
+
:host([orientation='horizontal'][has-detail]:not([overlay])) #detail {
|
|
105
|
+
border-inline-start: var(--vaadin-master-detail-layout-border-width, 1px) solid
|
|
106
|
+
var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
|
|
126
107
|
}
|
|
127
108
|
|
|
128
|
-
:host([
|
|
129
|
-
|
|
130
|
-
|
|
109
|
+
:host([orientation='vertical']) #detail-placeholder,
|
|
110
|
+
:host([orientation='vertical'][has-detail]:not([overlay])) #detail {
|
|
111
|
+
border-top: var(--vaadin-master-detail-layout-border-width, 1px) solid
|
|
112
|
+
var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
|
|
131
113
|
}
|
|
132
114
|
|
|
133
|
-
:
|
|
134
|
-
|
|
135
|
-
|
|
115
|
+
/* Detail transition: off-screen by default, on-screen when has-detail */
|
|
116
|
+
#detail {
|
|
117
|
+
translate: var(--_detail-offscreen);
|
|
136
118
|
}
|
|
137
119
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
min-width: min(100%, var(--_master-min-size));
|
|
120
|
+
:host([has-detail]) #detail {
|
|
121
|
+
translate: none;
|
|
141
122
|
}
|
|
142
123
|
|
|
143
|
-
:
|
|
144
|
-
|
|
124
|
+
#outgoing:not([hidden]) {
|
|
125
|
+
z-index: 1;
|
|
145
126
|
}
|
|
146
127
|
|
|
147
|
-
:host([
|
|
148
|
-
|
|
128
|
+
:host([overlay]) {
|
|
129
|
+
--_detail-offscreen: calc((100% + 30px) * var(--_rtl-multiplier));
|
|
149
130
|
}
|
|
150
131
|
|
|
151
|
-
:host([orientation='vertical']
|
|
152
|
-
|
|
132
|
+
:host([overlay][orientation='vertical']) {
|
|
133
|
+
--_detail-offscreen: 0 calc(100% + 30px);
|
|
153
134
|
}
|
|
154
135
|
|
|
155
|
-
:host([
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
max-height: 100% !important;
|
|
136
|
+
:host([has-detail][overlay]) :is(#detail, #outgoing) {
|
|
137
|
+
position: absolute;
|
|
138
|
+
z-index: 2;
|
|
139
|
+
background: var(--vaadin-master-detail-layout-detail-background, var(--vaadin-background-color));
|
|
140
|
+
box-shadow: var(--vaadin-master-detail-layout-detail-shadow, 0 0 20px 0 rgba(0, 0, 0, 0.3));
|
|
141
|
+
grid-column: none;
|
|
142
|
+
grid-row: none;
|
|
163
143
|
}
|
|
164
144
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
|
|
169
|
-
forced-color-adjust: none;
|
|
145
|
+
:host([has-detail][overlay]) #backdrop {
|
|
146
|
+
opacity: 1;
|
|
147
|
+
pointer-events: auto;
|
|
170
148
|
}
|
|
171
149
|
|
|
172
|
-
:host(
|
|
173
|
-
|
|
174
|
-
|
|
150
|
+
:host([has-detail][overlay]:not([orientation='vertical'])) :is(#detail, #outgoing) {
|
|
151
|
+
inset-block: 0;
|
|
152
|
+
inset-inline-end: 0;
|
|
153
|
+
width: var(--_overlay-size, var(--_detail-size, min-content));
|
|
175
154
|
}
|
|
176
155
|
|
|
177
|
-
:host([orientation='
|
|
178
|
-
|
|
179
|
-
|
|
156
|
+
:host([has-detail][overlay][orientation='vertical']) :is(#detail, #outgoing) {
|
|
157
|
+
inset-inline: 0;
|
|
158
|
+
inset-block-end: 0;
|
|
159
|
+
height: var(--_overlay-size, var(--_detail-size, min-content));
|
|
180
160
|
}
|
|
181
161
|
|
|
182
|
-
:host([
|
|
183
|
-
|
|
184
|
-
var(--vaadin-master-detail-layout-border-color, var(--vaadin-border-color-secondary));
|
|
162
|
+
:host([has-detail][overlay][overlay-containment='viewport']) :is(#detail, #outgoing, #backdrop) {
|
|
163
|
+
position: fixed;
|
|
185
164
|
}
|
|
186
165
|
|
|
187
166
|
@media (forced-colors: active) {
|
|
188
|
-
:host(
|
|
167
|
+
:host([has-detail][overlay]) :is(#detail, #outgoing) {
|
|
189
168
|
outline: 3px solid !important;
|
|
190
169
|
}
|
|
191
170
|
|
|
192
|
-
|
|
171
|
+
:is(#detail, #detail-placeholder, #outgoing) {
|
|
193
172
|
background: Canvas !important;
|
|
194
173
|
}
|
|
195
174
|
}
|
|
175
|
+
|
|
176
|
+
/* Enable transitions when motion is allowed */
|
|
177
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
178
|
+
:host(:not([no-animation], [transition='replace'])) {
|
|
179
|
+
--_transition-duration: 200ms;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
:host([overlay]:not([no-animation])) {
|
|
183
|
+
--_transition-duration: 300ms;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
196
186
|
`;
|