Skip to content

Commit

Permalink
refactor(theme): [drawer] refactor drawer theme vars
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzcr
zzcr committed Oct 11, 2024
1 parent feea189 commit f5d3045
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 123 deletions.
1 change: 1 addition & 0 deletions packages/theme/src/base/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,7 @@
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
--tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2灰色标签背景色
--tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
--tv-color-mask-bg: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色

/* 2.6.2 禁用 */
--tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色
Expand Down
77 changes: 35 additions & 42 deletions packages/theme/src/drawer/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@drawer-prefix-cls: ~'@{css-prefix}drawer';

.@{drawer-prefix-cls} {
.component-css-vars-drawer();
.inject-Drawer-vars();

.@{drawer-prefix-cls}__mask {
width: 100%;
Expand All @@ -16,7 +16,7 @@
right: 0;

&.show-bg-color {
background-color: var(--ti-drawer-mask-bg-color);
background-color: var(--tv-Drawer-mask-bg-color);
}
}

Expand All @@ -26,10 +26,8 @@
max-width: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
border-color: #e8ebef;
border-style: solid;
box-shadow: var(--ti-drawer-shadow);
background-color: var(--tv-Drawer-bg-color);
box-shadow: var(--tv-Drawer-shadow);
overflow: hidden;

&.drag-effects {
Expand All @@ -52,28 +50,28 @@
top: 0;
right: 0;
border-left-width: 0.5px;
border-radius: var(--ti-drawer-radius) 0 0 var(--ti-drawer-radius);
border-radius: 0;
}

&.is-left {
top: 0;
left: 0;
border-right-width: 0.5px;
border-radius: 0 var(--ti-common-border-radius-2) var(--ti-common-border-radius-2) 0;
border-radius: 0 var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size) 0;
}

&.is-top {
top: 0;
left: 0;
border-bottom-width: 0.5px;
border-radius: 0 0 var(--ti-common-border-radius-2) var(--ti-common-border-radius-2);
border-radius: 0 0 var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size);
}

&.is-bottom {
bottom: 0;
left: 0;
border-top-width: 0.5px;
border-radius: var(--ti-common-border-radius-2) var(--ti-common-border-radius-2) 0 0;
border-radius: var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size) 0 0;
}

.@{drawer-prefix-cls}__drag-bar {
Expand Down Expand Up @@ -122,8 +120,8 @@

.@{drawer-prefix-cls}__header,
.@{drawer-prefix-cls}__footer {
margin-left: var(--ti-drawer-padding-left);
margin-right: var(--ti-drawer-padding-right);
margin-left: 32px;
margin-right: 32px;
}

.@{drawer-prefix-cls}__header-wrapper {
Expand All @@ -136,44 +134,41 @@
padding: 0;
line-height: 1;
position: absolute;
top: var(--ti-drawer-btn-position-top);
right: var(--ti-drawer-btn-position-right);
top: 20px;
right: 20px;
cursor: pointer;
height: var(--ti-drawer-btn-height);
width: var(--ti-drawer-btn-width);

&:hover {
background-color: var(--ti-drawer-btn-background-color-hover);
border-radius: var(--ti-drawer-btn-border-radius);
}
height: 24px;
width: 24px;

& + .@{drawer-prefix-cls}__headerbtn {
margin-left: 8px;
}

.@{drawer-prefix-cls}__close {
font-size: var(--ti-drawer-close-icon-size);
fill: var(--ti-drawer-close-icon-color);
font-size: 24px;
fill: var(--tv-Drawer-close-icon-color);

&:hover {
fill: var(--tv-Drawer-close-icon-color-hover);
}
}
}

.@{drawer-prefix-cls}__header {
padding: var(--ti-drawer-header-padding-top) var(--ti-drawer-header-padding-right)
var(--ti-drawer-header-padding-bottom) var(--ti-drawer-header-padding-left);
background: var(--ti-drawer-bg-color);
padding: 32px 0 24px;
background: var(--tv-Drawer-bg-color);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--ti-drawer-divider-border-color);

.@{drawer-prefix-cls}__title {
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ti-drawer-head-title-font-size);
color: var(--ti-drawer-head-title-text-color);
font-weight: var(--ti-drawer-head-title-font-weight);
font-size: var(--tv-Drawer-head-title-font-size);
color: var(--tv-Drawer-head-title-text-color);
font-weight: var(--tv-Drawer-head-title-font-weight);
}

