Add new components like flex-group and flex-inline.
This commit is contained in:
parent
a693c8c0c2
commit
9cf8765eac
1 changed files with 111 additions and 0 deletions
36
assets/sass/components/cards/_cards.scss
Normal file
36
assets/sass/components/cards/_cards.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
// Cards
|
||||
//
|
||||
// A simple cards style.
|
||||
|
||||
.cards,
|
||||
%cards {
|
||||
@extend %flex-group;
|
||||
// Add vertical rhythm margins.
|
||||
@include margin-block(1);
|
||||
}
|
||||
|
||||
.card,
|
||||
%card {
|
||||
@include padding(.5);
|
||||
border: 1px solid var(--color-border);
|
||||
|
||||
&--highlight {
|
||||
border-color: var(--color-highlight);
|
||||
}
|
||||
|
||||
&--inverted {
|
||||
@extend %link-inverted;
|
||||
background: var(--color-border);
|
||||
color: var(--color-text-bg);
|
||||
}
|
||||
|
||||
> * {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue