@tendaui/components 1.2.3 → 1.3.0

package/styles/components/layout/_vars.scss

@@ -1,18 +1,19 @@
-// 颜色
-// layout字体色
-$layout-color: $text-color-secondary;
-// layout背景色
-$layout-bg-color: $bg-color-page;
-// header背景色
-$layout-header-bg-color: $bg-color-container;
-// sider背景色
-$layout-sider-bg-color: $bg-color-container;
-// footer字体色
-$layout-footer-color: $text-color-placeholder;
-
-// 尺寸
-$layout-header-height: $comp-size-xxxl;
-$layout-sider-width: 232px;
-
-// 动画
-$layout-sider-anim-duration: $anim-duration-base;
+@use "../../_vars.scss" as *;
+// 颜色
+// layout字体
+$layout-color: $text-color-secondary;
+// layout背景
+$layout-bg-color: $bg-color-page;
+// header背景
+$layout-header-bg-color: $bg-color-container;
+// sider背景
+$layout-sider-bg-color: $bg-color-container;
+// footer字体
+$layout-footer-color: $text-color-placeholder;
+
+// 尺寸
+$layout-header-height: $comp-size-xxxl;
+$layout-sider-width: 232px;
+
+// 动画
+$layout-sider-anim-duration: $anim-duration-base;

package/styles/components/layout/doc.scss

@@ -1,74 +1,74 @@
-@import "../../_vars.scss";
-
-.#{$prefix}-layout__content {
-  height: 600px;
-  text-align: center;
-  padding: 24px 24px 0;
-
-  > div {
-    background: #fff;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: auto;
-    word-wrap: break-word;
-  }
-}
-
-.#{$prefix}-layout__footer {
-  min-height: 46px;
-  text-align: center;
-  color: $text-color-placeholder;
-}
-
-.#{$prefix}-layout__sider {
-  text-align: center;
-}
-
-.#{$prefix}-layout__header {
-  text-align: center;
-  color: #fff;
-  background-color: $brand-color-4;
-  font-size: $font-size-l;
-  line-height: 64px;
-
-  .t-layout__header {
-    color: #fff;
-    background: #266fe8;
-  }
-}
-
-.#{$prefix}-layout__sider {
-  background-color: $brand-color-6;
-  color: #fff;
-  font-size: $font-size-l;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.#{$prefix}-layout__content {
-  text-align: center;
-  color: #fff;
-  background: $brand-color-5;
-  height: 100px;
-  font-size: $font-size-l;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.#{$prefix}-layout__footer {
-  min-height: 46px;
-  text-align: center;
-  color: #fff;
-  background: $brand-color-4;
-  font-size: $font-size-l;
-}
-
-.#{$prefix}-layout__sider {
-  text-align: center;
-  font-size: $font-size-l;
-}
+@use "../../_vars.scss" as *;
+
+.#{$prefix}-layout__content {
+  height: 600px;
+  text-align: center;
+  padding: 24px 24px 0;
+
+  > div {
+    background: #fff;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    word-wrap: break-word;
+  }
+}
+
+.#{$prefix}-layout__footer {
+  min-height: 46px;
+  text-align: center;
+  color: $text-color-placeholder;
+}
+
+.#{$prefix}-layout__sider {
+  text-align: center;
+}
+
+.#{$prefix}-layout__header {
+  text-align: center;
+  color: #fff;
+  background-color: $brand-color-4;
+  font-size: $font-size-l;
+  line-height: 64px;
+
+  .t-layout__header {
+    color: #fff;
+    background: #266fe8;
+  }
+}
+
+.#{$prefix}-layout__sider {
+  background-color: $brand-color-6;
+  color: #fff;
+  font-size: $font-size-l;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$prefix}-layout__content {
+  text-align: center;
+  color: #fff;
+  background: $brand-color-5;
+  height: 100px;
+  font-size: $font-size-l;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$prefix}-layout__footer {
+  min-height: 46px;
+  text-align: center;
+  color: #fff;
+  background: $brand-color-4;
+  font-size: $font-size-l;
+}
+
+.#{$prefix}-layout__sider {
+  text-align: center;
+  font-size: $font-size-l;
+}

package/styles/components/list/_index.scss

