improvement: make .card more of a "container" class

This commit is contained in:
Kazhnuz 2019-11-06 10:25:46 +01:00
parent 8dd69553b8
commit 7b41164742
4 changed files with 124 additions and 25 deletions

View File

@ -1,14 +1,43 @@
// Mixin and colors
@mixin card() {
$card-color-default: white;
@mixin card-self-contained() {
@include card-container();
background-color:$card-color-default;
}
@mixin card-container() {
@include border-radius();
box-shadow: $large-shadow;
border: none;
margin-bottom: $baselinerem;
background-color:transparent;
}
@mixin card-element() {
border:0;
border-radius:0;
background-color:$card-color-default;
&:first-child {
@include border-radius-top($border-radius);
}
&:last-child {
@include border-radius-bottom($border-radius);
}
&:only-child {
@include border-radius();
}
}
@mixin card-relief {
@include card();
.card-body:last-child {
box-shadow: $large-shadow, $inset-shadow;
}
box-shadow: $large-shadow, $inset-shadow;
}
@ -24,7 +53,7 @@
/* 10.1 - Cards */
.card {
@include card();
@include card-container();
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
color:#333;
@ -32,6 +61,10 @@
}
}
.card-body {
@include card-element();
}
.card {
&-blue { @include card-color($color-blue, #FFF); }
&-violet { @include card-color($color-violet, #FFF); }
@ -57,7 +90,8 @@
/* 10.1.1 - Headers */
.card-header {
.card-header, .card-footer {
@include card-element();
@include borders();
font-size:1.1em;
box-shadow: $inset-relief;
@ -65,14 +99,6 @@
font-weight:600;
border-radius: 0;
&:first-child {
@include border-radius-top($border-radius);
}
&:last-child {
@include border-radius-bottom($border-radius);
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
@ -87,7 +113,8 @@
/* 10.1.2 - Meta */
.card-meta {
padding:1em;
padding:1em;
@include card-element();
border-bottom: $border-size solid rgba(0,0,0,0.2);
&.media {
@ -116,6 +143,10 @@
/* 10.1.3 - Lists */
.list-group {
@include card-element();
}
.list-group-item {
border: none;
background-color:transparent;
@ -139,7 +170,7 @@ a.list-group-item:hover {
/* 10.3 - Alerts */
.alert {
@include card();
@include card-self-contained();
color:rgba(0, 0, 0, 0.7);
}

View File

@ -28,7 +28,7 @@
line-height: 1.5em !important;
padding:0.2em;
text-align:justify;
background-color:rgba(0,0,0,0.05);
background-color: $color-light;
color:rgba(0,0,0,0.4);
position: relative;

View File

@ -553,12 +553,34 @@ ul.social li a:hover {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.5rem;
background-color: transparent;
}
.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-body {
border: 0;
border-radius: 0;
background-color: white;
}
.card-body:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-body:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.card-body:only-child {
border-radius: 3px 3px 3px 3px;
}
.card-blue > .card-header {
background-color: #4e63c9;
color: #FFF;
@ -637,7 +659,10 @@ ul.social li a:hover {
}
/* 10.1.1 - Headers */
.card-header {
.card-header, .card-footer {
border: 0;
border-radius: 0;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.3);
font-size: 1.1em;
box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
@ -645,19 +670,22 @@ ul.social li a:hover {
font-weight: 600;
border-radius: 0;
}
.card-header:first-child {
.card-header:first-child, .card-footer:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-header:last-child {
.card-header:last-child, .card-footer:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 {
.card-header:only-child, .card-footer:only-child {
border-radius: 3px 3px 3px 3px;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10, .card-footer h1, .card-footer h2, .card-footer h3, .card-footer h4, .card-footer h5, .card-footer h6, .card-footer h7, .card-footer h8, .card-footer h9, .card-footer h10 {
font-size: 1em;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
padding: 0px;
@ -670,8 +698,26 @@ ul.social li a:hover {
/* 10.1.2 - Meta */
.card-meta {
padding: 1em;
border: 0;
border-radius: 0;
background-color: white;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.card-meta:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.card-meta:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.card-meta:only-child {
border-radius: 3px 3px 3px 3px;
}
.card-meta.media {
-ms-flex-align: center !important;
align-items: center !important;
@ -692,6 +738,27 @@ ul.social li a:hover {
}
/* 10.1.3 - Lists */
.list-group {
border: 0;
border-radius: 0;
background-color: white;
}
.list-group:first-child {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.list-group:last-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.list-group:only-child {
border-radius: 3px 3px 3px 3px;
}
.list-group-item {
border: none;
background-color: transparent;
@ -706,13 +773,12 @@ a.list-group-item:hover {
/* 10.2 - Breadcrumb */
.breadcrumb {
border-radius: 3px 3px 3px 3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.5rem;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
background-color: #eeeeec;
}
.breadcrumb .card-body:last-child {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
}
.breadcrumb li {
margin: 0;
}
@ -723,6 +789,8 @@ a.list-group-item:hover {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
border: none;
margin-bottom: 1.5rem;
background-color: transparent;
background-color: white;
color: rgba(0, 0, 0, 0.7);
}
@ -1243,7 +1311,7 @@ a.list-group-item:hover {
line-height: 1.5em !important;
padding: 0.2em;
text-align: justify;
background-color: rgba(0, 0, 0, 0.05);
background-color: #eeeeec;
color: rgba(0, 0, 0, 0.4);
position: relative;
display: flex;

File diff suppressed because one or more lines are too long