@sdata/web-vue 1.6.0 → 1.7.0

package/es/radio/style/index.scss

@@ -0,0 +1,271 @@
+@use '@style/mixins/icon-hover.scss' as icon-hover;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/component.scss' as component;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@style/mixins/index.scss' as *;
+@use '@components/radio/style/token.scss' as *;
+
+$radio-prefix-cls: string.unquote('#{theme.$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 + .#{theme.$prefix}-radio-icon-hover::before {
+      background-color: component.$icon-hover-color-bg;
+    }
+  }
+}
+
+@include icon-hover.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 * 0.5) - ($radio-layout-height * 0.5);
+  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 theme.$transition-duration-3 theme.$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(string.unquote('#{theme.$sd-cssvars-prefix}-color-white'));
+      transform: scale(0.4);
+    }
+  }
+
+  &-checked:hover &-icon {
+    border-color: $radio-color-bg_checked;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+
+    .#{theme.$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: global.$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 {
+    .#{theme.$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 * 0.5);
+    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 * 0.5);
+  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 theme.$transition-duration-1 theme.$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) * 0.5) -
+      $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 theme.$transition-duration-1 theme.$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
+
+#{global.$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(string.unquote('#{theme.$sd-cssvars-prefix}-color-fill-3'));
+  }
+
+  .#{$radio-prefix-cls}-button::after {
+    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-3'));
+  }
+}

package/es/radio/style/token.scss

@@ -0,0 +1,108 @@
+@use '@style/theme/component.scss' as component;
+@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 *;
+
+$radio-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$radio-border-width: global.$border-2;
+
+$radio-layout-height: 14px;
+
+$radio-color-border_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$radio-color-border_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$radio-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$radio-color-bg_checked: global.$color-primary-6;
+
+$radio-border-radius: global.$radius-circle;
+
+$radio-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$radio-color-bg_checked_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$radio-color-dot-bg_checked_disabled: $radio-color-bg_disabled;
+
+$radio-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$radio-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$radio-color-text_checked_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$radio-font-text-size: global.$font-size-body-3;
+
+$radio-font-text-size_large: global.$font-size-body-3;
+
+$radio-font-text-size_mini: global.$font-size-body-1;
+
+$radio-font-text-size_small: global.$font-size-body-3;
+
+$radio-margin-text-left: global.$spacing-4;
+
+$radio-size-mask-height: global.$size-6;
+
+$radio-mask-bg-color-bg: component.$icon-hover-color-bg;
+
+$radio-group-margin-right: global.$spacing-8;
+
+$radio-group-button-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$radio-button-padding-horizontal: global.$spacing-6;
+
+$radio-button-spacing: 3px;
+
+$radio-button-color-bg_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-5'));
+
+$radio-button-color-bg_hover: $radio-button-color-bg_active;
+
+$radio-button-color-text_active: global.$color-primary-6;
+
+$radio-button-font-text-weight_active: global.$font-weight-500;
+
+$radio-button-color-text_hover: $radio-color-text;
+
+$radio-button-border-radius: global.$radius-small;
+
+$radio-button-bg-border-radius: $radio-button-border-radius;
+
+$radio-button-color-bg: global.$color-transparent;
+
+$radio-button-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$radio-button-color-bg_disabled: global.$color-transparent;
+
+$radio-button-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$radio-button-color-bg_checked_disabled: $radio-button-color-bg_active;
+
+$radio-button-color-text_checked_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$radio-button-color-separator-bg: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+$radio-button-size-separator-width: 1px;
+
+$radio-button-size-separator-height: 14px;
+
+$radio-size-default-height: global.$size-default;
+
+$radio-size-small-height: global.$size-small;
+
+$radio-size-mini-height: global.$size-mini;
+
+$radio-size-large-height: global.$size-large;
+
+$radio-group-size-line-height_vertical: global.$size-8;

package/es/rate/style/index.css

@@ -37,12 +37,10 @@
 .sd-rate-character:not(:last-child) {
   margin-right: 8px;
 }
