chore: refactor cards

This commit is contained in:
Kazhnuz 2019-11-05 13:24:51 +01:00
parent 67cbfc3f58
commit b2d1bf7029
2 changed files with 62 additions and 1119 deletions

View file

@ -1,5 +1,17 @@
// Mixin and colors // Mixin and colors
@mixin card() {
@include border-radius();
box-shadow: $large-shadow;
border: none;
margin-bottom:1.2em;
}
@mixin card-relief{
@include card()
box-shadow: $large-shadow, $inset-shadow;
}
@mixin card-color($background-color, $text-color) { @mixin card-color($background-color, $text-color) {
& > .card-header { background-color: $background-color; color:$text-color; } & > .card-header { background-color: $background-color; color:$text-color; }
} }
@ -12,19 +24,12 @@
/* 10.1 - Cards */ /* 10.1 - Cards */
.card { .card {
@include border-radius(); @include card();
box-shadow: $large-shadow;
border: none;
margin-bottom:1.2em;
}
.card-shadow { h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
box-shadow: $large-shadow, $inset-shadow; color:#333;
} text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.card h7,.card h8,.card h9,.card h10 {
color:#333;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
} }
.card { .card {
@ -53,34 +58,34 @@
/* 10.1.1 - Headers */ /* 10.1.1 - Headers */
.card-header { .card-header {
@include borders(); @include borders();
font-size:1.1em; font-size:1.1em;
box-shadow: $inset-relief; box-shadow: $inset-relief;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3); text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600;
border-radius: 0;
&:first-child {
@include border-radius();
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
@include border-radius();
border-top-left-radius: 0;
border-top-right-radius: 0;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px;
margin:0px;
color:#FFF;
font-weight:600; font-weight:600;
line-height:1.5em; border-radius: 0;
}
&:first-child {
@include border-radius();
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
@include border-radius();
border-top-left-radius: 0;
border-top-right-radius: 0;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px;
margin:0px;
color:#FFF;
font-weight:600;
line-height:1.5em;
}
} }
/* 10.1.2 - Meta */ /* 10.1.2 - Meta */
@ -130,21 +135,16 @@ a.list-group-item:hover {
/* 10.2 - Breadcrumb */ /* 10.2 - Breadcrumb */
.breadcrumb { .breadcrumb {
@include border-radius(); @include card-relief();
box-shadow: $large-shadow, $inset-shadow;
border: 0;
background-color:#eeeeec;
margin-bottom:1.2em;
@include li-no-margin(); @include li-no-margin();
background-color:#eeeeec;
} }
/* 10.3 - Alerts */ /* 10.3 - Alerts */
.alert { .alert {
@include borders(); @include card();
@include border-radius();
color:rgba(0, 0, 0, 0.7); color:rgba(0, 0, 0, 0.7);
box-shadow: $large-shadow;
} }
.alert a, .alert-link { .alert a, .alert-link {

1087
style.css

File diff suppressed because it is too large Load diff