.@{drawer-prefix-cls}__header-left {
Expand All @@ -183,10 +178,10 @@
padding-right: 16px;

.@{drawer-prefix-cls}__help-icon {
width: var(--ti-drawer-help-icon-width-height);
height: var(--ti-drawer-help-icon-width-height);
margin-left: var(--ti-drawer-help-icon-margin-left);
fill: var(--ti-drawer-help-icon-color);
width: var(--tv-Drawer-help-icon-width-height);
height: var(--tv-Drawer-help-icon-width-height);
margin-left: 8px;
fill: var(--tv-Drawer-help-icon-color);
}
}

Expand All @@ -202,30 +197,28 @@
.@{drawer-prefix-cls}__body {
flex: auto;
overflow: auto;
padding: var(--ti-drawer-padding-top) var(--ti-drawer-padding-right) var(--ti-drawer-padding-bottom) var(--ti-drawer-padding-left);
border-bottom: 1px solid var(--ti-drawer-divider-body-border-color);
padding: 0 32px;
border-bottom: 1px solid var(--tv-Drawer-divider-body-border-color);
}

.@{drawer-prefix-cls}__footer {
flex: none;
display: flex;
align-items: center;
justify-content: var(--ti-drawer-footer-justify-content);
padding: var(--ti-drawer-footer-padding-top) var(--ti-drawer-footer-padding-right)
var(--ti-drawer-footer-padding-bottom) var(--ti-drawer-footer-padding-left);
border-top: 1px solid var(--ti-drawer-divider-footer-border-color);
justify-content: flex-end;
padding: 24px 0 32px;

.@{drawer-prefix-cls}__confirm-btn {
order: 0;

&.reverse {
margin-left: var(--ti-drawer-divider-footer-button-margin-left);
margin-left: 8px;
order: 1;
}
}

.@{drawer-prefix-cls}__cancel-btn {
margin-left: var(--ti-drawer-divider-footer-button-margin-left);
margin-left: 8px;
order: 1;

&.reverse {
Expand Down
98 changes: 17 additions & 81 deletions packages/theme/src/drawer/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,97 +10,33 @@
*
*/

.component-css-vars-drawer() {
.inject-Drawer-vars() {
// 最小宽度
--ti-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
--tv-Drawer-min-width: 500px;
// 最大宽度
--ti-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
--tv-Drawer-max-width: 1000px;
// 背景色
--ti-drawer-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
// 左内边距
--ti-drawer-padding-left: var(--ti-common-space-8x, 32px);
// 右内边距
--ti-drawer-padding-right: var(--ti-common-space-8x, 32px);
--tv-Drawer-bg-color: var(--tv-color-bg-secondary);
// 内容底部边框色
--tv-Drawer-divider-body-border-color: var(--tv-color-border-divider);
// 抽屉组件圆角
--tv-Drawer-border-radius-size: var(--tv-border-radius-sm);
// 遮罩层背景色
--ti-drawer-mask-bg-color: rgba(0, 0, 0, 16%);
--tv-Drawer-mask-bg-color: var(--tv-color-mask-bg);
// 阴影
--ti-drawer-shadow: 0 8px 24px rgba(0, 0, 0, 30%);
// 头部与底部边框颜色
--ti-drawer-divider-border-color: transparent;
// 边框圆角
--ti-drawer-radius: var(--ti-common-space-0, 0px);
// 遮罩层背景色
--ti-drawer-mask-bg-color: var(--ti-mobile-color-bg-mask);

// 头部上内边距
--ti-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
// 头部下内边距
--ti-drawer-header-padding-bottom: var(--ti-common-space-6x, 24px);
// 头部左内边距
--ti-drawer-header-padding-left: var(--ti-common-space-0, 0px);
// 头部右内边距
--ti-drawer-body-padding-right: var(--ti-common-space-0, 0px);
--tv-Drawer-shadow: var(--tv-shadow-4-left);
// 头部字号
--ti-drawer-head-title-font-size: var(--ti-common-font-size-4, 20px);
// 头部文本色(hide)
--ti-drawer-head-text-color: var(--ti-common-color-text-primary, #191919);
--tv-Drawer-head-title-font-size: var(--tv-font-size-heading-md);
// 头部标题字重
--ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7, bold);
--tv-Drawer-head-title-font-weight: var(--tv-font-weight-bold);
// 头部标题字体色
--ti-drawer-head-title-text-color: var(--ti-common-color-text-gray, #191919);
// 关闭按钮宽度
--ti-drawer-btn-width: var(--ti-common-size-width-mini, 24px);
// 关闭按钮高度
--ti-drawer-btn-height: var(--ti-common-size-width-mini, 24px);
// 关闭按钮图标尺寸
--ti-drawer-close-icon-size: var(--ti-common-font-size-5, 24px);
// 关闭按钮圆角
--ti-drawer-btn-border-radius: var(--ti-common-border-radius-1, 2px);
--tv-Drawer-head-title-text-color: var(--tv-color-text);
// 关闭按钮图标色
--ti-drawer-close-icon-color: var(--ti-common-color-icon-normal, #808080);
--tv-Drawer-close-icon-color: var(--tv-color-icon);
// 关闭按钮悬浮图标色
--ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
// 关闭按钮与上边框的距离(hide)
--ti-drawer-btn-position-top: var(--ti-common-space-5x, 20px);
// 关闭按钮与右边框的距离(hide)
--ti-drawer-btn-position-right: var(--ti-common-space-5x, 20px);
// 标题与帮助图标间距
--ti-drawer-help-icon-margin-left: var(--ti-common-space-2x, 8px);
--tv-Drawer-close-icon-color-hover: var(--tv-color-icon-hover);
// 帮助图标宽高
--ti-drawer-help-icon-width-height: var(--ti-common-space-4x, 16px);
--tv-Drawer-help-icon-width-height: var(--tv-icon-size);
// 帮助图标色
--ti-drawer-help-icon-color: var(--ti-common-color-icon, #191919);

// 内容上内边距
--ti-drawer-body-padding-top: var(--ti-common-space-0, 0px);
// 内容下内边距
--ti-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
// 内容左内边距
--ti-drawer-body-padding-left: var(--ti-common-space-0, 0px);
// 内容右内边距
--ti-drawer-header-padding-right: var(--ti-common-space-0, 0px);
// 内容底部边框色(hide)
--ti-drawer-divider-body-border-color: var(--ti-common-color-line-dividing, #f0f0f0);
// 底部按钮对齐方式
--ti-drawer-footer-justify-content: flex-end;
// 底部上内边距
--ti-drawer-footer-padding-top: var(--ti-common-space-6x, 24px);
// 底部下内边距
--ti-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
// 底部左内边距
--ti-drawer-footer-padding-left: var(--ti-common-space-0, 0px);
// 底部右内边距
--ti-drawer-footer-padding-right: var(--ti-common-space-0, 0px);
// 底部左外边距
--ti-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
// 底部右外边距
--ti-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
// 底部按钮间距
--ti-drawer-divider-footer-button-margin-left: var(--ti-common-space-2x, 8px);
// 底部边框色(hide)
--ti-drawer-divider-footer-border-color: var(--ti-common-color-transparent, transparent);
// 内容区域上边距
--ti-drawer-padding-top: 0px;
// 内容区域下边距
--ti-drawer-padding-bottom: 0px;
--tv-Drawer-help-icon-color: var(--tv-color-icon-control);
}

0 comments on commit f5d3045

Please sign in to comment.