initial code repo
[stor4nfv.git] / src / ceph / src / pybind / mgr / dashboard / static / AdminLTE-2.3.7 / build / less / miscellaneous.less
1 /*
2  * General: Miscellaneous
3  * ----------------------
4  */
5 // 10px padding and margins
6 .pad {
7   padding: 10px;
8 }
9
10 .margin {
11   margin: 10px;
12 }
13
14 .margin-bottom {
15   margin-bottom: 20px;
16 }
17
18 .margin-bottom-none {
19   margin-bottom: 0;
20 }
21
22 .margin-r-5 {
23   margin-right: 5px;
24 }
25
26 // Display inline
27 .inline {
28   display: inline;
29 }
30
31 // Description Blocks
32 .description-block {
33   display: block;
34   margin: 10px 0;
35   text-align: center;
36   &.margin-bottom {
37     margin-bottom: 25px;
38   }
39   > .description-header {
40     margin: 0;
41     padding: 0;
42     font-weight: 600;
43     font-size: 16px;
44   }
45   > .description-text {
46     text-transform: uppercase;
47   }
48 }
49
50 // Background colors
51 .bg-red,
52 .bg-yellow,
53 .bg-aqua,
54 .bg-blue,
55 .bg-light-blue,
56 .bg-green,
57 .bg-navy,
58 .bg-teal,
59 .bg-olive,
60 .bg-lime,
61 .bg-orange,
62 .bg-fuchsia,
63 .bg-purple,
64 .bg-maroon,
65 .bg-black,
66 .bg-red-active,
67 .bg-yellow-active,
68 .bg-aqua-active,
69 .bg-blue-active,
70 .bg-light-blue-active,
71 .bg-green-active,
72 .bg-navy-active,
73 .bg-teal-active,
74 .bg-olive-active,
75 .bg-lime-active,
76 .bg-orange-active,
77 .bg-fuchsia-active,
78 .bg-purple-active,
79 .bg-maroon-active,
80 .bg-black-active {
81   color: #fff !important;
82 }
83
84 .bg-gray {
85   color: #000;
86   background-color: @gray !important;
87 }
88
89 .bg-gray-light {
90   background-color: #f7f7f7;
91 }
92
93 .bg-black {
94   background-color: @black !important;
95 }
96
97 .bg-red {
98   background-color: @red !important;
99 }
100
101 .bg-yellow {
102   background-color: @yellow !important;
103 }
104
105 .bg-aqua {
106   background-color: @aqua !important;
107 }
108
109 .bg-blue {
110   background-color: @blue !important;
111 }
112
113 .bg-light-blue {
114   background-color: @light-blue !important;
115 }
116
117 .bg-green {
118   background-color: @green !important;
119 }
120
121 .bg-navy {
122   background-color: @navy !important;
123 }
124
125 .bg-teal {
126   background-color: @teal !important;
127 }
128
129 .bg-olive {
130   background-color: @olive !important;
131 }
132
133 .bg-lime {
134   background-color: @lime !important;
135 }
136
137 .bg-orange {
138   background-color: @orange !important;
139 }
140
141 .bg-fuchsia {
142   background-color: @fuchsia !important;
143 }
144
145 .bg-purple {
146   background-color: @purple !important;
147 }
148
149 .bg-maroon {
150   background-color: @maroon !important;
151 }
152
153 //Set of Active Background Colors
154 .bg-gray-active {
155   color: #000;
156   background-color: darken(@gray, 10%) !important;
157 }
158
159 .bg-black-active {
160   background-color: darken(@black, 10%) !important;
161 }
162
163 .bg-red-active {
164   background-color: darken(@red , 6%) !important;
165 }
166
167 .bg-yellow-active {
168   background-color: darken(@yellow , 6%) !important;
169 }
170
171 .bg-aqua-active {
172   background-color: darken(@aqua , 6%) !important;
173 }
174
175 .bg-blue-active {
176   background-color: darken(@blue , 10%) !important;
177 }
178
179 .bg-light-blue-active {
180   background-color: darken(@light-blue , 6%) !important;
181 }
182
183 .bg-green-active {
184   background-color: darken(@green , 5%) !important;
185 }
186
187 .bg-navy-active {
188   background-color: darken(@navy , 2%) !important;
189 }
190
191 .bg-teal-active {
192   background-color: darken(@teal , 5%) !important;
193 }
194
195 .bg-olive-active {
196   background-color: darken(@olive , 5%) !important;
197 }
198
199 .bg-lime-active {
200   background-color: darken(@lime , 5%) !important;
201 }
202
203 .bg-orange-active {
204   background-color: darken(@orange , 5%) !important;
205 }
206
207 .bg-fuchsia-active {
208   background-color: darken(@fuchsia , 5%) !important;
209 }
210
211 .bg-purple-active {
212   background-color: darken(@purple , 5%) !important;
213 }
214
215 .bg-maroon-active {
216   background-color: darken(@maroon , 3%) !important;
217 }
218
219 //Disabled!
220 [class^="bg-"].disabled {
221   .opacity(.65);
222 }
223
224 // Text colors
225 .text-red {
226   color: @red !important;
227 }
228
229 .text-yellow {
230   color: @yellow !important;
231 }
232
233 .text-aqua {
234   color: @aqua !important;
235 }
236
237 .text-blue {
238   color: @blue !important;
239 }
240
241 .text-black {
242   color: @black !important;
243 }
244
245 .text-light-blue {
246   color: @light-blue !important;
247 }
248
249 .text-green {
250   color: @green !important;
251 }
252
253 .text-gray {
254   color: @gray !important;
255 }
256
257 .text-navy {
258   color: @navy !important;
259 }
260
261 .text-teal {
262   color: @teal !important;
263 }
264
265 .text-olive {
266   color: @olive !important;
267 }
268
269 .text-lime {
270   color: @lime !important;
271 }
272
273 .text-orange {
274   color: @orange !important;
275 }
276
277 .text-fuchsia {
278   color: @fuchsia !important;
279 }
280
281 .text-purple {
282   color: @purple !important;
283 }
284
285 .text-maroon {
286   color: @maroon !important;
287 }
288
289 .link-muted {
290   color: darken(@gray, 30%);
291   &:hover,
292   &:focus {
293     color: darken(@gray, 40%);
294   }
295 }
296
297 .link-black {
298   color: #666;
299   &:hover,
300   &:focus {
301     color: #999;
302   }
303 }
304
305 // Hide elements by display none only
306 .hide {
307   display: none !important;
308 }
309
310 // Remove borders
311 .no-border {
312   border: 0 !important;
313 }
314
315 // Remove padding
316 .no-padding {
317   padding: 0 !important;
318 }
319
320 // Remove margins
321 .no-margin {
322   margin: 0 !important;
323 }
324
325 // Remove box shadow
326 .no-shadow {
327   box-shadow: none !important;
328 }
329
330 // Unstyled List
331 .list-unstyled {
332   list-style: none;
333   margin: 0;
334   padding: 0;
335 }
336
337 .list-group-unbordered {
338   > .list-group-item {
339     border-left: 0;
340     border-right: 0;
341     border-radius: 0;
342     padding-left: 0;
343     padding-right: 0;
344   }
345 }
346
347 // Remove border radius
348 .flat {
349   .border-radius(0) !important;
350 }
351
352 .text-bold {
353   &, &.table td, &.table th {
354     font-weight: 700;
355   }
356 }
357
358 .text-sm {
359   font-size: 12px;
360 }
361
362 // _fix for sparkline tooltip
363 .jqstooltip {
364   padding: 5px !important;
365   width: auto !important;
366   height: auto !important;
367 }
368
369 // Gradient Background colors
370 .bg-teal-gradient {
371   .gradient(@teal; @teal; lighten(@teal, 16%)) !important;
372   color: #fff;
373 }
374
375 .bg-light-blue-gradient {
376   .gradient(@light-blue; @light-blue; lighten(@light-blue, 12%)) !important;
377   color: #fff;
378 }
379
380 .bg-blue-gradient {
381   .gradient(@blue; @blue; lighten(@blue, 7%)) !important;
382   color: #fff;
383 }
384
385 .bg-aqua-gradient {
386   .gradient(@aqua; @aqua; lighten(@aqua, 7%)) !important;
387   color: #fff;
388 }
389
390 .bg-yellow-gradient {
391   .gradient(@yellow; @yellow; lighten(@yellow, 16%)) !important;
392   color: #fff;
393 }
394
395 .bg-purple-gradient {
396   .gradient(@purple; @purple; lighten(@purple, 16%)) !important;
397   color: #fff;
398 }
399
400 .bg-green-gradient {
401   .gradient(@green; @green; lighten(@green, 7%)) !important;
402   color: #fff;
403 }
404
405 .bg-red-gradient {
406   .gradient(@red; @red; lighten(@red, 10%)) !important;
407   color: #fff;
408 }
409
410 .bg-black-gradient {
411   .gradient(@black; @black; lighten(@black, 10%)) !important;
412   color: #fff;
413 }
414
415 .bg-maroon-gradient {
416   .gradient(@maroon; @maroon; lighten(@maroon, 10%)) !important;
417   color: #fff;
418 }
419
420 //Description Block Extension
421 .description-block {
422   .description-icon {
423     font-size: 16px;
424   }
425 }
426
427 //Remove top padding
428 .no-pad-top {
429   padding-top: 0;
430 }
431
432 //Make position static
433 .position-static {
434   position: static !important;
435 }
436
437 //List utility classes
438 .list-header {
439   font-size: 15px;
440   padding: 10px 4px;
441   font-weight: bold;
442   color: #666;
443 }
444
445 .list-seperator {
446   height: 1px;
447   background: @box-border-color;
448   margin: 15px 0 9px 0;
449 }
450
451 .list-link {
452   > a {
453     padding: 4px;
454     color: #777;
455     &:hover {
456       color: #222;
457     }
458   }
459 }
460
461 //Light font weight
462 .font-light {
463   font-weight: 300;
464 }
465
466 //User block
467 .user-block {
468   .clearfix();
469   img {
470     width: 40px;
471     height: 40px;
472     float: left;
473   }
474   .username,
475   .description,
476   .comment {
477     display: block;
478     margin-left: 50px;
479   }
480   .username {
481     font-size: 16px;
482     font-weight: 600;
483   }
484   .description {
485     color: #999;
486     font-size: 13px;
487   }
488   &.user-block-sm {
489     img {
490       &:extend(.img-sm);
491     }
492     .username,
493     .description,
494     .comment {
495       margin-left: 40px;
496     }
497     .username {
498       font-size: 14px;
499     }
500   }
501 }
502
503 //Image sizes
504 .img-sm,
505 .img-md,
506 .img-lg {
507   float: left;
508 }
509
510 .img-sm {
511   width: 30px !important;
512   height: 30px !important;
513   + .img-push {
514     margin-left: 40px;
515   }
516 }
517
518 .img-md {
519   width: 60px;
520   height: 60px;
521   + .img-push {
522     margin-left: 70px;
523   }
524 }
525
526 .img-lg {
527   width: 100px;
528   height: 100px;
529   + .img-push {
530     margin-left: 110px;
531   }
532 }
533
534 // Image bordered
535 .img-bordered {
536   border: 3px solid @gray;
537   padding: 3px;
538 }
539
540 .img-bordered-sm {
541   border: 2px solid @gray;
542   padding: 2px;
543 }
544
545 //General attachemnt block
546 .attachment-block {
547   border: 1px solid @box-border-color;
548   padding: 5px;
549   margin-bottom: 10px;
550   background: #f7f7f7;
551
552   .attachment-img {
553     max-width: 100px;
554     max-height: 100px;
555     height: auto;
556     float: left;
557   }
558   .attachment-pushed {
559     margin-left: 110px;
560   }
561   .attachment-heading {
562     margin: 0;
563   }
564   .attachment-text {
565     color: #555;
566   }
567 }
568
569 .connectedSortable {
570   min-height: 100px;
571 }
572
573 .ui-helper-hidden-accessible {
574   border: 0;
575   clip: rect(0 0 0 0);
576   height: 1px;
577   margin: -1px;
578   overflow: hidden;
579   padding: 0;
580   position: absolute;
581   width: 1px;
582 }
583
584 .sort-highlight {
585   background: #f4f4f4;
586   border: 1px dashed #ddd;
587   margin-bottom: 10px;
588 }
589
590 .full-opacity-hover {
591   .opacity(.65);
592   &:hover {
593     .opacity(1);
594   }
595 }
596
597 // Charts
598 .chart {
599   position: relative;
600   overflow: hidden;
601   width: 100%;
602   svg,
603   canvas {
604     width: 100% !important;
605   }
606 }