@tendaui/components 1.2.3 → 1.3.0

package/styles/components/loading/_index.scss

@@ -1,112 +1,113 @@
-@import '../../_vars.scss';
-
-@import './_vars.scss';
-
-@import '../../utilities/_animation.scss';
-
-@import '../../mixins/_reset.scss';
-
-.#{$prefix}-loading {
-  @include reset;
-
-  position: relative;
-  color: $loading-color;
-  font-size: $loading-icon-size;
-
-  &--lock {
-    overflow: hidden;
-  }
-
-  &.#{$prefix}-size-s {
-    font-size: $loading-icon-size-small;
-  }
-
-  &.#{$prefix}-size-l {
-    font-size: $loading-icon-size-large;
-  }
-
-  &__parent--relative {
-    position: relative !important;
-  }
-}
-
-.#{$prefix}-loading__fullscreen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: $z-index-loading;
-}
-
-.#{$prefix}-loading--center {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  justify-content: center;
-}
-
-.#{$prefix}-loading__content {
-  position: absolute;
-  left: 48%;
-  top: 20%;
-}
-
-.#{$prefix}-loading--inherit-color {
-  color: inherit;
-}
-
-.#{$prefix}-loading__parent {
-  position: relative;
-}
-
-.#{$prefix}-loading__overlay {
-  background-color: $loading-mask-color;
-}
-
-/** 仅用于作为包裹元素时 */
-.#{$prefix}-loading--full {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: $z-index-loading;
-}
-
-.#{$prefix}-loading--hidden {
-  visibility: hidden;
-}
-
-.#{$prefix}-loading--visible {
-  visibility: visible;
-}
-
-.#{$prefix}-loading__text {
-  width: auto;
-  display: inline-block;
-  vertical-align: middle;
-  font: $loading-text-size;
-  margin-left: $loading-text-margin-left;
-}
-
-.#{$prefix}-loading__gradient {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  vertical-align: middle;
-
-  &-conic {
-    width: 100%;
-    height: 100%;
-    border-radius: $border-radius-circle;
-    /* stylelint-disable-next-line color-no-hex */
-    background: conic-gradient(
-      from 90deg at 50% 50%,
-      #fff 0deg,
-      currentcolor 360deg
-    );
-    -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
-    mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
-  }
-}
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
+
+@use './_vars.scss' as *;
+
+@use '../../utilities/_animation.scss' as *;
+
+@use '../../mixins/_reset.scss' as *;
+
+.#{$prefix}-loading {
+  @include reset;
+
+  position: relative;
+  color: $loading-color;
+  font-size: $loading-icon-size;
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &.#{$prefix}-size-s {
+    font-size: $loading-icon-size-small;
+  }
+
+  &.#{$prefix}-size-l {
+    font-size: $loading-icon-size-large;
+  }
+
+  &__parent--relative {
+    position: relative !important;
+  }
+}
+
+.#{$prefix}-loading__fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-loading;
+}
+
+.#{$prefix}-loading--center {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+}
+
+.#{$prefix}-loading__content {
+  position: absolute;
+  left: 48%;
+  top: 20%;
+}
+
+.#{$prefix}-loading--inherit-color {
+  color: inherit;
+}
+
+.#{$prefix}-loading__parent {
+  position: relative;
+}
+
+.#{$prefix}-loading__overlay {
+  background-color: $loading-mask-color;
+}
+
+/** 仅用于作为包裹元素时 */
+.#{$prefix}-loading--full {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-loading;
+}
+
+.#{$prefix}-loading--hidden {
+  visibility: hidden;
+}
+
+.#{$prefix}-loading--visible {
+  visibility: visible;
+}
+
+.#{$prefix}-loading__text {
+  width: auto;
+  display: inline-block;
+  vertical-align: middle;
+  font: $loading-text-size;
+  margin-left: $loading-text-margin-left;
+}
+
+.#{$prefix}-loading__gradient {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+
+  &-conic {
+    width: 100%;
+    height: 100%;
+    border-radius: $border-radius-circle;
+    /* stylelint-disable-next-line color-no-hex */
+    background: conic-gradient(
+      from 90deg at 50% 50%,
+      #fff 0deg,
+      currentcolor 360deg
+    );
+    -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
+    mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
+  }
+}

package/styles/components/loading/_vars.scss

