Skip to content

Instantly share code, notes, and snippets.

@gil00pita

gil00pita/_functions.scss

Created August 23, 2016 13:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gil00pita/88033b6c49346e153845447e978e80ec to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gil00pita/88033b6c49346e153845447e978e80ec to your computer and use it in GitHub Desktop.
Download ZIP
Sass Toolbox
Raw
_functions.scss
/* ==========================================================================
A collection of functions for color adjustments
Usage: adjust-lightness(#000, 20%) { }
========================================================================== */
// a genericized version of lighten/darken so that negative values can be used.
@function adjust-lightness($color, $amount) {
//@debug $color; @debug $amount;
@return adjust-color($color, $lightness: $amount);
}
// Scales a color's lightness by some percentage.
// If the amount is negative, the color is scaled darker, if positive, it is scaled lighter.
// This will never return a pure light or dark color unless the amount is 100%.
@function lighten($color, $amount) {
//@debug $color;@debug $amount;
@return scale-color($color, $lightness: $amount);
}
// a genericized version of saturate/desaturate so that negative values can be used.
@function adjust-saturation($color, $amount) {
//@debug $color;@debug $amount;
@return adjust-color($color, $saturation: $amount);
}
// Scales a color's saturation by some percentage.
// If the amount is negative, the color is desaturated, if positive, it is saturated.
// This will never return a pure saturated or desaturated color unless the amount is 100%.
@function darken($color, $amount) {
//@debug $color;@debug $amount;
@return scale-color($color, $saturation: $amount);
}
@function shade($color, $percentage) {
//@debug $color;@debug $percentage;
@return mix(#000000, $color, $percentage);
}
@function tint($color, $percentage) {
//@debug $color;@debug $percentage;
@return mix(#ffffff, $color, $percentage);
}
/* ==========================================================================
A collection of function for advanced type checking
Usage: @if is-number(14px) { }
========================================================================== */
@function is-number($value) {
@return type-of($value) == 'number';
}
@function is-int($value) {
@return unitless($value);
}
@function is-time($value) {
@return is-number($value) and index('ms' 's', unit($value)) != null;
}
@function is-duration($value) {
@return is-time($value);
}
@function is-angle($value) {
@return is-number($value) and index('deg' 'rad' 'grad' 'turn', unit($value)) != null;
}
@function is-frequency($value) {
@return is-number($value) and index('Hz' 'kHz', unit($value)) != null;
}
@function is-integer($value) {
@return is-number($value) and round($value) == $value;
}
@function is-relative-length($value) {
@return is-number($value) and index('em' 'ex' 'ch' 'rem' 'vw' 'vh' 'vmin' 'vmax', unit($value)) != null;
}
@function is-absolute-length($value) {
@return is-number($value) and index('cm' 'mm' 'in' 'px' 'pt' 'pc', unit($value)) != null;
}
@function is-percentage($value) {
@return is-number($value) and unit($value) == '%';
}
@function is-length($value) {
@return is-relative-length($value) or is-absolute-length($value);
}
@function is-resolution($value) {
@return is-number($value) and index('dpi' 'dpcm' 'dppx', unit($value)) != null;
}
@function is-position($value) {
@return is-length($value) or is-percentage($value) or index('top' 'right' 'bottom' 'left' 'center', $value) != null;
}
/* ==========================================================================
Convert px to REM
Usage: @include rem(14px)
========================================================================== */
/// Power function
/// @param {Number} $x
/// @param {Number} $n
/// @return {Number}
@function pow($x, $n) {
$ret: 1;
@if $n >= 0 {
@for $i from 1 through $n {
$ret: $ret * $x;
}
}
@else {
@for $i from $n to 0 {
$ret: $ret / $x;
}
}
@return $ret;
}
@function stripunits($value) {
@return ($value) / ($value * 0 + 1);
}
@function num($input) {
@if type-of($input) != number {
@error 'Could not convert `#{$input}` - must be `type-of number`';
@return null;
}
@return $input/($input*0+1);
}
@function pxToRem($size, $context: $base-font-size) {
//@debug stripUnits($size) /$context * 1rem;
@return stripunits($size) /$context * 1rem;
}
@function rem($sizes...) {
$rems: ();
@if length($sizes) > 1 {
@for $value from 1 through length($sizes) {
@if (unit(nth($sizes, $value )) == "%") {
$rems: append($rems, nth($sizes, $value));
}
@else {
$rems: append($rems, pxToRem(stripunits($value)));
}
}
@return #{$rems};
}
@else if (length($sizes) == 1) {
$onlyOne: nth($sizes, 1);
@if ($onlyOne == 0) or ($onlyOne == "0px") or ($onlyOne == "0") {
@return $onlyOne;
}
@else if (validate($onlyOne, measure)) {
@return pxToRem($onlyOne);
}
@else if (validate($onlyOne, number)) {
//@debug calculateRem($onlyOne);
@return pxToRem($onlyOne);
}
@else {
@warn "rem: " $onlyOne validate($onlyOne, unit) "Error with the rem conversion: unit measure is not valid!";
@return $onlyOne;
}
}
@else {
@warn "rem: Error with the rem conversion: no items to convert!";
}
}
Raw
_mixins.scss
/* ==========================================================================
# Sassy Validation
https://github.com/iamskok/sassy-validation
========================================================================== */
@import "sassy-validation/sassy-validation";
/* ==========================================================================
# Browsers Support
Usage: @include prefixProperty(user-select, none);
========================================================================== */
$defaultWebkitSupport: true;
$defaultFirefoxSupport: true;
$defaultExplorerSupport: true;
$defaultOperaSupport: true;
@mixin prefixProperty($property, $value...) {
-webkit-#{$property}: #{$value};
-khtml-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}
@mixin prefixValue($property, $value...) {
#{$property}: -webkit-#{$value};
#{$property}: -khtml-#{$value};
#{$property}: -moz-#{$value};
#{$property}: -ms-#{$value};
#{$property}: -o-#{$value};
#{$property}: #{$value};
}
/* ==========================================================================
# Opacity
Usage: @include opacity(0.8);
========================================================================== */
@mixin opacity($opacity) {
opacity: $opacity;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity * 100});
filter: alpha(opacity=$opacity * 100);
zoom: 1;
}
/* ==========================================================================
# Opacity
Usage:
*,
*:after,
*:before {
@include box-sizing(border-box);
}
========================================================================== */
@mixin box-sizing($box-model) {
@include prefixProperty(box-sizing, $box-model);
}
/* ==========================================================================
# no-select
Usage: @include no-select;
========================================================================== */
@mixin no-select() {
//make unselectable
-webkit-touch-callout: none;
@include prefixProperty(user-select, none);
}
@mixin user-select($value) {
-webkit-touch-callout: $value;
@include prefixProperty(user-select, $value);
}
/* ==========================================================================
# Browsers Support
https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Usage:
grayscale ex: filter: grayscale(100%);
sepia ex: filter: sepia(100%);
saturate ex: filter: saturate(0%);
hue-rotate ex: filter: hue-rotate(45deg);
invert ex: filter: invert(100%);
brightness ex: filter: brightness(15%);
contrast ex: filter: contrast(200%);
blur ex: filter: blur(2px);
========================================================================== */
@mixin filter($filter-type,$filter-amount) {
-webkit-filter: $filter-type+unquote('(#{$filter-amount})');
-moz-filter: $filter-type+unquote('(#{$filter-amount})');
-ms-filter: $filter-type+unquote('(#{$filter-amount})');
-o-filter: $filter-type+unquote('(#{$filter-amount})');
filter: $filter-type+unquote('(#{$filter-amount})');
}
/* ==========================================================================
# Hyphens
Usage:
========================================================================== */
@mixin hyphens() {
@include prefixProperty(-webkit-hyphens, auto);
}
/* ==========================================================================
# Typography
Usage:
font-face('gotham', '/fonts/gotham'); # Import font files
better-font # Better Font Rendering
ligature # Enable Ligatures
font-size(16px) # convert font size px to rem
========================================================================== */
@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
@font-face {
font-family: quote($font-name);
src: url('../' + $file-name + '.eot');
src:
url('../' + $file-name + '.eot?#iefix') format('embedded-opentype'),
url('../' + $file-name + '.woff') format('woff'),
url('../' + $file-name + '.ttf') format('truetype'),
url('../' + $file-name + '.svg##{$font-name}') format('svg');
font-weight: $weight;
font-style: $style;
}
}
@mixin better-font() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
//vertical-align: middle;
}
@mixin ligature() {
//-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
//-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
//-o-font-feature-settings: "liga";
//font-feature-settings: "liga";
@include prefixProperty(font-feature-settings, "liga");
}
@mixin font-size($size) {
@if (validate($size, measure)) { //pixel fallback
font-size: #{$size};
}
@else if (validate($size, number)) {
font-size: #{$size}px;
}
@else {
@warn "Invalid font-size Unit!";
}
font-size: rem($size);
}
/* ==========================================================================
# Border Radius
Usage:
border-radius(3)
border-radius-separate(2px, 6px, 8px, 4px)
========================================================================== */
@mixin border-radius($radius...) {
@if length($radius) > 1 {
$border-radius-values: ();
$border-radius-REMvalues: ();
$dontUseREM: false;
@for $value from 1 through length($radius) {
$nthValue: nth($radius, $value);
@if (validate($nthValue, measure)) and not(validate($nthValue, number)) {
$border-radius-values: append($border-radius-values, #{$nthValue});
$border-radius-REMvalues: append($border-radius-REMvalues, rem($nthValue));
}
@else if (validate($nthValue, number)) {
@if ($nthValue == 0) {
$border-radius-values: append($border-radius-values, 0);
$border-radius-REMvalues: append($border-radius-REMvalues, 0);
}
@else {
$border-radius-values: append($border-radius-values, #{$nthValue}px);
$border-radius-REMvalues: append($border-radius-REMvalues, rem($nthValue));
}
//@include prefixProperty(border-radius, rem($nthValue));
}
@else if (unit($nthValue) == "%") {
$dontUseREM: true;
@if ($nthValue == 0%) or ($nthValue == "0%") {
$border-radius-values: append($border-radius-values, 0);
}
@else {
$border-radius-values: append($border-radius-values, $nthValue);
}
}
@else {
@warn "border-radius: " + $value validate($nthValue, unit) + " Error with the rem conversion: unit measure is not valid!";
}
}
@if ($dontUseREM) {
@include prefixProperty(border-radius, $border-radius-values);
@include prefixProperty(background-clip, padding-box); // keeps background from busting out of border
}
@else {
@include prefixProperty(border-radius, $border-radius-values);
@include prefixProperty(border-radius, $border-radius-REMvalues);
@include prefixProperty(background-clip, padding-box); // keeps background from busting out of border
}
}
@else if (length($radius) == 1) {
$onlyOne: nth($radius, 1);
@if (validate($onlyOne, measure)) and not(validate($onlyOne, number)) and not(unit(nth($radius, 1)) == "%") {
@include prefixProperty(border-radius, #{$onlyOne});
@include prefixProperty(border-radius, rem($onlyOne));
@include prefixProperty(background-clip, padding-box); // keeps background from busting out of border
}
@else if (validate($onlyOne, number)) {
@include prefixProperty(border-radius, #{$onlyOne}px);
@include prefixProperty(border-radius, rem($onlyOne));
@include prefixProperty(background-clip, padding-box); // keeps background from busting out of border
}
@else if (unit(nth($radius, 1)) == "%") {
@include prefixProperty(border-radius, $onlyOne);
@include prefixProperty(background-clip, padding-box); // keeps background from busting out of border
}
@else {
@warn "border-radius: " $onlyOne validate($onlyOne, unit) "Error with the rem conversion: unit measure is not valid!";
}
}
@else {
@warn "border-radius: Error with the rem conversion: no items to convert!";
}
}
@mixin border-radius-separate($top-left-radius:0, $top-right-radius:0, $bottom-right-radius:0, $bottom-left-radius:0) {
@include border-radius($top-left-radius, $top-right-radius, $bottom-right-radius, $bottom-left-radius);
}
/* ==========================================================================
# Box Shadow
Usage: @include box-shadow(...)
========================================================================== */
@mixin box-shadow($args...) {
@include prefixProperty(box-shadow, #{$args});
}
/* ==========================================================================
# Text Shadow
Usage: @include text-shadow(...)
========================================================================== */
@mixin text-shadow($args...) {
@include prefixProperty(text-shadow, #{$args}, false, false, false, false);
}
/* ==========================================================================
# Keyframes animation
Usage:
@include keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}
.element {
width: 100px;
height: 100px;
background: black;
@include animation('slide-down 5s 3');
}
========================================================================== */
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@keyframes #{$animation-name} {
@content;
}
}
@mixin animation($arguments) {
@include prefixProperty(animation, $arguments);
}
/* ==========================================================================
# Material Animations
Usage:
@include material-animation-default();
========================================================================== */
@mixin material-animation-fast-out-slow-in($duration:0.2s) {
transition-duration: $duration;
transition-timing-function: $animation-curve-fast-out-slow-in;
}
@mixin material-animation-linear-out-slow-in($duration:0.2s) {
transition-duration: $duration;
transition-timing-function: $animation-curve-linear-out-slow-in;
}
@mixin material-animation-fast-out-linear-in($duration:0.2s) {
transition-duration: $duration;
transition-timing-function: $animation-curve-fast-out-linear-in;
}
@mixin material-animation-default($duration:0.2s) {
transition-duration: $duration;
transition-timing-function: $animation-curve-default;
}
/* ==========================================================================
# Gradients
Usage:
@include linear-gradient(...)
@include radial-gradient(...)
========================================================================== */
@mixin linear-gradient($args...) {
@include prefixValue(background-image, linear-gradient(#{$args}));
}
@mixin radial-gradient($args...) {
@include prefixValue(background-image, radial-gradient(#{$args}));
}
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Opera 12
background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
}
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
background-image: -webkit-linear-gradient(to top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient(to top, $start-color $start-percent, $end-color $end-percent); // Opera 12
background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
}
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
background-repeat: repeat-x;
background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
}
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient(to left, $start-color, $mid-color $color-stop, $end-color);
background-image: -o-linear-gradient(to left, $start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient(to left, $start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
background-repeat: no-repeat;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
}
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
background-image: radial-gradient(circle, $inner-color, $outer-color);
background-repeat: no-repeat;
}
@mixin gradient-striped($color: rgba(255,255,255,0.15), $angle: 45deg) {
background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}
//http://tympanus.net/codrops/css_reference/repeating-radial-gradient/
@mixin repeating-radial-gradient($args...) {
@include prefixValue(background-image, repeating-radial-gradient(#{$args}));
}
/* ==========================================================================
# Transforms
Usage:
@include transform(...) # generic transform
@include rotate(...) #
@include scale(...)
@include translate(...)
@include skew(...)
@include transform-origin(...)
========================================================================== */
@mixin transform($transforms...) {
@include prefixValue(transform, $transforms);
}
@mixin rotate($deg) {
@include transform(rotate(#{$deg}deg));
}
@mixin scale($scale) {
@include transform(scale($scale));
}
@mixin translate($x: 0, $y: 0) {
@if (is-percentage($x) AND $y==0) {
@include transform(translate($x, 0));
}
@else if (is-percentage($y) AND $x==0) {
@include transform(translate(0, $y));
}
@else if (is-percentage($x) AND is-percentage($y)) {
@include transform(translate($x, $y));
}
@else if (is-int($x) AND is-int($y)) {
@include transform(translate(#{$x}px, #{$y}px));
}
}
@mixin skew($x: 0, $y: 0) {
@include transform(skew(#{$x}deg, #{$y}deg));
}
@mixin transform-origin($origin) {
-moz-transform-origin: $origin;
-o-transform-origin: $origin;
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
/* ==========================================================================
# Positions
Usage:
@include position(absolute, $top: 10px, $left: 10px);
========================================================================== */
@mixin position($type, $top: null, $right: null, $bottom: null, $left: null) {
position: $type;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
/* ==========================================================================
# Transition
Usage:
a {
color: gray;
@include transition(color .3s ease);
}
========================================================================== */
@mixin transition($args...) {
@include prefixProperty(transition, #{$args});
}
@mixin transition-property($args...) {
@include prefixProperty(transition-property, #{$args});
}
@mixin transition-duration($duration...) {
@include prefixProperty(transition-duration, #{$duration});
}
@mixin transition-timing-function($timing...) {
@include prefixProperty(transition-timing-function, #{$timing});
}
@mixin transition-delay($delay...) {
@include prefixProperty(transition-delay, #{$delay});
}
/* ==========================================================================
# Easing http://cubic-bezier.com/
Usage:
@include transition(top 500ms $easeInOutCubic); # Cubic
@include transition(top 500ms $easeInOut); # Circ
@include transition(top 500ms $easeInOutExpo); # Expo
@include transition(top 500ms $easeInOutQuad); # Quad
@include transition(top 500ms $easeInOutQuart); # Quart
@include transition(top 500ms $easeInOutQuint); # Quint
@include transition(top 500ms $easeInOutSine); # Sine
@include transition(top 500ms $easeInOutBack); # Back
@include transition(top 500ms $easeInOutFast); # Ease tFast
@include transition(top 500ms $authenticMotion); # Authentic Motion
========================================================================== */
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$easeInOutFast: cubic-bezier(1, 0, 0, 1);
$authenticMotion: cubic-bezier(0.4, 0, 0.2, 1);
/* ==========================================================================
# Flexbox Containers
info:
The 'flex' value causes an element to generate a block-level flex
container box.
The 'inline-flex' value causes an element to generate a inline-level
flex container box.
usage:
@extend %flexbox
@extend %inline-flex
========================================================================== */
@mixin flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin inline-flex {
display: -webkit-inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
/* ==========================================================================
# Flexbox Direction
info:
The 'flex-direction' property specifies how flex items are placed in
the flex container, by setting the direction of the flex container's
main axis. This determines the direction that flex items are laid out in.
usage:
@include flex-direction(row|row-reverse|column|column-reverse|initial|inherit)
@include flex-dir(row|row-reverse|column|column-reverse|initial|inherit) # Shorter version
========================================================================== */
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
}
@else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
}
@else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
}
@else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
@mixin flex-dir($args...) {
@include flex-direction($args...);
}
/* ==========================================================================
# Flexbox Wrap
info:
The 'flex-wrap' property controls whether the flex container is single-line
or multi-line, and the direction of the cross-axis, which determines
the direction new lines are stacked in.
usage:
@include flex-wrap(nowrap | wrap | wrap-reverse)
========================================================================== */
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: wrap;
@if $value == nowrap {
-ms-flex-wrap: none;
}
@else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
/* ==========================================================================
# Flexbox Flow
info:
The 'flex-flow' property is a shorthand for setting the 'flex-direction'
and 'flex-wrap' properties, which together define the flex container's
main and cross axes.
usage:
@include flex-flow(flex-direction | flex-wrap)
========================================================================== */
@mixin flex-flow($values: (row nowrap)) {
@include prefixProperty(flex-flow, $values);
}
/* ==========================================================================
# Flexbox Order
info:
The 'order' property controls the order in which flex items appear within
their flex container, by assigning them to ordinal groups.
usage:
@include flex-order(1)
========================================================================== */
@mixin flex-order($int: 0) {
-webkit-box-ordinal-group: $int + 1;
@include prefixProperty(order, $int);
}
/* ==========================================================================
# Flexbox Grow
info:
The 'flex-grow' property sets the flex grow factor. Negative numbers
are invalid.
usage:
@include flex-grow(1)
========================================================================== */
@mixin flex-grow($int: 0) {
-webkit-box-flex: $int;
-ms-flex-positive: $int;
@include prefixProperty(flex-grow, $int);
}
/* ==========================================================================
# Flexbox Shrink
info:
The 'flex-shrink' property sets the flex shrink factor. Negative numbers
are invalid.
usage:
@include flex-shrink(1)
========================================================================== */
@mixin flex-shrink($int: 1) {
-ms-flex-negative: $int;
@include prefixProperty(flex-shrink, $int);
}
/* ==========================================================================
# Flexbox Basis
info:
The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
usage:
@include flex-basis(auto)
========================================================================== */
@mixin flex-basis($value: auto) {
@include prefixProperty(flex-basis, $value);
-ms-flex-preferred-size: $value;
}
/* ==========================================================================
# Flexbox "Flex" (shorthand)
info:
The 'flex' property specifies the modules of a flexible length: the
flex grow factor and flex shrink factor, and the flex basis. When an
element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is
not a flex item, 'flex' has no effect.
usage:
@include flex( none | flex-grow | flex-shrink | flex-basis)
========================================================================== */
@mixin flex($fg: 1, $fs: null, $fb: null) {
// Set a variable to be used by box-flex properties
$fg-boxflex: $fg;
// Box-Flex only supports a flex-grow value so let's grab the
// first item in the list and just return that.
@if type-of($fg) == 'list' {
$fg-boxflex: nth($fg, 1);
}
-webkit-box-flex: $fg-boxflex;
-moz-box-flex: $fg-boxflex;
@include prefixProperty(flex, $fg $fs $fb);
}
/* ==========================================================================
# Flexbox Justify Content
info:
The 'justify-content' property aligns flex items along the main axis
of the current line of the flex container. This is done after any flexible
lengths and any auto margins have been resolved. Typically it helps distribute
extra free space leftover when either all the flex items on a line are
inflexible, or are flexible but have reached their maximum size. It also
exerts some control over the alignment of items when they overflow the line.
Note: 'space-*' values not supported in older syntaxes.
usage:
@include justify-content(flex-start | flex-end | center | space-between | space-around)
========================================================================== */
@mixin justify-content($value: flex-start) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
}
@else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
}
@else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
}
@else if $value == space-around {
-ms-flex-pack: distribute;
}
@else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
//-webkit-justify-content: $value;
//-moz-justify-content: $value;
//justify-content: $value;
@include prefixProperty(justify-content, $value);
}
// Shorter version:
@mixin flex-just($args...) {
@include justify-content($args...);
}
/* ==========================================================================
# Flexbox Align Items
info:
Flex items can be aligned in the cross axis of the current line of the
flex container, similar to 'justify-content' but in the perpendicular
direction. 'align-items' sets the default alignment for all of the flex
container's items, including anonymous flex items. 'align-self' allows
this default alignment to be overridden for individual flex items. (For
anonymous flex items, 'align-self' always matches the value of 'align-items'
on their associated flex container.)
usage:
@include align-items(flex-start | flex-end | center | baseline | stretch)
========================================================================== */
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
}
@else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
}
@else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
//-webkit-align-items: $value;
//-moz-align-items: $value;
//align-items: $value;
@include prefixProperty(align-items, $value);
}
/* ==========================================================================
# Flexbox Align Self
info:
Center the alignments for all the items of the flexible <div> element:
usage:
@include align-self(auto | flex-start | flex-end | center | baseline | stretch)
========================================================================== */
@mixin align-self($value: auto) {
// No Webkit Box Fallback.
//-webkit-align-self: $value;
//-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
}
@else if $value == flex-end {
-ms-flex-item-align: end;
}
@else {
-ms-flex-item-align: $value;
}
//align-self: $value;
@include prefixProperty(align-self, $value);
}
/* ==========================================================================
# Flexbox Align Content
info:
The 'align-content' property aligns a flex container's lines within the
flex container when there is extra space in the cross-axis, similar to
how 'justify-content' aligns individual items within the main-axis. Note,
this property has no effect when the flexbox has only a single line.
usage:
@include align-content(flex-start | flex-end | center | space-between | space-around | stretch)
========================================================================== */
@mixin align-content($value: stretch) {
// No Webkit Box Fallback.
//-webkit-align-content: $value;
//-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
}
@else if $value == flex-end {
-ms-flex-line-pack: end;
}
@else {
-ms-flex-line-pack: $value;
}
//align-content: $value;
@include prefixProperty(align-content, $value);
}
/* ==========================================================================
# Clearfix
usage:
@include clearfix
========================================================================== */
@mixin clearfix() {
& {
*zoom: 1;
}
&::before,
&::after {
content: "";
display: table;
}
&::after {
clear: both;
}
}
/* ==========================================================================
# Material Design Custom Shadow
usage:
@include customShadow(1)
========================================================================== */
$level: 1;
@mixin customShadow($level) {
@include transition(box-shadow 0.3s ease-in-out);
@if $level == 1 {
@include box-shadow(0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24));
}
@else if $level == 2 {
@include box-shadow(0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23));
}
@else if $level == 3 {
@include box-shadow(0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23));
}
@else if $level == 4 {
@include box-shadow(0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22));
}
@else if $level == 5 {
@include box-shadow(0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22));
}
}
/* ==========================================================================
# Material Shadow
usage:
@include focus-shadow()
========================================================================== */
@mixin focus-shadow() {
@include box-shadow(0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36));
}
@mixin shadow-2dp() {
@include box-shadow(0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity));
}
@mixin shadow-3dp() {
@include box-shadow(0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity));
}
@mixin shadow-4dp() {
@include box-shadow(0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity));
}
@mixin shadow-6dp() {
@include box-shadow(0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity));
}
@mixin shadow-8dp() {
@include box-shadow(0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity));
}
@mixin shadow-16dp() {
@include box-shadow(0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity));
}
@mixin shadow-24dp() {
@include box-shadow(0 9px 46px 8px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 0 11px 15px -7px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), 0 24px 38px 3px rgba(0, 0, 0, $shadow-key-umbra-opacity));
}
/* ==========================================================================
# Trucane
usage:
@include trucane
========================================================================== */
@mixin trucane() {
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment