1 | @use '../internal' as *;
|
2 |
|
3 |
|
4 |
|
5 | $generate-utility: should-generate-classes($ACCORDION);
|
6 |
|
7 | @if $generate-utility {
|
8 | details.accordion {
|
9 | border-bottom: 1px solid fill('gray', '300');
|
10 | display: block;
|
11 | padding: 1rem;
|
12 |
|
13 | summary.accordion__summary {
|
14 | align-items: center;
|
15 | cursor: pointer;
|
16 | display: flex;
|
17 | font-weight: bold;
|
18 | justify-content: space-between;
|
19 | list-style-type: none;
|
20 | opacity: 0.75;
|
21 | transition: all 250ms;
|
22 |
|
23 | &:after {
|
24 | background-image: url($img-chevron-dark);
|
25 | background-position: right center;
|
26 | background-size: 1rem auto;
|
27 | background-repeat: no-repeat;
|
28 | content: '';
|
29 | display: block;
|
30 | float: right;
|
31 | height: 1rem;
|
32 | transform: rotate(-90deg);
|
33 | width: 1rem;
|
34 | }
|
35 | }
|
36 |
|
37 | &[open] summary.accordion__summary {
|
38 | margin-bottom: 1rem;
|
39 | opacity: 1;
|
40 |
|
41 | &:after {
|
42 | transform: rotate(0);
|
43 | }
|
44 | }
|
45 | }
|
46 | }
|