#313 updating to use em instead of rem

xaksis · Jun 23, 2018 · ae09569 · ae09569
1 parent b8ff8a7
commit ae09569
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 11 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -18,6 +18,7 @@
         enabled: true,
         selectOnCheckboxOnly: false,
       }"
+      styleClass="vgt-table condensed"
       :sort-options="{enabled: true, initialSortBy: {field: 'name', type: 'asc'}}"
       :search-options="{
         enabled: false,

diff --git a/src/styles/_condensed.scss b/src/styles/_condensed.scss
@@ -1,5 +1,5 @@
 .vgt-table{
   &.condensed td, &.condensed th.vgt-row-header{
-    padding: .4rem .4rem .4rem .4rem;
+    padding: .4em .4em .4em .4em;
   }
 }
diff --git a/src/styles/_rtl.scss b/src/styles/_rtl.scss
@@ -3,11 +3,11 @@
 
   .vgt-table{
     td, th:not(.line-numbers) {
-      padding: .75rem .75rem .75rem 1.5rem;
+      padding: .75em .75em .75em 1.5em;
     }
     thead th, &.condensed thead th {
-      padding-left:  1.5rem;
-      padding-right:  .75rem;
+      padding-left:  1.5em;
+      padding-right:  .75em;
     }
     th.sorting:after,
     th.sorting-asc:after{

diff --git a/src/styles/_table-footer.scss b/src/styles/_table-footer.scss
@@ -1,6 +1,6 @@
 .vgt-wrap__footer{
   color: $text-color;
-  padding:  1rem;
+  padding:  1em;
   border: 1px solid $border-color;
   background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
   .footer__row-count{

diff --git a/src/styles/_table-th.scss b/src/styles/_table-th.scss
@@ -1,6 +1,6 @@
 .vgt-table{
   & th{
-    padding: .75rem 1.5rem .75rem .75rem;
+    padding: .75em 1.5em .75em .75em;
     vertical-align: middle;
     position: relative;
     &.sorting{
@@ -25,7 +25,7 @@
     }
   }
   & th.line-numbers, & th.vgt-checkbox-col {
-    padding: 0 .75rem 0 .75rem;
+    padding: 0 .75em 0 .75em;
     color: $text-color;
     border-right: 1px solid $border-color;
     word-wrap: break-word;
@@ -34,7 +34,7 @@
     background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
   }
   & th.filter-th {
-    padding: .75rem .75rem .75rem .75rem;
+    padding: .75em .75em .75em .75em;
   }
 
   th.vgt-row-header{
@@ -47,7 +47,7 @@
     color: $text-color;
     vertical-align: bottom;
     border-bottom:  1px solid $border-color;
-    padding-right: 1.5rem;
+    padding-right: 1.5em;
     background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
     &.vgt-checkbox-col{
       vertical-align: middle;

diff --git a/src/styles/_table.scss b/src/styles/_table.scss
@@ -1,12 +1,13 @@
 table.vgt-table{
+  font-size: 16px;
   border-collapse: collapse;
   background-color: white;
   width: 100%;
   max-width: 100%;
   table-layout: auto;
   border: 1px solid $border-color;
   & td {
-    padding: .75rem .75rem .75rem .75rem;
+    padding: .75em .75em .75em .75em;
     vertical-align: top;
     border-bottom:  1px solid $border-color;
     color: $text-color;

diff --git a/src/styles/black-rhino/black-rhino.scss b/src/styles/black-rhino/black-rhino.scss
@@ -19,7 +19,7 @@
   //th
   & th.line-numbers, & th.vgt-checkbox-col {
     color: $text-color;
-    border-right: 1px solid $border-color-td;
+    border-right: 1px solid $border-color;
     background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
   }
   thead th{