drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Slider component

Browse source 
add Slider component
This commit is contained in:
梁灏 2016-11-11 15:08:12 +08:00
parent 3a2c6fc75a
commit 69576f47f4
15 changed files with 473 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

102
src/styles/components/slider.less Normal file
View file

@ -0,0 +1,102 @@
@slider-prefix-cls: ~"@{css-prefix}slider";
.@{slider-prefix-cls} {
&-wrap{
width: 100%;
height: @slider-height;
margin: @slider-margin;
background-color: @border-color-split;
border-radius: @btn-border-radius-small;
vertical-align: middle;
position: relative;
cursor: pointer;
}
&-button-wrap{
.square(@slider-button-wrap-size);
text-align: center;
background-color: transparent;
position: absolute;
top: @slider-button-wrap-offset;
.transform(translateX(-50%));
.@{tooltip-prefix-cls} {
display: block;
.user-select();
}
}
&-button{
width: 12px;
height: 12px;
border: 2px solid @slider-color;
border-radius: 50%;
background-color: #fff;
.transition(all @transition-time linear);
&:hover,
&-dragging
{
border-color: @primary-color;
.transform(scale(1.5));
}
&:hover{
cursor: grab;
}
&-dragging,
&-dragging:hover
{
cursor: grabbing;
}
}
&-bar{
height: @slider-height;
background: @slider-color;
border-radius: @btn-border-radius-small;
position: absolute;
}
}
.@{slider-prefix-cls}-disabled{
cursor: @cursor-disabled;
.@{slider-prefix-cls}-wrap{
background-color: @slider-disabled-color;
cursor: @cursor-disabled;
}
.@{slider-prefix-cls}-bar{
background-color: @slider-disabled-color;
}
.@{slider-prefix-cls}-button{
border-color: @slider-disabled-color;
&:hover,
&-dragging
{
border-color: @slider-disabled-color;
}
&:hover{
cursor: @cursor-disabled;
}
&-dragging,
&-dragging:hover
{
cursor: @cursor-disabled;
}
}
}
.@{slider-prefix-cls}-input{
.@{slider-prefix-cls}-wrap{
width: auto;
margin-right: 100px;
}
.@{input-number-prefix-cls}{
float: right;
margin-top: -14px;
}
}