style/cards: add basic styling (sans shadows and radius)
This commit is contained in:
Kazhnuz
parent
c68fade204
commit
095c944f3a
2 changed files with 107 additions and 60 deletions
|
|
@ -10,13 +10,18 @@
|
|||
|
||||
@mixin card-color($background-color, $text-color) {
|
||||
& > .card-header { background-color: $background-color; color:$text-color; }
|
||||
border-color: $background-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
@include border-radius();
|
||||
box-shadow: $large-shadow;
|
||||
border: none;
|
||||
border-style: solid;
|
||||
border-width: 0px;
|
||||
border-left-width: 3px;
|
||||
margin-bottom:1.2em;
|
||||
border-color: $color-primary;
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
|
|||
160
style.css
160
style.css
|
|
@ -624,84 +624,126 @@ ul.social {
|
|||
.card {
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
margin-bottom: 1.2em; }
|
||||
border-style: solid;
|
||||
border-width: 0px;
|
||||
border-left-width: 3px;
|
||||
margin-bottom: 1.2em;
|
||||
border-color: #42a0f3;
|
||||
background-color: rgba(0, 0, 0, 0.05); }
|
||||
|
||||
.card-blue > .card-header {
|
||||
background-color: #4e63c9;
|
||||
color: #FFF; }
|
||||
.card-blue {
|
||||
border-color: #4e63c9; }
|
||||
.card-blue > .card-header {
|
||||
background-color: #4e63c9;
|
||||
color: #FFF; }
|
||||
|
||||
.card-violet > .card-header {
|
||||
background-color: #ce4dcd;
|
||||
color: #FFF; }
|
||||
.card-violet {
|
||||
border-color: #ce4dcd; }
|
||||
.card-violet > .card-header {
|
||||
background-color: #ce4dcd;
|
||||
color: #FFF; }
|
||||
|
||||
.card-purple > .card-header {
|
||||
background-color: #7951c0;
|
||||
color: #FFF; }
|
||||
.card-purple {
|
||||
border-color: #7951c0; }
|
||||
.card-purple > .card-header {
|
||||
background-color: #7951c0;
|
||||
color: #FFF; }
|
||||
|
||||
.card-red > .card-header {
|
||||
background-color: #e33d22;
|
||||
color: #FFF; }
|
||||
.card-red {
|
||||
border-color: #e33d22; }
|
||||
.card-red > .card-header {
|
||||
background-color: #e33d22;
|
||||
color: #FFF; }
|
||||
|
||||
.card-orange > .card-header {
|
||||
background-color: #eb790a;
|
||||
color: #FFF; }
|
||||
.card-orange {
|
||||
border-color: #eb790a; }
|
||||
.card-orange > .card-header {
|
||||
background-color: #eb790a;
|
||||
color: #FFF; }
|
||||
|
||||
.card-green > .card-header {
|
||||
background-color: #75b82d;
|
||||
color: #FFF; }
|
||||
.card-green {
|
||||
border-color: #75b82d; }
|
||||
.card-green > .card-header {
|
||||
background-color: #75b82d;
|
||||
color: #FFF; }
|
||||
|
||||
.card-skyblue > .card-header {
|
||||
background-color: #42a0f3;
|
||||
color: #FFF; }
|
||||
.card-skyblue {
|
||||
border-color: #42a0f3; }
|
||||
.card-skyblue > .card-header {
|
||||
background-color: #42a0f3;
|
||||
color: #FFF; }
|
||||
|
||||
.card-dark > .card-header {
|
||||
background-color: #2D2D2D;
|
||||
color: #FFF; }
|
||||
.card-dark {
|
||||
border-color: #2D2D2D; }
|
||||
.card-dark > .card-header {
|
||||
background-color: #2D2D2D;
|
||||
color: #FFF; }
|
||||
|
||||
.card-light > .card-header {
|
||||
background-color: #eeeeec;
|
||||
color: #111; }
|
||||
.card-light {
|
||||
border-color: #eeeeec; }
|
||||
.card-light > .card-header {
|
||||
background-color: #eeeeec;
|
||||
color: #111; }
|
||||
|
||||
.card-turquoise > .card-header {
|
||||
background-color: #46bd9e;
|
||||
color: #FFF; }
|
||||
.card-turquoise {
|
||||
border-color: #46bd9e; }
|
||||
.card-turquoise > .card-header {
|
||||
background-color: #46bd9e;
|
||||
color: #FFF; }
|
||||
|
||||
.card-yellow > .card-header {
|
||||
background-color: #f6d32d;
|
||||
color: #FFF; }
|
||||
.card-yellow {
|
||||
border-color: #f6d32d; }
|
||||
.card-yellow > .card-header {
|
||||
background-color: #f6d32d;
|
||||
color: #FFF; }
|
||||
|
||||
.card-brown > .card-header {
|
||||
background-color: #986a44;
|
||||
color: #FFF; }
|
||||
.card-brown {
|
||||
border-color: #986a44; }
|
||||
.card-brown > .card-header {
|
||||
background-color: #986a44;
|
||||
color: #FFF; }
|
||||
|
||||
.card-grey > .card-header {
|
||||
background-color: #77767b;
|
||||
color: #FFF; }
|
||||
.card-grey {
|
||||
border-color: #77767b; }
|
||||
.card-grey > .card-header {
|
||||
background-color: #77767b;
|
||||
color: #FFF; }
|
||||
|
||||
.card-primary > .card-header {
|
||||
background-color: #42a0f3;
|
||||
color: #FFF; }
|
||||
.card-primary {
|
||||
border-color: #42a0f3; }
|
||||
.card-primary > .card-header {
|
||||
background-color: #42a0f3;
|
||||
color: #FFF; }
|
||||
|
||||
.card-secondary > .card-header {
|
||||
background-color: #2D2D2D;
|
||||
color: #FFF; }
|
||||
.card-secondary {
|
||||
border-color: #2D2D2D; }
|
||||
.card-secondary > .card-header {
|
||||
background-color: #2D2D2D;
|
||||
color: #FFF; }
|
||||
|
||||
.card-warning > .card-header {
|
||||
background-color: #eb790a;
|
||||
color: #FFF; }
|
||||
.card-warning {
|
||||
border-color: #eb790a; }
|
||||
.card-warning > .card-header {
|
||||
background-color: #eb790a;
|
||||
color: #FFF; }
|
||||
|
||||
.card-danger > .card-header {
|
||||
background-color: #e33d22;
|
||||
color: #FFF; }
|
||||
.card-danger {
|
||||
border-color: #e33d22; }
|
||||
.card-danger > .card-header {
|
||||
background-color: #e33d22;
|
||||
color: #FFF; }
|
||||
|
||||
.card-info > .card-header {
|
||||
background-color: #42a0f3;
|
||||
color: #FFF; }
|
||||
.card-info {
|
||||
border-color: #42a0f3; }
|
||||
.card-info > .card-header {
|
||||
background-color: #42a0f3;
|
||||
color: #FFF; }
|
||||
|
||||
.card-success > .card-header {
|
||||
background-color: #75b82d;
|
||||
color: #FFF; }
|
||||
.card-success {
|
||||
border-color: #75b82d; }
|
||||
.card-success > .card-header {
|
||||
background-color: #75b82d;
|
||||
color: #FFF; }
|
||||
|
||||
.card-shadow {
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue