@sdata/web-vue 1.6.0 → 1.7.0

package/es/select/style/index.less

@@ -1,132 +0,0 @@
-@import url('../../style/mixins/index.less');
-@import url('./token.less');
-
-@select-prefix-cls: ~'@{prefix}-select';
-
-.@{select-prefix-cls}-dropdown {
-  box-sizing: border-box;
-  padding: @select-popup-padding-vertical 0;
-  background-color: @select-popup-color-bg;
-  border: 1px solid @select-popup-color-border;
-  border-radius: @select-popup-border-radius;
-  box-shadow: @select-popup-box-shadow;
-
-  & &-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 50px;
-  }
-
-  &-list {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 0;
-    list-style: none;
-
-    &-wrapper {
-      max-height: @select-popup-max-height;
-      overflow-y: auto;
-    }
-  }
-
-  .@{select-prefix-cls}-option {
-    position: relative;
-    // 避免 Trigger 的小箭头位于其上方
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 0 @select-signal-popup-option-padding-horizontal;
-
-    // default
-    color: @select-popup-option-color-text_default;
-    font-size: @select-popup-font-size;
-    line-height: @select-popup-option-height;
-    text-align: left;
-    background-color: @select-popup-option-color-bg_default;
-    cursor: pointer;
-
-    &-content {
-      .text-ellipsis();
-    }
-
-    &-checkbox {
-      overflow: hidden;
-
-      .@{prefix}-checkbox-label {
-        .text-ellipsis();
-      }
-    }
-
-    &-has-suffix {
-      justify-content: space-between;
-    }
-
-    // selected
-    &-selected {
-      color: @select-popup-option-color-text_selected;
-      font-weight: @select-popup-option-font-weight_selected;
-      background-color: @select-popup-option-color-bg_selected;
-    }
-
-    // hover
-    &-active,
-    &:not(&-disabled):hover {
-      color: @select-popup-option-color-text_hover;
-      background-color: @select-popup-option-color-bg_hover;
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-
-    // disabled
-    &-disabled {
-      color: @select-popup-option-color-text_disabled;
-      background-color: @select-popup-option-color-bg_disabled;
-      cursor: not-allowed;
-    }
-
-    &-icon {
-      display: inline-flex;
-      margin-right: 8px;
-    }
-
-    &-suffix {
-      margin-left: @dropdown-margin-left-suffix-icon;
-    }
-  }
-
-  .@{select-prefix-cls}-group {
-    &:first-child &-title {
-      margin-top: @select-popup-group-title-padding-top;
-    }
-
-    &-title {
-      box-sizing: border-box;
-      width: 100%;
-      margin-top: @select-popup-group-title-padding-top;
-      padding: 0 @select-popup-group-title-padding-horizontal;
-      color: @select-popup-group-title-color-text;
-      font-size: @select-popup-group-title-font-size;
-      line-height: @select-popup-group-title-height;
-      cursor: default;
-      .text-ellipsis();
-    }
-  }
-
-  &&-has-header {
-    padding-top: 0;
-  }
-
-  &-header {
-    border-bottom: 1px solid @select-popup-color-border;
-  }
-
-  &&-has-footer {
-    padding-bottom: 0;
-  }
-
-  &-footer {
-    border-top: 1px solid @select-popup-color-border;
-  }
-}

package/es/select/style/token.less

