/** Mixins */ $break-small: 35.5rem; // >= 568px @ 16px $break-medium: 48rem; // >= 768px @ 16px $break-large: 64rem; // >= 1024px @ 16px $break-extra-large: 80rem; // >= 1280px @ 16px $break-largest: 90rem; // >= 1440px @ 16px // @include respond-to( ); @mixin respond-to( $condition ) { @if $condition == 'initialize' { @media only screen and (min-width: 1px) { @content; } } @if $condition == 'small' { @media only screen and (min-width: $break-small) { @content; } } @if $condition == 'medium' { @media only screen and (min-width: $break-medium) { @content; } } @if $condition == 'large' { @media only screen and (min-width: $break-large) { @content; } } @if $condition == 'extra-large' { @media only screen and (min-width: $break-extra-large) { @content; } } @if $condition == 'largest' { @media only screen and (min-width: $break-largest) { @content; } } } // Text shadow @mixin ts($tsval: 0 1px 0 #fff) { text-shadow: $tsval; } // Box shadow @mixin bs($bsval: 0 0 0.83em #333, $due: 0 0 0 transparent) { -moz-box-shadow: $bsval, $due; -webkit-box-shadow: $bsval, $due; box-shadow: $bsval, $due; } // Opacity @mixin opacity($opacity) { opacity: $opacity; -moz-opacity: $opacity; } // Transitions @mixin transition($transition: all linear 0.2s) { -webkit-transition: $transition; -moz-transition: $transition; -o-transition: $transition; -ms-transition: $transition; transition: $transition; } // Transforms @mixin transform($transform: translate3d(0, 0, 0)) { -moz-transform: $transform; -ms-transform: $transform; -o-transform: $transform; transform: $transform; } @mixin animation($animate...) { $max: length($animate); $animations: ''; @for $i from 1 through $max { $animations: #{$animations + nth($animate, $i)}; @if $i < $max { $animations: #{$animations + ", "}; } } -webkit-animation: $animations; -moz-animation: $animations; -o-animation: $animations; animation: $animations; } @mixin keyframes($animationName) { @-webkit-keyframes #{$animationName} { @content; } @-moz-keyframes #{$animationName} { @content; } @-o-keyframes #{$animationName} { @content; } @keyframes #{$animationName} { @content; } } @mixin strip($lines: 1, $font-size: 16px, $line-height: 1.3, $width: 100%) { display: block; width: $width; min-height: ($font-size*$line-height*$lines) + 2; max-height: ($font-size*$line-height*$lines) + 2; /* Fallback for non-webkit */ font-size: $font-size; line-height: $line-height; white-space: nowrap; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @function strip-unit($num) { @return $num / ($num * 0 + 1); } // Utilities // ------------------------- // Clearfix // Source: http://nicolasgallagher.com/micro-clearfix-hack/ // // For modern browsers // 1. The space content is one way to avoid an Opera bug when the // contenteditable attribute is included anywhere else in the document. // Otherwise it causes space to appear at the top and bottom of elements // that are clearfixed. // 2. The use of `table` rather than `block` is only necessary if using // `:before` to contain the top-margins of child elements. @mixin clearfix() { zoom: 1; &::before, &::after { content: " "; /* 1 */ display: table; /* 2 */ } &::after { clear: both; } }