mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

update slider style

Browse Source
This commit is contained in:
simaQ 2015-07-14 12:07:04 +08:00
parent a4795453b8
commit 4807c3a0ad
1 changed files with 57 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
style/components/slider.less
View File

@ -1,10 +1,17 @@
@sliderClass: ~"@{css-prefix}slider";
// color
// slider color
@disabledColor: #ccc;
// tooltip
@tooltip-color: #fff;
@tooltip-bg: tint(#666, 4%);
@tooltip-arrow-width: 4px;
@tooltip-distance: @tooltip-arrow-width+4;
@tooltip-arrow-color: @tooltip-bg;
.@{sliderClass} {
position: relative;
margin: 12px 0;
height: 4px;
width: 100%;
border-radius: @border-radius-base;
@ -44,7 +51,7 @@
&-mark {
position: absolute;
top: 8px;
top: 10px;
left: 0px;
width: 100%;
font-size: 12px;
@ -95,7 +102,7 @@
}
&-disabled {
background-color: @disabledColor;
background-color: #e9e9e9;
.@{sliderClass}-track {
background-color: @disabledColor;
@ -111,4 +118,51 @@
cursor: not-allowed!important;
}
}
// slider tooltip style
&-tooltip {
position: absolute;
left: -9999px;
top: -9999px;
z-index: 4;
visibility: visible;
&-hidden {
display: none;
}
&-placement-top {
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
}
&-inner {
padding: 6px 0;
width: 24px;
height: 24px;
font-size: @font-size-base;
line-height: 1;
color: @tooltip-color;
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
box-shadow: 0 0 4px #d9d9d9;
}
&-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
&-placement-top &-arrow {
bottom: @tooltip-distance - @tooltip-arrow-width;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
}
}