kazhnuz.css/scss/_cards.scss

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

$card-bigpad: 1em;
$card-smallpad: 0.66em;

@mixin card($size) {
    @include border-radius();
    background-color: $color-light2;
	box-shadow: $large-shadow;
    border: none;
    margin-bottom:1.2em;
    padding: $size;
}

@mixin card-header($size) {
    font-size:1.1em;
    font-weight:600;
    border-radius: 0;
    padding: $size/2;
    padding-bottom: $size/2!important;
    margin-left: -$size*2;
            
    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)
    }
}

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

    .card-body {
        padding:0;
        &:not(:first-child) {
            padding-top: 1em;
        }
    }

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

.smallcard, .toast, .menu {
    @include card($card-smallpad);
    &-header {
        @include card-header($card-bigpad);
    }
}

/* Menu handling */

.menu {
    li {
        @include border-radius();
        padding:0.2em 0em 0.2em;
        margin:0;

        &.menu-item {
            :hover {
                background-color:rgba(0,0,0,0.1);
                color: $color-dark;
            }

            .menu-badge {
                :hover {
                    background-color: transparent;
                }
            }
        }

        .label {
            padding: 0 0.4em 0;
        }
    }
}

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