fd-slider.css
3.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/* The styles given to the associated form element in order to hide it */
.fd-form-element-hidden, input.fd-form-element-hidden
{
display:none;
}
/* Horizontal Outer wrapper - all other DOM elements added as children to this top level wrapper */
.fd-slider
{
width:100%;
/* The height of the slider handle */
height:20px;
margin:0;
}
/* Vertical Outer wrapper - all other DOM elements added as children to this top level wrapper */
.fd-slider-vertical
{
/* The width of the slider handle */
width:20px;
/* Fill the available space */
height:100%;
/* Set a 10 pixel right and bottom margin */
margin:0 10px 10px 0;
/* You may wish to float the vertical sliders left or display:inline-block */
/* float:left; */
}
/* Shared rules - both horizontal & vertical sliders */
.fd-slider,
.fd-slider-vertical
{
/* display:block required as the wrapper element is a span */
display:block;
/* This lets us absolutely position the drag handle */
position:relative;
text-decoration:none;
border:0 none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-touch-callout:none;
user-select:none;
}
.fd-slider-inner
{
/* Used by IE for the onfocus blur effect */
display:none;
}
/* The inner track bar */
.fd-slider-bar
{
position:absolute;
display:block;
z-index:2;
height:6px;
width:100%;
border:1px solid #bbb;
border-bottom:1px solid #fff;
border-right:1px solid #fff;
margin:0;
padding:0;
overflow:hidden;
line-height:4px;
top:8px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #333;
}
/* The animated range bar */
.fd-slider-range
{
position:absolute;
display:block;
z-index:3;
height:6px;
margin:0;
padding:0 2px 0 0;
overflow:hidden;
top:9px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #eee;
}
/* The drag handle */
.fd-slider-handle
{
position:absolute;
display:block;
padding:0;
border:0 none;
margin:0 0 0 1px;
z-index:3;
top:5px;
left:0;
width:12px;
height:12px;
line-height: 1px !important;
outline:0 none;
background: #eee;
border: 1px solid #aaa;
border-radius: 12px;
-webkit-user-select: none;
-webkit-touch-callout:none;
-moz-user-select:none;
-moz-user-focus:none;
-moz-outline:0 none;
user-select:none;
}
/* Focus styles */
.fd-slider-handle:focus
{
outline:0 none;
border:0 none;
-moz-user-focus:normal;
}
button.fd-slider-handle:focus::-moz-focus-inner
{
border-color: transparent;
}
body.fd-slider-drag-vertical,
body.fd-slider-drag-vertical *
{
/* Stop text selection */
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}
body.fd-slider-drag-horizontal,
body.fd-slider-drag-horizontal *
{
/* Stop text selection */
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
}