Skip to content

Commit

Permalink
feat: replace size token (#990)
Browse files Browse the repository at this point in the history 
* feat: replace size token

* feat: tree drawer guidesize token

Co-authored-by: wenkang <manhongchung555@gmail.com>
  • Loading branch information
@uyarn @Wen1kang
uyarn and Wen1kang committed Nov 10, 2022
1 parent 3a64641 commit 18dbc75
Show file tree
Hide file tree
Showing 18 changed files with 146 additions and 800 deletions.
3 changes: 2 additions & 1 deletion style/web/components/drawer/_index.less
View file
Expand Up @@ -121,6 +121,8 @@
}

&__header {
display: flex;
align-items: center;
min-height: @drawer-header-height;
padding: @drawer-header-padding;
font: @drawer-header-font-size;
Expand All @@ -138,7 +140,6 @@

&__footer {
width: 100%;
min-height: @drawer-footer-height;
padding: @drawer-footer-padding;
text-align: @drawer-footer-text-align;
border-top: 1px solid @drawer-border-color;
Expand Down
19 changes: 9 additions & 10 deletions style/web/components/drawer/_var.less
View file
Expand Up @@ -29,10 +29,9 @@
/**
* 尺寸
*/
@drawer-icon-size: @font-size-l;
@drawer-header-height: 56px;
@drawer-footer-height: 56px;
@drawer-close-btn-size: @icon-l;
@drawer-icon-size: calc(@font-size-base + 2px);
@drawer-header-height: @comp-size-xxxl;
@drawer-close-btn-size: @comp-size-xs;
@drawer-content-wrapper-size: 300px;

/**
Expand All @@ -51,16 +50,16 @@
/**
* 间距
*/
@drawer-footer-padding: 10px @spacer-2;
@drawer-header-padding: @spacer-2 @spacer-2;
@drawer-body-padding: @spacer-2;
@drawer-footer-btn-margin-left: @spacer-1;
@drawer-footer-padding: @comp-paddingTB-l @comp-paddingLR-l;
@drawer-header-padding: 0 @comp-paddingLR-l;
@drawer-body-padding: @comp-paddingTB-l @comp-paddingLR-l;
@drawer-footer-btn-margin-left: @comp-margin-s;

/**
* 位置
*/
@drawer-close-btn-position-top: 16px;
@drawer-close-btn-position-right: 16px;
@drawer-close-btn-position-top: @comp-margin-s;
@drawer-close-btn-position-right: @comp-margin-s;
@drawer-footer-text-align: left;

/**
Expand Down
16 changes: 8 additions & 8 deletions style/web/components/guide/_index.less
View file
Expand Up @@ -34,7 +34,7 @@

&__highlight {
z-index: @guide-highlight-z-index;
transition: .3s ease-out;
transition: @anim-duration-base @anim-time-fn-ease-out;
border-radius: @border-radius-default;

&--dialog {
Expand Down Expand Up @@ -76,7 +76,7 @@
&__dialog {
min-width: 320px;
max-width: 500px;
padding: @spacer-3 @spacer-4 @spacer-4;
padding: @guide-dialog-padding;
border-radius: @border-radius-large;
background: @bg-color-container;
animation: tGuideDialogFadeIn .3s ease-out;
Expand All @@ -92,13 +92,13 @@
}

.@{prefix}-@{componentName}__desc {
margin-top: @spacer-l;
margin-top: @guide-dialog-desc-margin-top;
font: @font-body-medium;
}
}

&__tooltip {
padding: @spacer-l @spacer;
padding: @guide-tooltip-padding;
min-width: 240px;
max-width: 600px;
max-height: 300px;
Expand All @@ -112,7 +112,7 @@
}

&__desc {
margin-top: @spacer;
margin-top: @guide-tooltip-desc-margin-top;
text-align: left;
color: @text-color-secondary;
font: @font-body-small;
Expand All @@ -123,7 +123,7 @@
align-items: center;

button {
margin-right: @spacer;
margin-right: @guide-action-margin-right;
}

button:last-child {
Expand All @@ -136,7 +136,7 @@
align-items: center;

&--popup {
margin-top: @spacer-2;
margin-top: @guide-footer-popup-margin-top;
}

&--dialog {
Expand All @@ -152,7 +152,7 @@
}

&__counter {
color: @font-gray-3;
color: @text-color-placeholder;
text-align: left;
font: @font-body-small;
flex: 1;
Expand Down
10 changes: 10 additions & 0 deletions style/web/components/guide/_var.less
View file
Expand Up @@ -2,3 +2,13 @@
@guide-overlay-z-index: @z-index-guide - 2;
@guide-highlight-z-index: @z-index-guide - 1;
@guide-reference-z-index: @z-index-guide;

// margin 间距相关
@guide-footer-popup-margin-top: @comp-margin-l;
@guide-dialog-desc-margin-top: @comp-margin-l;
@guide-tooltip-desc-margin-top: @comp-margin-s;
@guide-action-margin-right: @comp-margin-s;

// padding 边距
@guide-dialog-padding: @comp-paddingTB-xxl @comp-paddingLR-xxl;
@guide-tooltip-padding: @comp-paddingTB-m @comp-paddingLR-s;
52 changes: 26 additions & 26 deletions style/web/components/menu/_index-v2.less
View file
Expand Up @@ -33,19 +33,19 @@ a.@{prefix}-menu__item {
height: 64px;

li + li {
margin-left: 4px;
margin-left: @comp-margin-xs;
}

.@{prefix}-menu {
&:first-child {
margin-left: 24px;
margin-left: @comp-margin-xxl;
}
}
}

.@{prefix}-menu__logo:not(:empty) {
height: 100%;
margin-right: 32px;
margin-right: @comp-margin-xxxl;
}

.@{prefix}-menu {
Expand All @@ -63,14 +63,14 @@ a.@{prefix}-menu__item {
height: 64px;
line-height: 64px;
text-align: right;
margin-right: 8px;
margin-right: @comp-margin-s;
overflow: hidden;
}

&-icon {
width: 40px;
height: 40px;
padding: 8px;
padding: @comp-paddingTB-s @comp-paddingLR-s;
line-height: 40px;
}
}
Expand Down Expand Up @@ -150,26 +150,26 @@ a.@{prefix}-menu__item {
align-items: center;
justify-content: flex-start;
white-space: nowrap;
padding-left: 16px;
padding-right: 16px;
padding-left: @comp-paddingLR-l;
padding-right: @comp-paddingLR-l;
min-width: 100%;
margin-left: 0;
color: @head-menu-popup-item-color;
box-sizing: border-box;
}

li + li {
margin-top: 4px;
margin-top: @comp-margin-xs;
margin-left: 0;
}
}

.@{prefix}-submenu-icon { // to remove
margin-left: 8px;
margin-left: @comp-margin-s;
}

.@{prefix}-fake-arrow {
margin-left: 8px;
margin-left: @comp-margin-s;
}

// 多层情况
Expand All @@ -183,7 +183,7 @@ a.@{prefix}-menu__item {

.@{prefix}-menu__item {
text-align: left;
padding: 0 16px;
padding: 0 @comp-paddingLR-l;
justify-content: space-between;
}

Expand Down Expand Up @@ -380,7 +380,7 @@ a.@{prefix}-menu__item {
}

.@{prefix}-menu {
padding: 16px 8px;
padding: @comp-paddingTB-l @comp-paddingLR-s;
position: relative;
// overflow: hidden auto;
flex: 1;
Expand All @@ -404,15 +404,15 @@ a.@{prefix}-menu__item {
}

.@{prefix}-submenu {
margin-bottom: 4px;
margin-bottom: @comp-margin-xs;
position: relative;
}

.@{prefix}-menu__operations {
&:not(:empty) {
width: 100%;
position: relative;
padding: 8px 16px;
padding: @comp-paddingTB-s @comp-paddingLR-l;
top: 0;
left: 0;
text-align: left;
Expand All @@ -423,7 +423,7 @@ a.@{prefix}-menu__item {
&-icon {
width: 32px;
height: 32px;
padding: 8px;
padding: @comp-paddingTB-s @comp-paddingLR-s;
cursor: pointer;
color: @menu-operations-color;
box-sizing: border-box;
Expand All @@ -433,7 +433,7 @@ a.@{prefix}-menu__item {
.@{prefix}-menu__item {

&.@{prefix}-is-opened {
margin: 4px 0;
margin: @comp-margin-xs 0;
color: @menu-light-active-color;
background-color: unset;

Expand Down Expand Up @@ -481,7 +481,7 @@ a.@{prefix}-menu__item {

.@{prefix}-menu__item {
position: relative;
margin: 4px 0;
margin: @comp-margin-xs 0;
padding: 0 10px 0 16px;
height: @default-menu-item-height;
line-height: @default-menu-item-height;
Expand Down Expand Up @@ -523,7 +523,7 @@ a.@{prefix}-menu__item {
background: @menu-light-active-bg;

& + .@{prefix}-menu__item {
margin-top: 4px;
margin-top: @comp-margin-xs;
}
}
}
Expand Down Expand Up @@ -692,7 +692,7 @@ a.@{prefix}-menu__item {

.t-icon + &__content,
.t-icon + &__item-link {
margin-left: 8px;
margin-left: @comp-margin-s;
}

&--dark {
Expand Down Expand Up @@ -789,14 +789,14 @@ a.@{prefix}-menu__item {
.list-style-none();

&-wrapper {
padding: 8px;
padding: @comp-paddingTB-s @comp-paddingLR-s;
height: 100%;
list-style: none;
margin: 0;
}

.@{prefix}-fake-arrow {
margin-left: 8px;
margin-left: @comp-margin-s;
}

&.@{prefix}-is-vertical {
Expand All @@ -808,16 +808,16 @@ a.@{prefix}-menu__item {
}

.@{prefix}-menu__item {
padding-left: 16px;
padding-right: 16px;
padding-left: @comp-paddingLR-l;
padding-right: @comp-paddingLR-l;
margin: 4px 0;
}
}

&.@{prefix}-is-horizontal {
.@{prefix}-menu__item {
padding-left: 16px;
padding-right: 16px;
padding-left: @comp-paddingLR-l;
padding-right: @comp-paddingLR-l;
white-space: nowrap;
}

Expand Down Expand Up @@ -896,7 +896,7 @@ a.@{prefix}-menu__item {

&__operations {
&-icon {
margin-right: 16px;
margin-right: @comp-margin-l;
border-radius: @border-radius-default;
color: @menu-item-color--light;
transition: background-color @anim-duration-moderate @anim-time-fn-easing;
Expand Down

0 comments on commit 18dbc75

Please sign in to comment.