feat(tables): simplify tables CSS and adjust sizings

Orange-OpenSource · Dec 20, 2019 · 1b3e641 · 1b3e641
1 parent 3158486
commit 1b3e641
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 20 deletions.
diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -16,20 +16,12 @@
   th,
   td {
     padding: $table-cell-padding;
-    font-size: $font-size-sm;
-    line-height: $line-height-sm;
+    line-height: $table-cell-line-height;
     vertical-align: top;
   }
 
-  thead {
-    tr {
-      border-bottom-width: $table-border-width * 2;
-    }
-
-    th {
-      font-size: $font-size-base;
-      border-bottom-width: 2 * $table-border-width;
-    }
+  thead tr {
+    border-bottom-width: $table-border-width * 2;
   }
 
   tbody th {
@@ -85,8 +77,6 @@
   th,
   td {
     padding: $table-cell-padding-lg;
-    font-size: $font-size-base;
-    line-height: $line-height-base;
   }
 }
 // end mod
@@ -139,11 +129,12 @@
   color: $table-dark-color;
   background-color: $table-dark-bg;
 
-  th,
-  td,
-  thead th {
+  // Boosted mod: only table rows have borders
+  tr,
+  th {
     border-color: $table-dark-border-color;
   }
+  // end mod
 
   // Boosted mod: no bordered / borderless / zebra tables
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -421,9 +421,12 @@ $hr-margin-y:                 $spacer !default;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding:          .71875rem !default; // 11.5px;
+$table-cell-padding:          .5rem map-get($spacers, 2) map-get($spacers, 2) !default; // Boosted mod
 $table-cell-padding-sm:       .375rem !default; // 6px;
 $table-cell-padding-lg:       .90625rem !default; // 14.5px;
+// stylelint-disable function-blacklist
+$table-cell-line-height:      calc(21 / 16) !default; // Boosted mod
+// stylelint-enable function-blacklist
 
 $table-color:                 $body-color !default;
 $table-bg:                    $white !default;
@@ -442,9 +445,8 @@ $table-dark-color:            $white !default;
 $table-dark-bg:               $black !default;
 // $table-dark-accent-bg:        $gray-900 !default; // Boosted mod
 $table-dark-hover-color:      $table-dark-color !default;
-$table-dark-hover-bg:         $gray-700 !default;
-$table-dark-border-color:     $gray-500 !default;
-$table-dark-color:            $white !default;
+$table-dark-hover-bg:         $gray-900 !default;
+$table-dark-border-color:     $gray-700 !default;
 
 // $table-striped-order:         odd !default;$table-striped-order