styles.styl

normalize-css()

// Material Shadows
shadow-level(l = 1)
    if l == -1
        box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7);
    if l == 0
        box-shadow: none;
    if l == 1
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    if l == 2
        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    if l == 3
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    if l == 4
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    if l == 5
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);

// Common Transition
trans($sec = 0.3s)
    transition: all $sec ease
// Grid
$xsmall = 340px
$small = 500px
$med = 700px
$large = 960px
$wide = 1200px

// Colors
black = #222
grey = #D8D8D8
light-grey = #EEE
purp = #524763
dark-purp = #373142
red = #E54B4B
teal = #82D8D8
dark-teal = #66A6A6
green = #CBE56C
blue = #16528E
bright-blue = #0082C8
maroon = #6A2140
light-red = #CA5765
pink = #CF256D
orange = #E8846B

z = {
    neg: -7,
    lowest: 1,
    low: 4,
    mid: 5,
    video: 6,
    header: 7,
    nav: 8,
    mini: 9,
    modal: 10,
    highest: 11
}

social = {
    twitter: #00aced,
    facebook: #3b5998,
    google: #dd4b39,
    youtube: #bb0000
}

$side-nav = 100px
$side-nav-large = 200px

html
    box-sizing: border-box

*, *:before, *:after
    box-sizing: inherit

body
    background light-grey
    padding: 70px 0 150px 100px
    font-family: 'Open Sans', sans-serif

header
    color #FFF
    background: blue
    padding 20px 5%
    fixed top left
    width 100%
    height 70px
    z-index: z.header
    shadow-level(2)
    clearfix()
    h2
        margin 0
        font-weight 100
        font-size 1.6em
        float left
    nav
        float right
        a
            color: #FFF
            text-decoration: none
            line-height: 36px
            font-size: 1.2em
            display: inline-block
            border-bottom 4px solid transparent
            trans()
            + a
                margin-left: 30px
            &:hover
                border-color teal

a
    color: Black
    text-decoration: none
    line-height: 20px
    font-size: 1em
    display: inline-block
    border-bottom 4px solid transparent
    trans()
    + a
        margin-left: 30px
    &:hover
        border-color bright-blue


p
    color #333

.page-title
    text-transform uppercase
    font-weight 800
    margin-bottom 30px

.main-layout
    lost-center 90%
    margin-top 20px
    +above($large)
        lost-center 70%
        margin-top 40px

.blogPage
    padding 50px
    input
        width 90%
        font-size 1em
        font-weight 800
        color #333
        border none
        padding 20px

.btn, button
    display inline-block
    cursor pointer
    background bright-blue
    color #FFF
    text-decoration none
    text-transform uppercase
    padding 5px 15px
    border solid 3px bright-blue
    border-radius 6px
    margin 3px 10px 3px 0px
    width 90%
    font-weight 400
    shadow-level(1)
    trans()
    &:hover
        background @background - 20
        border-color @background
        shadow-level(2)
    &.btn-primary
        background teal
        border-color teal
        color blue
        &:hover
            background @background - 40
            border-color @background
    &.btn-deny
        background red
        border solid 3px @background
        &:hover
            background @background - 20
            border-color @background
    &.btn-text
        color blue
        background transparent
        border solid 2px blue
        shadow-level(0)
        &:hover
            background teal
            border-color @background
            shadow-level(1)
    &.btn-text-dark
        color #FFF
        background transparent
        border solid 2px #FFF
        shadow-level(0)
        &:hover
            background #FFF
            color dark-purp
            border-color @background
            shadow-level(1)
    &.btn-confirmation
        color black
        background green
        border solid 2px @background
        &:hover
            background @background - 20
            border-color dark-purp
    &.btn-cancel
        color #FFF
        background transparent
        border solid 2px #FFF
        opacity 0.4
        shadow-level(-1)
        &:hover
            background red
            color #FFF
            opacity 1
            shadow-level(2)
            border-color @background

input, select, textarea
    color blue
    background #FFF
    border solid 2px light-grey
    border-radius 2px
    font-weight 800
    display block
    padding 6px 10px
    margin-bottom 10px
    &:hover
        background @background - 1
        border-color @background
        shadow-level(2)

input::-webkit-input-placeholder
    color: #ddd
input:-moz-placeholder
    color: #ddd
input::-moz-placeholder
    color: #ddd
input:-ms-input-placeholder
    color: #ddd

.singlePost
    transition all 0.3s cubic-bezier(0.86, 0, 0.07, 1)
    shadow-level(1)
    padding 30px
    margin 30px 0px 0px 0
    width 90%
    &:hover
        shadow-level(2)
    h2
        font-weight 600
        color bright-blue
        font-size 2.2em
        display block
        text-align center
        letter-spacing 1px
    input
        width 100%
        font-size 1em
        font-weight 800
        color #333
        border none
        padding 20px
    p
        font-size 1.2em
    .btn, button
        display inline-block
        cursor pointer
        background bright-blue
        color #FFF
        text-decoration none
        text-transform uppercase
        padding 5px 15px
        border solid 3px bright-blue
        border-radius 6px
        margin 3px 10px 3px 0px
        width 48%
        font-weight 400
        shadow-level(1)
        trans()

.resolutions
    list-style none
    padding 0
    margin 40px 0
    lost-center 700px
    li
        font-size 2em
        margin-bottom 8px
        input
            margin-right 10px
        &.checked
            color #CCC
        button
            padding 10px
            margin-left 40px
            line-height 0.5
            float right

.panel-body
    .form-group
        lost-column 1/2

.side-nav
    fixed bottom left
    height 100px
    width 100%
    overflow hidden
    background dark-purp
    color #FFF
    z-index: z.header
    shadow-level(2)
    ul
        margin 0
        padding 0
        display flex
        justify-content space-between
        list-style none
    a
        color #FFF
        text-decoration none
        padding 20px 20px
        display block
        text-align center
        trans()
        &:hover, &.active
            background purp
    i
        display block
        font-size 2em
        margin-bottom 10px
    +above($med)
        height 100%
        z-index: z.mid
        padding 120px 0
        fixed top left
        width $side-nav
        ul
            display block
        shadow-level(-1)
        a
            padding 20px 10px
            &:hover, &.active
                border-left 4px solid teal
    +above($large)
        width $side-nav-large
        a
            padding 20px 20px
            &:hover, &.active
                border-left 10px solid teal

.completed
    color #FFF
    background teal
    border-radius 5px
    padding 5px
    margin-left 20px
    animation complete 0.6s ease
    font-size 0.6em

#login-dropdown-list
    right -1px
    left auto

#login-sign-in-link, #login-name-link
    margin-left: 30px


@keyframes complete
    0%
        opacity 0
        transform translate3d(0,-30px,0)
    100%
        opacity 1
        transform translate3d(0, 0,0)

.resolutionLoad-enter
    opacity: 0
    animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)

.resolutionLoad-leave
    animation: slideOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
    opacity: 1.0

@keyframes slideIn
    0%
        opacity 0
        transform translate3d(-50px, 0, 0)
    100%
        opacity 1
        transform translate3d(0, 0, 0)

@keyframes slideOut
    0%
        opacity 1
        transform translate3d(0, 0, 0)
    100%
        opacity 0
        transform translate3d(50px, 0, 0)

@keyframes slideUp
    0%
        opacity 0
        transform translate3d(0, 60px, 0)
    100%
        opacity 1
        transform translate3d(0, 0, 0)

.route-enter, .route-appear
    opacity: 0
    animation: slideIn 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)

.route-leave
    animation: slideOut 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
    opacity: 1.0

.route-appear
    opacity: 0
    animation: slideUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)