chore: refactor cards
This commit is contained in:
parent
67cbfc3f58
commit
b2d1bf7029
2 changed files with 62 additions and 1119 deletions
|
@ -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 {
|
||||||
|
|
Reference in a new issue