Skip to content

Commit

Permalink
refactor(theme): [filter-panel] refactor filter-panel theme vars
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzcr
zzcr committed Oct 17, 2024
1 parent ade7165 commit f97dacb
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 53 deletions.
46 changes: 22 additions & 24 deletions packages/theme/src/filter-box/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,19 @@
@filter-box-prefix-cls: ~'@{css-prefix}filter-box';

.@{filter-box-prefix-cls} {
.component-css-vars-filter-box();
.inject-FilterBox-vars();

width: fit-content;
height: var(--ti-filter-box-btn-height);
line-height: var(--ti-filter-box-btn-height);
height: var(--tv-FilterBox-btn-height);
line-height: var(--tv-FilterBox-btn-height);
border-radius: 4px;
background: var(--ti-filter-box-btn-bg-color);
background: var(--tv-FilterBox-btn-bg-color);
color: #161e26;
padding: 4px var(--ti-filter-box-btn-padding-horizontal);
padding: 4px var(--tv-FilterBox-btn-padding-x);
display: flex;
align-items: center;
font-size: 12px;

&:hover {
background: var(--ti-filter-box-btn-hover-bg-color);
}

&.disabled {
cursor: not-allowed;

Expand All @@ -52,46 +48,46 @@

.title {
height: inherit;
line-height: var(--ti-filter-box-btn-title-line-height);
font-size: var(--ti-filter-box-btn-font-size);
line-height: var(--tv-FilterBox-btn-title-line-height);
font-size: var(--tv-FilterBox-btn-font-size);
/* TODO: title 这个类名不符合组件类名规范，被公共样式污染，故在此处重置间距为 0.计划优化这个类名 */
margin-right: 0px;
margin-right: 0;

label {
display: inline-block;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ti-filter-box-btn-text-color);
color: var(--tv-FilterBox-btn-text-color);
margin-right: 8px;
margin-top: 3px;
}

&.active label {
color: var(--ti-filter-box-btn-hover-text-color);
color: var(--tv-FilterBox-btn-active-text-color);
}

svg {
width: 16px;
height: 16px;
margin-right: var(--ti-filter-box-help-btn-margin-right);
fill: var(--ti-filter-box-help-btn-icon-color);
margin-right: var(--tv-FilterBox-help-btn-margin-right);
fill: var(--tv-FilterBox-help-btn-icon-color);
position: relative;
top: var(--ti-filter-box-help-btn-position-top);
top: var(--tv-FilterBox-help-btn-position-top);
vertical-align: super;

&:hover {
fill: var(--ti-filter-box-btn-hover-text-color);
fill: var(--tv-FilterBox-btn-hover-icon-color);
}
}
}

.value {
max-width: 100px;
height: inherit;
line-height: 1.5;
margin-right: 4px;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Expand All @@ -104,20 +100,22 @@
}

.filter-box-icon {
width: var(--ti-filter-box-expand-btn-icon-size);
height: var(--ti-filter-box-expand-btn-icon-size);
width: var(--tv-FilterBox-expand-btn-icon-size);
height: var(--tv-FilterBox-expand-btn-icon-size);
cursor: pointer;
fill: var(--ti-filter-box-expand-btn-icon-color);
fill: var(--tv-FilterBox-expand-btn-icon-color);
transition: transform 0.3s;

&.is-reverse {
transform: rotate(180deg);
}
}

&:hover {
&:not(.disabled):hover {
background: var(--tv-FilterBox-btn-hover-bg-color);

.filter-box-icon {
fill: var(--ti-filter-box-expand-btn-icon-color-hover);
fill: var(--tv-FilterBox-expand-btn-icon-color-hover);
}
}

Expand Down
38 changes: 20 additions & 18 deletions packages/theme/src/filter-box/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,35 @@
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
.component-css-vars-filter-box() {
.inject-FilterBox-vars() {
// 按钮高度
--ti-filter-box-btn-height: var(--ti-common-size-height-small, 24px);
--tv-FilterBox-btn-height: var(--tv-size-height-xs);
// 按钮背景色
--ti-filter-box-btn-bg-color: var(--ti-common-color-bg-6, #f5f5f5);
// 按钮展开图标尺寸
--ti-filter-box-btn-hover-bg-color: var(--ti-common-color-bg-6, #f5f5f5);
--tv-FilterBox-btn-bg-color: var(--tv-color-bg);
// 按钮悬浮背景色
--tv-FilterBox-btn-hover-bg-color: var(--tv-color-bg-hover-1);
// 按钮水平内边距
--ti-filter-box-btn-padding-horizontal: var(--ti-common-space-2x, 8px);
--tv-FilterBox-btn-padding-x: var(--tv-space-md);
// 按钮文本色
--ti-filter-box-btn-text-color: var(--ti-common-color-text-weaken, #808080);
// 按钮悬浮文本色和图标色
--ti-filter-box-btn-hover-text-color: var(--ti-common-color-text-primary, #191919);
--tv-FilterBox-btn-text-color: var(--tv-color-text-weaken);
// 按钮激活文本色
--tv-FilterBox-btn-active-text-color: var(--tv-color-text-active);
// 按钮问号图标色
--tv-FilterBox-help-btn-icon-color: var(--tv-color-icon);
// 按钮问号图标悬浮色色
--tv-FilterBox-btn-hover-icon-color: var(--tv-color-icon-hover);
// 按钮文本字号
--ti-filter-box-btn-font-size: var(--ti-common-font-size-0, 12px);
--tv-FilterBox-btn-font-size: var(--tv-font-size-sm);
// 按钮文本行高
--ti-filter-box-btn-title-line-height: var(--ti-common-line-height-number, 1.5);
// 按钮问号图标色
--ti-filter-box-help-btn-icon-color: var(--ti-common-color-text-primary, #191919);
--tv-FilterBox-btn-title-line-height: var(--tv-line-height-number);
// 按钮帮助图标右边距
--ti-filter-box-help-btn-margin-right: var(--ti-common-space-base, 4px);
--tv-FilterBox-help-btn-margin-right: var(--tv-space-sm);
// 按钮问号top定位(hide)
--ti-filter-box-help-btn-position-top: var(--ti-common-space-base, 4px);
--tv-FilterBox-help-btn-position-top: var(--tv-space-sm);
// 按钮展开图标色
--ti-filter-box-expand-btn-icon-color: var(--ti-common-color-icon-normal, #808080);
--tv-FilterBox-expand-btn-icon-color: var(--tv-color-icon);
// 按钮展开图标悬浮色
--ti-filter-box-expand-btn-icon-color-hover: var(--ti-common-color-icon-hover, #191919);
--tv-FilterBox-expand-btn-icon-color-hover: var(--tv-color-icon-hover);
// 按钮展开图标尺寸
--ti-filter-box-expand-btn-icon-size: var(--ti-common-font-size-2, 16px);
--tv-FilterBox-expand-btn-icon-size: var(--tv-icon-size);
}
10 changes: 5 additions & 5 deletions packages/theme/src/filter-panel/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,21 @@

.@{filter-panel-prefix-cls} {
&__popover {
.component-css-vars-filter-panel();
.inject-FilterPanel-vars();
}

&__popover.tiny-popover.tiny-popper {
min-width: 200px;
padding: var(--ti-filter-panel-padding-vertical) var(--ti-filter-panel-padding-horizontal);
padding: var(--tv-FilterPanel-padding-y) var(--tv-FilterPanel-padding-x);

&[x-placement^='bottom'] {
margin-top: var(--ti-filter-panel-margin-top);
box-shadow: var(--ti-filter-panel-bottom-box-shadow);
margin-top: var(--tv-FilterPanel-margin-top);
box-shadow: var(--tv-FilterPanel-bottom-box-shadow);
}

&[x-placement^='top'] {
margin-bottom: 4px;
box-shadow: var(--ti-filter-panel-top-box-shadow);
box-shadow: var(--tv-FilterPanel-top-box-shadow);
}
}
}
12 changes: 6 additions & 6 deletions packages/theme/src/filter-panel/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/
.component-css-vars-filter-panel() {
.inject-FilterPanel-vars() {
// 面板上外边距
--ti-filter-panel-margin-top: var(--ti-common-space-2x, 8px);
--tv-FilterPanel-margin-top: var(--tv-space-md);
// 面板垂直内边距
--ti-filter-panel-padding-vertical: var(--ti-common-space-6x, 24px);
--tv-FilterPanel-padding-y: 24px;
// 面板水平内边距
--ti-filter-panel-padding-horizontal: var(--ti-common-space-6x, 24px);
--tv-FilterPanel-padding-x: 24px;
// 朝下的面板阴影
--ti-filter-panel-bottom-box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
--tv-FilterPanel-bottom-box-shadow: var(--tv-shadow-4-down);
// 朝上的面板阴影
--ti-filter-panel-top-box-shadow: 8px 0px 24px 0px rgba(0, 0, 0, 0.18);
--tv-FilterPanel-top-box-shadow: var(--tv-shadow-4-up);
}

0 comments on commit f97dacb

Please sign in to comment.