pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
bootstrap-slider.less
(3994B)
1 /*!
2 * Slider for Bootstrap
3 *
4 * Copyright 2012 Stefan Petre
5 * Licensed under the Apache License v2.0
6 * http://www.apache.org/licenses/LICENSE-2.0
7 *
8 */
9 .slider {
10 display: inline-block;
11 vertical-align: middle;
12 position: relative;
13 }
14
15 .slider.slider-horizontal {
16 width: 100% !important;
17 height: 20px;
18 }
19 .slider.slider-horizontal .slider-track {
20 height: 10px;
21 width: 100%;
22 margin-top: -5px;
23 top: 50%;
24 left: 0;
25 }
26 .slider.slider-horizontal .slider-selection {
27 height: 100%;
28 top: 0;
29 bottom: 0;
30 }
31 .slider.slider-horizontal .slider-handle {
32 margin-left: -10px;
33 margin-top: -5px;
34 }
35 .slider.slider-horizontal .slider-handle.triangle {
36 width: 20px;
37 height: 20px;
38 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
39 -webkit-transform: rotate(0deg);
40 -moz-transform: rotate(0deg);
41 -ms-transform: rotate(0deg);
42 -o-transform: rotate(0deg);
43 transform: rotate(0deg);
44 border:none;
45 line-height:21px;
46 color:#797777;
47 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
48 }.slider.slider-horizontal .slider-handle.triangle:before {
49 content:"\f0da";
50 font-size:34px;
51 }
52 .slider-horizontal .slider-selection + .slider-handle.triangle + .slider-handle.triangle:before {
53 content:"\f0d9";
54 }
55
56 .slider.slider-vertical {
57 height: 210px;
58 width: 20px;
59 }
60 .slider.slider-vertical .slider-track {
61 width: 10px;
62 height: 100%;
63 margin-left: -5px;
64 left: 50%;
65 top: 0;
66 }
67 .slider.slider-vertical .slider-selection {
68 width: 100%;
69 left: 0;
70 top: 0;
71 bottom: 0;
72 }
73 .slider.slider-vertical .slider-handle {
74 margin-left: -5px;
75 margin-top: -10px;
76 }
77 .slider.slider-vertical .slider-handle.triangle {
78 width: 20px;
79 height: 20px;
80 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
81 -webkit-transform: rotate(0deg);
82 -moz-transform: rotate(0deg);
83 -ms-transform: rotate(0deg);
84 -o-transform: rotate(0deg);
85 transform: rotate(0deg);
86 border:none;
87 line-height:21px;
88 color:#797777;
89 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
90 } .slider.slider-vertical .slider-handle.triangle:before {
91 content: "\f0d7";
92 font-size:32px;
93 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
94 }
95 .slider.slider-vertical .slider-selection + .slider-handle.triangle + .slider-handle.triangle:before {
96 content:"\f0d8";
97 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
98
99 }
100
101 .slider input {
102 display: none;
103 }
104 .slider .tooltip-inner {
105 white-space: nowrap;
106 }
107 .slider-track {
108 position: absolute;
109 cursor: pointer;
110 background: #E5E5E5;
111 }
112 .slider-selection {
113 position: absolute;
114 background: @brand-primary;
115 }
116 .slider-handle {
117 position: absolute;
118 width: 20px;
119 height: 20px;
120 border: 1px solid #FFF;
121 background: #858585;
122
123 display: inline-block;
124 font-family: FontAwesome;
125 font-style: normal;
126 font-weight: normal;
127 line-height: 1;
128 -webkit-font-smoothing: antialiased;
129 -moz-osx-font-smoothing: grayscale;
130 text-align: center;
131 line-height: 18px;
132 font-size: 10px;
133 color: #BDBDBD;
134 text-shadow: 0 1px 0 rgba(77, 77, 77, 0.5);
135
136 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
137 -webkit-transform: rotate(90deg);
138 -moz-transform: rotate(90deg);
139 -ms-transform: rotate(90deg);
140 -o-transform: rotate(90deg);
141 transform: rotate(90deg);
142 }
143 .slider-handle:before {
144 content: "\f0c9";
145
146
147 }
148
149 .slider-handle.round {
150 -webkit-border-radius: 20px;
151 -moz-border-radius: 20px;
152 border-radius: 20px;
153 width: 20px;
154 height: 20px;
155 }
156 .slider-handle.triangle {
157 background: transparent none;
158 }
159
160 /*
161 * Slider colors
162 */
163 .slider-primary + .slider-track > .slider-selection {
164
165 }
166
167 .slider-danger + .slider-track > .slider-selection {
168 background: @brand-danger;
169 }
170
171 .slider-warning + .slider-track > .slider-selection {
172 background: @brand-warning;
173 }
174
175 .slider-info + .slider-track > .slider-selection {
176 background: @brand-info;
177 }
178
179 .slider-success + .slider-track > .slider-selection {
180 background: @brand-success;
181 }
182
183