Mercurial > hg > orthanc-stone
comparison StoneWebViewer/Resources/Styles/_helpers.scss @ 1495:fb74ed5d8c22
initial commit of the Stone Web viewer
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Thu, 25 Jun 2020 16:51:10 +0200 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
1494:5a3ef478deb6 | 1495:fb74ed5d8c22 |
---|---|
1 /* | |
2 * Source code taken from private Osimis' frontend toolbox 3.2.1. | |
3 */ | |
4 | |
5 /** | |
6 _overlay.scss | |
7 */ | |
8 .overlay__transparent{ | |
9 position:fixed; | |
10 top:0; | |
11 left:0; | |
12 width:100%; | |
13 height:100%; | |
14 z-index: 1; | |
15 } | |
16 | |
17 /** _transition.scss **/ | |
18 .transition, | |
19 %transition{ | |
20 &{ | |
21 transition: 0.3s all ease; | |
22 } | |
23 } | |
24 | |
25 .transition--long, | |
26 %transition--long{ | |
27 &{ | |
28 transition: 0.6s all ease; | |
29 } | |
30 } | |
31 | |
32 | |
33 /** _list.scss **/ | |
34 // This is used in the study information panel. | |
35 dd+dt{ | |
36 clear:both; | |
37 } | |
38 .listDefinition{ | |
39 width:100%; | |
40 line-height: 1.3; | |
41 } | |
42 .listDefinition__term{ | |
43 clear:both; | |
44 float:left; | |
45 text-align: right; | |
46 padding-right:10px; | |
47 width:50%; | |
48 @extend .font__light; | |
49 | |
50 } | |
51 .listDefinition__data{ | |
52 text-align: left; | |
53 padding-left:10px; | |
54 float:right; | |
55 width:50%; | |
56 @extend .font__normal; | |
57 | |
58 } | |
59 | |
60 | |
61 /** _animation.scss **/ | |
62 @keyframes blink__primary { | |
63 0% { color: $primary; } | |
64 100% { color: $text-color; } | |
65 } | |
66 | |
67 .blink__primary{ | |
68 animation: blink__primary 0.8s linear infinite; | |
69 } | |
70 | |
71 [translate-cloak]{ | |
72 transition: 0.3s all ease; | |
73 opacity: 1; | |
74 &.translate-cloak{ | |
75 opacity: 0; | |
76 } | |
77 } | |
78 | |
79 /** _button.scss **/ | |
80 .button__unstyled, | |
81 %button__unstyled{ | |
82 background-color:inherit; | |
83 border:none; | |
84 text-decoration: none; | |
85 text-align:left; | |
86 padding:0; | |
87 cursor: pointer; | |
88 *{ | |
89 pointer-events: none; | |
90 } | |
91 &:hover, &:active, &:focus{ | |
92 outline:0; | |
93 } | |
94 } | |
95 .button__base, | |
96 %button__base{ | |
97 @extend .button__unstyled; | |
98 transition: 0.3s all ease; | |
99 //& *,& *:before,& *:after{ | |
100 // @extend .transition; | |
101 //} | |
102 } | |
103 .button__state--active{ | |
104 @extend .button__base; | |
105 opacity:1; | |
106 &:hover{ | |
107 opacity:0.9; | |
108 color:$primary; | |
109 } | |
110 } | |
111 .button__state--inactive{ | |
112 @extend .button__base; | |
113 opacity:0.333; | |
114 &:hover{ | |
115 opacity:0.4333; | |
116 color:$primary; | |
117 } | |
118 } | |
119 .button__iconed{ | |
120 @extend .button__base; | |
121 opacity: 1; | |
122 &:hover, &:focus, &.active{ | |
123 opacity: 0.75; | |
124 color:$primary; | |
125 } | |
126 } | |
127 .button__switch--base, | |
128 %button__switch--base{ | |
129 @extend .button__base; | |
130 padding:5px 0px; | |
131 display:inline-block; | |
132 text-align: center; | |
133 border-top: 1px solid; | |
134 border-bottom: 1px solid; | |
135 border-color: $primary; | |
136 background-color: white; | |
137 overflow: hidden; | |
138 &:hover, &:focus{ | |
139 background-color: lighten($primary, 10); | |
140 color:white; | |
141 } | |
142 &.active{ | |
143 background-color:$primary; | |
144 color:white; | |
145 } | |
146 } | |
147 .button__switch{ | |
148 @extend .button__switch--base; | |
149 } | |
150 .button__switch--first{ | |
151 @extend .button__switch--base; | |
152 border-left: 1px solid $primary; | |
153 border-radius: 5px 0 0 5px; | |
154 } | |
155 .button__switch--last{ | |
156 @extend .button__switch--base; | |
157 border-right: 1px solid $primary; | |
158 border-radius: 0 5px 5px 0; | |
159 } | |
160 .button__lightgrey--hover{ | |
161 @extend .button__base; | |
162 &:hover, &:focus, &.active{ | |
163 background-color: $lightGrey; | |
164 } | |
165 } | |
166 .button__text-danger--hover{ | |
167 @extend .button__base; | |
168 &:hover, &:focus, &.active{ | |
169 color: $dangerColor; | |
170 } | |
171 } | |
172 .button__text-primary--hover{ | |
173 @extend .button__base; | |
174 &:hover, &:focus, &.active{ | |
175 color: $primary; | |
176 } | |
177 } | |
178 .button__danger--hover{ | |
179 @extend .button__base; | |
180 &:hover, &:focus, &.active{ | |
181 background-color: $dangerColor; | |
182 color:white; | |
183 } | |
184 } | |
185 .button__text{ | |
186 @extend .button__base; | |
187 opacity:0.66; | |
188 &:hover, &.active, &:focus{ | |
189 opacity:1; | |
190 } | |
191 } | |
192 .button__text--underlined{ | |
193 @extend .button__base; | |
194 text-decoration: underline; | |
195 &:hover, &.active, &:focus{ | |
196 text-decoration:none; | |
197 } | |
198 } | |
199 .button__bordered{ | |
200 @extend .button__base; | |
201 border-bottom: 2px solid $text-color; | |
202 &:hover, &:focus, &.active{ | |
203 border-color: $primary; | |
204 } | |
205 } | |
206 .button__bordered--inverted{ | |
207 @extend .button__base; | |
208 border-bottom: 2px solid white; | |
209 } | |
210 .button__close{ | |
211 @extend .button__base; | |
212 position:absolute; | |
213 top:0; | |
214 right:0; | |
215 opacity:0.6; | |
216 z-index:10; | |
217 &:hover, &:focus{ | |
218 opacity:1; | |
219 } | |
220 } | |
221 | |
222 | |
223 /** _block.scss **/ | |
224 .block{ | |
225 display: block !important; | |
226 } | |
227 | |
228 | |
229 /** _boxsizing.scss **/ | |
230 .boxsizing__borderbox{ | |
231 box-sizing:border-box; | |
232 } | |
233 .boxsizing__contentbox{ | |
234 box-sizing:content-box; | |
235 } | |
236 | |
237 | |
238 /** _scrollable.scss **/ | |
239 .scrollable{ | |
240 overflow-y:auto; | |
241 } | |
242 .scrollable--x{ | |
243 overflow-x:auto; | |
244 } | |
245 .no-scroll{ | |
246 overflow:hidden; | |
247 } | |
248 | |
249 | |
250 /** _float.scss **/ | |
251 .float__right, | |
252 %float__right{ | |
253 float:right; | |
254 } | |
255 .float__left, | |
256 %float__left{ | |
257 float:left; | |
258 } | |
259 | |
260 | |
261 /** _fonts.scss **/ | |
262 .font__bold, | |
263 %font__bold{ | |
264 font-weight:600; | |
265 } | |
266 .font__normal, | |
267 %font__normal{ | |
268 font-weight: 400; | |
269 } | |
270 .font__light, | |
271 %font__light{ | |
272 font-weight: 200; | |
273 } | |
274 .fontColor__primary{ | |
275 color:$primary; | |
276 } | |
277 .fontColor__lightGrey{ | |
278 color:$lightGrey; | |
279 } | |
280 .fontColor__normal{ | |
281 color:$text-color; | |
282 } | |
283 .fontColor__darker{ | |
284 color:$darkGrey; | |
285 } | |
286 .fontColor__white{ | |
287 color:white; | |
288 } | |
289 | |
290 | |
291 /** _forms.scss **/ | |
292 .textarea__unstyled{ | |
293 border:none; | |
294 outline:none; | |
295 background-color:transparent; | |
296 color:inherit; | |
297 resize:none; | |
298 padding:0; | |
299 margin:0; | |
300 width:100%; | |
301 } | |
302 | |
303 | |
304 /** _position.scss **/ | |
305 .position__relative{ | |
306 position: relative; | |
307 } | |
308 | |
309 | |
310 /** _margin.scss **/ | |
311 .margin__auto{ | |
312 margin:auto; | |
313 } | |
314 | |
315 | |
316 /** _helpers.scss **/ | |
317 $steps: ( | |
318 0,5,8,10, | |
319 11,12,13,14,15,16,17,18,19,20, | |
320 21,22,23,24,25,26,27,28,29,30, | |
321 31,32,33,34,35,36,37,38,39,40, | |
322 41,42,43,44,45,46,47,48,49,50, | |
323 55,60,64,65,70,72,75,80,85,90,95,96,100, | |
324 110,120,130,140,150,160,170,180,190,200, | |
325 210,220,230,240,250,260,270,280,290,300, | |
326 310,320,330,340,350,360,370,380,390,400, | |
327 410,420,430,440,450,460,470,480,490,500 | |
328 ); | |
329 | |
330 | |
331 /*************HELPERS**************/ | |
332 /**********************************/ | |
333 | |
334 /*** identical width and height ***/ | |
335 @each $step in $steps { | |
336 .wh__#{$step} { | |
337 width: $step + px !important; | |
338 height: $step + px !important; | |
339 } | |
340 .lh__#{$step} { | |
341 line-height: $step + px !important; | |
342 } | |
343 } | |
344 .lh__1{ | |
345 line-height: 1 !important; | |
346 } | |
347 .no-wrap{ | |
348 white-space: nowrap; | |
349 } | |
350 | |
351 .ov-h{ | |
352 overflow: hidden; | |
353 } | |
354 .va-m{ | |
355 vertical-align: middle; | |
356 } | |
357 .bg-inherit{ | |
358 background-color:inherit; | |
359 } | |
360 .bg-black{ | |
361 background-color: black; | |
362 } | |
363 .v-center{ | |
364 &:before { | |
365 content: ''; | |
366 display: inline-block; | |
367 height: 100%; | |
368 vertical-align: middle; | |
369 margin-top: -0.25em; /* Adjusts for spacing */ | |
370 } | |
371 } | |
372 .fluid-height{ | |
373 height:100%; | |
374 } | |
375 .visibility__hidden{ | |
376 visibility: hidden; | |
377 } | |
378 | |
379 .pointerEvents__none{ | |
380 pointer-events: none; | |
381 } | |
382 | |
383 /* Padding Helpers */ | |
384 .pn { | |
385 padding: 0 !important; | |
386 } | |
387 .p1 { | |
388 padding: 1px !important; | |
389 } | |
390 .p2 { | |
391 padding: 2px !important; | |
392 } | |
393 .p3 { | |
394 padding: 3px !important; | |
395 } | |
396 .p4 { | |
397 padding: 4px !important; | |
398 } | |
399 .p5 { | |
400 padding: 5px !important; | |
401 } | |
402 .p6 { | |
403 padding: 6px !important; | |
404 } | |
405 .p7 { | |
406 padding: 7px !important; | |
407 } | |
408 .p8 { | |
409 padding: 8px !important; | |
410 } | |
411 .p10 { | |
412 padding: 10px !important; | |
413 } | |
414 .p12 { | |
415 padding: 12px !important; | |
416 } | |
417 .p15 { | |
418 padding: 15px !important; | |
419 } | |
420 .p20 { | |
421 padding: 20px !important; | |
422 } | |
423 .p25 { | |
424 padding: 25px !important; | |
425 } | |
426 .p30 { | |
427 padding: 30px !important; | |
428 } | |
429 .p35 { | |
430 padding: 35px !important; | |
431 } | |
432 .p40 { | |
433 padding: 40px !important; | |
434 } | |
435 .p50 { | |
436 padding: 50px !important; | |
437 } | |
438 .ptn { | |
439 padding-top: 0 !important; | |
440 } | |
441 .pt5 { | |
442 padding-top: 5px !important; | |
443 } | |
444 .pt10 { | |
445 padding-top: 10px !important; | |
446 } | |
447 .pt15 { | |
448 padding-top: 15px !important; | |
449 } | |
450 .pt20 { | |
451 padding-top: 20px !important; | |
452 } | |
453 .pt25 { | |
454 padding-top: 25px !important; | |
455 } | |
456 .pt30 { | |
457 padding-top: 30px !important; | |
458 } | |
459 .pt35 { | |
460 padding-top: 35px !important; | |
461 } | |
462 .pt40 { | |
463 padding-top: 40px !important; | |
464 } | |
465 .pt50 { | |
466 padding-top: 50px !important; | |
467 } | |
468 .prn { | |
469 padding-right: 0 !important; | |
470 } | |
471 .pr5 { | |
472 padding-right: 5px !important; | |
473 } | |
474 .pr10 { | |
475 padding-right: 10px !important; | |
476 } | |
477 .pr15 { | |
478 padding-right: 15px !important; | |
479 } | |
480 .pr20 { | |
481 padding-right: 20px !important; | |
482 } | |
483 .pr25 { | |
484 padding-right: 25px !important; | |
485 } | |
486 .pr30 { | |
487 padding-right: 30px !important; | |
488 } | |
489 .pr35 { | |
490 padding-right: 35px !important; | |
491 } | |
492 .pr40 { | |
493 padding-right: 40px !important; | |
494 } | |
495 .pr50 { | |
496 padding-right: 50px !important; | |
497 } | |
498 .pbn { | |
499 padding-bottom: 0 !important; | |
500 } | |
501 .pb5 { | |
502 padding-bottom: 5px !important; | |
503 } | |
504 .pb10 { | |
505 padding-bottom: 10px !important; | |
506 } | |
507 .pb15 { | |
508 padding-bottom: 15px !important; | |
509 } | |
510 .pb20 { | |
511 padding-bottom: 20px !important; | |
512 } | |
513 .pb25 { | |
514 padding-bottom: 25px !important; | |
515 } | |
516 .pb30 { | |
517 padding-bottom: 30px !important; | |
518 } | |
519 .pb35 { | |
520 padding-bottom: 35px !important; | |
521 } | |
522 .pb40 { | |
523 padding-bottom: 40px !important; | |
524 } | |
525 .pb50 { | |
526 padding-bottom: 50px !important; | |
527 } | |
528 .pln { | |
529 padding-left: 0 !important; | |
530 } | |
531 .pl5 { | |
532 padding-left: 5px !important; | |
533 } | |
534 .pl10 { | |
535 padding-left: 10px !important; | |
536 } | |
537 .pl15 { | |
538 padding-left: 15px !important; | |
539 } | |
540 .pl20 { | |
541 padding-left: 20px !important; | |
542 } | |
543 .pl25 { | |
544 padding-left: 25px !important; | |
545 } | |
546 .pl30 { | |
547 padding-left: 30px !important; | |
548 } | |
549 .pl35 { | |
550 padding-left: 35px !important; | |
551 } | |
552 .pl40 { | |
553 padding-left: 40px !important; | |
554 } | |
555 .pl50 { | |
556 padding-left: 50px !important; | |
557 } | |
558 | |
559 /* Axis Padding (both top/bottom or left/right) */ | |
560 .pv5 { | |
561 padding-top: 5px !important; | |
562 padding-bottom: 5px !important; | |
563 } | |
564 .pv8 { | |
565 padding-top: 8px !important; | |
566 padding-bottom: 8px !important; | |
567 } | |
568 .pv10 { | |
569 padding-top: 10px !important; | |
570 padding-bottom: 10px !important; | |
571 } | |
572 .pv15 { | |
573 padding-top: 15px !important; | |
574 padding-bottom: 15px !important; | |
575 } | |
576 .pv20 { | |
577 padding-top: 20px !important; | |
578 padding-bottom: 20px !important; | |
579 } | |
580 .pv25 { | |
581 padding-top: 25px !important; | |
582 padding-bottom: 25px !important; | |
583 } | |
584 .pv30 { | |
585 padding-top: 30px !important; | |
586 padding-bottom: 30px !important; | |
587 } | |
588 .pv40 { | |
589 padding-top: 40px !important; | |
590 padding-bottom: 40px !important; | |
591 } | |
592 .pv50 { | |
593 padding-top: 50px !important; | |
594 padding-bottom: 50px !important; | |
595 } | |
596 .ph5 { | |
597 padding-left: 5px !important; | |
598 padding-right: 5px !important; | |
599 } | |
600 .ph8 { | |
601 padding-left: 8px !important; | |
602 padding-right: 8px !important; | |
603 } | |
604 .ph10 { | |
605 padding-left: 10px !important; | |
606 padding-right: 10px !important; | |
607 } | |
608 .ph15 { | |
609 padding-left: 15px !important; | |
610 padding-right: 15px !important; | |
611 } | |
612 .ph20 { | |
613 padding-left: 20px !important; | |
614 padding-right: 20px !important; | |
615 } | |
616 .ph25 { | |
617 padding-left: 25px !important; | |
618 padding-right: 25px !important; | |
619 } | |
620 .ph30 { | |
621 padding-left: 30px !important; | |
622 padding-right: 30px !important; | |
623 } | |
624 .ph40 { | |
625 padding-left: 40px !important; | |
626 padding-right: 40px !important; | |
627 } | |
628 .ph50 { | |
629 padding-left: 50px !important; | |
630 padding-right: 50px !important; | |
631 } | |
632 | |
633 /* margin center helper */ | |
634 .mauto { | |
635 margin-left: auto; | |
636 margin-right: auto; | |
637 } | |
638 .mn { | |
639 margin: 0 !important; | |
640 } | |
641 .m1 { | |
642 margin: 1px !important; | |
643 } | |
644 .m2 { | |
645 margin: 2px !important; | |
646 } | |
647 .m3 { | |
648 margin: 3px !important; | |
649 } | |
650 .m4 { | |
651 margin: 4px !important; | |
652 } | |
653 .m5 { | |
654 margin: 5px !important; | |
655 } | |
656 .m8 { | |
657 margin: 8px !important; | |
658 } | |
659 .m10 { | |
660 margin: 10px !important; | |
661 } | |
662 .m15 { | |
663 margin: 15px !important; | |
664 } | |
665 .m20 { | |
666 margin: 20px !important; | |
667 } | |
668 .m25 { | |
669 margin: 25px !important; | |
670 } | |
671 .m30 { | |
672 margin: 30px !important; | |
673 } | |
674 .m35 { | |
675 margin: 35px !important; | |
676 } | |
677 .m40 { | |
678 margin: 40px !important; | |
679 } | |
680 .m50 { | |
681 margin: 50px !important; | |
682 } | |
683 .mtn { | |
684 margin-top: 0 !important; | |
685 } | |
686 .mt5 { | |
687 margin-top: 5px !important; | |
688 } | |
689 .mt10 { | |
690 margin-top: 10px !important; | |
691 } | |
692 .mt15 { | |
693 margin-top: 15px !important; | |
694 } | |
695 .mt20 { | |
696 margin-top: 20px !important; | |
697 } | |
698 .mt25 { | |
699 margin-top: 25px !important; | |
700 } | |
701 .mt30 { | |
702 margin-top: 30px !important; | |
703 } | |
704 .mt35 { | |
705 margin-top: 35px !important; | |
706 } | |
707 .mt40 { | |
708 margin-top: 40px !important; | |
709 } | |
710 .mt50 { | |
711 margin-top: 50px !important; | |
712 } | |
713 .mt70 { | |
714 margin-top: 70px !important; | |
715 } | |
716 .mrn { | |
717 margin-right: 0 !important; | |
718 } | |
719 .mr5 { | |
720 margin-right: 5px !important; | |
721 } | |
722 .mr10 { | |
723 margin-right: 10px !important; | |
724 } | |
725 .mr15 { | |
726 margin-right: 15px !important; | |
727 } | |
728 .mr20 { | |
729 margin-right: 20px !important; | |
730 } | |
731 .mr25 { | |
732 margin-right: 25px !important; | |
733 } | |
734 .mr30 { | |
735 margin-right: 30px !important; | |
736 } | |
737 .mr35 { | |
738 margin-right: 35px !important; | |
739 } | |
740 .mr40 { | |
741 margin-right: 40px !important; | |
742 } | |
743 .mr50 { | |
744 margin-right: 50px !important; | |
745 } | |
746 .mbn { | |
747 margin-bottom: 0 !important; | |
748 } | |
749 .mb5 { | |
750 margin-bottom: 5px !important; | |
751 } | |
752 .mb10 { | |
753 margin-bottom: 10px !important; | |
754 } | |
755 .mb15 { | |
756 margin-bottom: 15px !important; | |
757 } | |
758 .mb20 { | |
759 margin-bottom: 20px !important; | |
760 } | |
761 .mb25 { | |
762 margin-bottom: 25px !important; | |
763 } | |
764 .mb30 { | |
765 margin-bottom: 30px !important; | |
766 } | |
767 .mb35 { | |
768 margin-bottom: 35px !important; | |
769 } | |
770 .mb40 { | |
771 margin-bottom: 40px !important; | |
772 } | |
773 .mb50 { | |
774 margin-bottom: 50px !important; | |
775 } | |
776 .mb70 { | |
777 margin-bottom: 70px !important; | |
778 } | |
779 .mln { | |
780 margin-left: 0 !important; | |
781 } | |
782 .ml5 { | |
783 margin-left: 5px !important; | |
784 } | |
785 .ml10 { | |
786 margin-left: 10px !important; | |
787 } | |
788 .ml15 { | |
789 margin-left: 15px !important; | |
790 } | |
791 .ml20 { | |
792 margin-left: 20px !important; | |
793 } | |
794 .ml25 { | |
795 margin-left: 25px !important; | |
796 } | |
797 .ml30 { | |
798 margin-left: 30px !important; | |
799 } | |
800 .ml35 { | |
801 margin-left: 35px !important; | |
802 } | |
803 .ml40 { | |
804 margin-left: 40px !important; | |
805 } | |
806 .ml50 { | |
807 margin-left: 50px !important; | |
808 } | |
809 | |
810 /* Axis Margins (both top/bottom or left/right) */ | |
811 .mv5 { | |
812 margin-top: 5px !important; | |
813 margin-bottom: 5px !important; | |
814 } | |
815 .mv10 { | |
816 margin-top: 10px !important; | |
817 margin-bottom: 10px !important; | |
818 } | |
819 .mv15 { | |
820 margin-top: 15px !important; | |
821 margin-bottom: 15px !important; | |
822 } | |
823 .mv20 { | |
824 margin-top: 20px !important; | |
825 margin-bottom: 20px !important; | |
826 } | |
827 .mv25 { | |
828 margin-top: 25px !important; | |
829 margin-bottom: 25px !important; | |
830 } | |
831 .mv30 { | |
832 margin-top: 30px !important; | |
833 margin-bottom: 30px !important; | |
834 } | |
835 .mv40 { | |
836 margin-top: 40px !important; | |
837 margin-bottom: 40px !important; | |
838 } | |
839 .mv50 { | |
840 margin-top: 50px !important; | |
841 margin-bottom: 50px !important; | |
842 } | |
843 .mv70 { | |
844 margin-top: 70px !important; | |
845 margin-bottom: 70px !important; | |
846 } | |
847 .mh5 { | |
848 margin-left: 5px !important; | |
849 margin-right: 5px !important; | |
850 } | |
851 .mh10 { | |
852 margin-left: 10px !important; | |
853 margin-right: 10px !important; | |
854 } | |
855 .mh15 { | |
856 margin-left: 15px !important; | |
857 margin-right: 15px !important; | |
858 } | |
859 .mh20 { | |
860 margin-left: 20px !important; | |
861 margin-right: 20px !important; | |
862 } | |
863 .mh25 { | |
864 margin-left: 25px !important; | |
865 margin-right: 25px !important; | |
866 } | |
867 .mh30 { | |
868 margin-left: 30px !important; | |
869 margin-right: 30px !important; | |
870 } | |
871 .mh40 { | |
872 margin-left: 40px !important; | |
873 margin-right: 40px !important; | |
874 } | |
875 .mh50 { | |
876 margin-left: 50px !important; | |
877 margin-right: 50px !important; | |
878 } | |
879 .mh70 { | |
880 margin-left: 70px !important; | |
881 margin-right: 70px !important; | |
882 } | |
883 | |
884 /* Negative Margin Helpers */ | |
885 .mtn5 { | |
886 margin-top: -5px !important; | |
887 } | |
888 .mtn10 { | |
889 margin-top: -10px !important; | |
890 } | |
891 .mtn15 { | |
892 margin-top: -15px !important; | |
893 } | |
894 .mtn20 { | |
895 margin-top: -20px !important; | |
896 } | |
897 .mtn30 { | |
898 margin-top: -30px !important; | |
899 } | |
900 .mrn5 { | |
901 margin-right: -5px !important; | |
902 } | |
903 .mrn10 { | |
904 margin-right: -10px !important; | |
905 } | |
906 .mrn15 { | |
907 margin-right: -15px !important; | |
908 } | |
909 .mrn20 { | |
910 margin-right: -20px !important; | |
911 } | |
912 .mrn30 { | |
913 margin-right: -30px !important; | |
914 } | |
915 .mbn5 { | |
916 margin-bottom: -5px !important; | |
917 } | |
918 .mbn10 { | |
919 margin-bottom: -10px !important; | |
920 } | |
921 .mbn15 { | |
922 margin-bottom: -15px !important; | |
923 } | |
924 .mbn20 { | |
925 margin-bottom: -20px !important; | |
926 } | |
927 .mbn30 { | |
928 margin-bottom: -30px !important; | |
929 } | |
930 .mln5 { | |
931 margin-left: -5px !important; | |
932 } | |
933 .mln10 { | |
934 margin-left: -10px !important; | |
935 } | |
936 .mln15 { | |
937 margin-left: -15px !important; | |
938 } | |
939 .mln20 { | |
940 margin-left: -20px !important; | |
941 } | |
942 .mln30 { | |
943 margin-left: -30px !important; | |
944 } | |
945 | |
946 /* Vertical Negative Margin "mv" + "n" + "x" */ | |
947 .mvn5 { | |
948 margin-top: -5px !important; | |
949 margin-bottom: -5px !important; | |
950 } | |
951 .mvn10 { | |
952 margin-top: -10px !important; | |
953 margin-bottom: -10px !important; | |
954 } | |
955 .mvn15 { | |
956 margin-top: -15px !important; | |
957 margin-bottom: -15px !important; | |
958 } | |
959 .mvn20 { | |
960 margin-top: -20px !important; | |
961 margin-bottom: -20px !important; | |
962 } | |
963 .mvn30 { | |
964 margin-top: -30px !important; | |
965 margin-bottom: -30px !important; | |
966 } | |
967 | |
968 /* Horizontal Negative Margin "mh" + "n" + "x" */ | |
969 .mhn5 { | |
970 margin-left: -5px !important; | |
971 margin-right: -5px !important; | |
972 } | |
973 .mhn10 { | |
974 margin-left: -10px !important; | |
975 margin-right: -10px !important; | |
976 } | |
977 .mhn15 { | |
978 margin-left: -15px !important; | |
979 margin-right: -15px !important; | |
980 } | |
981 .mhn20 { | |
982 margin-left: -20px !important; | |
983 margin-right: -20px !important; | |
984 } | |
985 .mhn30 { | |
986 margin-left: -30px !important; | |
987 margin-right: -30px !important; | |
988 } | |
989 | |
990 /* Vertical Align Helpers */ | |
991 .va-t { | |
992 vertical-align: top !important; | |
993 } | |
994 .va-m { | |
995 vertical-align: middle !important; | |
996 } | |
997 .va-b { | |
998 vertical-align: bottom !important; | |
999 } | |
1000 .va-s { | |
1001 vertical-align: super !important; | |
1002 } | |
1003 | |
1004 /* Text Helpers */ | |
1005 .text-left { | |
1006 text-align: left !important; | |
1007 } | |
1008 .text-right { | |
1009 text-align: right !important; | |
1010 } | |
1011 .text-center { | |
1012 text-align: center !important; | |
1013 } | |
1014 .text-justify { | |
1015 text-align: justify !important; | |
1016 } | |
1017 .text-nowrap { | |
1018 white-space: nowrap !important; | |
1019 } | |
1020 | |
1021 /* Inline Block Helper */ | |
1022 .ib, | |
1023 .inline-object { | |
1024 display: inline-block !important; | |
1025 } | |
1026 | |
1027 .clear { | |
1028 clear: both; | |
1029 } | |
1030 | |
1031 // warning popup | |
1032 | |
1033 .wvWarning { | |
1034 position: relative; | |
1035 width: 320px; | |
1036 min-height: 130px; | |
1037 z-index: 999; | |
1038 left: calc(50% - 160px); | |
1039 border: #000 solid 1px; | |
1040 -webkit-border-radius: 7px; | |
1041 -moz-border-radius: 7px; | |
1042 border-radius: 7px; | |
1043 color: #FF5722; | |
1044 box-shadow: 0px 3px 23px #ff980078; | |
1045 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */ | |
1046 -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */ | |
1047 -webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */ | |
1048 animation-name: example; | |
1049 animation-duration: 2s; | |
1050 animation-fill-mode: both; | |
1051 animation-timing-function: ease-out; | |
1052 } | |
1053 | |
1054 @-webkit-keyframes example { | |
1055 from {top: 0vh;opacity: 0;background: #868686} | |
1056 to {top: 10vh;opacity: 1;background: #ffffff} | |
1057 } | |
1058 | |
1059 @keyframes example { | |
1060 from {top: 0vh;opacity: 0;background: #868686} | |
1061 to {top: 10vh;opacity: 1;background: #ffffff} | |
1062 } | |
1063 | |
1064 .wvWarning-content{ | |
1065 position: relative; | |
1066 width: 190px; | |
1067 min-height: 88px; | |
1068 max-height: 80vh; | |
1069 margin: auto; | |
1070 } | |
1071 .wvWarning-icon{ | |
1072 font-size: 32px; | |
1073 } | |
1074 .wvWarning-text{ | |
1075 position: relative; | |
1076 } | |
1077 .wvWarning-button{ | |
1078 background-color: #f1ededcc; | |
1079 color: #607D8B; | |
1080 width: 50px; | |
1081 font-weight: 600; | |
1082 margin-top: 2px; | |
1083 margin-right: 30px; | |
1084 } | |
1085 | |
1086 .wvScreenToSmallWarning { | |
1087 position: fixed; | |
1088 display: block; | |
1089 top: 0; | |
1090 left: 0; | |
1091 background-color: white; | |
1092 color: #333; | |
1093 width: 100%; | |
1094 height: 100%; | |
1095 z-index: 1000; | |
1096 } | |
1097 | |
1098 .wvScreenToSmallWarning-content { | |
1099 padding: 10px; | |
1100 text-align: center; | |
1101 } | |
1102 | |
1103 /* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */ | |
1104 @media only screen and (min-width: 550px) and (min-height: 280px) { | |
1105 .wvScreenToSmallWarning { | |
1106 display: none; | |
1107 } | |
1108 } | |
1109 | |
1110 /* on some mobile devices, the size returned for the "screen" is actually the viewport size so 360x640 is actually equal to 280x560 */ | |
1111 @media only screen and (min-width: 280px) and (min-height: 550px) { | |
1112 .wvScreenToSmallWarning { | |
1113 display: none; | |
1114 } | |
1115 } |