Files
ionic-framework/ionic/util/mixins.scss
2015-09-23 11:31:33 -05:00

130 lines
2.6 KiB
SCSS

// 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 * 2);
}
// 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});
}