Skip to content

Commit f5d3045

Browse files
zzcrzzcr
committed
refactor(theme): [drawer] refactor drawer theme vars
1 parent feea189 commit f5d3045

File tree

3 files changed

+53
-123
lines changed

3 files changed

+53
-123
lines changed

‎packages/theme/src/base/vars.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,7 @@
310310
--tv-color-bg-gray-1: var(--tv-base-color-common-2); // #fafafa 灰色背景-1：灰色卡片背景色/表格下展背景色
311311
--tv-color-bg-gray-2: var(--tv-base-color-common-5); // #e6e6e6 灰色背景-2灰色标签背景色
312312
--tv-color-bg-header: var(--tv-base-color-common-4); // #f0f0f0 表头背景色(如果只有表格使用，就转成组件级变量）
313+
--tv-color-mask-bg: rgba(0, 0, 0, 30%); // 遮罩层带有透明度的背景色
313314

314315
/* 2.6.2 禁用 */
315316
--tv-color-bg-disabled: var(--tv-base-color-common-4); // #f0f0f0 禁用背景色

‎packages/theme/src/drawer/index.less‎

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@drawer-prefix-cls: ~'@{css-prefix}drawer';
55

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

99
.@{drawer-prefix-cls}__mask {
1010
width: 100%;
@@ -16,7 +16,7 @@
1616
right: 0;
1717

1818
&.show-bg-color {
19-
background-color: var(--ti-drawer-mask-bg-color);
19+
background-color: var(--tv-Drawer-mask-bg-color);
2020
}
2121
}
2222

@@ -26,10 +26,8 @@
2626
max-width: 100%;
2727
display: flex;
2828
flex-direction: column;
29-
background-color: #fff;
30-
border-color: #e8ebef;
31-
border-style: solid;
32-
box-shadow: var(--ti-drawer-shadow);
29+
background-color: var(--tv-Drawer-bg-color);
30+
box-shadow: var(--tv-Drawer-shadow);
3331
overflow: hidden;
3432

3533
&.drag-effects {
@@ -52,28 +50,28 @@
5250
top: 0;
5351
right: 0;
5452
border-left-width: 0.5px;
55-
border-radius: var(--ti-drawer-radius) 0 0 var(--ti-drawer-radius);
53+
border-radius: 0;
5654
}
5755

5856
&.is-left {
5957
top: 0;
6058
left: 0;
6159
border-right-width: 0.5px;
62-
border-radius: 0 var(--ti-common-border-radius-2) var(--ti-common-border-radius-2) 0;
60+
border-radius: 0 var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size) 0;
6361
}
6462

6563
&.is-top {
6664
top: 0;
6765
left: 0;
6866
border-bottom-width: 0.5px;
69-
border-radius: 0 0 var(--ti-common-border-radius-2) var(--ti-common-border-radius-2);
67+
border-radius: 0 0 var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size);
7068
}
7169

7270
&.is-bottom {
7371
bottom: 0;
7472
left: 0;
7573
border-top-width: 0.5px;
76-
border-radius: var(--ti-common-border-radius-2) var(--ti-common-border-radius-2) 0 0;
74+
border-radius: var(--tv-Drawer-border-radius-size) var(--tv-Drawer-border-radius-size) 0 0;
7775
}
7876

