@sdata/web-vue 1.6.0 → 1.7.0

package/es/badge/style/index.scss

@@ -0,0 +1,230 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:list';
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@components/badge/style/token.scss' as *;
+
+$badge-prefix-cls: string.unquote('#{theme.$prefix}-badge');
+
+$__less-vars: (
+  'badge-color-count-bg': $badge-color-count-bg,
+  'badge-color-count-text': $badge-color-count-text,
+  'badge-color-dot-bg_default': $badge-color-dot-bg_default,
+  'badge-color-dot-bg_error': $badge-color-dot-bg_error,
+  'badge-color-dot-bg_processing': $badge-color-dot-bg_processing,
+  'badge-color-dot-bg_success': $badge-color-dot-bg_success,
+  'badge-color-dot-bg_warning': $badge-color-dot-bg_warning,
+  'badge-red-color-dot-bg': $badge-red-color-dot-bg,
+  'badge-orangered-color-dot-bg': $badge-orangered-color-dot-bg,
+  'badge-orange-color-dot-bg': $badge-orange-color-dot-bg,
+  'badge-gold-color-dot-bg': $badge-gold-color-dot-bg,
+  'badge-lime-color-dot-bg': $badge-lime-color-dot-bg,
+  'badge-green-color-dot-bg': $badge-green-color-dot-bg,
+  'badge-cyan-color-dot-bg': $badge-cyan-color-dot-bg,
+  'badge-sdblue-color-dot-bg': $badge-sdblue-color-dot-bg,
+  'badge-purple-color-dot-bg': $badge-purple-color-dot-bg,
+  'badge-pinkpurple-color-dot-bg': $badge-pinkpurple-color-dot-bg,
+  'badge-magenta-color-dot-bg': $badge-magenta-color-dot-bg,
+  'badge-gray-color-dot-bg': $badge-gray-color-dot-bg,
+  'badge-color-status-text': $badge-color-status-text,
+  'badge-font-count-size': $badge-font-count-size,
+  'badge-font-count-weight': $badge-font-count-weight,
+  'badge-font-status-text-size': $badge-font-status-text-size,
+  'badge-margin-status-text-left': $badge-margin-status-text-left,
+  'badge-padding-count-horizontal': $badge-padding-count-horizontal,
+  'badge-size-count-height': $badge-size-count-height,
+  'badge-size-dot-width': $badge-size-dot-width,
+  'line-height-base': theme.$line-height-base,
+  'prefix': theme.$prefix,
+  'radius-circle': global.$radius-circle,
+  'sd-cssvars-prefix': theme.$sd-cssvars-prefix,
+  'transition-duration-3': theme.$transition-duration-3,
+  'transition-duration-5': theme.$transition-duration-5,
+  'transition-timing-function-overshoot': theme.$transition-timing-function-overshoot,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+.#{$badge-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-number,
+  &-dot,
+  &-text,
+  &-custom-dot {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 2;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-align: center;
+    border-radius: $badge-size-count-height;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0%;
+  }
+
+  &-rtl &-number,
+  &-rtl &-dot,
+  &-rtl &-text,
+  &-rtl &-custom-dot {
+    right: unset;
+  }
+
+  &-custom-dot {
+    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
+  }
+
+  &-number,
+  &-text {
+    min-width: $badge-size-count-height;
+    height: $badge-size-count-height;
+    padding: 0 $badge-padding-count-horizontal;
+    color: $badge-color-count-text;
+    font-weight: $badge-font-count-weight;
+    font-size: $badge-font-count-size;
+    line-height: $badge-size-count-height;
+    background-color: $badge-color-count-bg;
+    box-shadow: 0 0 0 2px var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
+  }
+
+  &-dot {
+    width: $badge-size-dot-width;
+    height: $badge-size-dot-width;
+    background-color: $badge-color-count-bg;
+    border-radius: global.$radius-circle;
+    box-shadow: 0 0 0 2px var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-2'));
+  }
+
+  &-no-children &-dot,
+  &-no-children &-number,
+  &-no-children &-text {
+    position: relative;
+    top: unset;
+    right: unset;
+    display: inline-block;
+    transform: none;
+  }
+
+  &-status-wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-status-dot {
+    display: inline-block;
+    width: $badge-size-dot-width;
+    height: $badge-size-dot-width;
+    border-radius: global.$radius-circle;
+  }
+
+  &-status-normal {
+    background-color: $badge-color-dot-bg_default;
+  }
+
+  &-status-processing {
+    background-color: $badge-color-dot-bg_processing;
+  }
+
+  &-status-success {
+    background-color: $badge-color-dot-bg_success;
+  }
+
+  &-status-warning {
+    background-color: $badge-color-dot-bg_warning;
+  }
+
+  &-status-danger {
+    background-color: $badge-color-dot-bg_error;
+  }
+
+  $colors:
+    'red', 'orangered', 'orange', 'gold', 'lime', 'green', 'cyan', 'sdblue', 'purple', 'pinkpurple',
+    'magenta', 'gray';
+
+  @mixin for($data, $i: 1) {
+    @if $i <= list.length($data) {
+      $color-name: list.nth($data, $i);
+
+      $color: string.unquote('badge-#{$color-name}-color-dot-bg');
+
+      &-color-#{$color-name} {
+        background-color: less-var($color);
+      }
+
+      @include for($data, ($i + 1));
+    }
+  }
+
+  @include for($colors);
+
+  .#{$badge-prefix-cls}-status-text {
+    margin-left: $badge-margin-status-text-left;
+    color: $badge-color-status-text;
+    font-size: $badge-font-status-text-size;
+    line-height: theme.$line-height-base;
+  }
+
+  &-rtl &-status-text {
+    margin-right: $badge-margin-status-text-left;
+    margin-left: 0;
+  }
+
+  &-number-text {
+    display: inline-block;
+    animation: #{theme.$prefix}-badge-scale theme.$transition-duration-5
+      theme.$transition-timing-function-overshoot;
+  }
+}
+
+@keyframes #{theme.$prefix}-badge-scale {
+  from {
+    transform: scale(0, 0);
+  }
+
+  to {
+    transform: scale(1, 1);
+  }
+}
+
+.badge-zoom-enter,
+.badge-zoom-appear {
+  transform: translate(50%, -50%) scale(0.2, 0.2);
+  // opacity: 0;
+  transform-origin: center;
+}
+
+.badge-zoom-enter-active,
+.badge-zoom-appear-active {
+  transform: translate(50%, -50%) scale(1, 1);
+  transform-origin: center;
+  opacity: 1;
+  transition:
+    opacity theme.$transition-duration-3 theme.$transition-timing-function-overshoot,
+    transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+}
+
+.badge-zoom-exit {
+  transform: translate(50%, -50%) scale(1, 1);
+  transform-origin: center;
+  opacity: 1;
+}
+
+.badge-zoom-exit-active {
+  transform: translate(50%, -50%) scale(0.2, 0.2);
+  transform-origin: center;
+  opacity: 0;
+  transition:
+    opacity theme.$transition-duration-3 theme.$transition-timing-function-overshoot,
+    transform theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+}

