New mixins partial, added Hamburger animation mixin and some other cool reusable stuff

_new_mixins.sass

.full-height
    height: 100%

.inline-block
    display: inline-block

.block
    display: block

=uppercase
    text-transform: uppercase

.uppercase
    +uppercase

/* Bootstrap utility classes inspired extending *********************************************************/

$displays: block, inline-block

@for $i from 1 through (length($displays)) // use .visible-xl-block, .visible-xl-inline-block
    .visible-xl-#{nth($displays, $i)}
        @media (min-width: 1400px)
            display: #{nth($displays, $i)} !important

=text-elipsis
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    display: block // optional


=text-shadow($color)
    text-shadow: 0 0 $color

//**************************************************************************************************** [ MARGINS AND PADDINGS ]

.margin-0
    margin: 0 !important
.padding-0
    padding: 0 !important

$spacings-values: 0,5,10,15,20,25,30,40,50,60
$spacings-props: margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom, padding-left


@for $i from 1 through (length($spacings-values))
    @for $j from 1 through (length($spacings-props))
        .#{nth($spacings-props, $j)}-#{nth($spacings-values, $i)}
            #{nth($spacings-props, $j)}: #{nth($spacings-values, $i)}px !important


//**************************************************************************************************** [ VENDOR-PREFIXES ]


=border-radius ($radius: 5px)
    -webkit-border-radius: $radius
    -moz-border-radius: $radius
    -ms-border-radius: $radius
    border-radius: $radius

=border-top-left-radius ($radius)
    -webkit-border-top-left-radius: $radius
    -moz-border-top-left-radius: $radius
    -ms-border-top-left-radius: $radius
    border-top-left-radius: $radius

=border-top-right-radius ($radius)
    -webkit-border-top-right-radius: $radius
    -moz-border-top-right-radius: $radius
    -ms-border-top-right-radius: $radius
    border-top-right-radius: $radius

=border-bottom-right-radius ($radius)
    -webkit-border-bottom-right-radius: $radius
    -moz-border-bottom-right-radius: $radius
    -ms-border-bottom-right-radius: $radius
    border-bottom-right-radius: $radius

=border-bottom-left-radius ($radius)
    -webkit-border-bottom-left-radius: $radius
    -moz-border-bottom-left-radius: $radius
    -ms-border-bottom-left-radius: $radius
    border-bottom-left-radius: $radius


=box-shadow ($params)
    -webkit-box-shadow: $params
    -moz-box-shadow: $params
    box-shadow: $params

=transform ($trans)
    -webkit-transform: $trans
    -moz-transform: $trans
    -ms-transform: $trans
    transform: $trans

=transition ($transition...)
    -webkit-transition: $transition
    -moz-transition: $transition
    -ms-transition: $transition
    -o-transition: $transition
    transition: $transition


//**************************************************************************************************** [ SPECIALS ]


=hamburger($width, $height, $line-height,$distance,$bars-color)
    padding: 0
    border: none
    margin: 0
    width: $width
    height: $height
    position: relative
    top: 10px
    right: 10px
    transform: rotate(0deg)
    transition: .5s ease-in-out
    cursor: pointer
    background-color: transparent
    &:focus,&:hover
        background-color: transparent
    span
        display: block
        position: absolute
        height: $line-height
        width: 100%
        background: $bars-color
        border-radius: 2px
        opacity: .8
        left: 0
        transform: rotate(0deg)
        transition: .25s ease-in-out
        &:first-child
            top: 0
        &:nth-child(2)
            top: $distance
        &:nth-child(3)
            top: 2 * $distance
    // open
    &:not(.collapsed)
        span
            &:first-child
                transform: rotate(135deg)
                top: $distance
            &:nth-child(2)
                left: -60px
                opacity: 0
            &:nth-child(3)
                top: $distance
                transform: rotate(-135deg)

//**************************************************************************************************** [ FLEXBOX ]
=flexbox
    display: -webkit-box
    display: -moz-box
    display: -ms-flexbox
    display: -webkit-flex
    display: flex

