2019-10-09 11:42:53 +02:00
|
|
|
/*
|
|
|
|
* 2. Cards and containers
|
|
|
|
* All elements that are supposed to contain other stuff
|
|
|
|
*
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
2019-12-07 16:06:38 +01:00
|
|
|
$card-bigpad: $lineheight;
|
|
|
|
$card-smallpad: $lineheight_half;
|
2019-10-09 11:42:53 +02:00
|
|
|
|
|
|
|
@mixin card($size) {
|
2021-07-28 17:57:21 +02:00
|
|
|
@include border-radius($card-radius);
|
2021-07-25 14:12:29 +02:00
|
|
|
background-color: $color-background-alt;
|
2021-07-28 16:55:07 +02:00
|
|
|
box-shadow: $large-shadow;
|
2019-10-09 11:42:53 +02:00
|
|
|
border: none;
|
2019-10-16 14:23:38 +02:00
|
|
|
margin:0;
|
2019-12-07 16:06:38 +01:00
|
|
|
margin-bottom:$lineheight;
|
2021-07-28 16:55:07 +02:00
|
|
|
& > * {
|
|
|
|
margin-left: $size;
|
|
|
|
margin-right: $size;
|
|
|
|
&:first-child {
|
|
|
|
margin-top: $size;
|
2021-07-28 17:01:11 +02:00
|
|
|
&.card-header {
|
2021-07-28 17:51:30 +02:00
|
|
|
margin-top:$card-header-margin;
|
2021-07-28 17:01:11 +02:00
|
|
|
}
|
2021-07-28 16:55:07 +02:00
|
|
|
}
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: $size;
|
2021-07-28 17:01:11 +02:00
|
|
|
&.card-header {
|
2021-07-28 17:51:30 +02:00
|
|
|
margin-bottom:$card-header-margin;
|
2021-07-28 17:01:11 +02:00
|
|
|
}
|
2021-07-28 16:55:07 +02:00
|
|
|
}
|
|
|
|
}
|
2019-10-09 11:42:53 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
@mixin card-header($size) {
|
|
|
|
font-size:1.1em;
|
2019-10-18 09:57:05 +02:00
|
|
|
font-weight: $fontweight_big;
|
2019-10-09 11:42:53 +02:00
|
|
|
padding: $size/2;
|
2019-10-17 15:34:11 +02:00
|
|
|
padding-left:0;
|
|
|
|
padding-right:0;
|
2019-10-09 11:42:53 +02:00
|
|
|
padding-bottom: $size/2!important;
|
2019-12-07 16:06:38 +01:00
|
|
|
margin-bottom:$lineheight_half;
|
2021-07-28 16:55:07 +02:00
|
|
|
margin-top:$lineheight_half;
|
2019-12-07 16:06:38 +01:00
|
|
|
line-height:$lineheight;
|
2021-07-24 16:59:42 +02:00
|
|
|
white-space: nowrap;
|
2019-10-17 15:34:11 +02:00
|
|
|
|
|
|
|
position:relative;
|
|
|
|
left: -$size*1.25;
|
|
|
|
|
2021-07-28 16:55:07 +02:00
|
|
|
width:85%;
|
2019-10-17 15:34:11 +02:00
|
|
|
|
2021-07-28 18:05:39 +02:00
|
|
|
@include shape-style($size);
|
2021-07-28 17:42:27 +02:00
|
|
|
border-radius:0;
|
|
|
|
&:first-child {
|
2021-07-28 17:57:21 +02:00
|
|
|
border-top-left-radius: $card-radius;
|
|
|
|
border-top-right-radius: $card-radius;
|
2021-07-28 17:42:27 +02:00
|
|
|
}
|
|
|
|
&:last-child {
|
2021-07-28 17:57:21 +02:00
|
|
|
border-bottom-left-radius: $card-radius;
|
|
|
|
border-bottom-right-radius: $card-radius;
|
2021-07-28 17:42:27 +02:00
|
|
|
}
|
2019-12-07 16:06:38 +01:00
|
|
|
|
2019-10-09 11:42:53 +02:00
|
|
|
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
|
2019-10-18 13:41:02 +02:00
|
|
|
font-family:$basefont;
|
2019-10-18 09:57:05 +02:00
|
|
|
font-size:1rem;
|
2019-10-09 11:42:53 +02:00
|
|
|
padding:0px;
|
|
|
|
margin:0px;
|
2021-07-25 14:12:29 +02:00
|
|
|
color:$color-font-light;
|
2019-10-18 09:57:05 +02:00
|
|
|
font-weight: $fontweight_big;
|
2019-12-07 16:06:38 +01:00
|
|
|
line-height:$lineheight;
|
2019-10-09 11:42:53 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-25 14:12:29 +02:00
|
|
|
@mixin card-color($background-color) {
|
2019-12-07 16:06:38 +01:00
|
|
|
& .card-header, & .menu-header {
|
2021-07-28 18:05:39 +02:00
|
|
|
@include colorize-shape($background-color);
|
2021-07-28 17:45:24 +02:00
|
|
|
color:getTextColorFromBackground($background-color);
|
2019-10-09 11:42:53 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-17 14:04:20 +02:00
|
|
|
.card, .menu {
|
2019-10-09 11:42:53 +02:00
|
|
|
@include card($card-bigpad);
|
|
|
|
|
2019-10-17 14:04:20 +02:00
|
|
|
&-body {
|
|
|
|
padding:0!important;
|
2019-10-09 11:42:53 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
&-header {
|
|
|
|
@include card-header($card-bigpad);
|
2020-11-08 20:17:49 +01:00
|
|
|
.fa {
|
|
|
|
margin-right: 0.5em;
|
|
|
|
}
|
2019-10-09 11:42:53 +02:00
|
|
|
}
|
|
|
|
|
2019-10-17 14:04:20 +02:00
|
|
|
/* Menu handling */
|
2019-10-09 11:42:53 +02:00
|
|
|
|
2019-10-17 14:04:20 +02:00
|
|
|
&-menu {
|
|
|
|
display:flex;
|
|
|
|
flex-direction: column;
|
2020-11-08 20:17:49 +01:00
|
|
|
|
|
|
|
ul {
|
|
|
|
margin:0;
|
|
|
|
padding:0;
|
|
|
|
}
|
|
|
|
|
|
|
|
li {
|
|
|
|
list-style: none;
|
|
|
|
padding:0;
|
|
|
|
margin:0;
|
|
|
|
}
|
|
|
|
|
2021-07-24 16:59:42 +02:00
|
|
|
.menu-element, .menu-element-link, li a, li a:visited {
|
2019-10-17 14:04:20 +02:00
|
|
|
display:flex;
|
2019-12-07 16:06:38 +01:00
|
|
|
line-height:$lineheight;
|
|
|
|
padding-right:$lineheight_half;
|
|
|
|
padding-left:$lineheight_quarter;
|
|
|
|
padding-top:$lineheight_quarter;
|
|
|
|
padding-bottom:$lineheight_quarter;
|
2019-10-17 14:04:20 +02:00
|
|
|
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;
|
2019-12-07 16:06:38 +01:00
|
|
|
|
2021-07-28 18:05:39 +02:00
|
|
|
@include shape-style($lineheight_half);
|
2021-07-26 09:10:43 +02:00
|
|
|
@include button-hover();
|
2020-11-08 20:17:49 +01:00
|
|
|
|
|
|
|
strong {
|
|
|
|
font-weight: 900;
|
2021-07-25 14:12:29 +02:00
|
|
|
color:get-color("dark")!important;
|
2020-11-08 20:17:49 +01:00
|
|
|
}
|
2020-12-27 21:13:25 +01:00
|
|
|
|
|
|
|
&.noflex {
|
|
|
|
& :first-child {
|
|
|
|
min-width:2rem;
|
|
|
|
}
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
|
|
}
|
2019-10-17 14:04:20 +02:00
|
|
|
}
|
2019-10-09 11:42:53 +02:00
|
|
|
|
2021-07-24 16:59:42 +02:00
|
|
|
a, a:visited {
|
2021-07-28 18:05:39 +02:00
|
|
|
@include shape-style($lineheight_half);
|
2021-07-26 12:47:15 +02:00
|
|
|
@include button-hover();
|
|
|
|
@include button-fullcontrol(transparent, darken($color-background-alt, 7.5%), $color-primary);
|
2019-10-09 11:42:53 +02:00
|
|
|
}
|
|
|
|
|
2019-10-17 14:04:20 +02:00
|
|
|
.menu-divider {
|
|
|
|
position: relative;
|
2019-12-07 16:06:38 +01:00
|
|
|
left: -$lineheight_quarter;
|
2019-10-18 09:57:05 +02:00
|
|
|
font-weight: $fontweight_hyper;
|
2019-12-07 16:06:38 +01:00
|
|
|
padding-top:$lineheight_quarter;
|
|
|
|
padding-bottom:$lineheight_quarter;
|
2019-10-09 11:42:53 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-18 15:26:26 +02:00
|
|
|
/* CARD LIST - Make a list part of a card */
|
|
|
|
|
|
|
|
|
|
|
|
@mixin list-symbol($symbol) {
|
|
|
|
li.list-element {
|
|
|
|
list-style: none;
|
|
|
|
&::before {
|
|
|
|
font-family: "ForkAwesome";
|
|
|
|
content:$symbol;
|
2019-12-07 16:06:38 +01:00
|
|
|
padding-right:$lineheight_half;
|
2019-10-18 15:26:26 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin list-color($color) {
|
|
|
|
li.list-element {
|
|
|
|
&::before {
|
|
|
|
color: $color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-07-24 16:59:42 +02:00
|
|
|
ul.card-list, .card > ul {
|
2019-10-18 15:26:26 +02:00
|
|
|
padding:0;
|
|
|
|
margin:0;
|
|
|
|
li.list-element {
|
2019-12-07 16:06:38 +01:00
|
|
|
line-height:$lineheight;
|
|
|
|
padding-right:$lineheight_half;
|
|
|
|
padding-left:$lineheight_quarter;
|
|
|
|
padding-top:$lineheight_quarter;
|
|
|
|
padding-bottom:$lineheight_quarter;
|
2019-10-18 15:26:26 +02:00
|
|
|
margin:0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.list {
|
|
|
|
&-check {@include list-symbol("\f00c");}
|
|
|
|
&-cross {@include list-symbol("\f00d");}
|
|
|
|
|
|
|
|
&-danger{@include list-color($color-danger);}
|
|
|
|
&-success{@include list-color($color-success);}
|
|
|
|
}
|
|
|
|
|
2019-10-17 14:04:20 +02:00
|
|
|
.smallcard, .toast {
|
|
|
|
@include card($card-smallpad);
|
|
|
|
&-header {
|
|
|
|
@include card-header($card-bigpad);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-09 11:42:53 +02:00
|
|
|
/* COLORIZE CARDS and TOASTS */
|
|
|
|
|
|
|
|
.card, .smallcard, .menu {
|
2021-07-25 14:12:29 +02:00
|
|
|
@each $name, $color in list-colors() {
|
|
|
|
&-#{$name} { @include card-color(get-color($name)); }
|
|
|
|
}
|
2019-10-09 11:42:53 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.toast {
|
2021-07-25 14:12:29 +02:00
|
|
|
@each $name, $color in list-colors() {
|
|
|
|
&-#{$name} { @include background-color(get-color($name)); }
|
|
|
|
}
|
2021-07-24 16:59:42 +02:00
|
|
|
|
|
|
|
a, a:visited {
|
2021-07-25 14:12:29 +02:00
|
|
|
color: $color-font-light;
|
2021-07-24 16:59:42 +02:00
|
|
|
background-color:rgba(0,0,0,0.15);
|
|
|
|
text-decoration:none;
|
|
|
|
opacity:1;
|
|
|
|
&:hover, &:active, &:visited {
|
2021-07-25 14:12:29 +02:00
|
|
|
color: $color-font-light;
|
2021-07-24 16:59:42 +02:00
|
|
|
background-color:transparent;
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
}
|
2019-12-07 16:06:38 +01:00
|
|
|
}
|