@aplus-frontend/ui 0.5.31 → 0.5.32

package/theme/splitter/index.less

@@ -0,0 +1,240 @@
+@import '../mixins/mixins.less';
+@import '../mixins/config.less';
+
+.split-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.split-bar-preview {
+  position: absolute;
+  z-index: 1;
+  display: none;
+  background: var(--basic-color-primary, #0070ff);
+  opacity: 0.2;
+  transition: none;
+  pointer-events: none;
+}
+
+@s: ~'@{ns}-splitter';
+@sb: ~'@{s}-bar';
+@sbp: ~'@{sb}-preview';
+@sbpa: ~'@{sbp}-active';
+@sbd: ~'@{sb}-dragger';
+@sbcb: ~'@{sb}-collapse-bar';
+@sbda: ~'@{sbd}-active';
+@offset: ~'--@{ns}-splitter-bar-preview-offset';
+
+.b(splitter, {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: @text-color-base;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  list-style: none;
+  font-family: inherit;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: stretch;
+
+  & > &-bar {
+    flex: none;
+    position: relative;
+    user-select: none;
+    .@{sbd} {
+      z-index: 1;
+      .split-center();
+      // Hover background
+      &::before {
+        content: "";
+        background: rgba(0, 0, 0, 0.04);
+        .split-center();
+      }
+      // Spinner
+      &::after {
+        content: "";
+        background: rgba(0, 0, 0, 0.15);
+        .split-center();
+      }
+      // Hover
+      &:hover:not(.@{sbda}) {
+        &::before {
+          background: #e6f4ff;
+        }
+      }
+      // Active
+      &-active {
+        z-index: 2px;
+        &::before {
+          background: #bae0ff;
+        }
+      }
+      &-disabled.@{sbd} {
+        z-index: 0;
+        &, &:hover, &-active {
+          cursor: default;
+          &::before {
+            background: rgba(0,0,0,0.04);
+          }
+        }
+        &::after {
+          display: none;
+        }
+      }
+    }
+    .@{sbcb} {
+      .split-center();
+      z-index: 1000;
+      background: rgba(0,0,0,0.04);
+      font-size: @font-size-small;
+      border-radius: 2px;
+      color: @text-color-base;
+      cursor: pointer;
+      opacity: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.15);
+      }
+
+      &:active {
+        background-color: #e6f4ff;
+      }
+    }
+    &:hover, &:active {
+      .@{sbcb} {
+        opacity: 1;
+      }
+    }
+  }
+
+  &-mask {
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+
+    &-horizontal {
+      cursor: col-resize;
+    }
+    &-vertical {
+      cursor: row-resize;
+    }
+  }
+
+  &-horizontal {
+    flex-direction: row;
+    & > .@{sb} {
+      width: 0;
+      .@{sbp} {
+        height: 100%;
+        width: @split-bar-size;
+        .split-bar-preview();
+        &-active {
+          display: block;
+          transform: translateX(var(@offset));
+        }
+      }
+      .@{sbd} {
+        cursor: col-resize;
+        height: 100%;
+        width: @split-trigger-size;
+
+        &::before {
+          height: 100%;
+          width: @split-bar-size;
+        }
+
+        &::after {
+          height: @split-bar-draggable-size;
+          width: @split-bar-size;
+        }
+      }
+      .@{sbcb} {
+        width: @font-size-small;
+        height: 24px;
+
+        &-start {
+          left: auto;
+          right: calc(@split-trigger-size / 2);
+          transform: translateY(-50%);
+        }
+
+        &-end {
+          left: calc(@split-trigger-size / 2);
+          right: auto;
+          transform: translateY(-50%);
+        }
+
+      }
+    }
+  }
+
+  &-vertical {
+    flex-direction: column;
+    & > .@{sb} {
+      height: 0;
+      .@{sbp} {
+        height: @split-bar-size;
+        width: 100%;
+        .split-bar-preview();
+        &.@{sbpa} {
+          display: block;
+          transform: translateY(var(@offset));
+        }
+      }
+      .@{sbd} {
+        cursor: row-resize;
+        width: 100%;
+        height: @split-trigger-size;
+
+        &::before {
+          width: 100%;
+          height: @split-bar-size;
+        }
+
+        &::after {
+          width: @split-bar-draggable-size;
+          height: @split-bar-size;
+        }
+      }
+      .@{sbcb} {
+        height: @font-size-small;
+        width: 24px;
+
+        &-start {
+          top: auto;
+          bottom: calc(@split-trigger-size / 2);
+          transform: translateX(-50%);
+        }
+
+        &-end {
+          top: calc(@split-trigger-size / 2);
+          bottom: auto;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+
+  &-panel {
+    overflow: auto;
+    padding: 0 1px;
+    scrollbar-width: thin;
+    box-sizing: border-box;
+
+    &-hidden {
+      padding: 0;
+      overflow: hidden;
+    }
+
+    &:has(.@{s}:only-child) {
+      overflow: hidden
+    }
+  }
+});