// align flex items along the main axis of the current line of the flex container: flex-start | flex-end | center | space-between | space-around
=flex-justify-content ($pos)
    -webkit-box-pack: $pos
    -moz-box-pack: $pos
    -webkit-justify-content: $pos
    -ms-flex-pack: $pos
    justify-content: $pos

    @if $pos == flex-start
        -webkit-box-pack: start
        -moz-box-pack: start
        -ms-flex-pack: start

    @else if $pos == flex-end
        -webkit-box-pack: end
        -moz-box-pack: end
        -ms-flex-pack: end

    @else if $pos == space-between
        -webkit-box-pack: justify
        -moz-box-pack: justify
        -ms-flex-pack: justify

    @else if $pos == space-around
        -webkit-box-pack: justify
        -moz-box-pack: justify
        -ms-flex-pack: distribute

// align flex items along the cross axis of the current line of the flex container: flex-start | flex-end | center | baseline | stretch
=flex-align-items ($pos)
    -webkit-box-align: $pos
    -moz-box-align: $pos
    -webkit-align-items: $pos
    -ms-flex-align: $pos
    align-items: $pos

    @if $pos == flex-start
        -webkit-box-align: start
        -moz-box-align: start
        -ms-flex-align: start

    @else if $pos == flex-end
        -webkit-box-align: end
        -moz-box-align: end
        -ms-flex-align: end


=flex-direction ($pos)
    @if $pos == row
        -webkit-box-direction: normal
        -moz-box-direction: normal
        -webkit-box-orient: horizontal
        -moz-box-orient: horizontal
        -webkit-flex-direction: row
        -ms-flex-direction: row
        flex-direction: row

    @else if $pos == column
        -webkit-box-direction: normal
        -moz-box-direction: normal
        -webkit-box-orient: vertical
        -moz-box-orient: vertical
        -webkit-flex-direction: column
        -ms-flex-direction: column
        flex-direction: column

    @else if $pos == row-reverse
        -webkit-box-direction: reverse
        -moz-box-direction: reverse
        -webkit-box-orient: horizontal
        -moz-box-orient: horizontal
        -webkit-flex-direction: row-reverse
        -ms-flex-direction: row-reverse
        flex-direction: row-reverse

    @else if $pos == column-reverse
        -webkit-box-direction: reverse
        -moz-box-direction: reverse
        -webkit-box-orient: vertical
        -moz-box-orient: vertical
        -webkit-flex-direction: column-reverse
        -ms-flex-direction: column-reverse
        flex-direction: column-reverse

=flex-wrap ($pos)
    -webkit-flex-wrap: $pos
    -moz-flex-wrap: $pos
    -ms-flex-wrap: $pos
    flex-wrap: $pos

=flex-align-content ($pos)
    -webkit-align-content: $pos
    -ms-flex-line-pack: $pos
    align-content: $pos

    @if $pos == flex-start
        -ms-flex-line-pack: start
    @else if $pos == flex-end
        -ms-flex-line-pack: end
    @else if $pos == space-between
        -ms-flex-line-pack: justify
    @else if $pos == space-around
        -ms-flex-line-pack: distribute
        
=flex-align-self ($pos: auto)
    -webkit-align-self: $pos
    -ms-flex-item-align: $pos
    align-self: $pos

=flex-grow ($val)
    flex-grow: $val
    -webkit-flex-grow: $val
    -moz-flex-grow: $val
    -ms-flex-grow: $val


=flex-shrink ($val)
    flex-shrink: $val
    -webkit-flex-shrink: $val
    -moz-flex-shrink: $val
    -ms-flex-shrink: $val

=flex-basis ($val)
    flex-basis: $val
    -webkit-flex-basis: $val
    -moz-flex-basis: $val
    -ms-flex-basis: $val

=flex ($grow, $shrink, $basis)
    -webkit-box-flex: $grow
    -moz-box-flex: $grow
    -webkit-flex: $grow $shrink $basis
    -ms-flex: $grow $shrink $basis
    flex: $grow $shrink $basis

=flex-order ($order)
    -webkit-box-ordinal-group: $order
    -moz-box-ordinal-group: $order
    -ms-flex-order: $order
    -webkit-order: $order
    order: $order

.flex-grow
    +flex-grow(1)

.flex-shrink
    +flex-shrink(0)


//**************************************************************************************************** [ MISC. FLEXBOX UTILS ]

=vertical-center
    +flexbox
    +flex-direction(column)
    +flex-justify-content(center)
    +flex-wrap(nowrap)


//**************************************************************************************************** [ COLUMNS GRID - WIP :) ]

=flex-columns
    +flexbox
    +flex-direction(row)
    +flex-justify-content(space-between)
    +flex-wrap(nowrap)