javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(css): update rtl function to prepend selectors with host-context properly (#18315)

Browse Source 
references #17012
This commit is contained in:
Brandy Carney
2019-05-21 14:42:57 -04:00
committed by GitHub
parent 6252458d49
commit 00a27dc37b
2 changed files with 59 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
core/src/themes/ionic.functions.string.scss
View File

@ -1,9 +1,9 @@
// String Util Functions
// --------------------------------------------------
// String Utility Functions
// --------------------------------------------------------------------------------
// String Replace Function
// --------------------------------------------------
// --------------------------------------------------------------------------------
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@ -16,7 +16,8 @@
}
// String Split Function
// --------------------------------------------------
// --------------------------------------------------------------------------------
@function str-split($string, $separator) {
// empty array/list
@ -41,8 +42,8 @@
}
// Str Extract Function
// --------------------------------------------------
// String Extract Function
// --------------------------------------------------------------------------------
@function str-extract($string, $start, $end) {
$start-index: str-index($string, $start);
@ -60,8 +61,8 @@
}
// Str Contains Function
// --------------------------------------------------
// String Contains Function
// --------------------------------------------------------------------------------
@function str-contains($string, $needle) {
@if (type-of($string) == string) {
@ -73,7 +74,7 @@
// URL Encode Function
// --------------------------------------------------
// --------------------------------------------------------------------------------
@function url-encode($val) {
$spaces: str-replace($val, " ", "%20");
@ -82,28 +83,58 @@
}
// Add Selector
// --------------------------------------------------
// Used to cleanly add selectors to :host and :host()
// 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]).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, $shadowDom: false) {
@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(") {
$updated-host: str-replace($selector, ":host(", ":host(#{$addHostSelector}");
$list: append($list, $updated-host, comma);
$new-element: ();
$elements: str-split($selector, " ");
@each $element in $elements {
@if str-contains($element, ":host(") {
$updated-element: str-replace($element, ")", "");
$updated-element: str-replace($updated-element, ":host(", ":host-context(#{$addHostSelector})");
$new-element: append($new-element, $updated-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") {
$list: append($list, ":host(#{$addHostSelector}) + b", comma);
} @else if $shadowDom == true {
$list: append($list, ":host(#{$addHostSelector}) #{$selector}", comma);
$list: append($list, ":host-context(#{$addHostSelector})", 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 {
// TODO host-context should be for scoped only
$list: append($list, "#{$addHostSelector} #{$selector}", comma);
$list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
}
}

20
core/src/themes/ionic.mixins.scss
View File

@ -134,25 +134,19 @@
// Text Direction - ltr / rtl
// $app-direction: multi | rtl | ltr | null (default)
// multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
// rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
// ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
// null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
//
// CSS defaults to use the ltr css, and adds [dir=rtl] selectors
// to override ltr defaults.
// ----------------------------------------------------------
@mixin multi-dir() {
@content;
// @if $app-direction == multi {
// $root: #{&};
// @at-root [dir] {
// #{$root} {
// @content;
// }
// $root: #{&};
// @at-root [dir] {
// #{$root} {
// @content;
// }
// } @else {
// @content;
// }
}