@@ -1,172 +1,172 @@
-@import "../../_vars.scss";
-
-@import "./_vars.scss";
-
-@import "../../mixins/_reset.scss";
-
-@import "../../mixins//layout.scss";
-
-@import "../../mixins/scrollbar.scss";
-.#{$prefix}-list {
-  @include reset();
-  @include scrollbar();
-
-  overflow: auto;
-  color: $list-font-color;
-  background: $list-bg-color-default;
-
-  &__inner {
-    @include list-style-none();
-  }
-
-  &-item {
-    font: $list-item-font;
-    padding: $list-item-spacer-default;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 1px;
-    }
-
-    &-main {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      flex: 1;
-    }
-
-    &__meta {
-      display: flex;
-      // padding: $list-meta-padding;
-
-      &-avatar {
-        width: $list-avatar-size;
-        height: $list-avatar-size;
-        border-radius: calc($list-avatar-size / 2);
-        overflow: hidden;
-        background: $list-avatar-bg-color;
-        margin-right: $list-avatar-margin-right;
-        flex-shrink: 0;
-
-        img {
-          max-width: 100%;
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      &-title {
-        padding: 0;
-        font: $list-meta-title-font;
-        margin: $list-meta-title-margin;
-        color: $list-meta-title-color;
-      }
-
-      &-description {
-        margin-right: $list-meta-description-margin-right;
-        color: $list-meta-description-color;
-      }
-    }
-
-    &__action {
-      list-style: none;
-      padding: 0;
-      flex-shrink: 0;
-
-      & > li {
-        display: inline-block;
-
-        &:not(:last-child) {
-          margin-right: $list-action-margin-right;
-        }
-
-        .t-icon {
-          color: $list-action-icon-color;
-          font-size: $list-icon-size;
-
-          &:hover {
-            color: $list-link-color;
-            cursor: pointer;
-          }
-        }
-
-        & > a {
-          text-decoration: none;
-          color: $list-action-color;
-        }
-      }
-    }
-  }
-
-  &--split {
-    .#{$prefix}-list-item::after {
-      background: $list-item-split-color;
-    }
-  }
-
-  &--stripe {
-    .#{$prefix}-list-item {
-      &:nth-child(even) {
-        background: $list-bg-color-strip;
-      }
-    }
-  }
-
-  &--vertical-action {
-    .#{$prefix}-list-item {
-      flex-direction: column;
-    }
-  }
-
-  &.#{$prefix}-size-s {
-    .#{$prefix}-list-item {
-      padding: $list-item-spacer-small;
-    }
-  }
-
-  &.#{$prefix}-size-l {
-    .#{$prefix}-list-item {
-      padding: $list-item-spacer-large;
-    }
-  }
-
-  &__header,
-  &__footer {
-    background: $list-bg-color-default;
-    padding: $list-padding;
-  }
-}
-
-.#{$prefix}-list__load {
-  background: $list-bg-color-default;
-  text-align: center;
-  line-height: $list-load-line-height;
-
-  > div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &:not(:empty) {
-    padding: $list-load-not-empty-padding; // 如果不是空子元素才设置padding
-  }
-
-  .#{$prefix}-loading {
-    font-size: $list-load-font-size;
-    margin-right: $list-load-icon-margin;
-  }
-
-  .#{$prefix}-loading.#{$prefix}-is-load-more {
-    cursor: pointer;
-  }
-}
+@use "../../_vars.scss" as *;
+
+@use "./_vars.scss" as *;
+
+@use "../../mixins/_reset.scss" as *;
+
+@use "../../mixins//layout.scss" as *;
+
+@use "../../mixins/scrollbar.scss" as *;
+.#{$prefix}-list {
+  @include reset();
+  @include scrollbar();
+
+  overflow: auto;
+  color: $list-font-color;
+  background: $list-bg-color-default;
+
+  &__inner {
+    @include list-style-none();
+  }
+
+  &-item {
+    font: $list-item-font;
+    padding: $list-item-spacer-default;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset-inline-start: 0;
+      bottom: 0;
+      width: 100%;
+      height: 1px;
+    }
+
+    &-main {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      flex: 1;
+    }
+
+    &__meta {
+      display: flex;
+      // padding: $list-meta-padding;
+
+      &-avatar {
+        width: $list-avatar-size;
+        height: $list-avatar-size;
+        border-radius: calc($list-avatar-size / 2);
+        overflow: hidden;
+        background: $list-avatar-bg-color;
+        margin-inline-end: $list-avatar-margin-right;
+        flex-shrink: 0;
+
+        img {
+          max-width: 100%;
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      &-title {
+        padding: 0;
+        font: $list-meta-title-font;
+        margin: $list-meta-title-margin;
+        color: $list-meta-title-color;
+      }
+
+      &-description {
+        margin-inline-end: $list-meta-description-margin-right;
+        color: $list-meta-description-color;
+      }
+    }
+
+    &__action {
+      list-style: none;
+      padding: 0;
+      flex-shrink: 0;
+
+      & > li {
+        display: inline-block;
+
+        &:not(:last-child) {
+          margin-inline-end: $list-action-margin-right;
+        }
+
+        .t-icon {
+          color: $list-action-icon-color;
+          font-size: $list-icon-size;
+
+          &:hover {
+            color: $list-link-color;
+            cursor: pointer;
+          }
+        }
+
+        & > a {
+          text-decoration: none;
+          color: $list-action-color;
+        }
+      }
+    }
+  }
+
+  &--split {
+    .#{$prefix}-list-item::after {
+      background: $list-item-split-color;
+    }
+  }
+
+  &--stripe {
+    .#{$prefix}-list-item {
+      &:nth-child(even) {
+        background: $list-bg-color-strip;
+      }
+    }
+  }
+
+  &--vertical-action {
+    .#{$prefix}-list-item {
+      flex-direction: column;
+    }
+  }
+
+  &.#{$prefix}-size-s {
+    .#{$prefix}-list-item {
+      padding: $list-item-spacer-small;
+    }
+  }
+
+  &.#{$prefix}-size-l {
+    .#{$prefix}-list-item {
+      padding: $list-item-spacer-large;
+    }
+  }
+
+  &__header,
+  &__footer {
+    background: $list-bg-color-default;
+    padding: $list-padding;
+  }
+}
+
+.#{$prefix}-list__load {
+  background: $list-bg-color-default;
+  text-align: center;
+  line-height: $list-load-line-height;
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:not(:empty) {
+    padding: $list-load-not-empty-padding; // 如果不是空子元素才设置padding
+  }
+
+  .#{$prefix}-loading {
+    font-size: $list-load-font-size;
+    margin-inline-end: $list-load-icon-margin;
+  }
+
+  .#{$prefix}-loading.#{$prefix}-is-load-more {
+    cursor: pointer;
+  }
+}