@@ -1,43 +0,0 @@
-@import url('../../style/theme/index.less');
-
-/**********************************************
- * Popup Box
- **********************************************/
-@select-popup-max-height: @size-50;
-@select-popup-border-radius: @radius-medium;
-@select-popup-padding-vertical: @spacing-2;
-@select-popup-font-size: @font-size-body-3;
-@select-popup-color-bg: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-@select-popup-color-border: var(~'@{sd-cssvars-prefix}-color-fill-3');
-@select-popup-box-shadow: @shadow2-down;
-
-/**********************************************
- * Popup Options
- * status: default / disabled / selected / hover
- **********************************************/
-@select-popup-option-height: @size-9;
-@select-popup-option-font-weight_selected: @font-weight-500;
-@select-signal-popup-option-padding-horizontal: @spacing-6;
-@select-multi-popup-option-padding-horizontal: @spacing-2;
-
-@select-popup-option-color-bg_default: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-@select-popup-option-color-bg_hover: var(~'@{sd-cssvars-prefix}-color-fill-2');
-@select-popup-option-color-bg_selected: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-@select-popup-option-color-bg_disabled: var(~'@{sd-cssvars-prefix}-color-bg-popup');
-
-@select-popup-option-color-text_default: var(~'@{sd-cssvars-prefix}-color-text-1');
-@select-popup-option-color-text_hover: var(~'@{sd-cssvars-prefix}-color-text-1');
-@select-popup-option-color-text_selected: var(~'@{sd-cssvars-prefix}-color-text-1');
-@select-popup-option-color-text_disabled: var(~'@{sd-cssvars-prefix}-color-text-4');
-
-@select-popup-option-color-highlight-text: var(--color-text-1);
-@select-popup-option-font-highlight-weight: @font-weight-500;
-
-// option group title
-@select-popup-group-title-height: @size-5;
-@select-popup-group-title-padding-horizontal: @spacing-6;
-@select-popup-group-title-padding-top: @spacing-4;
-@select-popup-group-title-font-size: @font-size-body-1;
-@select-popup-group-title-color-text: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-@dropdown-margin-left-suffix-icon: @spacing-6;

package/es/skeleton/style/index.less

@@ -1,65 +0,0 @@
-@import url('./token.less');
-
-@skeleton-prefix-cls: ~'@{prefix}-skeleton';
-
-.@{skeleton-prefix-cls} {
-  &-shape {
-    width: @skeleton-size-image_default;
-    height: @skeleton-size-image_default;
-    background-color: @skeleton-color-bg-base;
-    border-radius: @skeleton-radius-image-border;
-
-    &-circle {
-      border-radius: 50%;
-    }
-
-    &-small {
-      width: @skeleton-size-image_small;
-      height: @skeleton-size-image_small;
-    }
-
-    &-large {
-      width: @skeleton-size-image_large;
-      height: @skeleton-size-image_large;
-    }
-  }
-
-  &-line {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-
-    &-row {
-      height: @skeleton-size-row-height;
-      background-color: @skeleton-color-bg-base;
-    }
-
-    &-row:not(:last-child) {
-      margin-bottom: @skeleton-spacing-last_row-margin-bottom;
-    }
-  }
-
-  &-animation {
-    .@{skeleton-prefix-cls}-shape,
-    .@{skeleton-prefix-cls}-line-row {
-      background: linear-gradient(
-        90deg,
-        @skeleton-color-bg-base 25%,
-        @skeleton-color-animate-bg 37%,
-        @skeleton-color-bg-base 63%
-      );
-      background-size: 400% 100%;
-      animation: ~'@{prefix}-skeleton-circle' 1.5s @transition-timing-function-linear infinite;
-    }
-  }
-}
-
-@keyframes ~'@{prefix}-skeleton-circle' {
-  0% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0 50%;
-  }
-}

package/es/skeleton/style/token.less

@@ -1,21 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@skeleton-color-bg-base: var(~'@{sd-cssvars-prefix}-color-fill-2');
-
-@skeleton-radius-image-border: @radius-small;
-
-@skeleton-size-image_default: @size-12;
-
-@skeleton-size-image_small: @size-9;
-
-@skeleton-size-image_large: @size-15;
-
-@skeleton-spacing-image_left-margin-right: @spacing-7;
-
-@skeleton-spacing-image_right-margin-left: @spacing-7;
-
-@skeleton-size-row-height: @size-4;
-
-@skeleton-spacing-last_row-margin-bottom: @spacing-7;
-
-@skeleton-color-animate-bg: var(~'@{sd-cssvars-prefix}-color-fill-3');

package/es/slider/style/index.less

