Skip to content

Commit

Permalink
style(list): Sort CSS so there is no descending specificity (#1904)
Browse files Browse the repository at this point in the history
  • Loading branch information
lynnmercier authored Jan 11, 2018
1 parent 271a05e commit 2267e0f
Showing 1 changed file with 22 additions and 25 deletions.
47 changes: 22 additions & 25 deletions packages/mdc-list/mdc-list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,16 @@
@include mdc-typography-overflow-ellipsis;

display: flex;
position: relative;
align-items: center;
justify-content: flex-start;
height: 48px;
padding: 0 $mdc-list-side-padding;
overflow: hidden;

&:focus {
outline: none;
}
}

// "Selected" is ephemeral and likely to change soon. E.g., selecting one or more photos to share in Google Photos.
Expand Down Expand Up @@ -132,6 +138,22 @@
border-radius: 50%;
}

// List items should support states by default, but it should be possible to opt out.
// Direct child combinator is necessary for non-interactive modifier on parent to not match this selector.
:not(.mdc-list--non-interactive) > .mdc-list-item {
@include mdc-ripple-surface;
@include mdc-ripple-radius;
@include mdc-states;
@include mdc-states-activated(primary);
@include mdc-states-selected(primary);

@include mdc-theme-dark(".mdc-list") {
@include mdc-states(white);
@include mdc-states-activated(primary);
@include mdc-states-selected(primary);
}
}

.mdc-list--avatar-list.mdc-list--dense .mdc-list__item {
height: 48px;
}
Expand All @@ -157,31 +179,6 @@ a.mdc-list-item {
}
// stylelint-enable selector-max-type,selector-no-qualifying-type

.mdc-list-item {
position: relative;
overflow: hidden;

&:focus {
outline: none;
}
}

// List items should support states by default, but it should be possible to opt out.
// Direct child combinator is necessary for non-interactive modifier on parent to not match this selector.
:not(.mdc-list--non-interactive) > .mdc-list-item {
@include mdc-ripple-surface;
@include mdc-ripple-radius;
@include mdc-states;
@include mdc-states-activated(primary);
@include mdc-states-selected(primary);

@include mdc-theme-dark(".mdc-list") {
@include mdc-states(white);
@include mdc-states-activated(primary);
@include mdc-states-selected(primary);
}
}

// postcss-bem-linter: define list-divider

.mdc-list-divider {
Expand Down

0 comments on commit 2267e0f

Please sign in to comment.