@sdata/web-vue 1.5.0 → 1.7.0

package/es/radio/style/index.less

@@ -1,266 +0,0 @@
-@import url('../../style/mixins/index.less');
-@import url('./token.less');
-
-@radio-prefix-cls: ~'@{prefix}-radio';
-
-.@{radio-prefix-cls},
-.@{radio-prefix-cls}-button {
-  > input[type='radio'] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 0;
-    height: 0;
-    opacity: 0;
-
-    &:focus + .@{prefix}-radio-icon-hover::before {
-      background-color: @icon-hover-color-bg;
-    }
-  }
-}
-
-.icon-hover(@radio-prefix-cls, @radio-layout-height, @radio-size-mask-height);
-
-.@{radio-prefix-cls} {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  padding-left: (@radio-size-mask-height / 2) - (@radio-layout-height / 2);
-  font-size: @radio-font-text-size;
-  line-height: unset;
-  cursor: pointer;
-
-  // radio circle
-  &-label {
-    margin-left: @radio-margin-text-left;
-    color: @radio-color-text;
-  }
-
-  &-icon {
-    position: relative;
-    display: block;
-    box-sizing: border-box;
-    width: @radio-layout-height;
-    height: @radio-layout-height;
-    line-height: @radio-layout-height;
-    border: @radio-border-width solid @radio-color-border;
-    border-radius: @radio-border-radius;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: inline-block;
-      box-sizing: border-box;
-      width: @radio-layout-height - @radio-border-width * 2;
-      height: @radio-layout-height - @radio-border-width * 2;
-      background-color: @radio-color-bg;
-      border-radius: @radio-border-radius;
-      transform: scale(1);
-      transition: transform @transition-duration-3 @transition-timing-function-overshoot;
-      content: '';
-    }
-  }
-
-  &:hover &-icon {
-    border-color: @radio-color-border_hover;
-  }
-
-  &-checked &-icon {
-    background-color: @radio-color-bg_checked;
-    border-color: @radio-color-bg_checked;
-
-    &::after {
-      background-color: var(~'@{sd-cssvars-prefix}-color-white');
-      transform: scale(0.4);
-    }
-  }
-
-  &-checked:hover &-icon {
-    border-color: @radio-color-bg_checked;
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-
-    .@{prefix}-radio-icon-hover {
-      cursor: not-allowed;
-    }
-
-    .@{radio-prefix-cls}-label {
-      color: @radio-color-text_disabled;
-    }
-  }
-
-  &-disabled &-icon {
-    border-color: @radio-color-border_disabled;
-
-    &::after {
-      background-color: @radio-color-bg_disabled;
-    }
-  }
-
-  &-disabled:hover &-icon {
-    border-color: @radio-color-border_disabled;
-  }
-
-  &-checked&-disabled {
-    .@{radio-prefix-cls}-icon,
-    &:hover .@{radio-prefix-cls}-icon {
-      background-color: @radio-color-bg_checked_disabled;
-      border-color: @color-transparent;
-    }
-
-    .@{radio-prefix-cls}-icon::after {
-      background-color: @radio-color-dot-bg_checked_disabled;
-    }
-
-    .@{radio-prefix-cls}-label {
-      color: @radio-color-text_checked_disabled;
-    }
-  }
-
-  &:hover {
-    .@{prefix}-radio-icon-hover::before {
-      background-color: @radio-mask-bg-color-bg;
-    }
-  }
-}
-
-// group type
-.@{radio-prefix-cls}-group {
-  display: inline-block;
-  box-sizing: border-box;
-
-  .@{radio-prefix-cls} {
-    margin-right: @radio-group-margin-right;
-  }
-
-  // button type
-  &-button {
-    display: inline-flex;
-    padding: (@radio-button-spacing / 2);
-    line-height: @radio-size-default-height - @radio-button-spacing * 2;
-    background-color: @radio-group-button-color-bg;
-    border-radius: @radio-button-bg-border-radius;
-  }
-}
-
-.@{radio-prefix-cls}-button {
-  position: relative;
-  display: inline-block;
-  margin: (@radio-button-spacing / 2);
-  color: @radio-button-color-text;
-  font-size: @radio-font-text-size;
-  line-height: @radio-size-default-height - @radio-button-spacing * 2;
-  background-color: @radio-button-color-bg;
-  border-radius: @radio-button-border-radius;
-  cursor: pointer;
-  transition: all @transition-duration-1 @transition-timing-function-linear;
-
-  &-content {
-    position: relative;
-    display: block;
-    padding: 0 @radio-button-padding-horizontal;
-  }
-
-  // 按钮之间的分割线
-  &:not(:first-of-type)::before {
-    position: absolute;
-    top: 50%;
-    left: -((@radio-button-spacing - @radio-button-size-separator-width) / 2) -
-      @radio-button-size-separator-width;
-    display: block;
-    width: @radio-button-size-separator-width;
-    height: @radio-button-size-separator-height;
-    background-color: @radio-button-color-separator-bg;
-    transform: translateY(-50%);
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-    content: '';
-  }
-
-  // 被选中的按钮不需要左右的分割线
-  &:hover::before,
-  &:hover + &::before,
-  &.@{radio-prefix-cls}-checked::before,
-  &.@{radio-prefix-cls}-checked + &::before {
-    opacity: 0;
-  }
-
-  &:hover {
-    color: @radio-button-color-text_hover;
-    background-color: @radio-button-color-bg_hover;
-  }
-
-  &.@{radio-prefix-cls}-checked {
-    color: @radio-button-color-text_active;
-    background-color: @radio-button-color-bg_active;
-  }
-
-  &.@{radio-prefix-cls}-disabled {
-    color: @radio-button-color-text_disabled;
-    background-color: @radio-button-color-bg_disabled;
-    cursor: not-allowed;
-  }
-
-  &.@{radio-prefix-cls}-disabled.@{radio-prefix-cls}-checked {
-    color: @radio-button-color-text_checked_disabled;
-    background-color: @radio-button-color-bg_checked_disabled;
-  }
-}
-
-// size small default large huge
-.@{radio-prefix-cls}-group {
-  &-size-small {
-    line-height: @radio-size-small-height;
-
-    &.@{radio-prefix-cls}-group-button,
-    .@{radio-prefix-cls}-button {
-      font-size: @radio-font-text-size_small;
-      line-height: @radio-size-small-height - @radio-button-spacing * 2;
-    }
-  }
-
-  &-size-large {
-    line-height: @radio-size-large-height;
-
-    &.@{radio-prefix-cls}-group-button,
-    .@{radio-prefix-cls}-button {
-      font-size: @radio-font-text-size_large;
-      line-height: @radio-size-large-height - @radio-button-spacing * 2;
-    }
-  }
-
-  &-size-mini {
-    line-height: @radio-size-mini-height;
-
-    &.@{radio-prefix-cls}-group-button,
-    .@{radio-prefix-cls}-button {
-      font-size: @radio-font-text-size_mini;
-      line-height: @radio-size-mini-height - @radio-button-spacing * 2;
-    }
-  }
-}
-
-// vertical direction
-.@{radio-prefix-cls}-group-direction-vertical {
-  // default radio
-  .@{radio-prefix-cls} {
-    display: flex;
-    margin-right: 0;
-    line-height: @radio-group-size-line-height_vertical;
-  }
-}
-
-// dark mode
-
-@{sd-theme-tag}[sd-theme='dark'] {
-  .@{radio-prefix-cls}-button.@{radio-prefix-cls}-checked,
-  .@{radio-prefix-cls}-button:not(.@{radio-prefix-cls}-disabled):hover {
-    background-color: var(~'@{sd-cssvars-prefix}-color-fill-3');
-  }
-
-  .@{radio-prefix-cls}-button::after {
-    background-color: var(~'@{sd-cssvars-prefix}-color-bg-3');
-  }
-}

