KevinK.dev.js/src/_mixins.scss

@import "./variables";

@mixin flexList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@mixin cardGeneric {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
    transition: transform 0.25s, box-shadow 0.25s;
    color: $textColor;
    text-decoration: none;
    margin: 20px;
    background: $background;

    &:hover,
    &:active,
    &:focus {
        transform: scale(1.05);
        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
            -1px 11px 33px -10px rgba($accentColor, 0.75);
    }
}

@mixin buttonBasic {
    display: block;
    padding: 10px;
    text-align: center;
    background: $accentColor;
    color: white;
    text-decoration: none;
    box-shadow: 0 0 33px -10px rgba($accentColor, 0.5);
    transition: box-shadow 0.25s;

    &:hover,
    &:active,
    &:hover {
        box-shadow: 0 0 33px -10px rgba($accentColor, 0.9);
    }
}

@mixin button {
    @include buttonBasic;
    border-radius: 5px;
}

@mixin homeBanner {
    background: lighten($background, 1);
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;

    img {
        height: 50px;
    }

    > div {
        display: flex;
        height: 100%;
        padding: 20px !important;
        line-height: 50px;
        font-size: 1.7em;
        color: white;

        > span {
            margin-left: auto;
            margin-right: auto;
        }

        > i {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
        }
    }
}