Fix Data Table Pagination Styles

yohangz · Oct 15, 2018 · f4b1a26 · f4b1a26
1 parent 19ac73d
commit f4b1a26
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 8 deletions.
diff --git a/...ntum/src/data-table/components/data-table-pagination/data-table-pagination.component.html b/...ntum/src/data-table/components/data-table-pagination/data-table-pagination.component.html
@@ -25,7 +25,7 @@
                  (keyup.enter)="onPageIndexChange(pageInput)"
                  (keyup.esc)="onPageIndexRevert(pageInput)"/>
           <div class="ng-data-table-pagination-input-label">
-            <span>/</span>
+            <span>/ </span>
             <span [textContent]="maxPage"></span>
           </div>
         </div>

diff --git a/projects/ornamentum/src/styles/themes/data-table/_aegean.theme.variables.scss b/projects/ornamentum/src/styles/themes/data-table/_aegean.theme.variables.scss
@@ -107,12 +107,12 @@ $data-table-no-records-button-border-radius-value: .2rem !default;
 
 //Data Table Pagination Style
 $data-table-pagination-background: #fff !default;
-$data-table-pagination-border: #ddd !default;
+$data-table-pagination-border: transparent !default;
 $data-table-pagination-range-text-color: #444 !default;
 $data-table-pagination-range-value-text-color: #3b78e7 !default;
 $data-table-pagination-text-color: #444 !default;
 $data-table-pagination-input-border: #ddd !default;
-$data-table-pagination-input-label-border: #ddd !default;
+$data-table-pagination-input-label-border: transparent !default;
 $data-table-pagination-input-label-text-color: #444 !default;
 $data-table-pagination-input-background: #fff !default;
 $data-table-pagination-input-text-color: #444 !default;

diff --git a/projects/ornamentum/src/styles/themes/data-table/_base.theme.variables.scss b/projects/ornamentum/src/styles/themes/data-table/_base.theme.variables.scss
@@ -102,7 +102,7 @@ $data-table-no-records-button-border-radius-value: .2rem !default;
 
 //Data Table Pagination Style
 $data-table-pagination-background: #fff !default;
-$data-table-pagination-border: #ccc !default;
+$data-table-pagination-border: transparent !default;
 $data-table-pagination-range-text-color: #333 !default;
 $data-table-pagination-range-value-text-color: #3b78e7 !default;
 $data-table-pagination-text-color: #333 !default;

diff --git a/projects/ornamentum/src/styles/themes/data-table/_dark.theme.variables.scss b/projects/ornamentum/src/styles/themes/data-table/_dark.theme.variables.scss
@@ -105,7 +105,7 @@ $data-table-no-records-button-border-radius-value: .2rem !default;
 
 //Data Table Pagination Style
 $data-table-pagination-background: #3c3f41 !default;
-$data-table-pagination-border: #333 !default;
+$data-table-pagination-border: transparent !default;
 $data-table-pagination-range-text-color: #cacaca !default;
 $data-table-pagination-range-value-text-color: #cacaca !default;
 $data-table-pagination-text-color: #cacaca !default;

diff --git a/projects/ornamentum/src/styles/themes/data-table/_flat.theme.variables.scss b/projects/ornamentum/src/styles/themes/data-table/_flat.theme.variables.scss
@@ -106,7 +106,7 @@ $data-table-no-records-button-border-radius-value: .2rem !default;
 
 //Data Table Pagination Style
 $data-table-pagination-background: #00529f !default;
-$data-table-pagination-border: #eaeaea !default;
+$data-table-pagination-border: transparent !default;
 $data-table-pagination-range-text-color: #fff !default;
 $data-table-pagination-range-value-text-color: #fff !default;
 $data-table-pagination-text-color: #fff !default;

diff --git a/projects/ornamentum/src/styles/themes/data-table/_ornamentum.theme.variables.scss b/projects/ornamentum/src/styles/themes/data-table/_ornamentum.theme.variables.scss
@@ -104,7 +104,7 @@ $data-table-no-records-button-border-radius-value: .2rem !default;
 
 //Data Table Pagination Style
 $data-table-pagination-background: #7b2222 !default;
-$data-table-pagination-border: #333 !default;
+$data-table-pagination-border: transparent !default;
 $data-table-pagination-range-text-color: #f5f5f5 !default;
 $data-table-pagination-range-value-text-color: #fff !default;
 $data-table-pagination-text-color: #f5f5f5 !default;

diff --git a/projects/ornamentum/src/styles/themes/data-table/base.theme.scss b/projects/ornamentum/src/styles/themes/data-table/base.theme.scss
@@ -26,9 +26,24 @@
     }
 
     > .ng-data-table-content-container {
+
+      .ng-data-table-content-header-container {
+
+        .ng-data-table-content-header {
+
+          .ng-data-table {
+            border-right: .05rem solid $data-table-content-header-border;
+          }
+        }
+      }
+
       > .ng-data-table-content {
         -webkit-overflow-scrolling: touch;
         overflow-y: scroll;
+
+        .ng-data-table {
+          border-right: .05rem solid $data-table-content-header-border;
+        }
       }
     }
 
@@ -77,7 +92,6 @@
       }
 
       .ng-data-table {
-        border-bottom: 0;
         border-right: .05rem solid transparent;
         border-top: 0;
         overflow: hidden;
@@ -729,6 +743,10 @@
       padding: .375rem .75rem;
       text-align: center;
       white-space: nowrap;
+
+      span {
+        padding-right: .3rem;
+      }
     }
 
     .ng-data-table-pagination-pages {