@streamscloud/kit 0.9.6 → 0.9.7
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.
|
@@ -37,8 +37,11 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
|
|
|
37
37
|
| `--sc-kit--card--color` | Body text color | `var(--sc-kit--color--text--primary)` |
|
|
38
38
|
| `--sc-kit--card--header--background` | Header bar background | `transparent` |
|
|
39
39
|
| `--sc-kit--card--header--border-color` | Header bottom divider | `var(--sc-kit--color--border)` |
|
|
40
|
+
| `--sc-kit--card--header--padding` | Header padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
|
|
41
|
+
| `--sc-kit--card--body--padding` | Body padding (full shorthand) | the `padding` preset value |
|
|
40
42
|
| `--sc-kit--card--footer--background` | Footer bar background | `var(--sc-kit--color--bg--element)` |
|
|
41
43
|
| `--sc-kit--card--footer--border-color` | Footer top divider | `var(--sc-kit--color--border)` |
|
|
44
|
+
| `--sc-kit--card--footer--padding` | Footer padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
|
|
42
45
|
-->
|
|
43
46
|
|
|
44
47
|
<style>.card {
|
|
@@ -53,6 +56,9 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
|
|
|
53
56
|
--_card--header-border-color: var(--sc-kit--card--header--border-color, var(--sc-kit--color--border));
|
|
54
57
|
--_card--footer-background: var(--sc-kit--card--footer--background, var(--sc-kit--color--bg--element));
|
|
55
58
|
--_card--footer-border-color: var(--sc-kit--card--footer--border-color, var(--sc-kit--color--border));
|
|
59
|
+
--_card--header-padding: var(--sc-kit--card--header--padding, var(--sc-kit--space--3) var(--_card--chrome-padding-inline));
|
|
60
|
+
--_card--body-padding: var(--sc-kit--card--body--padding, var(--_card--body-padding-default));
|
|
61
|
+
--_card--footer-padding: var(--sc-kit--card--footer--padding, var(--sc-kit--space--3) var(--_card--chrome-padding-inline));
|
|
56
62
|
display: block;
|
|
57
63
|
width: 100%;
|
|
58
64
|
box-sizing: border-box;
|
|
@@ -66,25 +72,32 @@ whole card becomes a clickable target with hover and focus state, no `interactiv
|
|
|
66
72
|
.card--raised {
|
|
67
73
|
box-shadow: var(--_card--shadow);
|
|
68
74
|
}
|
|
69
|
-
.card--pad-none
|
|
70
|
-
padding: 0;
|
|
75
|
+
.card--pad-none {
|
|
76
|
+
--_card--body-padding-default: 0;
|
|
77
|
+
--_card--chrome-padding-inline: var(--sc-kit--space--5);
|
|
71
78
|
}
|
|
72
|
-
.card--pad-sm
|
|
73
|
-
padding: var(--sc-kit--space--3);
|
|
79
|
+
.card--pad-sm {
|
|
80
|
+
--_card--body-padding-default: var(--sc-kit--space--3);
|
|
81
|
+
--_card--chrome-padding-inline: var(--sc-kit--space--3);
|
|
74
82
|
}
|
|
75
|
-
.card--pad-md
|
|
76
|
-
padding: var(--sc-kit--space--5);
|
|
83
|
+
.card--pad-md {
|
|
84
|
+
--_card--body-padding-default: var(--sc-kit--space--5);
|
|
85
|
+
--_card--chrome-padding-inline: var(--sc-kit--space--5);
|
|
77
86
|
}
|
|
78
|
-
.card--pad-lg
|
|
79
|
-
padding: var(--sc-kit--space--6);
|
|
87
|
+
.card--pad-lg {
|
|
88
|
+
--_card--body-padding-default: var(--sc-kit--space--6);
|
|
89
|
+
--_card--chrome-padding-inline: var(--sc-kit--space--6);
|
|
90
|
+
}
|
|
91
|
+
.card__body {
|
|
92
|
+
padding: var(--_card--body-padding);
|
|
80
93
|
}
|
|
81
94
|
.card__header {
|
|
82
|
-
padding: var(--
|
|
95
|
+
padding: var(--_card--header-padding);
|
|
83
96
|
background: var(--_card--header-background);
|
|
84
97
|
border-bottom: 1px solid var(--_card--header-border-color);
|
|
85
98
|
}
|
|
86
99
|
.card__footer {
|
|
87
|
-
padding: var(--
|
|
100
|
+
padding: var(--_card--footer-padding);
|
|
88
101
|
background: var(--_card--footer-background);
|
|
89
102
|
border-top: 1px solid var(--_card--footer-border-color);
|
|
90
103
|
}
|
|
@@ -4,7 +4,7 @@ type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
|
4
4
|
type Props = {
|
|
5
5
|
/** Visual elevation. @default 'flat' */
|
|
6
6
|
elevation?: CardElevation;
|
|
7
|
-
/** Inner body padding preset. Header
|
|
7
|
+
/** Inner body padding preset. Header/footer inline padding follows it; their block padding stays fixed. @default 'md' */
|
|
8
8
|
padding?: CardPadding;
|
|
9
9
|
header?: Snippet;
|
|
10
10
|
footer?: Snippet;
|
|
@@ -34,8 +34,11 @@ type Props = {
|
|
|
34
34
|
* | `--sc-kit--card--color` | Body text color | `var(--sc-kit--color--text--primary)` |
|
|
35
35
|
* | `--sc-kit--card--header--background` | Header bar background | `transparent` |
|
|
36
36
|
* | `--sc-kit--card--header--border-color` | Header bottom divider | `var(--sc-kit--color--border)` |
|
|
37
|
+
* | `--sc-kit--card--header--padding` | Header padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
|
|
38
|
+
* | `--sc-kit--card--body--padding` | Body padding (full shorthand) | the `padding` preset value |
|
|
37
39
|
* | `--sc-kit--card--footer--background` | Footer bar background | `var(--sc-kit--color--bg--element)` |
|
|
38
40
|
* | `--sc-kit--card--footer--border-color` | Footer top divider | `var(--sc-kit--color--border)` |
|
|
41
|
+
* | `--sc-kit--card--footer--padding` | Footer padding (full shorthand) | block `var(--sc-kit--space--3)`, inline follows the `padding` preset |
|
|
39
42
|
*/
|
|
40
43
|
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
41
44
|
type Cmp = ReturnType<typeof Cmp>;
|