162 lines
5.2 KiB
SCSS
162 lines
5.2 KiB
SCSS
/**
|
|
* Imported ionic string functions for SCSS
|
|
* ----------------------------------------------------------------------------
|
|
* Extracted from
|
|
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.functions.string.scss
|
|
*/
|
|
|
|
|
|
// String Utility Functions
|
|
// --------------------------------------------------------------------------------
|
|
|
|
// 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;
|
|
}
|
|
|
|
// String Split Function
|
|
// --------------------------------------------------------------------------------
|
|
|
|
|
|
@function str-split($string, $separator) {
|
|
// empty array/list
|
|
$split-arr: ();
|
|
// first index of separator in string
|
|
$index: str-index($string, $separator);
|
|
// loop through string
|
|
@while $index != null {
|
|
// get the substring from the first character to the separator
|
|
$item: str-slice($string, 1, $index - 1);
|
|
// push item to array
|
|
$split-arr: append($split-arr, $item);
|
|
// remove item and separator from string
|
|
$string: str-slice($string, $index + 1);
|
|
// find new index of separator
|
|
$index: str-index($string, $separator);
|
|
}
|
|
// add the remaining string to list (the last item)
|
|
$split-arr: append($split-arr, $string);
|
|
|
|
@return $split-arr;
|
|
}
|
|
|
|
|
|
// String Extract Function
|
|
// --------------------------------------------------------------------------------
|
|
|
|
@function str-extract($string, $start, $end) {
|
|
$start-index: str-index($string, $start);
|
|
|
|
@if $start-index {
|
|
$post: str-slice($string, $start-index + str-length($start));
|
|
$end-index: str-index($post, $end);
|
|
|
|
@if $end-index {
|
|
@return str-slice($post, 1, $end-index - 1);
|
|
}
|
|
}
|
|
|
|
@return null;
|
|
}
|
|
|
|
|
|
// String Contains Function
|
|
// --------------------------------------------------------------------------------
|
|
|
|
@function str-contains($string, $needle) {
|
|
@if (type-of($string) == string) {
|
|
@return str-index($string, $needle) != null;
|
|
}
|
|
|
|
@return false;
|
|
}
|
|
|
|
|
|
// URL Encode Function
|
|
// --------------------------------------------------------------------------------
|
|
|
|
@function url-encode($val) {
|
|
$spaces: str-replace($val, " ", "%20");
|
|
$encoded: str-replace($spaces, "#", "%23");
|
|
@return $encoded;
|
|
}
|
|
|
|
|
|
// Add Root Selector
|
|
// --------------------------------------------------------------------------------
|
|
// Adds a root selector using host-context based on the selector passed
|
|
//
|
|
// Examples
|
|
// --------------------------------------------------------------------------------
|
|
// @include add-root-selector("[dir=rtl]", ":host")
|
|
// --> :host-context([dir=rtl])
|
|
//
|
|
// @include add-root-selector("[dir=rtl]", ":host(.fixed)")
|
|
// --> :host-context([dir=rtl]):host(.fixed)
|
|
// --> :host-context([dir=rtl]).fixed
|
|
//
|
|
// @include add-root-selector("[dir=rtl]", ":host(.tab-layout-icon-hide) ::slotted(ion-badge)")
|
|
// --> :host-context([dir=rtl]).tab-layout-icon-hide ::slotted(ion-badge)
|
|
//
|
|
// @include add-root-selector("[dir=rtl]", ".shadow")
|
|
// --> [dir=rtl] .shadow
|
|
// --> :host-context([dir=rtl]) .shadow
|
|
// --------------------------------------------------------------------------------
|
|
|
|
@function add-root-selector($root, $addHostSelector) {
|
|
$selectors: str-split($root, ",");
|
|
|
|
$list: ();
|
|
|
|
@each $selector in $selectors {
|
|
// If the selector contains :host( it means it is targeting a class on the host
|
|
// element so we need to change how we target it
|
|
@if str-contains($selector, ":host(") {
|
|
$shadow-element: str-replace($selector, ":host(", ":host-context(#{$addHostSelector}):host(");
|
|
$list: append($list, $shadow-element, comma);
|
|
|
|
$new-element: ();
|
|
$elements: str-split($selector, " ");
|
|
|
|
@each $element in $elements {
|
|
@if str-contains($element, ":host(") {
|
|
$scoped-element: $element;
|
|
|
|
@if str-contains($element, "))") {
|
|
$scoped-element: str-replace($scoped-element, "))", ")");
|
|
} @else {
|
|
$scoped-element: str-replace($scoped-element, ")", "");
|
|
}
|
|
$scoped-element: str-replace($scoped-element, ":host(", ":host-context(#{$addHostSelector})");
|
|
|
|
$new-element: append($new-element, $scoped-element, space);
|
|
} @else {
|
|
$new-element: append($new-element, $element, space);
|
|
}
|
|
}
|
|
|
|
$list: append($list, $new-element, comma);
|
|
// If the selector contains :host it means it is targeting just the host
|
|
// element so we can change it to look for host-context
|
|
} @else if str-contains($selector, ":host") {
|
|
$shadow-element: str-replace($selector, ":host", ":host-context(#{$addHostSelector})");
|
|
$list: append($list, $shadow-element, comma);
|
|
// If the selector does not contain host at all it is either a shadow
|
|
// or normal element so append both the dir check and host-context
|
|
} @else {
|
|
$list: append($list, "#{$addHostSelector} #{$selector}", comma);
|
|
$list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
|
|
}
|
|
}
|
|
|
|
@return $list;
|
|
}
|