create accessoryTable(no styles for XS size, start to create collapse component)

3 files changed, 110 insertions, 0 deletions

diff --git a/src/assets/images/_sila/collapsed/temperature.svg b/src/assets/images/_sila/collapsed/temperature.svg
new file mode 100644
index 00000000..eaef46f7
--- /dev/null
+++ b/src/assets/images/_sila/collapsed/temperature.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.59649 8.70217V2.11563C2.72082 1.71432 3.14137 1.08777 3.96881 1.08777C4.80097 1.08777 5.25676 1.71835 5.40351 2.1269V8.5628V8.70217H5.40718L5.1428 9.2957C6.08491 9.74384 6.73684 10.7272 6.73684 11.8665C6.73684 13.4284 5.51152 14.6947 4 14.6947C2.48848 14.6947 1.26316 13.4284 1.26316 11.8665C1.26316 10.7267 1.91563 9.74303 2.85836 9.29515L2.59455 8.70217H2.59649ZM1.47368 8.66168V2.07598C1.47368 2.01444 1.48068 1.94562 1.50067 1.87278C1.67069 1.25325 2.37741 0 3.96881 0C5.54465 0 6.29377 1.23221 6.49026 1.84692C6.51676 1.92982 6.52632 2.00947 6.52632 2.08119V8.66168C7.42514 9.4192 8 10.5731 8 11.8665C8 14.1494 6.20914 16 4 16C1.79086 16 0 14.1494 0 11.8665C0 10.5731 0.574857 9.4192 1.47368 8.66168ZM6 12C6 13.1046 5.10457 14 4 14C2.89543 14 2 13.1046 2 12C2 11.2597 2.5 10 3.5 10V4H4.5V10C5.5 10 6 11.2597 6 12Z" fill="#E11717"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/styles/bmc/_sila/_buttons.scss b/src/assets/styles/bmc/_sila/_buttons.scss
index b6062d84..f54caac9 100644
--- a/src/assets/styles/bmc/_sila/_buttons.scss
+++ b/src/assets/styles/bmc/_sila/_buttons.scss
@@ -176,3 +176,18 @@
   padding: 6px;
   margin: 1px;
 }
+
+.btn-collapse {
+    height: 56px;
+    width: 100%;
+    border-top: 1px solid $gray-10;
+    // border-bottom: 1px solid $gray-10;
+    // gap: 8px;
+    &:active,
+    &:focus {
+      box-shadow: none;
+    }
+    &:hover {
+      color: $text-primary;
+    }
+}
diff --git a/src/assets/styles/bmc/_sila/_tables.scss b/src/assets/styles/bmc/_sila/_tables.scss
index 8d9f391e..7dca75dc 100644
--- a/src/assets/styles/bmc/_sila/_tables.scss
+++ b/src/assets/styles/bmc/_sila/_tables.scss
@@ -213,4 +213,96 @@
       padding-left: 1rem;
     }
   }
+}
+
+.table-accessory {
+  border: none;
+    thead th {
+      border-bottom: 1px solid $gray-30;
+      background-color: transparent !important;
+      padding: 5px 0;
+  }
+
+  tbody tr td {
+        border: none;
+        padding: 2px;
+  }
+  td {
+    font-size: 0.745rem;
+    color: $text-tretiatry;
+
+  }
+  .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 {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
 }
\ No newline at end of file