mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
113 lines
2.6 KiB
SCSS
113 lines
2.6 KiB
SCSS
|
|
// Util Mixins/Functions
|
|
|
|
// Appearance (not a CSS standard, does not autoprefix)
|
|
// --------------------------------------------------
|
|
|
|
@mixin appearance($val) {
|
|
-webkit-appearance: $val;
|
|
-moz-appearance: $val;
|
|
}
|
|
|
|
|
|
// 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}");
|
|
}
|
|
|
|
|
|
// Hairline
|
|
// --------------------------------------------------
|
|
|
|
@mixin hairline($placement, $line-color, $z-index: 999) {
|
|
// border-width: 1px will actually create 2 device pixels on retina
|
|
// this nifty trick sets an actual 1px border on hi-res displays
|
|
|
|
position: relative;
|
|
|
|
@if $placement == top {
|
|
&:before {
|
|
@if $line-color == none {
|
|
border-top: none;
|
|
|
|
} @else {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: auto;
|
|
left: 0;
|
|
z-index: $z-index;
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
content: '';
|
|
|
|
border-top: 1px solid $line-color;
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
|
|
border: none;
|
|
background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
|
|
background-position: bottom;
|
|
background-size: 100% 1px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
} @else if $placement == bottom {
|
|
&:after {
|
|
@if $line-color == none {
|
|
border-bottom: none;
|
|
|
|
} @else {
|
|
position: absolute;
|
|
top: auto;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: $z-index;
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
content: '';
|
|
|
|
border-bottom: 1px solid $line-color;
|
|
|
|
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
|
|
border: none;
|
|
background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
|
|
background-position: bottom;
|
|
background-size: 100% 1px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|