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 {

46
style.css
View file

@ -624,81 +624,123 @@ 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 {
border-color: #4e63c9; }
.card-blue > .card-header { .card-blue > .card-header {
background-color: #4e63c9; background-color: #4e63c9;
color: #FFF; } color: #FFF; }
.card-violet {
border-color: #ce4dcd; }
.card-violet > .card-header { .card-violet > .card-header {
background-color: #ce4dcd; background-color: #ce4dcd;
color: #FFF; } color: #FFF; }
.card-purple {
border-color: #7951c0; }
.card-purple > .card-header { .card-purple > .card-header {
background-color: #7951c0; background-color: #7951c0;
color: #FFF; } color: #FFF; }
.card-red {
border-color: #e33d22; }
.card-red > .card-header { .card-red > .card-header {
background-color: #e33d22; background-color: #e33d22;
color: #FFF; } color: #FFF; }
.card-orange {
border-color: #eb790a; }
.card-orange > .card-header { .card-orange > .card-header {
background-color: #eb790a; background-color: #eb790a;
color: #FFF; } color: #FFF; }
.card-green {
border-color: #75b82d; }
.card-green > .card-header { .card-green > .card-header {
background-color: #75b82d; background-color: #75b82d;
color: #FFF; } color: #FFF; }
.card-skyblue {
border-color: #42a0f3; }
.card-skyblue > .card-header { .card-skyblue > .card-header {
background-color: #42a0f3; background-color: #42a0f3;
color: #FFF; } color: #FFF; }
.card-dark {
border-color: #2D2D2D; }
.card-dark > .card-header { .card-dark > .card-header {
background-color: #2D2D2D; background-color: #2D2D2D;
color: #FFF; } color: #FFF; }
.card-light {
border-color: #eeeeec; }
.card-light > .card-header { .card-light > .card-header {
background-color: #eeeeec; background-color: #eeeeec;
color: #111; } color: #111; }
.card-turquoise {
border-color: #46bd9e; }
.card-turquoise > .card-header { .card-turquoise > .card-header {
background-color: #46bd9e; background-color: #46bd9e;
color: #FFF; } color: #FFF; }
.card-yellow {
border-color: #f6d32d; }
.card-yellow > .card-header { .card-yellow > .card-header {
background-color: #f6d32d; background-color: #f6d32d;
color: #FFF; } color: #FFF; }
.card-brown {
border-color: #986a44; }
.card-brown > .card-header { .card-brown > .card-header {
background-color: #986a44; background-color: #986a44;
color: #FFF; } color: #FFF; }
.card-grey {
border-color: #77767b; }
.card-grey > .card-header { .card-grey > .card-header {
background-color: #77767b; background-color: #77767b;
color: #FFF; } color: #FFF; }
.card-primary {
border-color: #42a0f3; }
.card-primary > .card-header { .card-primary > .card-header {
background-color: #42a0f3; background-color: #42a0f3;
color: #FFF; } color: #FFF; }
.card-secondary {
border-color: #2D2D2D; }
.card-secondary > .card-header { .card-secondary > .card-header {
background-color: #2D2D2D; background-color: #2D2D2D;
color: #FFF; } color: #FFF; }
.card-warning {
border-color: #eb790a; }
.card-warning > .card-header { .card-warning > .card-header {
background-color: #eb790a; background-color: #eb790a;
color: #FFF; } color: #FFF; }
.card-danger {
border-color: #e33d22; }
.card-danger > .card-header { .card-danger > .card-header {
background-color: #e33d22; background-color: #e33d22;
color: #FFF; } color: #FFF; }
.card-info {
border-color: #42a0f3; }
.card-info > .card-header { .card-info > .card-header {
background-color: #42a0f3; background-color: #42a0f3;
color: #FFF; } color: #FFF; }
.card-success {
border-color: #75b82d; }
.card-success > .card-header { .card-success > .card-header {
background-color: #75b82d; background-color: #75b82d;
color: #FFF; } color: #FFF; }