feat(tables): Add hover effect and pointer cursor to th

zalando · Sep 29, 2016 · a466782 · a466782
1 parent ece85f4
commit a466782
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/docs/demo/materials/03-atoms/tables/02-sortable-headings.html b/docs/demo/materials/03-atoms/tables/02-sortable-headings.html
@@ -3,16 +3,16 @@
 title: Table
 notes: |
 
-    To indicate columns as sortable, add an empty element with `dc-table__sorter` in the `th`. Use `dc-table__sorter--ascending` and `dc-table__sorter--descending` to indicate the sorting order.
+    To indicate columns as sortable, add `dc-table__th--sortable` to your th, and add an empty element with `dc-table__sorter` inside the `th`. Use `dc-table__sorter--ascending` and `dc-table__sorter--descending` to indicate the sorting order.
 
 ---
 <table class="dc-table">
 	<thead class="dc-table__thead">
 		<tr class="dc-table__tr">
-			<th class="dc-table__th" data-col="First Name">First Name<span class="dc-table__sorter dc-table__sorter--ascending"></th>
-			<th class="dc-table__th" data-col="Name">Last Name<span class="dc-table__sorter"></span></th>
-			<th class="dc-table__th" data-col="Name">Email<span class="dc-table__sorter"></th>
-			<th class="dc-table__th" data-col="Name">Status<span class="dc-table__sorter"></th>
+			<th class="dc-table__th dc-table__th--sortable" data-col="First Name">First Name<span class="dc-table__sorter dc-table__sorter--ascending"></th>
+			<th class="dc-table__th dc-table__th--sortable" data-col="Name">Last Name<span class="dc-table__sorter"></span></th>
+			<th class="dc-table__th dc-table__th--sortable" data-col="Name">Email<span class="dc-table__sorter"></th>
+			<th class="dc-table__th dc-table__th--sortable" data-col="Name">Status<span class="dc-table__sorter"></th>
 		</tr>
 	</thead>
 

diff --git a/src/styles/atoms/_table.scss b/src/styles/atoms/_table.scss
@@ -59,6 +59,14 @@
     @include breakpoint($dc-huge-width) {
         @include _dc-table__td--when-huge-width;
     }
+
+    &--sortable {
+        cursor: pointer;
+
+        &:hover {
+            color: $dc-gray20;
+        }
+    }
 }
 
 @mixin dc-table__sorter {
@@ -71,7 +79,6 @@
     border-bottom: 4px solid $dc-gray50;
     border-left: 4px solid transparent;
     content: "";
-    cursor: pointer;
 
     &:after {
         position: absolute;