fix(MdListItem): expand content cursor style and hover (#1808)

* fix(MdListItemExpand): specifically target direct md-list-expand-icon children when parent is active. * fix(MdListItem): expand content cursor style and hover (#1643)
vuematerial · Jun 8, 2018 · 739cefa · 739cefa
1 parent 24e63ba
commit 739cefa
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/MdList/MdListItem/MdListItem.vue b/src/components/MdList/MdListItem/MdListItem.vue
@@ -127,8 +127,10 @@
     text-transform: none;
 
     &:not(.md-list-item-default):not([disabled]) {
-      user-select: none;
-      cursor: pointer;
+      > .md-list-item-content {
+        user-select: none;
+        cursor: pointer;
+      }
     }
 
     &.md-button-clean:hover {

diff --git a/src/components/MdList/MdListItem/MdListItemExpand.vue b/src/components/MdList/MdListItem/MdListItemExpand.vue
@@ -129,7 +129,7 @@
     will-change: border;
 
     &.md-active {
-      .md-list-expand-icon {
+      > .md-list-item-content > .md-list-expand-icon {
         perspective: 1000px;
         perspective-origin: 50% 50%;
         transform: rotateX(180deg);

diff --git a/src/components/MdList/theme.scss b/src/components/MdList/theme.scss
@@ -18,7 +18,7 @@
     .md-list-item-container {
       @include md-theme-property(color, text-primary, background);
 
-      &:not(.md-list-item-default):not([disabled]):hover {
+      &:not(.md-list-item-default):not(.md-list-item-expand):not([disabled]):hover {
         @include md-theme-property(background-color, divider, background);
         @include md-theme-property(color, text-primary, background);
       }
@@ -35,8 +35,17 @@
       }
     }
 
-    .md-list-item-expand.md-active {
-      @include md-theme-property(border-color, divider, background);
+    .md-list-item-expand {
+      &.md-active {
+        @include md-theme-property(border-color, divider, background);
+      }
+
+      &:not(.md-list-item-default):not([disabled]) {
+        > .md-list-item-content:hover {
+          @include md-theme-property(background-color, divider, background);
+          @include md-theme-property(color, text-primary, background);
+        }
+      }
     }
   }
 }