package/es/radio/style/token.less

@@ -1,93 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@radio-color-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@radio-border-width: @border-2;
-
-@radio-layout-height: 14px;
-
-@radio-color-border_hover: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@radio-color-border_disabled: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@radio-color-bg: var(~'@{sd-cssvars-prefix}-color-bg-2');
-
-@radio-color-bg_checked: @color-primary-6;
-
-@radio-border-radius: @radius-circle;
-
-@radio-color-bg_disabled: var(~'@{sd-cssvars-prefix}-color-fill-2');
-
-@radio-color-bg_checked_disabled: var(~'@{sd-cssvars-prefix}-color-primary-light-3');
-
-@radio-color-dot-bg_checked_disabled: @radio-color-bg_disabled;
-
-@radio-color-text: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@radio-color-text_disabled: var(~'@{sd-cssvars-prefix}-color-text-4');
-
-@radio-color-text_checked_disabled: var(~'@{sd-cssvars-prefix}-color-text-4');
-
-@radio-font-text-size: @font-size-body-3;
-
-@radio-font-text-size_large: @font-size-body-3;
-
-@radio-font-text-size_mini: @font-size-body-1;
-
-@radio-font-text-size_small: @font-size-body-3;
-
-@radio-margin-text-left: @spacing-4;
-
-@radio-size-mask-height: @size-6;
-
-@radio-mask-bg-color-bg: @icon-hover-color-bg;
-
-@radio-group-margin-right: @spacing-8;
-
-@radio-group-button-color-bg: var(~'@{sd-cssvars-prefix}-color-fill-2');
-
-@radio-button-padding-horizontal: @spacing-6;
-
-@radio-button-spacing: 3px;
-
-@radio-button-color-bg_active: var(~'@{sd-cssvars-prefix}-color-bg-5');
-
-@radio-button-color-bg_hover: @radio-button-color-bg_active;
-
-@radio-button-color-text_active: @color-primary-6;
-
-@radio-button-font-text-weight_active: @font-weight-500;
-
-@radio-button-color-text_hover: @radio-color-text;
-
-@radio-button-border-radius: @radius-small;
-
-@radio-button-bg-border-radius: @radio-button-border-radius;
-
-@radio-button-color-bg: @color-transparent;
-
-@radio-button-color-text: var(~'@{sd-cssvars-prefix}-color-text-2');
-
-@radio-button-color-bg_disabled: @color-transparent;
-
-@radio-button-color-text_disabled: var(~'@{sd-cssvars-prefix}-color-text-4');
-
-@radio-button-color-bg_checked_disabled: @radio-button-color-bg_active;
-
-@radio-button-color-text_checked_disabled: var(~'@{sd-cssvars-prefix}-color-primary-light-3');
-
-@radio-button-color-separator-bg: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@radio-button-size-separator-width: 1px;
-
-@radio-button-size-separator-height: 14px;
-
-@radio-size-default-height: @size-default;
-
-@radio-size-small-height: @size-small;
-
-@radio-size-mini-height: @size-mini;
-
-@radio-size-large-height: @size-large;
-
-@radio-group-size-line-height_vertical: @size-8;

