Table color updates

Improve color contrast for table header cells. At browsers widths under the ‘bp768’ breakpoint, the responsive table headers were white on a light background. At browser widths over the ‘bp768’ breakpoint, each responsive table would override the white with its own respective color and background-color. Now, the white table headers have been removed from the table body, and the contrast compliant color and background-color are applied at all browser widths, not just those above the ‘bp768’ breakpoint. Borders are now present for table header cells in the table body for all tables, not just responsive tables. The border-bottom has been removed from the abbreviation in the table header used to create responsive tables. Coding style: * New line for each selector. * New lines in nested Less rules.
unl · Nov 27, 2017 · 6896c26 · 6896c26
1 parent e9ac264
commit 6896c26
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 85 deletions.
diff --git a/wdn/templates_4.1/less/layouts/tables.less b/wdn/templates_4.1/less/layouts/tables.less
@@ -37,6 +37,10 @@ table {
             }
         }
 
+        th {
+            border-top: 1px solid @ui04;
+        }
+
         td {
             border-top: 1px solid @ui04;
         }
@@ -45,10 +49,13 @@ table {
 
 table.wdn_responsive_table {
 
-    tbody {
+    thead {
 
         th {
-            border-top: 1px solid @ui04;
+
+            abbr {
+                border-bottom: none;
+            }
         }
     }
 }

diff --git a/wdn/templates_4.1/less/modules/tables.less b/wdn/templates_4.1/less/modules/tables.less
@@ -3,13 +3,16 @@ table.cool,
 table.soothing,
 table.neutral,
 table.energetic {
+
     thead {
+
         th {
             color: #fff;
         }
     }
 
     th {
+
         a {
             color: #fff;
         }
@@ -27,8 +30,8 @@ table.primary {
     tbody {
 
         th {
-            background-color: lighten(@brand,53.5%);
-            color: darken(@brand, 14%);
+            color: darken(@brand,10%);
+            background-color: lighten(@brand,55%);
 
             a {
                 color: inherit;
@@ -43,7 +46,8 @@ table.primary {
             }
         }
 
-        th, td {
+        th,
+        td {
             border-color: lighten(@brand,50%);
         }
     }
@@ -60,8 +64,8 @@ table.cool {
     tbody {
 
         th {
+            color: darken(@triad,10%);
             background-color: lighten(@dark-triad,52%);
-            color: darken(@triad, 15%);
 
             a {
                 color: inherit;
@@ -76,7 +80,8 @@ table.cool {
             }
         }
 
-        th, td {
+        th,
+        td {
             border-color: lighten(@dark-triad,45%);
         }
     }
@@ -93,8 +98,8 @@ table.soothing {
     tbody {
 
         th {
-            background-color: lighten(@dark-complement,57%);
-            color: darken(@complement, 8%);
+            color: darken(@complement,10%);
+            background-color: lighten(@dark-complement,59%);
 
             a {
                 color: inherit;
@@ -109,7 +114,8 @@ table.soothing {
             }
         }
 
-        th, td {
+        th,
+        td {
             border-color: lighten(@dark-complement,50%);
         }
     }
@@ -127,16 +133,17 @@ table.neutral {
         // no background-color needed for tbody tr:nth-of-type(even), same as inherited color
 
         th {
-            background-color: lighten(@neutral,68%);
-            color: lighten(@neutral, 7%);
+            color: @neutral;
+            background-color: lighten(@dark-neutral,70%);
 
             a {
                 color: inherit;
                 border-bottom: 1px dotted lighten(@neutral, 7%);
             }
         }
 
-        th, td {
+        th,
+        td {
             border-color: lighten(@dark-neutral,60%);
         }
     }
@@ -153,8 +160,8 @@ table.energetic {
     tbody {
 
         th {
-            background-color: lighten(@dark-energetic,47%);
-            color: darken(@energetic, 14%);
+            color: darken(@energetic,10%);
+            background-color: lighten(@dark-energetic,50%);
 
             a {
                 color: inherit;
@@ -169,7 +176,8 @@ table.energetic {
             }
         }
 
-        th, td {
+        th,
+        td {
             border-color: lighten(@dark-energetic,44%);
         }
     }
@@ -185,14 +193,6 @@ table.energetic {
 
         tbody {
 
-            th {
-                color: #fff;
-
-                a {
-                    color: #fff;
-                }
-            }
-
             tr {
 
                 &:nth-of-type(even) {
@@ -270,64 +270,3 @@ table.energetic {
         }
     }
 }
-
-@media @bp768 {
-
-    table.wdn_responsive_table {
-
-        &.primary {
-
-            tbody {
-
-                th {
-                    color: darken(@brand,10%);
-                    background-color: lighten(@brand,55%);
-                }
-            }
-        }
-
-        &.cool {
-
-            tbody {
-
-                th {
-                    color: darken(@triad,10%);
-                    background-color: lighten(@dark-triad,52%);
-                }
-            }
-        }
-
-        &.soothing {
-
-            tbody {
-
-                th {
-                    color: darken(@complement,10%);
-                    background-color: lighten(@dark-complement,59%);
-                }
-            }
-        }
-
-        &.neutral {
-
-            tbody {
-
-                th {
-                    color: @neutral;
-                    background-color: lighten(@dark-neutral,70%);
-                }
-            }
-        }
-
-        &.energetic {
-
-            tbody {
-
-                th {
-                    color: darken(@energetic,10%);
-                    background-color: lighten(@dark-energetic,50%);
-                }
-            }
-        }
-    }
-}