oxy-uni-ui 2.0.0 → 2.1.0

package/components/oxy-splitter-panel/index.scss

@@ -0,0 +1,366 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(splitter-panel) {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: visible;
+
+  @include e(content) {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  @include e(bar) {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    background-color: transparent;
+    transition: background-color 0.16s ease, box-shadow 0.16s ease;
+
+    &::before {
+      position: absolute;
+      z-index: 1;
+      content: '';
+      background-color: $-splitter-line-color;
+      border-radius: $-splitter-bar-radius;
+      transition: background-color 0.16s ease, opacity 0.16s ease;
+    }
+
+    &::after {
+      position: absolute;
+      z-index: 2;
+      content: '';
+      border-radius: $-splitter-bar-radius;
+      background-color: $-splitter-grip-active-color;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.16s ease, transform 0.16s ease;
+    }
+
+    &.has-action {
+      z-index: 6;
+    }
+
+    @include m(horizontal) {
+      width: $-splitter-touch-hit-size;
+      height: 100%;
+      flex-direction: column;
+      margin-left: calc(#{$-splitter-touch-hit-size} / -2);
+      margin-right: calc(#{$-splitter-touch-hit-size} / -2);
+      touch-action: pan-y;
+
+      &::before {
+        width: 1px;
+        height: 100%;
+        left: 50%;
+        top: 0;
+        transform: translateX(-50%);
+      }
+
+      &::after {
+        width: calc(#{$-splitter-grip-size} * 2);
+        height: calc(#{$-splitter-grip-length} * 2);
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) scaleY(0.68);
+      }
+    }
+
+    @include m(vertical) {
+      width: 100%;
+      height: $-splitter-touch-hit-size;
+      flex-direction: row;
+      margin-top: calc(#{$-splitter-touch-hit-size} / -2);
+      margin-bottom: calc(#{$-splitter-touch-hit-size} / -2);
+      touch-action: pan-x;
+
+      &::before {
+        width: 100%;
+        height: 1px;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      &::after {
+        width: calc(#{$-splitter-grip-length} * 2);
+        height: calc(#{$-splitter-grip-size} * 2);
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) scaleX(0.68);
+      }
+    }
+
+    @include when(draggable) {
+      background-color: transparent;
+
+      &::before {
+        opacity: 0.9;
+      }
+    }
+
+    @include when(static) {
+      opacity: 0.7;
+    }
+
+    @include when(moving) {
+      background-color: transparent;
+      box-shadow: none;
+
+      &.oxy-splitter-panel__bar--horizontal {
+        background: linear-gradient(
+          to right,
+          transparent calc(50% - (#{$-splitter-grip-size} * 3)),
+          #{$-splitter-bar-active-bg} calc(50% - (#{$-splitter-grip-size} * 3)),
+          #{$-splitter-bar-active-bg} calc(50% + (#{$-splitter-grip-size} * 3)),
+          transparent calc(50% + (#{$-splitter-grip-size} * 3))
+        );
+      }
+
+      &.oxy-splitter-panel__bar--vertical {
+        background: linear-gradient(
+          to bottom,
+          transparent calc(50% - (#{$-splitter-grip-size} * 3)),
+          #{$-splitter-bar-active-bg} calc(50% - (#{$-splitter-grip-size} * 3)),
+          #{$-splitter-bar-active-bg} calc(50% + (#{$-splitter-grip-size} * 3)),
+          transparent calc(50% + (#{$-splitter-grip-size} * 3))
+        );
+      }
+
+      &::before {
+        background-color: $-splitter-line-color;
+        opacity: 0.8;
+      }
+
+      &::after {
+        opacity: 0.14;
+        transform: translate(-50%, -50%) scale(0.82);
+      }
+    }
+
+  }
+
+  @include e(action) {
+    position: absolute;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(#{$-splitter-action-size} - 2rpx);
+    height: calc(#{$-splitter-action-size} * 1.72);
+    border-radius: $-splitter-action-radius;
+    border: 1px solid $-splitter-action-border;
+    background-color: $-splitter-action-bg;
+    box-shadow: $-splitter-action-shadow;
+    color: $-splitter-arrow-color;
+    transition: opacity 0.16s ease, box-shadow 0.16s ease;
+
+    .oxy-splitter-panel__bar--horizontal & {
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    .oxy-splitter-panel__bar--vertical & {
+      top: 50%;
+      left: 50%;
+      width: calc(#{$-splitter-action-size} * 1.72);
+      height: calc(#{$-splitter-action-size} - 2rpx);
+      transform: translate(-50%, -50%);
+    }
+
+    &:active {
+      opacity: 0.88;
+    }
+  }
+
+  @include e(action-group) {
+    position: absolute;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: $-splitter-action-group-radius;
+    border: 1px solid $-splitter-action-border;
+    background-color: $-splitter-action-bg;
+    box-shadow: $-splitter-action-shadow;
+    overflow: hidden;
+    transition: opacity 0.16s ease, box-shadow 0.16s ease;
+
+    .oxy-splitter-panel__bar--horizontal & {
+      left: 50%;
+      top: 50%;
+      width: calc(#{$-splitter-action-size} * 1.9);
+      height: calc(#{$-splitter-action-size} * 1.18);
+      transform: translate(-50%, -50%);
+      flex-direction: row;
+    }
+
+    .oxy-splitter-panel__bar--vertical & {
+      left: 50%;
+      top: 50%;
+      width: calc(#{$-splitter-action-size} * 1.18);
+      height: calc(#{$-splitter-action-size} * 1.9);
+      transform: translate(-50%, -50%);
+      flex-direction: column;
+    }
+  }
+
+  @include e(action-segment) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    height: 100%;
+    color: $-splitter-arrow-color;
+
+    &:active {
+      background-color: $-splitter-action-active-bg;
+    }
+  }
+
+  @include e(action-separator) {
+    flex-shrink: 0;
+    background-color: $-splitter-action-border;
+
+    .oxy-splitter-panel__bar--horizontal & {
+      width: 1px;
+      height: 64%;
+    }
+
+    .oxy-splitter-panel__bar--vertical & {
+      width: 64%;
+      height: 1px;
+    }
+  }
+
+  @include e(grip) {
+    position: absolute;
+    z-index: 3;
+    pointer-events: none;
+    border-radius: $-splitter-grip-radius;
+    background-color: $-splitter-grip-color;
+    opacity: 0.9;
+    transition: background-color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
+
+    .oxy-splitter-panel__bar--horizontal & {
+      top: 50%;
+      left: 50%;
+      width: $-splitter-grip-size;
+      height: $-splitter-grip-length;
+      transform: translate(-50%, -50%);
+      box-shadow:
+        0 calc(#{$-splitter-grip-gap} * -1) 0 0 $-splitter-grip-color,
+        0 $-splitter-grip-gap 0 0 $-splitter-grip-color;
+    }
+
+    .oxy-splitter-panel__bar--vertical & {
+      top: 50%;
+      left: 50%;
+      width: $-splitter-grip-length;
+      height: $-splitter-grip-size;
+      transform: translate(-50%, -50%);
+      box-shadow:
+        calc(#{$-splitter-grip-gap} * -1) 0 0 0 $-splitter-grip-color,
+        $-splitter-grip-gap 0 0 0 $-splitter-grip-color;
+    }
+  }
+
+  .oxy-splitter-panel__bar.is-moving {
+    .oxy-splitter-panel__grip {
+      background-color: $-splitter-grip-active-color;
+      opacity: 1;
+
+      .oxy-splitter-panel__bar--horizontal & {
+        box-shadow:
+          0 calc(#{$-splitter-grip-gap} * -1) 0 0 $-splitter-grip-active-color,
+          0 $-splitter-grip-gap 0 0 $-splitter-grip-active-color;
+      }
+
+      .oxy-splitter-panel__bar--vertical & {
+        box-shadow:
+          calc(#{$-splitter-grip-gap} * -1) 0 0 0 $-splitter-grip-active-color,
+          $-splitter-grip-gap 0 0 0 $-splitter-grip-active-color;
+      }
+    }
+
+    .oxy-splitter-panel__action,
+    .oxy-splitter-panel__action-group {
+      opacity: 0.76;
+    }
+  }
+
+  :deep(.oxy-splitter-panel__icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+}
+
+.oxy-theme-dark {
+  @include b(splitter-panel) {
+    @include e(bar) {
+      background-color: transparent;
+
+      &::before {
+        background-color: $-splitter-bar-dark-border;
+      }
+
+      &::after {
+        background-color: $-splitter-grip-dark-color;
+      }
+
+      &.is-moving {
+        box-shadow: 0 0 0 1px $-splitter-bar-dark-border;
+      }
+    }
+
+    @include e(action) {
+      background-color: $-dark-background4;
+      border-color: $-dark-border-color;
+      color: $-dark-color3;
+    }
+
+    @include e(action-group) {
+      background-color: $-dark-background4;
+      border-color: $-dark-border-color;
+    }
+
+    @include e(action-segment) {
+      color: $-dark-color3;
+
+      &:active {
+        background-color: $-splitter-action-dark-active-bg;
+      }
+    }
+
+    @include e(action-separator) {
+      background-color: $-dark-border-color;
+    }
+
+    @include e(grip) {
+      background-color: $-splitter-grip-dark-color;
+
+      .oxy-splitter-panel__bar--horizontal & {
+        box-shadow:
+          0 calc(#{$-splitter-grip-gap} * -1) 0 0 $-splitter-grip-dark-color,
+          0 $-splitter-grip-gap 0 0 $-splitter-grip-dark-color;
+      }
+
+      .oxy-splitter-panel__bar--vertical & {
+        box-shadow:
+          calc(#{$-splitter-grip-gap} * -1) 0 0 0 $-splitter-grip-dark-color,
+          $-splitter-grip-gap 0 0 0 $-splitter-grip-dark-color;
+      }
+    }
+  }
+}