improvement: make .card more of a "container" class
This commit is contained in:
Kazhnuz
parent
8dd69553b8
commit
7b41164742
4 changed files with 124 additions and 25 deletions
|
|
@ -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);
|
||||
|
|
@ -88,6 +114,7 @@
|
|||
|
||||
.card-meta {
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
86
style.css
86
style.css
|
|
@ -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
Reference in a new issue