package/styles/components/list/_vars.scss

@@ -1,41 +1,42 @@
-// 颜色
-$list-bg-color-default: $bg-color-container;
-$list-bg-color-strip: $bg-color-secondarycontainer;
-$list-item-split-color: $border-level-1-color;
-$list-avatar-bg-color: $bg-color-page;
-$list-text-color-loading: $text-color-placeholder;
-// $list-icon-color-loading: $brand-color-5;
-$list-text-color-load-more: $text-color-placeholder;
-$list-meta-title-color: $text-color-primary;
-$list-meta-description-color: $text-color-primary;
-$list-action-color: $brand-color;
-$list-action-icon-color: $text-color-secondary;
-$list-link-color: $text-color-link;
-$list-font-color: $text-color-primary;
-
-// 间距
-$list-padding: $comp-paddingTB-m $comp-paddingLR-l;
-$list-item-spacer-small: $comp-paddingTB-s $comp-paddingLR-m;
-$list-item-spacer-default: $comp-paddingTB-m $comp-paddingLR-l;
-$list-item-spacer-large: $comp-paddingTB-l $comp-paddingLR-xl;
-// $list-meta-padding: $spacer-s 0;
-$list-avatar-margin-right: $comp-margin-l;
-$list-meta-title-margin: 0 0 $comp-margin-s;
-$list-meta-description-margin-right: $comp-margin-xxl;
-$list-action-margin-right: $comp-margin-l;
-$list-load-not-empty-padding: $comp-paddingTB-m $comp-paddingLR-l;
-$list-load-icon-margin: $comp-margin-s;
-
-// 尺寸
-$list-item-line-height: $text-line-height-base;
-$list-avatar-size: $comp-size-xxxl;
-$list-icon-size: $comp-size-xxxs;
-
-// 字体
-$list-item-font: $font-body-medium;
-$list-meta-title-font: $font-title-medium;
-$list-load-font-size: $comp-size-xxxs;
-$list-load-more-font-size: $comp-size-xxxs;
-
-// 行号
-$list-load-line-height: $text-line-height-base;
+@use "../../_vars.scss" as *;
+// 颜色
+$list-bg-color-default: $bg-color-container;
+$list-bg-color-strip: $bg-color-secondarycontainer;
+$list-item-split-color: $border-level-1-color;
+$list-avatar-bg-color: $bg-color-page;
+$list-text-color-loading: $text-color-placeholder;
+// $list-icon-color-loading: $brand-color-5;
+$list-text-color-load-more: $text-color-placeholder;
+$list-meta-title-color: $text-color-primary;
+$list-meta-description-color: $text-color-primary;
+$list-action-color: $brand-color;
+$list-action-icon-color: $text-color-secondary;
+$list-link-color: $text-color-link;
+$list-font-color: $text-color-primary;
+
+// 间距
+$list-padding: $comp-paddingTB-m $comp-paddingLR-l;
+$list-item-spacer-small: $comp-paddingTB-s $comp-paddingLR-m;
+$list-item-spacer-default: $comp-paddingTB-m $comp-paddingLR-l;
+$list-item-spacer-large: $comp-paddingTB-l $comp-paddingLR-xl;
+// $list-meta-padding: $spacer-s 0;
+$list-avatar-margin-right: $comp-margin-l;
+$list-meta-title-margin: 0 0 $comp-margin-s;
+$list-meta-description-margin-right: $comp-margin-xxl;
+$list-action-margin-right: $comp-margin-l;
+$list-load-not-empty-padding: $comp-paddingTB-m $comp-paddingLR-l;
+$list-load-icon-margin: $comp-margin-s;
+
+// 尺寸
+$list-item-line-height: $text-line-height-base;
+$list-avatar-size: $comp-size-xxxl;
+$list-icon-size: $comp-size-xxxs;
+
+// 字体
+$list-item-font: $font-body-medium;
+$list-meta-title-font: $font-title-medium;
+$list-load-font-size: $comp-size-xxxs;
+$list-load-more-font-size: $comp-size-xxxs;
+
+// 行号
+$list-load-line-height: $text-line-height-base;