fix(VDataTable, VSimpleTable): missing rtl styles, other minor tweaks (…

…#8200) * fix(VDataTable, VSimpleTable): missing rtl styles, other minor tweaks * chore: remove unused class * fix: add missing rtl styles * style(VDataFooter): clean-up style display
vuetifyjs · Aug 1, 2019 · 5a45ecf · 5a45ecf
1 parent 2159eb0
commit 5a45ecf
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 18 deletions.
diff --git a/packages/vuetify/src/components/VDataIterator/VDataFooter.sass b/packages/vuetify/src/components/VDataIterator/VDataFooter.sass
@@ -15,31 +15,54 @@
 // Elements
 .v-data-footer__icons-before
   .v-btn:last-child
-    margin-right: 7px
+    +ltr()
+      margin-right: 7px
+
+    +rtl()
+      margin-left: 7px
 
 .v-data-footer__icons-after
   .v-btn:first-child
-    margin-left: 7px
+    +ltr()
+      margin-left: 7px
+
+    +rtl()
+      margin-right: 7px
 
 .v-data-footer__pagination
   display: block
   text-align: center
-  margin: 0 32px 0 24px
+
+  +ltr()
+    margin: 0 32px 0 24px
+
+  +rtl()
+    margin: 0 24px 0 32px
 
 .v-data-footer__select
   display: flex
   align-items: center
   flex: 0 0 0
   justify-content: flex-end
-  margin-right: 14px
   white-space: nowrap
 
+  +ltr()
+    margin-right: 14px
+
+  +rtl()
+    margin-left: 14px
+
   .v-select
     flex: 0 1 0
-    margin: 13px 0 13px 34px
     padding: 0
     position: initial
 
+    +ltr()
+      margin: 13px 0 13px 34px
+
+    +rtl()
+      margin: 13px 34px 13px 0
+
   .v-select__selections
     flex-wrap: nowrap
 

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.sass b/packages/vuetify/src/components/VDataTable/VDataTable.sass
@@ -6,18 +6,12 @@
 +theme(v-data-table) using ($material)
   tbody
     tr
-      &:hover:not(.v-data-table__expand-row):not(.v-data-table__empty-wrapper)
+      &:hover:not(.v-data-table__expand-row)
         background: map-deep-get($material, 'table', 'hover')
 
-      &.expanded
-        border-bottom: 0
-
-        &.expanded__row
+      &.expanded.expanded__row
           background: map-deep-get($material, 'table', 'active')
 
-        &.expanded__content
-          box-shadow: inset 0px 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0px -4px 8px -5px rgba(50, 50, 50, 0.75)
-
   .v-row-group
     &__header, &__summary
       background: map-deep-get($material, 'table', 'group')
@@ -27,7 +21,19 @@
 
   .v-data-table__empty-wrapper
     color: map-deep-get($material, 'text', 'disabled')
-    text-align: center
+
+.v-data-table
+  tbody
+    tr
+      &.expanded
+        border-bottom: 0
+
+        &.expanded__content
+          box-shadow: inset 0px 4px 8px -5px rgba(50, 50, 50, 0.75), inset 0px -4px 8px -5px rgba(50, 50, 50, 0.75)
+
+.v-data-table__empty-wrapper
+  text-align: center
+  pointer-events: none
 
 .v-data-table__mobile-row
   display: block

diff --git a/packages/vuetify/src/components/VDataTable/VSimpleTable.sass b/packages/vuetify/src/components/VDataTable/VSimpleTable.sass
@@ -14,7 +14,6 @@
   &.v-data-table--fixed-header
     thead th
       background: map-get($material, 'cards')
-      border-bottom: 0px !important
       box-shadow: inset 0 -1px 0 rgba(map-get($material, 'fg-color'), map-get($material, 'divider-percent'))
 
   thead
@@ -46,11 +45,16 @@
     padding: 0 16px
 
   th
-    text-align: left
     user-select: none
     font-size: 12px
     height: $data-table-regular-header-height
 
+    +ltr()
+      text-align: left
+
+    +rtl()
+      text-align: right
+
   td
     font-size: 14px
     height: $data-table-regular-row-height
@@ -85,6 +89,7 @@
 
   thead
     th
+      border-bottom: 0px !important
       position: sticky
       top: 0
       z-index: 2
@@ -94,8 +99,12 @@
         top: $data-table-regular-header-height
 
   // Account for scroll bar
-  .v-table__header, .v-data-footer
-    margin-right: $data-table-scroll-bar-width
+  .v-data-footer
+    +ltr()
+      margin-right: $data-table-scroll-bar-width
+
+    +rtl()
+      margin-left: $data-table-scroll-bar-width
 
 .v-data-table--fixed.v-data-table--dense
   thead