mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

Vars to theme slider (#9065)

Browse Source 
* vars to theme slider

* add @slider-margin back
This commit is contained in:
George Gray 2018-01-23 13:03:22 +00:00 committed by 偏右
parent 2759460908
commit 72a5b1fef7
2 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/slider/style/index.less
View File

@ -2,15 +2,6 @@
@import "../../style/mixins/index";
@slider-prefix-cls: ~"@{ant-prefix}-slider";
// slider color
@slider-disabled-color: @disabled-color;
// tooltip
@slider-tooltip-color: #fff;
@slider-tooltip-bg: tint(@text-color, 4%);
@slider-tooltip-arrow-width: 4px;
@slider-tooltip-distance: @slider-tooltip-arrow-width + 4px;
@slider-tooltip-arrow-color: @slider-tooltip-bg;
@slider-margin: 14px 6px 10px;
.@{slider-prefix-cls} {
.reset-component;
@ -31,7 +22,7 @@
width: 100%;
height: 4px;
border-radius: 2px;
background-color: @background-color-base;
background-color: @slider-rail-background-color;
transition: background-color .3s;
}
@ -39,7 +30,7 @@
position: absolute;
height: 4px;
border-radius: @border-radius-base;
background-color: @primary-3;
background-color: @slider-track-background-color;
transition: background-color 0.3s ease;
}
@ -51,30 +42,30 @@
height: 14px;
cursor: pointer;
border-radius: 50%;
border: solid 2px @primary-3;
border: solid 2px @slider-handle-color;
background-color: @component-background;
transition: border-color .3s, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
&:focus {
border-color: tint(@primary-color, 20%);
box-shadow: 0 0 0 5px tint(@primary-color, 50%);
border-color: @slider-handle-color-focus;
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
outline: none;
}
&.@{ant-prefix}-tooltip-open {
border-color: @primary-color;
border-color: @slider-handle-color-tooltip-open;
}
}
&:hover {
.@{slider-prefix-cls}-rail {
background-color: #e1e1e1;
background-color: @slider-rail-background-color-hover;
}
.@{slider-prefix-cls}-track {
background-color: @primary-4;
background-color: @slider-track-background-color-hover;
}
.@{slider-prefix-cls}-handle:not(.@{ant-prefix}-tooltip-open) {
border-color: @primary-4;
border-color: @slider-handle-color-hover;
}
}
@ -112,7 +103,7 @@
margin-left: -4px;
width: 8px;
height: 8px;
border: 2px solid @border-color-split;
border: 2px solid @slider-dot-border-color;
background-color: @component-background;
cursor: pointer;
border-radius: 50%;
@ -124,7 +115,7 @@
margin-left: -4px;
}
&-active {
border-color: tint(@primary-color, 50%);
border-color: @slider-dot-border-color-active;
}
}

17
components/style/themes/default.less
View File

@ -414,3 +414,20 @@
@breadcrumb-link-color-hover: @primary-5;
@breadcrumb-separator-color: @text-color-secondary;
@breadcrumb-separator-margin: 0 @padding-xs;
// Slider
// ---
@slider-margin: 14px 6px 10px;
@slider-rail-background-color: @background-color-base;
@slider-rail-background-color-hover: #e1e1e1;
@slider-track-background-color: @primary-3;
@slider-track-background-color-hover: @primary-4;
@slider-handle-color: @primary-3;
@slider-handle-color-hover: @primary-4;
@slider-handle-color-focus: tint(@primary-color, 20%);
@slider-handle-color-focus-shadow: tint(@primary-color, 50%);
@slider-handle-color-tooltip-open: @primary-color;
@slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: tint(@primary-color, 50%);
@slider-disabled-color: @disabled-color;
@slider-disabled-background-color: @component-background;