|
1 | 1 | [data-component="accordion"] { |
2 | | - display: flex; |
3 | | - flex-direction: column; |
4 | | - align-items: flex-start; |
5 | | - gap: 8px; |
6 | | - align-self: stretch; |
| 2 | + display: flex; |
| 3 | + flex-direction: column; |
| 4 | + align-items: flex-start; |
| 5 | + gap: 8px; |
| 6 | + align-self: stretch; |
7 | 7 |
|
8 | | - [data-slot="accordion-item"] { |
9 | | - width: 100%; |
10 | | - display: flex; |
11 | | - flex-direction: column; |
12 | | - align-items: flex-start; |
13 | | - align-self: stretch; |
14 | | - overflow: clip; |
| 8 | + [data-slot="accordion-item"] { |
| 9 | + width: 100%; |
| 10 | + display: flex; |
| 11 | + flex-direction: column; |
| 12 | + align-items: flex-start; |
| 13 | + align-self: stretch; |
| 14 | + overflow: clip; |
15 | 15 |
|
16 | | - [data-slot="accordion-header"] { |
17 | | - width: 100%; |
18 | | - display: flex; |
19 | | - align-items: center; |
20 | | - margin: 0; |
21 | | - padding: 0; |
| 16 | + [data-slot="accordion-header"] { |
| 17 | + width: 100%; |
| 18 | + display: flex; |
| 19 | + align-items: center; |
| 20 | + margin: 0; |
| 21 | + padding: 0; |
22 | 22 |
|
23 | | - [data-slot="accordion-trigger"] { |
24 | | - width: 100%; |
25 | | - display: flex; |
26 | | - height: 32px; |
27 | | - padding: 8px 12px; |
28 | | - justify-content: space-between; |
29 | | - align-items: center; |
30 | | - align-self: stretch; |
31 | | - cursor: default; |
32 | | - user-select: none; |
| 23 | + [data-slot="accordion-trigger"] { |
| 24 | + width: 100%; |
| 25 | + display: flex; |
| 26 | + height: 32px; |
| 27 | + padding: 8px 12px; |
| 28 | + justify-content: space-between; |
| 29 | + align-items: center; |
| 30 | + align-self: stretch; |
| 31 | + cursor: default; |
| 32 | + user-select: none; |
33 | 33 |
|
34 | | - background-color: var(--surface-base); |
35 | | - border: 1px solid var(--border-weak-base); |
36 | | - border-radius: var(--radius-md); |
37 | | - overflow: clip; |
38 | | - color: var(--text-strong); |
39 | | - transition-property: background-color, border-color; |
40 | | - transition-duration: var(--transition-duration); |
41 | | - transition-timing-function: var(--transition-easing); |
| 34 | + background-color: var(--surface-base); |
| 35 | + border: 1px solid var(--border-weak-base); |
| 36 | + border-radius: var(--radius-md); |
| 37 | + overflow: clip; |
| 38 | + color: var(--text-strong); |
| 39 | + transition-property: background-color, border-color; |
| 40 | + transition-duration: var(--transition-duration); |
| 41 | + transition-timing-function: var(--transition-easing); |
42 | 42 |
|
43 | | - /* text-12-regular */ |
44 | | - font-family: var(--font-family-sans); |
45 | | - font-size: var(--font-size-small); |
46 | | - font-style: normal; |
47 | | - font-weight: var(--font-weight-regular); |
48 | | - line-height: var(--line-height-large); /* 166.667% */ |
49 | | - letter-spacing: var(--letter-spacing-normal); |
| 43 | + /* text-12-regular */ |
| 44 | + font-family: var(--font-family-sans); |
| 45 | + font-size: var(--font-size-small); |
| 46 | + font-style: normal; |
| 47 | + font-weight: var(--font-weight-regular); |
| 48 | + line-height: var(--line-height-large); /* 166.667% */ |
| 49 | + letter-spacing: var(--letter-spacing-normal); |
50 | 50 |
|
51 | | - &:hover { |
52 | | - background-color: var(--surface-base); |
53 | | - } |
54 | | - &:focus-visible { |
55 | | - outline: none; |
56 | | - } |
57 | | - &[data-disabled] { |
58 | | - cursor: not-allowed; |
59 | | - } |
60 | | - } |
61 | | - } |
| 51 | + &:hover { |
| 52 | + background-color: var(--surface-base); |
| 53 | + } |
| 54 | + &:focus-visible { |
| 55 | + outline: none; |
| 56 | + } |
| 57 | + &[data-disabled] { |
| 58 | + cursor: not-allowed; |
| 59 | + } |
| 60 | + } |
| 61 | + } |
62 | 62 |
|
63 | | - [data-slot="accordion-arrow"] { |
64 | | - flex-shrink: 0; |
65 | | - width: 16px; |
66 | | - height: 16px; |
67 | | - display: flex; |
68 | | - align-items: center; |
69 | | - justify-content: center; |
70 | | - color: var(--text-weak); |
71 | | - } |
| 63 | + [data-slot="accordion-arrow"] { |
| 64 | + flex-shrink: 0; |
| 65 | + width: 16px; |
| 66 | + height: 16px; |
| 67 | + display: flex; |
| 68 | + align-items: center; |
| 69 | + justify-content: center; |
| 70 | + color: var(--text-weak); |
| 71 | + } |
72 | 72 |
|
73 | | - [data-slot="accordion-content"] { |
74 | | - display: grid; |
75 | | - grid-template-rows: 0fr; |
76 | | - transition-property: grid-template-rows, opacity; |
77 | | - transition-duration: var(--transition-duration); |
78 | | - transition-timing-function: var(--transition-easing); |
79 | | - width: 100%; |
| 73 | + [data-slot="accordion-content"] { |
| 74 | + display: grid; |
| 75 | + grid-template-rows: 0fr; |
| 76 | + transition-property: grid-template-rows, opacity; |
| 77 | + transition-duration: var(--transition-duration); |
| 78 | + transition-timing-function: var(--transition-easing); |
| 79 | + width: 100%; |
80 | 80 |
|
81 | | - > * { |
82 | | - overflow: hidden; |
83 | | - } |
84 | | - } |
| 81 | + > * { |
| 82 | + overflow: hidden; |
| 83 | + } |
| 84 | + } |
85 | 85 |
|
86 | | - [data-slot="accordion-content"][data-expanded] { |
87 | | - grid-template-rows: 1fr; |
88 | | - } |
| 86 | + [data-slot="accordion-content"][data-expanded] { |
| 87 | + grid-template-rows: 1fr; |
| 88 | + } |
89 | 89 |
|
90 | | - [data-slot="accordion-content"][data-closed] { |
91 | | - grid-template-rows: 0fr; |
92 | | - } |
| 90 | + [data-slot="accordion-content"][data-closed] { |
| 91 | + grid-template-rows: 0fr; |
| 92 | + } |
93 | 93 |
|
94 | | - &[data-expanded] [data-slot="accordion-trigger"] { |
95 | | - border-bottom-left-radius: 0; |
96 | | - border-bottom-right-radius: 0; |
97 | | - } |
| 94 | + &[data-expanded] [data-slot="accordion-trigger"] { |
| 95 | + border-bottom-left-radius: 0; |
| 96 | + border-bottom-right-radius: 0; |
| 97 | + } |
98 | 98 |
|
99 | | - &[data-expanded] [data-slot="accordion-content"] { |
100 | | - border: 1px solid var(--border-weak-base); |
101 | | - border-top: none; |
102 | | - border-bottom-left-radius: var(--radius-md); |
103 | | - border-bottom-right-radius: var(--radius-md); |
104 | | - height: auto; |
105 | | - } |
106 | | - } |
| 99 | + &[data-expanded] [data-slot="accordion-content"] { |
| 100 | + border: 1px solid var(--border-weak-base); |
| 101 | + border-top: none; |
| 102 | + border-bottom-left-radius: var(--radius-md); |
| 103 | + border-bottom-right-radius: var(--radius-md); |
| 104 | + height: auto; |
| 105 | + } |
| 106 | + } |
107 | 107 | } |
0 commit comments