@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/styles/mixin/_config.scss

@@ -0,0 +1,7 @@
+/**
+ * SCSS 配置项：命名空间以及BEM
+ */
+$namespace: 'wd';
+$elementSeparator: '__';
+$modifierSeparator: '--';
+$state-prefix: 'is-';

package/styles/mixin/_function.scss

@@ -0,0 +1,44 @@
+/**
+ * 辅助函数
+ */
+@use "sass:meta";
+@use "sass:string";
+@use 'config';
+
+/* 转换成字符串 */
+@function selectorToString($selector) {
+  $selector: meta.inspect($selector);
+  $selector: string.slice($selector, 2, -2);
+
+  @return $selector;
+}
+
+/* 判断是否存在 Modifier */
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, config.$modifierSeparator) {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/* 判断是否存在伪类 */
+@function containsPseudo($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, ':') {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+
+
+

package/styles/mixin/_mixin.scss

@@ -0,0 +1,473 @@
+@use "../variable";
+
+/**
+ * 混合宏
+ */
+@use "config";
+@use "function";
+
+$B: null;
+
+/**
+  * BEM，定义块（b)
+  */
+@mixin b($block) {
+  $B: config.$namespace + "-"+ $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin e($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if function.containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + config.$elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + config.$elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+
+
+/* 此方法用于生成穿透样式 */
+
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin edeep($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if function.containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + config.$elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        :deep() {
+          #{$selectors} {
+            @content;
+          }
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + config.$elementSeparator + $item + ","};
+    }
+
+    :deep() {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+
+/* 定义状态（m） */
+@mixin m($modifier...) {
+  $selectors: "";
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + config.$modifierSeparator + $item + ","};
+  }
+
+  @at-root {
+    #{$selectors} {
+      @content;
+    }
+  }
+}
+
+/* 过渡帧（enter 与 leave-to） */
+@mixin transitionFrame($names...) {
+  $selector: &;
+  $selectors: "";
+
+  @each $name in $names {
+    $selectors: #{$selectors + $selector + config.$modifierSeparator + $name + "-enter,"};
+    $selectors: #{$selectors + $selector + config.$modifierSeparator + $name + "-leave-to,"};
+  }
+
+  @at-root {
+    #{$selectors} {
+      @content;
+    }
+  }
+}
+
+/* 过渡激活态（enter-active 与 leave-active） */
+@mixin transitionActive($names...) {
+  $selector: &;
+  $selectors: "";
+
+  @each $name in $names {
+    $selectors: #{$selectors + $selector + config.$modifierSeparator + $name + "-enter-active,"};
+    $selectors: #{$selectors + $selector + config.$modifierSeparator + $name + "-leave-active,"};
+  }
+
+  @at-root {
+    #{$selectors} {
+      @content;
+    }
+  }
+}
+
+/* 定义状态（m） */
+@mixin mdeep($modifier...) {
+  $selectors: "";
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + config.$modifierSeparator + $item + ","};
+  }
+
+  @at-root {
+    :deep() {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+/* 对于需要需要嵌套在 m 底下的 e，调用这个混合宏，一般在切换整个组件的状态，如切换颜色的时候 */
+@mixin me($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if function.containsModifier($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + config.$elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + config.$elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+/* 状态，生成 is-$state 类名 */
+@mixin when($states...) {
+  @at-root {
+    @each $state in $states {
+      &.#{config.$state-prefix + $state} {
+        @content;
+      }
+    }
+  }
+}
+
+/**
+  * 常用混合宏
+  */
+
+/* 单行超出隐藏 */
+@mixin lineEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 多行超出隐藏 */
+@mixin multiEllipsis($lineNumber: 3) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lineNumber;
+  overflow: hidden;
+}
+
+/* 清除浮动 */
+@mixin clearFloat {
+  &::after {
+    display: block;
+    content: "";
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden;
+  }
+}
+
+/* 0.5px 边框 指定方向*/
+@mixin halfPixelBorder($direction: "bottom", $left: 0, $color: variable.$border-main) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    display: block;
+    content: "";
+
+    @if ($left==0) {
+      width: 100%;
+    }
+
+    @else {
+      width: calc(100% - #{$left} * 2);
+    }
+
+    height: variable.$stroke-main;
+    left: $left;
+
+    @if ($direction=="bottom") {
+      bottom: 0;
+    }
+
+    @else {
+      top: 0;
+    }
+
+    transform: scaleY(0.5);
+    background: $color;
+  }
+}
+
+
+/* 0.5px 边框 环绕 */
+@mixin halfPixelBorderSurround($color: variable.$border-main) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    display: block;
+    content: ' ';
+    pointer-events: none;
+    width: 200%;
+    height: 200%;
+    left: 0;
+    top: 0;
+    border: variable.$stroke-main solid $color;
+    transform: scale(0.5);
+    box-sizing: border-box;
+    transform-origin: left top;
+    border-radius: inherit;
+  }
+}
+
+/* 1px 边框 指定方向 */
+@mixin pixelBorder($direction: "bottom", $left: 0, $color: variable.$border-main, $width: variable.$stroke-main) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    display: block;
+    content: "";
+
+    @if ($left==0) {
+      width: 100%;
+    }
+
+    @else {
+      width: calc(100% - #{$left} * 2);
+    }
+
+    height: $width;
+    left: $left;
+
+    @if ($direction=="bottom") {
+      bottom: 0;
+    }
+
+    @else {
+      top: 0;
+    }
+
+    background: $color;
+  }
+}
+
+/* 1px 边框 环绕 */
+@mixin pixelBorderSurround($color: variable.$border-main, $style: solid, $width: variable.$stroke-main) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    display: block;
+    content: ' ';
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    border: $width $style $color;
+    box-sizing: border-box;
+    border-radius: inherit;
+  }
+}
+
+@mixin buttonClear {
+  outline: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  background: transparent;
+}
+
+/**
+  * 三角形实现尖角样式，适用于背景透明情况
+  * @param $size 三角形高，底边为 $size * 2
+  * @param $bg 三角形背景颜色
+  */
+@mixin triangleArrow($size, $bg) {
+  @include e(arrow) {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  @include e(arrow-down) {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-top: $size solid $bg;
+    transform: translateX(-50%);
+    bottom: calc(-1 * $size)
+  }
+
+  @include e(arrow-up) {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-bottom: $size solid $bg;
+    transform: translateX(-50%);
+    top: calc(-1 * $size)
+  }
+
+  @include e(arrow-left) {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-right: $size solid $bg;
+    transform: translateY(-50%);
+    left: calc(-1 * $size)
+  }
+
+  @include e(arrow-right) {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-left: $size solid $bg;
+    transform: translateY(-50%);
+    right: calc(-1 * $size)
+  }
+}
+
+/**
+  * 正方形实现尖角样式，适用于背景不透明情况
+  * @param $size 正方形边长
+  * @param $bg 正方形背景颜色
+  * @param $z-index z-index属性值，不得大于外部包裹器
+  * @param $box-shadow 阴影
+*/
+@mixin squareArrow($size, $bg, $z-index, $box-shadow) {
+  @include e(arrow) {
+    position: absolute;
+    width: $size;
+    height: $size;
+    z-index: $z-index;
+  }
+
+  @include e(arrow-down) {
+    transform: translateX(-50%);
+    bottom: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      bottom: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-up) {
+    transform: translateX(-50%);
+    top: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      top: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-left) {
+    transform: translateY(-50%);
+    left: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-right) {
+    transform: translateY(-50%);
+    right: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      right: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+}

package/styles/theme/base/color.scss

@@ -0,0 +1,210 @@
+:root,
+page,
+.wd-root-portal {
+  // 颜色
+  --wot-base-black: #000000FF;
+  --wot-base-white: #FFFFFFFF;
+  --wot-base-transparent: transparent;
+  // 蓝色
+  --wot-blue-1: #F5F8FFFF;
+  --wot-blue-2: #E5EDFFFF;
+  --wot-blue-3: #B8CFFFFF;
+  --wot-blue-4: #7CA4FFFF;
+  --wot-blue-5: #4480FFFF;
+  --wot-blue-6: #1C64FDFF;
+  --wot-blue-7: #164ED1FF;
+  --wot-blue-8: #1341ADFF;
+  --wot-blue-9: #0F3285FF;
+  --wot-blue-10: #0A235CFF;
+  --wot-blue-opac: #1C64FD14;
+
+  // 亮蓝
+  --wot-lightblue-1: #E8FBFFFF;
+  --wot-lightblue-2: #BFF2FFFF;
+  --wot-lightblue-3: #96E7FFFF;
+  --wot-lightblue-4: #6ED8FFFF;
+  --wot-lightblue-5: #45C7FFFF;
+  --wot-lightblue-6: #1CB2FDFF;
+  --wot-lightblue-7: #0D8CD6FF;
+  --wot-lightblue-8: #026AB0FF;
+  --wot-lightblue-9: #004E8AFF;
+  --wot-lightblue-10: #003563FF;
+  --wot-lightblue-opac: #1CB2FD14;
+
+  // 粉色
+  --wot-pink-1: #FFF0F6FF;
+  --wot-pink-2: #FFDEEBFF;
+  --wot-pink-3: #FCC2D7FF;
+  --wot-pink-4: #FAA2C1FF;
+  --wot-pink-5: #F783ACFF;
+  --wot-pink-6: #FF357CFF;
+  --wot-pink-7: #FF0A60FF;
+  --wot-pink-8: #E0004FFF;
+  --wot-pink-9: #B80040FF;
+  --wot-pink-10: #8F0032FF;
+  --wot-pink-opac: #FF357C14;
+
+  // 红色
+  --wot-red-1: #FFF5F5FF;
+  --wot-red-2: #FFE3E3FF;
+  --wot-red-3: #FFC9C9FF;
+  --wot-red-4: #FFA8A8FF;
+  --wot-red-5: #FB7C7CFF;
+  --wot-red-6: #F14646FF;
+  --wot-red-7: #DC2C2CFF;
+  --wot-red-8: #BC2626FF;
+  --wot-red-9: #A01515FF;
+  --wot-red-10: #790909FF;
+  --wot-red-opac: #F1464614;
+
+  // 橘红色
+  --wot-volcano-1: #FFF2E8FF;
+  --wot-volcano-2: #FFDABFFF;
+  --wot-volcano-3: #FFBF96FF;
+  --wot-volcano-4: #FFA16EFF;
+  --wot-volcano-5: #FF8045FF;
+  --wot-volcano-6: #FD5C1CFF;
+  --wot-volcano-7: #D63F0DFF;
+  --wot-volcano-8: #B02802FF;
+  --wot-volcano-9: #8A1900FF;
+  --wot-volcano-10: #630F00FF;
+  --wot-volcano-opac: #FD5C1C14;
+
+  // 橙色
+  --wot-orange-1: #FFF6EBFF;
+  --wot-orange-2: #FFE8CCFF;
+  --wot-orange-3: #FFD8A8FF;
+  --wot-orange-4: #FFC078FF;
+  --wot-orange-5: #FFA94DFF;
+  --wot-orange-6: #F57F00FF;
+  --wot-orange-7: #D05706FF;
+  --wot-orange-8: #A94605FF;
+  --wot-orange-9: #813604FF;
+  --wot-orange-10: #592503FF;
+  --wot-orange-opac: #F57F0014;
+
+  // 黄色
+  --wot-yellow-1: #FFFAF1FF;
+  --wot-yellow-2: #FDE5B4FF;
+  --wot-yellow-3: #FDD78CFF;
+  --wot-yellow-4: #FCC964FF;
+  --wot-yellow-5: #FBBB3CFF;
+  --wot-yellow-6: #FAAD14FF;
+  --wot-yellow-7: #E19705FF;
+  --wot-yellow-8: #B97C04FF;
+  --wot-yellow-9: #916103FF;
+  --wot-yellow-10: #694702FF;
+  --wot-yellow-opac: #FAAD1414;
+
+  // 绿色
+  --wot-green-1: #F3FBF9FF;
+  --wot-green-2: #E7F8F3FF;
+  --wot-green-3: #B8EADBFF;
+  --wot-green-4: #88DBC3FF;
+  --wot-green-5: #59CDAAFF;
+  --wot-green-6: #12B886FF;
+  --wot-green-7: #0F956CFF;
+  --wot-green-8: #0B6F51FF;
+  --wot-green-9: #074A36FF;
+  --wot-green-10: #04251BFF;
+  --wot-green-opac: #12B88614;
+
+  // 青色
+  --wot-cyan-1: #F4FBFDFF;
+  --wot-cyan-2: #E9F8FAFF;
+  --wot-cyan-3: #BDEAF1FF;
+  --wot-cyan-4: #90DBE7FF;
+  --wot-cyan-5: #64CDDDFF;
+  --wot-cyan-6: #22B8CFFF;
+  --wot-cyan-7: #1C98ABFF;
+  --wot-cyan-8: #167988FF;
+  --wot-cyan-9: #115A65FF;
+  --wot-cyan-10: #0B3A42FF;
+  --wot-cyan-opac: #22B8CF14;
+
+  // 紫色
+  --wot-purple-1: #F9F8FFFF;
+  --wot-purple-2: #E5DBFFFF;
+  --wot-purple-3: #D0BFFFFF;
+  --wot-purple-4: #B197FCFF;
+  --wot-purple-5: #9775FAFF;
+  --wot-purple-6: #8059F3FF;
+  --wot-purple-7: #5B29EFFF;
+  --wot-purple-8: #4511DFFF;
+  --wot-purple-9: #390EB9FF;
+  --wot-purple-10: #2D0B93FF;
+  --wot-purple-opac: #8059F314;
+
+  // 靛色
+  --wot-grape-1: #FBF6FDFF;
+  --wot-grape-2: #F3D9FAFF;
+  --wot-grape-3: #EEBEFAFF;
+  --wot-grape-4: #E599F7FF;
+  --wot-grape-5: #DA77F2FF;
+  --wot-grape-6: #AE3EC9FF;
+  --wot-grape-7: #9731AFFF;
+  --wot-grape-8: #7B288FFF;
+  --wot-grape-9: #601F70FF;
+  --wot-grape-10: #451650FF;
+  --wot-grape-opac: #AE3EC914;
+
+  // 冷灰
+  --wot-coolgrey-1: #F7F8FAFF;
+  --wot-coolgrey-2: #F2F3F5FF;
+  --wot-coolgrey-3: #E5E6EBFF;
+  --wot-coolgrey-4: #C9CBD4FF;
+  --wot-coolgrey-5: #A9ACB8FF;
+  --wot-coolgrey-6: #868A9CFF;
+  --wot-coolgrey-7: #6B7085FF;
+  --wot-coolgrey-8: #4E5369FF;
+  --wot-coolgrey-9: #272B3BFF;
+  --wot-coolgrey-10: #1D1F29FF;
+
+  // 中性灰
+  --wot-neutralgrey-1: #FAFAFAFF;
+  --wot-neutralgrey-2: #F5F5F5FF;
+  --wot-neutralgrey-3: #EBEBEBFF;
+  --wot-neutralgrey-4: #D4D4D4FF;
+  --wot-neutralgrey-5: #B8B8B8FF;
+  --wot-neutralgrey-6: #9C9C9CFF;
+  --wot-neutralgrey-7: #858585FF;
+  --wot-neutralgrey-8: #696969FF;
+  --wot-neutralgrey-9: #3D3D3DFF;
+  --wot-neutralgrey-10: #292929FF;
+
+  // 暖灰
+  --wot-warmgrey-1: #FAF8F7FF;
+  --wot-warmgrey-2: #F5F3F2FF;
+  --wot-warmgrey-3: #EBE7E5FF;
+  --wot-warmgrey-4: #D4CECCFF;
+  --wot-warmgrey-5: #B8B0ADFF;
+  --wot-warmgrey-6: #9C918CFF;
+  --wot-warmgrey-7: #857A75FF;
+  --wot-warmgrey-8: #695E5AFF;
+  --wot-warmgrey-9: #3B332FFF;
+  --wot-warmgrey-10: #292321FF;
+
+  // 遮罩
+  --wot-opac-1_02: #00000005;
+  --wot-opac-2_04: #0000000A;
+  --wot-opac-3_08: #00000014;
+  --wot-opac-4_15: #00000026;
+  --wot-opac-5_20: #00000033;
+  --wot-opac-6_30: #0000004D;
+  --wot-opac-7_45: #00000073;
+  --wot-opac-7_55: #0000008C;
+  --wot-opac-8_65: #000000A6;
+  --wot-opac-9_75: #000000BF;
+  --wot-opac-10_85: #000000D9;
+  --wot-opacwhite-1_02: #FFFFFF05;
+  --wot-opacwhite-2_04: #FFFFFF0A;
+  --wot-opacwhite-3_08: #FFFFFF14;
+  --wot-opacwhite-4_15: #FFFFFF26;
+  --wot-opacwhite-5_20: #FFFFFF33;
+  --wot-opacwhite-6_30: #FFFFFF4D;
+  --wot-opacwhite-7_45: #FFFFFF73;
+  --wot-opacwhite-7_55: #FFFFFF8C;
+  --wot-opacwhite-8_65: #FFFFFFA6;
+  --wot-opacwhite-9_75: #FFFFFFBF;
+  --wot-opacwhite-10_85: #FFFFFFD9;
+}