PluginProbe
WP Directory Kit / 1.3.8
WP Directory Kit v1.3.8
1.5.9 1.5.7 1.5.6 1.5.5 1.5.4 1.5.3 trunk 1.1.0 1.1.6 1.1.8 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.8 All 37 releases
wpdirectorykit / public / js / jquery-confirm / css / jquery-confirm.less

jquery-confirm.less in WP Directory Kit 1.3.8, at public/js/jquery-confirm/css/jquery-confirm.less

943 lines 19.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*!
2 * jquery-confirm v3.3.4 (http://craftpip.github.io/jquery-confirm/)
3 * Author: boniface pereira
4 * Website: www.craftpip.com
5 * Contact: [email protected]
6 *
7 * Copyright 2013-2019 jquery-confirm
8 * Licensed under MIT (https://github.com/craftpip/jquery-confirm/blob/master/LICENSE)
9 */
10 @blue: #3498db;
11 @blueHover: #2980b9;
12 @green: #2ecc71;
13 @greenHover: #27ae60;
14 @red: #e74c3c;
15 @redHover: #c0392b;
16 @orange: #f1c40f;
17 @orangeHover: #f39c12;
18 @purple: #9b59b6;
19 @purpleHover: #8e44ad;
20 @default: #ecf0f1;
21 @defaultHover: #bdc3c7;
22 @dark: #34495e;
23 @darkHover: #2c3e50;
24
25 @keyframes jconfirm-spin {
26 from {
27 transform: rotate(0deg);
28 }
29 to {
30 transform: rotate(360deg);
31 }
32 }
33
34 body[class*=jconfirm-no-scroll-] {
35 overflow: hidden !important;
36 }
37
38 .jconfirm {
39 position: fixed;
40 top: 0;
41 left: 0;
42 right: 0;
43 bottom: 0;
44 z-index: 99999999;
45 font-family: inherit;
46 overflow: hidden;
47
48 .jconfirm-bg {
49 position: fixed;
50 top: 0;
51 left: 0;
52 right: 0;
53 bottom: 0;
54 transition: opacity .4s;
55
56 &.jconfirm-bg-h {
57 opacity: 0 !important;
58 }
59 }
60 .jconfirm-scrollpane {
61 //overflow-y: auto;
62 perspective: 500px;
63 perspective-origin: center;
64
65 display: table;
66 width: 100%;
67 height: 100%;
68 }
69 .jconfirm-row {
70 display: table-row;
71 width: 100%;
72 }
73 .jconfirm-cell {
74 //height: 100%;
75 display: table-cell;
76 vertical-align: middle;
77 }
78 .jconfirm-holder {
79 max-height: 100%;
80 padding: 50px 0;
81 }
82 .jconfirm-box-container {
83 transition: transform;
84
85 &.jconfirm-no-transition {
86 transition: none !important;
87 }
88 }
89 .jconfirm-box {
90 background: white;
91 border-radius: 4px;
92 position: relative;
93 outline: none;
94 padding: 15px 15px 0;
95 overflow: hidden;
96 margin-left: auto;
97 margin-right: auto;
98
99 @keyframes type-blue {
100 1%, 100% {
101 border-color: @blue;
102 }
103 50% {
104 border-color: lighten(@blue, 10%);
105 }
106 }
107 @keyframes type-green {
108 1%, 100% {
109 border-color: @green;
110 }
111 50% {
112 border-color: lighten(@green, 10%);
113 }
114 }
115 @keyframes type-red {
116 1%, 100% {
117 border-color: @red;
118 }
119 50% {
120 border-color: lighten(@red, 10%);
121 }
122 }
123 @keyframes type-orange {
124 1%, 100% {
125 border-color: @orange;
126 }
127 50% {
128 border-color: lighten(@orange, 10%);
129 }
130 }
131 @keyframes type-purple {
132 1%, 100% {
133 border-color: @purple;
134 }
135 50% {
136 border-color: lighten(@purple, 10%);
137 }
138 }
139 @keyframes type-dark {
140 1%, 100% {
141 border-color: @dark;
142 }
143 50% {
144 border-color: lighten(@dark, 10%);
145 }
146 }
147 &.jconfirm-type-animated {
148 animation-duration: 2s;
149 animation-iteration-count: infinite;
150 }
151 &.jconfirm-type-blue {
152 border-top: solid 7px @blue;
153 animation-name: type-blue;
154 }
155 &.jconfirm-type-green {
156 border-top: solid 7px @green;
157 animation-name: type-green;
158 }
159 &.jconfirm-type-red {
160 border-top: solid 7px @red;
161 animation-name: type-red;
162 }
163 &.jconfirm-type-orange {
164 border-top: solid 7px @orange;
165 animation-name: type-orange;
166 }
167 &.jconfirm-type-purple {
168 border-top: solid 7px @purple;
169 animation-name: type-purple;
170 }
171 &.jconfirm-type-dark {
172 border-top: solid 7px @dark;
173 animation-name: type-dark;
174 }
175 &.loading {
176 height: 120px;
177
178 &:before {
179 content: '';
180 position: absolute;
181 left: 0;
182 background: white;
183 right: 0;
184 top: 0;
185 bottom: 0;
186 border-radius: 10px;
187 z-index: 1;
188 }
189 &:after {
190 opacity: 0.6;
191 content: '';
192 height: 30px;
193 width: 30px;
194 border: solid 3px transparent;
195 position: absolute;
196 left: 50%;
197 margin-left: -15px;
198 border-radius: 50%;
199 animation: jconfirm-spin 1s infinite linear;
200 border-bottom-color: dodgerblue;
201 top: 50%;
202 margin-top: -15px;
203 z-index: 2;
204 }
205 }
206
207 div.jconfirm-closeIcon {
208 height: 20px;
209 width: 20px;
210 position: absolute;
211 top: 10px;
212 right: 10px;
213 cursor: pointer;
214 opacity: .6;
215 text-align: center;
216 font-size: 27px !important;
217 line-height: 14px !important;
218 display: none;
219 z-index: 1;
220
221 &:empty {
222 display: none;
223 }
224
225 .fa {
226 font-size: 16px;
227 }
228 .glyphicon {
229 font-size: 16px;
230 }
231 .zmdi {
232 font-size: 16px;
233 }
234
235 &:hover {
236 opacity: 1;
237 }
238 }
239 div.jconfirm-title-c {
240 display: block;
241 font-size: 22px;
242 line-height: 20px;
243 user-select: none;
244 cursor: default;
245 padding-bottom: 15px;
246
247 &.jconfirm-hand {
248 cursor: move;
249 }
250 .jconfirm-icon-c {
251 font-size: inherit;
252 //padding-bottom: 15px;
253 display: inline-block;
254 vertical-align: middle;
255 i {
256 vertical-align: middle;
257 }
258 &:empty {
259 display: none;
260 }
261 }
262 .jconfirm-title {
263 user-select: none;
264 font-size: inherit;
265 font-family: inherit;
266 display: inline-block;
267 vertical-align: middle;
268 //padding-bottom: 15px;
269 &:empty {
270 display: none;
271 }
272 }
273 }
274
275 div.jconfirm-content-pane {
276 margin-bottom: 15px;
277 height: auto;
278 transition: height .4s ease-in;
279 display: inline-block;
280 width: 100%;
281 position: relative;
282 overflow-x: hidden;
283 overflow-y: auto;
284
285 &.no-scroll {
286 overflow-y: hidden;
287 }
288 &::-webkit-scrollbar {
289 width: 3px;
290 }
291
292 &::-webkit-scrollbar-track {
293 background: rgba(0, 0, 0, .1);
294 }
295
296 &::-webkit-scrollbar-thumb {
297 background: #666;
298 border-radius: 3px;
299 }
300
301 .jconfirm-content {
302 overflow: auto;
303
304 img {
305 max-width: 100%;
306 height: auto;
307 }
308 &:empty {
309 display: none;
310 }
311 }
312 }
313
314 .jconfirm-buttons {
315 padding-bottom: 11px;
316 > button {
317 margin-bottom: 4px;
318 margin-left: 2px;
319 margin-right: 2px;
320 }
321
322 button {
323 display: inline-block;
324 padding: 6px 12px;
325 font-size: 14px;
326 font-weight: 400;
327 line-height: 1.42857143;
328 text-align: center;
329 white-space: nowrap;
330 vertical-align: middle;
331 -ms-touch-action: manipulation;
332 touch-action: manipulation;
333 cursor: pointer;
334 -webkit-user-select: none;
335 -moz-user-select: none;
336 -ms-user-select: none;
337 user-select: none;
338 border-radius: 4px;
339 min-height: 1em;
340 //outline: blue;
341 //user-select: none;
342 transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease;
343 -webkit-tap-highlight-color: transparent;
344 border: none;
345 background-image: none;
346
347 &.btn-blue {
348 background-color: @blue;
349 color: #FFF;
350 text-shadow: none;
351 transition: background .2s;
352 &:hover {
353 background-color: @blueHover;
354 color: #FFF;
355 }
356 }
357
358 &.btn-green {
359 background-color: @green;
360 color: #FFF;
361 text-shadow: none;
362 transition: background .2s;
363 &:hover {
364 background-color: @greenHover;
365 color: #FFF;
366 }
367 }
368
369 &.btn-red {
370 background-color: @red;
371 color: #FFF;
372 text-shadow: none;
373 transition: background .2s;
374 &:hover {
375 background-color: @redHover;
376 color: #FFF;
377 }
378 }
379
380 &.btn-orange {
381 background-color: @orange;
382 color: #FFF;
383 text-shadow: none;
384 transition: background .2s;
385 &:hover {
386 background-color: @orangeHover;
387 color: #FFF;
388 }
389 }
390
391 &.btn-default {
392 background-color: @default;
393 color: #000;
394 text-shadow: none;
395 transition: background .2s;
396 &:hover {
397 background-color: @defaultHover;
398 color: #000;
399 }
400 }
401
402 &.btn-purple {
403 background-color: @purple;
404 color: #FFF;
405 text-shadow: none;
406 transition: background .2s;
407 &:hover {
408 background-color: @purpleHover;
409 color: #FFF;
410 }
411 }
412
413 &.btn-dark {
414 background-color: @dark;
415 color: #FFF;
416 text-shadow: none;
417 transition: background .2s;
418 &:hover {
419 background-color: @darkHover;
420 color: #FFF;
421 }
422 }
423 }
424 }
425
426 &.jconfirm-type-red .jconfirm-title-c .jconfirm-icon-c {
427 color: @red !important;
428 }
429 &.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c {
430 color: @blue !important;
431 }
432 &.jconfirm-type-green .jconfirm-title-c .jconfirm-icon-c {
433 color: @green !important;
434 }
435 &.jconfirm-type-purple .jconfirm-title-c .jconfirm-icon-c {
436 color: @purple !important;
437 }
438 &.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c {
439 color: @orange !important;
440 }
441 &.jconfirm-type-dark .jconfirm-title-c .jconfirm-icon-c {
442 color: @dark !important;
443 }
444 }
445
446 .jconfirm-clear {
447 clear: both;
448 }
449
450 &.jconfirm-rtl {
451 direction: rtl;
452 div.jconfirm-closeIcon {
453 left: 5px;
454 right: auto;
455 }
456 }
457
458 &.jconfirm-white, &.jconfirm-light {
459 .jconfirm-bg {
460 background-color: #444;
461 opacity: .2;
462 }
463 .jconfirm-box {
464 box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
465 border-radius: 5px;
466
467 .jconfirm-title-c .jconfirm-icon-c {
468 margin-right: 8px;
469 margin-left: 0px;
470 }
471 .jconfirm-buttons {
472 float: right;
473
474 button {
475 text-transform: uppercase;
476 font-size: 14px;
477 font-weight: bold;
478 text-shadow: none;
479 }
480 button.btn-default {
481 box-shadow: none;
482 color: #333;
483
484 &:hover {
485 background: #ddd;
486 }
487 }
488 }
489 }
490 &.jconfirm-rtl {
491 .jconfirm-title-c .jconfirm-icon-c {
492 margin-left: 8px;
493 margin-right: 0px;
494 }
495 }
496 }
497
498 &.jconfirm-black, &.jconfirm-dark {
499 .jconfirm-bg {
500 background-color: darkslategray;
501 opacity: .4;
502 }
503 .jconfirm-box {
504 box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
505 background: #444;
506 border-radius: 5px;
507 color: white;
508
509 .jconfirm-title-c .jconfirm-icon-c {
510 margin-right: 8px;
511 margin-left: 0px;
512 }
513
514 .jconfirm-buttons {
515 float: right;
516
517 button {
518 border: none;
519 background-image: none;
520 text-transform: uppercase;
521 font-size: 14px;
522 font-weight: bold;
523 text-shadow: none;
524 transition: background .1s;
525 color: white;
526 }
527 button.btn-default {
528 box-shadow: none;
529 color: #fff;
530 background: none;
531
532 &:hover {
533 background: #666;
534 }
535 }
536 }
537 }
538
539 &.jconfirm-rtl {
540 .jconfirm-title-c .jconfirm-icon-c {
541 margin-left: 8px;
542 margin-right: 0px;
543 }
544 }
545 }
546
547 .jconfirm-box.hilight {
548 &.jconfirm-hilight-shake {
549 animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
550 transform: translate3d(0, 0, 0);
551 }
552 &.jconfirm-hilight-glow {
553 animation: glow 0.82s cubic-bezier(.36, .07, .19, .97) both;
554 transform: translate3d(0, 0, 0);
555 }
556 }
557 }
558
559 @keyframes shake {
560 10%, 90% {
561 transform: translate3d(-2px, 0, 0);
562 }
563 20%, 80% {
564 transform: translate3d(4px, 0, 0);
565 }
566 30%, 50%, 70% {
567 transform: translate3d(-8px, 0, 0);
568 }
569 40%, 60% {
570 transform: translate3d(8px, 0, 0);
571 }
572 }
573
574 @keyframes glow {
575 0%, 100% {
576 box-shadow: 0 0 0px red;
577 }
578 50% {
579 box-shadow: 0 0 30px red;
580 }
581 }
582
583 /*Transition rules*/
584 .jconfirm {
585 perspective: 400px;
586
587 .jconfirm-box {
588 opacity: 1;
589 transition-property: all;
590
591 &.jconfirm-animation-top, &.jconfirm-animation-left, &.jconfirm-animation-right, &.jconfirm-animation-bottom, &.jconfirm-animation-opacity, &.jconfirm-animation-zoom, &.jconfirm-animation-scale, &.jconfirm-animation-none, &.jconfirm-animation-rotate, &.jconfirm-animation-rotatex, &.jconfirm-animation-rotatey, &.jconfirm-animation-scaley, &.jconfirm-animation-scalex {
592 opacity: 0;
593 }
594 &.jconfirm-animation-rotate {
595 transform: rotate(90deg);
596 }
597 &.jconfirm-animation-rotatex {
598 transform: rotateX(90deg);
599 transform-origin: center;
600 }
601 &.jconfirm-animation-rotatexr {
602 transform: rotateX(-90deg);
603 transform-origin: center;
604 }
605 &.jconfirm-animation-rotatey {
606 transform: rotatey(90deg);
607 transform-origin: center;
608 }
609 &.jconfirm-animation-rotateyr {
610 transform: rotatey(-90deg);
611 transform-origin: center;
612 }
613 &.jconfirm-animation-scaley {
614 transform: scaley(1.5);
615 transform-origin: center;
616 }
617 &.jconfirm-animation-scalex {
618 transform: scalex(1.5);
619 transform-origin: center;
620 }
621 &.jconfirm-animation-top {
622 transform: translate(0px, -100px);
623 }
624 &.jconfirm-animation-left {
625 transform: translate(-100px, 0px);
626 }
627 &.jconfirm-animation-right {
628 transform: translate(100px, 0px);
629 }
630 &.jconfirm-animation-bottom {
631 transform: translate(0px, 100px);
632 }
633 &.jconfirm-animation-opacity {
634
635 }
636 &.jconfirm-animation-zoom {
637 transform: scale(1.2);
638 }
639 &.jconfirm-animation-scale {
640 transform: scale(0.5);
641 }
642 &.jconfirm-animation-none {
643 visibility: hidden;
644 }
645 }
646 }
647
648 .jconfirm.jconfirm-supervan {
649 .jconfirm-bg {
650 background-color: rgba(54, 70, 93, .95);
651 }
652
653 .jconfirm-box {
654 background-color: transparent;
655
656 &.jconfirm-type-blue {
657 border: none;
658 }
659 &.jconfirm-type-green {
660 border: none;
661 }
662 &.jconfirm-type-red {
663 border: none;
664 }
665 &.jconfirm-type-orange {
666 border: none;
667 }
668 &.jconfirm-type-purple {
669 border: none;
670 }
671 &.jconfirm-type-dark {
672 border: none;
673 }
674
675 div.jconfirm-closeIcon {
676 color: white;
677 }
678
679 div.jconfirm-title-c {
680 text-align: center;
681 color: white;
682 font-size: 28px;
683 font-weight: normal;
684 > * {
685 padding-bottom: 25px;
686 }
687
688 .jconfirm-icon-c {
689 margin-right: 8px;
690 margin-left: 0px;
691 }
692 }
693 div.jconfirm-content-pane {
694 margin-bottom: 25px;
695 }
696 div.jconfirm-content {
697 text-align: center;
698 color: white;
699
700 &:empty {
701 &:before {
702
703 }
704 &:after {
705
706 }
707 }
708 }
709 .jconfirm-buttons {
710 text-align: center;
711
712 button {
713 font-size: 16px;
714 border-radius: 2px;
715 background: darken(#36465D, 3%);
716 text-shadow: none;
717 border: none;
718 color: white;
719 padding: 10px;
720 min-width: 100px;
721 }
722 button + button {
723
724 }
725 }
726 &.hilight {
727
728 }
729 }
730
731 &.jconfirm-rtl {
732 .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c {
733 margin-left: 8px;
734 margin-right: 0px;
735 }
736 }
737 }
738
739 .jconfirm.jconfirm-material {
740 .jconfirm-bg {
741 background-color: rgba(0, 0, 0, .67);
742 }
743 .jconfirm-box {
744 background-color: white;
745 box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12);
746 padding: 30px 25px 10px 25px;
747
748 .jconfirm-title-c .jconfirm-icon-c {
749 margin-right: 8px;
750 margin-left: 0px;
751 }
752
753 div.jconfirm-closeIcon {
754 color: rgba(0, 0, 0, .87);
755 }
756
757 div.jconfirm-title-c {
758 color: rgba(0, 0, 0, .87);
759 font-size: 22px;
760 font-weight: bold;
761 }
762 div.jconfirm-content {
763 color: rgba(0, 0, 0, .87);
764
765 &:empty {
766 &:before {
767
768 }
769 &:after {
770
771 }
772 }
773 }
774 .jconfirm-buttons {
775 text-align: right;
776
777 button {
778 text-transform: uppercase;
779 font-weight: 500;
780 }
781 button + button {
782
783 }
784 }
785 &.hilight {
786
787 }
788 }
789
790 &.jconfirm-rtl {
791 .jconfirm-title-c .jconfirm-icon-c {
792 margin-left: 8px;
793 margin-right: 0px;
794 }
795 }
796 }
797
798 .jconfirm.jconfirm-bootstrap {
799 .jconfirm-bg {
800 background-color: rgba(0, 0, 0, .21);
801 }
802
803 .jconfirm-box {
804 background-color: white;
805 box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.2);
806 border: solid 1px rgba(0, 0, 0, 0.4);
807 padding: 15px 0 0;
808
809 .jconfirm-title-c .jconfirm-icon-c {
810 margin-right: 8px;
811 margin-left: 0px;
812 }
813
814 div.jconfirm-closeIcon {
815 color: rgba(0, 0, 0, 0.87);
816 }
817
818 div.jconfirm-title-c {
819 color: rgba(0, 0, 0, 0.87);
820 font-size: 22px;
821 font-weight: bold;
822 padding-left: 15px;
823 padding-right: 15px;
824 }
825 div.jconfirm-content-pane {
826
827 }
828 div.jconfirm-content {
829 color: rgba(0, 0, 0, 0.87);
830 padding: 0px 15px;
831
832 &:empty {
833 &:before {
834
835 }
836 &:after {
837
838 }
839 }
840 }
841 .jconfirm-buttons {
842 text-align: right;
843 padding: 10px;
844 margin: -5px 0 0px;
845 border-top: solid 1px #ddd;
846 overflow: hidden;
847 border-radius: 0 0 4px 4px;
848
849 button {
850 font-weight: 500;
851 }
852 button + button {
853
854 }
855 }
856 &.hilight {
857
858 }
859 }
860
861 &.jconfirm-rtl {
862 .jconfirm-title-c .jconfirm-icon-c {
863 margin-left: 8px;
864 margin-right: 0px;
865 }
866 }
867 }
868
869 .jconfirm.jconfirm-modern {
870 .jconfirm-bg {
871 background-color: slategray;
872 opacity: .6;
873 }
874
875 .jconfirm-box {
876 background-color: white;
877 box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12);
878 padding: 30px 30px 15px;
879
880 div.jconfirm-closeIcon {
881 color: rgba(0, 0, 0, 0.87);
882 top: 15px;
883 right: 15px;
884 }
885
886 div.jconfirm-title-c {
887 color: rgba(0, 0, 0, .87);
888 font-size: 24px;
889 font-weight: bold;
890 text-align: center;
891 margin-bottom: 10px;
892
893 .jconfirm-icon-c {
894 transition: transform .5s;
895 transform: scale(0);
896 display: block;
897 margin-right: 0px;
898 margin-left: 0px;
899 margin-bottom: 10px;
900 font-size: 69px;
901 color: #aaa;
902 }
903 }
904
905 div.jconfirm-content {
906 text-align: center;
907 font-size: 15px;
908 color: #777;
909 margin-bottom: 25px;
910
911 &:empty {
912 &:before {
913
914 }
915 &:after {
916
917 }
918 }
919 }
920 .jconfirm-buttons {
921 text-align: center;
922
923 button {
924 font-weight: bold;
925 text-transform: uppercase;
926 transition: background .1s;
927 padding: 10px 20px;
928
929 &.btn-success {
930
931 }
932 }
933 button + button {
934 margin-left: 4px;
935 }
936 }
937 }
938 &.jconfirm-open {
939 .jconfirm-box .jconfirm-title-c .jconfirm-icon-c {
940 transform: scale(1);
941 }
942 }
943 }