Skip to content

Commit

Permalink
refactor(theme): [slider] refactor slider theme vars
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzcr
zzcr committed Oct 18, 2024
1 parent 831d4cd commit c971718
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 152 deletions.
2 changes: 1 addition & 1 deletion packages/theme/src/base/vars.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@
--tv-color-icon-checked-disabled:var(--tv-base-color-common-6); // #dbdbdb 图标禁用色-1 checkbox选中且禁用
--tv-color-icon-control: var(--tv-base-color-brand); // #191919 图标按钮 / 图标+文本按钮图标色,主要在按钮场景（稳定态图标色， hover时不用变化）
--tv-color-icon-control-active: var(--tv-base-color-brand-6); // #1476ff 控件图标激活色，主要在checkbox、radio图标激活场景
--tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #1476ff 控件图标禁用色，主要在checkbox、radio图标激活场景
--tv-color-icon-control-disabled: var(--tv-base-color-common-6); // #dbdbdb 控件图标禁用色，主要在checkbox、radio图标激活场景
--tv-color-icon-white: var(--tv-base-color-common-1); // #fff 深色背景白色图标
--tv-color-icon-link: var(--tv-base-color-brand-6); // #1476ff 链接图标色
--tv-color-icon-warn-secondary: var(--tv-base-color-warn-secondary-1); // #ffb700 次要警告图标色 / 评分组件rate-图标色/状态图标-异常
Expand Down
134 changes: 57 additions & 77 deletions packages/theme/src/slider/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@slider-container-prefix-cls: ~'@{css-prefix}slider-container';

.@{slider-container-prefix-cls} {
.component-css-vars-slider();
.inject-Slider-vars();
position: relative;

&&__horizontal {
Expand All @@ -28,11 +28,11 @@
}

.@{slider-prefix-cls} {
border-radius: var(--ti-slider-border-radius);
height: var(--ti-slider-height);
border-radius: var(--tv-Slider-border-radius);
height: var(--tv-Slider-height);
position: relative;
margin: 13px 0;
background: var(--ti-slider-bg-color);
background: var(--tv-Slider-bg-color);
cursor: pointer;
display: inline-block;

Expand All @@ -47,36 +47,26 @@

&:hover {
.@{slider-prefix-cls}__range {
background: var(--ti-slider-range-hover-bg-color);
}

.@{slider-prefix-cls}__handle {
border-color: var(--ti-slider-handle-border-color-hover);
border-width: var(--ti-slider-handle-border-weight-hover);
background: var(--tv-Slider-range-hover-bg-color);
}
}

&.disabled {
cursor: default;
background-color: var(--ti-slider-bg-color-disabled);
background-color: var(--tv-Slider-bg-color-disabled);

.@{slider-prefix-cls}__range {
background-color: var(--ti-slider-range-disabled-bg-color);
background-color: var(--tv-Slider-range-disabled-bg-color);
}

.@{slider-prefix-cls}__handle {
cursor: not-allowed;
border-color: var(--ti-slider-handle-disabled-border-color);

&:hover svg,
svg {
fill: var(--ti-slider-handle-icon-disabled-fill-color);
}
border-color: var(--tv-Slider-handle-disabled-border-color);
}
}

&__vertical {
width: var(--ti-slider-height);
width: var(--tv-Slider-height);
height: 300px;
display: block;
margin: 0 15px;
Expand All @@ -91,7 +81,7 @@
border-radius: 10px;
position: absolute;
z-index: 1;
width: var(--ti-slider-height);
width: var(--tv-Slider-height);
}

.@{slider-prefix-cls}__up {
Expand All @@ -103,30 +93,29 @@
}

.@{slider-prefix-cls}__handle {
margin: var(--ti-slider-margin-vertical) var(--ti-slider-margin-right) var(--ti-slider-margin-vertical)
var(--ti-slider-margin-left);
margin: -8px 0 -8px -8px;
}

.@{slider-prefix-cls}__mark-point {
transform: translateY(50%);
height: var(--ti-slider-mark-point-width);
width: var(--ti-slider-height);
height: 2px;
width: var(--tv-Slider-height);
}

.@{slider-prefix-cls}__mark-label {
transform: translateY(50%);
margin-left: var(--ti-slider-mark-label-margin-top);
margin-left: calc(8px + var(--tv-Slider-height));
margin-top: 0;
}
}

&__range {
border-radius: var(--ti-slider-range-border-radius);
border-radius: var(--tv-Slider-range-border-radius);
position: absolute;
z-index: 1;
margin-top: var(--ti-slider-range-margin-top);
height: var(--ti-slider-range-height);
background: var(--ti-slider-range-bg-color);
margin-top: 0;
height: var(--tv-Slider-range-height);
background: var(--tv-Slider-range-bg-color);
}

&__left {
Expand All @@ -138,69 +127,60 @@
}

&__handle {
border-radius: var(--ti-slider-handle-border-radius);
height: var(--ti-slider-handle-height);
width: var(--ti-slider-handle-width);
border-radius: var(--tv-Slider-handle-border-radius);
height: var(--tv-Slider-handle-height);
width: var(--tv-Slider-handle-width);
position: absolute;
margin: var(--ti-slider-handle-margin-top) var(--ti-slider-handle-margin-horizontal)
var(--ti-slider-handle-margin-bottom);
margin: -8px -8px 0;
z-index: 2;
outline: none;
background: var(--ti-slider-handle-bg-color);
border: var(--ti-slider-handle-border-weight) solid var(--ti-slider-handle-border-color);
background: var(--tv-Slider-handle-bg-color);
border: 1px solid var(--tv-Slider-handle-border-color);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--ti-slider-handle-box-shadow);
box-shadow: var(--tv-Slider-handle-box-shadow);
user-select: none;
cursor: grab;
text-align: center;

svg {
display: none;
}

&.handle-focus {
z-index: 10;
}

&:hover {
color: var(--ti-slider-handle-text-color-hover);
border-color: var(--ti-slider-handle-border-color-hover);
transform: var(--ti-slider-handle-transform);

svg {
fill: var(--ti-slider-handle-icon-fill-color-hover);
}
}

svg {
display: var(--ti-slider-handle-icon-display);
height: 12px;
margin-left: 4px;
fill: var(--ti-slider-handle-icon-fill-color);
color: var(--tv-Slider-handle-text-color-hover);
border-color: var(--tv-Slider-handle-border-color-hover);
border-width: 2px;
}
}

&__tips {
text-align: center;
font-size: var(--ti-common-font-size-base);
margin-top: -32px;
margin-left: var(--ti-slider-tips-margin-left);
margin-left: 3px;
position: absolute;
padding: 12px 16px;
line-height: 1.5;
z-index: 1010;
word-break: normal; // popup-body里面加了默认折行影响到此处需要重置
white-space: nowrap; // 强制不换行-to liyingfu 纵向进度条上的tips如果内容过多并有空格就会掉下去，此处设置强制显示一行
background: var(--ti-slider-tips-bg-color);
border: 1px solid var(--ti-slider-tips-border-color);
background: var(--tv-Slider-tips-bg-color);
border-radius: var(--ti-common-border-radius-1);
color: var(--ti-slider-tips-text-color);
box-shadow: var(--ti-slider-tips-box-shadow);
color: var(--tv-Slider-tips-text-color);
box-shadow: var(--tv-Slider-tips-box-shadow);

&:before {
margin-left: -6px;
bottom: -6px;
.tip-arrow(50%; auto; 0;);
.tip-make-arrow(
6px 6px 0 6px; var(--ti-slider-tips-border-color) transparent
6px 6px 0 6px; var(--tv-Slider-tips-border-color) transparent
);
}

Expand All @@ -209,7 +189,7 @@
bottom: -4px;
.tip-arrow(50%; auto; 0;);
.tip-make-arrow(
4px 4px 0 4px; var(--ti-slider-tips-border-color) transparent
4px 4px 0 4px; var(--tv-Slider-tips-border-color) transparent
);
}
}
Expand All @@ -218,54 +198,54 @@
position: absolute;
pointer-events: none;
transform: translateX(-50%);
width: var(--ti-slider-mark-point-width);
height: var(--ti-slider-height);
background-color: var(--ti-slider-mark-point-bg-color);
width: 2px;
height: var(--tv-Slider-height);
background-color: var(--tv-Slider-mark-point-bg-color);
}

&__mark-label {
position: absolute;
transform: translateX(-50%);
margin-top: var(--ti-slider-mark-label-margin-top);
color: var(--ti-slider-mark-label-text-color);
font-size: var(--ti-slider-mark-label-font-size);
margin-top: calc(8px + var(--tv-Slider-height));
color: var(--tv-Slider-mark-label-text-color);
font-size: var(--tv-Slider-mark-label-font-size);
}

&__input {
display: flex;
line-height: var(--ti-slider-input-height);
line-height: var(--tv-Slider-input-height);
vertical-align: top;
margin-left: var(--ti-slider-input-margin-left);
margin-left: var(--tv-Slider-input-margin-left);
font-size: var(--ti-common-font-size-base);

&__split {
padding: 0 4px;
}

input {
width: var(--ti-slider-input-width);
height: var(--ti-slider-input-height);
line-height: var(--ti-slider-input-height);
border: 1px solid var(--ti-slider-input-border-color);
border-radius: var(--ti-slider-input-border-radius);
color: var(--ti-slider-input-text-color);
background: var(--ti-slider-input-bg-color);
width: var(--tv-Slider-input-width);
height: var(--tv-Slider-input-height);
line-height: var(--tv-Slider-input-height);
border: 1px solid var(--tv-Slider-input-border-color);
border-radius: var(--tv-Slider-input-border-radius);
color: var(--tv-Slider-input-text-color);
background: var(--tv-Slider-input-bg-color);
font-size: inherit;
padding: 0 8px;
outline: 0;
display: inline-block;
box-sizing: border-box;
text-align: var(--ti-slider-input-text-align);
text-align: left;
}

&__unit {
margin-left: var(--ti-slider-input-unit-margin-left);
color: var(--ti-slider-input-unit-text-color);
margin-left: var(--tv-Slider-input-unit-margin-left);
color: var(--tv-Slider-input-unit-text-color);
}

&.is-disabled {
.@{slider-prefix-cls}__input__unit {
color: var(--ti-slider-input-unit-text-color-disabled);
color: var(--tv-Slider-input-unit-text-color-disabled);
}
}
}
Expand Down
Loading

0 comments on commit c971718

Please sign in to comment.