@sdata/web-vue 1.6.0 → 1.7.0

package/es/switch/style/index.scss

@@ -0,0 +1,327 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/switch/style/token.scss' as *;
+
+$switch-prefix-cls: string.unquote('#{theme.$prefix}-switch');
+
+$switch-size-default-gap: (($switch-size-default - $switch-size-dot-default) * 0.5);
+$switch-size-small-gap: (($switch-size-small - $switch-size-dot-small) * 0.5);
+
+$switch-size-default-line-gap: (($switch-size-default - $switch-line-size-dot-default) * 0.5);
+$switch-size-small-line-gap: (($switch-size-small - $switch-line-size-dot-small) * 0.5);
+
+.switch-slide-text-enter-from {
+  left: -100% !important;
+}
+
+.switch-slide-text-enter-to {
+  left: 8px !important;
+}
+
+.switch-slide-text-enter-active {
+  transition: left theme.$transition-duration-2 theme.$transition-timing-function-standard;
+}
+
+.switch-slide-text-leave-from {
+  left: 100% !important;
+}
+
+.switch-slide-text-leave-to {
+  left: $switch-size-dot-default + $switch-size-default-gap + 6px !important;
+}
+
+.switch-slide-text-leave-active {
+  transition: left theme.$transition-duration-2 theme.$transition-timing-function-standard;
+}
+
+.#{$switch-prefix-cls} {
+  position: relative;
+  box-sizing: border-box;
+  min-width: $switch-circle-default-width;
+  height: $switch-size-default;
+  padding: 0;
+  overflow: hidden;
+  line-height: $switch-size-default;
+  vertical-align: middle;
+  background-color: $switch-color-bg_off;
+  border: none;
+  border-radius: ($switch-size-default * 0.5);
+  outline: none;
+  cursor: pointer;
+  transition: background-color theme.$transition-duration-2
+    theme.$transition-timing-function-standard;
+
+  &-handle {
+    position: absolute;
+    top: $switch-size-default-gap;
+    left: $switch-size-default-gap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $switch-size-dot-default;
+    height: $switch-size-dot-default;
+    color: $switch-color-dot-icon_off;
+    font-size: 12px;
+    background-color: $switch-color-dot-bg;
+    border-radius: 50%;
+    transition: all theme.$transition-duration-2 theme.$transition-timing-function-standard;
+  }
+
+  &-checked {
+    background-color: $switch-color-bg_on;
+  }
+
+  &-checked &-handle {
+    left: calc(100% - $switch-size-dot-default - $switch-size-default-gap);
+    color: $switch-color-dot-icon_on;
+  }
+
+  &[disabled] &-handle {
+    color: $switch-color-dot-icon_off_disabled;
+  }
+
+  &[disabled]#{&}-checked &-handle {
+    color: $switch-color-dot-icon_on_disabled;
+  }
+
+  &[disabled] &-handle {
+    color: $switch-color-dot-icon_off_disabled;
+  }
+
+  &[disabled]#{&}-checked &-handle {
+    color: $switch-color-dot-icon_on_disabled;
+  }
+
+  &-text-holder {
+    margin: 0 8px 0 $switch-size-dot-default + $switch-size-default-gap + 6px;
+    font-size: $switch-font-size-text;
+    opacity: 0;
+  }
+
+  &-text {
+    position: absolute;
+    top: 0;
+    left: $switch-size-dot-default + $switch-size-default-gap + 6px;
+    color: $switch-color-text_off;
+    font-size: $switch-font-size-text;
+  }
+
+  &-checked &-text-holder {
+    margin: 0 $switch-size-dot-default + $switch-size-default-gap + 6px 0 8px;
+  }
+
+  &-checked &-text {
+    left: 8px;
+    color: $switch-color-text_on;
+  }
+
+  // Disabled
+  &[disabled] {
+    background-color: $switch-color-bg_off_disabled;
+    cursor: not-allowed;
+  }
+
+  &[disabled] &-text {
+    color: $switch-color-text_off_disabled;
+  }
+
+  &[disabled]#{&}-checked {
+    background-color: $switch-color-bg_on_disabled;
+  }
+
+  &[disabled]#{&}-checked &-text {
+    color: $switch-color-text_on_disabled;
+  }
+
+  // Loading
+  &-loading {
+    background-color: $switch-color-bg_off_loading;
+  }
+
+  &-loading &-handle {
+    color: $switch-color-dot-icon_off_loading;
+  }
+
+  &-loading &-text {
+    color: $switch-color-text_off_loading;
+  }
+
+  &-loading#{&}-checked {
+    background-color: $switch-color-bg_on_loading;
+  }
+
+  &-loading#{&}-checked &-handle {
+    color: $switch-color-dot-icon_on_loading;
+  }
+
+  &-loading#{&}-checked &-text {
+    color: $switch-color-text_on_loading;
+  }
+
+  &-small {
+    min-width: $switch-circle-small-width;
+    height: $switch-size-small;
+    line-height: $switch-size-small;
+  }
+
+  &-small#{&}-checked {
+    padding-left: -$switch-size-small-gap;
+  }
+
+  &-small &-handle {
+    top: $switch-size-small-gap;
+    left: $switch-size-small-gap;
+    width: $switch-size-dot-small;
+    height: $switch-size-dot-small;
+    border-radius: ($switch-size-small * 0.5);
+
+    &-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.66667);
+    }
+  }
+
+  &-small#{&}-checked &-handle {
+    left: calc(100% - $switch-size-dot-small - $switch-size-small-gap);
+  }
+}
+
+// Round
+.#{$switch-prefix-cls} {
+  &-type-round {
+    min-width: $switch-round-default-width;
+    border-radius: global.$radius-small;
+  }
+
+  &-type-round &-handle {
+    border-radius: 2px;
+  }
+
+  &-type-round#{&}-small {
+    min-width: $switch-round-small-width;
+    height: $switch-size-small;
+    line-height: $switch-size-small;
+    border-radius: 2px;
+  }
+
+  &-type-round#{&}-small &-handle {
+    border-radius: 1px;
+  }
+}
+
+// Line
+.#{$switch-prefix-cls} {
+  &-type-line {
+    min-width: $switch-line-default-width;
+    overflow: unset;
+    background-color: transparent;
+
+    &::after {
+      display: block;
+      width: 100%;
+      height: $switch-line-height-bg-line;
+      background-color: $switch-color-bg_off;
+      border-radius: ($switch-line-height-bg-line * 0.5);
+      transition: background-color theme.$transition-duration-2
+        theme.$transition-timing-function-standard;
+      content: '';
+    }
+  }
+
+  &-type-line &-handle {
+    top: $switch-size-default-line-gap;
+    left: 0;
+    width: $switch-line-size-dot-default;
+    height: $switch-line-size-dot-default;
+    background-color: $switch-color-dot-bg;
+    border-radius: ($switch-line-size-dot-default * 0.5);
+    box-shadow: 0 1px 3px $switch-line-color-dot-shadow;
+  }
+
+  &-type-line#{&}-checked {
+    background-color: transparent;
+
+    &::after {
+      background-color: $switch-color-bg_on;
+    }
+  }
+
+  &-type-line#{&}-custom-color {
+    --custom-color: $switch-color-bg_off;
+
+    &::after {
+      background-color: var(--custom-color);
+    }
+  }
+
+  &-type-line#{&}-custom-color#{&}-checked {
+    --custom-color: $switch-color-bg_on;
+  }
+
+  &-type-line#{&}-checked &-handle {
+    left: calc(100% - $switch-line-size-dot-default);
+  }
+
+  // Disabled
+  &-type-line[disabled] {
+    background-color: transparent;
+    cursor: not-allowed;
+
+    &::after {
+      background-color: $switch-color-bg_off_disabled;
+    }
+  }
+
+  &-type-line[disabled]#{&}-checked {
+    background-color: transparent;
+
+    &::after {
+      background-color: $switch-color-bg_on_disabled;
+    }
+  }
+
+  // Loading
+  &-type-line#{&}-loading {
+    background-color: transparent;
+
+    &::after {
+      background-color: $switch-color-bg_off_loading;
+    }
+  }
+
+  &-type-line#{&}-loading#{&}-checked {
+    background-color: transparent;
+
+    &::after {
+      background-color: $switch-color-bg_on_loading;
+    }
+  }
+
+  &-type-line#{&}-small {
+    min-width: $switch-line-small-width;
+    height: $switch-size-small;
+    line-height: $switch-size-small;
+  }
+
+  &-type-line#{&}-small#{&}-checked {
+    padding-left: -$switch-size-small-line-gap;
+  }
+
+  &-type-line#{&}-small &-handle {
+    top: $switch-size-small-line-gap;
+    width: $switch-line-size-dot-small;
+    height: $switch-line-size-dot-small;
+    border-radius: ($switch-size-small * 0.5);
+
+    &-icon {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  &-type-line#{&}-small#{&}-checked &-handle {
+    left: calc(100% - $switch-line-size-dot-small - $switch-size-small-line-gap);
+  }
+}

