From 99dba033e8e3ffc40bc6c12a113f62951127ab62 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Tue, 10 Sep 2024 10:52:40 +0800 Subject: [PATCH] feat(AvatarGroup): add mixin file --- style/mobile/_variables.less | 5 ++- style/mobile/components/avatar/v2/_index.less | 28 ++++++++------ style/mobile/components/avatar/v2/_mixin.less | 9 +++++ style/mobile/components/avatar/v2/_var.less | 19 ++++++---- style/mobile/components/result/v2/_var.less | 2 +- .../components/swipe-cell/v2/_index.less | 2 +- style/mobile/theme/_font.less | 37 +++++++++++++++++++ style/mobile/theme/_index.less | 2 + 8 files changed, 80 insertions(+), 24 deletions(-) create mode 100644 style/mobile/components/avatar/v2/_mixin.less create mode 100644 style/mobile/theme/_font.less diff --git a/style/mobile/_variables.less b/style/mobile/_variables.less index dd80555f15..b84bb5dc30 100644 --- a/style/mobile/_variables.less +++ b/style/mobile/_variables.less @@ -89,8 +89,9 @@ @font-size-s: var(--td-font-size-s, 12px); // 字号-二级字号 @font-size-base: var(--td-font-size-base, 14px); // 字号-三级字号 @font-size-m: var(--td-font-size-m, 16px); // 字号-二级字号 -@font-size-l: var(--td-font-size-l, 20px); // 字号-四级字号 -@font-size-xl: var(--td-font-size-xl, 36px); // 字号-五级字号 +@font-size-l: var(--td-font-size-l, 18px); // 字号-四级字号 +@font-size-xl: var(--td-font-size-xl, 20px); // 字号-五级字号 +@font-size-xxl: var(--td-font-size-xxl, 36px); @font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规 @font-family-medium: var(--td-font-family-medium, PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体 diff --git a/style/mobile/components/avatar/v2/_index.less b/style/mobile/components/avatar/v2/_index.less index ff3c860039..ccc5278ddf 100644 --- a/style/mobile/components/avatar/v2/_index.less +++ b/style/mobile/components/avatar/v2/_index.less @@ -2,6 +2,8 @@ @import "./_var.less"; +@import "./_mixin.less"; + .@{prefix}-avatar { display: flex; align-items: center; @@ -99,9 +101,15 @@ // 头像组 .@{prefix}-avatar-group { display: inline-flex; + flex-wrap: wrap; align-items: center; - &-offset-left { + &-offset-left, + &-offset-right { + & .@{prefix}-avatar__wrapper { + padding: @avatar-group-line-spacing 0; + } + &-small { --td-avatar-margin-left: @avatar-group-offset-small; // ‘small’尺寸组合头像偏移间距 } @@ -115,18 +123,14 @@ } } - &-offset-right { - &-small { - --td-avatar-margin-left: @avatar-group-offset-small; - } - - &-medium { - --td-avatar-margin-left: @avatar-group-offset-medium; - } + &__collapse--slot, + &__collapse--default { + z-index: 0; + font-weight: 600; + } - &-large { - --td-avatar-margin-left: @avatar-group-offset-large; - } + &-offset-left { + .generate-z-index(@avatar-group-init-zIndex); } &__collapse--slot { diff --git a/style/mobile/components/avatar/v2/_mixin.less b/style/mobile/components/avatar/v2/_mixin.less new file mode 100644 index 0000000000..d24a4439d6 --- /dev/null +++ b/style/mobile/components/avatar/v2/_mixin.less @@ -0,0 +1,9 @@ +.generate-z-index(@n, @i: 1) when (@i =< @n) { + & .@{prefix}-avatar__wrapper:nth-child(@{i}) { + z-index: calc( + var(--td-avatar-group-init-z-index, @avatar-group-init-zIndex) - @i + ); + } + + .generate-z-index(@n, (@i + 1)); +} diff --git a/style/mobile/components/avatar/v2/_var.less b/style/mobile/components/avatar/v2/_var.less index e22ff80a77..31981bc02c 100644 --- a/style/mobile/components/avatar/v2/_var.less +++ b/style/mobile/components/avatar/v2/_var.less @@ -4,17 +4,17 @@ @avatar-medium-width: var(--td-avatar-medium-width, 48px); @avatar-large-width: var(--td-avatar-large-width, 64px); -@avatar-text-small-font-size: var(--td-avatar-text-small-font-size, @font-size-s); -@avatar-text-medium-font-size: var(--td-avatar-text-medium-font-size, @font-size-base); -@avatar-text-large-font-size: var(--td-avatar-text-large-font-size, 16px); +@avatar-text-small-font-size: var(--td-avatar-text-small-font-size, @font-size-base); +@avatar-text-medium-font-size: var(--td-avatar-text-medium-font-size, @font-size-m); +@avatar-text-large-font-size: var(--td-avatar-text-large-font-size, @font-size-xl); @avatar-icon-small-font-size: var(--td-avatar-icon-small-font-size, 20px); @avatar-icon-medium-font-size: var(--td-avatar-icon-medium-font-size, 24px); @avatar-icon-large-font-size: var(--td-avatar-icon-large-font-size, 32px); -@avatar-border-width-small: var(--td-avatar-border-width-small, 2px); -@avatar-border-width-medium: var(--td-avatar-border-width-medium, 3px); -@avatar-border-width-large: var(--td-avatar-border-width-large, 4px); +@avatar-border-width-small: var(--td-avatar-border-width-small, 1px); +@avatar-border-width-medium: var(--td-avatar-border-width-medium, 2px); +@avatar-border-width-large: var(--td-avatar-border-width-large, 3px); @avatar-border-color: var(--td-avatar-border-color, @bg-color-container); @avatar-circle-border-radius: var(--td-avatar-circle-border-radius, @radius-circle); @avatar-round-border-radius: var(--td-avatar-round-border-radius, @radius-default); @@ -22,6 +22,9 @@ @avatar-margin-left: var(--td-avatar-margin-left, 0); //组合头像偏移量 -@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -4px); -@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -6px); +@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -8px); +@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -8px); @avatar-group-offset-large: var(--td-avatar-group-margin-left-large, -8px); +@avatar-group-line-spacing: var(--td-avatar-group-line-spacing, 2px); + +@avatar-group-init-zIndex: 50; diff --git a/style/mobile/components/result/v2/_var.less b/style/mobile/components/result/v2/_var.less index 8f0316c71c..7e5bcbf262 100644 --- a/style/mobile/components/result/v2/_var.less +++ b/style/mobile/components/result/v2/_var.less @@ -1,6 +1,6 @@ @result-icon-font-size: 80px; -@result-title-font-size: var(--td-result-title-font-size, @font-size-l); +@result-title-font-size: var(--td-result-title-font-size, @font-size-xl); @result-title-line-height: var(--td-result-title-line-height, 28px); @result-title-color: var(--td-result-title-color, @text-color-primary); diff --git a/style/mobile/components/swipe-cell/v2/_index.less b/style/mobile/components/swipe-cell/v2/_index.less index 56dde1ebbf..85035c16f8 100644 --- a/style/mobile/components/swipe-cell/v2/_index.less +++ b/style/mobile/components/swipe-cell/v2/_index.less @@ -34,7 +34,7 @@ } &__icon { - font-size: @font-size-l; + font-size: @font-size-xl; } &__icon + &__text:not(:empty) { diff --git a/style/mobile/theme/_font.less b/style/mobile/theme/_font.less new file mode 100644 index 0000000000..b6d59b9d1c --- /dev/null +++ b/style/mobile/theme/_font.less @@ -0,0 +1,37 @@ +:root { + // 字体family token + --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; + --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; + + // 字体大小 token + --td-font-size-link-small: 12px; + --td-font-size-link-medium: 14px; + --td-font-size-link-large: 16px; + --td-font-size-mark-extra-small: 10px; + --td-font-size-mark-small: 12px; + --td-font-size-mark-medium: 14px; + --td-font-size-mark-large: 16px; + --td-font-size-body-extra-small: 10px; + --td-font-size-body-small: 12px; + --td-font-size-body-medium: 14px; + --td-font-size-body-large: 16px; + --td-font-size-title-small: 14px; + --td-font-size-title-medium: 16px; + --td-font-size-title-large: 18px; + --td-font-size-title-extra-large: 20px; + --td-font-size-headline-small: 24px; + --td-font-size-headline-medium: 28px; + --td-font-size-headline-large: 36px; + --td-font-size-display-medium: 48px; + --td-font-size-display-large: 64px; + + // 关联旧 font-size token + --td-font-size: 10px; + --td-font-size-xs: var(--td-font-size-body-extra-small); + --td-font-size-s: var(--td-font-size-body-small); + --td-font-size-base: var(--td-font-size-title-small); + --td-font-size-m: var(--td-font-size-title-medium); + --td-font-size-l: var(--td-font-size-title-large); + --td-font-size-xl: var(--td-font-size-title-extra-large); + --td-font-size-xxl: var(--td-font-size-headline-large); +} diff --git a/style/mobile/theme/_index.less b/style/mobile/theme/_index.less index 404d74cd81..421a3b4a98 100644 --- a/style/mobile/theme/_index.less +++ b/style/mobile/theme/_index.less @@ -1 +1,3 @@ @import "./_dark.less"; + +@import "./_font.less";