@tendaui/components 1.2.3 → 1.3.0

package/styles/components/alert/_index.scss

@@ -1,175 +1,175 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
-
-@import '../../_vars.scss';
-
-@import './_vars.scss';
-
-@import '../../mixins/_reset.scss';
-
-/* Alert */
-.#{$prefix}-alert {
-  @include reset;
-
-  display: flex;
-  align-items: flex-start;
-  padding: $alert-padding;
-  opacity: 1;
-  transition: opacity 0.2s;
-  border-radius: $border-radius-medium;
-
-  &.#{$prefix}-is-hidden {
-    /* 隐藏 */
-    display: none;
-  }
-
-  &--closing {
-    opacity: 0;
-  }
-
-  &--info {
-    background-color: $alert-info-bg-color;
-
-    .#{$prefix}-alert__icon {
-      color: $alert-info-icon-color;
-    }
-
-    .#{$prefix}-alert__swiper-trigger-wrap {
-      color: $alert-info-trigger-color;
-    }
-
-    .#{$prefix}-alert__swiper-trigger--active {
-      color: $alert-info-trigger-active-color;
-    }
-  }
-
-  &--success {
-    background-color: $alert-success-bg-color;
-
-    .#{$prefix}-alert__icon {
-      color: $alert-success-icon-color;
-    }
-
-    .#{$prefix}-alert__swiper-trigger-wrap {
-      color: $alert-success-trigger-color;
-    }
-
-    .#{$prefix}-alert__swiper-trigger--active {
-      color: $alert-success-trigger-active-color;
-    }
-  }
-
-  &--warning {
-    background-color: $alert-warning-bg-color;
-
-    .#{$prefix}-alert__icon {
-      color: $alert-warning-icon-color;
-    }
-
-    .#{$prefix}-alert__swiper-trigger-wrap {
-      color: $alert-warning-trigger-color;
-    }
-
-    .#{$prefix}-alert__swiper-trigger--active {
-      color: $alert-warning-trigger-active-color;
-    }
-  }
-
-  &--error {
-    background-color: $alert-error-bg-color;
-
-    .#{$prefix}-alert__icon {
-      color: $alert-error-icon-color;
-    }
-
-    .#{$prefix}-alert__swiper-trigger-wrap {
-      color: $alert-error-trigger-color;
-    }
-
-    .#{$prefix}-alert__swiper-trigger--active {
-      color: $alert-error-trigger-active-color;
-    }
-  }
-}
-
-.#{$prefix}-alert__icon {
-  font-size: $alert-icon-size;
-  display: inherit;
-}
-
-.#{$prefix}-alert__icon,
-.#{$prefix}-alert__close {
-  flex: 0 0 auto;
-  line-height: $text-line-height-s;
-}
-
-.#{$prefix}-alert__content {
-  flex: 1 1 0;
-  font-size: $alert-font-size;
-  line-height: $alert-line-height;
-  overflow: hidden;
-}
-
-.#{$prefix}-alert__title,
-.#{$prefix}-alert__message {
-  width: 100%;
-  display: flex;
-}
-
-.#{$prefix}-alert__title {
-  color: $alert-title-color;
-  font-weight: bold;
-
-  + .#{$prefix}-alert__message {
-    margin-top: $alert-description-margin-top;
-  }
-}
-
-.#{$prefix}-alert__description {
-  color: $alert-description-color;
-  flex: 0 1 auto;
-  transition: height $anim-duration-base;
-}
-
-.#{$prefix}-alert__operation {
-  flex: 0 0 auto;
-  padding: $alert-operation-padding;
-  color: $brand-color;
-  cursor: pointer;
-  transition: color $anim-duration-base;
-
-  &:hover {
-    color: $brand-color-hover;
-  }
-
-  &:active {
-    color: $brand-color-active;
-  }
-}
-
-.#{$prefix}-alert__icon + .#{$prefix}-alert__content {
-  margin-left: $alert-margin-left;
-}
-
-.#{$prefix}-alert__collapse {
-  margin-top: $alert-collapse-margin-top;
-  color: $brand-color;
-  cursor: pointer;
-}
-
-.#{$prefix}-alert__close {
-  display: inline-flex;
-  align-items: center;
-  margin-left: $alert-close-margin-left;
-  color: $alert-close-color;
-  cursor: pointer;
-  transition: color $anim-duration-base;
-
-  &:hover {
-    color: $alert-close-color-hover;
-  }
-
-  > .t-icon {
-    font-size: $alert-close-size;
-    padding: $alert-close-padding;
-  }
-}
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@use "../../_vars.scss" as *;
+
+@use "./_vars.scss" as *;
+
+@use "../../mixins/_reset.scss" as reset;
+
+/* Alert */
+.#{$prefix}-alert {
+  @include reset.reset;
+
+  display: flex;
+  align-items: flex-start;
+  padding: $alert-padding;
+  opacity: 1;
+  transition: opacity 0.2s;
+  border-radius: $border-radius-medium;
+
+  &.#{$prefix}-is-hidden {
+    /* 隐藏 */
+    display: none;
+  }
+
+  &--closing {
+    opacity: 0;
+  }
+
+  &--info {
+    background-color: $alert-info-bg-color;
+
+    .#{$prefix}-alert__icon {
+      color: $alert-info-icon-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger-wrap {
+      color: $alert-info-trigger-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger--active {
+      color: $alert-info-trigger-active-color;
+    }
+  }
+
+  &--success {
+    background-color: $alert-success-bg-color;
+
+    .#{$prefix}-alert__icon {
+      color: $alert-success-icon-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger-wrap {
+      color: $alert-success-trigger-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger--active {
+      color: $alert-success-trigger-active-color;
+    }
+  }
+
+  &--warning {
+    background-color: $alert-warning-bg-color;
+
+    .#{$prefix}-alert__icon {
+      color: $alert-warning-icon-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger-wrap {
+      color: $alert-warning-trigger-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger--active {
+      color: $alert-warning-trigger-active-color;
+    }
+  }
+
+  &--error {
+    background-color: $alert-error-bg-color;
+
+    .#{$prefix}-alert__icon {
+      color: $alert-error-icon-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger-wrap {
+      color: $alert-error-trigger-color;
+    }
+
+    .#{$prefix}-alert__swiper-trigger--active {
+      color: $alert-error-trigger-active-color;
+    }
+  }
+}
+
+.#{$prefix}-alert__icon {
+  font-size: $alert-icon-size;
+  display: inherit;
+}
+
+.#{$prefix}-alert__icon,
+.#{$prefix}-alert__close {
+  flex: 0 0 auto;
+  line-height: $text-line-height-s;
+}
+
+.#{$prefix}-alert__content {
+  flex: 1 1 0;
+  font-size: $alert-font-size;
+  line-height: $alert-line-height;
+  overflow: hidden;
+}
+
+.#{$prefix}-alert__title,
+.#{$prefix}-alert__message {
+  width: 100%;
+  display: flex;
+}
+
+.#{$prefix}-alert__title {
+  color: $alert-title-color;
+  font-weight: bold;
+
+  + .#{$prefix}-alert__message {
+    margin-top: $alert-description-margin-top;
+  }
+}
+
+.#{$prefix}-alert__description {
+  color: $alert-description-color;
+  flex: 0 1 auto;
+  transition: height $anim-duration-base;
+}
+
+.#{$prefix}-alert__operation {
+  flex: 0 0 auto;
+  padding: $alert-operation-padding;
+  color: $brand-color;
+  cursor: pointer;
+  transition: color $anim-duration-base;
+
+  &:hover {
+    color: $brand-color-hover;
+  }
+
+  &:active {
+    color: $brand-color-active;
+  }
+}
+
+.#{$prefix}-alert__icon + .#{$prefix}-alert__content {
+  margin-left: $alert-margin-left;
+}
+
+.#{$prefix}-alert__collapse {
+  margin-top: $alert-collapse-margin-top;
+  color: $brand-color;
+  cursor: pointer;
+}
+
+.#{$prefix}-alert__close {
+  display: inline-flex;
+  align-items: center;
+  margin-left: $alert-close-margin-left;
+  color: $alert-close-color;
+  cursor: pointer;
+  transition: color $anim-duration-base;
+
+  &:hover {
+    color: $alert-close-color-hover;
+  }
+
+  > .t-icon {
+    font-size: $alert-close-size;
+    padding: $alert-close-padding;
+  }
+}

