mirror of
https://github.com/picocss/pico.git
synced 2025-02-24 00:39:20 -05:00
57 lines
1.6 KiB
SCSS
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");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|