Skip to content

Commit f2fec4a

Browse files
vursenvursen
authored
refactor: extract master-detail-layout core CSS to styles folder (#9454)
1 parent d6b0781 commit f2fec4a

5 files changed

+177
-152
lines changed

‎packages/master-detail-layout/src/styles/vaadin-master-detail-layout-styles.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2025 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const masterDetailLayoutStyles: CSSResult;

‎packages/master-detail-layout/src/styles/vaadin-master-detail-layout-styles.js

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2025 - 2025 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 masterDetailLayoutStyles = css`
9+
:host {
10+
display: flex;
11+
box-sizing: border-box;
12+
height: 100%;
13+
}
14+
15+
:host([hidden]) {
16+
display: none !important;
17+
}
18+
19+
:host(:not([has-detail])) [part='detail'],
20+
[part='backdrop'] {
21+
display: none;
22+
}
23+
24+
:host([orientation='horizontal']) [part='master'] {
25+
max-width: 100%;
26+
}
27+
28+
/* Drawer mode */
29+
:host(:is([drawer], [stack])) {
30+
position: relative;
31+
}
32+
33+
:host(:is([drawer], [stack])[containment='layout']) [part='detail'],
34+
:host([drawer][containment='layout']) [part='backdrop'] {
35+
position: absolute;
36+
}
37+
38+
:host(:is([drawer], [stack])[containment='viewport']) [part='detail'],
39+
:host([drawer][containment='viewport']) [part='backdrop'] {
40+
position: fixed;
41+
}
42+
43+
:host([drawer][has-detail]) [part='backdrop'] {
44+
display: block;
45+
inset: 0;
46+
z-index: 1;
47+
}
48+
49+
:host(:is([drawer], [stack])) [part='detail'] {
50+
z-index: 1;
51+
}
52+
53+
:host([drawer][orientation='horizontal']) [part='detail'] {
54+
inset-inline-end: 0;
55+
height: 100%;
56+
width: var(--_detail-min-size, min-content);
57+
max-width: 100%;
58+
}
59+
60+
:host([drawer][orientation='horizontal'][containment='viewport']) [part='detail'] {
61+
inset-block-start: 0;
62+
}
63+
64+
/* No fixed size */
65+
:host(:not([has-master-size])) [part='master'],
66+
:host(:not([has-detail-size])) [part='detail'] {
67+
flex-grow: 1;
68+
flex-basis: 50%;
69+
}
70+
71+
/* Fixed size */
72+
:host([has-master-size]) [part='master'],
73+
:host([has-detail-size]) [part='detail'] {
74+
flex-shrink: 0;
75+
}
76+
77+
:host([has-master-size][orientation='horizontal']) [part='master'] {
78+
width: var(--_master-size);
79+
}
80+
81+
:host([has-detail-size][orientation='horizontal']:not([stack])) [part='detail'] {
82+
width: var(--_detail-size);
83+
}
84+
85+
:host([has-master-size][has-detail-size]) [part='master'] {
86+
flex-grow: 1;
87+
flex-basis: var(--_master-size);
88+
}
89+
90+
:host([has-master-size][has-detail-size]) [part='detail'] {
91+
flex-grow: 1;
92+
flex-basis: var(--_detail-size);
93+
}
94+
95+
/* Min size */
96+
:host([has-master-min-size][has-detail][orientation='horizontal']:not([drawer]):not([stack])) [part='master'] {
97+
min-width: var(--_master-min-size);
98+
}
99+
100+
:host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
101+
min-width: var(--_detail-min-size);
102+
}
103+
104+
:host([has-master-min-size]) [part='master'],
105+
:host([has-detail-min-size]) [part='detail'] {
106+
flex-shrink: 0;
107+
}
108+
109+
/* Vertical */
110+
:host([orientation='vertical']) {
111+
flex-direction: column;
112+
}
113+
114+
:host([orientation='vertical'][drawer]) [part='master'] {
115+
max-height: 100%;
116+
}
117+
118+
:host([orientation='vertical'][drawer]) [part='detail'] {
119+
inset-block-end: 0;
120+
width: 100%;
121+
height: var(--_detail-min-size, min-content);
122+
}
123+
124+
:host([drawer][orientation='vertical'][containment='viewport']) [part='detail'] {
125+
inset-inline-start: 0;
126+
}
127+
128+
/* Fixed size */
129+
:host([has-master-size][orientation='vertical']) [part='master'] {
130+
height: var(--_master-size);
131+
}
132+
133+
:host([has-detail-size][orientation='vertical']:not([stack])) [part='detail'] {
134+
height: var(--_detail-size);
135+
}
136+
137+
/* Min size */
138+
:host([has-master-min-size][orientation='vertical']:not([drawer])) [part='master'],
139+
:host([has-master-min-size][orientation='vertical'][drawer]) {
140+
min-height: var(--_master-min-size);
141+
}
142+
143+
:host([has-detail-min-size][orientation='vertical']:not([drawer]):not([stack])) [part='detail'] {
144+
min-height: var(--_detail-min-size);
145+
}
146+
147+
/* Stack mode */
148+
:host([stack]) [part='master'] {
149+
max-height: 100%;
150+
}
151+
152+
:host([stack]) [part='detail'] {
153+
inset: 0;
154+
}
155+
`;

‎packages/master-detail-layout/src/styles/vaadin-master-detail-layout-transition-styles.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2025 - 2025 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import type { CSSResult } from 'lit';
7+
8+
export const masterDetailLayoutTransitionStyles: CSSResult;

‎packages/master-detail-layout/src/vaadin-master-detail-layout-transition-styles.js renamed to ‎packages/master-detail-layout/src/styles/vaadin-master-detail-layout-transition-styles.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
import { css } from 'lit';
77

8-
export const transitionStyles = css`
8+
export const masterDetailLayoutTransitionStyles = css`
99
html:not([dir='rtl']) {
1010
--_vaadin-master-detail-layout-dir-multiplier: 1;
1111
}

‎packages/master-detail-layout/src/vaadin-master-detail-layout.js

Lines changed: 5 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@
33
* Copyright (c) 2025 - 2025 Vaadin Ltd.
44
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
55
*/
6-
import { css, html, LitElement, nothing } from 'lit';
6+
import { html, LitElement, nothing } from 'lit';
77
import { getFocusableElements } from '@vaadin/a11y-base/src/focus-utils.js';
88
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
99
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
1010
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
1111
import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
1212
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
1313
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
14-
import { transitionStyles } from './vaadin-master-detail-layout-transition-styles.js';
14+
import { masterDetailLayoutStyles } from './styles/vaadin-master-detail-layout-styles.js';
15+
import { masterDetailLayoutTransitionStyles } from './styles/vaadin-master-detail-layout-transition-styles.js';
1516

1617
/**
1718
* `<vaadin-master-detail-layout>` is a web component for building UIs with a master
@@ -63,154 +64,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
6364
}
6465

6566
static get styles() {
66-
return css`
67-
:host {
68-
display: flex;
69-
box-sizing: border-box;
70-
height: 100%;
71-
}
72-
73-
:host([hidden]) {
74-
display: none !important;
75-
}
76-
77-
:host(:not([has-detail])) [part='detail'],
78-
[part='backdrop'] {
79-
display: none;
80-
}
81-
82-
:host([orientation='horizontal']) [part='master'] {
83-
max-width: 100%;
84-
}
85-
86-
/* Drawer mode */
87-
:host(:is([drawer], [stack])) {
88-
position: relative;
89-
}
90-
91-
:host(:is([drawer], [stack])[containment='layout']) [part='detail'],
92-
:host([drawer][containment='layout']) [part='backdrop'] {
93-
position: absolute;
94-
}
95-
96-
:host(:is([drawer], [stack])[containment='viewport']) [part='detail'],
97-
:host([drawer][containment='viewport']) [part='backdrop'] {
98-
position: fixed;
99-
}
100-
101-
:host([drawer][has-detail]) [part='backdrop'] {
102-
display: block;
103-
inset: 0;
104-
z-index: 1;
105-
}
106-
107-
:host(:is([drawer], [stack])) [part='detail'] {
108-
z-index: 1;
109-
}
110-
111-
:host([drawer][orientation='horizontal']) [part='detail'] {
112-
inset-inline-end: 0;
113-
height: 100%;
114-
width: var(--_detail-min-size, min-content);
115-
max-width: 100%;
116-
}
117-
118-
:host([drawer][orientation='horizontal'][containment='viewport']) [part='detail'] {
119-
inset-block-start: 0;
120-
}
121-
122-
/* No fixed size */
123-
:host(:not([has-master-size])) [part='master'],
124-
:host(:not([has-detail-size])) [part='detail'] {
125-
flex-grow: 1;
126-
flex-basis: 50%;
127-
}
128-
129-
/* Fixed size */
130-
:host([has-master-size]) [part='master'],
131-
:host([has-detail-size]) [part='detail'] {
132-
flex-shrink: 0;
133-
}
134-
135-
:host([has-master-size][orientation='horizontal']) [part='master'] {
136-
width: var(--_master-size);
137-
}
138-
139-
:host([has-detail-size][orientation='horizontal']:not([stack])) [part='detail'] {
140-
width: var(--_detail-size);
141-
}
142-
143-
:host([has-master-size][has-detail-size]) [part='master'] {
144-
flex-grow: 1;
145-
flex-basis: var(--_master-size);
146-
}
147-
148-
:host([has-master-size][has-detail-size]) [part='detail'] {
149-
flex-grow: 1;
150-
flex-basis: var(--_detail-size);
151-
}
152-
153-
/* Min size */
154-
:host([has-master-min-size][has-detail][orientation='horizontal']:not([drawer]):not([stack])) [part='master'] {
155-
min-width: var(--_master-min-size);
156-
}
157-
158-
:host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
159-
min-width: var(--_detail-min-size);
160-
}
161-
162-
:host([has-master-min-size]) [part='master'],
163-
:host([has-detail-min-size]) [part='detail'] {
164-
flex-shrink: 0;
165-
}
166-
167-
/* Vertical */
168-
:host([orientation='vertical']) {
169-
flex-direction: column;
170-
}
171-
172-
:host([orientation='vertical'][drawer]) [part='master'] {
173-
max-height: 100%;
174-
}
175-
176-
:host([orientation='vertical'][drawer]) [part='detail'] {
177-
inset-block-end: 0;
178-
width: 100%;
179-
height: var(--_detail-min-size, min-content);
180-
}
181-
182-
:host([drawer][orientation='vertical'][containment='viewport']) [part='detail'] {
183-
inset-inline-start: 0;
184-
}
185-
186-
/* Fixed size */
187-
:host([has-master-size][orientation='vertical']) [part='master'] {
188-
height: var(--_master-size);
189-
}
190-
191-
:host([has-detail-size][orientation='vertical']:not([stack])) [part='detail'] {
192-
height: var(--_detail-size);
193-
}
194-
195-
/* Min size */
196-
:host([has-master-min-size][orientation='vertical']:not([drawer])) [part='master'],
197-
:host([has-master-min-size][orientation='vertical'][drawer]) {
198-
min-height: var(--_master-min-size);
199-
}
200-
201-
:host([has-detail-min-size][orientation='vertical']:not([drawer]):not([stack])) [part='detail'] {
202-
min-height: var(--_detail-min-size);
203-
}
204-
205-
/* Stack mode */
206-
:host([stack]) [part='master'] {
207-
max-height: 100%;
208-
}
209-
210-
:host([stack]) [part='detail'] {
211-
inset: 0;
212-
}
213-
`;
67+
return masterDetailLayoutStyles;
21468
}
21569

21670
static get properties() {
@@ -388,7 +242,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
388242

389243
/** @override */
390244
get slotStyles() {
391-
return [transitionStyles];
245+
return [masterDetailLayoutTransitionStyles];
392246
}
393247

394248
/** @protected */

0 commit comments

Comments
 (0)