@@ -1,39 +1,40 @@
-// 组件变量
-// 名称可按如下规则定义：
-// <component>-[type]-[attrtype]-<attr>-[status]
-
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
-
-// 如：$button-line-bg-color-hover
-// 如：$button-line-height-s
-
-//颜色
-$loading-color: $brand-color;
-$loading-mask-color: $mask-disabled;
-$loading-gradient-color: $brand-color;
-
-// 字号
-$loading-text-size: $font-body-medium;
-$loading-icon-size: $comp-size-l;
-$loading-icon-size-small: $comp-size-xxxs;
-$loading-icon-size-large: $comp-size-xxxl;
-$loading-fullscreen-icon-size: $loading-icon-size;
-
-// 间距
-$loading-text-margin-left: $comp-margin-xs;
-$loading-gradient-padding-s: 1px;
-$loading-gradient-padding-m: 3px;
-$loading-gradient-padding-l: 5px;
-
-// Size
-$loading-gradient-size-s: $comp-size-xxxs;
-$loading-gradient-size-m: $comp-size-xl;
-$loading-gradient-size-l: $comp-size-xxxl;
-
-$loading-gradient-mask-size-s: 5.5px;
-$loading-gradient-mask-size-m: 11.5px;
-$loading-gradient-mask-size-l: 15.5px;
+@use "../../_vars.scss" as *;
+// 组件变量
+// 名称可按如下规则定义//
+// <component>-[type]-[attrtype]-<attr>-[status]
+
+// component:组件名，如button//
+// type: 组件类型，如 button 的次要按钮（line//
+// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius//
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l
+
+// 如：$button-line-bg-color-hover
+// 如：$button-line-height-s
+
+//颜色
+$loading-color: $brand-color;
+$loading-mask-color: $mask-disabled;
+$loading-gradient-color: $brand-color;
+
+// 字号
+$loading-text-size: $font-body-medium;
+$loading-icon-size: $comp-size-l;
+$loading-icon-size-small: $comp-size-xxxs;
+$loading-icon-size-large: $comp-size-xxxl;
+$loading-fullscreen-icon-size: $loading-icon-size;
+
+// 间距
+$loading-text-margin-left: $comp-margin-xs;
+$loading-gradient-padding-s: 1px;
+$loading-gradient-padding-m: 3px;
+$loading-gradient-padding-l: 5px;
+
+// Size
+$loading-gradient-size-s: $comp-size-xxxs;
+$loading-gradient-size-m: $comp-size-xl;
+$loading-gradient-size-l: $comp-size-xxxl;
+
+$loading-gradient-mask-size-s: 5.5px;
+$loading-gradient-mask-size-m: 11.5px;
+$loading-gradient-mask-size-l: 15.5px;

package/styles/components/notification/_index.scss

@@ -1,160 +1,161 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
-@import '../../vars.scss';
-
-@import './_vars.scss';
-
-@import './_mixins.scss';
-
-@import '../../mixins/_reset.scss';
-
+@use "../../_vars.scss" as *;
+// 组件允许单个组件打包，因此默认引入公共基础样式
+@use '../../vars.scss' as *;
+
+@use './_vars.scss' as *;
+
+@use './_mixins.scss' as *;
+
+@use '../../mixins/_reset.scss' as *;
+
 .#{$prefix}-notify {
   &[data-x-position='right'] {
-    right: 8px;
+    inset-inline-end: 8px;
   }
 
   &[data-x-position='left'] {
-    left: 8px;
+    inset-inline-start: 8px;
   }
-
+
   &[data-x-position='center'] {
-    left: 50%;
+    inset-inline-start: 50%;
     transform: translateX(-50%);
   }
-
-  &[data-y-position='top'] {
-    top: 10px;
-  }
-  @include reset;
-  position: fixed;
-  z-index: $z-index-Notification;
-  width: $notification-width-default;
-  &__container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  &__item {
-    border-radius: $notification-detail-item-border-radius;
-    padding: $notification-padding-default;
-    background-color: $notification-color-block;
-    color: $notification-content-color;
-    box-shadow: $notification-shadow;
-    overflow: hidden;
-    &:hover {
-      background-color: $bg-color-container-hover;
-      color: $notification-detail-item-color-hover;
-    }
-    &:active {
-      background-color: $bg-color-container-active;
-      color: $notification-detail-item-color-active;
-    }
-
-    --y: translateY(-100%);
-    transform: var(--y);
-    transition:
-      transform 400ms,
-      opacity 400ms,
-      height 400ms,
-      box-shadow 200ms;
-    z-index: var(--z-index);
-
-    &[data-mounted='true'] {
-      &[data-expanded='false'] {
-        --y: translateY(calc(var(--gap) * var(--index)))
-          scale(calc(1 - var(--index) * 0.05));
-      }
-
-      &[data-expanded='true'] {
-        --y: translateY(var(--offset)) scale(1);
-      }
-
-      &[data-removed='true'] {
-        &[data-front='true'] {
-          --y: translateY(-100%);
-          opacity: 0;
-        }
-
-        &[data-front='false'] {
-          --y: translateY(-40%);
-          opacity: 0;
-          transition:
-            transform 400ms,
-            opacity 200ms;
-        }
-      }
-    }
-  }
-
+
+  &[data-y-position='top'] {
+    top: 10px;
+  }
+  @include reset;
+  position: fixed;
+  z-index: $z-index-Notification;
+  width: $notification-width-default;
+  &__container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__item {
+    border-radius: $notification-detail-item-border-radius;
+    padding: $notification-padding-default;
+    background-color: $notification-color-block;
+    color: $notification-content-color;
+    box-shadow: $notification-shadow;
+    overflow: hidden;
+    &:hover {
+      background-color: $bg-color-container-hover;
+      color: $notification-detail-item-color-hover;
+    }
+    &:active {
+      background-color: $bg-color-container-active;
+      color: $notification-detail-item-color-active;
+    }
+
+    --y: translateY(-100%);
+    transform: var(--y);
+    transition:
+      transform 400ms,
+      opacity 400ms,
+      height 400ms,
+      box-shadow 200ms;
+    z-index: var(--z-index);
+
+    &[data-mounted='true'] {
+      &[data-expanded='false'] {
+        --y: translateY(calc(var(--gap) * var(--index)))
+          scale(calc(1 - var(--index) * 0.05));
+      }
+
+      &[data-expanded='true'] {
+        --y: translateY(var(--offset)) scale(1);
+      }
+
+      &[data-removed='true'] {
+        &[data-front='true'] {
+          --y: translateY(-100%);
+          opacity: 0;
+        }
+
+        &[data-front='false'] {
+          --y: translateY(-40%);
+          opacity: 0;
+          transition:
+            transform 400ms,
+            opacity 200ms;
+        }
+      }
+    }
+  }
+
   &__icon {
     width: $notification-icon-width;
     text-align: center;
-    margin-right: $notification-icon-margin-right;
+    margin-inline-end: $notification-icon-margin-right;
 
     .t-icon {
       font-size: $notification-icon-font-size;
     }
   }