@@ -1,277 +0,0 @@
-@import url('./token.less');
-
-@slider-prefix: ~'@{prefix}-slider';
-
-.@{slider-prefix} {
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-
-  &-vertical {
-    display: inline-block;
-    width: auto;
-    min-width: @slider-size-button-width + 10;
-    height: auto;
-
-    .@{slider-prefix}-wrapper {
-      flex-direction: column;
-    }
-  }
-
-  &-with-marks {
-    margin-bottom: @slider-spacing-margin-bottom_with-mark;
-    padding: @slider-spacing-padding_width-mark_vertical @slider-spacing-padding_width-mark;
-  }
-
-  &-vertical&-with-marks {
-    margin-bottom: 0;
-    padding: 0;
-  }
-
-  &-track {
-    position: relative;
-    flex: 1;
-    width: 100%;
-    height: @slider-size-button-width;
-    cursor: pointer;
-
-    &::before {
-      // 局中
-      position: absolute;
-      top: 50%;
-      display: block;
-      width: 100%;
-      height: @slider-size-road-width;
-      background-color: @slider-color-road-bg;
-      border-radius: @slider-size-road-width;
-      transform: translateY(-50%);
-      content: '';
-    }
-
-    &&-vertical {
-      width: @slider-size-button-width;
-      max-width: @slider-size-button-width;
-      height: 100%;
-      min-height: @slider-size-height_vertical;
-      margin-top: (@slider-size-button-width / 2);
-      margin-right: 0;
-      margin-bottom: (@slider-size-button-width / 2);
-      transform: translateY(0);
-
-      &::before {
-        // 局中
-        top: unset;
-        left: 50%;
-        width: @slider-size-road-width;
-        height: 100%;
-        transform: translateX(-50%);
-      }
-    }
-
-    &&-disabled {
-      &::before {
-        background-color: @slider-color-road-bg_disabled;
-      }
-
-      .@{slider-prefix}-bar {
-        background-color: @slider-color-bar-bg_disabled;
-      }
-
-      .@{slider-prefix}-btn {
-        cursor: not-allowed;
-
-        &::after {
-          border-color: @slider-color-button-border_disabled;
-        }
-      }
-
-      .@{slider-prefix}-dots {
-        .@{slider-prefix}-dot {
-          border-color: @slider-color-road-bg_disabled;
-
-          &-active {
-            border-color: @slider-color-bar-bg_disabled;
-          }
-        }
-      }
-
-      .@{slider-prefix}-ticks {
-        .@{slider-prefix}-tick {
-          background: @slider-color-road-bg_disabled;
-
-          &-active {
-            background: @slider-color-bar-bg_disabled;
-          }
-        }
-      }
-    }
-  }
-
-  &-bar {
-    // 局中
-    position: absolute;
-    top: 50%;
-    height: @slider-size-road-width;
-    background-color: @slider-color-bar-bg;
-    border-radius: @slider-size-road-width;
-    transform: translateY(-50%);
-
-    .@{slider-prefix}-track-vertical & {
-      // 局中
-      top: unset;
-      left: 50%;
-      width: @slider-size-road-width;
-      height: unset;
-      transform: translateX(-50%);
-    }
-  }
-
-  &-btn {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: @slider-size-button-width;
-    height: @slider-size-button-width;
-    transform: translateX(-50%);
-
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: inline-block;
-      box-sizing: border-box;
-      width: @slider-size-button-width;
-      height: @slider-size-button-width;
-      background: @slider-color-button-bg;
-      border: @slider-border-size-button solid @slider-color-button-border;
-      border-radius: 50%;
-      transition: all @transition-duration-3 @transition-timing-function-overshoot;
-      content: '';
-    }
-
-    &&-active,
-    &:hover {
-      &::after {
-        box-shadow: @slider-shadow-button_active;
-        transform: scale((unit(@slider-size-button-width_active / @slider-size-button-width)));
-      }
-    }
-
-    .@{slider-prefix}-track-vertical & {
-      top: unset;
-      bottom: 0;
-      left: 0;
-      transform: translateY(50%);
-    }
-  }
-
-  &-marks {
-    position: absolute;
-    top: @slider-size-button-width;
-    width: 100%;
-
-    .@{slider-prefix}-mark {
-      position: absolute;
-      color: @slider-color-mark-font;
-      font-size: @slider-font-size-mark;
-      line-height: 1;
-      transform: translateX(-50%);
-      cursor: pointer;
-    }
-
-    .@{slider-prefix}-track-vertical & {
-      top: 0;
-      left: @slider-size-button-width + @slider-spacing-mark-left;
-      height: 100%;
-
-      .@{slider-prefix}-mark {
-        transform: translateY(50%);
-      }
-    }
-  }
-
-  &-dots {
-    height: 100%;
-
-    .@{slider-prefix}-dot-wrapper {
-      position: absolute;
-      top: 50%;
-      font-size: @slider-font-size-dot;
-      transform: translate(-50%, -50%);
-
-      .@{slider-prefix}-track-vertical & {
-        top: unset;
-        left: 50%;
-        transform: translate(-50%, 50%);
-      }
-
-      .@{slider-prefix}-dot {
-        box-sizing: border-box;
-        width: @slider-size-dot-width;
-        height: @slider-size-dot-width;
-        background-color: @slider-color-dot-bg;
-        border: @slider-border-size-dot solid @slider-color-road-bg;
-        border-radius: 50%;
-
-        &-active {
-          border-color: @slider-color-bar-bg;
-        }
-      }
-    }
-  }
-
-  &-ticks {
-    .@{slider-prefix}-tick {
-      position: absolute;
-      top: 50%;
-      width: @slider-size-tick-width;
-      height: @slider-size-tick-height;
-      margin-top: -(@slider-size-road-width / 2);
-      background: @slider-color-road-bg;
-      transform: translate(-50%, -100%);
-
-      &-active {
-        background: @slider-color-bar-bg;
-      }
-
-      .@{slider-prefix}-vertical & {
-        top: unset;
-        left: 50%;
-        width: @slider-size-tick-height;
-        height: @slider-size-tick-width;
-        margin-top: unset;
-        transform: translate((@slider-size-road-width / 2), 50%);
-      }
-    }
-  }
-
-  &-input {
-    display: flex;
-    align-items: center;
-    margin-left: @slider-spacing-input-margin-left;
-
-    .@{slider-prefix}-vertical & {
-      margin-left: 0;
-    }
-
-    > .@{prefix}-input-number {
-      width: @slider-size-input-width;
-      height: @slider-size-input-height;
-      overflow: visible;
-      line-height: normal;
-
-      input {
-        text-align: center;
-      }
-    }
-
-    &-hyphens {
-      width: @slider-size-input_range_content-width;
-      height: @slider-size-input_range_content-height;
-
-      /* prettier-ignore */
-      margin: 0 ((@slider-size-input_range-width - @slider-size-input_range_content-width) / 2);
-      background: @slider-color-input_range_content-bg;
-    }
-  }
-}

package/es/slider/style/token.less

@@ -1,50 +0,0 @@
-@import url('../../style/theme/index.less');
-
-// road
-@slider-size-road-width: 2px;
-@slider-color-road-bg: var(~'@{sd-cssvars-prefix}-color-fill-3');
-@slider-color-road-bg_disabled: var(~'@{sd-cssvars-prefix}-color-fill-2');
-
-// bar
-@slider-color-bar-bg: @color-primary-6;
-@slider-color-bar-bg_disabled: var(~'@{sd-cssvars-prefix}-color-fill-3');
-
-// button
-@slider-color-button-bg: var(~'@{sd-cssvars-prefix}-color-bg-2');
-@slider-border-size-button: @border-2;
-@slider-color-button-border: @color-primary-6;
-@slider-color-button-border_disabled: var(~'@{sd-cssvars-prefix}-color-fill-3');
-@slider-shadow-button_active: @shadow1-down;
-@slider-size-button-width: @size-3;
-@slider-size-button-width_active: 14px;
-
-// dot
-@slider-color-dot-bg: var(~'@{sd-cssvars-prefix}-color-bg-2');
-@slider-border-size-dot: @border-2;
-@slider-font-size-dot: @font-size-body-1;
-@slider-size-dot-width: @size-2;
-
-// mark
-@slider-spacing-margin-bottom_with-mark: @spacing-9;
-@slider-spacing-padding_width-mark: @spacing-8;
-@slider-spacing-padding_width-mark_vertical: @spacing-8;
-@slider-font-size-mark: @font-size-body-3;
-@slider-color-mark-font: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-// tick
-@slider-size-tick-width: 1px;
-@slider-size-tick-height: 3px;
-
-// input
-@slider-spacing-input-margin-left: @spacing-8;
-@slider-size-input-width: @size-15;
-@slider-size-input-height: @size-8;
-@slider-size-input_range-width: @size-5;
-@slider-size-input_range-height: @size-8;
-@slider-size-input_range_content-width: @size-2;
-@slider-size-input_range_content-height: 2px;
-@slider-color-input_range_content-bg: rgb(var(~'@{sd-cssvars-prefix}-gray-6'));
-
-// vertical
-@slider-size-height_vertical: 200px;
-@slider-spacing-mark-left: 3px; // mark 文本和滑动路径的距离

