-
Notifications
You must be signed in to change notification settings - Fork 200
/
Copy pathindex.css
339 lines (286 loc) · 16.6 KB
/
index.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
@import "./themes/spectrum-two.css";
.spectrum-Accordion {
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
--spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text);
--spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator);
--spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
--spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
--spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
--spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100);
--spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
--spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
/* Text header */
--spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
--spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight);
--spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style);
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
--spectrum-accordion-item-header-line-height: 1.25;
/* Text body */
--spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack);
--spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
--spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style);
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
--spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);
/* Colors */
--spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
--spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
--spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
--spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
/* Label */
--spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover);
--spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down);
--spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
--spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color);
/* Focus indicator */
--spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color);
--spectrum-accordion-min-block-size: max(
var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)),
calc(var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))))
);
&:dir(rtl) {
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
}
&:lang(ja),
&:lang(zh),
&:lang(ko) {
--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
}
}
.spectrum-Accordion--compact {
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
&.spectrum-Accordion--sizeS {
--spectrum-accordion-item-height: var(--spectrum-component-height-75);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
}
&.spectrum-Accordion--sizeL {
--spectrum-accordion-item-height: var(--spectrum-component-height-200);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
}
&.spectrum-Accordion--sizeXL {
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
}
}
.spectrum-Accordion--spacious {
--spectrum-accordion-item-header-line-height: 1.278;
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
&.spectrum-Accordion--sizeS {
--spectrum-accordion-item-header-line-height: 1.25;
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
}
&.spectrum-Accordion--sizeL {
--spectrum-accordion-item-header-line-height: 1.273;
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
}
&.spectrum-Accordion--sizeXL {
--spectrum-accordion-item-header-line-height: 1.25;
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
}
}
.spectrum-Accordion--sizeS {
--spectrum-accordion-item-height: var(--spectrum-component-height-100);
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
}
.spectrum-Accordion--sizeL {
--spectrum-accordion-item-height: var(--spectrum-component-height-300);
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
}
.spectrum-Accordion--sizeXL {
--spectrum-accordion-item-height: var(--spectrum-component-height-400);
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
}
.spectrum-Accordion {
display: block;
list-style: none;
padding: 0;
margin: 0;
}
.spectrum-Accordion-item {
z-index: inherit;
position: relative;
margin: 0;
min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height));
min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width));
&:first-child {
border-block-start: 1px solid transparent;
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
}
border-block-end: 1px solid transparent;
border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
}
.spectrum-Accordion-itemHeading {
margin: 0;
position: relative;
box-sizing: border-box;
}
.spectrum-Accordion-itemIconContainer {
padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space));
inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
display: flex;
justify-content: center;
align-items: center;
color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
position: absolute;
inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
&:dir(rtl) {
transform: scaleX(-1);
}
}
.spectrum-Accordion-itemContent {
padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
display: none;
color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font));
line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height));
}
.spectrum-Accordion-itemHeader {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space));
padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)));
padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space));
min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size));
line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height));
text-overflow: ellipsis;
cursor: pointer;
font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size));
font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight));
font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style));
font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font));
/* reset styling if button element is used */
appearance: none;
border: 0;
text-align: start;
inline-size: 100%;
&:focus {
outline: none;
&::after {
content: "";
position: absolute;
inset-inline-start: 0;
}
}
color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default));
&:hover {
color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover));
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
+ .spectrum-Accordion-itemIconContainer {
color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover));
}
}
&:focus-visible {
border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius));
outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color));
background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus));
color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus));
outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1);
}
&:active {
background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down));
color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down));
}
}
.spectrum-Accordion-item {
&.is-open {
.spectrum-Accordion-itemHeader:hover {
background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
}
}
}
.spectrum-Accordion-item.is-disabled {
.spectrum-Accordion-itemHeader {
&,
&:hover,
&:focus-visible {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
background-color: transparent;
}
+ .spectrum-Accordion-itemIconContainer {
color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
}
}
.spectrum-Accordion-itemContent {
color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
}
}
@media (forced-colors: active) {
.spectrum-Accordion-itemHeader {
&::after {
/* make sure focus ring renders */
forced-color-adjust: none;
content: "";
position: absolute;
inset-inline-start: 0;
}
}
}
.spectrum-Accordion-item {
&.is-open {
> .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
> .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
transform: var(--spectrum-logical-rotation,) rotate(90deg);
}
> .spectrum-Accordion-itemContent {
display: block;
}
}
&.is-disabled {
.spectrum-Accordion-itemHeader {
cursor: default;
}
}
}