141 lines
4.4 KiB
SCSS
141 lines
4.4 KiB
SCSS
/*
|
|
* 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;
|
|
&: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); }
|
|
} |