Merge pull request #560 from ahed-compucorp/CIWEMB-376-fix-table-styles

CIWEMB-376: Update table styles
civicrm · Nov 28, 2023 · 95f6aca · 95f6aca
2 parents 1a38d5a + d4fabdb
commit 95f6aca
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 5 deletions.
diff --git a/scss/bootstrap/overrides/_variables.scss b/scss/bootstrap/overrides/_variables.scss
@@ -148,7 +148,7 @@ $border-radius-child:         4px !default;
 //
 //## Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding:          10px 20px !default;
+$table-cell-padding:          16px 10px !default;
 $table-bg:                    $crm-white !default;
 $table-border-color:          $gray-light !default;
 
@@ -323,6 +323,8 @@ $pagination-active-bg:           $pagination-bg !default;
 $pagination-disabled-color:      $gray-light !default;
 $pagination-disabled-bg:         $pagination-bg !default;
 
+$pagination-a-padding:           5px 15px !default;
+
 //== Form states and alerts
 //
 //## Define colors for form feedback states and, by default, alerts.

diff --git a/scss/bootstrap/overrides/style/_pagination.scss b/scss/bootstrap/overrides/style/_pagination.scss
@@ -1,3 +1,5 @@
+/* stylelint-disable selector-no-qualifying-type */
+
 .pagination {
   margin: 0;
   vertical-align: top;
@@ -10,7 +12,6 @@
     &.last:not(.disabled),
     &.next:not(.disabled),
     &.prev:not(.disabled) {
-
       > a {
         color: $gray-darker;
         font-weight: bold;
@@ -19,8 +20,8 @@
 
     > a,
     > span {
-      border: none;
-      padding: 0 5px;
+      border: 0;
+      padding: $pagination-a-padding;
 
       &:hover {
         text-decoration: underline;

diff --git a/scss/civicrm/_variables.scss b/scss/civicrm/_variables.scss
@@ -1,5 +1,8 @@
 $crm-standard-gap: 20px;
 $crm-table-form-cell-padding: 4px;
+$crm-table-cell-line-height: 18px;
+$crm-table-cell-padding: 16px 10px;
+$crm-table-first-cell-padding-left: 20px;
 
 $crm-contact-info-block-min-height: 60px;
 $crm-contact-info-block-padding-top: 20px;
@@ -48,6 +51,10 @@ $crm-section-title-spacing-y: 11px;
 
 $crm-line-height: 135%;
 
+$crm-search-display-pager-padding-y: 20px;
+$crm-search-display-pager-padding-x: 70px;
+$crm-search-display-pager-label-margin-top: 3px;
+
 $fa-var-alert: '\f06a';
 $fa-var-info-msg: '\f05a';
 $fa-var-success: '\f00c';

diff --git a/scss/civicrm/common/_common.scss b/scss/civicrm/common/_common.scss
@@ -13,6 +13,7 @@
 @import 'scrollbar';
 @import 'input_file';
 @import 'pager';
+@import 'search-display-pager';
 @import 'base';
 @import 'help';
 @import 'pagination';

diff --git a/scss/civicrm/common/_search-display-pager.scss b/scss/civicrm/common/_search-display-pager.scss
@@ -0,0 +1,23 @@
+.crm-search-display {
+  padding-top: $crm-search-display-pager-padding-y/2;
+}
+
+.crm-search-display-pager {
+  background: $crm-white;
+  border-radius: 0;
+  border-top: 1px solid $table-border-color;
+  font-size: $font-size-base;
+  padding-bottom: $crm-search-display-pager-padding-y/2;
+  padding-left: $crm-search-display-pager-padding-x/2;
+  padding-right: $crm-search-display-pager-padding-x/2;
+  padding-top: $crm-search-display-pager-padding-y/2;
+
+  &,
+  a {
+    color: $gray-darker !important;
+  }
+
+  label {
+    margin-top: $crm-search-display-pager-label-margin-top;
+  }
+}
diff --git a/scss/civicrm/common/_tables.scss b/scss/civicrm/common/_tables.scss
@@ -34,7 +34,17 @@ table {
   tr td {
     border: initial;
     border-bottom: solid 1px $table-border-color;
-    line-height: 35px;
+    line-height: $crm-table-cell-line-height;
+  }
+
+  tr > th:first-child,
+  tr > td:first-child {
+    padding-left: $crm-table-first-cell-padding-left;
+  }
+
+  tr > td,
+  tr > th {
+    padding: $crm-table-cell-padding;
   }
 
   tr:last-child {