kazhnuz.css/scss/_cards.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-left:0;
    padding-right:0;
    padding-bottom: $size/2!important;
    margin-bottom:0.75rem;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.3);

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

    width:95%;

    @include biseau($size);
            
    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);
        &:before {
            @include background-color($background-color, $text-color);
        }
    }
}

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

    &-body {
        padding:0!important;
        margin:0!important;
    }

    &-header {
        @include card-header($card-bigpad);
    }

    /* Menu handling */

    &-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;

            word-wrap:none;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow:hidden;
            
            @include biseau(0.75rem);
        }

        a {
            text-decoration:none;
            color: $color-violet;
            background-color:transparent;
            &:hover {
                text-decoration:none;
                color: $color-violet;
            
                @include biseau(0.75rem);

                &:before {
                    background-color:rgba(0,0,0,0.1);
                }
            }

            
        }

        .menu-divider {
            position: relative;
            left: -0.325rem;
            font-weight: 600;
            padding-top:0.325rem;
            padding-bottom:0.325rem; 
        }
    }
}

.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); }
  }