package/styles/components/alert/_vars.scss

@@ -1,39 +1,41 @@
-$alert-success-bg-color: $success-color-focus;
-$alert-info-bg-color: $brand-color-focus;
-$alert-warning-bg-color: $warning-color-focus;
-$alert-error-bg-color: $error-color-focus;
-$alert-title-color: $text-color-primary;
-$alert-description-color: $text-color-secondary;
-
-$alert-success-icon-color: $success-color;
-$alert-info-icon-color: $brand-color;
-$alert-warning-icon-color: $warning-color;
-$alert-error-icon-color: $error-color;
-
-$alert-close-color: $text-color-secondary;
-$alert-close-color-hover: $text-color-primary;
-
-$alert-success-trigger-color: $success-color-focus;
-$alert-info-trigger-color: $brand-color;
-$alert-warning-trigger-color: $warning-color-focus;
-$alert-error-trigger-color: $error-color-focus;
-
-$alert-success-trigger-active-color: $success-color;
-$alert-info-trigger-active-color: $brand-color;
-$alert-warning-trigger-active-color: $warning-color;
-$alert-error-trigger-active-color: $error-color;
-
-// size
-$alert-font-size: $font-size-base;
-$alert-line-height: $text-line-height-base;
-$alert-icon-size: $alert-line-height;
-$alert-close-size: calc($alert-line-height - 2px);
-
-// 间距
-$alert-padding: $comp-paddingTB-l $comp-paddingLR-xl;
-$alert-operation-padding: 0 $comp-paddingLR-s;
-$alert-margin-left: $comp-margin-s;
-$alert-close-margin-left: $comp-margin-l;
-$alert-close-padding: calc(($alert-line-height - $alert-close-size) / 2 ) 0;
-$alert-description-margin-top: $comp-margin-s;
-$alert-collapse-margin-top: $comp-margin-s;
+@use "../../_vars.scss" as *;
+
+$alert-success-bg-color: $success-color-focus;
+$alert-info-bg-color: $brand-color-focus;
+$alert-warning-bg-color: $warning-color-focus;
+$alert-error-bg-color: $error-color-focus;
+$alert-title-color: $text-color-primary;
+$alert-description-color: $text-color-secondary;
+
+$alert-success-icon-color: $success-color;
+$alert-info-icon-color: $brand-color;
+$alert-warning-icon-color: $warning-color;
+$alert-error-icon-color: $error-color;
+
+$alert-close-color: $text-color-secondary;
+$alert-close-color-hover: $text-color-primary;
+
+$alert-success-trigger-color: $success-color-focus;
+$alert-info-trigger-color: $brand-color;
+$alert-warning-trigger-color: $warning-color-focus;
+$alert-error-trigger-color: $error-color-focus;
+
+$alert-success-trigger-active-color: $success-color;
+$alert-info-trigger-active-color: $brand-color;
+$alert-warning-trigger-active-color: $warning-color;
+$alert-error-trigger-active-color: $error-color;
+
+// size
+$alert-font-size: $font-size-base;
+$alert-line-height: $text-line-height-base;
+$alert-icon-size: $alert-line-height;
+$alert-close-size: calc($alert-line-height - 2px);
+
+// 间距
+$alert-padding: $comp-paddingTB-l $comp-paddingLR-xl;
+$alert-operation-padding: 0 $comp-paddingLR-s;
+$alert-margin-left: $comp-margin-s;
+$alert-close-margin-left: $comp-margin-l;
+$alert-close-padding: calc(($alert-line-height - $alert-close-size) / 2) 0;
+$alert-description-margin-top: $comp-margin-s;
+$alert-collapse-margin-top: $comp-margin-s;

