This repository has been archived on 2022-11-21. You can view files and clone it, but cannot push or open issues or pull requests.
kspace-static/scss/_cards.scss

174 lines
5.3 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: $fontweight_big;
border-radius: 0;
padding: $size/2;
2019-10-17 15:34:11 +02:00
padding-left:0;
padding-right:0;
padding-bottom: $size/2!important;
2019-10-17 14:04:20 +02:00
margin-bottom:0.75rem;
2019-10-17 15:34:11 +02:00
position:relative;
left: -$size*1.25;
width:95%;
@include biseau($size);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
2019-10-18 13:41:02 +02:00
font-family:$basefont;
font-size:1rem;
padding:0px;
margin:0px;
2019-10-17 14:04:20 +02:00
color:$color-light;
font-weight: $fontweight_big;
line-height:1.5rem;
}
}
@mixin card-color($background-color, $text-color) {
2019-10-17 15:34:11 +02:00
& .card-header, & .menu-header {
@include background-color($background-color, $text-color);
&:before {
@include background-color($background-color, $text-color);
}
}
}
2019-10-17 14:04:20 +02:00
.card, .menu {
@include card($card-bigpad);
2019-10-17 14:04:20 +02:00
&-body {
padding:0!important;
margin:0!important;
}
&-header {
@include card-header($card-bigpad);
}
2019-10-17 14:04:20 +02:00
/* Menu handling */
2019-10-17 14:04:20 +02:00
&-menu {
display:flex;
flex-direction: column;
.menu-element {
display:flex;
line-height:1.5rem;
padding-right:0.75rem;
padding-left:0.325rem;
padding-top:0.325rem;
padding-bottom:0.325rem;
margin:0;
justify-content: space-between;
2019-10-17 15:34:11 +02:00
word-wrap:none;
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
@include biseau(0.75rem);
2019-10-17 14:04:20 +02:00
}
2019-10-17 14:04:20 +02:00
a {
text-decoration:none;
color: $color-violet;
background-color:transparent;
&:hover {
text-decoration:none;
color: $color-violet;
2019-10-17 15:34:11 +02:00
@include biseau(0.75rem);
&:before {
2019-10-18 10:07:38 +02:00
background-color: darken($color-light2, 7.5%)
2019-10-17 15:34:11 +02:00
}
}
2019-10-17 15:34:11 +02:00
}
2019-10-17 14:04:20 +02:00
.menu-divider {
position: relative;
left: -0.325rem;
font-weight: $fontweight_hyper;
2019-10-17 14:04:20 +02:00
padding-top:0.325rem;
padding-bottom:0.325rem;
}
}
}
2019-10-17 14:04:20 +02:00
.smallcard, .toast {
@include card($card-smallpad);
&-header {
@include card-header($card-bigpad);
}
}
/* 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); }
}