SILABMC-191: Fix table

2 files changed, 27 insertions, 91 deletions

diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index 7dca75dc..a98fd9ec 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -7,18 +7,17 @@
   border-spacing: 0px;
 
   &.b-table > thead > tr {
-    &>[aria-sort='ascending'] {
-      background-image: url('~@/assets/images/_sila/sort-ascending.svg');
+    & > [aria-sort="ascending"] {
+      background-image: url("~@/assets/images/_sila/sort-ascending.svg");
       background-size: 17px;
-
     }
-    &>[aria-sort='descending'],
-    [aria-sort='none'] {
-      background-image: url('~@/assets/images/_sila/sort-descending.svg');
+    & > [aria-sort="descending"],
+    [aria-sort="none"] {
+      background-image: url("~@/assets/images/_sila/sort-descending.svg");
       background-size: 14px;
     }
   }
-  
+
   thead {
     th {
       border: none;
@@ -28,10 +27,10 @@
       &:last-child {
         border-radius: 0 $border-radius 0 0;
       }
-  }
+    }
   }
 
-  tbody { 
+  tbody {
     tr {
       border: none;
       &:first-child {
@@ -62,7 +61,7 @@
 
   // thead-light added for specificity
   .thead-light th {
-    background-color: $gray-10;
+    background-color: $gray-light;
     vertical-align: middle;
     text-transform: uppercase;
     color: $text-primary;
@@ -93,7 +92,7 @@
   }
 
   .b-table-details {
-    border-top: 1px solid rgba(26,62,91,.3);
+    border-top: 1px solid rgba(26, 62, 91, 0.3);
     background-color: inherit;
     td {
       padding-left: $table-cell-padding;
@@ -110,7 +109,7 @@
     }
     dd {
       font-size: 0.75rem !important;
-      line-height: 1.5
+      line-height: 1.5;
     }
   }
 
@@ -130,7 +129,7 @@
     padding-left: calc(1.2rem + 0.65em) !important;
     &:focus {
       outline: none;
-      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+      box-shadow: inset 0 0 0 2px theme-color("primary") !important;
     }
     &:hover {
       background-color: $gray-5-hover;
@@ -146,7 +145,8 @@
   border-top: none;
 }
 
-.table-responsive, .table-responsive-md {
+.table-responsive,
+.table-responsive-md {
   margin-top: 0.5rem;
 }
 
@@ -156,8 +156,7 @@
     border: 1px solid $gray-10;
 
     tr {
-
-      &:not(:first-child) > td[aria-colindex='1'] {
+      &:not(:first-child) > td[aria-colindex="1"] {
         // border-top: 1px solid $gray-10;
         padding-top: 0.625rem;
       }
@@ -174,14 +173,14 @@
         }
 
         &:before {
-          content: '';
+          content: "";
           background-color: gray("200");
           width: 40%;
           border-right: 1px solid gray("300");
         }
 
         &:after {
-          content: '';
+          content: "";
           right: 0;
           width: 60%;
         }
@@ -217,87 +216,23 @@
 
 .table-accessory {
   border: none;
-    thead th {
-      border-bottom: 1px solid $gray-30;
-      background-color: transparent !important;
-      padding: 5px 0;
+  thead th {
+    border-bottom: 1px solid $gray-30;
+    background-color: transparent !important;
+    padding: 5px 0;
   }
 
   tbody tr td {
-        border: none;
-        padding: 2px;
+    border: none;
+    padding: 2px;
   }
   td {
     font-size: 0.745rem;
     color: $text-tretiatry;
-
   }
-  .thead-light th  > div {
-        font-size: 0.755rem !important;
+  .thead-light th > div {
+    font-size: 0.755rem !important;
   }
-
-  // @include media-breakpoint-down(xs) {
-  //   .b-table-stacked-sm {
-  //     border: 1px solid $gray-10;
-  
-  //     tr {
-  
-  //       &:not(:first-child) > td[aria-colindex='1'] {
-  //         padding-top: 0.625rem;
-  //       }
-  
-  //       &:not(.b-table-empty-row) {
-  //         position: relative; // Restrict background color to get zebra striping for the row
-  
-  //         &::before,
-  //         &::after {
-  //           position: absolute;
-  //           top: 0;
-  //           height: 100%;
-  //           z-index: -1;
-  //         }
-  
-  //         &:before {
-  //           content: '';
-  //           background-color: gray("200");
-  //           width: 40%;
-  //           border-right: 1px solid gray("300");
-  //         }
-  
-  //         &:after {
-  //           content: '';
-  //           right: 0;
-  //           width: 60%;
-  //         }
-  
-  //         &:nth-child(even)::after {
-  //           background-color: gray("100"); // Zebra striping for the row
-  //         }
-  //       }
-  
-  //       td {
-  //         border: 0;
-  //         padding: 0.75rem;
-  //         text-align: left !important;
-  
-  //         &:last-of-type {
-  //           border-right: 0;
-  //         }
-  //       }
-  //     }
-  //   }
-  
-  //   .table.b-table.b-table-stacked-sm > tbody > tr > [data-label] {
-  //     &::before {
-  //       text-align: left;
-  //       padding-left: $spacer / 2;
-  //     }
-  
-  //     > div {
-  //       padding-left: 1rem;
-  //     }
-  //   }
-  // }
 }
 
 .item-color {
@@ -305,4 +240,4 @@
   width: 8px;
   height: 8px;
   border-radius: 2px;
-}
\ No newline at end of file
+}
diff --git a/src/env/assets/styles/_sila.scss b/src/env/assets/styles/_sila.scss
index ba4c3223..477a4ce4 100644
--- a/src/env/assets/styles/_sila.scss
+++ b/src/env/assets/styles/_sila.scss
@@ -74,6 +74,7 @@ $gray-5-hover: rgba(20, 39, 53, 0.1);
 $gray-10: rgba(26, 62, 91, 0.1);
 $gray-20: rgba(26, 62, 92, 0.2);
 $gray-30: rgba(26, 62, 91, 0.3);
+$gray-light: rgb(232 235 238);
 $red-40: rgba(225, 23, 23, 0.4);
 
 $surface-secondary: #f3f4f5;