mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-06-14 18:25:18 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add feature to make cards an accordion

Browse source
This commit is contained in:
Izzy McCabe 2025-05-05 18:30:51 -07:00
parent 1039a4788d
commit e2d91d03d9
1 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

20
scss/components/_card.scss
View file

@ -15,7 +15,9 @@
box-shadow: var(#{$css-var-prefix}card-box-shadow); box-shadow: var(#{$css-var-prefix}card-box-shadow);
> header, > header,
> footer { > footer,
> details > summary > header,
> details > footer {
margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); margin-right: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1); margin-left: calc(var(#{$css-var-prefix}block-spacing-horizontal) * -1);
padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66) padding: calc(var(#{$css-var-prefix}block-spacing-vertical) * 0.66)
@ -23,7 +25,8 @@
background-color: var(#{$css-var-prefix}card-sectioning-background-color); background-color: var(#{$css-var-prefix}card-sectioning-background-color);
} }
> header { > header,
> details > summary > header {
margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); margin-top: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical); margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
border-bottom: var(#{$css-var-prefix}border-width) border-bottom: var(#{$css-var-prefix}border-width)
@ -33,7 +36,7 @@
border-top-left-radius: var(#{$css-var-prefix}border-radius); border-top-left-radius: var(#{$css-var-prefix}border-radius);
} }
> footer { > footer > details > footer {
margin-top: var(#{$css-var-prefix}block-spacing-vertical); margin-top: var(#{$css-var-prefix}block-spacing-vertical);
margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1); margin-bottom: calc(var(#{$css-var-prefix}block-spacing-vertical) * -1);
border-top: var(#{$css-var-prefix}border-width) border-top: var(#{$css-var-prefix}border-width)
@ -42,5 +45,16 @@
border-bottom-right-radius: var(#{$css-var-prefix}border-radius); border-bottom-right-radius: var(#{$css-var-prefix}border-radius);
border-bottom-left-radius: var(#{$css-var-prefix}border-radius); border-bottom-left-radius: var(#{$css-var-prefix}border-radius);
} }
> details > summary {
position: relative;
}
> details > summary::after {
position: absolute;
top: 50%;
right: 0.5rem;
margin-top: calc(var(--pico-block-spacing-vertical) * -0.5);
}
} }
} }