fix(@clayui/css): Treeview replaces .treeview-item.disabled with `.…

…treeview-item-dragging` - This is reserving the disabled class and pseudo class to make a link undraggable
liferay · Jan 27, 2022 · a9f88d0 · a9f88d0
1 parent bb579f7
commit a9f88d0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 28 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_treeview.scss b/packages/clay-css/src/scss/cadmin/components/_treeview.scss
@@ -120,20 +120,6 @@
 			map-deep-get($cadmin-treeview, treeview-item, last-child)
 		);
 	}
-
-	&.disabled {
-		cursor: $cadmin-disabled-cursor;
-		opacity: 0.4;
-
-		.treeview-dropping {
-			&-bottom,
-			&-middle,
-			&-top {
-				border-color: transparent;
-				background-color: transparent;
-			}
-		}
-	}
 }
 
 .treeview-link {
@@ -200,6 +186,20 @@
 	}
 }
 
+.treeview-item-dragging {
+	@include clay-css(map-get($cadmin-treeview, treeview-item-dragging));
+
+	.treeview-link {
+		@include clay-link(
+			map-deep-get(
+				$cadmin-treeview,
+				treeview-item-dragging,
+				treeview-link
+			)
+		);
+	}
+}
+
 .treeview-dragging {
 	@include clay-css(map-get($cadmin-treeview, treeview-dragging));
 }

diff --git a/packages/clay-css/src/scss/cadmin/variables/_treeview.scss b/packages/clay-css/src/scss/cadmin/variables/_treeview.scss
@@ -42,6 +42,15 @@ $cadmin-treeview: map-merge(
 		treeview-item: (
 			word-wrap: break-word,
 		),
+		treeview-item-dragging: (
+			cursor: $cadmin-disabled-cursor,
+			opacity: 0.4,
+			treeview-link: (
+				background-color: transparent,
+				border-color: transparent,
+				box-shadow: none,
+			),
+		),
 		link: (
 			cursor: pointer,
 			display: block,

diff --git a/packages/clay-css/src/scss/components/_treeview.scss b/packages/clay-css/src/scss/components/_treeview.scss
@@ -111,20 +111,6 @@
 	&:last-child {
 		@include clay-css(map-deep-get($treeview, treeview-item, last-child));
 	}
-
-	&.disabled {
-		cursor: $disabled-cursor;
-		opacity: 0.4;
-
-		.treeview-dropping {
-			&-bottom,
-			&-middle,
-			&-top {
-				border-color: transparent;
-				background-color: transparent;
-			}
-		}
-	}
 }
 
 .treeview-link {
@@ -189,6 +175,16 @@
 	}
 }
 
+.treeview-item-dragging {
+	@include clay-css(map-get($treeview, treeview-item-dragging));
+
+	.treeview-link {
+		@include clay-link(
+			map-deep-get($treeview, treeview-item-dragging, treeview-link)
+		);
+	}
+}
+
 .treeview-dragging {
 	@include clay-css(map-get($treeview, treeview-dragging));
 }

diff --git a/packages/clay-css/src/scss/variables/_treeview.scss b/packages/clay-css/src/scss/variables/_treeview.scss
@@ -42,6 +42,15 @@ $treeview: map-merge(
 		treeview-item: (
 			word-wrap: break-word,
 		),
+		treeview-item-dragging: (
+			cursor: $disabled-cursor,
+			opacity: 0.4,
+			treeview-link: (
+				background-color: transparent,
+				border-color: transparent,
+				box-shadow: none,
+			),
+		),
 		link: (
 			cursor: pointer,
 			display: block,