Update: List / Table layout – selected item stroke should be tinted b…

…lue (WordPress#63312) Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: jameskoster <[email protected]>
carstingaxion · Jul 18, 2024 · 26b8a69 · 26b8a69
1 parent 8e5e9b5
commit 26b8a69
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -100,7 +100,7 @@
 		}
 	}
 	tr {
-		border-bottom: 1px solid $gray-100;
+		border-top: 1px solid $gray-100;
 
 		.dataviews-view-table-header-button {
 			gap: $grid-unit-05;
@@ -164,6 +164,11 @@
 			background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 			color: $gray-700;
 
+			&,
+			& + tr {
+				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+
 			&:hover {
 				background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 			}
@@ -179,7 +184,6 @@
 		}
 		th {
 			background-color: $white;
-			box-shadow: inset 0 -#{$border-width} 0 $gray-100;
 			padding-top: $grid-unit-10;
 			padding-bottom: $grid-unit-10;
 			padding-left: $grid-unit-15;
@@ -465,6 +469,14 @@
 			}
 		}
 
+		&.is-selected.is-selected {
+			border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+
+			& + li {
+				border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
+			}
+		}
+
 		&:not(.is-selected) {
 			.dataviews-view-list__primary-field {
 				color: $gray-900;