archive/httpcb
Archived
1
0
Fork 0
Code Releases Activity

adding app/assets/sass/components/_card.scss

Browse source
This commit is contained in:
Henrik Hautakoski 2018-09-04 23:47:12 +02:00
parent 161d5a1353
commit 1e77c2650d
3 changed files with 82 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/assets/sass/_variables.scss
View file

@ -138,6 +138,13 @@ $list-group-item-border-color: $gray-light;
$list-group-hover-background: $gray-lightest;
$list-group-item-active-background: $brand-color;
// ----------------------------------
// List group
// ----------------------------------
$card-border-color: $gray-light;
$card-header-background: $gray-lightest;
// ----------------------------------
// Shadows
// ----------------------------------

1
app/assets/sass/application.scss
View file

@ -30,6 +30,7 @@
@import "components/icon";
@import "components/button";
@import "components/badge";
@import "components/card";
@import "components/section";
@import "components/spacer";
@import "components/pagination";

74
app/assets/sass/components/_card.scss Normal file
View file

@ -0,0 +1,74 @@
// ----------------------------------
// Base style.
// ----------------------------------
.card {
border: 1px solid $card-border-color;
&-header,
&-body {
display: block;
padding: .5em 1em;
}
// Contextual colors
// ----------------------------------
&-header-default {
background-color: $card-header-background;
}
// Add border between header and body if they follow eachother.
&-header + &-body {
border-top: 1px solid $card-border-color;
}
}
// Header link
// ----------------------------------
a.card-header,
.card-header-link {
cursor: pointer;
color: $list-group-item-color;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
&:hover {
background: $card-header-background;
}
}
// ----------------------------------
// Layouts
// ----------------------------------
// Accordion
// ----------------------------------
.card-accordion {
.card {
&-header {
border-bottom: 0;
}
&-body {
border-top: 1px solid $card-border-color;
}
}
.card:not(:first-of-type) {
border-top: 0;
}
}