package/es/switch/style/token.scss

@@ -0,0 +1,68 @@
+@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 *;
+
+// Global
+$switch-size-default: global.$size-6;
+$switch-size-small: global.$size-4;
+$switch-font-size-text: global.$font-size-caption;
+
+// circle and round
+$switch-size-dot-default: global.$size-4;
+$switch-size-dot-small: 12px;
+
+// line
+$switch-line-size-dot-default: global.$size-5;
+$switch-line-size-dot-small: global.$size-4;
+
+// Circle
+$switch-circle-default-width: global.$size-10;
+$switch-circle-small-width: global.$size-7;
+
+// Round
+$switch-round-default-width: global.$size-10;
+$switch-round-small-width: global.$size-7;
+
+// Line
+$switch-line-default-width: global.$size-9;
+$switch-line-small-width: global.$size-7;
+$switch-line-height-bg-line: 6px;
+$switch-line-color-dot-shadow: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-6'));
+
+$switch-color-bg_on: global.$color-primary-6;
+$switch-color-bg_off: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
+$switch-color-bg_on_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+$switch-color-bg_off_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$switch-color-bg_on_loading: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+$switch-color-bg_off_loading: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$switch-color-dot-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-white'));
+$switch-color-text_on: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$switch-color-text_off: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$switch-color-text_on_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$switch-color-text_off_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$switch-color-text_on_loading: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$switch-color-text_off_loading: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$switch-color-dot-icon_on: global.$color-primary-6;
+$switch-color-dot-icon_off: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+$switch-color-dot-icon_on_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+$switch-color-dot-icon_off_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+$switch-color-dot-icon_on_loading: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+$switch-color-dot-icon_off_loading: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);