package/es/badge/style/token.scss

@@ -0,0 +1,64 @@
+@use '@style/color/colors.scss';
+@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 *;
+
+$badge-size-count-height: global.$size-5;
+
+$badge-padding-count-horizontal: global.$spacing-3;
+
+$badge-margin-status-text-left: global.$spacing-4;
+
+$badge-font-count-size: global.$font-size-body-1;
+
+$badge-font-status-text-size: global.$font-size-body-1;
+
+$badge-color-count-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+$badge-color-status-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$badge-color-count-bg: global.$color-danger-6;
+
+$badge-size-dot-width: 6px;
+
+$badge-color-dot-bg_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
+
+$badge-color-dot-bg_processing: global.$color-primary-6;
+
+$badge-color-dot-bg_success: global.$color-success-6;
+
+$badge-color-dot-bg_warning: global.$color-warning-6;
+
+$badge-color-dot-bg_error: global.$color-danger-6;
+
+$badge-font-count-weight: global.$font-weight-500;
+
+$badge-red-color-dot-bg: global.$color-danger-6;
+
+$badge-orangered-color-dot-bg: colors.$orangered-6;
+
+$badge-orange-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-orange-6')));
+
+$badge-lime-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-lime-6')));
+
+$badge-gold-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-6')));
+
+$badge-green-color-dot-bg: global.$color-success-6;
+
+$badge-cyan-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-cyan-6')));
+
+$badge-sdblue-color-dot-bg: global.$color-primary-6;
+
+$badge-pinkpurple-color-dot-bg: rgb(
+  var(string.unquote('#{global.$sd-cssvars-prefix}-pinkpurple-6'))
+);
+
+$badge-purple-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-purple-6')));
+
+$badge-magenta-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-magenta-6')));
+
+$badge-gray-color-dot-bg: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-4')));

