--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/assets/scss/components/_tabs.scss	Sat May 31 09:21:51 2025 +0800
@@ -0,0 +1,201 @@
+// main: ../style.scss
+/********************************
+*********************************
+Tabs
+*********************************
+*********************************/
+.nav-tabs,
+.nav-pills {
+  a {
+    color: $headings-color;
+  }
+}
+
+.nav-tabs {
+  position: relative;
+
+
+  li a {
+    font-weight: 600;
+    color: #313a46;
+    &:hover {
+      background: rgba(0,0,0,0.03);
+    }
+  }
+
+  li.active a,
+  li.active a:focus,
+  li.active a:hover {
+    color: $color-scheme;
+    border-color: #ddd #ddd #fff;
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    border-color: #ddd #ddd #fff;
+    background: none;
+  }
+
+  .list-icon {
+    font-size: rem(18);
+    vertical-align: middle;
+    position: relative;
+    top: rem(-1);
+  }
+}
+
+.tab-content {
+  padding-top: em(20);
+  padding: 20px;
+  background: #fff;
+}
+
+
+/* Vertical Tabs
+========================*/
+.tabs-vertical {
+  display: flex;
+  .nav-tabs {
+    flex-basis: em(150);
+    border: 0;
+
+    li a {
+      border: 0;
+      border-radius: 2px;
+    }
+
+    li.active a,
+    li.active a:focus,
+    li.active a:hover,
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      color: #fff !important;
+      background: $color-scheme;
+      border: 0;
+    }
+  }
+
+  .tab-content {
+    flex: 1;
+    padding: 0 0 0 em(20);
+  }
+
+  body.rtl & {
+    .tab-content {
+      padding: 0 em(20) 0 0;
+    }
+  }
+}
+
+.tabs-vertical-right {
+  .nav-tabs { order: 2 }
+  .tab-content { order: 1; padding: 0 0 em(20) 0 }
+}
+
+.tabs-vertical-icons {
+  .nav-tabs {
+    flex-basis: auto;
+    text-align: center;
+  }
+}
+
+
+/* Tabs Bordered
+========================*/
+.tabs-bordered {
+  .nav-tabs {
+    border: 0;
+
+    li {
+      z-index: 1;
+
+      + li { margin-left: em(10) }
+    }
+
+    a {
+      font-weight: 500;
+      transition: all 0.3s ease;
+      border-radius: 0;
+      border: 0;
+      transition: all 0.3s;
+      position: relative;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    a:hover,
+    a:focus {
+      color: $color-scheme;
+      background: transparent;
+    }
+
+    li.active a,
+    li.active a:focus,
+    li.active a:hover,
+    .nav-link.active,
+    .nav-item.show .nav-link {
+      color: #fff !important;
+      border: 0;
+      background: $color-scheme;
+    }
+
+    a::before  {
+      @include position(absolute, 0 null null 0);
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background: #d2d8d6;
+      content: '';
+      transition: all 0.3s, transform 0.3s;
+      transition-timing-function: ease, cubic-bezier(0.7, 0, 0.3, 1);
+      transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
+    }
+
+    .nav-link.active::before {
+      transform: translate3d(0, 0, 0);
+    }
+
+    .nav-link.active::before,
+    li a:hover::before,
+    li a:focus::before {
+      background: $color-scheme;
+    }
+  }
+
+  body.rtl & {
+    li:first-child {
+      margin-left: em(10);
+    }
+  }
+}
+
+/* Page Tabs
+========================*/
+.tabs-page {
+  .nav-tabs {
+    border-bottom: 0;
+    .nav-link {
+      border: 1px solid rgba(#fff, .2);
+      background: rgba(#fff, .1);
+      border-radius: 0;
+      font-family: $headings-font-family;
+      color: rgba(#fff,.5);
+      font-weight: $font-weight-semibold;
+      padding: 1rem 3rem;
+      &.active {
+        background: $body-bg;
+        color: $color-scheme;
+        box-shadow: 0px -4px 0 0 $primary;
+      }
+    }
+    li {
+      margin-left: em(5);
+      margin-right: em(5);
+    }
+  }
+
+  body.rtl & {
+  }
+}