kobold.cafe/kobold.city-old
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

style/cards: add basic styling (sans shadows and radius)

Browse source
This commit is contained in:
Kazhnuz 2019-05-25 16:45:49 +02:00
parent c68fade204
commit 095c944f3a
2 changed files with 107 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
scss/_cards.scss
View file

@ -10,13 +10,18 @@
@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; }
border-color: $background-color;
} }
.card { .card {
@include border-radius(); @include border-radius();
box-shadow: $large-shadow; box-shadow: $large-shadow;
border: none; border-style: solid;
border-width: 0px;
border-left-width: 3px;
margin-bottom:1.2em; margin-bottom:1.2em;
border-color: $color-primary;
background-color: rgba(0,0,0,0.05);
} }
.card { .card {

160
style.css
View file

@ -624,84 +624,126 @@ ul.social {
.card { .card {
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0); box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
border: none; border-style: solid;
margin-bottom: 1.2em; } 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 { .card-blue {
background-color: #4e63c9; border-color: #4e63c9; }
color: #FFF; } .card-blue > .card-header {
background-color: #4e63c9;
color: #FFF; }
.card-violet > .card-header { .card-violet {
background-color: #ce4dcd; border-color: #ce4dcd; }
color: #FFF; } .card-violet > .card-header {
background-color: #ce4dcd;
color: #FFF; }
.card-purple > .card-header { .card-purple {
background-color: #7951c0; border-color: #7951c0; }
color: #FFF; } .card-purple > .card-header {
background-color: #7951c0;
color: #FFF; }
.card-red > .card-header { .card-red {
background-color: #e33d22; border-color: #e33d22; }
color: #FFF; } .card-red > .card-header {
background-color: #e33d22;
color: #FFF; }
.card-orange > .card-header { .card-orange {
background-color: #eb790a; border-color: #eb790a; }
color: #FFF; } .card-orange > .card-header {
background-color: #eb790a;
color: #FFF; }
.card-green > .card-header { .card-green {
background-color: #75b82d; border-color: #75b82d; }
color: #FFF; } .card-green > .card-header {
background-color: #75b82d;
color: #FFF; }
.card-skyblue > .card-header { .card-skyblue {
background-color: #42a0f3; border-color: #42a0f3; }
color: #FFF; } .card-skyblue > .card-header {
background-color: #42a0f3;
color: #FFF; }
.card-dark > .card-header { .card-dark {
background-color: #2D2D2D; border-color: #2D2D2D; }
color: #FFF; } .card-dark > .card-header {
background-color: #2D2D2D;
color: #FFF; }
.card-light > .card-header { .card-light {
background-color: #eeeeec; border-color: #eeeeec; }
color: #111; } .card-light > .card-header {
background-color: #eeeeec;
color: #111; }
.card-turquoise > .card-header { .card-turquoise {
background-color: #46bd9e; border-color: #46bd9e; }
color: #FFF; } .card-turquoise > .card-header {
background-color: #46bd9e;
color: #FFF; }
.card-yellow > .card-header { .card-yellow {
background-color: #f6d32d; border-color: #f6d32d; }
color: #FFF; } .card-yellow > .card-header {
background-color: #f6d32d;
color: #FFF; }
.card-brown > .card-header { .card-brown {
background-color: #986a44; border-color: #986a44; }
color: #FFF; } .card-brown > .card-header {
background-color: #986a44;
color: #FFF; }
.card-grey > .card-header { .card-grey {
background-color: #77767b; border-color: #77767b; }
color: #FFF; } .card-grey > .card-header {
background-color: #77767b;
color: #FFF; }
.card-primary > .card-header { .card-primary {
background-color: #42a0f3; border-color: #42a0f3; }
color: #FFF; } .card-primary > .card-header {
background-color: #42a0f3;
color: #FFF; }
.card-secondary > .card-header { .card-secondary {
background-color: #2D2D2D; border-color: #2D2D2D; }
color: #FFF; } .card-secondary > .card-header {
background-color: #2D2D2D;
color: #FFF; }
.card-warning > .card-header { .card-warning {
background-color: #eb790a; border-color: #eb790a; }
color: #FFF; } .card-warning > .card-header {
background-color: #eb790a;
color: #FFF; }
.card-danger > .card-header { .card-danger {
background-color: #e33d22; border-color: #e33d22; }
color: #FFF; } .card-danger > .card-header {
background-color: #e33d22;
color: #FFF; }
.card-info > .card-header { .card-info {
background-color: #42a0f3; border-color: #42a0f3; }
color: #FFF; } .card-info > .card-header {
background-color: #42a0f3;
color: #FFF; }
.card-success > .card-header { .card-success {
background-color: #75b82d; border-color: #75b82d; }
color: #FFF; } .card-success > .card-header {
background-color: #75b82d;
color: #FFF; }
.card-shadow { .card-shadow {
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); } box-shadow: 0px 2px 10px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }