@sdata/web-vue 1.6.0 → 1.7.0

package/es/timeline/style/index.scss

@@ -0,0 +1,275 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use 'sass:meta';
+@use '@components/timeline/style/token.scss' as *;
+
+$timeline-prefix-cls: string.unquote('#{theme.$prefix}-timeline');
+$timeline-item-prefix-cls: string.unquote('#{theme.$prefix}-timeline-item');
+
+.#{$timeline-prefix-cls} {
+  display: flex;
+  flex-direction: column;
+
+  &-item {
+    position: relative;
+    min-height: $timeline-item-min-height;
+    padding-left: $timeline-dot-size-width;
+    color: $timeline-color-content-text;
+    font-size: $timeline-font-content-size;
+
+    &-label {
+      color: $timeline-color-label-text;
+      font-size: $timeline-font-label-size;
+      line-height: 1.667;
+    }
+
+    &-content {
+      margin-bottom: $timeline-vertical-margin-content-bottom;
+      color: $timeline-color-content-text;
+      font-size: $timeline-font-content-size;
+      line-height: 1.5715;
+
+      &-wrapper {
+        position: relative;
+        margin-left: $timeline-vertical-margin-content-left;
+      }
+    }
+  }
+}
+
+// 节点的样式
+.#{$timeline-prefix-cls}-item {
+  &#{&}-last {
+    > .#{$timeline-prefix-cls}-item-dot-wrapper .#{$timeline-prefix-cls}-item-dot-line {
+      display: none;
+    }
+  }
+
+  &-dot-wrapper {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    text-align: center;
+
+    .#{$timeline-prefix-cls}-item-dot-content {
+      position: relative;
+      width: $timeline-dot-size-width;
+      height: 1.5715 * $timeline-font-content-size;
+      line-height: (1.5715 * $timeline-font-content-size);
+    }
+  }
+
+  &-dot {
+    position: relative;
+    top: 50%;
+    box-sizing: border-box;
+    width: $timeline-dot-size-width;
+    height: $timeline-dot-size-width;
+    margin-top: -50%;
+    color: $timeline-color-dot-bg;
+    border-radius: $timeline-dot-border-radius;
+
+    &-solid {
+      background-color: $timeline-color-dot-bg;
+    }
+
+    &-hollow {
+      background-color: $timeline-color-dot-bg_hollow;
+      border: $timeline-dot-border-width_hollow solid $timeline-color-dot-bg;
+    }
+
+    &-custom {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: inline-flex;
+      box-sizing: border-box;
+      color: $timeline-color-dot-bg;
+      background-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+      transform: translateX(-50%) translateY(-50%);
+      transform-origin: center;
+
+      svg {
+        color: inherit;
+      }
+    }
+  }
+
+  &-dot-line {
+    // bottom: -7px;
+    position: absolute;
+    top: 1.5715 * ($timeline-font-content-size * 0.5) + ($timeline-dot-size-width * 0.5) +
+      $timeline-vertical-margin-line-top;
+    bottom: -(
+        1.5715 * ($timeline-font-content-size * 0.5) - ($timeline-dot-size-width * 0.5) -
+          $timeline-vertical-margin-line-bottom
+      );
+    left: 50%;
+    box-sizing: border-box;
+    width: $timeline-size-line-width;
+    border-color: $timeline-color-line-bg;
+    border-left-width: $timeline-size-line-width;
+    transform: translateX(-50%);
+  }
+}
+
+/* reverse  */
+.#{$timeline-prefix-cls} {
+  &-is-reverse {
+    flex-direction: column-reverse;
+  }
+}
+
+/* mode  */
+.#{$timeline-prefix-cls} {
+  &-alternate {
+    overflow: hidden;
+
+    .#{$timeline-item-prefix-cls}-vertical-left {
+      padding-left: 0;
+
+      > .#{$timeline-item-prefix-cls}-dot-wrapper {
+        left: 50%;
+      }
+
+      > .#{$timeline-item-prefix-cls}-content-wrapper {
+        left: 50%;
+        width: 50%;
+        margin-left: $timeline-vertical-margin-content-left + $timeline-dot-size-width;
+        padding-right: $timeline-vertical-margin-content-left + $timeline-dot-size-width;
+      }
+    }
+
+    .#{$timeline-item-prefix-cls}-vertical-right {
+      padding-right: 0;
+
+      > .#{$timeline-item-prefix-cls}-dot-wrapper {
+        left: 50%;
+      }
+
+      > .#{$timeline-item-prefix-cls}-content-wrapper {
+        left: 0;
+        width: 50%;
+        margin-right: 0;
+        margin-left: -$timeline-vertical-margin-content-left;
+        padding-right: $timeline-vertical-margin-content-left;
+        text-align: right;
+      }
+    }
+  }
+
+  &-right {
+    .#{$timeline-item-prefix-cls}-vertical-right {
+      padding-right: $timeline-dot-size-width;
+
+      > .#{$timeline-item-prefix-cls}-dot-wrapper {
+        right: 0;
+        left: unset;
+      }
+
+      > .#{$timeline-item-prefix-cls}-content-wrapper {
+        margin-right: $timeline-vertical-margin-content-left;
+        margin-left: 0;
+        text-align: right;
+      }
+    }
+  }
+}
+
+/* label position */
+.#{$timeline-prefix-cls}-item {
+  &-label-relative {
+    > .#{$timeline-prefix-cls}-item-label {
+      position: absolute;
+      top: 0;
+      box-sizing: border-box;
+      max-width: 100px;
+    }
+  }
+
+  &-vertical-left#{&}-label-relative {
+    margin-left: 100px;
+
+    > .#{$timeline-prefix-cls}-item-label {
+      left: 0;
+      padding-right: $timeline-vertical-margin-content-left;
+      text-align: right;
+      transform: translateX(-100%);
+    }
+  }
+
+  &-vertical-right#{&}-label-relative {
+    margin-right: 100px;
+
+    > .#{$timeline-prefix-cls}-item-label {
+      right: 0;
+      padding-left: $timeline-vertical-margin-content-left;
+      text-align: left;
+      transform: translateX(100%);
+    }
+  }
+
+  &-horizontal-top#{&}-label-relative {
+    margin-top: 50px;
+
+    > .#{$timeline-prefix-cls}-item-label {
+      padding-bottom: $timeline-horizontal-margin-content-spacing;
+      transform: translateY(-100%);
+    }
+
+    > .#{$timeline-prefix-cls}-item-content {
+      margin-bottom: 0;
+    }
+  }
+
+  &-horizontal-bottom#{&}-label-relative {
+    margin-bottom: 50px;
+
+    > .#{$timeline-prefix-cls}-item-content {
+      margin-bottom: 0;
+    }
+
+    > .#{$timeline-prefix-cls}-item-label {
+      top: unset;
+      bottom: 0;
+      padding-top: $timeline-horizontal-margin-content-spacing;
+      text-align: left;
+      transform: translateY(100%);
+    }
+  }
+}
+
+.#{$timeline-prefix-cls}-alternate {
+  .#{$timeline-prefix-cls}-item-vertical-left.#{$timeline-prefix-cls}-item-label-relative {
+    margin-left: 0;
+
+    > .#{$timeline-prefix-cls}-item-label {
+      left: 0;
+      width: 50%;
+      max-width: unset;
+      transform: none;
+    }
+  }
+
+  .#{$timeline-prefix-cls}-item-vertical-right.#{$timeline-prefix-cls}-item-label-relative {
+    margin-right: 0;
+
+    > .#{$timeline-prefix-cls}-item-label {
+      right: 0;
+      width: 50%;
+      max-width: unset;
+      transform: none;
+    }
+  }
+
+  .#{$timeline-prefix-cls}-item-horizontal-top.#{$timeline-prefix-cls}-item-label-relative {
+    margin-top: 0;
+  }
+
+  .#{$timeline-prefix-cls}-item-horizontal-bottom.#{$timeline-prefix-cls}-item-label-relative {
+    margin-bottom: 0;
+  }
+}
+
+@include meta.load-css('./horizontal.scss');

