@rcarls/rc-theme-material 0.2.0 → 0.3.1
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/README.md +34 -82
- package/bridge.css +446 -298
- package/components/accordion.css +173 -6
- package/components/app-bar.css +8 -4
- package/components/combobox.css +63 -0
- package/components/dialog.css +5 -2
- package/components/disclosure.css +102 -7
- package/components/fab.css +17 -0
- package/components/listbox.css +31 -22
- package/components/menu-button.css +13 -13
- package/components/menu.css +96 -12
- package/components/menubar.css +18 -3
- package/components/search-bar.css +16 -6
- package/components/select.css +62 -0
- package/components/splitter.css +26 -12
- package/components/transfer-list.css +40 -1
- package/components.css +1 -0
- package/defaults.css +858 -87
- package/package.json +6 -7
package/components/accordion.css
CHANGED
|
@@ -1,14 +1,181 @@
|
|
|
1
1
|
@layer rc-theme-material.components {
|
|
2
2
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion {
|
|
3
3
|
display: grid;
|
|
4
|
-
gap: 0.
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
gap: 0.5rem;
|
|
5
|
+
border: 0;
|
|
6
|
+
background: transparent;
|
|
7
|
+
--rc-theme-material-accordion-easing: cubic-bezier(
|
|
8
|
+
var(--md-sys-motion-easing-standard-x0, 0.2),
|
|
9
|
+
var(--md-sys-motion-easing-standard-y0, 0),
|
|
10
|
+
var(--md-sys-motion-easing-standard-x1, 0),
|
|
11
|
+
var(--md-sys-motion-easing-standard-y1, 1)
|
|
12
|
+
);
|
|
8
13
|
}
|
|
9
14
|
|
|
15
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > rc-disclosure {
|
|
16
|
+
display: block;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details,
|
|
10
20
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > rc-disclosure > details {
|
|
11
|
-
|
|
12
|
-
|
|
21
|
+
overflow: clip;
|
|
22
|
+
border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
|
|
23
|
+
border-radius: var(--md-sys-shape-corner-large, 1rem);
|
|
24
|
+
background: var(--md-sys-color-surface-container-low, Canvas);
|
|
25
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
26
|
+
transition:
|
|
27
|
+
background-color var(--md-sys-motion-duration-200, 200ms)
|
|
28
|
+
var(--rc-theme-material-accordion-easing),
|
|
29
|
+
border-color var(--md-sys-motion-duration-200, 200ms)
|
|
30
|
+
var(--rc-theme-material-accordion-easing),
|
|
31
|
+
box-shadow var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-accordion-easing);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details[open],
|
|
35
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
36
|
+
rc-accordion
|
|
37
|
+
> rc-disclosure
|
|
38
|
+
> details[open] {
|
|
39
|
+
background: var(--md-sys-color-surface-container, Canvas);
|
|
40
|
+
box-shadow: var(
|
|
41
|
+
--rc-shadow-level1,
|
|
42
|
+
0 1px 2px 0 rgb(0 0 0 / 0.3),
|
|
43
|
+
0 1px 3px 1px rgb(0 0 0 / 0.15)
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > summary,
|
|
48
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
49
|
+
rc-accordion
|
|
50
|
+
> rc-disclosure
|
|
51
|
+
> details
|
|
52
|
+
> summary {
|
|
53
|
+
display: grid;
|
|
54
|
+
grid-template-columns: minmax(0, 1fr);
|
|
55
|
+
align-items: center;
|
|
56
|
+
box-sizing: border-box;
|
|
57
|
+
min-block-size: 3.5rem;
|
|
58
|
+
padding-block: 0.75rem;
|
|
59
|
+
padding-inline: 1rem;
|
|
60
|
+
border-radius: calc(var(--md-sys-shape-corner-large, 1rem) - 1px);
|
|
61
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
font-family: var(--md-sys-typescale-title-small-font, inherit);
|
|
64
|
+
font-size: var(--md-sys-typescale-title-small-size, 0.875rem);
|
|
65
|
+
font-weight: var(--md-sys-typescale-title-small-weight, 500);
|
|
66
|
+
line-height: var(--md-sys-typescale-title-small-line-height, 1.25rem);
|
|
67
|
+
transition: background-color var(--md-sys-motion-duration-100, 100ms)
|
|
68
|
+
var(--rc-theme-material-accordion-easing);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > summary::marker,
|
|
72
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
73
|
+
rc-accordion
|
|
74
|
+
> rc-disclosure
|
|
75
|
+
> details
|
|
76
|
+
> summary::marker {
|
|
77
|
+
color: var(--md-sys-color-on-surface-variant, GrayText);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > summary:hover,
|
|
81
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
82
|
+
rc-accordion
|
|
83
|
+
> rc-disclosure
|
|
84
|
+
> details
|
|
85
|
+
> summary:hover {
|
|
86
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
87
|
+
background: color-mix(
|
|
88
|
+
in srgb,
|
|
89
|
+
var(--md-sys-color-on-surface, CanvasText)
|
|
90
|
+
calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
|
|
91
|
+
transparent
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
96
|
+
rc-accordion
|
|
97
|
+
> details
|
|
98
|
+
> summary:focus-visible,
|
|
99
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
100
|
+
rc-accordion
|
|
101
|
+
> rc-disclosure
|
|
102
|
+
> details
|
|
103
|
+
> summary:focus-visible {
|
|
104
|
+
outline: var(--rc-focus-ring, 2px solid Highlight);
|
|
105
|
+
outline-offset: -2px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > :not(summary),
|
|
109
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
110
|
+
rc-accordion
|
|
111
|
+
> rc-disclosure
|
|
112
|
+
> details
|
|
113
|
+
> :not(summary) {
|
|
114
|
+
box-sizing: border-box;
|
|
115
|
+
max-block-size: 0;
|
|
116
|
+
overflow: clip;
|
|
117
|
+
padding-block: 0;
|
|
118
|
+
padding-inline: 1rem;
|
|
119
|
+
color: var(--md-sys-color-on-surface-variant, CanvasText);
|
|
120
|
+
font-family: var(--md-sys-typescale-body-medium-font, inherit);
|
|
121
|
+
font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
|
|
122
|
+
line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
|
|
123
|
+
opacity: 0;
|
|
124
|
+
transition:
|
|
125
|
+
max-block-size var(--md-sys-motion-duration-300, 300ms)
|
|
126
|
+
var(--rc-theme-material-accordion-easing),
|
|
127
|
+
opacity var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-accordion-easing),
|
|
128
|
+
padding-block var(--md-sys-motion-duration-200, 200ms)
|
|
129
|
+
var(--rc-theme-material-accordion-easing);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
133
|
+
rc-accordion
|
|
134
|
+
> details[open]
|
|
135
|
+
> :not(summary),
|
|
136
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
137
|
+
rc-accordion
|
|
138
|
+
> rc-disclosure
|
|
139
|
+
> details[open]
|
|
140
|
+
> :not(summary) {
|
|
141
|
+
max-block-size: 60rem;
|
|
142
|
+
padding-block: 0 1rem;
|
|
143
|
+
opacity: 1;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@supports (transition-behavior: allow-discrete) {
|
|
147
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > :not(summary),
|
|
148
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
149
|
+
rc-accordion
|
|
150
|
+
> rc-disclosure
|
|
151
|
+
> details
|
|
152
|
+
> :not(summary) {
|
|
153
|
+
transition:
|
|
154
|
+
content-visibility var(--md-sys-motion-duration-300, 300ms) allow-discrete,
|
|
155
|
+
max-block-size var(--md-sys-motion-duration-300, 300ms)
|
|
156
|
+
var(--rc-theme-material-accordion-easing),
|
|
157
|
+
opacity var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-accordion-easing),
|
|
158
|
+
padding-block var(--md-sys-motion-duration-200, 200ms)
|
|
159
|
+
var(--rc-theme-material-accordion-easing);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
@media (prefers-reduced-motion: reduce) {
|
|
164
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details,
|
|
165
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > rc-disclosure > details,
|
|
166
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > summary,
|
|
167
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
168
|
+
rc-accordion
|
|
169
|
+
> rc-disclosure
|
|
170
|
+
> details
|
|
171
|
+
> summary,
|
|
172
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > :not(summary),
|
|
173
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
174
|
+
rc-accordion
|
|
175
|
+
> rc-disclosure
|
|
176
|
+
> details
|
|
177
|
+
> :not(summary) {
|
|
178
|
+
transition-duration: 0ms;
|
|
179
|
+
}
|
|
13
180
|
}
|
|
14
181
|
}
|
package/components/app-bar.css
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
@layer rc-theme-material.components {
|
|
2
2
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar {
|
|
3
|
-
box-shadow: var(--
|
|
3
|
+
box-shadow: var(--rc-shadow-level0, none);
|
|
4
4
|
font-family: var(--md-sys-typescale-title-large-font, inherit);
|
|
5
|
-
transition:
|
|
5
|
+
transition:
|
|
6
|
+
box-shadow 200ms ease,
|
|
7
|
+
translate 200ms ease;
|
|
6
8
|
}
|
|
7
9
|
|
|
8
10
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar[data-scrolled] {
|
|
9
11
|
--rc-app-bar-bg: var(--md-sys-color-surface-container, Canvas);
|
|
10
|
-
box-shadow: var(--
|
|
12
|
+
box-shadow: var(--rc-shadow-level2, none);
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar :is(button, [role='button']) {
|
|
@@ -20,7 +22,9 @@
|
|
|
20
22
|
color: inherit;
|
|
21
23
|
}
|
|
22
24
|
|
|
23
|
-
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
25
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
26
|
+
rc-app-bar
|
|
27
|
+
:is(button, [role='button']):hover {
|
|
24
28
|
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
25
29
|
}
|
|
26
30
|
}
|
package/components/combobox.css
CHANGED
|
@@ -23,9 +23,72 @@
|
|
|
23
23
|
|
|
24
24
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle) {
|
|
25
25
|
border-radius: var(--md-sys-shape-corner-full, 999px);
|
|
26
|
+
color: var(
|
|
27
|
+
--md-outlined-text-field-trailing-icon-color,
|
|
28
|
+
var(--md-sys-color-on-surface-variant, CanvasText)
|
|
29
|
+
);
|
|
30
|
+
transition: color 150ms ease, background-color 150ms ease;
|
|
26
31
|
}
|
|
27
32
|
|
|
28
33
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(toggle):hover {
|
|
29
34
|
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
30
35
|
}
|
|
36
|
+
|
|
37
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox[open]::part(toggle) {
|
|
38
|
+
color: var(
|
|
39
|
+
--md-outlined-text-field-focus-trailing-icon-color,
|
|
40
|
+
var(--md-sys-color-primary, Highlight)
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(chip):hover {
|
|
45
|
+
background: color-mix(in srgb, var(--md-sys-color-on-surface-variant, CanvasText) 8%, transparent);
|
|
46
|
+
color: var(--md-sys-color-on-surface-variant, CanvasText);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/*
|
|
50
|
+
* Propagate Material styles to the embedded rc-listbox host. rc-listbox renders
|
|
51
|
+
* options into its own light DOM inside rc-combobox's shadow root, so inherited
|
|
52
|
+
* custom properties are the stable styling contract for option rows.
|
|
53
|
+
*/
|
|
54
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-combobox::part(listbox) {
|
|
55
|
+
background: var(--md-menu-container-color, var(--md-sys-color-surface-container, Canvas));
|
|
56
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
57
|
+
font-family: var(--md-sys-typescale-body-large-font, inherit);
|
|
58
|
+
font-size: var(--md-sys-typescale-body-large-size, 1rem);
|
|
59
|
+
line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
|
|
60
|
+
padding-block: 0.5rem;
|
|
61
|
+
border-radius: var(--md-menu-container-shape, var(--md-sys-shape-corner-extra-small, 0.25rem));
|
|
62
|
+
|
|
63
|
+
/* Option sizing */
|
|
64
|
+
--rc-listbox-option-gap: 0.75rem;
|
|
65
|
+
--rc-listbox-option-min-block-size: 3rem;
|
|
66
|
+
--rc-listbox-option-padding-block: 0;
|
|
67
|
+
--rc-listbox-option-padding-inline: 0.75rem;
|
|
68
|
+
--rc-listbox-option-transition: background-color 150ms ease, color 150ms ease;
|
|
69
|
+
|
|
70
|
+
/* M3 hover state layer (8% on-surface) instead of secondary-container */
|
|
71
|
+
--rc-highlight: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
72
|
+
--rc-highlight-text: var(--md-sys-color-on-surface, CanvasText);
|
|
73
|
+
--rc-listbox-hover-bg: color-mix(
|
|
74
|
+
in srgb,
|
|
75
|
+
var(--md-sys-color-on-surface, CanvasText) 8%,
|
|
76
|
+
transparent
|
|
77
|
+
);
|
|
78
|
+
--rc-listbox-hover-color: var(--md-sys-color-on-surface, CanvasText);
|
|
79
|
+
--rc-listbox-active-bg: color-mix(
|
|
80
|
+
in srgb,
|
|
81
|
+
var(--md-sys-color-on-surface, CanvasText) 12%,
|
|
82
|
+
transparent
|
|
83
|
+
);
|
|
84
|
+
--rc-listbox-active-color: var(--md-sys-color-on-surface, CanvasText);
|
|
85
|
+
|
|
86
|
+
/* Selected state */
|
|
87
|
+
--rc-listbox-selected-bg: var(--md-sys-color-secondary-container, Highlight);
|
|
88
|
+
--rc-listbox-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
|
|
89
|
+
--rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
|
|
90
|
+
|
|
91
|
+
/* M3 menus use background state layer for keyboard focus, not an outline ring */
|
|
92
|
+
--rc-focus-ring: none;
|
|
93
|
+
}
|
|
31
94
|
}
|
package/components/dialog.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
border-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
|
|
7
7
|
background: var(--md-sys-color-surface-container-high, Canvas);
|
|
8
8
|
color: var(--md-sys-color-on-surface, CanvasText);
|
|
9
|
-
box-shadow: var(--
|
|
9
|
+
box-shadow: var(--rc-shadow-level3, var(--rc-shadow, none));
|
|
10
10
|
font-family: var(--md-sys-typescale-body-medium-font, inherit);
|
|
11
11
|
}
|
|
12
12
|
|
|
@@ -14,7 +14,10 @@
|
|
|
14
14
|
background: color-mix(in srgb, var(--md-sys-color-scrim, #000) 32%, transparent);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
17
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
18
|
+
rc-dialog
|
|
19
|
+
> dialog
|
|
20
|
+
:is(button, [role='button']) {
|
|
18
21
|
min-block-size: 2.5rem;
|
|
19
22
|
padding-inline: 1.5rem;
|
|
20
23
|
border: 0;
|
|
@@ -1,28 +1,123 @@
|
|
|
1
1
|
@layer rc-theme-material.components {
|
|
2
2
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure {
|
|
3
3
|
display: block;
|
|
4
|
+
--rc-theme-material-disclosure-easing: cubic-bezier(
|
|
5
|
+
var(--md-sys-motion-easing-standard-x0, 0.2),
|
|
6
|
+
var(--md-sys-motion-easing-standard-y0, 0),
|
|
7
|
+
var(--md-sys-motion-easing-standard-x1, 0),
|
|
8
|
+
var(--md-sys-motion-easing-standard-y1, 1)
|
|
9
|
+
);
|
|
4
10
|
}
|
|
5
11
|
|
|
6
12
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details {
|
|
7
|
-
|
|
8
|
-
|
|
13
|
+
overflow: clip;
|
|
14
|
+
border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
|
|
15
|
+
border-radius: var(--md-sys-shape-corner-large, 1rem);
|
|
16
|
+
background: var(--md-sys-color-surface-container-low, Canvas);
|
|
9
17
|
color: var(--md-sys-color-on-surface, CanvasText);
|
|
18
|
+
transition:
|
|
19
|
+
background-color var(--md-sys-motion-duration-200, 200ms)
|
|
20
|
+
var(--rc-theme-material-disclosure-easing),
|
|
21
|
+
border-color var(--md-sys-motion-duration-200, 200ms)
|
|
22
|
+
var(--rc-theme-material-disclosure-easing),
|
|
23
|
+
box-shadow var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-disclosure-easing);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details[open] {
|
|
27
|
+
background: var(--md-sys-color-surface-container, Canvas);
|
|
28
|
+
box-shadow: var(
|
|
29
|
+
--rc-shadow-level1,
|
|
30
|
+
0 1px 2px 0 rgb(0 0 0 / 0.3),
|
|
31
|
+
0 1px 3px 1px rgb(0 0 0 / 0.15)
|
|
32
|
+
);
|
|
10
33
|
}
|
|
11
34
|
|
|
12
35
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
36
|
+
display: grid;
|
|
37
|
+
grid-template-columns: minmax(0, 1fr);
|
|
38
|
+
align-items: center;
|
|
39
|
+
box-sizing: border-box;
|
|
40
|
+
min-block-size: 3.5rem;
|
|
41
|
+
padding-block: 0.75rem;
|
|
42
|
+
padding-inline: 1rem;
|
|
43
|
+
border-radius: calc(var(--md-sys-shape-corner-large, 1rem) - 1px);
|
|
44
|
+
color: var(--md-sys-color-on-surface, CanvasText);
|
|
17
45
|
cursor: pointer;
|
|
46
|
+
font-family: var(--md-sys-typescale-title-small-font, inherit);
|
|
47
|
+
font-size: var(--md-sys-typescale-title-small-size, 0.875rem);
|
|
48
|
+
font-weight: var(--md-sys-typescale-title-small-weight, 500);
|
|
49
|
+
line-height: var(--md-sys-typescale-title-small-line-height, 1.25rem);
|
|
50
|
+
transition: background-color var(--md-sys-motion-duration-100, 100ms)
|
|
51
|
+
var(--rc-theme-material-disclosure-easing);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary::marker {
|
|
55
|
+
color: var(--md-sys-color-on-surface-variant, GrayText);
|
|
18
56
|
}
|
|
19
57
|
|
|
20
58
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary:hover {
|
|
21
59
|
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
60
|
+
background: color-mix(
|
|
61
|
+
in srgb,
|
|
62
|
+
var(--md-sys-color-on-surface, CanvasText)
|
|
63
|
+
calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
|
|
64
|
+
transparent
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
69
|
+
rc-disclosure
|
|
70
|
+
> details
|
|
71
|
+
> summary:focus-visible {
|
|
72
|
+
outline: var(--rc-focus-ring, 2px solid Highlight);
|
|
73
|
+
outline-offset: -2px;
|
|
22
74
|
}
|
|
23
75
|
|
|
24
76
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > :not(summary) {
|
|
77
|
+
box-sizing: border-box;
|
|
78
|
+
max-block-size: 0;
|
|
79
|
+
overflow: clip;
|
|
80
|
+
padding-block: 0;
|
|
25
81
|
padding-inline: 1rem;
|
|
26
|
-
|
|
82
|
+
color: var(--md-sys-color-on-surface-variant, CanvasText);
|
|
83
|
+
font-family: var(--md-sys-typescale-body-medium-font, inherit);
|
|
84
|
+
font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
|
|
85
|
+
line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
|
|
86
|
+
opacity: 0;
|
|
87
|
+
transition:
|
|
88
|
+
max-block-size var(--md-sys-motion-duration-300, 300ms)
|
|
89
|
+
var(--rc-theme-material-disclosure-easing),
|
|
90
|
+
opacity var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-disclosure-easing),
|
|
91
|
+
padding-block var(--md-sys-motion-duration-200, 200ms)
|
|
92
|
+
var(--rc-theme-material-disclosure-easing);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:where(.rc-theme-material, :host(.rc-theme-material))
|
|
96
|
+
rc-disclosure
|
|
97
|
+
> details[open]
|
|
98
|
+
> :not(summary) {
|
|
99
|
+
max-block-size: 60rem;
|
|
100
|
+
padding-block: 0 1rem;
|
|
101
|
+
opacity: 1;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@supports (transition-behavior: allow-discrete) {
|
|
105
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > :not(summary) {
|
|
106
|
+
transition:
|
|
107
|
+
content-visibility var(--md-sys-motion-duration-300, 300ms) allow-discrete,
|
|
108
|
+
max-block-size var(--md-sys-motion-duration-300, 300ms)
|
|
109
|
+
var(--rc-theme-material-disclosure-easing),
|
|
110
|
+
opacity var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-disclosure-easing),
|
|
111
|
+
padding-block var(--md-sys-motion-duration-200, 200ms)
|
|
112
|
+
var(--rc-theme-material-disclosure-easing);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media (prefers-reduced-motion: reduce) {
|
|
117
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details,
|
|
118
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary,
|
|
119
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > :not(summary) {
|
|
120
|
+
transition-duration: 0ms;
|
|
121
|
+
}
|
|
27
122
|
}
|
|
28
123
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
@layer rc-theme-material.components {
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-fab > button:hover {
|
|
3
|
+
background: color-mix(
|
|
4
|
+
in srgb,
|
|
5
|
+
var(--md-fab-hover-icon-color, var(--md-sys-color-on-primary-container, ButtonText)) 8%,
|
|
6
|
+
var(--rc-fab-bg, var(--md-sys-color-primary-container, ButtonFace))
|
|
7
|
+
);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-fab > button:active {
|
|
11
|
+
background: color-mix(
|
|
12
|
+
in srgb,
|
|
13
|
+
var(--md-fab-pressed-icon-color, var(--md-sys-color-on-primary-container, ButtonText)) 12%,
|
|
14
|
+
var(--rc-fab-bg, var(--md-sys-color-primary-container, ButtonFace))
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
}
|
package/components/listbox.css
CHANGED
|
@@ -1,33 +1,42 @@
|
|
|
1
1
|
@layer rc-theme-material.components {
|
|
2
2
|
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox {
|
|
3
3
|
display: block;
|
|
4
|
+
background: var(--md-sys-color-surface-container, Canvas);
|
|
5
|
+
border-radius: 4px;
|
|
6
|
+
box-shadow:
|
|
7
|
+
0 1px 2px rgba(0, 0, 0, 0.3),
|
|
8
|
+
0 2px 6px 2px rgba(0, 0, 0, 0.15);
|
|
9
|
+
padding-block: 0.5rem;
|
|
10
|
+
overflow-y: auto;
|
|
4
11
|
color: var(--md-sys-color-on-surface, CanvasText);
|
|
5
12
|
font-family: var(--md-sys-typescale-body-large-font, inherit);
|
|
6
13
|
font-size: var(--md-sys-typescale-body-large-size, 1rem);
|
|
7
14
|
line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
|
|
15
|
+
--rc-listbox-option-gap: 0.75rem;
|
|
16
|
+
--rc-listbox-option-min-block-size: 3rem;
|
|
17
|
+
--rc-listbox-option-padding-block: 0;
|
|
18
|
+
--rc-listbox-option-padding-inline: 0.75rem;
|
|
19
|
+
--rc-listbox-option-transition: background-color 150ms ease, color 150ms ease;
|
|
20
|
+
--rc-listbox-hover-bg: color-mix(
|
|
21
|
+
in srgb,
|
|
22
|
+
var(--md-sys-color-on-surface, CanvasText) 8%,
|
|
23
|
+
transparent
|
|
24
|
+
);
|
|
25
|
+
--rc-listbox-hover-color: var(--md-sys-color-on-surface, CanvasText);
|
|
26
|
+
--rc-listbox-active-bg: color-mix(
|
|
27
|
+
in srgb,
|
|
28
|
+
var(--md-sys-color-on-surface, CanvasText) 12%,
|
|
29
|
+
transparent
|
|
30
|
+
);
|
|
31
|
+
--rc-listbox-active-color: var(--md-sys-color-on-surface, CanvasText);
|
|
32
|
+
--rc-listbox-selected-bg: var(--md-sys-color-secondary-container, Highlight);
|
|
33
|
+
--rc-listbox-selected-color: var(--md-sys-color-on-secondary-container, HighlightText);
|
|
34
|
+
--rc-listbox-disabled-opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
|
|
8
35
|
}
|
|
9
36
|
|
|
10
|
-
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option'] {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
background: transparent;
|
|
15
|
-
color: inherit;
|
|
16
|
-
transition: background-color 150ms ease, color 150ms ease;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option']:hover,
|
|
20
|
-
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option'][data-active] {
|
|
21
|
-
background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option'][aria-selected='true'] {
|
|
25
|
-
background: var(--md-sys-color-secondary-container, Highlight);
|
|
26
|
-
color: var(--md-sys-color-on-secondary-container, HighlightText);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox [part~='option'][aria-disabled='true'] {
|
|
30
|
-
color: var(--md-sys-color-on-surface, GrayText);
|
|
31
|
-
opacity: var(--md-sys-state-disabled-state-layer-opacity, 0.38);
|
|
37
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-listbox[checkmark] [part~='option-checkmark'] {
|
|
38
|
+
inline-size: 1.5rem;
|
|
39
|
+
flex-shrink: 0;
|
|
40
|
+
text-align: center;
|
|
32
41
|
}
|
|
33
42
|
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
@layer rc-theme-material.components {
|
|
2
|
-
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button
|
|
3
|
-
border-color: transparent;
|
|
4
|
-
background: transparent;
|
|
5
|
-
color: var(--md-sys-color-primary, ButtonText);
|
|
2
|
+
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button {
|
|
6
3
|
font-family: var(--md-sys-typescale-label-large-font, inherit);
|
|
7
4
|
font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
|
|
8
5
|
font-weight: 500;
|
|
9
|
-
transition: background-color 150ms ease;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:where(.rc-theme-material, :host(.rc-theme-material)) rc-menu-button > :is(button, [role='button'])[slot='trigger']:hover {
|
|
13
|
-
background: color-mix(in srgb, var(--md-sys-color-primary, Highlight) 8%, transparent);
|
|
14
|
-
}
|
|
15
6
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
color: var(--md-sys-color-
|
|
7
|
+
--rc-menu-button-trigger-border: 0;
|
|
8
|
+
--rc-menu-button-trigger-background: transparent;
|
|
9
|
+
--rc-menu-button-trigger-color: var(--md-sys-color-primary, ButtonText);
|
|
10
|
+
--rc-menu-button-trigger-transition: background-color 150ms ease, color 150ms ease;
|
|
11
|
+
--rc-menu-button-trigger-hover-background: color-mix(
|
|
12
|
+
in srgb,
|
|
13
|
+
var(--md-sys-color-primary, Highlight) 8%,
|
|
14
|
+
transparent
|
|
15
|
+
);
|
|
16
|
+
--rc-menu-button-trigger-hover-color: var(--md-sys-color-primary, ButtonText);
|
|
17
|
+
--rc-menu-button-trigger-open-background: var(--md-sys-color-secondary-container, ButtonFace);
|
|
18
|
+
--rc-menu-button-trigger-open-color: var(--md-sys-color-on-secondary-container, ButtonText);
|
|
19
19
|
}
|
|
20
20
|
}
|