7977
.@{drawer-prefix-cls}__drag-bar {
@@ -122,8 +120,8 @@
122120

123121
.@{drawer-prefix-cls}__header,
124122
.@{drawer-prefix-cls}__footer {
125-
margin-left: var(--ti-drawer-padding-left);
126-
margin-right: var(--ti-drawer-padding-right);
123+
margin-left: 32px;
124+
margin-right: 32px;
127125
}
128126

129127
.@{drawer-prefix-cls}__header-wrapper {
@@ -136,44 +134,41 @@
136134
padding: 0;
137135
line-height: 1;
138136
position: absolute;
139-
top: var(--ti-drawer-btn-position-top);
140-
right: var(--ti-drawer-btn-position-right);
137+
top: 20px;
138+
right: 20px;
141139
cursor: pointer;
142-
height: var(--ti-drawer-btn-height);
143-
width: var(--ti-drawer-btn-width);
144-
145-
&:hover {
146-
background-color: var(--ti-drawer-btn-background-color-hover);
147-
border-radius: var(--ti-drawer-btn-border-radius);
148-
}
140+
height: 24px;
141+
width: 24px;
149142

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

154147
.@{drawer-prefix-cls}__close {
155-
font-size: var(--ti-drawer-close-icon-size);
156-
fill: var(--ti-drawer-close-icon-color);
148+
font-size: 24px;
149+
fill: var(--tv-Drawer-close-icon-color);
150+
151+
&:hover {
152+
fill: var(--tv-Drawer-close-icon-color-hover);
153+
}
157154
}
158155
}
159156

160157
.@{drawer-prefix-cls}__header {
161-
padding: var(--ti-drawer-header-padding-top) var(--ti-drawer-header-padding-right)
162-
var(--ti-drawer-header-padding-bottom) var(--ti-drawer-header-padding-left);
163-
background: var(--ti-drawer-bg-color);
158+
padding: 32px 0 24px;
159+
background: var(--tv-Drawer-bg-color);
164160
display: flex;
165161
justify-content: space-between;
166162
align-items: center;
167-
border-bottom: 1px solid var(--ti-drawer-divider-border-color);
168163

169164
.@{drawer-prefix-cls}__title {
170165
text-align: left;
171166
overflow: hidden;
172167
text-overflow: ellipsis;
173168
white-space: nowrap;
174-
font-size: var(--ti-drawer-head-title-font-size);
175-
color: var(--ti-drawer-head-title-text-color);
176-
font-weight: var(--ti-drawer-head-title-font-weight);
169+
font-size: var(--tv-Drawer-head-title-font-size);
170+
color: var(--tv-Drawer-head-title-text-color);
171+
font-weight: var(--tv-Drawer-head-title-font-weight);
177172
}
178173

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

185180
.@{drawer-prefix-cls}__help-icon {
186-
width: var(--ti-drawer-help-icon-width-height);
187-
height: var(--ti-drawer-help-icon-width-height);
188-
margin-left: var(--ti-drawer-help-icon-margin-left);
189-
fill: var(--ti-drawer-help-icon-color);
181+
width: var(--tv-Drawer-help-icon-width-height);
182+
height: var(--tv-Drawer-help-icon-width-height);
183+
margin-left: 8px;
184+
fill: var(--tv-Drawer-help-icon-color);
190185
}
191186
}
192187

@@ -202,30 +197,28 @@
202197
.@{drawer-prefix-cls}__body {
203198
flex: auto;
204199
overflow: auto;
205-
padding: var(--ti-drawer-padding-top) var(--ti-drawer-padding-right) var(--ti-drawer-padding-bottom) var(--ti-drawer-padding-left);
206-
border-bottom: 1px solid var(--ti-drawer-divider-body-border-color);
200+
padding: 0 32px;
201+
border-bottom: 1px solid var(--tv-Drawer-divider-body-border-color);
207202
}
208203

209204
.@{drawer-prefix-cls}__footer {
210205
flex: none;
211206
display: flex;
212207
align-items: center;
213-
justify-content: var(--ti-drawer-footer-justify-content);
214-
padding: var(--ti-drawer-footer-padding-top) var(--ti-drawer-footer-padding-right)
215-
var(--ti-drawer-footer-padding-bottom) var(--ti-drawer-footer-padding-left);
216-
border-top: 1px solid var(--ti-drawer-divider-footer-border-color);
208+
justify-content: flex-end;
209+
padding: 24px 0 32px;
217210

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

221214
&.reverse {
222-
margin-left: var(--ti-drawer-divider-footer-button-margin-left);
215+
margin-left: 8px;
223216
order: 1;
224217
}
225218
}
226219

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

231224
&.reverse {

‎packages/theme/src/drawer/vars.less‎

Lines changed: 17 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -10,97 +10,33 @@
1010
*
1111
*/
1212

13-
.component-css-vars-drawer() {
13+
.inject-Drawer-vars() {
1414
// 最小宽度
15-
--ti-drawer-min-width: calc(var(--ti-common-space-10, 10px) * 50);
15+
--tv-Drawer-min-width: 500px;
1616
// 最大宽度
17-
--ti-drawer-max-width: calc(var(--ti-common-space-10, 10px) * 100);
17+
--tv-Drawer-max-width: 1000px;
1818
// 背景色
19-
--ti-drawer-bg-color: var(--ti-common-color-bg-white-normal, #ffffff);
20-
// 左内边距
21-
--ti-drawer-padding-left: var(--ti-common-space-8x, 32px);
22-
// 右内边距
23-
--ti-drawer-padding-right: var(--ti-common-space-8x, 32px);
19+
--tv-Drawer-bg-color: var(--tv-color-bg-secondary);
20+
// 内容底部边框色
21+
--tv-Drawer-divider-body-border-color: var(--tv-color-border-divider);
22+
// 抽屉组件圆角
23+
--tv-Drawer-border-radius-size: var(--tv-border-radius-sm);
2424
// 遮罩层背景色
25-
--ti-drawer-mask-bg-color: rgba(0, 0, 0, 16%);
25+
--tv-Drawer-mask-bg-color: var(--tv-color-mask-bg);
2626
// 阴影
27-
--ti-drawer-shadow: 0 8px 24px rgba(0, 0, 0, 30%);
28-
// 头部与底部边框颜色
29-
--ti-drawer-divider-border-color: transparent;
30-
// 边框圆角
31-
--ti-drawer-radius: var(--ti-common-space-0, 0px);
32-
// 遮罩层背景色
33-
--ti-drawer-mask-bg-color: var(--ti-mobile-color-bg-mask);
34-
35-
// 头部上内边距
36-
--ti-drawer-header-padding-top: var(--ti-common-space-8x, 32px);
37-
// 头部下内边距
38-
--ti-drawer-header-padding-bottom: var(--ti-common-space-6x, 24px);
39-
// 头部左内边距
40-
--ti-drawer-header-padding-left: var(--ti-common-space-0, 0px);
41-
// 头部右内边距
42-
--ti-drawer-body-padding-right: var(--ti-common-space-0, 0px);
27+
--tv-Drawer-shadow: var(--tv-shadow-4-left);
4328
// 头部字号
44-
--ti-drawer-head-title-font-size: var(--ti-common-font-size-4, 20px);
45-
// 头部文本色(hide)
46-
--ti-drawer-head-text-color: var(--ti-common-color-text-primary, #191919);
29+
--tv-Drawer-head-title-font-size: var(--tv-font-size-heading-md);
4730
// 头部标题字重
48-
--ti-drawer-head-title-font-weight: var(--ti-common-font-weight-7, bold);
31+
--tv-Drawer-head-title-font-weight: var(--tv-font-weight-bold);
4932
// 头部标题字体色
50-
--ti-drawer-head-title-text-color: var(--ti-common-color-text-gray, #191919);
51-
// 关闭按钮宽度
52-
--ti-drawer-btn-width: var(--ti-common-size-width-mini, 24px);
53-
// 关闭按钮高度
54-
--ti-drawer-btn-height: var(--ti-common-size-width-mini, 24px);
55-
// 关闭按钮图标尺寸
56-
--ti-drawer-close-icon-size: var(--ti-common-font-size-5, 24px);
57-
// 关闭按钮圆角
58-
--ti-drawer-btn-border-radius: var(--ti-common-border-radius-1, 2px);
33+
--tv-Drawer-head-title-text-color: var(--tv-color-text);
5934
// 关闭按钮图标色
60-
--ti-drawer-close-icon-color: var(--ti-common-color-icon-normal, #808080);
35+
--tv-Drawer-close-icon-color: var(--tv-color-icon);
6136
// 关闭按钮悬浮图标色
62-
--ti-drawer-close-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
63-
// 关闭按钮与上边框的距离(hide)
64-
--ti-drawer-btn-position-top: var(--ti-common-space-5x, 20px);
65-
// 关闭按钮与右边框的距离(hide)
66-
--ti-drawer-btn-position-right: var(--ti-common-space-5x, 20px);
67-
// 标题与帮助图标间距
68-
--ti-drawer-help-icon-margin-left: var(--ti-common-space-2x, 8px);
37+
--tv-Drawer-close-icon-color-hover: var(--tv-color-icon-hover);
6938
// 帮助图标宽高
70-
--ti-drawer-help-icon-width-height: var(--ti-common-space-4x, 16px);
39+
--tv-Drawer-help-icon-width-height: var(--tv-icon-size);
7140
// 帮助图标色
72-
--ti-drawer-help-icon-color: var(--ti-common-color-icon, #191919);
73-
74-
// 内容上内边距
75-
--ti-drawer-body-padding-top: var(--ti-common-space-0, 0px);
76-
// 内容下内边距
77-
--ti-drawer-body-padding-bottom: var(--ti-common-space-0, 0px);
78-
// 内容左内边距
79-
--ti-drawer-body-padding-left: var(--ti-common-space-0, 0px);
80-
// 内容右内边距
81-
--ti-drawer-header-padding-right: var(--ti-common-space-0, 0px);
82-
// 内容底部边框色(hide)
83-
--ti-drawer-divider-body-border-color: var(--ti-common-color-line-dividing, #f0f0f0);
84-
// 底部按钮对齐方式
85-
--ti-drawer-footer-justify-content: flex-end;
86-
// 底部上内边距
87-
--ti-drawer-footer-padding-top: var(--ti-common-space-6x, 24px);
88-
// 底部下内边距
89-
--ti-drawer-footer-padding-bottom: var(--ti-common-space-8x, 32px);
90-
// 底部左内边距
91-
--ti-drawer-footer-padding-left: var(--ti-common-space-0, 0px);
92-
// 底部右内边距
93-
--ti-drawer-footer-padding-right: var(--ti-common-space-0, 0px);
94-
// 底部左外边距
95-
--ti-drawer-footer-margin-left: var(--ti-common-space-8x, 32px);
96-
// 底部右外边距
97-
--ti-drawer-footer-margin-right: var(--ti-common-space-10x, 40px);
98-
// 底部按钮间距
99-
--ti-drawer-divider-footer-button-margin-left: var(--ti-common-space-2x, 8px);
100-
// 底部边框色(hide)
101-
--ti-drawer-divider-footer-border-color: var(--ti-common-color-transparent, transparent);
102-
// 内容区域上边距
103-
--ti-drawer-padding-top: 0px;
104-
// 内容区域下边距
105-
--ti-drawer-padding-bottom: 0px;
41+
--tv-Drawer-help-icon-color: var(--tv-color-icon-control);
10642
}

0 commit comments

Comments
 (0)