@vaadin/login 24.5.0-alpha5 → 24.5.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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/login",
|
|
3
|
-
"version": "24.5.0-
|
|
3
|
+
"version": "24.5.0-alpha6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
39
39
|
"@polymer/polymer": "^3.0.0",
|
|
40
|
-
"@vaadin/button": "24.5.0-
|
|
41
|
-
"@vaadin/component-base": "24.5.0-
|
|
42
|
-
"@vaadin/overlay": "24.5.0-
|
|
43
|
-
"@vaadin/password-field": "24.5.0-
|
|
44
|
-
"@vaadin/text-field": "24.5.0-
|
|
45
|
-
"@vaadin/vaadin-lumo-styles": "24.5.0-
|
|
46
|
-
"@vaadin/vaadin-material-styles": "24.5.0-
|
|
47
|
-
"@vaadin/vaadin-themable-mixin": "24.5.0-
|
|
40
|
+
"@vaadin/button": "24.5.0-alpha6",
|
|
41
|
+
"@vaadin/component-base": "24.5.0-alpha6",
|
|
42
|
+
"@vaadin/overlay": "24.5.0-alpha6",
|
|
43
|
+
"@vaadin/password-field": "24.5.0-alpha6",
|
|
44
|
+
"@vaadin/text-field": "24.5.0-alpha6",
|
|
45
|
+
"@vaadin/vaadin-lumo-styles": "24.5.0-alpha6",
|
|
46
|
+
"@vaadin/vaadin-material-styles": "24.5.0-alpha6",
|
|
47
|
+
"@vaadin/vaadin-themable-mixin": "24.5.0-alpha6",
|
|
48
48
|
"lit": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"web-types.json",
|
|
57
57
|
"web-types.lit.json"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "c5f541dbe961a994730d4c60472ae957bf6b4c12"
|
|
60
60
|
}
|
|
@@ -14,10 +14,6 @@ const loginOverlayWrapper = css`
|
|
|
14
14
|
background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
[part='content'] {
|
|
18
|
-
padding: 0;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
17
|
[part='overlay'] {
|
|
22
18
|
background: none;
|
|
23
19
|
border-radius: 0;
|
|
@@ -26,11 +22,6 @@ const loginOverlayWrapper = css`
|
|
|
26
22
|
height: 100%;
|
|
27
23
|
}
|
|
28
24
|
|
|
29
|
-
[part='card'] {
|
|
30
|
-
width: calc(var(--lumo-size-m) * 10);
|
|
31
|
-
background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
|
|
32
|
-
}
|
|
33
|
-
|
|
34
25
|
[part='brand'] {
|
|
35
26
|
padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
|
|
36
27
|
background-color: var(--lumo-primary-color);
|
|
@@ -49,9 +40,12 @@ const loginOverlayWrapper = css`
|
|
|
49
40
|
display: flex;
|
|
50
41
|
align-items: center;
|
|
51
42
|
justify-content: center;
|
|
43
|
+
padding: 0;
|
|
52
44
|
}
|
|
53
45
|
|
|
54
46
|
[part='card'] {
|
|
47
|
+
width: calc(var(--lumo-size-m) * 10);
|
|
48
|
+
background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
|
|
55
49
|
border-radius: var(--lumo-border-radius-l);
|
|
56
50
|
box-shadow: var(--lumo-box-shadow-s);
|
|
57
51
|
margin: var(--lumo-space-s);
|
|
@@ -138,33 +132,23 @@ const loginOverlayWrapper = css`
|
|
|
138
132
|
/* Handle iPhone X notch */
|
|
139
133
|
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
|
|
140
134
|
[part='card'] {
|
|
141
|
-
padding-right: constant(safe-area-inset-right);
|
|
142
135
|
padding-right: env(safe-area-inset-right);
|
|
143
|
-
|
|
144
|
-
padding-left: constant(safe-area-inset-left);
|
|
145
136
|
padding-left: env(safe-area-inset-left);
|
|
146
137
|
}
|
|
147
138
|
|
|
148
139
|
[part='brand'] {
|
|
149
|
-
margin-left: calc(constant(safe-area-inset-left) * -1);
|
|
150
140
|
margin-left: calc(env(safe-area-inset-left) * -1);
|
|
151
|
-
|
|
152
|
-
padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
|
|
153
141
|
padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
|
|
154
142
|
}
|
|
155
143
|
|
|
156
144
|
/* RTL styles */
|
|
157
145
|
:host([dir='rtl']) [part='card'] {
|
|
158
|
-
padding-left: constant(safe-area-inset-right);
|
|
159
146
|
padding-left: env(safe-area-inset-right);
|
|
160
|
-
padding-right: constant(safe-area-inset-left);
|
|
161
147
|
padding-right: env(safe-area-inset-left);
|
|
162
148
|
}
|
|
163
149
|
|
|
164
150
|
:host([dir='rtl']) [part='brand'] {
|
|
165
|
-
margin-right: calc(constant(safe-area-inset-left) * -1);
|
|
166
151
|
margin-right: calc(env(safe-area-inset-left) * -1);
|
|
167
|
-
padding-right: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
|
|
168
152
|
padding-right: calc(var(--lumo-space-l) + env(safe-area-inset-left));
|
|
169
153
|
}
|
|
170
154
|
}
|
|
@@ -38,7 +38,9 @@ const loginOverlayWrapper = css`
|
|
|
38
38
|
min-width: 400px;
|
|
39
39
|
height: 100%;
|
|
40
40
|
border-radius: 4px;
|
|
41
|
-
box-shadow:
|
|
41
|
+
box-shadow:
|
|
42
|
+
0 19px 38px rgba(0, 0, 0, 0.04),
|
|
43
|
+
0 9px 12px rgba(0, 0, 0, 0.05);
|
|
42
44
|
margin: 0.5em;
|
|
43
45
|
}
|
|
44
46
|
|
|
@@ -278,21 +280,18 @@ const loginOverlayWrapper = css`
|
|
|
278
280
|
/* Handle iPhone X notch */
|
|
279
281
|
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
|
|
280
282
|
[part='card'] {
|
|
281
|
-
padding: 0 constant(safe-area-inset-bottom);
|
|
282
283
|
padding: 0 env(safe-area-inset-bottom);
|
|
283
284
|
}
|
|
284
285
|
|
|
285
286
|
:host(:not([dir='rtl'])) [part='brand'] {
|
|
286
|
-
margin-left: calc(constant(safe-area-inset-bottom) * -1);
|
|
287
287
|
margin-left: calc(env(safe-area-inset-bottom) * -1);
|
|
288
|
-
padding-left: calc(1.5rem +
|
|
288
|
+
padding-left: calc(1.5rem + env(safe-area-inset-bottom));
|
|
289
289
|
}
|
|
290
290
|
|
|
291
291
|
/* RTL styles */
|
|
292
292
|
:host([dir='rtl']) [part='brand'] {
|
|
293
|
-
margin-right: calc(constant(safe-area-inset-bottom) * -1);
|
|
294
293
|
margin-right: calc(env(safe-area-inset-bottom) * -1);
|
|
295
|
-
padding-right: calc(1.5rem +
|
|
294
|
+
padding-right: calc(1.5rem + env(safe-area-inset-bottom));
|
|
296
295
|
}
|
|
297
296
|
}
|
|
298
297
|
`;
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/login",
|
|
4
|
-
"version": "24.5.0-
|
|
4
|
+
"version": "24.5.0-alpha6",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
},
|
|
149
149
|
{
|
|
150
150
|
"name": "vaadin-login-overlay",
|
|
151
|
-
"description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name | Description\n----------------|---------------------------------------------------------|\n`card` | Container for the entire component's content\n`brand` | Container for application title and description\n`form` | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-
|
|
151
|
+
"description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name | Description\n----------------|---------------------------------------------------------|\n`card` | Container for the entire component's content\n`brand` | Container for application title and description\n`form` | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha6/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
|
|
152
152
|
"attributes": [
|
|
153
153
|
{
|
|
154
154
|
"name": "action",
|
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/login",
|
|
4
|
-
"version": "24.5.0-
|
|
4
|
+
"version": "24.5.0-alpha6",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -93,7 +93,7 @@
|
|
|
93
93
|
},
|
|
94
94
|
{
|
|
95
95
|
"name": "vaadin-login-overlay",
|
|
96
|
-
"description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name | Description\n----------------|---------------------------------------------------------|\n`card` | Container for the entire component's content\n`brand` | Container for application title and description\n`form` | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-
|
|
96
|
+
"description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name | Description\n----------------|---------------------------------------------------------|\n`card` | Container for the entire component's content\n`brand` | Container for application title and description\n`form` | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha6/#/elements/vaadin-login-form)\ndocumentation for `<vaadin-login-form-wrapper>` stylable parts.",
|
|
97
97
|
"extension": true,
|
|
98
98
|
"attributes": [
|
|
99
99
|
{
|