fix(VDatatable): remove extra border from expanded functionality (#10321)

fixes #6429

* fix(vdatatable): remove extra border from datatables with expanded rows

* refactor(vdatatable): remove unncessary splitting in _datatable.styl

Author: basselAhmed

packages/vuetify/src/components/VDataTable/mixins/body.js

@@ -22,8 +22,13 @@ export default {
         children.push(expand)
       }
 
+      const classes = {
+        'v-datatable__expand-col': true,
+        'v-datatable__expand-col--expanded': this.isExpanded(props.item)
+      }
+
       const transition = this.$createElement('transition-group', {
-        class: 'v-datatable__expand-col',
+        class: classes,
         attrs: { colspan: this.headerColumns },
         props: {
           tag: 'td'

packages/vuetify/src/stylus/components/_data-table.styl

@@ -22,6 +22,11 @@ v-datatable($material)
     color: rgba($material.fg-color, $material.secondary-text-percent)
     border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
 
+  .v-datatable__expand-col
+    &--expanded
+      border-bottom: 1px solid $material.table.border
+
+
 theme(v-datatable, "v-datatable")
 
 .v-datatable
@@ -112,14 +117,16 @@ theme(v-datatable, "v-datatable")
 
 .v-datatable__expand
   &-row
-    border: none !important
+    border-top: none !important
 
   &-col
     padding: 0 !important
     height: 0px !important
+    visibility: hidden
 
     &--expanded
-      border-bottom: 1px solid rgba(0,0,0,0.12)
+      visibility: visible
+
 
   &-content
     transition: height $primary-transition

packages/vuetify/src/stylus/components/_tables.styl

@@ -16,8 +16,8 @@ v-table($material)
 
   tbody
     tr
-      &:not(:last-child)
-        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)
+      &:not(:first-child)
+        border-top: 1px solid rgba($material.fg-color, $material.divider-percent)
 
       &[active]
         background: $material.table.active

packages/vuetify/src/stylus/settings/_theme.styl

@@ -83,6 +83,7 @@ $material-light := {
   table: {
     active: $grey.lighten-4
     hover: $grey.lighten-3
+    border: $grey.lighten-2
   },
   picker: {
     body: $shades.white,
@@ -187,6 +188,7 @@ $material-dark := {
   table: {
     active: #505050
     hover: $grey.darken-2
+    border: $grey.darken-2
   },
   picker: {
     body: $grey.darken-3,