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

refactor: modules and css vars

Browse source
This commit is contained in:
Lucas Larroche 2022-10-23 10:47:50 +07:00
parent 2e4d6c66ec
commit ce2ed6826d
46 changed files with 3874 additions and 3534 deletions
Download patch file Download diff file Expand all files Collapse all files

61
scss/components/_card.scss
View file

@ -1,37 +1,40 @@
@use "sass:map";
@use "../settings" as *;
/**
* Card (<article>)
*/
@if map.get($modules, "components/card") {
/**
* 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);
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);
> 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);
}
> 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);
}
> 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);
}
> 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);
}
> 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);
> 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);
}
}
}