--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/assets/scss/components/_table.scss	Sat May 31 09:21:51 2025 +0800
@@ -0,0 +1,625 @@
+// main: ../style.scss
+/********************************
+ *********************************
+Tables
+ *********************************
+ *********************************/
+.table {
+
+  thead tr.thead-inverse th {
+    background: inherit;
+  }
+
+  &.table-inverse thead th {
+    border-width: 0;
+  }
+
+  > tbody > tr:first-child > td {
+    border-top: none;
+  }
+
+  &.table-borderless {
+    td, th {
+      border: none;
+    }
+  }
+
+  > tbody > tr[class*="bg-"] > td {
+    color: #fff;
+  }
+
+  > thead > tr > th {
+    border-bottom-width: 1px;
+    border-top-width: 0px;
+  }
+
+  &.color-table > thead > tr > th {
+    border: 0;
+  }
+
+  .progress {
+    margin: 0;
+    margin-bottom: 0 !important;
+    position: relative;
+    top: em(8,12);
+  }
+
+}
+
+td.footable-sortable>span.fooicon,
+th.footable-sortable>span.fooicon {
+  top: em(13,12);
+  font-size: em(12,14);
+}
+
+.table, .table-bordered {
+  &,
+  > tbody > tr > td,
+  > thead > tr > th,
+  > tbody > tr > th {
+    border-color: $theme-border-color;
+  }
+}
+
+/* DataTables
+========================*/
+.dataTables_wrapper {
+  label { font-weight: normal }
+
+  .dataTables_filter input {
+    padding: em(5) em(10);
+    border: rem(1) solid #eee;
+    border-radius: rem(2);
+    transition: all 0.3s ease;
+
+    &:focus {
+      border-color: $info;
+    }
+  }
+
+  .dataTables_length {
+    margin: em(15) auto;
+    select {
+      padding: em(3) em(7);
+    }
+  }
+
+  table.dataTable {
+    border: rem(1) solid #eee;
+    margin-top: em(20);
+
+    thead th {
+      border-color: $theme-border-color;
+    }
+    th, td {
+      padding: em(15) em(20);
+    }
+
+    tfoot {
+      th {
+        border-top: rem(1) solid #eee;
+      }
+    }
+
+    thead {
+      th {
+        border-top: 0
+      }
+      .sorting,
+      .sorting_asc,
+      .sorting_desc {
+        background: none;
+        position: relative;
+
+        &:before {
+          @include position(absolute, 50% em(10) null null );
+          transform: translateY(-50%);
+          font-family: "Material Icons";
+          font-feature-settings: 'liga';
+          font-size: em(18);
+        }
+      }
+
+      .sorting_asc::before { content: 'expand_less' }
+      .sorting_desc::before { content: 'expand_more' }
+      .sorting::before { content: 'sort'; opacity: 0.1; }
+    }
+
+  }
+
+  .dataTables_info {
+    margin-top: em(20);
+  }
+
+  .dataTables_paginate {
+    margin-top: em(30);
+    padding: 0;
+    border: rem(1) solid #eee;
+
+    .paginate_button {
+      transition: all 0.3s ease;
+      border: 0;
+
+      &:hover {
+        background: none;
+        border: 0;
+        color: $body-color !important;
+      }
+
+      &:focus { box-shadow:none }
+
+      &.current {
+        background: $primary;
+        border: 0;
+        border-radius: 0;
+        color: #fff !important;
+
+        &:hover {
+          background: darken( $primary, 10%);
+          border: 0;
+          color: #fff !important;
+        }
+      }
+
+      &.next,
+      &.previous {
+        border: 0;
+      }
+    }
+  }
+}
+
+/* Bootstrap Tables
+========================*/
+.bootstrap-table {
+  position: relative;
+
+  .btn {
+    cursor: pointer;
+    i {
+      &:before {
+        font-family: "Material Icons";
+        display: block;
+        line-height: 1;
+        font-style: normal;
+        font-size: em(20,15);
+      }
+    }
+
+    &[name="refresh"] {
+      i:before {
+        content: "refresh";
+      }
+    }
+
+    &[name="toggle"] {
+      i:before {
+        content: "dehaze";
+      }
+    }
+
+    i.glyphicon-th:before {
+      content: "apps";
+      display: inline;
+      vertical-align: middle;
+    }
+  }
+}
+
+.fixed-table-toolbar {
+  display: inline-flex;
+  @include position(absolute, 0 em(15) null null);
+  z-index: 1;
+  transform: translateY(-100%);
+  margin-top: em(-10);
+
+  .search {
+    order: -1;
+  }
+
+  .btn-group {
+    &, & > .btn-group {
+      display: flex;
+    }
+    .btn {
+      display: inline-flex;
+    }
+  }
+
+  .search, .columns {
+    margin-top: 0;
+    margin-bottom: 0;
+    // line-height: em(20);
+
+    .btn {
+      padding: 0 em(10);
+    }
+
+    .dropdown-menu  {
+      input {
+        display: none;
+      }
+      label {
+        cursor:pointer;
+
+        &:before {
+          display: inline-block;
+          line-height: 1;
+          vertical-align: middle;
+          text-align: center;
+          @include size( em(20) );
+          content: "";
+          font-family: "feather";
+          font-feature-settings: 'liga';
+          background: none;
+          border: rem(2) solid #eee;
+          margin-right: em(10);
+          transition: all 0.3s ease;
+          color: #fff;
+        }
+
+        &.checkbox-checked::before {
+          content: "\e925";
+          background: $primary;
+          color: #fff;
+          border-color: $primary;
+        }
+      }
+    }
+  }
+
+  @include mobile {
+    display: none;
+  }
+
+  body.rtl & {
+    left: 0;
+    right: auto;
+  }
+}
+.fixed-table-container {
+  border: 0;
+  border-bottom: rem(1) solid #eee;
+
+  thead th {
+    .both {
+      background: none;
+      position: relative;
+      &:before {
+        content: '';
+        @include position(absolute, 50% em(10) null null );
+        transform: translateY(-50%);
+        font-family: "Material Icons";
+        font-feature-settings: 'liga';
+        font-size: em(18);
+      }
+    }
+
+    .both.asc::before { content: 'expand_less'; opacity: 1 }
+    .both.desc::before { content: 'expand_more'; opacity: 1 }
+    .both::before { content: 'sort'; opacity: 0.1 }
+  }
+}
+
+.bootstrap-table .table {
+  border: rem(1) solid #eee;
+
+  > thead > tr > th {
+    border-bottom: rem(1) solid #eee;
+  }
+}
+
+/* Responsive Tables
+========================*/
+.responsive-utilities .is-hidden {
+  color: #ccc;
+  background-color: #f9f9f9 !important;
+}
+
+.responsive-utilities .is-visible {
+  color: #468847;
+  background-color: #dff0d8 !important;
+}
+
+.tablesaw {
+  .tablesaw-sortable-head {
+    &:before {
+      content:'';
+      @include position(absolute, 50% em(10) null null );
+      transform: translateY(-50%);
+      font-family: "Material Icons";
+      font-feature-settings: 'liga';
+      font-size: em(18);
+    }
+  }
+
+
+  .tablesaw-sortable-ascending:before { content: 'expand_less'; }
+  .tablesaw-sortable-descending:before { content: 'expand_more'; }
+}
+
+// .tablesaw-toolbar {
+//   margin-right: 20px;
+//   margin-bottom: 10px;
+// }
+
+.tablesaw-bar {
+  .tablesaw-columntoggle-popup {
+    .btn-group {
+      display: inline-block;
+      margin: em(10) 0 em(5) 0;
+      label {
+        height: auto;
+        line-height: 2rem;
+        input {
+          height: auto;
+          position: relative;
+          top: em(2);
+        }
+      }
+    }
+  }
+}
+
+.tablesaw-bar .tablesaw-bar-section .btn-select {
+  padding: em(5, 12.25) em(10, 12.25);
+  padding-right: em(50, 12.25);
+  font-weight: normal;
+  position: relative;
+  font-family: $font-family-base;
+  background: #eee;
+  text-transform: none;
+
+  span {
+    line-height: em(20, 12.25);
+    height: em(20, 12.25);
+    display: block;
+  }
+
+  select {
+    cursor: pointer;
+  }
+
+  &:after { display: none; }
+
+  &:before {
+    content: 'expand_more';
+    font-family: "Material Icons";
+    font-feature-settings: 'liga';
+    font-size: em(18, 12.25);
+    text-transform: lowercase;
+    @include position(absolute, 50% em(10, 12.25) null null);
+    transform: translateY(-50%);
+    line-height: 1;
+  }
+}
+
+.tablesaw-sortable-arrow {
+  display: none;
+}
+
+.tablesaw-swipe .tablesaw-cell-persist {
+  border-right: rem(1) solid #eee;
+}
+
+
+/* Editable
+========================*/
+.table-editable,
+.table-editable-inline {
+  .tabledit-toolbar {
+    display: inline !important;
+    .tabledit-save-button, .tabledit-confirm-button, .tabledit-restore-button { margin-left: em(8,12); }
+
+    .btn-group {
+      .btn {
+        cursor: pointer;
+        span.glyphicon {
+          &::before {
+            font-family: "feather";
+            display: inline-block;
+            line-height: 1;
+            font-style: normal;
+            font-size: em(16,12);
+            font-weight: 300;
+            position: relative;
+            top: 3px;
+          }
+        }
+
+        .glyphicon-pencil::before {
+          content: "\e950";
+        }
+
+        .glyphicon-trash::before {
+          content: "\e9cd";
+        }
+
+      }
+    }
+  }
+  tr.tabledit-deleted-row {
+    display: none;
+  }
+}
+
+
+/* Footable
+========================*/
+.footable {
+  .footable-sortable {
+    .fooicon {
+      display: none;
+    }
+
+    &:before {
+      content: 'sort';
+      opacity: 0;
+      font-family: 'Material Icons';
+      font-feature-settings: 'liga';
+      @include position(absolute, 50% em(10) null null);
+      transform: translateY(-50%);
+      font-size: em(18);
+      transition: all 0.3s ease;
+    }
+
+    &:hover::before {
+      opacity: 1;
+    }
+
+    &.footable-asc::before { content: 'expand_more'; opacity: 1; }
+    &.footable-desc::before { content: 'expand_less'; opacity: 1;  }
+  }
+
+  .footable-filtering {
+    th { border-top: none; }
+    form.form-inline {
+      margin-top: 0;
+      margin-bottom: em(15);
+      float: right;
+    }
+  }
+
+  .checkbox {
+    input[type="checkbox"] {
+      opacity: 1;
+    }
+  }
+
+  .footable-first-visible {
+    span{
+      &::before{
+        display: none;
+      }
+
+      &::after {
+        font-family: "FontAwesome";
+        display: block;
+        font-style: normal;
+        font-size: em(18);
+        font-weight: 300;
+      }
+    }
+
+    .fooicon-plus::after {
+      content: "\f067";
+    }
+
+    .fooicon-minus::after {
+      content: "\f068";
+    }
+  }
+
+  .input-group-btn {
+    display: inline-block;
+    .btn {
+      span.fooicon {
+        &::before { display: none; }
+        &::after {
+          font-family: "FontAwesome";
+          display: block;
+          font-style: normal;
+          font-size: em(16, 15);
+          font-weight: 300;
+        }
+      }
+
+      .fooicon-search::after {
+        content: "\f002";
+      }
+
+    }
+  }
+
+  .footable-paging {
+    span.label {
+      font-size: em(11);
+      background: rgba(0,0,0,.7);
+      color: #fff;
+    }
+    .pagination {
+      margin: auto;
+      display: inline-block;
+
+      > li.active > a {
+        background: #51d2b7;
+        border-color: #51d2b7;
+        color: #fff;
+      }
+
+      li {
+        a {
+          position: relative;
+          display: block;
+          padding: 0.5rem 0.75rem;
+          margin-left: em(-1);
+          line-height: 1.25;
+          color: #51d2b7;
+          background-color: #fff;
+          border: rem(1) solid #ddd;
+
+          &:hover {
+            background: #51d2b7;
+            border-color: #51d2b7;
+            color: #fff;
+          }
+        }
+
+        &.footable-page-nav[data-page="first"] {
+          a {
+            border-top-left-radius: 0.25rem;
+            border-bottom-left-radius: 0.25rem;
+          }
+        }
+
+        &.footable-page-nav[data-page="last"] {
+          a {
+            border-top-right-radius: 0.25rem;
+            border-bottom-right-radius: 0.25rem;
+          }
+        }
+
+      }
+    }
+  }
+}
+
+table.footable > thead > tr.footable-filtering > th ul.dropdown-menu > li > a.checkbox input[type="checkbox"] {
+  line-height: 1em;
+  height: 1em;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.footable-filtering {
+  .footable-filtering-search {
+    .dropdown-menu {
+      li {
+        a {
+          display: block;
+          width: 100%;
+          padding: em(3) 1.42857em;
+          padding-top: 0.35714em;
+          padding-bottom: 0.35714em;
+          clear: both;
+          font-weight: normal;
+          color: #888;
+          text-align: inherit;
+          white-space: nowrap;
+          background: none;
+          border: 0;
+
+          &:hover {
+            color: #555;
+            text-decoration: none;
+            background-color: #f7fafc;
+          }
+
+          label {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}