// Color Functions // -------------------------------------------------- @function get-color($color, $tone: base) { @return red; } @function inverse($color-value) { @if (lightness($color-value) > 70) { @return #000; } @else { @return #fff; } } @function darken-or-lighten($color-value, $amount:8%) { // lightness is a percent value, 0% darkest, 100% lightest $lightness-percent: lightness($color-value); @if ($lightness-percent > 80) { // really light foreground color, so really darken it up @return darken($color-value, ($amount * 2)); } @if ($lightness-percent < 35) { // dark foreground color, so light it up @return lighten($color-value, $amount); } // default to darken @return darken($color-value, $amount); } @function color($color-name) { @return map-get($colors, $color-name); } @function auxiliary-colors() { // get a map of all the colors, except "primary" @return map-remove($colors, primary); } // Appearance // -------------------------------------------------- @mixin appearance($val) { -webkit-appearance: $val; -moz-appearance: $val; } // User Select None // -------------------------------------------------- @mixin user-select-none() { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } // Input Placeholder // -------------------------------------------------- @mixin placeholder($color: #999, $text-indent: 0) { &::-moz-placeholder { // Firefox 19+ color: $color; } &:-ms-input-placeholder { color: $color; } &::-webkit-input-placeholder { color: $color; // Safari placeholder margin issue text-indent: $text-indent; } } // String Replace Function // -------------------------------------------------- @function str-replace($string, $search, $replace: '') { $index: str-index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } @return $string; } // URL Encode Function // -------------------------------------------------- @function url-encode($val) { @return str-replace($val, ' ', '%20'); } // SVG Background Image Mixin // -------------------------------------------------- @mixin svg-background-image($svg) { $url: url-encode($svg); background-image: url("data:image/svg+xml;charset=utf-8,#{$url}"); } // calc() // -------------------------------------------------- @mixin calc($property, $expression) { #{$property}: -webkit-calc(#{$expression}); #{$property}: calc(#{$expression}); }