@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/styles/components/scrollbar/_index.less

@@ -0,0 +1,116 @@
+/*
+ * @description: 下拉菜单 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-scrollbar {
+  @ns: @{componentPrefix}-scrollbar;
+
+  // base
+  & {
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    &[data-always = 'true'] {
+      .e(bar, {
+        opacity: 1;
+      }, @ns);
+    }
+
+    &[data-native="true"] {
+      .e(wrapper, {
+        &::-webkit-scrollbar {
+          width: 6px;
+          display: unset;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background-color: var(--pixel-color-gray-dark); /* 设置滚动条滑块的背景颜色 */
+          border-radius: 9999px;
+
+          &:hover,
+          &:active {
+            background-color: var(--pixel-color-gray-deep-dark); /* 设置滚动条滑块的背景颜色 */
+          }
+        }
+      }, @ns);
+    }
+
+    &:hover {
+      .e(bar, {
+        opacity: 1;
+      }, @ns);
+    }
+  }
+
+  // ele wrapper
+  .e(wrapper, {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+
+    }
+  });
+
+  // ele bar
+  .e(bar, {
+    user-select: none;
+    opacity: 0;
+    position: absolute;
+    transition: all .3s ease;
+    background-color: transparent;
+
+    .is(active, {
+      opacity: 1;
+      .e(thumb, {
+        background-color: var(--pixel-color-gray-dark);
+      }, @ns);
+    });
+
+    .is(vertical, {
+      width: 6px;
+      height: 100%;
+      right: 0;
+      top: 0;
+
+      .e(thumb, {
+        position: absolute;
+        width: inherit;
+      }, @ns);
+
+      .is(outside, {
+        left: 100%;
+      });
+    });
+
+    .is(horizontal, {
+      height: 6px;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+
+      .e(thumb, {
+        position: absolute;
+        height: inherit;
+      }, @ns);
+
+      .is(outside, {
+        top: 100%;
+      });
+    });
+  });
+
+  // ele thumb
+  .e(thumb, {
+    background-color: var(--pixel-color-gray);
+
+    &:hover {
+      background-color: var(--pixel-color-gray-dark);
+    }
+  });
+}

package/packages/styles/components/switch/_index.less

