papercss/src/components/_cards.scss

70 lines
1.1 KiB
SCSS
Raw Permalink Normal View History

2017-11-01 15:48:02 +01:00
.card {
2017-12-19 17:52:52 +01:00
@include shadow;
2020-08-26 00:46:44 +02:00
@include color('border-color', 'muted-light');
2018-05-24 14:13:53 +02:00
backface-visibility: hidden;
2020-09-06 20:28:16 +02:00
border-style: solid;
border-width: 2px;
2017-11-01 15:48:02 +01:00
display: flex;
flex-direction: column;
2018-05-24 14:13:53 +02:00
position: relative;
2018-01-11 10:38:05 +01:00
will-change: transform;
2018-05-24 14:13:53 +02:00
word-wrap: break-word;
2017-12-19 17:52:52 +01:00
&:hover {
@include shadow(hover);
}
.card-header,
.card-footer {
2020-08-26 00:46:44 +02:00
@include color('background-color', 'white-dark');
@include color('border-color', 'muted-light');
2018-05-24 14:13:53 +02:00
padding: 0.75rem 1.25rem;
}
.card-header {
border-bottom-style: solid;
border-bottom-width: 2px;
}
.card-footer {
border-top-style: solid;
border-top-width: 2px;
}
2017-11-01 15:48:02 +01:00
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
2018-05-24 14:13:53 +02:00
.card-title,
h4 {
2017-11-01 15:48:02 +01:00
margin-bottom: 0.5rem;
2018-05-24 14:13:53 +02:00
margin-top: 0;
2017-11-01 15:48:02 +01:00
}
2018-05-24 14:13:53 +02:00
.card-subtitle,
h5 {
color: $secondary;
2017-11-01 15:48:02 +01:00
margin-bottom: 0.5rem;
2018-05-24 14:13:53 +02:00
margin-top: 0;
2017-11-01 15:48:02 +01:00
}
2018-05-24 14:13:53 +02:00
.card-text,
p {
2017-11-01 15:48:02 +01:00
margin-bottom: 1rem;
2018-05-24 14:13:53 +02:00
margin-top: 0;
2017-11-01 15:48:02 +01:00
}
2017-11-01 17:20:05 +01:00
.card-link + .card-link,
a + a {
margin-left: 1.25rem;
}
}
.image-top,
.image-bottom,
2017-11-01 15:48:02 +01:00
img {
border: 0;
border-radius: 0;
2017-11-01 15:48:02 +01:00
}
}