package/es/table/style/{filters-popup.less → filters-popup.scss}

@@ -1,17 +1,21 @@
-@table-prefix-cls: ~'@{prefix}-table';
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/table/style/token.scss' as *;
 
-.@{table-prefix-cls} {
+$table-prefix-cls: string.unquote('#{theme.$prefix}-table');
+
+.#{$table-prefix-cls} {
   &-filters-content {
     box-sizing: border-box;
-    min-width: @table-popup-min-width;
-    background: @table-color-bg-filters-popup;
-    border: 1px solid @table-color-border-filters-popup;
-    border-radius: @table-popup-border-radius;
-    box-shadow: @shadow1-down;
+    min-width: $table-popup-min-width;
+    background: $table-color-bg-filters-popup;
+    border: 1px solid $table-color-border-filters-popup;
+    border-radius: $table-popup-border-radius;
+    box-shadow: theme.$shadow1-down;
   }
 
   &-filters-list {
-    max-height: @table-popup-max-height;
+    max-height: $table-popup-max-height;
     padding: 4px 0;
     overflow-y: auto;
   }
@@ -42,7 +46,7 @@
     padding: 0 12px;
     overflow: hidden;
     line-height: 38px;
-    border-top: 1px solid @table-color-border;
+    border-top: 1px solid $table-color-border;
 
     > *:not(*:last-child) {
       margin-right: 8px;