package/es/spin/style/dot-loading.less

@@ -1,63 +0,0 @@
-@import url('./token.less');
-
-@dot-prefix-cls: ~'@{prefix}-dot-loading';
-
-.@{dot-prefix-cls} {
-  position: relative;
-  display: inline-block;
-  width: @spin-dot-size-width * 7;
-  height: @spin-dot-size-width;
-  transform-style: preserve-3d;
-  perspective: 200px;
-
-  &-item {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    width: @spin-dot-size-width;
-    height: @spin-dot-size-width;
-    background-color: @spin-dot-color-icon_default;
-    border-radius: @radius-circle;
-    transform: translateX(-50%) scale(0);
-    animation: @dot-prefix-cls 2s @transition-timing-function-linear infinite forwards;
-
-    &:nth-child(2) {
-      background-color: @spin-dot-color-icon_second;
-      animation-delay: 400ms;
-    }
-
-    &:nth-child(3) {
-      background-color: @spin-dot-color-icon_third;
-      animation-delay: 800ms;
-    }
-
-    &:nth-child(4) {
-      background-color: @spin-dot-color-icon_forth;
-      animation-delay: 1200ms;
-    }
-
-    &:nth-child(5) {
-      background-color: @spin-dot-color-icon_last;
-      animation-delay: 1600ms;
-    }
-  }
-}
-
-/* prettier-ignore */
-@keyframes @dot-prefix-cls {
-/* prettier-ignore */
-each(range(36), {
-  @percent: round(percentage(((@value - 1) / 36)), 3);
-
-  // 半径
-  @radius: 280%;
-  @xOffset: round(sin((pi() / 180 * @value * 10)) * @radius, 3) * -1;
-  @zOffset: round(cos((pi() / 180 * @value * 10)), 3) * -1px;
-
-  @scaleOffset: round((1 - cos((pi() / 180) * @value * 10)) * 0.75 + 0.5, 3);
-
-  @{percent} {
-    transform: ~'translate3D(@{xOffset}, 0, @{zOffset}) scale(@{scaleOffset})'
-  }
-});
-}

package/es/spin/style/index.less

@@ -1,52 +0,0 @@
-@import url('./token.less');
-@import url('./dot-loading.less');
-
-@spin-prefix-cls: ~'@{prefix}-spin';
-
-.@{spin-prefix-cls} {
-  display: inline-block;
-
-  &-with-tip {
-    text-align: center;
-  }
-
-  &-icon {
-    color: @spin-color-icon;
-    font-size: @spin-font-size-icon;
-  }
-
-  &-tip {
-    margin-top: @spin-margin-top-tip;
-    color: @spin-color-text;
-    font-weight: @spin-font-weight;
-    font-size: @spin-font-size-text;
-  }
-
-  &-mask {
-    position: absolute;
-    inset: 0;
-    z-index: 11;
-    text-align: center;
-    background-color: var(~'@{sd-cssvars-prefix}-color-spin-layer-bg');
-    transition: opacity @transition-duration-1 @transition-timing-function-linear;
-    user-select: none;
-  }
-
-  &-loading {
-    position: relative;
-    user-select: none;
-  }
-
-  &-loading &-mask-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 12;
-    transform: translate(-50%, -50%);
-  }
-
-  &-loading &-children::after {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}