pico/scss/components/_card.scss
2019-12-03 09:51:37 +07:00

61 lines
1.6 KiB
SCSS

/**
* Card (<article>)
*/
article {
margin: $spacing-block 0;
padding: $spacing-block $spacing-gutter;
overflow: hidden;
border-radius: $round;
background: var(--card-background);
box-shadow: var(--card-shadow);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@if map-get($spacing-factor, "sm") and $enable-responsive-spacings {
margin: ($spacing-block*map-get($spacing-factor, "sm")) 0;
padding: $spacing-block*map-get($spacing-factor, "sm");
}
@else {
margin: $spacing-block 0;
padding: $spacing-block;
}
}
}
@if map-get($breakpoints, "md") and
map-get($spacing-factor, "md") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "md")) {
margin: ($spacing-block*map-get($spacing-factor, "md")) 0;
padding: $spacing-block*map-get($spacing-factor, "md");
}
}
@if map-get($breakpoints, "lg") and
map-get($spacing-factor, "lg") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "lg")) {
margin: ($spacing-block*map-get($spacing-factor, "lg")) 0;
padding: $spacing-block*map-get($spacing-factor, "lg");
}
}
@if map-get($breakpoints, "xl") and
map-get($spacing-factor, "xl") and
$enable-responsive-spacings {
@media (min-width: map-get($breakpoints, "xl")) {
margin: ($spacing-block*map-get($spacing-factor, "xl")) 0;
padding: $spacing-block*map-get($spacing-factor, "xl");
}
}
// Remove last-child margin bottom
> *:not(header):not(footer):not(pre):last-child {
margin-bottom: 0;
}
}