This repository has been archived on 2022-11-22. You can view files and clone it, but cannot push or open issues or pull requests.
roleplay.css/scss/components/_cards.scss
2019-11-13 11:54:06 +01:00

186 lines
3.5 KiB
SCSS

// Mixin and colors
$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 {
.card-body:last-child {
box-shadow: $large-shadow, $inset-shadow;
}
box-shadow: $large-shadow, $inset-shadow;
}
// CARD COLORIZATION
@mixin colorize-card() {
@each $name, $color in list-colors() {
&-#{$name} { @include card-color(get-color($name), #FFF, #000); }
}
}
@mixin card-color($background-color, $light-color, $dark-color) {
& > .card-header, & > .card-footer { @include background-color($background-color, $light-color, $dark-color); }
&.card-colored > .card-body { @include background-color($background-color, $light-color, $dark-color); }
}
// ALERT COLORIZATION
@mixin colorize-alert() {
@each $name, $color in list-colors() {
&-#{$name} { @include alert-color(get-color($name)); }
}
}
@mixin alert-color($background-color) {
background-color: lighten($background-color, 35%);
@if (luminance($background-color) > 128 * 0.8) {
color: darken($background-color, 70%);
a, .alert-link {
color:darken($background-color, 70%);
font-weight:bold;
}
} @else {
color: lighten($background-color, 80%);
a, .alert-link {
color:lighten($background-color, 85%);
font-weight:bold;
}
}
}
/* 10.1 - Cards */
.card {
@include card-container();
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
color:#333;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}
@include colorize-card();
}
.card-body {
@include card-element();
}
/* 10.1.1 - Headers */
.card-header, .card-footer {
@include card-element();
@include borders();
font-size:1.1em;
box-shadow: $inset-relief;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600;
border-radius: 0;
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px;
margin:0px;
color:#FFF;
font-weight:600;
line-height:1.5em;
}
}
/* 10.1.2 - Meta */
.card-meta {
padding:1em;
@include card-element();
border-bottom: $border-size solid rgba(0,0,0,0.2);
&.media {
-ms-flex-align: center !important;
align-items: center !important;
}
.media-left .media-object {
height: 64px;
width: 64px;
border-radius: 10px;
margin-right: $baselinerem;
}
author {
display:block;
font-weight:600;
}
time {
display:block;
font-style:italic;
}
}
/* 10.1.3 - Lists */
.list-group {
@include card-element();
}
.list-group-item {
border: none;
background-color:transparent;
}
a.list-group-item:hover {
border-style:none;
border-width:0px;
border-radius:0px;
background-color:rgba(0,0,0,0.1);
}
/* 10.2 - Breadcrumb */
.breadcrumb {
@include card-relief();
@include li-no-margin();
background-color:#eeeeec;
}
/* 10.3 - Alerts */
.alert {
@include card-self-contained();
color:rgba(0, 0, 0, 0.7);
@include colorize-alert();
}