@vaadin/card 24.8.0-alpha18 → 24.8.0-alpha19
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 +8 -8
- package/theme/lumo/vaadin-card-styles.js +14 -14
- 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/card",
|
|
3
|
-
"version": "24.8.0-
|
|
3
|
+
"version": "24.8.0-alpha19",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,15 +34,15 @@
|
|
|
34
34
|
"web-component"
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@vaadin/component-base": "24.8.0-
|
|
38
|
-
"@vaadin/vaadin-lumo-styles": "24.8.0-
|
|
39
|
-
"@vaadin/vaadin-material-styles": "24.8.0-
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "24.8.0-
|
|
37
|
+
"@vaadin/component-base": "24.8.0-alpha19",
|
|
38
|
+
"@vaadin/vaadin-lumo-styles": "24.8.0-alpha19",
|
|
39
|
+
"@vaadin/vaadin-material-styles": "24.8.0-alpha19",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "24.8.0-alpha19",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/chai-plugins": "24.8.0-
|
|
45
|
-
"@vaadin/test-runner-commands": "24.8.0-
|
|
44
|
+
"@vaadin/chai-plugins": "24.8.0-alpha19",
|
|
45
|
+
"@vaadin/test-runner-commands": "24.8.0-alpha19",
|
|
46
46
|
"@vaadin/testing-helpers": "^1.1.0",
|
|
47
47
|
"sinon": "^18.0.0"
|
|
48
48
|
},
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"web-types.json",
|
|
51
51
|
"web-types.lit.json"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "b66da924889a1316f7881742a13b80e1c95a4cc4"
|
|
54
54
|
}
|
|
@@ -6,12 +6,13 @@ import { addGlobalThemeStyles, css, registerStyles } from '@vaadin/vaadin-themab
|
|
|
6
6
|
|
|
7
7
|
const cardProps = css`
|
|
8
8
|
html {
|
|
9
|
-
--vaadin-card-background: var(--lumo-
|
|
9
|
+
--vaadin-card-background: var(--lumo-contrast-5pct);
|
|
10
10
|
--vaadin-card-border-radius: var(--lumo-border-radius-l);
|
|
11
11
|
--vaadin-card-border-width: 0;
|
|
12
12
|
--vaadin-card-border-color: var(--lumo-contrast-20pct);
|
|
13
13
|
--vaadin-card-padding: var(--lumo-space-m);
|
|
14
14
|
--vaadin-card-gap: var(--lumo-space-m);
|
|
15
|
+
--vaadin-card-shadow: none;
|
|
15
16
|
}
|
|
16
17
|
`;
|
|
17
18
|
|
|
@@ -21,7 +22,7 @@ const card = css`
|
|
|
21
22
|
:host {
|
|
22
23
|
background: var(--vaadin-card-background);
|
|
23
24
|
border-radius: var(--vaadin-card-border-radius);
|
|
24
|
-
box-shadow: var(--vaadin-card-
|
|
25
|
+
box-shadow: var(--vaadin-card-shadow);
|
|
25
26
|
position: relative;
|
|
26
27
|
}
|
|
27
28
|
|
|
@@ -29,28 +30,27 @@ const card = css`
|
|
|
29
30
|
:host::before {
|
|
30
31
|
content: '';
|
|
31
32
|
position: absolute;
|
|
32
|
-
inset: 0;
|
|
33
|
-
|
|
34
|
-
border-radius: inherit;
|
|
33
|
+
inset: var(--_card-border-inset, 0);
|
|
34
|
+
border-radius: var(--_card-border-pseudo-radius, inherit);
|
|
35
35
|
border: var(--vaadin-card-border, var(--vaadin-card-border-width) solid var(--vaadin-card-border-color));
|
|
36
|
+
pointer-events: none;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
:host([theme~='outlined']) {
|
|
39
40
|
--vaadin-card-border-width: 1px;
|
|
40
|
-
--vaadin-card-background:
|
|
41
|
+
--vaadin-card-background: var(--lumo-base-color);
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
:host([theme~='elevated']) {
|
|
44
|
-
--vaadin-card-background: var(--lumo-tint-
|
|
45
|
-
--vaadin-card-
|
|
46
|
-
|
|
47
|
-
--
|
|
45
|
+
--vaadin-card-background: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct)) var(--lumo-base-color);
|
|
46
|
+
--vaadin-card-shadow: var(--lumo-box-shadow-xs);
|
|
47
|
+
--vaadin-card-border-width: 1px;
|
|
48
|
+
--_card-border-inset: calc(-1 * var(--vaadin-card-border-width));
|
|
49
|
+
--_card-border-pseudo-radius: calc(var(--vaadin-card-border-radius) + var(--vaadin-card-border-width));
|
|
48
50
|
}
|
|
49
51
|
|
|
50
|
-
:host([theme~='elevated'][theme~='outlined']) {
|
|
51
|
-
|
|
52
|
-
inset 0 -1px 0 0 var(--lumo-shade-10pct),
|
|
53
|
-
var(--vaadin-card-box-shadow);
|
|
52
|
+
:host([theme~='elevated']:not([theme~='outlined'])) {
|
|
53
|
+
--vaadin-card-border-color: var(--lumo-contrast-10pct);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
:host(:where([theme~='stretch-media'])) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
|
package/web-types.json
CHANGED