/* * 2. Cards and containers * All elements that are supposed to contain other stuff * * */ $card-bigpad: $lineheight; $card-smallpad: $lineheight_half; @mixin card-color($background-color) { & .card-header, & .menu-header { @include colorize-shape($background-color); color:getTextColorFromBackground($background-color); } } .card, .menu { @include panel($card-bigpad); display: flex; flex-direction: column; &-body { padding:0!important; } &-header { @include panel-header($card-bigpad); .fa { margin-right: 0.5em; } } /* Menu handling */ &-menu { display:flex; flex-direction: column; ul { margin:0; padding:0; } li { list-style: none; padding:0; margin:0; } .menu-element, .menu-element-link, li a, li a:visited { display:flex; line-height:$lineheight; padding-right:$lineheight_half; padding-left:$lineheight_quarter; padding-top:$lineheight_quarter; padding-bottom:$lineheight_quarter; margin:0; justify-content: space-between; word-wrap:none; white-space: nowrap; text-overflow: ellipsis; overflow:hidden; @include shape-style($lineheight_half); @include button-hover(); @include prefer-no-borders(); strong { font-weight: 900; color:get-color("dark")!important; } &.noflex { & :first-child { min-width:2rem; } justify-content: flex-start; } } a, a:visited { @include shape-style($lineheight_half); @include button-hover(); @include button-fullcontrol(transparent, accentuate($color-background-alt), $color-primary); } .menu-divider { position: relative; left: -$lineheight_quarter; font-weight: $fontweight_hyper; padding-top:$lineheight_quarter; padding-bottom:$lineheight_quarter; } } } /* 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; padding-right:$lineheight_half; } } } @mixin list-color($color) { li.list-element { &::before { color: $color; } } } ul.card-list, .card > ul { padding:0; margin:0; li.list-element { line-height:$lineheight; padding-right:$lineheight_half; padding-left:$lineheight_quarter; padding-top:$lineheight_quarter; padding-bottom:$lineheight_quarter; 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);} } .smallcard, .toast { @include panel($card-smallpad); &-header { @include panel-header($card-bigpad); } } .toast { padding:$card-smallpad, } /* COLORIZE CARDS and TOASTS */ .card, .smallcard, .menu { @each $name, $color in list-colors() { &-#{$name} { @include card-color(get-color($name)); } } } .toast { @each $name, $color in list-colors() { &-#{$name} { @include background-color(get-color($name)); } } a, a:visited { color: $color-font-light; background-color:rgba(0,0,0,0.15); text-decoration:none; opacity:1; &:hover, &:active, &:visited { color: $color-font-light; background-color:transparent; opacity:1; } } }