index.scss

// Reset all of the CSS Styles
@import "./CSS_Reset";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import "./variables";

/*
========================================
Temp Classes and Mocking Classes
========================================
*/
.tcol {
    background-color: $light-color;
    width: 100%;
    height: 7rem;
    border-radius: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    &.sq {
        &:before {
            content:" ";
            float: left;
            display: block;
            height: auto;
            padding-top:100%;
        }

    }
}
/*
========================================
*/







/* Color Mixins and Classes */
@mixin fontColorLightness($bg) {
    @if lightness($bg) > 50% {
        color: #000;
    } @else {
        color: #fff;
    }
}
@mixin bgHover($bg) {
    background-color: darken($bg,5%);
}

// TODO: Fix this to be dynamic off a color list.
.bg {

    &-primary {
        $currentBG: $primary-color;
        background-color: $currentBG;
        @include fontColorLightness($currentBG);
        &.hov {
            &:hover{
                @include bgHover($currentBG);
            } 
        }
    }
    &-secondary {
        $currentBG: $secondary-color;
        background-color: $currentBG;
        @include fontColorLightness($currentBG);
        &.hoverable {
            @include bgHover($currentBG);
        }
    }
    &-light {
        $currentBG: $light-color;
        background-color: $currentBG;
        @include fontColorLightness($currentBG);
        &.hoverable {
            @include bgHover($currentBG);
        }
    }
    &-dark {
        $currentBG: $dark-color;
        background-color: $currentBG;
        @include fontColorLightness($currentBG);
        &.hoverable {
            @include bgHover($currentBG);
        }
    }
    &-good {
        $currentBG: $good-color;
        background-color: $currentBG;
        @include fontColorLightness($currentBG);
        &.hoverable {
            @include bgHover($currentBG);
        }
    }
    &-bad {
        $currentBG: $bad-color;
        background-color: $currentBG;
        @include fontColorLightness($currentBG);
        &.hoverable {
            @include bgHover($currentBG);
        }
    }
    // background-color: $currentBG;

    
}

/* Sections */
section.section {
    margin-top: 4rem;
    margin-bottom: 4rem;
    &.large {
        margin-top:6rem;
        margin-bottom:6rem;
    }
}

/* Buttons */
.btn {
    padding: 0.75rem 1rem 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    border: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
    &.lg {
        padding: 1rem 2rem 1rem 2rem;
        font-size: 2rem;
    }
    &.md {
        padding: 1rem 1.25rem 1rem 1.25rem;
        font-size: 1.15rem;
    }
    &.sm {
        padding: 0.5rem 0.75rem 0.5rem 0.75rem;
    }
}

/* Articles */

/* Navigation */

/* Cards */

/* FLEX HELPERS */





@import "./typeography";
@import "./container";
@import "./columns";





/*
----------------------------------
TO DO LIST: 
----------------------------------
Create background mixins to add to everything- create bg-color tags
Sections
Re-order variables
Helpers with margins, padding, and type


Create variables for column gridsize, dynamically create column tags for width and offset?
*/


/*
----------------------------------
KNOWN BUGS 
----------------------------------
FIXED: Extra padding/margin on the first and last elements of a row-col


*/