github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update slider css

pull/4606/head
tangjinzhou 2021-08-28 10:18:41 +08:00
parent db6acc5199
commit 7dbc86ea5c
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@
width: 100%;
height: 4px;
background-color: @slider-rail-background-color;
border-radius: @border-radius-sm;
border-radius: @border-radius-base;
transition: background-color 0.3s;
}
@ -38,9 +38,9 @@
&-handle {
position: absolute;
width: 14px;
height: 14px;
margin-top: -5px;
width: @slider-handle-size;
height: @slider-handle-size;
margin-top: @slider-handle-margin-top;
background-color: @slider-handle-background-color;
border: solid @slider-handle-border-width @slider-handle-color;
border-radius: 50%;
@ -49,6 +49,11 @@
transition: border-color 0.3s, box-shadow 0.6s,
transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
&-dragging&-dragging&-dragging {
border-color: @slider-handle-color-focus;
box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
}
&:focus {
border-color: @slider-handle-color-focus;
outline: none;
@ -87,6 +92,7 @@
text-align: center;
word-break: keep-all;
cursor: pointer;
user-select: none;
&-active {
color: @text-color;
@ -110,6 +116,7 @@
border: 2px solid @slider-dot-border-color;
border-radius: 50%;
cursor: pointer;
&:first-child {
margin-left: -4px;
}
@ -160,7 +167,7 @@
}
.@{slider-prefix-cls}-handle {
margin-top: -6px;
margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
margin-left: -5px;
}
@ -195,3 +202,5 @@
}
}
}
@import './rtl';

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

@ -751,7 +751,7 @@
// Slider
// ---
@slider-margin: 14px 6px 10px;
@slider-margin: 10px 6px 10px;
@slider-rail-background-color: @background-color-base;
@slider-rail-background-color-hover: #e1e1e1;
@slider-track-background-color: @primary-3;
@ -761,8 +761,10 @@
@slider-handle-color: @primary-3;
@slider-handle-color-hover: @primary-4;
@slider-handle-color-focus: tint(@primary-color, 20%);
@slider-handle-color-focus-shadow: fade(@primary-color, 20%);
@slider-handle-color-focus-shadow: fade(@primary-color, 12%);
@slider-handle-color-tooltip-open: @primary-color;
@slider-handle-size: 14px;
@slider-handle-margin-top: -5px;
@slider-handle-shadow: 0;
@slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: tint(@primary-color, 50%);