Skip to content

Commit cfb8cb6

Browse files
web-padawanweb-padawan
authored
refactor: extract app-layout styles into reusable CSS literal (#8339)
1 parent ac91ad5 commit cfb8cb6

File tree

3 files changed

+178
-160
lines changed

3 files changed

+178
-160
lines changed

‎packages/app-layout/src/vaadin-app-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) 2018 - 2024 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 appLayoutStyles: CSSResult;

‎packages/app-layout/src/vaadin-app-layout-styles.js‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
/**
2+
* @license
3+
* Copyright (c) 2018 - 2024 Vaadin Ltd.
4+
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5+
*/
6+
import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
7+
8+
export const appLayoutStyles = css`
9+
:host {
10+
display: block;
11+
box-sizing: border-box;
12+
height: 100%;
13+
--vaadin-app-layout-transition: 200ms;
14+
transition: padding var(--vaadin-app-layout-transition);
15+
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
16+
--vaadin-app-layout-touch-optimized: false;
17+
--vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
18+
--vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
19+
padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
20+
padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
21+
}
22+
23+
:host([hidden]),
24+
[hidden] {
25+
display: none !important;
26+
}
27+
28+
:host([no-anim]) {
29+
--vaadin-app-layout-transition: none !important;
30+
}
31+
32+
:host([drawer-opened]) {
33+
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
34+
}
35+
36+
:host([overlay]) {
37+
--vaadin-app-layout-drawer-offset-left: 0;
38+
--vaadin-app-layout-navbar-offset-left: 0;
39+
}
40+
41+
:host(:not([no-scroll])) [content] {
42+
overflow: auto;
43+
}
44+
45+
[content] {
46+
height: 100%;
47+
}
48+
49+
@media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
50+
:host {
51+
--vaadin-app-layout-touch-optimized: true;
52+
}
53+
}
54+
55+
[part='navbar'] {
56+
position: fixed;
57+
display: flex;
58+
align-items: center;
59+
top: 0;
60+
inset-inline: 0;
61+
transition: inset-inline-start var(--vaadin-app-layout-transition);
62+
padding-top: var(--safe-area-inset-top);
63+
padding-left: var(--safe-area-inset-left);
64+
padding-right: var(--safe-area-inset-right);
65+
z-index: 1;
66+
}
67+
68+
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
69+
inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
70+
}
71+
72+
:host([primary-section='drawer']) [part='drawer'] {
73+
top: 0;
74+
}
75+
76+
[part='navbar'][bottom] {
77+
top: auto;
78+
bottom: 0;
79+
padding-bottom: var(--safe-area-inset-bottom);
80+
}
81+
82+
[part='drawer'] {
83+
overflow: auto;
84+
position: fixed;
85+
top: var(--vaadin-app-layout-navbar-offset-top, 0);
86+
bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
87+
inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
88+
transition:
89+
transform var(--vaadin-app-layout-transition),
90+
visibility var(--vaadin-app-layout-transition);
91+
transform: translateX(-100%);
92+
max-width: 90%;
93+
width: var(--_vaadin-app-layout-drawer-width);
94+
box-sizing: border-box;
95+
padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
96+
outline: none;
97+
/* The drawer should be inaccessible by the tabbing navigation when it is closed. */
98+
visibility: hidden;
99+
display: flex;
100+
flex-direction: column;
101+
}
102+
103+
:host([drawer-opened]) [part='drawer'] {
104+
/* The drawer should be accessible by the tabbing navigation when it is opened. */
105+
visibility: visible;
106+
transform: translateX(0%);
107+
touch-action: manipulation;
108+
}
109+
110+
[part='backdrop'] {
111+
background-color: #000;
112+
opacity: 0.3;
113+
}
114+
115+
:host(:not([drawer-opened])) [part='backdrop'] {
116+
opacity: 0;
117+
}
118+
119+
:host([overlay]) [part='backdrop'] {
120+
position: fixed;
121+
inset: 0;
122+
pointer-events: none;
123+
transition: opacity var(--vaadin-app-layout-transition);
124+
-webkit-tap-highlight-color: transparent;
125+
}
126+
127+
:host([overlay]) [part='drawer'] {
128+
top: 0;
129+
bottom: 0;
130+
}
131+
132+
:host([overlay]) [part='drawer'],
133+
:host([overlay]) [part='backdrop'] {
134+
z-index: 2;
135+
}
136+
137+
:host([drawer-opened][overlay]) [part='backdrop'] {
138+
pointer-events: auto;
139+
touch-action: manipulation;
140+
}
141+
142+
:host([dir='rtl']) [part='drawer'] {
143+
transform: translateX(100%);
144+
}
145+
146+
:host([dir='rtl'][drawer-opened]) [part='drawer'] {
147+
transform: translateX(0%);
148+
}
149+
150+
:host([drawer-opened]:not([overlay])) {
151+
padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
152+
}
153+
154+
@media (max-width: 800px), (max-height: 600px) {
155+
:host {
156+
--vaadin-app-layout-drawer-overlay: true;
157+
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);
158+
}
159+
}
160+
161+
/* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
162+
[part='drawer'] ::slotted(vaadin-scroller) {
163+
flex: 1;
164+
overscroll-behavior: contain;
165+
}
166+
`;

‎packages/app-layout/src/vaadin-app-layout.js‎

