You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
1.8 KiB
106 lines
1.8 KiB
fieldset { |
|
border-top: solid 2px var(--accent); |
|
font-family: $font-family-sans-serif; |
|
|
|
h2, |
|
h3 { |
|
margin-bottom: 0; |
|
font-size: 1rem; |
|
font-weight: bold; |
|
text-align: left; |
|
text-transform: none; |
|
|
|
&:before { |
|
display: none; |
|
} |
|
|
|
button { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
all: inherit; |
|
width: 100%; |
|
padding: 1rem 1.1875rem; |
|
margin: 0; |
|
border-top: 0; |
|
|
|
svg { |
|
display: block; |
|
float: right; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
&:hover, |
|
&:focus { |
|
color: var(--brand); |
|
background: var(--bg-body); |
|
} |
|
|
|
&:active { |
|
box-shadow: none; |
|
} |
|
|
|
&[aria-expanded="true"] { |
|
color: var(--brand); |
|
|
|
svg { |
|
transform: rotate(180deg); |
|
} |
|
} |
|
} |
|
} |
|
|
|
h2 { |
|
button[aria-expanded="true"] { |
|
border-bottom: solid 2px var(--accent); |
|
background: #fafdff; |
|
} |
|
} |
|
|
|
[type="radio"] { |
|
position: absolute !important; |
|
width: 1px !important; |
|
height: 1px !important; |
|
padding: 0 !important; |
|
border: 0 !important; |
|
overflow: hidden !important; |
|
clip: rect(1px, 1px, 1px, 1px); |
|
} |
|
|
|
[type="radio"] + label { |
|
cursor: pointer; |
|
display: block; |
|
padding: 1rem 1.1875rem; |
|
margin-bottom: 0; |
|
|
|
svg { |
|
display: none; |
|
} |
|
} |
|
|
|
[type="radio"]:focus { |
|
label { |
|
cursor: pointer; |
|
display: block; |
|
} |
|
} |
|
|
|
[type="radio"]:checked + label { |
|
color: var(--brand); |
|
font-weight: bold; |
|
|
|
svg { |
|
display: block; |
|
float: right; |
|
margin-top: 0.5rem; |
|
width: 1rem; |
|
height: 1rem; |
|
fill: transparent; |
|
} |
|
} |
|
|
|
&:last-of-type { |
|
border-bottom: solid 2px var(--accent); |
|
margin-bottom: 1rem; |
|
} |
|
}
|
|
|