kazhnuz.css/src/scss/components/_cards.scss

/*
 * 2. Cards and containers
 * All elements that are supposed to contain other stuff
 *
 *
*/

$card-bigpad: $lineheight;
$card-smallpad: $lineheight_half;

@mixin card($size) {
    @include border-radius($card-radius);
    background-color: $color-background-alt;
    box-shadow: $large-shadow;
    border: none;
    margin:0;
    margin-bottom:$lineheight;
    & > * {
      margin-left: $size;
      margin-right: $size;
      &:first-child {
        margin-top: $size;
        &.card-header {
          margin-top:$card-header-margin;
        }
      }
      &:last-child {
        margin-bottom: $size;
        &.card-header {
          margin-bottom:$card-header-margin;
        }
      }
    }
}

@mixin card-header($size) {
    font-size:1.1em;
    font-weight: $fontweight_big;
    padding: $size/2;
    padding-left:0;
    padding-right:0;
    padding-bottom: $size/2!important;
    margin-bottom:$lineheight_half;
    margin-top:$lineheight_half;
    line-height:$lineheight;
    white-space: nowrap;

    position:relative;
    left: -$size*1.25;

    width:85%;

    @include shape-style($size);
    border-radius:0;
    &:first-child {
      border-top-left-radius: $card-radius;
      border-top-right-radius: $card-radius;
    }
    &:last-child {
      border-bottom-left-radius: $card-radius;
      border-bottom-right-radius: $card-radius;
    }

    h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
        font-family:$basefont;
        font-size:1rem;
        padding:0px;
        margin:0px;
        color:$color-font-light;
        font-weight: $fontweight_big;
        line-height:$lineheight;
    }
}

@mixin card-color($background-color) {
    & .card-header, & .menu-header {
        @include colorize-shape($background-color);
        color:getTextColorFromBackground($background-color);
    }
}

.card, .menu {
    @include card($card-bigpad);

    &-body {
        padding:0!important;
    }

    &-header {
        @include card-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();

            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, darken($color-background-alt, 7.5%), $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 card($card-smallpad);
    &-header {
        @include card-header($card-bigpad);
    }
}

/* 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;
      }
    }
  }