Skip to content

Commit 9b711fa

Browse files
dpaloudpalou
authored
Merge pull request #3912 from crazyserver/MOBILE-3947
MOBILE-3947 ionic: Reimport mixins due to :dir rule problems
2 parents d740f60 + 5dbfc07 commit 9b711fa

File tree

4 files changed

+115
-54
lines changed

4 files changed

+115
-54
lines changed

‎src/theme/helpers/ionic.components.mixins.scss

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
* Imported ionic mixins for SCSS from different components
33
* ----------------------------------------------------------------------------
44
* Extracted from
5-
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/grid/grid.mixins.scss
6-
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/item/item.mixins.scss
5+
* https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/grid/grid.mixins.scss
76
*/
87

98
// Responsive Mixins
@@ -36,13 +35,3 @@
3635
}
3736
}
3837
}
39-
40-
41-
// Item Mixins
42-
// --------------------------------------------------
43-
44-
@mixin item-push-svg-url($fill) {
45-
$item-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$fill}'/></svg>";
46-
47-
@include svg-background-image($item-detail-push-svg, true);
48-
}

‎src/theme/helpers/ionic.functions.color.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Imported ionic color functions for SCSS
33
* ----------------------------------------------------------------------------
44
* Extracted from
5-
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.functions.color.scss
5+
* https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/ionic.functions.color.scss
66
*/
77

88
// Gets the active color's css variable from a variation. Alpha is optional.

‎src/theme/helpers/ionic.functions.string.scss

Lines changed: 63 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Imported ionic string functions for SCSS
33
* ----------------------------------------------------------------------------
44
* Extracted from
5-
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.functions.string.scss
5+
* https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/ionic.functions.string.scss
66
*/
77

88

@@ -93,24 +93,37 @@
9393
// Add Root Selector
9494
// --------------------------------------------------------------------------------
9595
// Adds a root selector using host based on the selector passed
96+
// $root: The selector that needs to be updated to include the $addHostSelector.
97+
// - Example: ion-button
98+
// $addHostSelector: The selector that is used to add the host to the $root selector.
99+
// - Example: [dir=rtl]
100+
// $useHostContext: Whether to use host-context or not. Defaults to true.
96101
// --------------------------------------------------------------------------------
97102

