mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix: remove :host-context
rtl selectors
We can support this now that Chrome 120-121 are stable. PiperOrigin-RevId: 606984234
This commit is contained in:
parent
6589b2ee4b
commit
f2ff86725c
@ -28,8 +28,8 @@ Current browsers and versions supported:
|
||||
|
||||
Browser | Version
|
||||
------- | -------
|
||||
Chrome | 112 +
|
||||
Edge | 112 +
|
||||
Chrome | 120 +
|
||||
Edge | 120 +
|
||||
Firefox | 119 +
|
||||
Safari* | 16.4 +
|
||||
|
||||
|
@ -324,17 +324,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
||||
inset-inline-start: var(--_focus-outline-width);
|
||||
}
|
||||
|
||||
// TODO(https://bugs.chromium.org/p/chromium/issues/detail?id=1420655):
|
||||
// remove :host and :host-context once Chrome supports :dir
|
||||
:host-context([dir='rtl']),
|
||||
:host([dir='rtl']) {
|
||||
.resizable .container {
|
||||
clip-path: inset(
|
||||
var(--_focus-outline-width) var(--_focus-outline-width) 0 0
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.resizable .container:dir(rtl) {
|
||||
clip-path: inset(
|
||||
var(--_focus-outline-width) var(--_focus-outline-width) 0 0
|
||||
|
@ -171,13 +171,6 @@ $_indeterminate-duration: 2s;
|
||||
calc($_indeterminate-duration * 2);
|
||||
}
|
||||
|
||||
// TODO(https://bugs.chromium.org/p/chromium/issues/detail?id=1420655):
|
||||
// remove :host and :host-context once Chrome supports :dir
|
||||
:host-context([dir='rtl']),
|
||||
:host([dir='rtl']) {
|
||||
transform: scale(-1);
|
||||
}
|
||||
|
||||
:host(:dir(rtl)) {
|
||||
transform: scale(-1);
|
||||
}
|
||||
|
@ -201,11 +201,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
|
||||
}
|
||||
|
||||
// rtl for active track clipping
|
||||
@include _get-rtl-selectors('.track', '::after') {
|
||||
.track:dir(rtl)::after {
|
||||
clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
|
||||
}
|
||||
|
||||
@include _get-rtl-selectors('.tickmarks', '::after') {
|
||||
.tickmarks:dir(rtl)::after {
|
||||
clip-path: inset(0 $_active-track-start-clip 0 $_active-track-end-clip);
|
||||
}
|
||||
|
||||
@ -440,7 +440,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
|
||||
}
|
||||
|
||||
// in 'rtl', clip right side of "lesser" input
|
||||
@include _get-rtl-selectors('.ranged input.start') {
|
||||
.ranged input.start:dir(rtl) {
|
||||
clip-path: inset(0 0 0 $_clip-to-end);
|
||||
}
|
||||
|
||||
@ -450,7 +450,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
|
||||
}
|
||||
|
||||
// in 'rtl', clip left side of "greater" input
|
||||
@include _get-rtl-selectors('.ranged input.end') {
|
||||
.ranged input.end:dir(rtl) {
|
||||
clip-path: inset(0 $_clip-to-start 0 0);
|
||||
}
|
||||
|
||||
@ -477,28 +477,6 @@ $_md-sys-shape: tokens.md-sys-shape-values();
|
||||
}
|
||||
}
|
||||
|
||||
// Creates a mixin of rtl selectors to construct distinct rulesets. If `:dir` is
|
||||
// supported, then it will take precedence over `:host-context` via a `@supports
|
||||
// not selector(:dir(rtl))` at-rule. Seprating rulesets ensure they are not
|
||||
// dropped on browsers where one is not supported;
|
||||
// Note, `:where` cannot be used to create compound selectors that contain
|
||||
// pseudo elements
|
||||
// (e.g. this does not work: `:where(:host([dir="rtl"]) .foo::after)`),
|
||||
@mixin _get-rtl-selectors($selector: '', $suffix: '') {
|
||||
$host-context-selectors: ':host-context([dir="rtl"]) #{$selector}#{$suffix}, :host([dir="rtl"]) #{$selector}#{$suffix}';
|
||||
$dir-selector: '#{$selector}:dir(rtl)#{$suffix}';
|
||||
|
||||
@supports not selector(:dir(rtl)) {
|
||||
#{$host-context-selectors} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
#{$dir-selector} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Returns a background-image with sized circular ticks of the given color.
|
||||
@function _get-tick-image($color) {
|
||||
@return radial-gradient(
|
||||
@ -537,10 +515,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
|
||||
transform: translateX(var(--_x-translate));
|
||||
}
|
||||
|
||||
@include _get-rtl-selectors(
|
||||
'input.#{$start-or-end}',
|
||||
'::-webkit-slider-thumb'
|
||||
) {
|
||||
input.#{$start-or-end}:dir(rtl)::-webkit-slider-thumb {
|
||||
transform: translateX(calc(-1 * var(--_x-translate)));
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user