package/es/rate/style/token.less

@@ -1,18 +0,0 @@
-@import url('../../style/theme/index.less');
-
-/**********************************************
- * status: disabled / readonly
- **********************************************/
-@rate-min-height: @size-default;
-
-@rate-gap-size: @spacing-4;
-
-@rate-font-size: @font-size-title-3;
-
-@rate-scale_active: 1.2;
-
-@rate-color-bg_active: rgb(var(~'@{sd-cssvars-prefix}-gold-6'));
-
-@rate-color-bg_default: var(~'@{sd-cssvars-prefix}-color-fill-3');
-
-@rate-color-bg_hover: rgb(var(~'@{sd-cssvars-prefix}-gold-5'));

package/es/resize-box/style/token.less

@@ -1,6 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@resizeBox-trigger-color-background: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-// @resizeBox-trigger-size-icon-wrapper: 6px;
-@resizeBox-trigger-font-size-icon: 12px;
-@resizeBox-trigger-color-icon: var(~'@{sd-cssvars-prefix}-color-text-1');

package/es/result/style/index.less

@@ -1,93 +0,0 @@
-@import url('./token.less');
-
-@result-prefix-cls: ~'@{prefix}-result';
-
-.icon-status (@status) {
-  @color: ~'result-color-icon_@{status}';
-  @bg: ~'result-color-icon-bg_@{status}';
-
-  color: @@color;
-  background-color: @@bg;
-}
-
-.@{result-prefix-cls} {
-  box-sizing: border-box;
-  width: 100%;
-  padding: @result-padding-top_icon @result-padding-horizontal @result-padding-bottom;
-
-  &-icon {
-    margin-bottom: @result-margin-icon-bottom;
-    font-size: @result-size-icon;
-    text-align: center;
-
-    &-tip {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: @result-size-icon-wrapper;
-      height: @result-size-icon-wrapper;
-      margin: 0 auto;
-      border-radius: 50%;
-    }
-
-    // status = null
-    &-custom &-tip {
-      width: unset;
-      height: unset;
-      color: @result-color-icon_default;
-      font-size: @result-size-icon_custom;
-    }
-
-    &-success &-tip {
-      .icon-status(success);
-    }
-
-    &-error &-tip {
-      .icon-status(error);
-    }
-
-    &-info &-tip {
-      .icon-status(info);
-    }
-
-    &-warning &-tip {
-      .icon-status(warning);
-    }
-
-    &-404,
-    &-403,
-    &-500 {
-      padding-top: @result-padding-top;
-
-      .@{result-prefix-cls}-icon-tip {
-        width: @result-size-image-width;
-        height: @result-size-image-width;
-        line-height: @result-size-image-width;
-      }
-    }
-  }
-
-  &-title {
-    color: @result-color-title-text;
-    font-weight: @result-font-title-weight;
-    font-size: @result-font-title-size;
-    line-height: 1.5715;
-    text-align: center;
-  }
-
-  &-subtitle {
-    color: @result-color-subtitle-text;
-    font-size: @result-font-subtitle-size;
-    line-height: 1.5715;
-    text-align: center;
-  }
-
-  &-extra {
-    margin-top: @result-margin-extra-top;
-    text-align: center;
-  }
-
-  &-content {
-    margin-top: @result-margin-content-top;
-  }
-}