98-
@function add-root-selector($root, $addHostSelector) {
103+
104+
@function add-root-selector($root, $addHostSelector, $useHostContext: true) {
99105
$selectors: str-split($root, ",");
100106

101107
$list: ();
102108

103109
@each $selector in $selectors {
104110
// If the selector contains :host( it means it is targeting a class on the host
105111
// element so we need to change how we target it:
112+
// Example with `useHostContext=true`
106113
// @include add-root-selector(":host(.fixed)", "[dir=rtl]")
107114
// --> :host-context([dir=rtl]):host(.fixed)
108115
// --> :host-context([dir=rtl]).fixed
116+
// ---
117+
// Example with `useHostContext=false`
118+
// @include add-root(":host(.fixed)", ":dir(rtl)", false)
119+
// --> :host(.fixed:dir(rtl))
109120
@if str-contains($selector, ":host(") {
110-
// @include add-root-selector(":host(.fixed)", "[dir=rtl]")
111-
// --> :host-context([dir=rtl]):host(.fixed)
112-
$shadow-element: str-replace($selector, ":host(", ":host-context(#{$addHostSelector}):host(");
113-
$list: append($list, $shadow-element, comma);
121+
@if $useHostContext {
122+
// @include add-root-selector(":host(.fixed)", "[dir=rtl]")
123+
// --> :host-context([dir=rtl]):host(.fixed)
124+
$shadow-element: str-replace($selector, ":host(", ":host-context(#{$addHostSelector}):host(");
125+
$list: append($list, $shadow-element, comma);
126+
}
114127

115128
$new-element: ();
116129
$elements: str-split($selector, " ");
@@ -125,19 +138,28 @@
125138
$scoped-element: str-replace($scoped-element, ")", "");
126139
$scoped-element: str-replace($scoped-element, ":host(", "");
127140

128-
// Add the class back inside of host with the rtl selector:
129-
// .fixed -> :host-context([dir=rtl]).fixed
130-
$scoped-element: str-replace($scoped-element, $scoped-element, ":host-context(#{$addHostSelector})#{$scoped-element}");
141+
// Add the class back inside of host with the addHostSelector:
142+
@if $useHostContext {
143+
// .fixed -> :host-context([dir=rtl]).fixed
144+
$scoped-element: str-replace($scoped-element, $scoped-element, ":host-context(#{$addHostSelector})#{$scoped-element}");
145+
} @else {
146+
// .fixed -> :host(.fixed:dir(rtl))
147+
$scoped-element: str-replace($scoped-element, $scoped-element, ":host(#{$scoped-element}#{$addHostSelector})");
148+
}
131149

132150
// @include add-root-selector(":host(.fixed)", "[dir=rtl]")
133151
// --> :host-context([dir=rtl]).fixed
152+
// @include add-root(":host(.fixed)", ":dir(rtl)", false)
153+
// --> :host(.fixed:dir(rtl))
134154
$new-element: append($new-element, $scoped-element, space);
135155
} @else {
136-
// Add back any selectors that followed the host after transforming the
137-
// first selector:
138-
// :host(.fixed) ::slotted(ion-icon)
156+
// Add back any selectors that followed the host
157+
// after transforming the first selector:
158+
// @include add-root-selector(":host(.fixed) ::slotted(ion-icon)", "[dir=rtl]")
139159
// --> :host-context([dir=rtl]):host(.fixed) ::slotted(ion-icon)
140160
// --> :host-context([dir=rtl]).fixed ::slotted(ion-icon)
161+
// @include add-root(":host(.fixed) ::slotted(ion-icon)", ":dir(rtl)", false)
162+
// --> :host(.fixed:dir(rtl)) ::slotted(ion-icon)
141163
$new-element: append($new-element, $element, space);
142164
}
143165
}
@@ -148,24 +170,38 @@
148170
// element so we can change it to look for host-context
149171
// @include add-root-selector(":host", "[dir=rtl]")
150172
// --> :host-context([dir=rtl])
151-
// --> :host:dir(rtl)
173+
// @include add-root(":host", ":dir(rtl)", false)
174+
// --> :host(:dir(rtl))
152175
} @else if str-contains($selector, ":host") {
153176
$new-element: ();
154177
$elements: str-split($selector, " ");
155178

156179
@each $element in $elements {
157180
@if str-contains($element, ":host") {
181+
$updated-element: '';
182+
158183
// Replace the :host with the addHostSelector:
159-
// :host -> :host-context([dir=rtl])
160-
$updated-element: str-replace($element, ":host", ":host-context(#{$addHostSelector})");
184+
@if $useHostContext {
185+
// :host -> :host-context([dir=rtl])
186+
$updated-element: str-replace($element, ":host", ":host-context(#{$addHostSelector})");
187+
} @else {
188+
// :host -> :host(:dir(rtl))
189+
$updated-element: str-replace($element, ":host", ":host(#{$addHostSelector})");
190+
}
161191

162192
// Add the final selector after all transformations:
163-
// :host -> :host-context([dir=rtl])
193+
// @include add-root-selector(":host", "[dir=rtl]")
194+
// --> :host-context([dir=rtl])
195+
// @include add-root(":host", ":dir(rtl)", false)
196+
// --> :host(:dir(rtl))
164197
$new-element: append($new-element, $updated-element, space);
165198
} @else {
166-
// Add back any selectors that followed the host after transforming the
167-
// first selector:
168-
// :host ::slotted(ion-icon) -> :host-context([dir=rtl]) ::slotted(ion-icon)
199+
// Add back any selectors that followed the host
200+
// after transforming the first selector:
201+
// @include add-root-selector(":host ::slotted(ion-icon)", "[dir=rtl]")
202+
// --> :host-context([dir=rtl]) ::slotted(ion-icon)
203+
// @include add-root(":host ::slotted(ion-icon)", ":dir(rtl)", false)
204+
// --> :host(:dir(rtl)) ::slotted(ion-icon)
169205
$new-element: append($new-element, $element, space);
170206
}
171207
}
@@ -176,9 +212,15 @@
176212
// @include add-root-selector("ion-component", "[dir=rtl]")
177213
// --> :host-context([dir=rtl]) ion-component
178214
// --> [dir=rtl] ion-component
215+
// @include add-root("ion-component", ":dir(rtl)", false)
216+
// --> ion-component:dir(rtl)
179217
} @else {
180-
$list: append($list, "#{$addHostSelector} #{$selector}", comma);
181-
$list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
218+
@if ($useHostContext) {
219+
$list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
220+
$list: append($list, "#{$addHostSelector} #{$selector}", comma);
221+
} @else {
222+
$list: append($list, "#{$selector}#{$addHostSelector}", comma);
223+
}
182224
}
183225
}
184226