package/es/breadcrumb/style/index.css

@@ -75,4 +75,4 @@
 }
 .sd-breadcrumb-item-dropdown-icon-active svg {
   transform: rotate(180deg);
-}
+}

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

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

package/es/breadcrumb/style/index.js

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

package/es/breadcrumb/style/index.scss

@@ -0,0 +1,78 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/breadcrumb/style/token.scss' as *;
+
+$breadcrumb-prefix-cls: string.unquote('#{theme.$prefix}-breadcrumb');
+
+.#{$breadcrumb-prefix-cls} {
+  display: inline-flex;
+  align-items: center;
+  color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-2'));
+  font-size: $breadcrumb-size-font-size;
+
+  &-icon {
+    color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-2'));
+  }
+
+  &-item {
+    display: inline-block;
+    padding: 0 $breadcrumb-padding-text-horizontal;
+    color: $breadcrumb-color-text;
+    line-height: $breadcrumb-size-text-height;
+    vertical-align: middle;
+
+    > .#{theme.$prefix}-icon {
+      color: $breadcrumb-color-icon;
+    }
+
+    a {
+      display: inline-block;
+      margin: 0 (-$breadcrumb-padding-text-horizontal);
+      padding: 0 $breadcrumb-padding-text-horizontal;
+      color: $breadcrumb-color-link-text;
+      text-decoration: none;
+      background-color: $breadcrumb-color-bg;
+      border-radius: $breadcrumb-border-text-radius_hover;
+
+      &:hover {
+        color: $breadcrumb-color-link-text_hover;
+        background-color: $breadcrumb-color-bg_hover;
+      }
+    }
+
+    &:last-child {
+      color: $breadcrumb-color-text_active;
+      font-weight: $breadcrumb-font-weight_active;
+    }
+
+    &-ellipses {
+      position: relative;
+      top: -3px;
+      display: inline-block;
+      padding: 0 $breadcrumb-padding-text-horizontal;
+      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-2'));
+    }
+
+    &-separator {
+      display: inline-block;
+      margin: 0 $breadcrumb-margin-separator-horizontal;
+      color: $breadcrumb-color-separator;
+      line-height: $breadcrumb-size-text-height;
+      vertical-align: middle;
+    }
+
+    &-with-dropdown {
+      cursor: pointer;
+    }
+
+    &-dropdown-icon {
+      margin-left: $breadcrumb-margin-dropdown-icon-left;
+      color: $breadcrumb-color-dropdown-icon;
+      font-size: $breadcrumb-size-dropdown-icon;
+
+      &-active svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

package/es/breadcrumb/style/token.scss

@@ -0,0 +1,43 @@
+@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 *;
+
+$breadcrumb-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$breadcrumb-color-text_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$breadcrumb-color-link-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$breadcrumb-color-separator: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$breadcrumb-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$breadcrumb-color-bg: global.$color-transparent;
+
+$breadcrumb-margin-separator-horizontal: global.$spacing-2;
+
+$breadcrumb-margin-dropdown-icon-left: global.$spacing-2;
+
+$breadcrumb-padding-text-horizontal: global.$spacing-2;
+
+$breadcrumb-border-text-radius_hover: global.$radius-small;
+
+$breadcrumb-size-text-height: global.$size-6;
+
+$breadcrumb-size-separator-height: global.$size-3;
+
+$breadcrumb-size-dropdown-icon: global.$size-3;
+
+$breadcrumb-size-font-size: global.$font-size-body-3;
+
+$breadcrumb-font-weight_active: global.$font-weight-500;
+
+$breadcrumb-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$breadcrumb-color-link-text_hover: global.$color-link-6;
+
+$breadcrumb-color-dropdown-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));