package/es/result/style/token.less

@@ -1,51 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@result-padding-top: @spacing-9;
-
-@result-padding-top_icon: @spacing-10;
-
-@result-padding-bottom: @spacing-9;
-
-@result-padding-horizontal: @spacing-10;
-
-@result-margin-icon-bottom: @spacing-7;
-
-@result-margin-extra-top: @spacing-8;
-
-@result-margin-content-top: @spacing-8;
-
-@result-font-title-size: @font-size-body-3;
-
-@result-font-title-weight: @font-weight-500;
-
-@result-font-subtitle-size: @font-size-body-3;
-
-@result-color-title-text: var(~'@{sd-cssvars-prefix}-color-text-1');
-
-@result-color-subtitle-text: var(~'@{sd-cssvars-prefix}-color-text-2');
-
-@result-size-icon: @size-5;
-
-@result-size-icon-wrapper: 45px;
-
-@result-size-image-width: @size-23;
-
-@result-color-icon_success: @color-success-6;
-
-@result-color-icon-bg_success: var(~'@{sd-cssvars-prefix}-color-success-light-1');
-
-@result-color-icon_error: @color-danger-6;
-
-@result-color-icon-bg_error: var(~'@{sd-cssvars-prefix}-color-danger-light-1');
-
-@result-color-icon_warning: @color-warning-6;
-
-@result-color-icon-bg_warning: var(~'@{sd-cssvars-prefix}-color-warning-light-1');
-
-@result-color-icon_info: @color-primary-6;
-
-@result-color-icon-bg_info: var(~'@{sd-cssvars-prefix}-color-primary-light-1');
-
-@result-size-icon_custom: 45px;
-
-@result-color-icon_default: inherit;

package/es/scrollbar/style/index.less