Lines changed: 4 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller
1212
import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
1313
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
1414
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
15-
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
15+
import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
16+
import { appLayoutStyles } from './vaadin-app-layout-styles.js';
17+
18+
registerStyles('vaadin-app-layout', appLayoutStyles, { moduleId: 'vaadin-app-layout-styles' });
1619

1720
/**
1821
* @typedef {import('./vaadin-app-layout.js').AppLayoutI18n} AppLayoutI18n
@@ -114,165 +117,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
114117
class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
115118
static get template() {
116119
return html`
117-
<style>
118-
:host {
119-
display: block;
120-
box-sizing: border-box;
121-
height: 100%;
122-
--vaadin-app-layout-transition: 200ms;
123-
transition: padding var(--vaadin-app-layout-transition);
124-
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
125-
--vaadin-app-layout-touch-optimized: false;
126-
--vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
127-
--vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
128-
padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
129-
padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
130-
}
131-
132-
:host([hidden]),
133-
[hidden] {
134-
display: none !important;
135-
}
136-
137-
:host([no-anim]) {
138-
--vaadin-app-layout-transition: none !important;
139-
}
140-
141-
:host([drawer-opened]) {
142-
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
143-
}
144-
145-
:host([overlay]) {
146-
--vaadin-app-layout-drawer-offset-left: 0;
147-
--vaadin-app-layout-navbar-offset-left: 0;
148-
}
149-
150-
:host(:not([no-scroll])) [content] {
151-
overflow: auto;
152-
}
153-
154-
[content] {
155-
height: 100%;
156-
}
157-
158-
@media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
159-
:host {
160-
--vaadin-app-layout-touch-optimized: true;
161-
}
162-
}
163-
164-
[part='navbar'] {
165-
position: fixed;
166-
display: flex;
167-
align-items: center;
168-
top: 0;
169-
inset-inline: 0;
170-
transition: inset-inline-start var(--vaadin-app-layout-transition);
171-
padding-top: var(--safe-area-inset-top);
172-
padding-left: var(--safe-area-inset-left);
173-
padding-right: var(--safe-area-inset-right);
174-
z-index: 1;
175-
}
176-
177-
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
178-
inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
179-
}
180-
181-
:host([primary-section='drawer']) [part='drawer'] {
182-
top: 0;
183-
}
184-
185-
[part='navbar'][bottom] {
186-
top: auto;
187-
bottom: 0;
188-
padding-bottom: var(--safe-area-inset-bottom);
189-
}
190-
191-
[part='drawer'] {
192-
overflow: auto;
193-
position: fixed;
194-
top: var(--vaadin-app-layout-navbar-offset-top, 0);
195-
bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
196-
inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
197-
transition:
198-
transform var(--vaadin-app-layout-transition),
199-
visibility var(--vaadin-app-layout-transition);
200-
transform: translateX(-100%);
201-
max-width: 90%;
202-
width: var(--_vaadin-app-layout-drawer-width);
203-
box-sizing: border-box;
204-
padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
205-
outline: none;
206-
/* The drawer should be inaccessible by the tabbing navigation when it is closed. */
207-
visibility: hidden;
208-
display: flex;
209-
flex-direction: column;
210-
}
211-
212-
:host([drawer-opened]) [part='drawer'] {
213-
/* The drawer should be accessible by the tabbing navigation when it is opened. */
214-
visibility: visible;
215-
transform: translateX(0%);
216-
touch-action: manipulation;
217-
}
218-
219-
[part='backdrop'] {
220-
background-color: #000;
221-
opacity: 0.3;
222-
}
223-
224-
:host(:not([drawer-opened])) [part='backdrop'] {
225-
opacity: 0;
226-
}
227-
228-
:host([overlay]) [part='backdrop'] {
229-
position: fixed;
230-
inset: 0;
231-
pointer-events: none;
232-
transition: opacity var(--vaadin-app-layout-transition);
233-
-webkit-tap-highlight-color: transparent;
234-
}
235-
236-
:host([overlay]) [part='drawer'] {
237-
top: 0;
238-
bottom: 0;
239-
}
240-
241-
:host([overlay]) [part='drawer'],
242-
:host([overlay]) [part='backdrop'] {
243-
z-index: 2;
244-
}
245-
246-
:host([drawer-opened][overlay]) [part='backdrop'] {
247-
pointer-events: auto;
248-
touch-action: manipulation;
249-
}
250-
251-
:host([dir='rtl']) [part='drawer'] {
252-
transform: translateX(100%);
253-
}
254-
255-
:host([dir='rtl'][drawer-opened]) [part='drawer'] {
256-
transform: translateX(0%);
257-
}
258-
259-
:host([drawer-opened]:not([overlay])) {
260-
padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
261-
}
262-
263-
@media (max-width: 800px), (max-height: 600px) {
264-
:host {
265-
--vaadin-app-layout-drawer-overlay: true;
266-
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);
267-
}
268-
}
269-
270-
/* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
271-
[part='drawer'] ::slotted(vaadin-scroller) {
272-
flex: 1;
273-
overscroll-behavior: contain;
274-
}
275-
</style>
276120
<div part="navbar" id="navbarTop">
277121
<slot name="navbar" on-slotchange="_updateTouchOptimizedMode"></slot>
278122
</div>

0 commit comments

Comments
 (0)