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

Pwntus · Samuell1 · commit 739cefafe789 · 2018-06-08T07:48:52.000+02:00
* fix(MdListItemExpand): specifically target direct md-list-expand-icon children when parent is active. * fix(MdListItem): expand content cursor style and hover (#1643)
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);
+        }
+      }
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`.md-list-item-container {`
`19`	`19`	`@include md-theme-property(color, text-primary, background);`
`20`	`20`
`21`		`- &:not(.md-list-item-default):not([disabled]):hover {`
	`21`	`+ &:not(.md-list-item-default):not(.md-list-item-expand):not([disabled]):hover {`
`22`	`22`	`@include md-theme-property(background-color, divider, background);`
`23`	`23`	`@include md-theme-property(color, text-primary, background);`
`24`	`24`	`}`
`@@ -35,8 +35,17 @@`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
`38`		`- .md-list-item-expand.md-active {`
`39`		`- @include md-theme-property(border-color, divider, background);`
	`38`	`+ .md-list-item-expand {`
	`39`	`+ &.md-active {`
	`40`	`+ @include md-theme-property(border-color, divider, background);`
	`41`	`+ }`
	`42`	`+`
	`43`	`+ &:not(.md-list-item-default):not([disabled]) {`
	`44`	`+ > .md-list-item-content:hover {`
	`45`	`+ @include md-theme-property(background-color, divider, background);`
	`46`	`+ @include md-theme-property(color, text-primary, background);`
	`47`	`+ }`
	`48`	`+ }`
`40`	`49`	`}`
`41`	`50`	`}`
`42`	`51`	`}`