-.sd-rate-character-left,
-.sd-rate-character-right {
+.sd-rate-character-left, .sd-rate-character-right {
   transition: inherit;
 }
-.sd-rate-character-left > *,
-.sd-rate-character-right > * {
+.sd-rate-character-left > *, .sd-rate-character-right > * {
   float: left;
 }
 .sd-rate-character-left {
@@ -70,10 +68,10 @@
 .sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character {
   cursor: pointer;
 }
-.sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character:hover,
-.sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character:focus {
+.sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character:hover, .sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character:focus {
   transform: scale(1.2);
 }
+
 @keyframes sd-rate-scale {
   0% {
     transform: scale(1);
@@ -84,4 +82,4 @@
   100% {
     transform: scale(1);
   }
-}
+}

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

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

package/es/rate/style/index.js

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

package/es/rate/style/{index.less → index.scss}

@@ -1,12 +1,14 @@
-@import url('./token.less');
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/rate/style/token.scss' as *;
 
-@rate-prefix-cls: ~'@{prefix}-rate';
+$rate-prefix-cls: string.unquote('#{theme.$prefix}-rate');
 
-.@{rate-prefix-cls} {
+.#{$rate-prefix-cls} {
   display: inline-flex;
   align-items: center;
-  min-height: @rate-min-height;
-  font-size: @rate-font-size;
+  min-height: $rate-min-height;
+  font-size: $rate-font-size;
   line-height: 1;
   user-select: none;
 
@@ -16,11 +18,11 @@
 
   &-character {
     position: relative;
-    color: @rate-color-bg_default;
-    transition: transform @transition-duration-2 @transition-timing-function-standard;
+    color: $rate-color-bg_default;
+    transition: transform theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
     &:not(:last-child) {
-      margin-right: @rate-gap-size;
+      margin-right: $rate-gap-size;
     }
 
     &-left,
@@ -44,15 +46,16 @@
     }
 
     &-scale {
-      animation: ~'@{prefix}-rate-scale' @transition-duration-4 @transition-timing-function-standard;
+      animation: #{theme.$prefix}-rate-scale theme.$transition-duration-4
+        theme.$transition-timing-function-standard;
     }
 
     &-full &-right {
-      color: @rate-color-bg_active;
+      color: $rate-color-bg_active;
     }
 
     &-half &-left {
-      color: @rate-color-bg_active;
+      color: $rate-color-bg_active;
       opacity: 1;
     }
 
@@ -61,23 +64,23 @@
     }
   }
 
-  &:not(&-readonly, &-disabled) &-character {
+  &:not(#{&}-readonly, &-disabled) &-character {
     cursor: pointer;
 
     &:hover,
     &:focus {
-      transform: scale(@rate-scale_active);
+      transform: scale($rate-scale_active);
     }
   }
 }
 
-@keyframes ~'@{prefix}-rate-scale' {
+@keyframes #{theme.$prefix}-rate-scale {
   0% {
     transform: scale(1);
   }
 
   50% {
-    transform: scale(@rate-scale_active);
+    transform: scale($rate-scale_active);
   }
 
   100% {

package/es/rate/style/token.scss

@@ -0,0 +1,24 @@
+@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 *;
+
+/**********************************************
+ * status: disabled / readonly
+ **********************************************/
+$rate-min-height: global.$size-default;
+
+$rate-gap-size: global.$spacing-4;
+
+$rate-font-size: global.$font-size-title-3;
+
+$rate-scale_active: 1.2;
+
+$rate-color-bg_active: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-6')));
+
+$rate-color-bg_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$rate-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-5')));

package/es/resize-box/style/index.css

@@ -20,10 +20,7 @@
   width: 100%;
   overflow: hidden;
 }
-.sd-resizebox-direction-left,
-.sd-resizebox-direction-right,
-.sd-resizebox-direction-top,
-.sd-resizebox-direction-bottom {
+.sd-resizebox-direction-left, .sd-resizebox-direction-right, .sd-resizebox-direction-top, .sd-resizebox-direction-bottom {
   position: absolute;
   top: 0;
   left: 0;
@@ -38,6 +35,7 @@
   top: unset;
   bottom: 0;
 }
+
 .sd-resizebox-trigger-icon-wrapper {
   display: flex;
   align-items: center;
@@ -59,4 +57,4 @@
 .sd-resizebox-trigger-horizontal {
   width: 100%;
   cursor: row-resize;
-}
+}

package/es/resize-box/style/index.d.ts

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

package/es/resize-box/style/index.js

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

package/es/resize-box/style/{index.less → index.scss}

@@ -1,9 +1,11 @@
-@import url('./token.less');
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/resize-box/style/token.scss' as *;
 
-@resizebox-prefix-cls: ~'@{prefix}-resizebox';
-@resizebox-trigger-prefix-cls: ~'@{resizebox-prefix-cls}-trigger';
+$resizebox-prefix-cls: string.unquote('#{theme.$prefix}-resizebox');
+$resizebox-trigger-prefix-cls: string.unquote('#{$resizebox-prefix-cls}-trigger');
 
-.@{resizebox-prefix-cls} {
+.#{$resizebox-prefix-cls} {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -31,21 +33,21 @@
 }
 
 // 伸缩触发杆
-.@{resizebox-trigger-prefix-cls} {
+.#{$resizebox-trigger-prefix-cls} {
   &-icon-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
-    color: @resizeBox-trigger-color-icon;
-    font-size: @resizeBox-trigger-font-size-icon;
+    color: $resizeBox-trigger-color-icon;
+    font-size: $resizeBox-trigger-font-size-icon;
     line-height: 1;
-    background-color: @resizeBox-trigger-color-background;
+    background-color: $resizeBox-trigger-color-background;
   }
 
   &-icon {
     display: inline-block;
-    margin: -(@resizeBox-trigger-font-size-icon / 4);
+    margin: -($resizeBox-trigger-font-size-icon * 0.25);
   }
 
   &-vertical {

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

@@ -0,0 +1,14 @@
+@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 *;
+
+$resizeBox-trigger-color-background: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+// $resizeBox-trigger-size-icon-wrapper: 6px;
+$resizeBox-trigger-font-size-icon: 12px;
+$resizeBox-trigger-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));

package/es/result/style/index.css

@@ -56,14 +56,10 @@
   color: rgb(var(--warning-6));
   background-color: var(--color-warning-light-1);
 }
-.sd-result-icon-404,
-.sd-result-icon-403,
-.sd-result-icon-500 {
+.sd-result-icon-404, .sd-result-icon-403, .sd-result-icon-500 {
   padding-top: 24px;
 }
-.sd-result-icon-404 .sd-result-icon-tip,
-.sd-result-icon-403 .sd-result-icon-tip,
-.sd-result-icon-500 .sd-result-icon-tip {
+.sd-result-icon-404 .sd-result-icon-tip, .sd-result-icon-403 .sd-result-icon-tip, .sd-result-icon-500 .sd-result-icon-tip {
   width: 92px;
   height: 92px;
   line-height: 92px;
@@ -87,4 +83,4 @@
 }
 .sd-result-content {
   margin-top: 20px;
-}
+}

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

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

package/es/result/style/index.js

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