refonte des styles des tableaux

changelog.md

@@ -13,6 +13,7 @@
 - ajout des onglets (tabs)
 - ajout des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
 - refonte des styles de formulaires
+- refonte des styles des tableaux
 - autogrid object en Grid Layout
 - regroupement des styles des tableaux
 - suppression du namespace "kna-", ne devrait pas être problématique dès lors que Grillade sera devenu inutile dans KNACSS

css/knacss-unminified.css

@@ -1849,37 +1849,39 @@ table,
 
 .table {
   display: table;
+  border: 1px solid #acb3c2;
+  background: transparent;
 }
 
-#recaptcha_table,
-.table-auto {
-  table-layout: auto;
+.table--zebra tbody tr:nth-child(odd) {
+  background: #e7e9ed;
 }
 
-td,
-th {
-  vertical-align: top;
+.table caption {
+  caption-side: bottom;
+  padding: 1rem;
+  color: #727e96;
+  font-style: italic;
+  text-align: right;
+}
+
+.table td,
+.table th {
+  padding: 0.3rem 0.6rem;
   min-width: 2rem;
+  vertical-align: top;
+  border: 1px #acb3c2 dotted;
+  text-align: left;
   cursor: default;
 }
 
-/* deco */
-table,
-.table {
-  border: 1px solid #ccc;
+.table thead {
+  color: #000;
+  background: transparent;
 }
 
-caption {
-  padding: 1rem;
-  color: #555;
-  font-style: italic;
-}
-
-td,
-th {
-  padding: 0.3em 0.8em;
-  border: 1px #aaa dotted;
-  text-align: left;
+.table--auto {
+  table-layout: auto;
 }
 
 /* ----------------------------- */

sass/_config/_variables.scss

@@ -60,6 +60,13 @@ $color-arrow     : $color-dark;
 // checkboxes, radios
 $color-checkbox  : $color-gray3;
 
+// tables
+$border-table             : $color-gray4;
+$color-table-caption      : $color-gray3;
+$color-table-head         : $color-base;
+$background-table         : transparent;
+$background-table-head    : transparent;
+
 // buttons, badges, alerts color variants list
 // name - background-color - color - border
 $variants-list: (

sass/components/_tables.scss

@@ -14,35 +14,38 @@ table,
 
 .table {
   display: table;
+  border: 1px solid $border-table;
+  background: $background-table;
+
+  &--zebra {
+    & tbody tr:nth-child(odd) {
+      background: $color-gray5;
+    }
+  }
+
+  & caption {
+    caption-side: bottom;
+    padding: $small-value;
+    color: $color-table-caption;
+    font-style: italic;
+    text-align: right;
+  }
+
+  & td,
+  & th {
+    padding: 0.3rem 0.6rem;
+    min-width: $medium-value;
+    vertical-align: top;
+    border: 1px $border-table dotted;
+    text-align: left;
+    cursor: default;
+  }
+  & thead {
+    color: $color-table-head;
+    background: $background-table-head;
+  }
 }
 
-#recaptcha_table,
-.table-auto {
+.table--auto {
   table-layout: auto;
 }
-
-td,
-th {
-  vertical-align: top;
-  min-width: $medium-value;
-  cursor: default;
-}
-
-/* deco */
-table,
-.table {
-  border: 1px solid #ccc;
-}
-
-caption {
-  padding: $small-value;
-  color: #555;
-  font-style: italic;
-}
-
-td,
-th {
-  padding: 0.3em 0.8em;
-  border: 1px #aaa dotted;
-  text-align: left;
-}