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
|
Browser | Version
|
||||||
------- | -------
|
------- | -------
|
||||||
Chrome | 112 +
|
Chrome | 120 +
|
||||||
Edge | 112 +
|
Edge | 120 +
|
||||||
Firefox | 119 +
|
Firefox | 119 +
|
||||||
Safari* | 16.4 +
|
Safari* | 16.4 +
|
||||||
|
|
||||||
|
@ -324,17 +324,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
|
|||||||
inset-inline-start: var(--_focus-outline-width);
|
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) {
|
.resizable .container:dir(rtl) {
|
||||||
clip-path: inset(
|
clip-path: inset(
|
||||||
var(--_focus-outline-width) var(--_focus-outline-width) 0 0
|
var(--_focus-outline-width) var(--_focus-outline-width) 0 0
|
||||||
|
@ -171,13 +171,6 @@ $_indeterminate-duration: 2s;
|
|||||||
calc($_indeterminate-duration * 2);
|
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)) {
|
:host(:dir(rtl)) {
|
||||||
transform: scale(-1);
|
transform: scale(-1);
|
||||||
}
|
}
|
||||||
|
@ -201,11 +201,11 @@ $_md-sys-shape: tokens.md-sys-shape-values();
|
|||||||
}
|
}
|
||||||
|
|
||||||
// rtl for active track clipping
|
// 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);
|
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);
|
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
|
// 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);
|
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
|
// 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);
|
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.
|
// Returns a background-image with sized circular ticks of the given color.
|
||||||
@function _get-tick-image($color) {
|
@function _get-tick-image($color) {
|
||||||
@return radial-gradient(
|
@return radial-gradient(
|
||||||
@ -537,10 +515,7 @@ $_md-sys-shape: tokens.md-sys-shape-values();
|
|||||||
transform: translateX(var(--_x-translate));
|
transform: translateX(var(--_x-translate));
|
||||||
}
|
}
|
||||||
|
|
||||||
@include _get-rtl-selectors(
|
input.#{$start-or-end}:dir(rtl)::-webkit-slider-thumb {
|
||||||
'input.#{$start-or-end}',
|
|
||||||
'::-webkit-slider-thumb'
|
|
||||||
) {
|
|
||||||
transform: translateX(calc(-1 * var(--_x-translate)));
|
transform: translateX(calc(-1 * var(--_x-translate)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user