mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
refactor(list,menu,select)!: remove data-variant slotted variant selectors
BREAKING CHANGE: the data-variant=".." selectors in list-item and all variants have been removed in favor of their respective slots. e.g. a slotted icon of the form `md-icon[slot=end][data-variant=icon]` should now be `md-icon[slot=end-icon]`. PiperOrigin-RevId: 566258893
This commit is contained in:
parent
94b5c8125e
commit
1f31df818b
@ -126,9 +126,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start']::slotted([data-variant='image']),
|
||||
slot[name='start']::slotted([data-variant='avatar']),
|
||||
slot[name='start-icon']::slotted(*),
|
||||
slot[name='start-image']::slotted(*),
|
||||
slot[name='start-avatar']::slotted(*) {
|
||||
@ -256,7 +253,6 @@
|
||||
}
|
||||
|
||||
@mixin _image() {
|
||||
::slotted([data-variant='image']),
|
||||
slot[name='start-image']::slotted(*) {
|
||||
display: inline-flex;
|
||||
height: var(--_leading-image-height);
|
||||
@ -278,7 +274,6 @@
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
font-size: var(--_leading-icon-size);
|
||||
width: var(--_leading-icon-size);
|
||||
@ -293,7 +288,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
font-size: var(--_trailing-icon-size);
|
||||
width: var(--_trailing-icon-size);
|
||||
@ -309,49 +303,41 @@
|
||||
}
|
||||
|
||||
:hover {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
color: var(--_hover-leading-icon-icon-color);
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
color: var(--_hover-trailing-icon-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
:focus {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
color: var(--_focus-leading-icon-icon-color);
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
color: var(--_focus-trailing-icon-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
:active {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
color: var(--_pressed-leading-icon-icon-color);
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
color: var(--_pressed-trailing-icon-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
opacity: var(--_disabled-leading-icon-opacity);
|
||||
color: var(--_disabled-leading-icon-color);
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
opacity: var(--_disabled-trailing-icon-opacity);
|
||||
color: var(--_disabled-trailing-icon-color);
|
||||
@ -360,7 +346,6 @@
|
||||
}
|
||||
|
||||
@mixin _avatar() {
|
||||
::slotted([data-variant='avatar']),
|
||||
slot[name='start-avatar']::slotted(*) {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
@ -378,8 +363,6 @@
|
||||
}
|
||||
|
||||
@mixin _video() {
|
||||
::slotted([data-variant='video']),
|
||||
::slotted([data-variant='video-large']),
|
||||
slot[name='start-video']::slotted(*),
|
||||
slot[name='start-video-large']::slotted(*) {
|
||||
display: inline-flex;
|
||||
@ -401,7 +384,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
::slotted([data-variant='video-large']),
|
||||
slot[name='start-video-large']::slotted(*) {
|
||||
// Min height is three-line height
|
||||
margin-block: calc(
|
||||
|
Loading…
Reference in New Issue
Block a user