@@ -199,16 +199,12 @@ $_md-sys-shape: tokens.md-sys-shape-values();
199
199
}
200
200
201
201
// rtl for active track clipping
202
- @each $_rtl-selectors in _get-rtl-selectors (' .track' , ' ::after' ) {
203
- #{$_rtl-selectors } {
204
- clip-path : inset (0 $_active-track-start-clip 0 $_active-track-end-clip );
205
- }
202
+ @include _get-rtl-selectors (' .track' , ' ::after' ) {
203
+ clip-path : inset (0 $_active-track-start-clip 0 $_active-track-end-clip );
206
204
}
207
205
208
- @each $_rtl-selectors in _get-rtl-selectors (' .tickmarks' , ' ::after' ) {
209
- #{$_rtl-selectors } {
210
- clip-path : inset (0 $_active-track-start-clip 0 $_active-track-end-clip );
211
- }
206
+ @include _get-rtl-selectors (' .tickmarks' , ' ::after' ) {
207
+ clip-path : inset (0 $_active-track-start-clip 0 $_active-track-end-clip );
212
208
}
213
209
214
210
:host ([disabled ]) .track ::after {
@@ -442,10 +438,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
442
438
}
443
439
444
440
// in 'rtl', clip right side of "lesser" input
445
- @each $_rtl-selector in _get-rtl-selectors (' .ranged input.start' ) {
446
- #{$_rtl-selector } {
447
- clip-path : inset (0 0 0 $_clip-to-end );
448
- }
441
+ @include _get-rtl-selectors (' .ranged input.start' ) {
442
+ clip-path : inset (0 0 0 $_clip-to-end );
449
443
}
450
444
451
445
// clip right side of "end" input
@@ -454,10 +448,8 @@ $_md-sys-shape: tokens.md-sys-shape-values();
454
448
}
455
449
456
450
// in 'rtl', clip left side of "greater" input
457
- @each $_rtl-selector in _get-rtl-selectors (' .ranged input.end' ) {
458
- #{$_rtl-selector } {
459
- clip-path : inset (0 $_clip-to-start 0 0 );
460
- }
451
+ @include _get-rtl-selectors (' .ranged input.end' ) {
452
+ clip-path : inset (0 $_clip-to-start 0 0 );
461
453
}
462
454
463
455
.onTop {
@@ -483,19 +475,26 @@ $_md-sys-shape: tokens.md-sys-shape-values();
483
475
}
484
476
}
485
477
486
- // Returns a list of rtl selectors to construct distinct rulesets. Seprating
487
- // rulesets ensure they are not dropped on browsers where one is not supported;
488
- // note, `:where` cannot be used to create compound selectors that contain
478
+ // Creates a mixin of rtl selectors to construct distinct rulesets. If `:dir` is
479
+ // supported, then it will take precedence over `:host-context` via a `@supports
480
+ // not selector(:dir(rtl))` at-rule. Seprating rulesets ensure they are not
481
+ // dropped on browsers where one is not supported;
482
+ // Note, `:where` cannot be used to create compound selectors that contain
489
483
// pseudo elements
490
484
// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
491
- @function _get-rtl-selectors ($selector : ' ' , $suffix : ' ' ) {
492
- @return (
493
- // TODO(b/279152429) remove selectors other than `:dir` when browser
494
- // support improves.
495
- ' :host-context([dir="rtl"]) #{$selector }#{$suffix } ' ,
496
- ' :host([dir="rtl"]) #{$selector }#{$suffix } ' ,
497
- ' #{$selector } :dir(rtl)#{$suffix } '
498
- );
485
+ @mixin _get-rtl-selectors ($selector : ' ' , $suffix : ' ' ) {
486
+ $host-context-selectors : ' :host-context([dir="rtl"]) #{$selector }#{$suffix } , :host([dir="rtl"]) #{$selector }#{$suffix } ' ;
487
+ $dir-selector : ' #{$selector } :dir(rtl)#{$suffix } ' ;
488
+
489
+ @supports not selector (:dir (rtl )) {
490
+ #{$host-context-selectors } {
491
+ @content ;
492
+ }
493
+ }
494
+
495
+ #{$dir-selector } {
496
+ @content ;
497
+ }
499
498
}
500
499
501
500
// Returns a background-image with sized circular ticks of the given color.
@@ -536,11 +535,10 @@ $_md-sys-shape: tokens.md-sys-shape-values();
536
535
transform : translateX (var (--_x-translate ));
537
536
}
538
537
539
- @each $_rtl-selectors
540
- in _get-rtl-selectors (' input.#{$start-or-end } ' , ' ::-webkit-slider-thumb' )
541
- {
542
- #{$_rtl-selectors } {
543
- transform : translateX (calc (-1 * var (--_x-translate )));
544
- }
538
+ @include _get-rtl-selectors (
539
+ ' input.#{$start-or-end } ' ,
540
+ ' ::-webkit-slider-thumb'
541
+ ) {
542
+ transform : translateX (calc (-1 * var (--_x-translate )));
545
543
}
546
544
}
0 commit comments