@@ -0,0 +1,228 @@
+/*
+ * @description: 开关 UI 组件样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-switch {
+  @ns: @{componentPrefix}-switch;
+
+  // var
+  & {
+    --pixel-switch-color: unset;
+  }
+
+  // base
+  & {
+    .useBorderBox();
+    .useFlexRCC(5);
+
+    user-select: none;
+    font-size: 17px;
+    height: 24px;
+    .e(input, {
+      display: none;
+    });
+  }
+
+  // ele label
+  .e(label, {
+    font-size: var(--pixel-font-size-default);
+    transition: color .3s ease;
+    .mIs(left, active, {
+      color: var(--pixel-switch-color);
+    });
+    .mIs(right, active, {
+      color: var(--pixel-switch-color);
+    });
+  });
+
+  // ele inner
+  & {
+    .e(inner, {
+      height: 100%;
+      min-width: 45px;
+      flex: 1;
+      background: var(--pixel-color-gray);
+      position: relative;
+      display: flex;
+      align-items: center;
+      transition: background-color .5s ease;
+    });
+    .is(checked, {
+      .e(inner, {
+        background: var(--pixel-switch-color);
+      }, @ns);
+    });
+  }
+
+  // ele trigger
+  & {
+    .e(trigger, {
+      position: absolute;
+      left: 0;
+      .useFlexRCC();
+      height: 20px;
+      width: 20px;
+      background: white;
+      margin: 0 2px;
+      transition: all .2s ease;
+      & * {
+        font-size: 16px;
+        color: var(--pixel-switch-color);
+      }
+    });
+
+    &:active {
+      .e(trigger, {
+        width: 25px;
+      }, @ns);
+    }
+
+    .is(checked, {
+      .e(trigger, {
+        left: 100%;
+        transform: translateX(-120%);
+      }, @ns);
+    });
+  }
+
+  // ele text
+  & {
+    .e(text, {
+      flex: 1;
+      color: var(--pixel-color-white);
+      text-align: end;
+      padding: 0 7px 1px 26px;
+      .filter-overflow();
+    });
+
+    .is(checked, {
+      .e(text, {
+        padding-left: 7px;
+        padding-right: 26px;
+        text-align: start;
+      }, @ns);
+    });
+  }
+
+  // modifier size small
+  .m(small, {
+    height: 20px;
+    font-size: var(--pixel-font-size-small);
+
+    // trigger
+    & {
+      .e(trigger, {
+        width: 16px;
+        height: 16px;
+        left: 0;
+        & * {
+          font-size: var(--pixel-font-size-small);
+        }
+      }, @ns);
+
+      &:active {
+        .e(trigger, {
+          width: 20px;
+        }, @ns);
+      }
+
+      .is(checked, {
+        .e(trigger, {
+          left: 100%;
+          transform: translateX(-120%);
+        }, @ns);
+      })
+    }
+
+    // text
+    & {
+      .e(text, {
+        flex: 1;
+        color: var(--pixel-color-white);
+        text-align: end;
+        padding-left: 22px;
+        padding-right: 6px;
+        padding-bottom: 1px;
+        .filter-overflow();
+      }, @ns);
+      .is(checked, {
+        .e(text, {
+          padding-left: 6px;
+          padding-right: 22px;
+        }, @ns);
+      });
+    }
+
+    // inner
+    .e(inner, {
+      min-width: 40px;
+    }, @ns);
+  });
+
+  // modifier size large
+  .m(large, {
+    height: 28px;
+    min-width: 65px;
+    font-size: 17px;
+
+    & {
+      .e(trigger, {
+        width: 24px;
+        height: 24px;
+        & * {
+          font-size: 19px;
+        }
+      }, @ns);
+
+      &:active {
+        .e(trigger, {
+          width: 29px;
+        }, @ns);
+      }
+
+      .is(checked, {
+        .e(trigger, {
+          left: 100%;
+          transform: translateX(-115%);
+        }, @ns);
+      })
+    }
+
+    // text
+    & {
+      .e(text, {
+        flex: 1;
+        color: var(--pixel-color-white);
+        text-align: end;
+        padding-left: 32px;
+        padding-right: 8px;
+
+        .filter-overflow();
+      }, @ns);
+      .is(checked, {
+        .e(text, {
+          padding-left: 8px;
+          padding-right: 32px;
+          padding-bottom: 0;
+        }, @ns);
+      });
+    }
+
+    // inner
+    .e(inner, {
+      min-width: 55px;
+    }, @ns);
+  })
+
+}
+
+
+
+
+
+
+
+
+

package/packages/styles/components/tabs/_index.less

@@ -0,0 +1,340 @@
+/*
+ * @description: 选项卡样式
+ * @author: MC.Yang
+ */
+@import "../../mixn/_index";
+
+.@{componentPrefix}-tabs {
+  @ns: @{componentPrefix}-tabs;
+
+  // base
+  & {
+    .reset();
+    overflow: hidden;
+    background-color: var(--pixel-color-bg-container);
+  }
+
+  .e(header, {
+    &.is-left {
+      float: left;
+    }
+
+    &.is-right {
+      float: right;
+    }
+
+  })
+}
+
+.@{componentPrefix}-tabs__nav {
+  @ns: @{componentPrefix}-tabs__nav;
+
+  // mixin
+  .bar-track-pseudo(@w:100%, @h:100%, @top:auto, @right:auto, @bottom:auto, @left:auto) {
+    content: "";
+    width: @w;
+    height: @h;
+    position: absolute;
+    top: @top;
+    right: @right;
+    bottom: @bottom;
+    left: @left;
+    background-color: var(--pixel-color-gray);
+  }
+
+  // base
+  & {
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  .b(operations, {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    border-bottom: 1px solid var(--pixel-color-component-stroke);
+  });
+
+  .b(operations--left, {
+    left: 0;
+    z-index: 2;
+  });
+
+  .b(operations--right, {
+    right: 0;
+    z-index: 2;
+
+    .@{ns}-btn:first-child {
+      box-shadow: -10px 0 20px 5px #0000000d;
+    }
+  });
+
+  .b(container, {
+    position: relative;
+    width: 100%;
+    box-sizing: border-box;
+
+    &.is-addable {
+      margin-right: 40px;
+    }
+
+    .is(top, {
+      &::after {
+        .bar-track-pseudo(100%, 1px, auto, auto, 0, 0);
+        background-color: rgba(0, 0, 0, 0.06);
+      }
+    });
+
+    .is(bottom, {
+      &::after {
+        .bar-track-pseudo(100%, 1px, 0, auto, auto, 0);
+        background-color: rgba(0, 0, 0, 0.06);
+      }
+    });
+
+    .is(left, {
+      &::after {
+        .bar-track-pseudo(1px, 100%, 0, 0);
+        background-color: rgba(0, 0, 0, 0.06);
+      }
+    });
+
+    .is(right, {
+      &::after {
+        .bar-track-pseudo(1px, 100%, 0, auto, auto, 0);
+        background-color: rgba(0, 0, 0, 0.06);
+      }
+    });
+
+    .e(nav--card, {
+      &::after {
+        content: "";
+        background-color: transparent;
+      }
+    });
+  });
+
+  .b(scroll, {
+    position: relative;
+    display: flex;
+    flex: auto;
+    align-self: stretch;
+    overflow: hidden;
+    white-space: nowrap;
+    transform: translate(0);
+    z-index: 1;
+  });
+
+  .b(item, {
+    display: inline-flex;
+    align-items: center;
+    font: var(--pixel-font-size-body-medium);
+    color: var(--pixel-color-text-secondary);
+    position: relative;
+    overflow: hidden;
+    z-index: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+    padding: 0 16px;
+    height: 48px;
+    font-size: 14px;
+    font-weight: 400;
+    transition: all cubic-bezier(.38, 0, .24, 1) .2s;
+
+    .b(wrapper, {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      position: relative;
+    });
+
+    &-text-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .is(active, {
+      color: var(--pixel-color-brand-active);
+      font-weight: 600;
+    });
+
+    &:hover:not(.is-active):not(.is-disabled) {
+      color: var(--pixel-color-brand);
+    }
+
+    .is(disabled, {
+      color: rgba(0, 0, 0, 0.26);
+      cursor: not-allowed;
+
+      &:hover {
+        color: rgba(0, 0, 0, 0.26);
+      }
+    });
+  });
+
+  .m(card, {
+    background-color: #f3f3f3;
+    border-radius: 3px;
+    padding: 2px;
+
+    &.@{ns}-item {
+      padding: 8px 16px;
+      border-radius: 3px;
+      margin: 0;
+      transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+
+      &.is-active {
+        color: var(--pixel-color-brand);
+        background-color: #fff;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      &:not(.is-active):hover {
+        background-color: rgba(255, 255, 255, 0.6);
+      }
+    }
+  });
+
+  .b(wrap, {
+    position: relative;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    min-width: 100%;
+
+    &.is-smooth {
+      transition: transform .24s cubic-bezier(0, 0, .15, 1);
+    }
+
+    &.is-vertical {
+      flex-direction: column;
+    }
+  });
+
+  .b(btn, {
+    width: 40px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border: none;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.6);
+    font: var(--pixel-font-size-body-large);
+    transition: all .2s cubic-bezier(.38, 0, .24, 1);
+    z-index: 1;
+    opacity: 1;
+
+    &:hover {
+      color: var(--pixel-color-brand);
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+
+    &.@{componentPrefix}-size-small {
+      height: 40px;
+    }
+
+    &.@{componentPrefix}-size-normal {
+      height: 48px;
+    }
+
+    &.@{componentPrefix}-size-large {
+      height: 56px;
+    }
+
+    &--left {
+      border-right: 1px solid rgba(0, 0, 0, 0.06);
+      box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.04);
+
+      &.fade-enter,
+      &.fade-enter-from,
+      &.fade-leave-to {
+        transform: translateX(-50px);
+      }
+    }
+
+    &--right {
+      border-left: 1px solid rgba(0, 0, 0, 0.06);
+      box-shadow: -2px 0 8px 0 rgba(0, 0, 0, 0.04);
+
+      &.fade-enter,
+      &.fade-enter-from,
+      &.fade-leave-to {
+        transform: translateX(50px);
+      }
+    }
+  });
+
+  .b(add-btn, {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 3px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.6);
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.06);
+      color: var(--pixel-color-brand);
+    }
+  });
+
+  .b(remove-btn, {
+    border-radius: 50%;
+    padding: 2px;
+    font-size: 12px;
+    margin-left: 4px;
+    color: rgba(0, 0, 0, 0.4);
+    transition: all 0.2s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.06);
+      color: rgba(0, 0, 0, 0.9);
+    }
+  });
+}
+
+.@{componentPrefix}-tabs__bar {
+  @ns: @{componentPrefix}-tabs__bar;
+
+  // base
+  & {
+    position: absolute;
+    background-color: var(--pixel-color-brand);
+    z-index: 1;
+    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    border-radius: 2px;
+
+    .is(top, {
+      bottom: 0;
+      left: 0;
+      height: 2px;
+    });
+
+    .is(bottom, {
+      top: 0;
+      left: 0;
+      height: 2px;
+    });
+
+    .is(left, {
+      top: 0;
+      right: 0;
+      width: 2px;
+    });
+
+    .is(right, {
+      top: 0;
+      left: 0;
+      width: 2px;
+    });
+  }
+}