From 3f4094d08b873e17464a51c817ea7d41177f848d Mon Sep 17 00:00:00 2001
From: "Andrey V.Kosteltsev" <AKosteltsev@IBS.RU>
Date: Mon, 4 Jul 2022 23:11:28 +0300
Subject: IBS: _ibs UI Theme

---
 src/assets/styles/bmc/_ibs/_tables.scss | 188 ++++++++++++++++++++++++++++++++
 1 file changed, 188 insertions(+)
 create mode 100644 src/assets/styles/bmc/_ibs/_tables.scss

(limited to 'src/assets/styles/bmc/_ibs/_tables.scss')

diff --git a/src/assets/styles/bmc/_ibs/_tables.scss b/src/assets/styles/bmc/_ibs/_tables.scss
new file mode 100644
index 00000000..d73bfdde
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_tables.scss
@@ -0,0 +1,188 @@
+.table {
+  position: relative;
+  z-index: $zindex-dropdown;
+
+  td {
+    border-top: 1px solid $gray-10;
+    border-right: 1px solid $gray-10;
+    border-bottom-width: 0px;
+    &:first-of-type {
+      border-right: 1px solid $gray-10;
+    }
+    &:last-of-type {
+      border-left: 1px solid $gray-10;
+      border-right-width: 0px;
+    }
+    vertical-align: middle;
+    font-size: 0.875rem;
+    // Table action buttons
+    .btn-link {
+      width: 40px;
+      height: 40px;
+      padding: 5px !important;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  // thead-light added for specificity
+  .thead-light th {
+    background-color: $surface-secondary;
+    vertical-align: middle;
+    border-top-width: 0px;
+    border-bottom: 1px solid $gray-10;
+    border-right: 1px solid $gray-10;
+    &:first-of-type {
+      border-right: 1px solid $gray-10;
+    }
+    &:last-of-type {
+      border-left: 1px solid $gray-10;
+      border-right-width: 0px;
+    }
+    text-transform: uppercase;
+    color: $text-primary;
+    &:focus {
+      outline: none;
+    }
+    & > div {
+      font-size: 0.875rem !important;
+    }
+  }
+
+  .custom-switch {
+    width: 100%;
+  }
+
+  .status-icon svg {
+    width: 1rem;
+    height: auto;
+  }
+
+  .b-table-has-details {
+    td {
+      border-bottom: none;
+    }
+    .table-row-expand svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  .b-table-details {
+    border-top: 1px solid rgba(26,62,91,.3);
+    background-color: inherit;
+    td {
+      padding-left: $table-cell-padding;
+      padding-right: $table-cell-padding;
+    }
+    dl {
+      margin: 0;
+    }
+    dt {
+      font-size: 0.75rem !important;
+      float: left;
+      clear: left;
+      margin-right: $spacer / 2;
+    }
+    dd {
+      font-size: 0.75rem !important;
+      line-height: 1.5
+    }
+  }
+
+  .table-row-expand {
+    width: 50px;
+    .btn {
+      padding: 0;
+      width: 40px;
+    }
+    svg {
+      fill: theme-color("dark");
+    }
+  }
+
+  .b-table-sort-icon-left {
+    background-position: left calc(1.5rem / 2) center !important;
+    padding-left: calc(1.2rem + 0.65em) !important;
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+    }
+    &:hover {
+      background-color: theme-color-dark('light');
+    }
+  }
+}
+
+.b-table-sticky-header td {
+  border-top: none;
+}
+
+// Table stacked style for small screen only
+@include media-breakpoint-down(xs) {
+  .b-table-stacked-sm {
+    border: 1px solid $gray-10;
+
+    tr {
+
+      &:not(:first-child) > td[aria-colindex='1'] {
+        border-top: 1px solid $gray-10;
+        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;
+    }
+  }
+}
+
+.table-responsive, .table-responsive-md {
+  margin-top: 0.5rem;
+}
-- 
cgit v1.2.3