-
-
Save ranchodeluxemedia/9460058 to your computer and use it in GitHub Desktop.
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
| /** | |
| * Sass mixins | |
| */ | |
| @charset "UTF-8" | |
| // Force output of above line by adding a unicode character. ♫ | |
| // ----------------------------------------------- | |
| @function rem($size) | |
| $remSize: $size / 16 | |
| @return #{$remSize}rem | |
| @mixin backgroundSize($type) | |
| background-size: $type | |
| -khtml-background-size: $type | |
| -webkit-background-size: $type | |
| -moz-background-size: $type | |
| -ms-background-size: $type | |
| -o-background-size: $type | |
| .full-bg | |
| background: center no-repeat | |
| @include backgroundSize(cover) | |
| @mixin backgroundClip($type) | |
| -webkit-background-clip: $type | |
| -moz-background-clip: $type | |
| background-clip: $type | |
| @mixin textShadow($string) | |
| text-shadow: $string | |
| -khtml-text-shadow: $string | |
| -webkit-text-shadow: $string | |
| -moz-text-shadow: $string | |
| -ms-text-shadow: $string | |
| -o-text-shadow: $string | |
| @mixin stroke($colour) | |
| text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour | |
| -khtml-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour | |
| -webkit-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour | |
| -moz-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour | |
| -ms-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour | |
| -o-text-shadow: -1px -1px 0 $colour, 1px -1px 0 $colour, -1px 1px 0 $colour, 1px 1px 0 $colour | |
| @mixin boxShadow($string) | |
| box-shadow: $string | |
| -khtml-box-shadow: $string | |
| -webkit-box-shadow: $string | |
| -moz-box-shadow: $string | |
| -ms-box-shadow: $string | |
| -o-box-shadow: $string | |
| @mixin transitionDuration($time) | |
| transition-duration: $time | |
| -khtml-transition-duration: $time | |
| -webkit-transition-duration: $time | |
| -moz-transition-duration: $time | |
| -ms-transition-duration: $time | |
| -o-transition-duration: $time | |
| @mixin transitionTiming($easing: ease) | |
| transition-timing-function: $easing | |
| -khtml-transition-timing-function: $easing | |
| -webkit-transition-timing-function: $easing | |
| -moz-transition-timing-function: $easing | |
| -ms-transition-timing-function: $easing | |
| -o-transition-timing-function: $easing | |
| @mixin transition($string) | |
| transition: $string | |
| -khtml-transition: $string | |
| -webkit-transition: $string | |
| -moz-transition: $string | |
| -ms-transition: $string | |
| -o-transition: $string | |
| @mixin transform($type) | |
| transform: $type | |
| -khtml-transform: $type | |
| -webkit-transform: $type | |
| -moz-transform: $type | |
| -ms-transform: $type | |
| -o-transform: $type | |
| @mixin boxSizing($type) | |
| box-sizing: $type | |
| -khtml-box-sizing: $type | |
| -webkit-box-sizing: $type | |
| -moz-box-sizing: $type | |
| -ms-box-sizing: $type | |
| -o-box-sizing: $type | |
| @mixin borderRadius($radius) | |
| border-radius: $radius | |
| -khtml-border-radius: $radius | |
| -webkit-border-radius: $radius | |
| -moz-border-radius: $radius | |
| -ms-border-radius: $radius | |
| -o-border-radius: $radius | |
| @mixin borderImage($string) | |
| -webkit-border-image: $string | |
| -moz-border-image: $string | |
| -o-border-image: $string | |
| border-image: $string | |
| @mixin mask($source) | |
| mask-image: url("@{source") | |
| -khtml-mask-image: url("@{source") | |
| -webkit-mask-image: url("@{source") | |
| -moz-mask-image: url("@{source") | |
| -ms-mask-image: url("@{source") | |
| -o-mask-image: url("@{source") | |
| @mixin columns($len) | |
| columns: $len | |
| -khtml-columns: $len | |
| -webkit-columns: $len | |
| -moz-columns: $len | |
| -ms-columns: $len | |
| -o-columns: $len | |
| @mixin columnCount($len) | |
| column-count: $len | |
| -khtml-column-count: $len | |
| -webkit-column-count: $len | |
| -moz-column-count: $len | |
| -ms-column-count: $len | |
| -o-column-count: $len | |
| @mixin columnGap($gap) | |
| column-gap: $gap | |
| -khtml-column-gap: $gap | |
| -webkit-column-gap: $gap | |
| -moz-column-gap: $gap | |
| -ms-column-gap: $gap | |
| -o-column-gap: $gap | |
| @mixin userSelect($type) | |
| user-select: $type | |
| -khtml-user-select: $type | |
| -webkit-user-select: $type | |
| -webkit-touch-callout: $type | |
| -moz-user-select: $type | |
| -ms-user-select: $type | |
| -o-user-select: $type | |
| @mixin clearfix | |
| zoom: 1 | |
| &:after, &:before | |
| content: '\0020' | |
| display: table | |
| height: 0 | |
| overflow: hidden | |
| &:after | |
| clear: both | |
| @mixin imageBlock($width, $height, $source, $display: block) | |
| display: $display | |
| width: $width | |
| height: $height | |
| text-indent: -999em | |
| background: url(../images/#{$source}) no-repeat | |
| @mixin linearGradient($from, $to, $img: 0, $dist: 50) | |
| background: $from | |
| @if $img != 0 | |
| background-image: url(../images/#{$img}), -webkit-gradient(linear, 0 0, 0 $dist, from($from), to($to)) | |
| background-image: url(../images/#{$img}), -moz-linear-gradient($from, $to) | |
| @if $img == 0 | |
| background-image: -webkit-gradient(linear, 0 0, 0 $dist, from($from), to($to)) | |
| background-image: -moz-linear-gradient($from, $to) | |
| @mixin wrap($y: 0) | |
| width: $maxWidth | |
| margin: $y auto | |
| @mixin sq($dim) | |
| width: $dim | |
| height: $dim | |
| @mixin animation($string) | |
| animation: $string | |
| -webkit-animation: $string | |
| -khtml-animation: $string | |
| -moz-animation: $string | |
| -ms-animation: $string | |
| -o-animation: $string | |
| @mixin keyframes($name) | |
| @-webkit-keyframes #{$name} | |
| @content | |
| @-moz-keyframes #{$name} | |
| @content | |
| @keyframes #{$name} | |
| @content | |
| @mixin transparentBG($color, $alpha) | |
| $rgba: rgba($color, $alpha) | |
| $ie: ie-hex-str($rgba) | |
| background-color: transparent | |
| background-color: $rgba | |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie},endColorstr=#{$ie}) | |
| zoom: 1 | |
| @mixin cover($pos: absolute, $dist: 0) | |
| position: $pos | |
| left: $dist | |
| right: $dist | |
| bottom: $dist | |
| top: $dist | |
| .cover | |
| @include cover | |
| .table.cover, | |
| .table.cover > .cell | |
| @include sq(100%) | |
| @mixin opacity($alpha) | |
| $ie: $alpha * 100 | |
| opacity: $alpha | |
| filter: alpha(opacity=$ie) | |
| @mixin hyphen($type) | |
| hyphen: $type | |
| -webkit-hyphen: $type | |
| -moz-hyphen: $type | |
| -ms-hyphen: $type | |
| -o-hyphen: $type | |
| // Cubic | |
| $easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) | |
| $easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) | |
| $easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) | |
| // Circ | |
| $easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335) | |
| $easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000) | |
| $easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860) | |
| // Expo | |
| $easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035) | |
| $easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000) | |
| $easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000) | |
| // Quad | |
| $easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530) | |
| $easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940) | |
| $easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955) | |
| // Quart | |
| $easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220) | |
| $easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000) | |
| $easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000) | |
| // Quint | |
| $easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060) | |
| $easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000) | |
| $easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000) | |
| // Sine | |
| $easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715) | |
| $easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000) | |
| $easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950) | |
| // Back | |
| $easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045) | |
| $easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275) | |
| $easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550) | |
| // ----------------------------------------------- | |
| /** | |
| * Content-powered mixins | |
| */ | |
| // Quicker @media assignments | |
| @mixin media($type) | |
| @if $type == tablet | |
| @media only screen and (min-device-width: 767px) and (max-device-width: 1024px) | |
| @content | |
| @else if $type == mobile | |
| @media only screen and (max-device-width: 767px) | |
| @content | |
| @else if $type == retina | |
| @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dip) | |
| @content | |
| // Wordpress active states | |
| @mixin wpActives | |
| &.active > a, | |
| &.current-menu-item > a, | |
| &.current-menu-parent > a, | |
| &.current-menu-ancestor > a, | |
| &.current-page-ancestor > a, | |
| &.current_page_parent > a, | |
| &.current_page_item > a, | |
| &.current_page_ancestor > a, | |
| &.current-cat > a | |
| @content | |
| // Common WP menu settings | |
| @mixin wpMenu | |
| ul, li | |
| display: inline | |
| margin: 0 | |
| padding: 0 | |
| ul li | |
| @content | |
| // Selection colours | |
| @mixin colorSelection($el: "*") | |
| #{$el}::selection | |
| @content | |
| #{$el}::-khtml-selection | |
| @content | |
| #{$el}::-webkit-selection | |
| @content | |
| #{$el}::-moz-selection | |
| @content | |
| #{$el}::-ms-selection | |
| @content | |
| #{$el}::-o-selection | |
| @content | |
| // ----------------------------------------------- | |
| /** | |
| * Grid styles | |
| */ | |
| [class*="grid-"] | |
| @include clearfix | |
| .item | |
| float: left | |
| &.grid-1 .item | |
| width: 100% | |
| &.grid-2 .item | |
| width: 50% | |
| &.grid-3 .item | |
| width: 33.33% | |
| &.grid-4 .item | |
| width: 25% | |
| &.grid-5 .item | |
| width: 20% | |
| &.grid-6 .item | |
| width: 16.67% | |
| &.grid-7 .item | |
| width: 14.29% | |
| &.grid-8 .item | |
| width: 12.5% | |
| &.grid-9 .item | |
| width: 11.11% | |
| &.grid-10 .item | |
| width: 10% | |
| // ----------------------------------------------- | |
| /** | |
| * Global styles/classes that do not need repeating | |
| */ | |
| body | |
| text-rendering: optimizeLegibility | |
| * | |
| position: relative | |
| @include boxSizing(border-box) | |
| a img | |
| outline: 0 | |
| border: 0 | |
| // Fancy quotes | |
| q:before | |
| content: "\201C" | |
| q:after | |
| content: "\201D" | |
| // Typekit fix | |
| .wf-loading | |
| visibility: hidden !important | |
| // Angular cloaking help | |
| [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak | |
| display: none !important | |
| // Notification styles | |
| .notification | |
| padding: 10px | |
| margin: 15px 0 | |
| border: 1px solid transparent | |
| &.error | |
| color: #981010 | |
| border-color: #8F0000 | |
| background: #FFCCCC | |
| &.success | |
| color: #258815 | |
| border-color: #9ADF8F | |
| background: #D4FFCD | |
| &.info | |
| color: #2850C1 | |
| border-color: #9FC7F5 | |
| background: #DBECFF | |
| &.warning | |
| color: #878314 | |
| border-color: #E5DB55 | |
| background: #FEFCCB | |
| .button | |
| font-size: 10px | |
| margin: 0 0 0 10px | |
| // Quicker table/cell classes | |
| .table | |
| display: table | |
| text-align: center | |
| .cell | |
| display: table-cell | |
| vertical-align: middle | |
| // Remove outlines | |
| a:focus, | |
| a:active | |
| outline: none | |
| // Left/right quick floats | |
| .cls | |
| clear: both | |
| .clearfix | |
| @include clearfix | |
| // kill animations | |
| .noanim | |
| -webkit-transition: none !important | |
| -moz-transition: none !important | |
| -ms-transition: none !important | |
| -o-transition: none !important | |
| transition: none !important | |
| // F5 rows or other fixes | |
| $medium: 64em | |
| $small: 40.063em | |
| .row.full-width | |
| max-width: none | |
| .full-height | |
| height: 100% | |
| .full-width | |
| width: 100% | |
| .row.collapse .columns | |
| padding-left: 0 | |
| padding-right: 0 | |
| .hide | |
| display: none | |
| .collapse-2col | |
| @media (min-width: $small) | |
| .columns:first-child | |
| padding-left: 0 !important | |
| .columns:last-child | |
| padding-right: 0 !important | |
| .columns:only-child | |
| width: 100% !important | |
| padding: 0 !important |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment