misp-ui-library-test 0.0.1

package/dist/theme-chalk/tabs/index.scss

@@ -0,0 +1,112 @@
+
+@import '../variables.scss';
+@import '../mixins.scss';
+
+@include b(tabs) {
+  @include e(header) {
+    padding: 0;
+    position: relative;
+    margin: 0 0 15px;
+  }
+
+  @include e(nav-wrap) {
+    overflow: hidden;
+    margin-bottom: -1px;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: $primary-line;
+      z-index: 1;
+    }
+  }
+
+  @include e(nav-scroll) {
+    overflow: hidden;
+  }
+
+  @include e(nav) {
+    white-space: nowrap;
+    position: relative;
+    transition: transform 0.3s;
+    display: flex;
+    align-items: center;
+  }
+
+  @include e(item) {
+    padding: 0 20px;
+    height: 40px;
+    box-sizing: border-box;
+    line-height: 40px;
+    font-size: 14px;
+    color: $sd-text;
+    cursor: pointer;
+    position: relative;
+
+    &:hover {
+      color: $primary-blue;
+    }
+
+    @include when(active) {
+      color: $primary-blue;
+    }
+
+    @include when(disabled) {
+      color: $fr-text;
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(content) {
+    overflow: hidden;
+    position: relative;
+  }
+
+  @include when(card) {
+    .ui-tabs__header {
+      background-color: $sd-bg;
+    }
+
+    .ui-tabs__item {
+      border: 1px solid $primary-line;
+      background-color: $white;
+
+      &.is-active {
+        background-color: $white;
+        border-bottom-color: $white;
+      }
+    }
+  }
+
+  @include when(border-card) {
+    background: $white;
+    border: 1px solid $primary-line;
+    border-radius: 4px;
+
+    .ui-tabs__header {
+      padding: 0;
+      border-bottom: 1px solid $primary-line;
+    }
+
+    .ui-tabs__item {
+      padding: 0 20px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+      border-right: 1px solid $primary-line;
+
+      &.is-active {
+        color: $primary-blue;
+      }
+    }
+  }
+}
+
+@include b(tab-pane) {
+  width: 100%;
+}