package/styles/components/badge/_index.scss

@@ -1,70 +1,71 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式.#{$prefix}
-
-@import '../../_vars.scss';
-
-@import './_vars.scss';
-
-@import '../../mixins/_reset.scss';
-
-// Badge
-.#{$prefix}-badge {
-  @include reset;
-
-  position: relative;
-  display: inline-block;
-
-  &--dot,
-  &--circle,
-  &--round {
-    position: absolute;
-    top: 0;
-    right: 0;
-    color: $badge-text-color;
-    text-align: center;
-    font: $badge-font;
-    transform: translate(50%, -50%);
-    transform-origin: 100% 0;
-    box-sizing: content-box;
-  }
-
-  &--static {
-    position: static;
-    display: inline-block;
-    transform: none;
-  }
-
-  &--dot {
-    right: 1px;
-    margin-top: 1px;
-    width: $badge-dot-size;
-    height: $badge-dot-size;
-    border-radius: $border-radius-circle;
-    background-color: $badge-color;
-  }
-
-  &--circle,
-  &--round {
-    padding-right: $badge-padding;
-    padding-left: $badge-padding;
-    min-width: $badge-min-width;
-    height: $badge-height;
-    background-color: $badge-color;
-    line-height: $badge-height;
-
-    &.#{$prefix}-size-s {
-      padding-right: $badge-padding-s;
-      padding-left: $badge-padding-s;
-      min-width: $badge-min-width;
-      height: $badge-height-s;
-      line-height: $badge-height-s;
-    }
-  }
-
-  &--circle {
-    border-radius: $badge-shape-circle;
-  }
-
-  &--round {
-    border-radius: $badge-shape-round;
-  }
-}
+@use "../../_vars.scss" as *;
+// 组件允许单个组件打包，因此默认引入公共基础样式.#{$prefix}
+
+@use '../../_vars.scss' as *;
+
+@use './_vars.scss' as *;
+
+@use '../../mixins/_reset.scss' as *;
+
+// Badge
+.#{$prefix}-badge {
+  @include reset;
+
+  position: relative;
+  display: inline-block;
+
+  &--dot,
+  &--circle,
+  &--round {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: $badge-text-color;
+    text-align: center;
+    font: $badge-font;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+    box-sizing: content-box;
+  }
+
+  &--static {
+    position: static;
+    display: inline-block;
+    transform: none;
+  }
+
+  &--dot {
+    right: 1px;
+    margin-top: 1px;
+    width: $badge-dot-size;
+    height: $badge-dot-size;
+    border-radius: $border-radius-circle;
+    background-color: $badge-color;
+  }
+
+  &--circle,
+  &--round {
+    padding-right: $badge-padding;
+    padding-left: $badge-padding;
+    min-width: $badge-min-width;
+    height: $badge-height;
+    background-color: $badge-color;
+    line-height: $badge-height;
+
+    &.#{$prefix}-size-s {
+      padding-right: $badge-padding-s;
+      padding-left: $badge-padding-s;
+      min-width: $badge-min-width;
+      height: $badge-height-s;
+      line-height: $badge-height-s;
+    }
+  }
+
+  &--circle {
+    border-radius: $badge-shape-circle;
+  }
+
+  &--round {
+    border-radius: $badge-shape-round;
+  }
+}

