pico/scss/components/_card.scss
2019-11-27 15:31:49 +07:00

57 lines
1.6 KiB
SCSS

/**
* Card (<article>)
*/
article {
margin: $spacing-block;
margin-right: -$spacing-gutter;
margin-left: -$spacing-gutter;
padding: $spacing-block $spacing-gutter;
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;
}
border-radius: $round;
}
}
@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");
}
}
}