mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
111 lines
2.4 KiB
SCSS
111 lines
2.4 KiB
SCSS
|
|
// Color Mixins/Functions
|
|
// --------------------------------------------------
|
|
|
|
@function get-color($color, $tone: base) {
|
|
@return map-get(map-get($colors, $color), $tone);
|
|
}
|
|
|
|
@function inverse-tone($color) {
|
|
// For a lighter colored "base" the darker colored "inverse"
|
|
// the inverse-tone will be the "light" tone
|
|
|
|
// For a darker colored "base" the lighter colored "inverse"
|
|
// the inverse-tone will be the "dark" tone
|
|
|
|
$base: map-get(map-get($colors, $color), base);
|
|
$inverse: map-get(map-get($colors, $color), inverse);
|
|
$light: map-get(map-get($colors, $color), light);
|
|
$dark: map-get(map-get($colors, $color), dark);
|
|
|
|
$lightness: lightness($base) - lightness($inverse);
|
|
|
|
@return if($lightness < 0, $dark, $light);
|
|
}
|
|
|
|
|
|
|
|
// 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) {
|
|
$val: str-replace($val, ' ', '%20');
|
|
@return $val;
|
|
}
|
|
|
|
|
|
|
|
// 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});
|
|
}
|