m3-svelte 5.1.1 → 5.1.2
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/buttons/SplitButton.svelte +19 -14
- package/package/misc/styles.css +11 -15
- package/package.json +1 -1
|
@@ -101,8 +101,7 @@
|
|
|
101
101
|
position: relative;
|
|
102
102
|
transition:
|
|
103
103
|
box-shadow var(--m3-util-easing-fast),
|
|
104
|
-
border-radius var(--m3-util-easing-fast)
|
|
105
|
-
padding var(--m3-util-easing-fast);
|
|
104
|
+
border-radius var(--m3-util-easing-fast);
|
|
106
105
|
}
|
|
107
106
|
|
|
108
107
|
button {
|
|
@@ -129,21 +128,21 @@
|
|
|
129
128
|
position: relative;
|
|
130
129
|
}
|
|
131
130
|
summary {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
131
|
+
width: 3rem;
|
|
132
|
+
|
|
133
|
+
--inner-shape: var(--m3-split-button-inner-shape);
|
|
134
|
+
--outer-shape: var(--m3-split-button-outer-shape);
|
|
135
|
+
border-start-start-radius: var(--inner-shape);
|
|
136
|
+
border-end-start-radius: var(--inner-shape);
|
|
137
|
+
border-start-end-radius: var(--outer-shape);
|
|
138
|
+
border-end-end-radius: var(--outer-shape);
|
|
139
|
+
|
|
136
140
|
&:hover,
|
|
137
141
|
&:active {
|
|
138
|
-
|
|
139
|
-
border-end-start-radius: var(--m3-split-button-half-shape);
|
|
142
|
+
--inner-shape: var(--m3-split-button-half-shape);
|
|
140
143
|
}
|
|
141
|
-
border-start-end-radius: var(--m3-split-button-outer-shape);
|
|
142
|
-
border-end-end-radius: var(--m3-split-button-outer-shape);
|
|
143
144
|
&:is(details[open] summary) {
|
|
144
|
-
|
|
145
|
-
padding-inline-end: 0.8125rem;
|
|
146
|
-
border-radius: var(--m3-split-button-outer-shape);
|
|
145
|
+
--inner-shape: var(--m3-split-button-outer-shape);
|
|
147
146
|
> :global(.tint) {
|
|
148
147
|
opacity: 0.08;
|
|
149
148
|
}
|
|
@@ -152,7 +151,13 @@
|
|
|
152
151
|
}
|
|
153
152
|
}
|
|
154
153
|
> :global(svg) {
|
|
155
|
-
|
|
154
|
+
/* Push away from the most rounded side */
|
|
155
|
+
--shape-delta: calc(var(--inner-shape) - var(--outer-shape));
|
|
156
|
+
--correction: calc(var(--m3-util-optical-centering-coefficient) * var(--shape-delta));
|
|
157
|
+
translate: var(--correction) 0;
|
|
158
|
+
transition:
|
|
159
|
+
rotate var(--m3-util-easing-fast),
|
|
160
|
+
translate var(--m3-util-easing-fast);
|
|
156
161
|
}
|
|
157
162
|
}
|
|
158
163
|
details > :global(:not(summary)) :global {
|
package/package/misc/styles.css
CHANGED
|
@@ -2,25 +2,20 @@
|
|
|
2
2
|
:root {
|
|
3
3
|
--m3-util-elevation-0: none;
|
|
4
4
|
--m3-util-elevation-1:
|
|
5
|
-
0px
|
|
6
|
-
0px
|
|
7
|
-
0px 1px 5px 0px rgb(var(--m3-scheme-shadow) / 0.12);
|
|
5
|
+
0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3), /* Spot */
|
|
6
|
+
0px 1px 3px 1px rgb(var(--m3-scheme-shadow) / 0.15); /* Ambient */
|
|
8
7
|
--m3-util-elevation-2:
|
|
9
|
-
0px 2px
|
|
10
|
-
0px
|
|
11
|
-
0px 1px 10px 0px rgb(var(--m3-scheme-shadow) / 0.12);
|
|
8
|
+
0px 1px 2px 0px rgb(var(--m3-scheme-shadow) / 0.3),
|
|
9
|
+
0px 2px 6px 2px rgb(var(--m3-scheme-shadow) / 0.15);
|
|
12
10
|
--m3-util-elevation-3:
|
|
13
|
-
0px
|
|
14
|
-
0px 8px
|
|
15
|
-
0px 3px 14px 2px rgb(var(--m3-scheme-shadow) / 0.12);
|
|
11
|
+
0px 1px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
|
|
12
|
+
0px 4px 8px 3px rgb(var(--m3-scheme-shadow) / 0.15);
|
|
16
13
|
--m3-util-elevation-4:
|
|
17
|
-
0px
|
|
18
|
-
0px
|
|
19
|
-
0px 3px 14px 2px rgb(var(--m3-scheme-shadow) / 0.12);
|
|
14
|
+
0px 2px 3px 0px rgb(var(--m3-scheme-shadow) / 0.3),
|
|
15
|
+
0px 6px 10px 4px rgb(var(--m3-scheme-shadow) / 0.15);
|
|
20
16
|
--m3-util-elevation-5:
|
|
21
|
-
0px
|
|
22
|
-
0px
|
|
23
|
-
0px 6px 30px 5px rgb(var(--m3-scheme-shadow) / 0.12);
|
|
17
|
+
0px 4px 4px 0px rgb(var(--m3-scheme-shadow) / 0.3),
|
|
18
|
+
0px 8px 12px 6px rgb(var(--m3-scheme-shadow) / 0.15);
|
|
24
19
|
--m3-util-bottom-offset: 0;
|
|
25
20
|
|
|
26
21
|
/* Shapes */
|
|
@@ -31,6 +26,7 @@
|
|
|
31
26
|
--m3-util-rounding-large: 16px;
|
|
32
27
|
--m3-util-rounding-extra-large: 28px;
|
|
33
28
|
--m3-util-rounding-full: 9999px;
|
|
29
|
+
--m3-util-optical-centering-coefficient: 0.11;
|
|
34
30
|
|
|
35
31
|
--m3-font: Roboto, system-ui, sans-serif;
|
|
36
32
|
|