-
-  // icon theme
-  .t-icon.#{$prefix}-is-info {
-    color: $notification-icon-info-color;
-  }
-
-  .t-icon.#{$prefix}-is-success {
-    color: $notification-icon-success-color;
-  }
-
-  .t-icon.#{$prefix}-is-warning {
-    color: $notification-icon-warning-color;
-  }
-
-  .t-icon.#{$prefix}-is-error {
-    color: $notification-icon-error-color;
-  }
-
-  &__main {
-    flex: 1;
-  }
-
-  &__title__wrap {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &__title {
-    font: $notification-title-font;
-    color: $notification-title-color;
-  }
-
-  .t-icon-close {
-    cursor: pointer;
-    font-size: $notification-icon-close-font-size;
-    border-radius: $border-radius-default;
-    color: $notification-close-icon-color;
-
-    &:hover {
-      background: $notification-close-bg-color-hover;
-    }
-
-    &:active {
-      background: $notification-close-bg-color-active;
-    }
-  }
-
-  &__content {
-    font: $notification-content-font;
-    color: $notification-content-color;
-    margin-top: $notification-content-margin-top;
-  }
-
-  &__header {
-    display: flex;
-  }
-  &__detail {
-    font: $notification-content-font;
-    color: $notification-content-color;
-    margin-top: $notification-content-margin-top;
-    word-break: break-all;
-  }
-}
+
+  // icon theme
+  .t-icon.#{$prefix}-is-info {
+    color: $notification-icon-info-color;
+  }
+
+  .t-icon.#{$prefix}-is-success {
+    color: $notification-icon-success-color;
+  }
+
+  .t-icon.#{$prefix}-is-warning {
+    color: $notification-icon-warning-color;
+  }
+
+  .t-icon.#{$prefix}-is-error {
+    color: $notification-icon-error-color;
+  }
+
+  &__main {
+    flex: 1;
+  }
+
+  &__title__wrap {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__title {
+    font: $notification-title-font;
+    color: $notification-title-color;
+  }
+
+  .t-icon-close {
+    cursor: pointer;
+    font-size: $notification-icon-close-font-size;
+    border-radius: $border-radius-default;
+    color: $notification-close-icon-color;
+
+    &:hover {
+      background: $notification-close-bg-color-hover;
+    }
+
+    &:active {
+      background: $notification-close-bg-color-active;
+    }
+  }
+
+  &__content {
+    font: $notification-content-font;
+    color: $notification-content-color;
+    margin-top: $notification-content-margin-top;
+  }
+
+  &__header {
+    display: flex;
+  }
+  &__detail {
+    font: $notification-content-font;
+    color: $notification-content-color;
+    margin-top: $notification-content-margin-top;
+    word-break: break-all;
+  }
+}

package/styles/components/notification/_mixins.scss

@@ -1,12 +1,13 @@
-@mixin notification() {
-  font: $notification-font;
-  outline: 0;
-  border: 0;
-  background-color: $notification-color-block;
-  display: flex;
-  box-shadow: $notification-shadow;
-  box-sizing: border-box;
-  border-radius: $border-radius-medium;
-  width: $notification-width-default;
-  padding: $notification-padding-default;
-}
+@use "../../_vars.scss" as *;
+@mixin notification() {
+  font: $notification-font;
+  outline: 0;
+  border: 0;
+  background-color: $notification-color-block;
+  display: flex;
+  box-shadow: $notification-shadow;
+  box-sizing: border-box;
+  border-radius: $border-radius-medium;
+  width: $notification-width-default;
+  padding: $notification-padding-default;
+}