package/styles/components/badge/_vars.scss

@@ -1,25 +1,26 @@
-$badge-text-color: $text-color-anti;
-$badge-color: $error-color;
-
-// 尺寸
-// 默认尺寸 circle/round 高度
-$badge-height: $comp-size-xxs;
-// 小尺寸 circle/round 高度
-$badge-height-s: $comp-size-xxxs;
-// dot 宽/高
-$badge-dot-size: 6px;
-// $badge-status-size: 6px;
-$badge-min-width: 8px;
-
-// 字体
-$badge-font: $font-body-small;
-
-// 间距
-// 默认尺寸circle/round 左右padding
-$badge-padding: calc(($badge-height - $badge-min-width) / 2);
-// 小尺寸circle/round 左右padding
-$badge-padding-s: calc(($badge-height-s - $badge-min-width) / 2);
-
-//边框
-$badge-shape-circle: calc($badge-height / 2);
-$badge-shape-round: $border-radius-default;
+@use "../../_vars.scss" as *;
+$badge-text-color: $text-color-anti;
+$badge-color: $error-color;
+
+// 尺寸
+// 默认尺寸 circle/round 高度
+$badge-height: $comp-size-xxs;
+// 小尺寸circle/round 高度
+$badge-height-s: $comp-size-xxxs;
+// dot 大小
+$badge-dot-size: 6px;
+// $badge-status-size: 6px;
+$badge-min-width: 8px;
+
+// 字体
+$badge-font: $font-body-small;
+
+// 间距
+// 默认尺寸circle/round 左右padding
+$badge-padding: calc(($badge-height - $badge-min-width) / 2);
+// 小尺寸circle/round 左右padding
+$badge-padding-s: calc(($badge-height-s - $badge-min-width) / 2);
+
+//边框
+$badge-shape-circle: calc($badge-height / 2);
+$badge-shape-round: $border-radius-default;