140 lines
3.3 KiB
SCSS
140 lines
3.3 KiB
SCSS
/** 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;
|
|
}
|
|
}
|
|
|