@@ -1,131 +0,0 @@
-@import url('./token.less');
-
-@scroll-prefix-cls: ~'@{prefix}-scrollbar';
-
-.@{scroll-prefix-cls} {
-  position: relative;
-
-  &-container {
-    position: relative;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &-track {
-    position: absolute;
-    z-index: 100;
-
-    &-direction-horizontal {
-      bottom: 0;
-      left: 0;
-      box-sizing: border-box;
-      width: 100%;
-      height: @scrollbar-track-size;
-    }
-
-    &-direction-vertical {
-      top: 0;
-      right: 0;
-      box-sizing: border-box;
-      width: @scrollbar-track-size;
-      height: 100%;
-    }
-  }
-
-  &-thumb {
-    position: absolute;
-    display: block;
-    box-sizing: border-box;
-
-    &-bar {
-      width: 100%;
-      height: 100%;
-      background-color: @scrollbar-thumb-bar-bg_color;
-      border-radius: @scrollbar-thumb-bar-border_radius;
-    }
-
-    &:hover,
-    &-dragging {
-      .@{scroll-prefix-cls}-thumb-bar {
-        background-color: @scrollbar-thumb-bar-bg_color_hover;
-      }
-    }
-
-    &-direction-horizontal {
-      .@{scroll-prefix-cls}-thumb-bar {
-        height: @scrollbar-thumb-bar-size;
-        margin: ((@scrollbar-track-size - @scrollbar-thumb-bar-size)/2) 0;
-      }
-    }
-
-    &-direction-vertical {
-      .@{scroll-prefix-cls}-thumb-bar {
-        width: @scrollbar-thumb-bar-size;
-        margin: 0 ((@scrollbar-track-size - @scrollbar-thumb-bar-size)/2);
-      }
-    }
-  }
-
-  &&-type-embed {
-    .@{scroll-prefix-cls}-thumb {
-      opacity: 0;
-
-      &-dragging {
-        opacity: 0.8;
-      }
-
-      transition: opacity ease 200ms;
-    }
-
-    &:hover {
-      .@{scroll-prefix-cls}-thumb {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  &&-type-track {
-    .@{scroll-prefix-cls}-track {
-      background-color: @scrollbar-track-bg_color;
-
-      &-direction-horizontal {
-        border-top: @scrollbar-track-border_size solid @scrollbar-track-border_color;
-        border-bottom: @scrollbar-track-border_size solid @scrollbar-track-border_color;
-      }
-
-      &-direction-vertical {
-        border-right: @scrollbar-track-border_size solid @scrollbar-track-border_color;
-        border-left: @scrollbar-track-border_size solid @scrollbar-track-border_color;
-      }
-    }
-
-    .@{scroll-prefix-cls}-thumb {
-      &-direction-horizontal {
-        margin: -@scrollbar-track-border_size 0;
-      }
-
-      &-direction-vertical {
-        margin: 0 -@scrollbar-track-border_size;
-      }
-    }
-
-    &.@{scroll-prefix-cls}-both {
-      .@{scroll-prefix-cls}-track-direction-vertical::after {
-        position: absolute;
-        right: -@scrollbar-track-border_size;
-        bottom: 0;
-        display: block;
-        box-sizing: border-box;
-        width: @scrollbar-track-size;
-        height: @scrollbar-track-size;
-        background-color: @scrollbar-track-bg_color;
-        border-right: @scrollbar-track-border_size solid @scrollbar-track-border_color;
-        border-bottom: @scrollbar-track-border_size solid @scrollbar-track-border_color;
-        content: '';
-      }
-    }
-  }
-}

package/es/scrollbar/style/token.less

@@ -1,17 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@scrollbar-track-size: 15px;
-
-@scrollbar-track-border_size: @border-1;
-
-@scrollbar-track-border_color: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-
-@scrollbar-track-bg_color: var(~'@{sd-cssvars-prefix}-color-neutral-1');
-
-@scrollbar-thumb-bar-size: 9px;
-
-@scrollbar-thumb-bar-border_radius: 6px;
-
-@scrollbar-thumb-bar-bg_color: var(~'@{sd-cssvars-prefix}-color-neutral-4');
-
-@scrollbar-thumb-bar-bg_color_hover: var(~'@{sd-cssvars-prefix}-color-neutral-6');