package/es/timeline/style/token.scss

@@ -0,0 +1,45 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$timeline-color-content-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$timeline-color-label-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$timeline-color-dot-bg: global.$color-primary-6;
+
+$timeline-color-line-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$timeline-font-content-size: global.$font-size-body-3;
+
+$timeline-font-label-size: global.$font-size-body-1;
+
+$timeline-item-min-height: 78px;
+
+$timeline-dot-size-width: 6px;
+
+$timeline-dot-border-radius: global.$radius-circle;
+
+$timeline-dot-border-width_hollow: global.$border-2;
+
+$timeline-color-dot-bg_hollow: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$timeline-horizontal-margin-content-spacing: global.$spacing-7;
+
+$timeline-horizontal-margin-line-left: global.$spacing-3;
+
+$timeline-horizontal-margin-line-right: global.$spacing-2;
+
+$timeline-vertical-margin-content-bottom: global.$spacing-2;
+
+$timeline-vertical-margin-content-left: global.$spacing-7;
+
+$timeline-vertical-margin-line-top: global.$spacing-2;
+
+$timeline-vertical-margin-line-bottom: global.$spacing-2;
+
+$timeline-size-line-width: global.$border-1;

package/es/tooltip/style/index.css

@@ -32,4 +32,4 @@
 }
 .sd-tooltip-popup-arrow {
   background-color: var(--color-tooltip-bg);
-}
+}

