kazhnuz.css/scss/_cards.scss

141 lines
4.4 KiB
SCSS
Raw Normal View History

/*
* 2. Cards and containers
* All elements that are supposed to contain other stuff
*
*
*/
$card-bigpad: 1.5rem;
$card-smallpad: 0.75rem;
@mixin card($size) {
@include border-radius();
background-color: $color-light2;
box-shadow: $large-shadow;
border: none;
margin:0;
margin-bottom:1.5rem;
padding: $size;
}
@mixin card-header($size) {
font-size:1.1em;
font-weight:600;
border-radius: 0;
padding: $size/2;
padding-bottom: $size/2!important;
margin-left: -$size*2;
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:$color-light;;
font-weight:600;
line-height:1.5em;
}
}
@mixin card-color($background-color, $text-color) {
& > .card-header, & > .menu-header {
@include background-color($background-color, $text-color)
}
}
.card {
@include card($card-bigpad);
.card-body {
padding:0;
2019-10-17 10:26:19 +02:00
&:not(:last-child) {
padding-bottom: 1.5rem;
}
}
&-header {
@include card-header($card-bigpad);
}
}
.smallcard, .toast, .menu {
@include card($card-smallpad);
&-header {
@include card-header($card-bigpad);
}
}
/* Menu handling */
.menu {
li {
@include border-radius();
padding:0.2em 0em 0.2em;
margin:0;
&.menu-item {
:hover {
background-color:rgba(0,0,0,0.1);
color: $color-dark;
}
.menu-badge {
:hover {
background-color: transparent;
}
}
}
.label {
padding: 0 0.4em 0;
}
}
}
/* COLORIZE CARDS and TOASTS */
.card, .smallcard, .menu {
&-blue { @include card-color($color-blue, $color-light); }
&-violet { @include card-color($color-violet, $color-light); }
&-purple { @include card-color($color-purple, $color-light); }
&-red { @include card-color($color-red, $color-light); }
&-orange { @include card-color($color-orange, $color-light); }
&-green { @include card-color($color-green, $color-light); }
&-skyblue { @include card-color($color-skyblue, $color-light); }
&-dark { @include card-color($color-dark, $color-light); }
&-light { @include card-color($color-light2, $color-dark); }
&-turquoise { @include card-color($color-turquoise, $color-light); }
&-yellow { @include card-color($color-yellow, $color-light); }
&-brown { @include card-color($color-brown, $color-light); }
&-grey { @include card-color($color-grey, $color-light); }
&-primary { @include card-color($color-primary, $color-light); }
&-secondary { @include card-color($color-secondary, $color-light); }
&-warning { @include card-color($color-warning, $color-light); }
&-danger { @include card-color($color-danger, $color-light); }
&-info { @include card-color($color-info, $color-light); }
&-success { @include card-color($color-success, $color-light); }
}
.toast {
&-blue { @include background-color($color-blue, $color-light); }
&-violet { @include background-color($color-violet, $color-light); }
&-purple { @include background-color($color-purple, $color-light); }
&-red { @include background-color($color-red, $color-light); }
&-orange { @include background-color($color-orange, $color-light); }
&-green { @include background-color($color-green, $color-light); }
&-skyblue { @include background-color($color-skyblue, $color-light); }
&-dark { @include background-color($color-dark, $color-light); }
&-light { @include background-color($color-light2, $color-dark); }
&-turquoise { @include background-color($color-turquoise, $color-light); }
&-yellow { @include background-color($color-yellow, $color-light); }
&-brown { @include background-color($color-brown, $color-light); }
&-grey { @include background-color($color-grey, $color-light); }
&-primary { @include background-color($color-primary, $color-light); }
&-secondary { @include background-color($color-secondary, $color-light); }
&-warning { @include background-color($color-warning, $color-light); }
&-danger { @include background-color($color-danger, $color-light); }
&-info { @include background-color($color-info, $color-light); }
&-success { @include background-color($color-success, $color-light); }
}