add style for fullscreen table, fix responsive tables

1 files changed, 54 insertions, 4 deletions

diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index bbb89f16..c9977905 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -153,9 +153,16 @@
 [class*="table-responsive-"] {
   @include media-breakpoint-up(lg) {
     overflow: auto;
-    width: calc(100vw - 345px);
-    border-right: 1px solid $gray-10;
-    border-radius: $border-radius;
+    width: calc(100vw - 346px);
+    .table {
+      border-right: 1px solid $gray-30;
+      border-radius: $border-radius;
+    }
+    .table-accessory,
+    .table-full {
+      border-right: none;
+      border-radius: 0px;
+    }
   }
 }
 
@@ -166,7 +173,6 @@
 
     tr {
       &:not(:first-child) > td[aria-colindex="1"] {
-        // border-top: 1px solid $gray-10;
         padding-top: 0.625rem;
       }
 
@@ -236,11 +242,55 @@
     padding: 2px;
   }
   td {
+    white-space: nowrap;
     font-size: 0.745rem;
     color: $text-tretiatry;
   }
   .thead-light th > div {
     font-size: 0.755rem !important;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 90%;
+  }
+  @include media-breakpoint-down(md) {
+    overflow-y: auto;
+    width: 100vw;
+  }
+}
+
+.table-full {
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+  border-top: 1px solid $gray-30;
+
+  thead th {
+    border-bottom: 1px solid $gray-30;
+    border: none;
+    &:first-child {
+      border-radius: 0;
+    }
+    &:last-child {
+      border-radius: 0;
+    }
+  }
+}
+
+.full-table-container {
+  & > [class*="table-responsive-"] {
+    overflow: auto;
+    width: calc(100vw - 280px);
+    margin-left: -1.97rem;
+    margin-right: -1.95rem;
+    border-radius: 0;
+    @include media-breakpoint-down(lg) {
+      margin-left: -2.2rem;
+    }
+    @include media-breakpoint-down(md) {
+      margin-left: -1.2rem;
+      width: 100vw;
+    }
   }
 }