PluginProbe
WP Directory Kit / 1.5.7
WP Directory Kit v1.5.7
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 / elementor-elements / classes / includes / css / wdk-elementor-live-editor.scss

wdk-elementor-live-editor.scss in WP Directory Kit 1.5.7, at elementor-elements/classes/includes/css/wdk-elementor-live-editor.scss

654 lines 16.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .elementor-element {
2 .icon {
3 position: relative;
4 }
5 }
6
7 %wdk-icon-base {
8 font-family: "wdk-elements" !important; // use !important for extension overrides
9 speak: none;
10 font-style: normal;
11 font-weight: normal;
12 font-variant: normal;
13 text-transform: none;
14 line-height: 1;
15 -webkit-font-smoothing: antialiased;
16 -moz-osx-font-smoothing: grayscale;
17 }
18
19 [class^="divider-type-"]^="divider-type-""],
20 [class^="wdk-"]^="wdk-""],
21 [class*=" wdk-"]*=" wdk-""] {
22 @extend %wdk-icon-base;
23 }
24
25 #elementor-panel {
26 [class^="wdk-"]^="wdk-""], [class*=" wdk-"]*=" wdk-""] {
27 }
28 }
29
30 /*
31 * Icons Badge
32 */
33 .elementor-element-wrapper:not(.elementor-element--promotion) {
34 [class^="wdk-"]^="wdk-""],
35 [class*=" wdk-"]*=" wdk-""] {
36 &::after {
37 content: "PA";
38 font-family: "Montserrat", Sans-serif;
39 font-weight: 700;
40 font-size: 10px;
41 position: absolute;
42 right: 0.6em;
43 top: 0.6em;
44 border-radius: 2px;
45 padding: 2px;
46 }
47 }
48 }
49
50 .papro-dialog-buttons:not([style="display: none;"]) + button {
51 display: none;
52 }
53
54 // Pa icons mixins for before content, for easy management
55 @mixin wdk-icon-before($name, $code) {
56 .#{$name}:before {
57 content: $code;
58 }
59 }
60
61 // Generate pa icon classes
62 @include wdk-icon-before('wdk-dash-icon', "\e900");
63 @include wdk-icon-before('wdk-banner', "\e904");
64 @include wdk-icon-before('wdk-blog', "\e906");
65 @include wdk-icon-before('wdk-button', "\e908");
66 @include wdk-icon-before('wdk-carousel', "\e909");
67 @include wdk-icon-before('wdk-contact-form', "\e90c");
68 @include wdk-icon-before('wdk-countdown', "\e90e");
69 @include wdk-icon-before('wdk-counter', "\e90f");
70 @include wdk-icon-before('wdk-dual-header', "\e911");
71 @include wdk-icon-before('wdk-fancy-text', "\e914");
72 @include wdk-icon-before('wdk-maps', "\e915");
73 @include wdk-icon-before('wdk-grid-icon', "\e927");
74 @include wdk-icon-before('wdk-image-button', "\e91d");
75 @include wdk-icon-before('wdk-image-scroll', "\e921");
76 @include wdk-icon-before('wdk-image-separator', "\e922");
77 @include wdk-icon-before('wdk-lottie-animations', "\e924");
78 @include wdk-icon-before('wdk-modal-box', "\e92a");
79 @include wdk-icon-before('wdk-person', "\e931");
80 @include wdk-icon-before('wdk-pricing-table', "\e92d");
81 @include wdk-icon-before('wdk-progress-bar', "\e92e");
82 @include wdk-icon-before('wdk-testimonials', "\e932");
83 @include wdk-icon-before('wdk-title', "\e917");
84 @include wdk-icon-before('wdk-vscroll', "\e935");
85 @include wdk-icon-before('wdk-video-box', "\e936");
86 @include wdk-icon-before('wdk-icon-list', "\e907");
87 @include wdk-icon-before('wdk-woo-products', "\e952");
88 @include wdk-icon-before('wdk-woo-cats', "\e950");
89 @include wdk-icon-before('wdk-woo-cta', "\e951");
90 @include wdk-icon-before('wdk-mini-cart', "\e953");
91 @include wdk-icon-before('wdk-mega-menu', "\e928");
92 @include wdk-icon-before('wdk-tags-cloud', "\e93f");
93 @include wdk-icon-before('wdk-world-clock', "\e943");
94 @include wdk-icon-before('wdk-tiktok-feed', "\e945");
95 @include wdk-icon-before('wdk-search-form', "\e94d");
96 @include wdk-icon-before('wdk-mobile-menu', "\e94e");
97 @include wdk-icon-before('wdk-weather', "\e942");
98 @include wdk-icon-before('wdk-post-notifications', "\e940");
99 @include wdk-icon-before('wdk-ticker', "\e941");
100 @include wdk-icon-before('wdk-pinterest', "\e945");
101 @include wdk-icon-before('wdk-media-wheel', "\e947");
102 @include wdk-icon-before('wdk-tiktok', "\e946");
103 @include wdk-icon-before('wdk-showcase', "\e94c");
104
105 // Directional overrides for RTL/LTR
106 html:not([dir="rtl"]) {
107 .wdk-tiktok-feed:before { margin-right: -2px; }
108 }
109 [dir="rtl"]="rtl""] {
110 .wdk-tiktok-feed:before { margin-left: -2px; }
111 }
112
113 // Editor/Control Classes
114 .editor-wdk-doc {
115 font-style: italic;
116 line-height: 1.2;
117 font-size: 12px;
118 }
119 .editor-wdk-spacer {
120 margin-top: 1.5em;
121 }
122
123 .editor-wdk-icon-control {
124 .elementor-control-icons--inline__none {
125 display: none;
126 }
127 .elementor-control-icons--inline__icon {
128 min-width: 50px;
129 }
130 }
131
132 .editor-wdk-color-control label.elementor-control-title {
133 -webkit-box-flex: 0;
134 -ms-flex-positive: 0;
135 flex-grow: 0;
136 }
137
138 .elementor-control {
139 &.editor-wdk-control-disabled {
140 padding-top: 15px;
141 background: rgba(230, 233, 236, 0.5);
142 pointer-events: none;
143 }
144 &.editor-wdk-control-notice {
145 padding-left: 0 !important;
146 padding-right: 0 !important;
147 }
148 }
149
150 // Colors for docs and links
151 .elementor-panel {
152 .elementor-control-section_pa_docs .elementor-panel-heading-title.elementor-panel-heading-title,
153 .elementor-control-raw-html.editor-wdk-doc a {
154 color: #0f6aa7;
155 }
156 }
157 .elementor-control-raw-html .wdk-notice-bold {
158 font-weight: bold;
159 }
160
161 #elementor-panel__editor__help__link {
162 &[href^="https://wdkaddons.com/"]^="https://wdkaddons.com/""],
163 &[href*="PLLpZVOYpMtTArB4hrlpSnDJB36D2sdoTv"]*="PLLpZVOYpMtTArB4hrlpSnDJB36D2sdoTv""] {
164 &::before {
165 content: "\e900";
166 font-family: "wdk-elements" !important;
167 font-size: 20px;
168 font-style: normal;
169 font-weight: normal;
170 font-variant: normal;
171 text-transform: none;
172 line-height: 1;
173 -webkit-font-smoothing: antialiased;
174 -moz-osx-font-smoothing: grayscale;
175 margin: -1px 4px 0;
176 }
177 }
178 }
179
180 .wdk-dash-icon {
181 font-size: 11px !important;
182 padding-right: 1px;
183 }
184
185 .elementor-update-preview.editor-wdk-preview-update {
186 margin: 0;
187 margin-bottom: 8px;
188 }
189
190 // PRO Elements SCSS
191 @mixin wdk-pro-icon-before($name, $code) {
192 .#{$name}:before {
193 content: $code;
194 }
195 }
196 @include wdk-pro-icon-before('wdk-pro-trust-reviews', "\e900");
197 @include wdk-pro-icon-before('wdk-pro-yelp-reviews', "\e93b");
198 @include wdk-pro-icon-before('wdk-pro-behance-feed', "\e905");
199 @include wdk-pro-icon-before('wdk-pro-charts', "\e90a");
200 @include wdk-pro-icon-before('wdk-pro-content-switcher', "\e90d");
201 @include wdk-pro-icon-before('wdk-pro-facebook-feed', "\e912");
202 @include wdk-pro-icon-before('wdk-pro-facebook-reviews', "\e913");
203 @include wdk-pro-icon-before('wdk-pro-flip-box', "\e919");
204 @include wdk-pro-icon-before('wdk-pro-floating-block', "\e906");
205 @include wdk-pro-icon-before('wdk-pro-google-reviews', "\e916");
206 @include wdk-pro-icon-before('wdk-pro-horizontal-scroll', "\e918");
207 @include wdk-pro-icon-before('wdk-pro-hot-spot', "\e91f");
208 @include wdk-pro-icon-before('wdk-pro-icon-box', "\e91a");
209 @include wdk-pro-icon-before('wdk-pro-ihover', "\e91b");
210 @include wdk-pro-icon-before('wdk-pro-image-accordion', "\e91c");
211 @include wdk-pro-icon-before('wdk-pro-image-comparison', "\e91e");
212 @include wdk-pro-icon-before('wdk-pro-image-layers', "\e920");
213 @include wdk-pro-icon-before('wdk-pro-instagram-feed', "\e923");
214 @include wdk-pro-icon-before('wdk-pro-magic-section', "\e926");
215 @include wdk-pro-icon-before('wdk-pro-messenger-chat', "\e929");
216 @include wdk-pro-icon-before('wdk-pro-multi-scroll', "\e92b");
217 @include wdk-pro-icon-before('wdk-pro-notification-bar', "\e902");
218 @include wdk-pro-icon-before('wdk-pro-preview-window', "\e92c");
219 @include wdk-pro-icon-before('wdk-pro-separator', "\e910");
220 @include wdk-pro-icon-before('wdk-pro-table', "\e92f");
221 @include wdk-pro-icon-before('wdk-pro-tabs', "\e930");
222 @include wdk-pro-icon-before('wdk-pro-twitter-feed', "\e933");
223 @include wdk-pro-icon-before('wdk-pro-unfold', "\e934");
224 @include wdk-pro-icon-before('wdk-pro-whatsapp', "\e938");
225 @include wdk-pro-icon-before('wdk-pro-color-transition', "\e903");
226 @include wdk-pro-icon-before('wdk-pro-svg-drawer', "\e93d");
227 @include wdk-pro-icon-before('wdk-pro-site-logo', "\e93e");
228 @include wdk-pro-icon-before('wdk-pro-post-listing', "\e944");
229
230 // Divider types
231 .divider-type-icon:before { content: "\e948"; }
232 .divider-type-image:before { content: "\e949"; }
233 .divider-type-lottie:before { content: "\e94a"; }
234 .divider-type-code:before { content: "\e94b"; }
235
236 .editor-wdk-img {
237 max-width: 30px !important;
238 max-height: 30px;
239 vertical-align: middle;
240 }
241
242 .wdk-promotion-btn {
243 background-color: #252c59 !important;
244 width: 50% !important;
245 }
246 .wdk-promotion-pro-btn {
247 display: inline-block;
248 text-align: center;
249 background-color: #f47216;
250 color: #fff;
251 line-height: normal;
252
253 &:hover { color: #fff; }
254 }
255 .wdk-promotion-dialog {
256 .eicon-pro-icon {
257 color: #f47216 !important;
258 margin: 0 6px !important;
259 }
260 .dialog-button {
261 font-size: 10px !important;
262 letter-spacing: 0.3px;
263 width: calc(50% - 5px) !important;
264 }
265 }
266 html:not([dir="rtl"]) {
267 .wdk-promotion-btn { margin-right: 5px; }
268 .wdk-promotion-pro-btn { margin-left: 5px; }
269 }
270 [dir="rtl"]="rtl""] {
271 .wdk-promotion-pro-btn { margin-right: 5px; }
272 .wdk-promotion-btn { margin-left: 5px; }
273 }
274 .elementor-panel .wdk-promotion-element > .elementor-element > .eicon-lock {
275 right: auto;
276 left: 0.6em;
277 }
278
279 .elementor-editor-active .tipsy-inner {
280 line-height: 15px;
281 }
282 .papro-upgrade-notice {
283 font-size: 12px;
284 font-weight: 300;
285 font-style: italic;
286 line-height: 1.4;
287 }
288
289 // Floating effect fix
290 .elementor-slider .noUi-base .noUi-handle-upper .noUi-tooltip {
291 top: -100%;
292 }
293
294 .papro-btn-block {
295 width: 100% !important;
296 margin: -10px 0 10px;
297 }
298
299 .elementor-template-wdk-live-editor-modal-container {
300 display: flex;
301 }
302
303 .wdk-live-editor-iframe-modal { display: none; }
304
305 .wdk-dynamic-content-modal {
306 -js-display: flex;
307 display: -webkit-box;
308 display: -webkit-flex;
309 display: -moz-box;
310 display: -ms-flexbox;
311 display: flex;
312 justify-content: center;
313
314 .dialog-widget-content {
315 position: static !important;
316 max-width: 90% !important;
317 border-radius: 0;
318 }
319 .dialog-message { overflow: unset !important; }
320 }
321 .wdk-live-editor-iframe-modal {
322 display: none;
323
324 .elementor-templates-modal__header__logo__title { margin-right: 35px; }
325 .dialog-lightbox-header { background-color: #0c0d0e; }
326 .dialog-message { position: relative; }
327 iframe {
328 position: absolute;
329 top: 0; bottom: 0; right: 0; left: 0;
330 width: 100%;
331 height: 100%;
332 }
333 .elementor-templates-modal__header__close { margin-left: 15px; }
334 }
335 #elementor-template-wdk-live-editor-modal-container .dialog-message {
336 height: calc(100vh - 60px);
337 max-height: calc(100vh - 60px);
338 }
339
340 .elementor-device-desktop #elementor-preview-responsive-wrapper { min-width: auto !important; }
341
342 #wdk-live-editor-logo .wdk-template-modal-header-logo-icon img {
343 width: 30px;
344 height: 30px;
345 }
346 #wdk-live-temp-title {
347 width: 400px;
348 border-radius: 3px 0 0 3px;
349 }
350
351 .wdk-live-temp-notice {
352 margin: 0 10px;
353 font-style: italic;
354 font-weight: normal;
355 text-transform: none;
356 }
357
358 #wdk-insert-live-temp {
359 white-space: nowrap;
360 border-radius: 0 3px 3px 0;
361 }
362 #wdk-insert-live-temp,
363 #wdk-live-temp-title { padding: 8px 10px; }
364
365 .wdk-live-editor-title {
366 display: flex;
367 -webkit-box-align: center;
368 -webkit-align-items: center;
369 -moz-box-align: center;
370 -ms-flex-align: center;
371 align-items: center;
372 }
373
374 .wdk-modal-expanded {
375 .dialog-lightbox-widget-content {
376 max-width: 100% !important;
377 margin: 0 !important;
378 }
379 .dialog-lightbox-message { max-height: 100vh; }
380 #wdk-live-editor-control-iframe {
381 height: calc(100vh - 50px);
382 }
383 }
384
385 .wdk-live-temp-title.control-hidden { display: none; }
386 .wdk-live-temp-label label { font-weight: 900; }
387
388 .elementor-control-type-wdk-tax-filter select {
389 padding-left: 5px;
390 padding-right: 20px;
391 cursor: pointer;
392 }
393 .elementor-control-pa_loop_template_id .elementor-template-query-control-actions,
394 .elementor-control-pa_grid_template_id .elementor-template-query-control-actions {
395 display: none;
396 }
397
398 .elementor-image-choices {
399 margin: 0 0 -2px 0;
400 img {
401 max-width: 100%;
402 height: auto;
403 border: 0;
404 display: block;
405 }
406
407 &:after {
408 content: "";
409 clear: both;
410 display: block;
411 }
412 .elementor-image-choices-label {
413 border: 3px solid rgba(0, 0, 0, 0.08);
414 padding: 2px;
415 }
416 }
417 .image-choose-label-block {
418 padding: 3px;
419 display: inline-block;
420 -webkit-box-sizing: border-box;
421 box-sizing: border-box;
422 margin-left: -3px;
423 vertical-align: middle;
424
425 &:nth-child(4n) {
426 clear: both;
427 }
428 .imagesmall {
429 width: 100%;
430 height: auto;
431 display: block;
432 cursor: pointer;
433
434 &.imagesmall-svg {
435 height: 50px;
436 background-color: #afafaf;
437 }
438 }
439 input { display: none !important; }
440 }
441
442 .elementor-control-presets img {
443 aspect-ratio: 2/2;
444 object-fit: cover;
445 object-position: center;
446 }
447
448 .elementor-image-choices-label { display: block; }
449
450 .elementor-control-wdk_gdivider_defaults {
451 .elementor-image-choices {
452 .elementor-image-choices-label { border-width: 1px; }
453 input.checked + .elementor-image-choices-label {
454 border: 1px solid #a4afb7;
455 border-radius: 0px;
456 padding: 2px;
457 }
458 height: 195px;
459 position: relative;
460 overflow: hidden;
461 overflow-y: auto;
462 .elementor-image-choices-label {
463 height: 50px;
464 svg {
465 height: 100%;
466 width: 100%;
467 cursor: pointer;
468 &,
469 path {
470 fill: #afafaf;
471 }
472 }
473 }
474 }
475 }
476
477 .elementor-image-choices input.checked + .elementor-image-choices-label {
478 border: 2px solid #a4afb7;
479 border-radius: 12px;
480 }
481
482 .wdk-rotate-icon {
483 transform: rotate(90deg);
484 }
485
486 // Copy Paste functionality
487 #wdk-paste-area-dialog {
488 text-align: center;
489
490 .dialog-header {
491 -webkit-padding-before: 60px;
492 padding-block-start: 60px;
493 font-size: 30px;
494 font-size: 23px;
495 text-align: center;
496 margin-bottom: 15px;
497 }
498 .dialog-message {
499 padding: 0 15px 15px;
500 font-size: 15px;
501 position: relative;
502 font-size: 14px;
503 line-height: 1.3;
504 margin-bottom: 10px;
505 }
506 #wdk-paste-area-dialog__input {
507 background: transparent;
508 color: transparent;
509 border-color: transparent;
510 padding: 0;
511 margin: 0;
512 height: 100px;
513 position: absolute;
514 top: -60px;
515 left: 0;
516 right: 0;
517 &:focus {
518 border-color: transparent;
519 outline: none;
520 }
521 }
522 .dialog-widget-content {
523 width: 400px;
524 padding: 25px;
525 .eicon-loading { display: none; }
526 &.e-state-loading .eicon-loading {
527 display: block;
528 -webkit-margin-before: 15px;
529 margin-block-start: 15px;
530 }
531 }
532 .dialog-close-button {
533 margin-top: 0;
534 z-index: 11;
535 }
536 input#wdk-paste-input {
537 background: transparent;
538 color: transparent;
539 border-color: transparent;
540 padding: 0;
541 margin: 0;
542 height: 100%;
543 position: absolute;
544 top: 0;
545 left: 0;
546 right: 0;
547 }
548 }
549
550 // Panel loader styling
551 #elementor-panel-state-loading {
552 flex-direction: column;
553 background-color: hsla(0, 0%, 100%, 0.8) !important;
554
555 .wdk-editor-panel-loader {
556 font-size: 14px;
557 font-weight: 400;
558 line-height: 1.2;
559 a {
560 transition: all 0.3s ease-in-out;
561 }
562 }
563 .eicon-loading {
564 font-size: 20px !important;
565 background: white;
566 padding: 12px;
567 border-radius: 50%;
568 box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
569 }
570 }
571 .wdk-editor-panel-loader {
572 text-align: center;
573 line-height: 1.4em;
574 margin-top: 20px;
575 p {
576 font-size: 20px;
577 color: black;
578 }
579 }
580 .wdk-editor-btn {
581 display: block;
582 padding: 10px 20px;
583 border-radius: 8px;
584 transition: all 0.3s ease-in-out;
585 font-weight: 500;
586 font-size: 13px;
587 }
588 .wdk-editor-panel-loader-info {
589 color: #3756e1;
590 border: 1px solid #3756e1;
591 margin: 20px 0 10px;
592
593 &:hover { color: #3756e1; }
594 }
595 .wdk-disable-unused {
596 background-color: #3756e1;
597 color: #fff;
598 }
599 .wdk-promote-box {
600 text-align: center;
601 svg {
602 width: 110px;
603 height: 110px;
604 }
605 }
606 .addon-promotion { padding: 15px; }
607
608 .papro-promote-title {
609 font-size: 16px;
610 font-weight: 700;
611 line-height: 1.4;
612 margin-top: 15px;
613 }
614 .papro-promote-message {
615 line-height: 1.8;
616 font-size: 12px;
617 margin-top: 5px;
618
619 + .wdk-promote-ctas {
620 margin-top: 15px;
621 }
622 }
623 .wdk-promote-ctas {
624 display: flex;
625 flex-direction: row;
626 justify-content: space-between;
627 > a.elementor-button {
628 display: flex;
629 justify-content: center;
630 align-items: center;
631 }
632 }
633 .wdk-promote-box.addon-promotion .wdk-promote-ctas {
634 flex-direction: column;
635 }
636 .wdk-promote-box .elementor-button {
637 color: #fff;
638 padding: 10px;
639 border: none;
640 box-shadow:
641 0 0 1px rgba(0, 0, 0, 0.1),
642 0 2px 2px rgba(0, 0, 0, 0.1);
643 }
644
645 .widget-box .elementor-button {
646 width: calc(50% - 5px);
647 }
648 .wdk-promote-ctas .elementor-button {
649 &.wdk-promote-demo { background-color: #252c59; }
650 &.wdk-promote-upgrade { background-color: #ff6000; }
651 }
652 .addon-promotion .elementor-button.wdk-promote-upgrade { margin-top: 7px; }
653 .elementor-control-pa_pro_promotion_notice a { color: #2463eb !important; }
654