@vaadin/app-layout 24.3.0-alpha4 → 24.3.0-alpha6
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/package.json +10 -10
- package/src/vaadin-app-layout.js +4 -11
- package/web-types.json +1 -1
- package/web-types.lit.json +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/app-layout",
|
|
3
|
-
"version": "24.3.0-
|
|
3
|
+
"version": "24.3.0-alpha6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,22 +36,22 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/a11y-base": "24.3.0-
|
|
40
|
-
"@vaadin/button": "24.3.0-
|
|
41
|
-
"@vaadin/component-base": "24.3.0-
|
|
42
|
-
"@vaadin/vaadin-lumo-styles": "24.3.0-
|
|
43
|
-
"@vaadin/vaadin-material-styles": "24.3.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "24.3.0-
|
|
39
|
+
"@vaadin/a11y-base": "24.3.0-alpha6",
|
|
40
|
+
"@vaadin/button": "24.3.0-alpha6",
|
|
41
|
+
"@vaadin/component-base": "24.3.0-alpha6",
|
|
42
|
+
"@vaadin/vaadin-lumo-styles": "24.3.0-alpha6",
|
|
43
|
+
"@vaadin/vaadin-material-styles": "24.3.0-alpha6",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "24.3.0-alpha6"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@esm-bundle/chai": "^4.3.4",
|
|
48
|
-
"@vaadin/tabs": "24.3.0-
|
|
49
|
-
"@vaadin/testing-helpers": "^0.
|
|
48
|
+
"@vaadin/tabs": "24.3.0-alpha6",
|
|
49
|
+
"@vaadin/testing-helpers": "^0.6.0",
|
|
50
50
|
"sinon": "^13.0.2"
|
|
51
51
|
},
|
|
52
52
|
"web-types": [
|
|
53
53
|
"web-types.json",
|
|
54
54
|
"web-types.lit.json"
|
|
55
55
|
],
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "2721ab38ba3bc7d38dc1241016915354617ff659"
|
|
57
57
|
}
|
package/src/vaadin-app-layout.js
CHANGED
|
@@ -121,6 +121,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
121
121
|
height: 100%;
|
|
122
122
|
--vaadin-app-layout-transition: 200ms;
|
|
123
123
|
transition: padding var(--vaadin-app-layout-transition);
|
|
124
|
+
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
|
|
124
125
|
--vaadin-app-layout-touch-optimized: false;
|
|
125
126
|
--vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
|
|
126
127
|
--vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
|
|
@@ -138,7 +139,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
138
139
|
}
|
|
139
140
|
|
|
140
141
|
:host([drawer-opened]) {
|
|
141
|
-
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-
|
|
142
|
+
--vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-width);
|
|
142
143
|
}
|
|
143
144
|
|
|
144
145
|
:host([overlay]) {
|
|
@@ -196,7 +197,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
196
197
|
transition: transform var(--vaadin-app-layout-transition), visibility var(--vaadin-app-layout-transition);
|
|
197
198
|
transform: translateX(-100%);
|
|
198
199
|
max-width: 90%;
|
|
199
|
-
width:
|
|
200
|
+
width: var(--_vaadin-app-layout-drawer-width);
|
|
200
201
|
box-sizing: border-box;
|
|
201
202
|
padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
|
|
202
203
|
outline: none;
|
|
@@ -260,10 +261,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
260
261
|
@media (max-width: 800px), (max-height: 600px) {
|
|
261
262
|
:host {
|
|
262
263
|
--vaadin-app-layout-drawer-overlay: true;
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
[part='drawer'] {
|
|
266
|
-
width: 20em;
|
|
264
|
+
--_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 20em);
|
|
267
265
|
}
|
|
268
266
|
}
|
|
269
267
|
|
|
@@ -591,11 +589,6 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
|
|
|
591
589
|
|
|
592
590
|
this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${navbarRect.height}px`);
|
|
593
591
|
this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${navbarBottomRect.height}px`);
|
|
594
|
-
|
|
595
|
-
const drawer = this.$.drawer;
|
|
596
|
-
const drawerRect = drawer.getBoundingClientRect();
|
|
597
|
-
|
|
598
|
-
this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', `${drawerRect.width}px`);
|
|
599
592
|
}
|
|
600
593
|
|
|
601
594
|
/** @protected */
|
package/web-types.json
CHANGED