PluginProbe
WP Directory Kit / 1.5.9
WP Directory Kit v1.5.9
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
← All changes | admin/css/wpdirectorykit-admin.scss +976 -238 1.1.6 → 1.5.9 View file →
@@ -7,22 +7,25 @@
7 7 #adminmenu .wp-has-current-submenu ul a[href="admin.php?page=wdk_importdemo"] {
8 8 display: none;
9 9 }
10 10
11 -.wdk-wrap .clearfix:after
12 -{
11 +.wdk-wrap .clearfix:after {
13 12 content: '';
14 13 display: table;
15 14 clear: both;
16 15 }
17 16
17 +.wdk-wrap {
18 + @import 'wdk-utilities.scss';
19 +}
20 +
18 21 .wdk-wrap .postbox-header {
19 - max-width: 100%;
20 - min-width: 100%;
21 - h3
22 - {
23 - padding-left:15px;
22 + max-width: 100%;
23 + min-width: 100%;
24 24
25 + h3 {
26 + padding-left: 15px;
27 +
25 28 &.wide {
26 29 flex: 1 2 auto;
27 30 }
28 31 }
@@ -27,60 +30,51 @@
27 30 }
28 31 }
29 32 }
30 33
31 -.wdk-wrap .pull_right
32 -{
33 - float:right;
34 +.wdk-wrap .pull_right {
35 + float: right;
34 36 }
35 37
36 38 .wdk-wrap .wdk-depend-hidden,
37 -.wdk-wrap .hidden
38 -{
39 - display:none;
39 +.wdk-wrap .hidden {
40 + display: none;
40 41 }
41 42
42 -.wdk-wrap .img-link
43 -{
43 +.wdk-wrap .img-link {
44 44 display: block;
45 45 }
46 46
47 -.actions_column a:hover span
48 -{
49 - color:black;
47 +.actions_column a:hover span {
48 + color: black;
50 49 }
51 50
52 -.wp-list-table a.title
53 -{
51 +.wp-list-table a.title {
54 52 font-weight: bold;
55 53 }
54 +
56 55 /* Sortable */
57 56
58 -.wdk-wrap .ui-sortable-handle a
59 -{
57 +.wdk-wrap .ui-sortable-handle a {
60 58 text-decoration: none;
61 59 border: 0px;
62 60 color: black;
63 61 }
64 62
65 -.wdk-wrap .ui-sortable-handle a:hover
66 -{
63 +.wdk-wrap .ui-sortable-handle a:hover {
67 64 color: #135e96;
68 65 }
69 66
70 -.wdk-wrap .ui-sortable-handle h3 a
71 -{
67 +.wdk-wrap .ui-sortable-handle h3 a {
72 68 font-size: 16px;
73 69 }
74 70
75 -.wdk-wrap .ui-sortable-handle h3 span
76 -{
71 +.wdk-wrap .ui-sortable-handle h3 span {
77 72 padding-right: 15px;
78 73 }
79 74
80 -.wdk-wrap .hndle
81 -{
82 - display:block;
75 +.wdk-wrap .hndle {
76 + display: block;
83 77 }
84 78
85 79 .wdk-wrap .listing_edit_map {
86 80 height: 350px;
@@ -88,15 +82,13 @@
88 82 }
89 83
90 84 /* Alerts */
91 85
92 -.wdk-wrap .alert
93 -{
86 +.wdk-wrap .alert {
94 87 border-radius: 0;
95 88 }
96 89
97 -.wdk-wrap .alert.alert-success
98 -{
90 +.wdk-wrap .alert.alert-success {
99 91 background: #E6F4E7;
100 92 color: #376637;
101 93 border-left: 3px solid #88BF88;
102 94 margin: 0px 0px 5px 0px;
@@ -103,10 +95,9 @@
103 95 padding: 15px;
104 96 font-weight: bold;
105 97 }
106 98
107 -.wdk-wrap .alert.alert-danger
108 -{
99 +.wdk-wrap .alert.alert-danger {
109 100 background: #FFE6DF;
110 101 color: #AB3C1B;
111 102 border-left: 3px solid #E98B6F;
112 103 margin: 0px 0px 5px 0px;
@@ -113,10 +104,9 @@
113 104 padding: 15px;
114 105 font-weight: bold;
115 106 }
116 107
117 -.wdk-wrap .alert.alert-info
118 -{
108 +.wdk-wrap .alert.alert-info {
119 109 background: #cce5ff;
120 110 color: #3d648e;
121 111 border-left: 3px solid #3d648e;
122 112 margin: 0px 0px 5px 0px;
@@ -126,50 +116,42 @@
126 116
127 117 /* Labels */
128 118 .wdk-wrap .label {
129 119 display: inline-block;
130 -}
131 -
132 -.wdk-wrap .label.label-success {
133 - background: #E6F4E7;
134 - color: #376637;
135 120 margin: 0px 5px 5px 0px;
136 - padding: 5px;
137 -}
121 + padding: 6px 6px;
122 + font-size: 10px;
123 + font-weight: 700;
124 + line-height: 1;
125 + color: #fff;
126 + border-radius: 2px;
138 127
139 -.wdk-wrap .label.label-danger {
140 - background: #FFE6DF;
141 - color: #AB3C1B;
142 - margin: 0px 5px 5px 0px;
143 - padding: 5px;
144 -}
128 + &.label-success {
129 + background: linear-gradient(to right, #5cb85c, #90cf90);
130 + }
145 131
146 -.wdk-wrap .label.label-info {
147 - background: #cce5ff;
148 - color: #3d648e;
149 - margin: 0px 5px 5px 0px;
150 - padding: 5px;
151 -}
132 + &.label-danger {
133 + background: linear-gradient(to right, #fe9365, #ffb08e);
134 + }
152 135
153 -.wdk-wrap .label.label-warning {
154 - color: #664d03;
155 - background-color: #fff3cd;
156 - border-color: #ffecb5;
157 - margin: 0px 5px 5px 0px;
158 - padding: 5px;
136 + &.label-info {
137 + background: linear-gradient(to right, #5bc0de, #5bc0ded9);
138 + }
139 +
140 + &.label-warning {
141 + background: linear-gradient(to right, #d9534f, #d9534fa1);
142 + }
159 143 }
160 144
161 145 /* Custom fields layout */
162 146
163 -div.wdk-field-edit
164 -{
147 +div.wdk-field-edit {
165 148 margin: 15px 0px;
166 149 display: flex;
167 150 justify-content: flex-start;
168 151 }
169 152
170 -div.wdk-field-edit label
171 -{
153 +div.wdk-field-edit label {
172 154 width: auto;
173 155 display: inline-block;
174 156 vertical-align: top;
175 157 max-width: 80px;
@@ -186,9 +168,9 @@
186 168 }
187 169
188 170 div.wdk-field-container {
189 171 & {
190 - padding:0px;
172 + padding: 0px;
191 173 }
192 174
193 175 .wdk_dropdown_tree {
194 176 max-width: 351px;
@@ -204,12 +186,13 @@
204 186 .wdk-datetime-group {
205 187 display: flex;
206 188 flex-wrap: wrap;
207 189 max-width: 230px;
190 +
208 191 select {
209 192 width: 60px;
210 193 }
211 -
194 +
212 195 .regular-text {
213 196 min-width: 90px;
214 197 flex: 1 2;
215 198 }
@@ -214,9 +197,10 @@
214 197 flex: 1 2;
215 198 }
216 199 }
217 200
218 - input,select {
201 + input,
202 + select {
219 203 margin-bottom: 5px;
220 204 }
221 205 }
222 206
@@ -223,26 +207,32 @@
223 207
224 208 div.wdk-field-edit div.wdk-field-container {
225 209 & {
226 210 display: inline-block;
227 - padding:0px 15px;
211 + padding: 0px 15px;
228 212 padding-right: 0;
229 213 flex: 1 2 auto;
230 214 }
231 -
232 - .wdk_dropdown_tree,
233 - input:not([type="checkbox"]):not([type="radio"]),
234 - select {
215 +
216 + .wdk_dropdown_tree,
217 + input:not([type="checkbox"]):not([type="radio"]),
218 + select {
235 219 width: 100%;
236 220 max-width: 230px;
237 221 }
238 -
239 - .wdk_dropdown_tree > .btn-group {
222 +
223 + .wdk_dropdown_tree>.btn-group {
240 224 width: 100%;
241 225 display: flex;
242 226 height: auto;
243 227 }
244 -
228 +
229 + .wdk_dropdown_tree>.btn-group {
230 + height: 40px;
231 + border-radius: 2px;
232 + }
233 +
234 +
245 235 .wdk_dropdown_tree button {
246 236 padding: 0 8px;
247 237 height: auto;
248 238 box-shadow: 0 0 0 transparent;
@@ -250,14 +240,14 @@
250 240 background-color: #fff;
251 241 color: #2c3338;
252 242 min-height: 30px;
253 243 }
254 -
244 +
255 245 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle,
256 246 .wdk_dropdown_tree button {
257 - border-radius: 4px;
247 + border-radius: 2px;
258 248 }
259 -
249 +
260 250 .wdk_dropdown_tree button:first-child {
261 251 border-top-right-radius: 0;
262 252 border-bottom-right-radius: 0;
263 253 }
@@ -266,12 +256,17 @@
266 256 border: 1px solid #8c8f94;
267 257 }
268 258
269 259 .wdk_dropdown_tree .list_scroll {
270 - border-left: 1px solid #8c8f94;
271 260 left: 0;
272 261 }
273 -
262 +
263 + .wdk_dropdown_tree .list_container {
264 + width: 100%;
265 + border: 1px solid #8c8f94;
266 + box-sizing: border-box;
267 + }
268 +
274 269 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle:last-child {
275 270 border-top-left-radius: 0;
276 271 border-bottom-left-radius: 0;
277 272
@@ -280,9 +275,9 @@
280 275 background-size: 16px 16px;
281 276 cursor: pointer;
282 277 vertical-align: middle;
283 278 }
284 -
279 +
285 280 .wdk_dropdown_tree {
286 281 min-width: initial;
287 282 position: relative;
288 283 }
@@ -292,9 +287,9 @@
292 287 padding: 0 8px;
293 288 }
294 289
295 290 .wdk_dropdown_tree .list_container .input-group-addon {
296 - &{
291 + & {
297 292 position: relative;
298 293 }
299 294
300 295 & i {
@@ -299,15 +294,15 @@
299 294
300 295 & i {
301 296 position: absolute;
302 297 left: 0;
303 - margin-left: 5px;
298 + margin-left: 11px;
304 299 top: 50%;
305 300 margin-top: -9px;
306 301 }
307 -
302 +
308 303 & i.fa-spin {
309 - margin-left: 7px;
304 + margin-left: 11px;
310 305 margin-top: -7px;
311 306 }
312 307
313 308 .fa:after {
@@ -328,49 +323,92 @@
328 323
329 324 .fa.fa-search:after {
330 325 content: "\f179";
331 326 }
332 -
327 +
333 328 .loader-spiner.fa.fa-spinner:after {
334 329 content: "\f113";
335 330 }
336 -
331 +
337 332 .loader-spiner.fa.fa-spinner {
338 333 -webkit-animation: wdk-spin 2s infinite linear;
339 - animation: wdk-spin 2s infinite linear;
334 + animation: wdk-spin 2s infinite linear;
340 335 font-family: dashicons;
341 336 font-size: 18px;
342 - margin-left: 6px;
337 + margin-left: 11px;
343 338 margin-top: -9px;
344 339 }
345 -
340 +
346 341 @keyframes wdk-spin {
347 342 0% {
348 - -webkit-transform: rotate(0deg);
349 - transform: rotate(0deg);
350 - }
343 + -webkit-transform: rotate(0deg);
344 + transform: rotate(0deg);
345 + }
346 +
351 347 100% {
352 - -webkit-transform: rotate(360deg);
353 - transform: rotate(360deg);
354 - }
348 + -webkit-transform: rotate(360deg);
349 + transform: rotate(360deg);
350 + }
355 351 }
356 352 }
357 353
358 354 }
359 355
356 +
357 +div.wdk-field-edit.field-error div.wdk-field-container {
358 + background: #FFE6DF;
359 + input, select, textarea,.wp-editor-container {
360 + border-color: rgb(163, 1, 1);
361 + }
362 +
363 + p.wdk-hint.wdk-error {
364 + color: rgb(163, 1, 1);
365 + }
366 +}
367 +
360 368 .form-table p.wdk-hint,
361 -div.wdk-field-edit p.wdk-hint
362 -{
369 +div.wdk-field-edit p.wdk-hint {
363 370 font-style: italic;
364 371 }
365 372
373 +div.wdk-field-edit.inline {
374 + align-items: center;
375 +
376 + label {
377 + font-weight: 600;
378 + width: auto;
379 + flex: 0 0;
380 + max-width: initial;
381 + }
382 +
383 + .wdk-field-container {
384 + margin: -5px -5px;
385 + }
386 +
387 + .regular-text {
388 + margin: 5px 5px;
389 + flex: 1 2;
390 + }
391 +}
392 +
366 393 /* Tables */
367 394
368 -.wdk-wrap .widefat .actions_column
369 -{
395 +.wdk-wrap .widefat #the-list {
396 + display: flex;
397 + flex-wrap: wrap;
398 + gap: 15px 15px;
399 + align-items: flex-start;
400 + justify-content: flex-start;
401 +}
402 +
403 +.wdk-wrap .widefat .actions_column {
370 404 text-align: right;
371 405 }
372 406
407 +.wdk-wrap .widefat .static {
408 + width: 5%;
409 +}
410 +
373 411 .wdk-wrap .form-table td {
374 412 vertical-align: top;
375 413 }
376 414
@@ -393,13 +431,13 @@
393 431 min-width: 400px;
394 432 padding: 22px 0;
395 433 }
396 434
397 -.wdk-wrap .wdk-side-content + .form-table td {
435 +.wdk-wrap .wdk-side-content+.form-table td {
398 436 padding-right: 0;
399 437 }
400 438
401 -.wdk-wrap .wdk-side-content + .form-table th,
439 +.wdk-wrap .wdk-side-content+.form-table th,
402 440 .wdk-wrap .wdk-side-content .form-table th {
403 441 max-width: 85px;
404 442 padding-right: 10px;
405 443 }
@@ -406,11 +444,10 @@
406 444
407 445
408 446 /* Filtering above/below tables */
409 447
410 -.wdk-wrap .tablenav.top .left
411 -{
412 - float:left;
448 +.wdk-wrap .tablenav.top .left {
449 + float: left;
413 450 }
414 451
415 452 .wdk-wrap .inputbox_map {
416 453 height: 250px;
@@ -418,15 +455,16 @@
418 455 max-width: 450px
419 456 }
420 457
421 458 /* Visual Builder Search Forms */
422 -.wdk-builder-container .widget-title h3, .widget-title h4 {
459 +.wdk-builder-container .widget-title h3,
460 +.widget-title h4 {
423 461 white-space: initial;
424 462 }
425 -.wdk-builder-container .wdk-builder-elements-column
426 -{
463 +
464 +.wdk-builder-container .wdk-builder-elements-column {
427 465 margin-bottom: 15px;
428 - display:block;
466 + display: block;
429 467 width: 40%;
430 468 float: left;
431 469 padding-top: 6px;
432 470 }
@@ -443,10 +481,9 @@
443 481 margin-top: 0;
444 482 margin-right: 15px;
445 483 }
446 484
447 -.wdk-builder-elements
448 -{
485 +.wdk-builder-elements {
449 486 width: 100%;
450 487 min-height: auto;
451 488 box-sizing: border-box;
452 489 padding: 15px 15px 15px 0px;
@@ -455,21 +492,19 @@
455 492 grid-column-gap: 10px;
456 493 grid-row-gap: 0;
457 494 }
458 495
459 -.wdk-builder-elements .widget
460 -{
496 +.wdk-builder-elements .widget {
461 497 width: 100%;
462 498 }
463 499
464 -.wdk-builder-selected
465 -{
500 +.wdk-builder-selected {
466 501 margin-top: 6px;
467 - width:80%;
502 + width: 80%;
468 503 border: 1px solid #c3c4c7;
469 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
470 - min-height:400px;
471 - float:left;
504 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
505 + min-height: 400px;
506 + float: left;
472 507 box-sizing: border-box;
473 508 padding: 15px;
474 509 }
475 510
@@ -475,19 +510,18 @@
475 510
476 511 #wdk-drop .widget.ui-draggable.ui-sortable-handle,
477 512 #wdk-drop .ui-sortable-placeholder.widget-placeholder,
478 513 .wdk-wrap .drop-container .widget.ui-draggable.ui-sortable-handle,
479 -.wdk-wrap .drop-container .ui-sortable-placeholder.widget-placeholder
480 -{
481 - width:300px;
482 - margin:0px 15px 15px 0px;
483 - float:left;
514 +.wdk-wrap .drop-container .ui-sortable-placeholder.widget-placeholder {
515 + width: 300px;
516 + margin: 0px 15px 15px 0px;
517 + float: left;
484 518 }
485 519
520 +#wdk-drag .widget-action-remove,
486 521 #wdk-drag .widget-action,
487 -#wdk-drag .widget-inside
488 -{
489 - display:none !important;
522 +#wdk-drag .widget-inside {
523 + display: none !important;
490 524 }
491 525
492 526
493 527 .wdk-builder-container button[aria-expanded="true"] .toggle-indicator::before {
@@ -494,34 +528,53 @@
494 528 content: "\f142"
495 529 }
496 530
497 531 #wdk-drop .widget-inside,
498 -.wdk-wrap .drop-container .widget-inside
499 -{
532 +.wdk-wrap .drop-container .widget-inside {
500 533 padding: 5px;
501 534 }
502 535
536 +.wdk-wrap .widget-top .widget-action {
537 + padding: 10px 0px;
538 + }
539 +
540 +.wdk-wrap .widget-action-remove {
541 + border: 0;
542 + margin: 0;
543 + padding: 11px 0px;
544 + margin-right: 10px;
545 + background: none;
546 + cursor: pointer;
547 + vertical-align: top;
548 + color: #50575e;
549 + transition: all .15s;
550 +
551 + &:hover {
552 + color:#000;
553 + }
554 +}
555 +
556 +
557 +
558 +
503 559 /* Visual Builder result item */
504 560
505 -.wdk-wrap .drop-container
506 -{
561 +.wdk-wrap .drop-container {
507 562 width: 60%;
508 563 float: left;
509 564 }
510 565
511 -.wdk-wrap .drop-container .wdk-builder-selected
512 -{
513 - width:100%;
566 +.wdk-wrap .drop-container .wdk-builder-selected {
567 + width: 100%;
514 568 min-height: 100px;
515 569 }
516 570
517 -.wdk-wrap .drop-container>h3
518 -{
519 - padding-bottom:0px;
520 - margin-bottom:0px;
571 +.wdk-wrap .drop-container>h3 {
572 + padding-bottom: 0px;
573 + margin-bottom: 0px;
521 574 }
522 575
523 -.wdk-wrap .listing_custom_fields div.wdk-field-edit div.wdk-field-container .wp-editor-wrap input,
576 +.wdk-wrap .listing_custom_fields div.wdk-field-edit div.wdk-field-container .wp-editor-wrap input,
524 577 .wdk-wrap .listing_custom_fields div.wdk-field-edit div.wdk-field-container .wp-editor-wrap select {
525 578 width: auto;
526 579 max-width: auto;
527 580 }
@@ -537,11 +590,25 @@
537 590 }
538 591
539 592 /* columns */
540 593
541 -.wdk-wrap
542 -{
594 +.wdk-wrap {
595 + .button-secondary,.button-primary {
596 + display: inline-flex;
597 + align-items: center;
598 + justify-content: center;
543 599
600 + gap: 5px;
601 +
602 + .dashicons {
603 + line-height: 1 !important;
604 + }
605 + }
606 +
607 + .actions {
608 + margin-top: 0;
609 + }
610 +
544 611 .dl-helper {
545 612 dt {
546 613 font-weight: 700;
547 614 }
@@ -552,11 +619,11 @@
552 619 }
553 620
554 621 @for $i from 1 through 10 {
555 622 .wdk-mr-#{$i*5} {
556 - margin-right: #{$i*5}px;
623 + margin-right: #{$i*5}px;
557 624 }
558 - }
625 + }
559 626
560 627 div.wdk-field-edit.notes a {
561 628 margin-left: 5px;
562 629 display: inline-block;
@@ -562,21 +629,29 @@
562 629 display: inline-block;
563 630 font-weight: 600;
564 631 font-size: 14px;
565 632 }
566 -
633 +
567 634 .mb0 {
568 635 margin-bottom: 0 !important;
569 636 }
570 -
637 +
638 + .m0 {
639 + margin: 0 !important;
640 + }
641 +
642 + .p0 {
643 + padding: 0 !important;
644 + }
645 +
571 646 .align-top {
572 647 vertical-align: top !important;
573 648 }
574 -
649 +
575 650 .text-capitalize {
576 651 text-transform: capitalize !important;
577 652 }
578 -
653 +
579 654 .alert p {
580 655 margin: 0;
581 656 }
582 657
@@ -585,9 +660,9 @@
585 660 }
586 661
587 662 .wdk-infinity-load {
588 663 -webkit-animation: wdk-spin 2s infinite linear;
589 - animation: wdk-spin 2s infinite linear;
664 + animation: wdk-spin 2s infinite linear;
590 665 }
591 666
592 667 .postbox .inside {
593 668 padding: 0 12px 0;
@@ -598,15 +673,16 @@
598 673 }
599 674
600 675 @keyframes wdk-spin {
601 676 0% {
602 - -webkit-transform: rotate(0deg);
603 - transform: rotate(0deg);
604 - }
677 + -webkit-transform: rotate(0deg);
678 + transform: rotate(0deg);
679 + }
680 +
605 681 100% {
606 - -webkit-transform: rotate(360deg);
607 - transform: rotate(360deg);
608 - }
682 + -webkit-transform: rotate(360deg);
683 + transform: rotate(360deg);
684 + }
609 685 }
610 686
611 687 .wdk-field-edit.SECTION .title {
612 688 width: 100%;
@@ -618,9 +694,9 @@
618 694 padding: 10px 15px;
619 695 margin-bottom: 0;
620 696 margin-top: 0;
621 697 }
622 -
698 +
623 699 .meta-box-sortables .wdk_field.SECTION .postbox {
624 700 color: #fff;
625 701 background: #2c3338;
626 702 }
@@ -645,10 +721,10 @@
645 721 align-items: flex-start;
646 722 flex-wrap: wrap;
647 723 }
648 724
649 - div.wdk-field-edit.TEXTAREA_CODE div.wdk-field-container {
650 - width: 400px;
725 + div.wdk-field-edit.TEXTAREA_CODE div.wdk-field-container {
726 + width: 400px;
651 727 }
652 728
653 729 div.wdk-field-edit div.wdk-field-container .suffix:not(:empty) {
654 730 padding: 5px 0px 5px 5px;
@@ -662,10 +738,16 @@
662 738 div.wdk-field-edit p.wdk-hint {
663 739 flex: 0 0 100%;
664 740 }
665 741
666 - .wdk-row
667 - {
742 + div.wdk-field-edit .postbox-upload .hide-if-no-js{
743 + gap: 5px;
744 + display: flex;
745 + flex-wrap: wrap;
746 + margin: 0;
747 + }
748 +
749 + .wdk-row {
668 750 & {
669 751 display: -ms-flexbox;
670 752 display: flex;
671 753 -ms-flex-wrap: wrap;
@@ -673,47 +755,46 @@
673 755 margin-right: -15px;
674 756 margin-left: -15px;
675 757 }
676 758
677 - & > [class*='wdk-col']
678 - {
759 + &>[class*='wdk-col'] {
679 760 position: relative;
680 761 width: 100%;
681 762 padding-right: 15px;
682 763 padding-left: 15px;
683 764 box-sizing: border-box;
684 - }
685 -
765 + }
766 +
686 767 .wdk-col-auto {
687 768 -ms-flex: 0 0 auto;
688 769 flex: 0 0 auto;
689 770 width: auto;
690 771 max-width: 100%;
691 - }
772 + }
692 773
693 -
774 +
694 775 @for $i from 1 through 12 {
695 776 .wdk-col-#{$i} {
696 777 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
697 - flex: 0 0 calc(100% / 12 * #{$i});
698 - max-width: calc(100% / 12 * #{$i});
778 + flex: 0 0 calc(100% / 12 * #{$i});
779 + max-width: calc(100% / 12 * #{$i});
699 780 }
700 - }
701 -
702 - @media (min-width:992px){
781 + }
782 +
783 + @media (min-width:992px) {
703 784 @for $i from 1 through 12 {
704 785 .wdk-col-md-#{$i} {
705 786 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
706 - flex: 0 0 calc(100% / 12 * #{$i});
707 - max-width: calc(100% / 12 * #{$i});
787 + flex: 0 0 calc(100% / 12 * #{$i});
788 + max-width: calc(100% / 12 * #{$i});
708 789 }
709 - }
790 + }
710 791 }
711 792 }
712 793
713 794 .text-center {
714 795 text-align: center;
715 - }
796 + }
716 797
717 798 .text-left {
718 799 text-align: left;
719 800 }
@@ -726,12 +807,13 @@
726 807 color: #ffffff;
727 808 background-color: #c1002b;
728 809 border-color: #c1002b;
729 810
730 - &:hover, &:hover {
811 + &:hover,
812 + &:hover {
731 813 -webkit-box-shadow: 0 1px 5px rgba(193, 0, 43, 0.4) !important;
732 814 box-shadow: 0 1px 5px rgba(193, 0, 43, 0.4) !important;
733 - }
815 + }
734 816 }
735 817
736 818 .button.btn-info {
737 819 color: #ffffff;
@@ -737,14 +819,15 @@
737 819 color: #ffffff;
738 820 background-color: #00c9b7;
739 821 border-color: #00c9b7;
740 822
741 - &:hover, &:hover {
823 + &:hover,
824 + &:hover {
742 825 -webkit-box-shadow: 0 1px 5px #00c9b875 !important;
743 826 box-shadow: 0 1px 5px #00c9b875 !important;
744 - }
827 + }
745 828 }
746 -
829 +
747 830 .button.xl {
748 831 padding: 10px 30px;
749 832 }
750 833
@@ -751,9 +834,9 @@
751 834 .wp-editor-wrap .wp-editor-container {
752 835 width: 100%;
753 836 margin: 0;
754 837 box-shadow: none;
755 - border-radius: 4px;
838 + border-radius: 2px;
756 839 border: 1px solid #8c8f94;
757 840 background-color: #fff;
758 841 color: #2c3338;
759 842 overflow: hidden;
@@ -761,25 +844,31 @@
761 844
762 845 /* addon subscription */
763 846 .wdk-pricing {
764 847 margin: 10px 0;
848 +
765 849 .wdk-sec-header {
766 850 margin-bottom: 20px;
851 +
767 852 .wdk-sec-title {
768 853 font-size: 24px;
769 854 font-weight: 300;
770 855 line-height: 1.5;
771 856 margin-top: 5px;
857 +
772 858 .mark {
773 859 font-weight: 700;
774 860 }
861 +
775 862 .mark.color {
776 863 color: #c1002b;
777 864 }
865 +
778 866 .mark.up {
779 867 text-transform: uppercase;
780 868 }
781 869 }
870 +
782 871 .wdk-sec-subtitle {
783 872 font-size: 20px;
784 873 font-weight: 400;
785 874 }
@@ -790,14 +879,15 @@
790 879 background-color: #fff;
791 880 border: 1px solid #dcdcde;
792 881 box-sizing: border-box;
793 882 margin-bottom: 15px;
883 +
794 884 &.featured {
795 885 .header {
796 886 background: -webkit-gradient(linear, left top, left bottom, from(#5837ff), to(#5533ff));
797 887 background: linear-gradient(#1d2327, #121518);
798 888 }
799 -
889 +
800 890 p,
801 891 .header {
802 892 color: #fff;
803 893 }
@@ -803,13 +893,12 @@
803 893 }
804 894 }
805 895 }
806 896
807 - .wdk-wrap .wdk-pricing .wdk-pac.yearly h4
808 - {
809 - margin-top:0px;
897 + .wdk-wrap .wdk-pricing .wdk-pac.yearly h4 {
898 + margin-top: 0px;
810 899 }
811 -
900 +
812 901 .header {
813 902 background: -webkit-gradient(linear, left top, left bottom, from(#fcfdfe), to(#f9fbfd));
814 903 background: linear-gradient(#fcfdfe, #f9fbfd);
815 904 background-color: rgba(22, 28, 45, 0.03);
@@ -816,8 +905,9 @@
816 905 padding: 0.75rem 1.25rem;
817 906 margin-bottom: 0;
818 907 border-bottom: 1px solid rgba(22, 28, 45, 0.125);
819 908 color: rgb(109, 118, 139);
909 +
820 910 h4 {
821 911 font-size: 24px;
822 912 font-weight: 400;
823 913 margin-bottom: 15px;
@@ -831,8 +921,9 @@
831 921 .list-items {
832 922 padding: 0;
833 923 margin: 0;
834 924 list-style: none;
925 +
835 926 .item {
836 927 display: block;
837 928 padding: 12px 20px;
838 929 font-size: 16px;
@@ -837,13 +928,14 @@
837 928 padding: 12px 20px;
838 929 font-size: 16px;
839 930 color: rgb(109, 118, 139);
840 931 }
932 +
841 933 .item:not(:first-child) {
842 934 border-top: 1px solid rgba(22, 28, 45, 0.125);
843 935 }
844 936 }
845 -
937 +
846 938 .wdk-pac-footer {
847 939 border-top: 1px solid rgba(22, 28, 45, 0.125);
848 940 padding: 20px 20px;
849 941
@@ -857,10 +949,10 @@
857 949 line-height: 1.5;
858 950 border: 1px solid #506690;
859 951 padding: 8px 20px;
860 952 border-radius: 3px;
861 -
862 - &:hover{
953 +
954 + &:hover {
863 955 color: #ffffff;
864 956 background-color: #506690;
865 957 border-color: #506690;
866 958 }
@@ -865,40 +957,61 @@
865 957 border-color: #506690;
866 958 }
867 959 }
868 960 }
869 -
961 +
870 962 .pricing-value {
871 963 font-family: "Poppins", sans-serif;
872 - font-size: 52px;
964 + font-size: 52px;
965 +
873 966 .price {
874 - position: relative;
967 + position: relative;
875 968 font-weight: 500;
876 969 line-height: 1;
877 970 }
878 - .price .before,
971 +
972 + .price .before,
879 973 .price .after {
880 974 font-size: 18px;
881 975 font-weight: 300;
882 - font-style: italic;
976 + font-style: italic;
883 977 }
978 +
884 979 .price .before {
885 980 position: absolute;
886 981 top: 10px;
887 - left: -15px;
982 + left: -15px;
888 983 }
984 +
889 985 .price .after {
890 986 position: relative;
891 987 }
892 988 }
893 -
989 +
894 990 }
895 -
991 +
896 992 .winter_mvc-media .winter_mvc-media-card {
897 993 min-width: 200px;
898 994 }
995 +
996 +
997 + .field-error {
998 + background: #FFE6DF;
999 + input, select,textarea {
1000 + border-color: rgb(163, 1, 1);
1001 + }
1002 +
1003 + p.wdk-hint.wdk-error {
1004 + color: rgb(163, 1, 1);
1005 + }
1006 + }
1007 +
1008 + .wdk-field-container .button {
1009 + display: inline-flex;
1010 + align-items: center;
1011 + }
899 1012 }
900 -
1013 +
901 1014 .wp-core-ui .quicktags-toolbar input.button.button-small {
902 1015 display: inline-block !important;
903 1016 width: auto !important;
904 1017 }
@@ -903,9 +1016,9 @@
903 1016 width: auto !important;
904 1017 }
905 1018
906 1019 .wdk-unwrapp-field {
907 - .wdk_dropdown_tree > .btn-group {
1020 + .wdk_dropdown_tree>.btn-group {
908 1021 width: 100%;
909 1022 display: flex;
910 1023 height: auto;
911 1024 }
@@ -921,20 +1034,20 @@
921 1034 }
922 1035
923 1036 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle,
924 1037 .wdk_dropdown_tree button {
925 - border-radius: 4px;
1038 + border-radius: 0;
926 1039 }
927 1040
928 1041 .wdk_dropdown_tree button:first-child {
929 1042 border-top-right-radius: 0;
930 1043 border-bottom-right-radius: 0;
931 - border-top-left-radius: 4px;
932 - border-bottom-left-radius: 4px;
1044 + border-top-left-radius: 0;
1045 + border-bottom-left-radius: 0;
933 1046 }
934 1047
935 1048 .wdk_dropdown_tree .list_container .input-group {
936 - border: 1px solid #8c8f94;
1049 + border-top: 1px solid #8c8f94;
937 1050 }
938 1051
939 1052 .wdk_dropdown_tree .list_scroll {
940 1053 border-left: 1px solid #8c8f94;
@@ -962,9 +1075,9 @@
962 1075 max-width: 100%;
963 1076 }
964 1077
965 1078 .wdk_dropdown_tree .list_container .input-group-addon {
966 - &{
1079 + & {
967 1080 position: relative;
968 1081 }
969 1082
970 1083 & i {
@@ -969,13 +1082,13 @@
969 1082
970 1083 & i {
971 1084 position: absolute;
972 1085 left: 0;
973 - margin-left: 5px;
1086 + margin-left: 11px;
974 1087 top: 50%;
975 1088 margin-top: -9px;
976 1089 }
977 -
1090 +
978 1091 & i.fa-spin {
979 1092 margin-left: 7px;
980 1093 margin-top: -7px;
981 1094 }
@@ -998,29 +1111,42 @@
998 1111
999 1112 .fa.fa-search:after {
1000 1113 content: "\f179";
1001 1114 }
1002 -
1115 +
1003 1116 .loader-spiner.fa.fa-spinner:after {
1004 1117 content: "\f113";
1005 1118 }
1006 -
1119 +
1007 1120 .loader-spiner.fa.fa-spinner {
1008 1121 -webkit-animation: wdk-spin 2s infinite linear;
1009 - animation: wdk-spin 2s infinite linear;
1122 + animation: wdk-spin 2s infinite linear;
1010 1123 }
1011 1124
1012 1125 @keyframes wdk-spin {
1013 1126 0% {
1014 - -webkit-transform: rotate(0deg);
1015 - transform: rotate(0deg);
1016 - }
1127 + -webkit-transform: rotate(0deg);
1128 + transform: rotate(0deg);
1129 + }
1130 +
1017 1131 100% {
1018 - -webkit-transform: rotate(360deg);
1019 - transform: rotate(360deg);
1020 - }
1132 + -webkit-transform: rotate(360deg);
1133 + transform: rotate(360deg);
1134 + }
1021 1135 }
1022 1136 }
1137 +
1138 + .field-error {
1139 + input, select,textarea {
1140 + border-color: rgb(163, 1, 1);
1141 + }
1142 +
1143 + p.wdk-hint.wdk-error {
1144 + color: rgb(163, 1, 1);
1145 + }
1146 + }
1147 +
1148 +
1023 1149 }
1024 1150
1025 1151 .tablenav .wdk-unwrapp-field {
1026 1152 float: left;
@@ -1038,22 +1164,34 @@
1038 1164 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk-addons"],
1039 1165 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_currencies"],
1040 1166 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_membership"],
1041 1167 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_bookings"] {
1042 - color: greenyellow;
1168 + color: greenyellow;
1043 1169 }
1044 1170
1045 1171
1046 1172 body .select2-container--default {
1173 + .select2-selection--multiple {
1174 + border-radius: 2px;
1175 + }
1047 1176 &.select2-container--focus .select2-selection--multiple,
1048 - & {
1049 - border: 0;
1177 + & {
1178 + border: 0;
1050 1179 min-width: 150px;
1180 + width: 25em !important;
1181 + border-radius: 2px;
1051 1182 }
1183 +
1184 + input {
1185 + min-height: 36px;
1186 + }
1187 +
1052 1188 .select2-selection--multiple {
1189 + cursor: pointer;
1053 1190 .select2-search__field {
1054 1191 border: 0 !important;
1055 1192 }
1193 +
1056 1194 .select2-selection__rendered li {
1057 1195 list-style: none;
1058 1196 margin: 0;
1059 1197
@@ -1061,25 +1199,63 @@
1061 1199 padding: 5px 6px;
1062 1200 margin: 3px 3px;
1063 1201 }
1064 1202 }
1065 -
1203 +
1066 1204 .select2-selection__rendered {
1067 1205 padding: 0;
1068 1206 display: block;
1069 - padding: 2px 45px 2px 5px ;
1207 + padding: 2px 45px 2px 5px;
1208 +
1209 +
1210 + // Add dropdown arrow icon to the right side (mimicking select dropdown)
1211 + &::after {
1212 + content: "";
1213 + display: block;
1214 + position: absolute;
1215 + right: 0px;
1216 + top: 0;
1217 + width: 26px;
1218 + height: 100%;
1219 + pointer-events: none;
1220 + background: #fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E") no-repeat right 5px top 55%;
1221 + background-size: auto;
1222 + background-size: 16px 16px;
1223 + cursor: pointer;
1224 + border-left: 1px solid #8c8f94;
1225 + z-index: 10;
1226 + }
1227 + position: relative;
1228 +
1070 1229 }
1071 1230 }
1072 1231 }
1073 1232
1074 -body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default .select2-selection--multiple{
1233 +body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default .select2-selection--multiple {
1075 1234
1076 - .select2-selection__rendered {
1235 + .select2-selection__rendered {
1077 1236 padding: 0px 45px 0px 5px;
1078 1237 display: flex;
1079 1238 align-items: center;
1080 1239 flex-wrap: wrap;
1081 -
1240 +
1241 + // Add dropdown arrow icon to the right side (mimicking select dropdown)
1242 + &::after {
1243 + content: "";
1244 + display: block;
1245 + position: absolute;
1246 + right: 15px;
1247 + top: 50%;
1248 + width: 16px;
1249 + height: 16px;
1250 + pointer-events: none;
1251 + transform: translateY(-50%);
1252 + background: url('data:image/svg+xml;utf8,<svg fill="gray" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="5,7 10,12 15,7"/></svg>') no-repeat center center;
1253 + background-size: 16px 16px;
1254 + }
1255 + position: relative;
1256 +
1257 +
1082 1258 li.select2-selection__choice {
1083 1259 padding: 1px 6px;
1084 1260 line-height: 19px;
1085 1261 }
@@ -1085,11 +1261,9 @@
1085 1261 }
1086 1262 }
1087 1263
1088 1264
1089 - .select2-selection__choice__remove {
1090 -
1091 - }
1265 + .select2-selection__choice__remove {}
1092 1266 }
1093 1267
1094 1268 body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default {
1095 1269 //width: calc(100% - 28px) !important;
@@ -1111,17 +1285,16 @@
1111 1285 margin-top: 0;
1112 1286 }
1113 1287
1114 1288 body .select2-container--default.select2-container--focus .select2-selection--multiple {
1115 - border: 1px solid #8c8f94;
1289 + border: 1px solid #8c8f94;
1116 1290 }
1117 1291
1118 -.datetime_time_mask {
1292 +.datetime_time_mask {}
1119 1293
1120 -}
1121 -
1122 1294 .wdk_btn_load_indicator {
1123 1295 position: relative;
1296 +
1124 1297 &::after {
1125 1298 content: "\f113";
1126 1299 font-family: dashicons;
1127 1300 display: inline-block;
@@ -1146,14 +1319,15 @@
1146 1319 position: absolute;
1147 1320 right: -30px;
1148 1321 color: #2271b1;
1149 1322 }
1150 -
1323 +
1151 1324 @keyframes wdk-spin {
1152 1325 0% {
1153 1326 -webkit-transform: rotate(0deg);
1154 1327 transform: rotate(0deg);
1155 1328 }
1329 +
1156 1330 100% {
1157 1331 -webkit-transform: rotate(360deg);
1158 1332 transform: rotate(360deg);
1159 1333 }
@@ -1161,8 +1335,9 @@
1161 1335 }
1162 1336
1163 1337 .wdk_btn_load_success {
1164 1338 position: relative;
1339 +
1165 1340 &::after {
1166 1341 content: "\f147";
1167 1342 font-family: dashicons;
1168 1343 display: inline-block;
@@ -1185,13 +1360,14 @@
1185 1360 position: absolute;
1186 1361 right: -30px;
1187 1362 color: #2271b1;
1188 1363 }
1189 -
1364 +
1190 1365 }
1191 1366
1192 1367 .wdk_btn_load_error {
1193 1368 position: relative;
1369 +
1194 1370 &::after {
1195 1371 content: "\f335";
1196 1372 font-family: dashicons;
1197 1373 display: inline-block;
@@ -1214,9 +1390,9 @@
1214 1390 position: absolute;
1215 1391 right: -30px;
1216 1392 color: #2271b1;
1217 1393 }
1218 -
1394 +
1219 1395 }
1220 1396
1221 1397 .wdk-depend-fields .wdk_field {
1222 1398 position: relative;
@@ -1229,9 +1405,10 @@
1229 1405 align-items: center;
1230 1406 justify-content: flex-start;
1231 1407 padding: 15px 15px;
1232 1408
1233 - input[type="checkbox"], input[type="radio"] {
1409 + input[type="checkbox"],
1410 + input[type="radio"] {
1234 1411 margin: 0;
1235 1412 }
1236 1413
1237 1414 label {
@@ -1246,9 +1423,9 @@
1246 1423 background: #2c3338;
1247 1424
1248 1425 label {
1249 1426 margin-left: auto;
1250 - }
1427 + }
1251 1428 }
1252 1429
1253 1430 &.wdk_btn_load_indicator.out::after {
1254 1431 right: 15px;
@@ -1259,6 +1436,567 @@
1259 1436 width: calc(100% - 130px);
1260 1437
1261 1438 .select2.select2-container {
1262 1439 max-width: 100%;
1440 + }
1441 +}
1442 +
1443 +.wdk-wrap .wdk-listing-childs-drop {
1444 + margin-top: 6px;
1445 + border: 1px solid #c3c4c7;
1446 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1447 + border-radius: 0;
1448 + border: 1px dashed #8c8f94;
1449 + background-color: #fff;
1450 +
1451 + min-height: 75px;
1452 + box-sizing: border-box;
1453 + padding: 15px 15px 0 15px;
1454 + margin-bottom: 15px;
1455 +
1456 + .drop-listing-item {
1457 + width: 100%;
1458 + max-width: initial;
1459 + min-width: initial;
1460 + margin: 0px 15px 15px 0px;
1461 + cursor: pointer;
1462 + border-radius: 0;
1463 + border: 1px solid #c3c4c7;
1464 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1465 + background: #fff;
1466 +
1467 + h3.handle {
1468 + padding: 10px 15px;
1469 + margin: 0;
1470 + display: flex;
1471 + align-items: center;
1472 + justify-content: flex-start;
1473 +
1474 + .title {
1475 + flex: 1 2 auto;
1476 + }
1477 +
1478 + .btn span {
1479 + padding-right: 0;
1480 + padding-left: 10px;
1481 + }
1482 + }
1483 +
1484 + a.title {
1485 + font-size: 16px;
1486 + font-weight: 500;
1487 + }
1488 +
1489 + a {
1490 + text-decoration: none;
1491 + border: 0px;
1492 + color: black;
1493 +
1494 + &:hover {
1495 + color: #135e96;
1496 + }
1497 + }
1498 + }
1499 +
1500 + .wdk_dropdown_tree .list_scroll {
1501 + border-right: 1px solid #eaeaea;
1502 + }
1503 +}
1504 +
1505 +.wdk-wrap .wp-list-table .child th {
1506 + border-left: 3px solid #000;
1507 +}
1508 +
1509 +.wdk-wrap .wp-list-table a.laoding_sublistings {
1510 + margin-top: 5px;
1511 + display: inline-block;
1512 +}
1513 +
1514 +
1515 +.wdk-wrap {
1516 +
1517 + .wdk-tabs-navs {
1518 + font-size: 0;
1519 + display: inline-block;
1520 + background: #fff;
1521 + border: 1px solid #c3c4c7;
1522 + margin-bottom: 15px;
1523 + margin-top: 10px;
1524 +
1525 + label {
1526 + display: inline-block;
1527 + font-size: 18px;
1528 + border: 1px solid #eee;
1529 + cursor: pointer;
1530 + transition: all .15s;
1531 + padding: 10px 15px;
1532 +
1533 +
1534 + &.active,
1535 + &:hover {
1536 + background: #eee;
1537 + }
1538 +
1539 + &:not(:last-child) {
1540 + margin-right: -1px;
1541 + }
1542 + }
1543 + }
1544 +
1545 + .wdk-tabs-panel {
1546 + >.wdk-tab {
1547 + display: none;
1548 + }
1549 +
1550 + .wdk-tab-input {
1551 + display: none;
1552 + }
1553 +
1554 + input:checked+div.wdk-tab {
1555 + display: block
1556 + }
1557 + }
1558 +
1559 +}
1560 +
1561 +.wdk-wrap {
1562 +
1563 + .wdk_multi_treefield_dropdown {
1564 + margin-bottom: 15px;
1565 + }
1566 +
1567 + .wdk_multi_treefield_dropdown_container .wdk_multi_treefield_dropdown:last-child {
1568 + margin-bottom: 0;
1569 + }
1570 +
1571 + .wdk_treefield_dropdown .wdk-field-group {
1572 + display: inline-block;
1573 + padding-right: 30px;
1574 + }
1575 +}
1576 +
1577 +.wdk-wrap {
1578 + .wdk_editlog {
1579 + table {
1580 + border: 1px solid #ddd;
1581 + width: 100%;
1582 + max-width: 100%;
1583 + margin-bottom: 20px;
1584 + background-color: #fff;
1585 + border-spacing: 0;
1586 + border-collapse: collapse;
1587 + }
1588 +
1589 + caption {
1590 + color: #000;
1591 + font-weight: 600;
1592 + font-size: 16px;
1593 + padding-bottom: 15px;
1594 + text-align: left;
1595 + }
1596 +
1597 + td,
1598 + th {
1599 + border: 1px solid #ddd;
1600 + padding: 8px;
1601 + line-height: 1.42857143;
1602 + vertical-align: top;
1603 + text-align: center;
1604 + }
1605 +
1606 + thead>tr:first-child>td,
1607 + thead>tr:first-child>th,
1608 + thead>tr:first-child>td,
1609 + thead>tr:first-child>th,
1610 + thead:first-child>tr:first-child>td,
1611 + thead:first-child>tr:first-child>th {
1612 + border-top: 0;
1613 +
1614 + }
1615 + }
1616 +}
1617 +
1618 +
1619 +
1620 +.custom_parameter {
1621 + float: left;
1622 + margin-right: 6px;
1623 +
1624 + box-shadow: 0 0 0 transparent;
1625 + border-radius: 4px;
1626 + background-color: #fff;
1627 + color: #2c3338;
1628 + display: grid;
1629 + grid-row: revert;
1630 + grid-auto-flow: column;
1631 + grid-gap: 1px 1px;
1632 + background-color: #8c8f94;
1633 + border: 1px solid #8c8f94;
1634 + border-radius: 3px;
1635 + overflow: hidden;
1636 +
1637 + * {
1638 + margin: 0 !important;
1639 + min-height: auto;
1640 + height: 100%;
1641 + border: 0 !important;
1642 + box-shadow: none !important;
1643 + border-radius: 0 !important;
1644 + min-height: 28px !important;
1645 + max-width: 100px !important;
1646 + }
1647 +}
1648 +
1649 +.btn_parameter {
1650 + float: left;
1651 + margin-right: 6px;
1652 + background: #2271b1;
1653 + color: #fff;
1654 + cursor: pointer;
1655 + border: 0;
1656 + height: 30px;
1657 + width: 32px;
1658 + border-radius: 3px;
1659 + text-decoration: none;
1660 + display: flex;
1661 + align-items: center;
1662 + justify-content: center;
1663 +
1664 + &:hover {
1665 + background: #135e96;
1666 + color: #fff;
1667 + }
1668 +
1669 + span {
1670 + height: auto;
1671 + }
1672 +}
1673 +
1674 +.filters-form {
1675 +
1676 + select,
1677 + input,
1678 + button,
1679 + .custom_parameter {
1680 + margin-bottom: 5px;
1681 + }
1682 +}
1683 +
1684 +.wdk-notice-upgrade {
1685 + background: #fcf0f1;
1686 + border-left-color: #d63a3c;
1687 + .dashicons-warning {
1688 + color: #d63a3c;
1689 + }
1690 +}
1691 +
1692 +.wdk-listing-toolbar {
1693 + --borded-radius: 3px;
1694 + --border-color: #ccd0d4;
1695 + display: flex;
1696 + align-items: center;
1697 + justify-content: space-between;
1698 + gap: 10px;
1699 + margin-bottom: 25px;
1700 + background: #f8fafc;
1701 + border-radius: var(--borded-radius);
1702 + box-shadow: 0 2px 8px rgba(44, 62, 80, 0.06);
1703 + padding: 15px 21px;
1704 + border-radius: var(--borded-radius);
1705 + .wdk-toolbar-left,
1706 + .wdk-toolbar-right {
1707 + flex: 0 0 auto;
1708 + a.button {
1709 + padding: 0 9px;
1710 + border-radius: var(--borded-radius);
1711 + transition: background 0.18s, color 0.18s, box-shadow 0.18s;
1712 + box-shadow: 0 1px 4px rgba(44,62,80,0.08);
1713 + &:hover, &:focus {
1714 + background: #e8eef7;
1715 + color: #2271b1;
1716 + box-shadow: 0 3px 12px rgba(44,62,80,0.12);
1717 + }
1718 + }
1719 + }
1720 +
1721 + .wdk-toolbar-search {
1722 + position: relative;
1723 + width: 200px;
1724 + max-width: 100%;
1725 + min-width: 150px;
1726 + display: flex;
1727 + align-items: center;
1728 +
1729 + input {
1730 + width: 100%;
1731 + padding: 9px 14px;
1732 + border-radius: var(--borded-radius);
1733 + border: 1px solid var(--border-color);
1734 + background: #fff;
1735 + font-size: 15px;
1736 + line-height: 1.3;
1737 + transition: border 0.15s, box-shadow 0.15s;
1738 + box-shadow: 0 1px 4px rgba(44,62,80,0.03);
1739 + &:focus {
1740 + border-color: #2271b1;
1741 + outline: none;
1742 + box-shadow: 0 2px 8px rgba(34,113,177,0.09);
1743 + }
1744 + }
1745 +
1746 + .wdk-search-results {
1747 + position: absolute;
1748 + left: 0;
1749 + right: 0;
1750 + top: calc(100% + 8px);
1751 + background: #fff;
1752 + border: 1px solid #ccd0d4;
1753 + border-radius: 6px;
1754 + box-shadow: 0 4px 18px rgba(44,62,80,0.11);
1755 + max-height: 340px;
1756 + overflow-y: auto;
1757 + z-index: 1001;
1758 +
1759 + .wdk-search-item {
1760 + display: block;
1761 + padding: 12px 18px;
1762 + text-decoration: none;
1763 + color: #222f3e;
1764 + border-bottom: 1px solid #f2f4f8;
1765 + transition: background 0.13s, color 0.13s;
1766 + &:last-child {
1767 + border-bottom: none;
1768 + }
1769 + &:hover, &:focus {
1770 + background: #f0f6fb;
1771 + color: #186dac;
1772 + }
1773 + }
1774 +
1775 + .wdk-search-loading,
1776 + .wdk-search-empty {
1777 + padding: 11px 16px;
1778 + display: flex;
1779 + align-items: center;
1780 + gap: 12px;
1781 + color: #888fa1;
1782 + font-size: 15px;
1783 + background: #f8fafc;
1784 + }
1785 +
1786 + .wdk-search-empty {
1787 + justify-content: flex-start;
1788 + font-style: italic;
1789 + color: #b0b4bb;
1790 + }
1791 + }
1792 + }
1793 + .spinner.is-active {
1794 + float: none;
1795 + margin: 0;
1796 + vertical-align: middle;
1797 + position: relative;
1798 + top: 2px;
1799 + left: 6px;
1800 + }
1801 +}
1802 +
1803 +
1804 +.tribute-container {
1805 + margin-top: 20px;
1806 +}
1807 +
1808 +
1809 +.wdk-wrap {
1810 +
1811 +.wdk-ai-fields-list {
1812 + background: #fff;
1813 + border: 1px solid #dcdcde;
1814 + border-radius: 8px;
1815 + overflow: hidden;
1816 +}
1817 +
1818 +.wdk-ai-field {
1819 + display: flex;
1820 + align-items: center;
1821 + gap: 10px;
1822 +
1823 + padding: 14px 16px;
1824 +
1825 + margin: 0;
1826 +
1827 + border-bottom: 1px solid #f0f0f1;
1828 +
1829 + cursor: pointer;
1830 +
1831 + transition: background 0.15s ease;
1832 +}
1833 +
1834 +.wdk-ai-field:last-child {
1835 + border-bottom: 0;
1836 +}
1837 +
1838 +.wdk-ai-field:hover {
1839 + background: #f6f7f7;
1840 +}
1841 +
1842 +.wdk-ai-field input[type="checkbox"] {
1843 + margin: 0;
1844 + flex: 0 0 auto;
1845 +}
1846 +
1847 +.wdk-ai-field-label {
1848 + flex: 1;
1849 +
1850 + font-size: 14px;
1851 + font-weight: 500;
1852 + color: #1d2327;
1853 +}
1854 +
1855 +.wdk-ai-field-type {
1856 + padding: 3px 8px;
1857 +
1858 + font-size: 11px;
1859 + font-weight: 600;
1860 + line-height: 1.4;
1861 + color: #646970;
1862 + background: #f0f0f1;
1863 + border-radius: 4px;
1864 +}
1865 +
1866 +.wdk-ai-field:has(input:checked) {
1867 + background: #f0f6fc;
1868 +}
1869 +
1870 +.wdk-ai-field:has(input:checked) .wdk-ai-field-label {
1871 + color: #2271b1;
1872 +}
1873 +
1874 +.wdk-ai-search-status {
1875 + display: inline-block;
1876 +
1877 + margin-top: 12px;
1878 +
1879 + font-size: 13px;
1880 + font-weight: 500;
1881 +}
1882 +
1883 +.wdk-ai-search-status.success {
1884 + color: #00a32a;
1885 +}
1886 +
1887 +.wdk-ai-search-status.error {
1888 + color: #d63638;
1889 +}
1890 +
1891 +.wdk-ai-fields-list {
1892 + display: grid;
1893 + grid-template-columns: repeat(2, 1fr);
1894 +
1895 + background: #fff;
1896 + border: 1px solid #dcdcde;
1897 + border-radius: 8px;
1898 +
1899 + overflow: hidden;
1900 +}
1901 +
1902 +.wdk-ai-field {
1903 + border-bottom: 1px solid #f0f0f1;
1904 +}
1905 +
1906 +.wdk-ai-field:nth-child(odd) {
1907 + border-right: 1px solid #f0f0f1;
1908 +}
1909 +}
1910 +
1911 +.wdk-body-listing {
1912 + display: flex;
1913 + flex-wrap: wrap;
1914 + justify-content: space-between;
1915 + align-items: center;
1916 +
1917 + >* {
1918 + order: 1;
1919 + }
1920 +
1921 + .fpai-ai-button {
1922 + order: 0;
1923 + }
1924 +
1925 + >form,
1926 + >.fpai-inline-form {
1927 + width: 100%;
1928 + }
1929 +}
1930 +
1931 +.wdk-empty-state {
1932 + padding: 40px 20px 48px;
1933 + text-align: center;
1934 + display: flex;
1935 + flex-direction: column;
1936 + align-items: center;
1937 +
1938 +
1939 + &__image {
1940 + display: block;
1941 + width: 170px;
1942 + max-width: 100%;
1943 + height: auto;
1944 + margin: 0 auto 18px;
1945 + }
1946 +
1947 + &__title {
1948 + margin: 0 0 8px;
1949 + color: #292d32;
1950 + font-size: 18px;
1951 + font-weight: 600;
1952 + line-height: 1.4;
1953 + }
1954 +
1955 + &__description {
1956 + max-width: 310px;
1957 + margin: 0 auto 18px;
1958 + color: #85858d;
1959 + font-size: 14px;
1960 + line-height: 1.6;
1961 + }
1962 +
1963 + &__button {
1964 + display: inline-flex;
1965 + align-items: center;
1966 + justify-content: center;
1967 + gap: 8px;
1968 + padding: 9px 15px;
1969 + border-radius: 8px;
1970 + background: #edf0fc;
1971 + color: #456596;
1972 + font-size: 14px;
1973 + font-weight: 600;
1974 + line-height: 1.4;
1975 + text-decoration: none;
1976 + transition: background .2s, color .2s;
1977 +
1978 + &:hover {
1979 + background: #e0e7fc;
1980 + color: #2f51a4;
1981 + }
1982 +
1983 + &:focus-visible {
1984 + outline: 2px solid #4775ed;
1985 + outline-offset: 3px;
1986 + }
1987 +
1988 + span {
1989 + font-size: 21px;
1990 + font-weight: 400;
1991 + line-height: 1;
1992 + }
1993 + }
1994 +}
1995 +
1996 +.wdk-wrap {
1997 + br {
1998 + display: block;
1999 + content: "";
2000 + margin-bottom: 5px;
1263 2001 }
1264 2002 }