pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
fd-slider.less
(6792B)
1 /* The styles given to the associated form element in order to hide it */
2 .fd-form-element-hidden {
3 display: none;
4 }
5 /* Horizontal Outer wrapper - all other DOM elements added as children to this top level wrapper */
6 .fd-slider {
7 width: 100%;
8 /* The height of the slider handle */
9 height: 20px;
10 margin: 0;
11 }
12 /* Vertical Outer wrapper - all other DOM elements added as children to this top level wrapper */
13 .fd-slider-vertical {
14 /* The width of the slider handle */
15 width: 20px;
16 /* Fill the available space */
17 height: 100%;
18 /* Set a 10 pixel right and bottom margin */
19 margin: 0 10px 10px 0;
20 /* You may wish to float the vertical sliders left or display:inline-block */
21 /* float:left; */
22 }
23 /* Shared rules - both horizontal & vertical sliders */
24 .fd-slider, .fd-slider-vertical {
25 /* display:block required as the wrapper element is a span */
26 display: block;
27 /* This lets us absolutely position the drag handle */
28 position: relative;
29 text-decoration: none;
30 border: 0 none;
31 -moz-user-select: none;
32 -khtml-user-select: none;
33 -webkit-touch-callout: none;
34 user-select: none;
35 }
36 .fd-slider-inner {
37 /* Used by IE for the onfocus blur effect */
38 display: none;
39 }
40
41 /* The inner track bar */
42 .fd-slider-bar {
43 position: absolute;
44 display: block;
45 z-index: 2;
46 height: 6px;
47 width: 100%;
48 border: 1px solid #bbb;
49 border-bottom: 1px solid #fff;
50 border-right: 1px solid #fff;
51 margin: 0;
52 padding: 0;
53 overflow: hidden;
54 line-height: 4px;
55 top: 8px;
56 -moz-border-radius: 4px;
57 -webkit-border-radius: 4px;
58 border-radius: 4px;
59 -moz-background-clip: padding;
60 -webkit-background-clip: padding-box;
61 background-clip: padding-box;
62 background-color: #333;
63 }
64 /* The animated range bar */
65 .fd-slider-range {
66 position: absolute;
67 display: block;
68 z-index: 3;
69 height: 6px;
70 margin: 0;
71 padding: 0 2px 0 0;
72 overflow: hidden;
73 top: 9px;
74 -moz-border-radius: 2px;
75 -webkit-border-radius: 2px;
76 border-radius: 2px;
77 -moz-background-clip: padding;
78 -webkit-background-clip: padding-box;
79 background-clip: padding-box;
80 background-color: #eee;
81 }
82 /* The drag handle */
83 .fd-slider-handle {
84 position: absolute;
85 display: block;
86 padding: 0;
87 border: 0 none;
88 margin: 0 0 0 1px;
89 z-index: 3;
90 top: 5px;
91 left: 0;
92 width: 12px;
93 height: 12px;
94 line-height: 1px !important;
95 outline: 0 none;
96 background: #eee;
97 border: 1px solid #aaa;
98 border-radius: 12px;
99 -webkit-user-select: none;
100 -webkit-touch-callout: none;
101 -moz-user-select: none;
102 -moz-user-focus: none;
103 -moz-outline: 0 none;
104 user-select: none;
105 }
106 /* Focus styles */
107 .fd-slider-handle:focus {
108 outline: 0 none;
109 border: 0 none;
110 -moz-user-focus: normal;
111 }
112 button.fd-slider-handle:focus::-moz-focus-inner {
113 border-color: transparent;
114 }
115
116 body.fd-slider-drag-vertical, body.fd-slider-drag-vertical * {
117 /* Stop text selection */
118 -moz-user-select: none;
119 -webkit-user-select: none;
120 user-select: none;
121 }
122 body.fd-slider-drag-horizontal, body.fd-slider-drag-horizontal * {
123 /* Stop text selection */
124 -moz-user-select: none;
125 -webkit-user-select: none;
126 user-select: none;
127 }
128
129 /*
130 Sample tooltip code. Only works on grade A browsers (so no IE6,7 or 8).
131
132 See: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ for full info on
133 how to style generated content & the associated pitfalls
134
135 This code to be taken as experimental & untested - use at your discretion
136
137 If showing the tooltip above the sider handle you are relegated to showing
138 single line tooltips due to styling constraints!
139 */
140
141 .fd-slider-handle:before, .fd-slider-handle:after {
142 /* Remove from screen */
143 opacity: 0;
144 /* The following rules are not really needed as no browser yet supports CSS transitions
145 on generated content but I'll leave it in for the day when they do! */
146
147 /* Firefox */
148 -moz-transition-property: opacity;
149 -moz-transition-duration: 1s;
150 -moz-transition-delay: 1s;
151 /* WebKit */
152 -webkit-transition-property: opacity;
153 -webkit-transition-duration: 1s;
154 -webkit-transition-delay: 1s;
155 /* Opera */
156 -o-transition-property: opacity;
157 -o-transition-duration: 1s;
158 -o-transition-delay: 1s;
159 /* Standard */
160 transition-property: opacity;
161 transition-duration: 1s;
162 transition-delay: 1s;
163 }
164 /*
165 The tooltip body - as we position it above the slider and position the tooltip arrow
166 below it, we need to know the height of the body. This means that multi-line tooltips
167 are not supported.
168
169 To support multi-line tooltips, you will need to position the tooltip below the slider
170 and the tooltip pointer above the tooltip body. Additionally, you will have to set the
171 tooltip bodies "height" to auto
172 */
173 .fd-slider-focused .fd-slider-handle:before, .fd-slider-hover .fd-slider-handle:before, .fd-slider-active .fd-slider-handle:before {
174 display: block;
175 position: absolute;
176 top: -21px;
177 left: -8px;
178 margin: 0;
179 width: 20px;
180 padding: 3px;
181 height: 14px;
182 line-height: 12px;
183 text-align: center;
184 font-size: 10px;
185 font-weight: bold;
186 color: #fff;
187 text-shadow: 1px 1px 1px #1a3a95;
188 background: #2f6ee0;
189 z-index: 1;
190 /* Use the ARIA valuetext property, set by the script, to generate the tooltip content */
191 content: attr(aria-valuetext);
192 /* Border radius and box shadow */
193 -moz-border-radius: 3px;
194 -webkit-border-radius: 3px;
195 border-radius: 3px;
196 -moz-background-clip: padding;
197 -webkit-background-clip: padding-box;
198 background-clip: padding-box;
199 -moz-box-shadow: 0 0 4px #aaa;
200 -webkit-box-shadow: 0 0 4px #aaa;
201 box-shadow: 0px 0px 4px #999;
202 /* Change opacity for transition */
203 opacity: 1;
204 }
205 /* The tooltip pointer */
206 .fd-slider-focused .fd-slider-handle:after, .fd-slider-hover .fd-slider-handle:after, .fd-slider-active .fd-slider-handle:after {
207 outline: none;
208 content: "";
209 display: block;
210 position: absolute;
211 top: -9px;
212 left: 50%;
213 margin: 0 0 0 -5px;
214 background: #2f6ee0;
215 z-index: 2;
216 width: 10px;
217 height: 10px;
218 overflow: hidden;
219 /* Rotate element by 45 degress to get the "\/" pointer effect */
220 -webkit-transform: rotate(45deg);
221 -moz-transform: rotate(45deg);
222 -o-transform: rotate(45deg);
223 /* Add a box shadow */
224 -moz-box-shadow: 0 0 4px #aaa;
225 -webkit-box-shadow: 0 0 4px #aaa;
226 box-shadow: 0 0 4px #aaa;
227 /* Clip */
228 clip: rect(4px, 14px, 14px, 4px);
229 /* Change opacity for transition */
230 opacity: 1;
231 }
232 /* Remove completely for IE */
233 .oldie .fd-slider-handle:before, .oldie .fd-slider-handle:after {
234 display: none;
235 }