Last active
February 21, 2017 13:03
-
-
Save iuliaL/a694750bdf1da72198b30157138cc18f to your computer and use it in GitHub Desktop.
New mixins partial, added Hamburger animation mixin and some other cool reusable stuff
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment