Skip to content

Commit

Permalink
Feat/input size token (#1017)
Browse files Browse the repository at this point in the history 
* feat: menu inner height

* feat: replace switch taginput and textarea size token
  • Loading branch information
@uyarn
uyarn committed Nov 18, 2022
1 parent bf5d8ac commit 67de3b0
Show file tree
Hide file tree
Showing 8 changed files with 60 additions and 59 deletions.
6 changes: 3 additions & 3 deletions style/web/components/menu/_index-v2.less
View file
Expand Up @@ -30,7 +30,7 @@ a.@{prefix}-menu__item {

&__inner {
display: flex;
height: 64px;
height: @comp-size-xxxl;

li + li {
margin-left: @comp-margin-xs;
Expand Down Expand Up @@ -60,7 +60,7 @@ a.@{prefix}-menu__item {
position: relative;
display: flex;
align-items: center;
height: 64px;
height: var(--td-comp-size-xxxl);
line-height: 64px;
text-align: right;
margin-right: @comp-margin-s;
Expand Down Expand Up @@ -375,7 +375,7 @@ a.@{prefix}-menu__item {

.@{prefix}-menu__logo:not(:empty) {
width: 100%;
height: 64px;
height: var(--td-comp-size-xxxl);
border-bottom: 1px solid @menu-border-color;
}

Expand Down
6 changes: 3 additions & 3 deletions style/web/components/menu/_index.less
View file
Expand Up @@ -30,7 +30,7 @@ a.@{prefix}-menu__item {

&__inner {
display: flex;
height: 64px;
height: @comp-size-xxxl;

li + li {
margin-left: @comp-margin-xs;
Expand Down Expand Up @@ -60,7 +60,7 @@ a.@{prefix}-menu__item {
position: relative;
display: flex;
align-items: center;
height: 64px;
height: var(--td-comp-size-xxxl);
line-height: 64px;
text-align: right;
margin-right: @comp-margin-s;
Expand Down Expand Up @@ -371,7 +371,7 @@ a.@{prefix}-menu__item {

.@{prefix}-menu__logo:not(:empty) {
width: 100%;
height: 64px;
height: var(--td-comp-size-xxxl);

This comment has been minimized.

Sign in to view

Copy link
@wandoupeas

wandoupeas Nov 24, 2022

Contributor

var(--td-comp-size-xxxl)对应的是56px
这里是有意为之还是少写了个x？
border-bottom: 1px solid @menu-border-color;
}

Expand Down
24 changes: 12 additions & 12 deletions style/web/components/switch/_index.less
View file
Expand Up @@ -19,7 +19,7 @@
margin: 0;
height: @switch-height-default;
line-height: @switch-height-default;
border-radius: (@switch-height-default / 2);
border-radius: calc(@switch-height-default / 2);
min-width: @switch-min-width-default;
transition: @switch-transition;
background-color: @switch-unchecked-bg-color;
Expand All @@ -33,13 +33,13 @@
justify-content: center;
top: @switch-width-border-default;
left: @switch-width-border-default;
width: (@switch-height-default - 2px * @switch-width-border-default);
height: (@switch-height-default - 2px * @switch-width-border-default);
width: calc(@switch-height-default - 2 * @switch-width-border-default);
height: calc(@switch-height-default - 2 * @switch-width-border-default);
border-radius: @border-radius-extraLarge;
transition: @switch-handle-transition;

.t-icon {
font-size: (@switch-height-default - 4px);
font-size: calc(@switch-height-default - 4px);
color: transparent;
}

Expand Down Expand Up @@ -154,7 +154,7 @@
min-width: @switch-min-width-l;
height: @switch-height-l;
line-height: @switch-height-l;
border-radius: (@switch-height-l / 2);
border-radius: calc(@switch-height-l / 2);

&:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {

Expand All @@ -175,11 +175,11 @@
.@{prefix}-switch__handle {
top: @switch-width-border-l;
left: @switch-width-border-l;
width: (@switch-height-l - 2px * @switch-width-border-l);
height: (@switch-height-l - 2px * @switch-width-border-l);
width: calc(@switch-height-l - 2 * @switch-width-border-l);
height: calc(@switch-height-l - 2 * @switch-width-border-l);

.t-icon {
font-size: (@switch-height-l - 4px);
font-size: calc(@switch-height-l - 4px);
}
}

Expand Down Expand Up @@ -209,7 +209,7 @@
min-width: @switch-min-width-s;
height: @switch-height-s;
line-height: @switch-height-s;
border-radius: (@switch-height-s / 2);
border-radius: calc(@switch-height-s / 2);

&:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {

Expand All @@ -230,11 +230,11 @@
.@{prefix}-switch__handle {
top: @switch-width-border-s;
left: @switch-width-border-s;
width: (@switch-height-s - 2 * @switch-width-border-s);
height: (@switch-height-s - 2 * @switch-width-border-s);
width: calc(@switch-height-s - 2 * @switch-width-border-s);
height: calc(@switch-height-s - 2 * @switch-width-border-s);

.t-icon {
font-size: (@switch-height-s - 4px);
font-size: calc(@switch-height-s - 4px);
}
}

Expand Down
11 changes: 6 additions & 5 deletions style/web/components/switch/_var.less
View file
Expand Up @@ -25,9 +25,9 @@
@switch-content-color-unchecked: @text-color-anti;

// 尺寸
@switch-height-l: 24px;
@switch-height-default: 20px;
@switch-height-s: 16px;
@switch-height-l: @comp-size-xs;
@switch-height-default: @comp-size-xxs;
@switch-height-s: @comp-size-xxxs;

@switch-min-width-l: 44px;
@switch-min-width-default: 36px;
Expand All @@ -44,7 +44,7 @@

// 间距
@switch-content-margin-left-l: (@switch-min-width-l / 2 + 2px);
@switch-content-margin-right-l: 8px;
@switch-content-margin-right-l: @comp-paddingLR-s;

@switch-content-margin-left-default: (@switch-min-width-default / 2 + 2px);
@switch-content-margin-right-default: 6px;
Expand All @@ -55,4 +55,5 @@
// 动画
@switch-transition: all @anim-duration-base @anim-time-fn-ease-out;
@switch-handle-transition: all @anim-duration-base @anim-time-fn-easing;
@switch-content-transition: padding @anim-duration-base @anim-time-fn-easing, opacity @anim-duration-base linear;
@switch-content-transition: padding @anim-duration-base @anim-time-fn-easing,
opacity @anim-duration-base linear;
20 changes: 10 additions & 10 deletions style/web/components/tag-input/_index.less
View file
Expand Up @@ -9,24 +9,24 @@
.@{prefix}-tag-input {
.reset;
.@{prefix}-tag {
animation: t-fade-in .1s ease-in-out;
animation: t-fade-in @anim-duration-base ease-in-out;
}
.@{prefix}-tag + .@{prefix}-tag {
margin-left: @spacer-s;
margin-left: @comp-margin-xs;
}
.@{prefix}-tag-input__drag_wrapper + .@{prefix}-tag-input__drag_wrapper {
margin-left: @spacer-s;
margin-left: @comp-margin-xs;
}

.@{prefix}-input {
overflow: hidden;
min-height: @tag-input-height-default;
line-height: @tag-input-line-height-default;
padding: 0 @spacer-s;
padding: 0 @comp-paddingLR-xs;
height: fit-content;

&.@{prefix}-size-s {
padding: @spacer-s * .5;
padding: @comp-paddingTB-xxs @comp-paddingLR-xxs;
min-height: @tag-input-height-s;
line-height: @tag-input-line-height-s;
}
Expand All @@ -46,11 +46,11 @@

.@{prefix}-tag-input__prefix,
.@{prefix}-input__prefix:empty + input {
margin-left: @spacer-s;
margin-left: @comp-margin-xs;
}

.@{prefix}-input--auto-width {
padding-right: @spacer-s;
padding-right: @comp-paddingLR-xs;
}
}

Expand All @@ -63,7 +63,7 @@

.@{prefix}-input {
display: block;
padding-right: @spacer-3;
padding-right: @comp-paddingLR-xl;

&.@{prefix}-input--prefix > .@{prefix}-input__prefix {
display: inline;
Expand All @@ -72,7 +72,7 @@

.@{prefix}-input__suffix-icon {
position: absolute;
right: @spacer;
right: @comp-margin-s;
bottom: 0;
}
}
Expand All @@ -81,5 +81,5 @@
.@{prefix}-tag-input__prefix {
width: max-content;
display: inline-block;
margin-right: @spacer;
margin-right: @comp-margin-s;
}
12 changes: 6 additions & 6 deletions style/web/components/tag-input/_var.less
View file
@@ -1,7 +1,7 @@
@tag-input-height-s: 24px;
@tag-input-height-default: 32px;
@tag-input-height-l: 40px;
@tag-input-height-s: @comp-size-xs;
@tag-input-height-default: @comp-size-m;
@tag-input-height-l: @comp-size-xl;

@tag-input-line-height-s: 20px;
@tag-input-line-height-default: 28px;
@tag-input-line-height-l: 36px;
@tag-input-line-height-s: calc(@tag-input-height-s - 4px);
@tag-input-line-height-default: calc(@tag-input-height-default - 4px);
@tag-input-line-height-l: calc(@tag-input-height-l - 4px);
10 changes: 5 additions & 5 deletions style/web/components/textarea/_var.less
View file
Expand Up @@ -31,17 +31,17 @@
@textarea-text-color-tips: @text-color-placeholder;

// 尺寸
@textarea-height: 56px;
@textarea-tips-min-height: 24px;
@textarea-height: @comp-size-xxxl;
@textarea-tips-min-height: @comp-size-xs;

// 字体
@textarea-font: @font-body-medium;
@textarea-tips-font: @font-body-small;

// 间距
@textarea-padding: 5px @spacer;
@textarea-limit-position-right: @spacer-2;
@textarea-limit-position-bottom: @spacer-1;
@textarea-padding: 5px @comp-paddingLR-s;
@textarea-limit-position-right: calc(@comp-paddingLR-s * 2);
@textarea-limit-position-bottom: @comp-paddingTB-s;

// 边框
@textarea-border-color: @border-level-2-color;
Expand Down
30 changes: 15 additions & 15 deletions style/web/components/transfer/_var.less
View file
Expand Up @@ -6,19 +6,19 @@
@transfer-font-color: @text-color-primary;

// 间距
@transfer-list-margin-horizontal: @spacer;
@transfer-list-header-padding: 0 @spacer * 1.5;
@transfer-list-margin-horizontal: @comp-margin-s;
@transfer-list-header-padding: 0 @comp-paddingLR-s;
@transfer-list-header-margin: 0 @transfer-list-margin-horizontal;
@transfer-list-header-text-margin-left: @spacer;
@transfer-list-body-padding: @spacer 0 @spacer 0;
@transfer-list-item-padding: 5px @spacer;
@transfer-list-header-text-margin-left: @comp-margin-s;
@transfer-list-body-padding: @comp-paddingTB-s 0;
@transfer-list-item-padding: 5px @comp-paddingLR-s;
@transfer-list-item-margin: 0 @transfer-list-margin-horizontal;
@transfer-list-item-text-margin-left: @spacer;
@transfer-list-item-text-margin-left: @comp-margin-s;
@transfer-list-search-wrapper-margin: 0 @transfer-list-margin-horizontal;
@transfer-list-with-search-padding-top: 40px;
@transfer-list-wrapper-padding: @spacer * 1.5;
@transfer-list-pagination-padding: 0 @spacer 0 @spacer * .5;
@transfer-operations-margin: auto @spacer;
@transfer-list-wrapper-padding: @comp-paddingTB-m @comp-paddingLR-m;
@transfer-list-pagination-padding: 0 @comp-paddingLR-s 0 @comp-paddingLR-xs;
@transfer-operations-margin: auto @comp-margin-s;
@transfer-operations-button-padding: 0 3px;
// 有翻页时候transfer的下内边距
@transfer-with-pagination-padding-bottom: 32px;
Expand Down Expand Up @@ -51,18 +51,18 @@
// 包裹树组件时候transfer的高度
@transfer-wrap-height: 320px;
@transfer-wrap-width: 206px;
@transfer-list-header-height: 48px;
@transfer-list-header-width: (
@transfer-list-header-height: @comp-size-xxl;
@transfer-list-header-width: calc(
@transfer-common-width - @transfer-list-margin-horizontal * 2
);
@transfer-list-search-wrapper-width: (
@transfer-list-search-wrapper-width: calc(
@transfer-common-width - @transfer-list-margin-horizontal * 2
);
@transfer-list-pagination-height: 24px;
@transfer-list-pagination-height: @comp-size-xs;
@transfer-list-pagination-line-height: 16px;
@transfer-operations-button-height: 24px;
@transfer-operations-button-height: @comp-size-xs;
@transfer-operations-button-line-height: 14px;
@transfer-operations-button-icon-width: 24px;
@transfer-operations-button-icon-width: @comp-size-xs;
@transfer-operations-icon-size: 16px;

// 字体
Expand Down

0 comments on commit 67de3b0

Please sign in to comment.