package/es/tooltip/style/index.d.ts

@@ -1,3 +1,3 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../trigger/style';
-import './index.less';
+import './index.scss';

package/es/tooltip/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/tooltip/style/index.scss

@@ -0,0 +1,25 @@
+@use '@style/theme/index.scss' as theme;
+@use '@components/tooltip/style/token.scss' as *;
+
+.#{theme.$prefix}-tooltip {
+  &-content {
+    max-width: 350px;
+    padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
+    color: $tooltip-color-text;
+    font-size: $tooltip-font-size;
+    line-height: theme.$line-height-base;
+    text-align: left;
+    overflow-wrap: break-word;
+    background-color: $tooltip-color-bg;
+    border-radius: $tooltip-border-radius;
+  }
+
+  &-mini {
+    padding: $tooltip-mini-padding-vertical $tooltip-mini-padding-horizontal;
+    font-size: $tooltip-mini-font-size;
+  }
+
+  &-popup-arrow {
+    background-color: $tooltip-color-bg;
+  }
+}

package/es/tooltip/style/token.scss

@@ -0,0 +1,25 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$tooltip-padding-horizontal: global.$spacing-6;
+
+$tooltip-padding-vertical: global.$spacing-4;
+
+$tooltip-mini-padding-horizontal: global.$spacing-6;
+
+$tooltip-mini-padding-vertical: global.$spacing-2;
+
+$tooltip-mini-font-size: global.$font-size-body-3;
+
+$tooltip-font-size: global.$font-size-body-3;
+
+$tooltip-border-radius: global.$radius-small;
+
+$tooltip-color-text: #fff;
+
+$tooltip-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-tooltip-bg'));

package/es/transfer/style/index.css

@@ -202,7 +202,7 @@
   display: block;
   height: 2px;
   border-radius: 1px;
-  content: '';
+  content: "";
 }
 .sd-transfer-list-item-gap-bottom::before {
   bottom: -2px;
@@ -246,6 +246,7 @@
 .sd-transfer-disabled .sd-transfer-view-header {
   color: var(--color-text-4);
 }
+
 @keyframes sd-transfer-drag-item-blink {
   0% {
     background-color: var(--color-primary-light-1);
@@ -253,4 +254,4 @@
   100% {
     background-color: transparent;
   }
-}
+}

package/es/transfer/style/index.d.ts

@@ -1,6 +1,6 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../button/style';
 import '../../checkbox/style';
 import '../../input/style';
 import '../../list/style';
-import './index.less';
+import './index.scss';

package/es/transfer/style/index.js

@@ -1,3 +1,3 @@
 import "../../list/style/index.js";
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";