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

refactor: prefix css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-22 13:11:51 +07:00
parent cba8f385c2
commit c5a1ffc733
40 changed files with 2334 additions and 2329 deletions
Download patch file Download diff file Expand all files Collapse all files

40
scss/components/_card.scss
View file

@ -1,35 +1,37 @@
@use "../settings" as *;
/**
* Card (<article>)
*/
article {
margin: var(--block-spacing-vertical) 0;
padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
border-radius: var(--border-radius);
background: var(--card-background-color);
box-shadow: var(--card-box-shadow);
margin: var(#{$✨}block-spacing-vertical) 0;
padding: var(#{$✨}block-spacing-vertical) var(#{$✨}block-spacing-horizontal);
border-radius: var(#{$✨}border-radius);
background: var(#{$✨}card-background-color);
box-shadow: var(#{$✨}card-box-shadow);
> header,
> footer {
margin-right: calc(var(--block-spacing-horizontal) * -1);
margin-left: calc(var(--block-spacing-horizontal) * -1);
padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
background-color: var(--card-sectionning-background-color);
margin-right: calc(var(#{$✨}block-spacing-horizontal) * -1);
margin-left: calc(var(#{$✨}block-spacing-horizontal) * -1);
padding: calc(var(#{$✨}block-spacing-vertical) * 0.66) var(#{$✨}block-spacing-horizontal);
background-color: var(#{$✨}card-sectionning-background-color);
}
> header {
margin-top: calc(var(--block-spacing-vertical) * -1);
margin-bottom: var(--block-spacing-vertical);
border-bottom: var(--border-width) solid var(--card-border-color);
border-top-right-radius: var(--border-radius);
border-top-left-radius: var(--border-radius);
margin-top: calc(var(#{$✨}block-spacing-vertical) * -1);
margin-bottom: var(#{$✨}block-spacing-vertical);
border-bottom: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
border-top-right-radius: var(#{$✨}border-radius);
border-top-left-radius: var(#{$✨}border-radius);
}
> footer {
margin-top: var(--block-spacing-vertical);
margin-bottom: calc(var(--block-spacing-vertical) * -1);
border-top: var(--border-width) solid var(--card-border-color);
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
margin-top: var(#{$✨}block-spacing-vertical);
margin-bottom: calc(var(#{$✨}block-spacing-vertical) * -1);
border-top: var(#{$✨}border-width) solid var(#{$✨}card-border-color);
border-bottom-right-radius: var(#{$✨}border-radius);
border-bottom-left-radius: var(#{$✨}border-radius);
}
}