pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
component-jqueryui.less
(9292B)
1 /*
2 * JQUI STUFF
3 */
4
5 /* Overlay */
6
7 .ui-widget-overlay {
8 background-image:none;
9 background: #AAA;
10 height: 200%;
11 z-index: 9999;
12 position:fixed;
13 top:0px;
14 left:0px;
15 }
16
17 /* Slider */
18
19 .slider {
20 margin-top:0px;
21 margin-bottom:30px;
22 }
23
24 .slider.slider-vertical {
25 margin-bottom:0px;
26 margin-right:5px;
27 }
28
29
30 /* menu */
31
32 .ui-menu {
33 width: 155px;
34 padding: 2px;
35 -webkit-box-shadow: 0 2px 4px rgba(30, 30, 100, 0.25);
36 -moz-box-shadow: 0 2px 4px rgba(30,30,100,0.25);
37 box-shadow: 0 2px 4px rgba(30, 30, 100, 0.25);
38 background: @white;
39 border: 1px solid rgba(red(@black), green(@black), blue(@black), 0.2);
40 z-index: 1;
41 }
42
43 .ui-menu .ui-state-disabled {
44 margin: .4em 0 .2em !important;
45 background: none !important;
46 color: #999 !important;
47 font-weight:normal !important;
48 cursor: default;
49 }
50
51 .ui-icon-carat-1-e:before {
52 content: "\f105";
53 font-family: FontAwesome;
54 font-size: @font-size-base + 1px;
55 display: inline;
56 }
57
58 .ui-menu .ui-menu-item a .ui-menu-icon {
59 width: auto;
60 height:auto;
61 top: 0px;
62 left: auto;
63 right: auto;
64 bottom: auto;
65 text-indent: 0px;
66 }
67
68 /* tabs */
69
70 .ui-tabs .ui-tabs-nav li a {
71 border-radius:0px;
72 -moz-border-radius: 0px;
73 background-color: #F5F5F5;
74 border: 1px solid #F5F5F5;
75 border-bottom: 1px solid @nav-tabs-border-color;
76 color: #838383;
77 }
78
79 .ui-tabs .ui-tabs-nav li {
80 margin-right:3px;
81 }
82
83 .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
84 font-weight:bold;
85 border-top-width: 0px !important;
86 margin-top: 1px !important;
87 -webkit-box-shadow: 0 -2px 0 @blue;
88 -moz-box-shadow: 0 -2px 0 @blue;
89 box-shadow: 0 -2px 0 @blue;
90 }
91
92 .ui-tabs .ui-tabs-panel {
93 border: 1px solid @nav-tabs-border-color;
94 margin: 0;
95 padding: 10px 13px;
96 border-top: none;
97 }
98
99 .ui-tabs .ui-tabs-nav {
100 margin-bottom:0;
101 }
102
103 /* accordions */
104 .ui-accordion .ui-accordion-content {
105 padding:0;
106 }
107
108 .ui-accordion .ui-accordion-header {
109 background-color: lighten( @gray-lightest, 3%);
110 font-size: @font-size-base + 2px;
111 padding: 10px 15px 10px 36px !important;
112 }
113
114 .ui-accordion .ui-accordion-header, .ui-accordion .ui-accordion-content {
115 border-radius:0px;
116 -moz-border-radius:0px;
117 -webkit-border-radius:0px;
118 }
119 .ui-accordion .ui-accordion-content {
120 padding: 15px;
121 }
122 .ui-accordion-header-active + .ui-accordion-content {
123 border-top: 1px solid @nav-tabs-border-color;
124 }
125
126 .ui-accordion .ui-accordion-header {
127 margin-top:-2px;
128 }
129
130 .ui-accordion .ui-accordion-header, .ui-accordion-content {
131 border-color:darken(@gray-lighter, 7%) !important;
132 }
133
134 .ui-accordion-header-icon {
135 text-indent: 0px !important;
136 background-image:none !important;
137 text-align:center;
138 line-height:normal;
139 left: 12px !important;
140 margin-top: -6px !important;
141 font-size:14px !important;
142 }
143
144
145 /*
146 * Calendar
147 */
148 .ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev {
149 text-align:center;
150 margin-top:2px;
151 }.ui-datepicker-next >:first-child, .ui-datepicker-prev >:first-child {
152 text-indent:0px !important;
153 }
154
155
156 /*
157 * JS SLIDER
158 * Copied from: js/plugin/noUiSlider/jquery.nouislider.css
159 */
160
161
162 /* General CSS resets;
163 * The target itself is not affected, allowing
164 * the remainder of the document to use an
165 * alternate box-sizing model;
166 * Support for box-sizing is wide spread:
167 * http://caniuse.com/#search=box-sizing
168 */
169 .noUi-target * {
170 -webkit-box-sizing: border-box;
171 -moz-box-sizing: border-box;
172 box-sizing: border-box;
173 -webkit-touch-callout: none;
174 -ms-touch-action: none;
175 -webkit-user-select: none;
176 -moz-user-select: none;
177 -ms-user-select: none;
178 cursor: default;
179 }
180
181 /* Main slider bar;
182 * Standard styles no longer incorrectly force a
183 * width or height on the slider.
184 */
185 .noUi-base {
186 width: 100%;
187 height: 14px;
188 position: relative;
189 max-width: 100%;
190 max-height: 100%;
191 border: 1px solid #bfbfbf;
192 z-index: 1;
193 }
194
195 .noUi-origin-lower {
196 background: lighten(@slider-bar-color, 20%);
197 }
198
199 /* Handles + active state;
200 * The :after pseudo-element wont inherit
201 * box-sizing, so it needs to applied manually.
202 */
203 .noUi-handle {
204 background: @handle-bg-color;
205 height: 30px;
206 width: 16px;
207 border: 1px solid @white;
208 margin: -8px 0 0 -8px;
209 cursor: default;
210 }
211 .noUi-handle:hover {
212 background: darken(@handle-bg-color, 10%);
213 }
214 .noUi-active {
215 cursor:default;
216 box-shadow: rgba(red(@black), green(@black), blue(@black), 0.1) 1px 1px 1px 0px;
217 background: #686868;
218 height: 32px;
219 width: 18px;
220 margin: -9px 0 0 -8px;
221 border:none;
222 }
223
224
225 .noUi-active:after {
226 -webkit-box-sizing: border-box;
227 -moz-box-sizing: border-box;
228 box-sizing: border-box;
229 content: "";
230 display: block;
231 height: 100%;
232 border: 1px solid @nav-tabs-border-color;
233 }
234
235 /* Styling-only classes;
236 * Structured to prevent double declarations
237 * for various states of the slider.
238 */
239 .noUi-connect {
240 background: @slider-bar-color;
241 }
242 .noUi-background {
243 background: @gray-lighter;
244 border:none;
245
246 }
247
248 /* Functional styles for handle positioning;
249 * Note that the origins have z-index 0, the base has
250 * z-index 1; This fixes a bug where borders become invisible.
251 */
252 .noUi-origin {
253 position: absolute;
254 right: 0;
255 top: 0;
256 bottom: 0;
257 z-index: 0;
258 }
259 .noUi-origin-upper {
260 background: inherit !important;
261 }
262 .noUi-z-index {
263 z-index: 10;
264 }
265
266 /* Adaptations for the vertical slider;
267 * Some standard styles have been extended to keep
268 * exceptions for the vertical slider as minimal as possible.
269 */
270 .noUi-vertical {
271 width: 10px;
272 height: 100%;
273 }
274 .noUi-vertical .noUi-origin {
275 bottom: 0;
276 left: 0;
277 }
278 .noUi-vertical .noUi-handle {
279 margin: -8px 0 0 -3px;
280 }
281
282 /* Various alternate slider states;
283 * Support for transition is widely available,
284 * Only IE7, IE8 and IE9 will ignore these rules.
285 * Since this is merely a progressive enhancement,
286 * this is no problem at all.
287 * http://caniuse.com/#search=transition
288 */
289 .noUi-target[disabled] .noUi-base {
290 background: @gray-light;
291 }
292 .noUi-target[disabled] .noUi-connect {
293 background: #BBB;
294 }
295 .noUi-state-tap .noUi-origin {
296 -webkit-transition: left 0.3s, top 0.3s;
297 transition: left 0.3s, top 0.3s;
298 }
299
300 /*
301 * JQUI SPINNERS
302 */
303
304 .ui-spinner-input {
305 margin: 0 !important;
306 height: 30px;
307 padding: 6px 24px 6px 12px;
308 }
309
310 .ui-spinner-input.spinner-left {
311 padding:6px 12px 6px 24px;
312 }
313
314 .ui-spinner {
315 width:100%;
316 }
317
318 .ui-spinner-input.spinner-left + .ui-spinner-button, .ui-spinner-input.spinner-left + .ui-spinner-button + .ui-spinner-button{
319 right:auto;
320 left:0px;
321 }
322
323 .ui-spinner-up, .ui-spinner-down {
324 background: @brand-success;
325 border-radius: 0px;
326 }
327 .ui-spinner-up:hover, .ui-spinner-up:active, .ui-spinner-up:focus {
328 background: darken(@brand-success, 10%);
329 }
330 .ui-spinner-down:hover, .ui-spinner-down:active, .ui-spinner-down:focus {
331 background: darken(@brand-danger, 10%);
332 }
333
334 .ui-spinner-down {
335 background: lighten(@brand-danger, 5%);
336 }
337
338 .ui-spinner-up:before, .ui-spinner-down:before {
339 display: inline-block;
340 font-family: FontAwesome;
341 font-style: normal;
342 font-weight: normal;
343 line-height: 1;
344 -webkit-font-smoothing: antialiased;
345 -moz-osx-font-smoothing: grayscale;
346
347 content: "\f067";
348 color:@white;
349 font-size: @font-size-base + 1px;
350 margin-top: 1px;
351
352 }
353 .ui-spinner-down:before {
354 content: "\f068";
355 }
356
357 .ui-spinner-up >:first-child, .ui-spinner-down >:first-child {
358 display:none;
359 }
360
361
362 .ui-spinner-button {
363 width:19px;
364 }
365
366 .ui-widget-content .ui-icon {
367 background:none !important;
368 }
369
370 /* spinner both */
371
372 .ui-spinner-input.spinner-both {
373 padding:6px 30px;
374 }
375
376 .ui-spinner-input.spinner-both + .ui-spinner-button + .ui-spinner-button {
377 left:0px;
378 right:auto;
379 }
380 .ui-spinner-input.spinner-both + .ui-spinner-button,
381 .ui-spinner-input.spinner-both + .ui-spinner-button + .ui-spinner-button {
382 height: 30px;
383 width: 25px;
384 }
385
386 .ui-spinner-input.spinner-both + .ui-spinner-up:before, .ui-spinner-input.spinner-both + .ui-spinner-up + .ui-spinner-down:before {
387 margin-top:8px;
388 }
389
390 /*
391 * JQUI ADJUSTMENT
392 */
393
394 .ui-dialog {
395 -webkit-box-shadow: 0 5px 15px rgba(red(@black), green(@black), blue(@black), 0.5);
396 box-shadow: 0 5px 15px rgba(red(@black), green(@black), blue(@black), 0.5);
397
398 border: 1px solid @gray-light;
399 border: 1px solid rgba(red(@black), green(@black), blue(@black), 0.2);
400 }
401
402 .widget-header >:first-child {
403 margin: 13px 0;
404 }
405
406 .ui-widget-overlay {
407 z-index: 999;
408 }
409
410 .ui-dialog .ui-dialog-titlebar {
411 padding: 0 10px;
412 background:@white;
413 border-bottom-color:@gray-lighter;
414 }
415
416 .ui-dialog .ui-dialog-title {
417 margin:0;
418 }
419
420 .ui-dialog .ui-dialog-titlebar-close {
421 margin-top: -16px;
422 margin-right: 4px;
423 }
424
425 .ui-dialog-titlebar-close:before {
426 content: "\f00d";
427 font-family: FontAwesome;
428 font-style: normal;
429 font-weight: normal;
430 line-height: 1;
431 -webkit-font-smoothing: antialiased;
432 -moz-osx-font-smoothing: grayscale;
433 font-size: 13px;
434 }
435
436
437 .ui-dialog .ui-dialog-buttonpane button {
438 margin: 0 .4em 0 0;
439 }
440
441 .ui-dialog .ui-dialog-buttonpane {
442 margin-top: 13px;
443 padding: 19px 15px 20px;
444 text-align: right;
445 border-top: 1px solid @gray-lighter;
446 }