‎src/theme/helpers/ionic.mixins.scss

Lines changed: 50 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,43 @@
22
* Imported ionic mixins for SCSS
33
* ----------------------------------------------------------------------------
44
* Extracted from
5-
* https://github.com/ionic-team/ionic-framework/blob/master/core/src/themes/ionic.mixins.scss
5+
* https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/ionic.mixins.scss
66
*/
77

8+
/**
9+
* A heuristic that applies CSS to tablet
10+
* viewports.
11+
*
12+
* Usage:
13+
* @include tablet-viewport() {
14+
* :host {
15+
* background-color: green;
16+
* }
17+
* }
18+
*/
19+
@mixin tablet-viewport() {
20+
@media screen and (min-width: 768px) {
21+
@content;
22+
}
23+
}
24+
25+
/**
26+
* A heuristic that applies CSS to mobile
27+
* viewports (i.e. phones, not tablets).
28+
*
29+
* Usage:
30+
* @include mobile-viewport() {
31+
* :host {
32+
* background-color: blue;
33+
* }
34+
* }
35+
*/
36+
@mixin mobile-viewport() {
37+
@media screen and (max-width: 767px) {
38+
@content;
39+
}
40+
}
41+
842
@mixin input-cover() {
943
@include position(0, null, null, 0);
1044
@include margin(0);
@@ -240,28 +274,24 @@
240274
}
241275

242276
// If browser can support `:dir()`, then add the `:dir()` selectors.
243-
// @supports selector(:dir(rtl)) { // @ IMPOTANT NOTE: This has been removed because selector function is not supported in current SCSS
244-
// Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.
245-
// `:host-context()` is added:
246-
// - through the `add-root-selector()` function.
247-
// - first so that it takes precedence over `:dir()`.
248-
// For example,
249-
// - Firefox doesn't support `:host-context()`, but does support `:dir()`.
250-
// - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`
251-
// @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/
252-
@each $selector in $rootSplit {
253-
$dirSelector: "#{$selector}:dir(rtl)";
254-
// Group the selectors back into a single selector to optimize the output.
255-
$dirSelectors: append($dirSelectors, $dirSelector, comma);
256-
}
257-
258-
// Supported by Firefox.
259-
@if length($dirSelectors) > 0 {
260-
@at-root #{$dirSelectors} {
277+
@supports selector(:dir(rtl)) {
278+
// Adding :dir() in case the browser doesn't support `:host-context()` and does support `:dir()`.
279+
// `:host-context()` is added:
280+
// - through the `add-root-selector()` function.
281+
// - first so that it takes precedence over `:dir()`.
282+
// For example,
283+
// - Firefox doesn't support `:host-context()`, but does support `:dir()`.
284+
// - Safari doesn't support `:host-context()`, but Safari 16.4+ supports `:dir()`
285+
// @link https://webkit.org/blog/13966/webkit-features-in-safari-16-4/
286+
// -- However, there is a Webkit bug on v16 that prevents `:dir()` from working when
287+
// -- the app direction is changed dynamically. v17+ works fine.
288+
// -- @link https://bugs.webkit.org/show_bug.cgi?id=257133
289+
290+
// Supported by Firefox.
291+
@at-root #{add-root-selector($root, ":dir(rtl)", false)} {
261292
@content;
262293
}
263294
}
264-
//}
265295
}
266296

267297
@mixin ltr() {

0 commit comments

Comments
 (0)