material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-09-11 13:46:10 +03:00
Code Issues Projects Releases Wiki Activity

refactor(list,menu,select)!: remove data-variant slotted variant selectors

Browse Source 
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:
Elliott Marquez 2023-09-18 04:11:00 -07:00 committed by Copybara-Service
parent 94b5c8125e
commit 1f31df818b
1 changed files with 0 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
list/internal/listitem/_list-item.scss
View File

@ -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(