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 +770 -247 1.2.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,44 +323,57 @@
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
366 373 div.wdk-field-edit.inline {
367 374 align-items: center;
375 +
368 376 label {
369 377 font-weight: 600;
370 378 width: auto;
371 379 flex: 0 0;
@@ -383,13 +391,24 @@
383 391 }
384 392
385 393 /* Tables */
386 394
387 -.wdk-wrap .widefat .actions_column
388 -{
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 {
389 404 text-align: right;
390 405 }
391 406
407 +.wdk-wrap .widefat .static {
408 + width: 5%;
409 +}
410 +
392 411 .wdk-wrap .form-table td {
393 412 vertical-align: top;
394 413 }
395 414
@@ -412,13 +431,13 @@
412 431 min-width: 400px;
413 432 padding: 22px 0;
414 433 }
415 434
416 -.wdk-wrap .wdk-side-content + .form-table td {
435 +.wdk-wrap .wdk-side-content+.form-table td {
417 436 padding-right: 0;
418 437 }
419 438
420 -.wdk-wrap .wdk-side-content + .form-table th,
439 +.wdk-wrap .wdk-side-content+.form-table th,
421 440 .wdk-wrap .wdk-side-content .form-table th {
422 441 max-width: 85px;
423 442 padding-right: 10px;
424 443 }
@@ -425,11 +444,10 @@
425 444
426 445
427 446 /* Filtering above/below tables */
428 447
429 -.wdk-wrap .tablenav.top .left
430 -{
431 - float:left;
448 +.wdk-wrap .tablenav.top .left {
449 + float: left;
432 450 }
433 451
434 452 .wdk-wrap .inputbox_map {
435 453 height: 250px;
@@ -437,15 +455,16 @@
437 455 max-width: 450px
438 456 }
439 457
440 458 /* Visual Builder Search Forms */
441 -.wdk-builder-container .widget-title h3, .widget-title h4 {
459 +.wdk-builder-container .widget-title h3,
460 +.widget-title h4 {
442 461 white-space: initial;
443 462 }
444 -.wdk-builder-container .wdk-builder-elements-column
445 -{
463 +
464 +.wdk-builder-container .wdk-builder-elements-column {
446 465 margin-bottom: 15px;
447 - display:block;
466 + display: block;
448 467 width: 40%;
449 468 float: left;
450 469 padding-top: 6px;
451 470 }
@@ -462,10 +481,9 @@
462 481 margin-top: 0;
463 482 margin-right: 15px;
464 483 }
465 484
466 -.wdk-builder-elements
467 -{
485 +.wdk-builder-elements {
468 486 width: 100%;
469 487 min-height: auto;
470 488 box-sizing: border-box;
471 489 padding: 15px 15px 15px 0px;
@@ -474,21 +492,19 @@
474 492 grid-column-gap: 10px;
475 493 grid-row-gap: 0;
476 494 }
477 495
478 -.wdk-builder-elements .widget
479 -{
496 +.wdk-builder-elements .widget {
480 497 width: 100%;
481 498 }
482 499
483 -.wdk-builder-selected
484 -{
500 +.wdk-builder-selected {
485 501 margin-top: 6px;
486 - width:80%;
502 + width: 80%;
487 503 border: 1px solid #c3c4c7;
488 - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
489 - min-height:400px;
490 - float:left;
504 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
505 + min-height: 400px;
506 + float: left;
491 507 box-sizing: border-box;
492 508 padding: 15px;
493 509 }
494 510
@@ -494,19 +510,18 @@
494 510
495 511 #wdk-drop .widget.ui-draggable.ui-sortable-handle,
496 512 #wdk-drop .ui-sortable-placeholder.widget-placeholder,
497 513 .wdk-wrap .drop-container .widget.ui-draggable.ui-sortable-handle,
498 -.wdk-wrap .drop-container .ui-sortable-placeholder.widget-placeholder
499 -{
500 - width:300px;
501 - margin:0px 15px 15px 0px;
502 - float:left;
514 +.wdk-wrap .drop-container .ui-sortable-placeholder.widget-placeholder {
515 + width: 300px;
516 + margin: 0px 15px 15px 0px;
517 + float: left;
503 518 }
504 519
520 +#wdk-drag .widget-action-remove,
505 521 #wdk-drag .widget-action,
506 -#wdk-drag .widget-inside
507 -{
508 - display:none !important;
522 +#wdk-drag .widget-inside {
523 + display: none !important;
509 524 }
510 525
511 526
512 527 .wdk-builder-container button[aria-expanded="true"] .toggle-indicator::before {
@@ -513,34 +528,53 @@
513 528 content: "\f142"
514 529 }
515 530
516 531 #wdk-drop .widget-inside,
517 -.wdk-wrap .drop-container .widget-inside
518 -{
532 +.wdk-wrap .drop-container .widget-inside {
519 533 padding: 5px;
520 534 }
521 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 +
522 559 /* Visual Builder result item */
523 560
524 -.wdk-wrap .drop-container
525 -{
561 +.wdk-wrap .drop-container {
526 562 width: 60%;
527 563 float: left;
528 564 }
529 565
530 -.wdk-wrap .drop-container .wdk-builder-selected
531 -{
532 - width:100%;
566 +.wdk-wrap .drop-container .wdk-builder-selected {
567 + width: 100%;
533 568 min-height: 100px;
534 569 }
535 570
536 -.wdk-wrap .drop-container>h3
537 -{
538 - padding-bottom:0px;
539 - margin-bottom:0px;
571 +.wdk-wrap .drop-container>h3 {
572 + padding-bottom: 0px;
573 + margin-bottom: 0px;
540 574 }
541 575
542 -.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,
543 577 .wdk-wrap .listing_custom_fields div.wdk-field-edit div.wdk-field-container .wp-editor-wrap select {
544 578 width: auto;
545 579 max-width: auto;
546 580 }
@@ -556,10 +590,21 @@
556 590 }
557 591
558 592 /* columns */
559 593
560 -.wdk-wrap
561 -{
594 +.wdk-wrap {
595 + .button-secondary,.button-primary {
596 + display: inline-flex;
597 + align-items: center;
598 + justify-content: center;
599 +
600 + gap: 5px;
601 +
602 + .dashicons {
603 + line-height: 1 !important;
604 + }
605 + }
606 +
562 607 .actions {
563 608 margin-top: 0;
564 609 }
565 610
@@ -574,11 +619,11 @@
574 619 }
575 620
576 621 @for $i from 1 through 10 {
577 622 .wdk-mr-#{$i*5} {
578 - margin-right: #{$i*5}px;
623 + margin-right: #{$i*5}px;
579 624 }
580 - }
625 + }
581 626
582 627 div.wdk-field-edit.notes a {
583 628 margin-left: 5px;
584 629 display: inline-block;
@@ -584,21 +629,29 @@
584 629 display: inline-block;
585 630 font-weight: 600;
586 631 font-size: 14px;
587 632 }
588 -
633 +
589 634 .mb0 {
590 635 margin-bottom: 0 !important;
591 636 }
592 -
637 +
638 + .m0 {
639 + margin: 0 !important;
640 + }
641 +
642 + .p0 {
643 + padding: 0 !important;
644 + }
645 +
593 646 .align-top {
594 647 vertical-align: top !important;
595 648 }
596 -
649 +
597 650 .text-capitalize {
598 651 text-transform: capitalize !important;
599 652 }
600 -
653 +
601 654 .alert p {
602 655 margin: 0;
603 656 }
604 657
@@ -607,9 +660,9 @@
607 660 }
608 661
609 662 .wdk-infinity-load {
610 663 -webkit-animation: wdk-spin 2s infinite linear;
611 - animation: wdk-spin 2s infinite linear;
664 + animation: wdk-spin 2s infinite linear;
612 665 }
613 666
614 667 .postbox .inside {
615 668 padding: 0 12px 0;
@@ -620,15 +673,16 @@
620 673 }
621 674
622 675 @keyframes wdk-spin {
623 676 0% {
624 - -webkit-transform: rotate(0deg);
625 - transform: rotate(0deg);
626 - }
677 + -webkit-transform: rotate(0deg);
678 + transform: rotate(0deg);
679 + }
680 +
627 681 100% {
628 - -webkit-transform: rotate(360deg);
629 - transform: rotate(360deg);
630 - }
682 + -webkit-transform: rotate(360deg);
683 + transform: rotate(360deg);
684 + }
631 685 }
632 686
633 687 .wdk-field-edit.SECTION .title {
634 688 width: 100%;
@@ -640,9 +694,9 @@
640 694 padding: 10px 15px;
641 695 margin-bottom: 0;
642 696 margin-top: 0;
643 697 }
644 -
698 +
645 699 .meta-box-sortables .wdk_field.SECTION .postbox {
646 700 color: #fff;
647 701 background: #2c3338;
648 702 }
@@ -667,10 +721,10 @@
667 721 align-items: flex-start;
668 722 flex-wrap: wrap;
669 723 }
670 724
671 - div.wdk-field-edit.TEXTAREA_CODE div.wdk-field-container {
672 - width: 400px;
725 + div.wdk-field-edit.TEXTAREA_CODE div.wdk-field-container {
726 + width: 400px;
673 727 }
674 728
675 729 div.wdk-field-edit div.wdk-field-container .suffix:not(:empty) {
676 730 padding: 5px 0px 5px 5px;
@@ -684,10 +738,16 @@
684 738 div.wdk-field-edit p.wdk-hint {
685 739 flex: 0 0 100%;
686 740 }
687 741
688 - .wdk-row
689 - {
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 {
690 750 & {
691 751 display: -ms-flexbox;
692 752 display: flex;
693 753 -ms-flex-wrap: wrap;
@@ -695,47 +755,46 @@
695 755 margin-right: -15px;
696 756 margin-left: -15px;
697 757 }
698 758
699 - & > [class*='wdk-col']
700 - {
759 + &>[class*='wdk-col'] {
701 760 position: relative;
702 761 width: 100%;
703 762 padding-right: 15px;
704 763 padding-left: 15px;
705 764 box-sizing: border-box;
706 - }
707 -
765 + }
766 +
708 767 .wdk-col-auto {
709 768 -ms-flex: 0 0 auto;
710 769 flex: 0 0 auto;
711 770 width: auto;
712 771 max-width: 100%;
713 - }
772 + }
714 773
715 -
774 +
716 775 @for $i from 1 through 12 {
717 776 .wdk-col-#{$i} {
718 777 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
719 - flex: 0 0 calc(100% / 12 * #{$i});
720 - max-width: calc(100% / 12 * #{$i});
778 + flex: 0 0 calc(100% / 12 * #{$i});
779 + max-width: calc(100% / 12 * #{$i});
721 780 }
722 - }
723 -
724 - @media (min-width:992px){
781 + }
782 +
783 + @media (min-width:992px) {
725 784 @for $i from 1 through 12 {
726 785 .wdk-col-md-#{$i} {
727 786 -webkit-flex: 0 0 calc(100% / 12 * #{$i});
728 - flex: 0 0 calc(100% / 12 * #{$i});
729 - max-width: calc(100% / 12 * #{$i});
787 + flex: 0 0 calc(100% / 12 * #{$i});
788 + max-width: calc(100% / 12 * #{$i});
730 789 }
731 - }
790 + }
732 791 }
733 792 }
734 793
735 794 .text-center {
736 795 text-align: center;
737 - }
796 + }
738 797
739 798 .text-left {
740 799 text-align: left;
741 800 }
@@ -748,12 +807,13 @@
748 807 color: #ffffff;
749 808 background-color: #c1002b;
750 809 border-color: #c1002b;
751 810
752 - &:hover, &:hover {
811 + &:hover,
812 + &:hover {
753 813 -webkit-box-shadow: 0 1px 5px rgba(193, 0, 43, 0.4) !important;
754 814 box-shadow: 0 1px 5px rgba(193, 0, 43, 0.4) !important;
755 - }
815 + }
756 816 }
757 817
758 818 .button.btn-info {
759 819 color: #ffffff;
@@ -759,14 +819,15 @@
759 819 color: #ffffff;
760 820 background-color: #00c9b7;
761 821 border-color: #00c9b7;
762 822
763 - &:hover, &:hover {
823 + &:hover,
824 + &:hover {
764 825 -webkit-box-shadow: 0 1px 5px #00c9b875 !important;
765 826 box-shadow: 0 1px 5px #00c9b875 !important;
766 - }
827 + }
767 828 }
768 -
829 +
769 830 .button.xl {
770 831 padding: 10px 30px;
771 832 }
772 833
@@ -773,9 +834,9 @@
773 834 .wp-editor-wrap .wp-editor-container {
774 835 width: 100%;
775 836 margin: 0;
776 837 box-shadow: none;
777 - border-radius: 4px;
838 + border-radius: 2px;
778 839 border: 1px solid #8c8f94;
779 840 background-color: #fff;
780 841 color: #2c3338;
781 842 overflow: hidden;
@@ -783,25 +844,31 @@
783 844
784 845 /* addon subscription */
785 846 .wdk-pricing {
786 847 margin: 10px 0;
848 +
787 849 .wdk-sec-header {
788 850 margin-bottom: 20px;
851 +
789 852 .wdk-sec-title {
790 853 font-size: 24px;
791 854 font-weight: 300;
792 855 line-height: 1.5;
793 856 margin-top: 5px;
857 +
794 858 .mark {
795 859 font-weight: 700;
796 860 }
861 +
797 862 .mark.color {
798 863 color: #c1002b;
799 864 }
865 +
800 866 .mark.up {
801 867 text-transform: uppercase;
802 868 }
803 869 }
870 +
804 871 .wdk-sec-subtitle {
805 872 font-size: 20px;
806 873 font-weight: 400;
807 874 }
@@ -812,14 +879,15 @@
812 879 background-color: #fff;
813 880 border: 1px solid #dcdcde;
814 881 box-sizing: border-box;
815 882 margin-bottom: 15px;
883 +
816 884 &.featured {
817 885 .header {
818 886 background: -webkit-gradient(linear, left top, left bottom, from(#5837ff), to(#5533ff));
819 887 background: linear-gradient(#1d2327, #121518);
820 888 }
821 -
889 +
822 890 p,
823 891 .header {
824 892 color: #fff;
825 893 }
@@ -825,13 +893,12 @@
825 893 }
826 894 }
827 895 }
828 896
829 - .wdk-wrap .wdk-pricing .wdk-pac.yearly h4
830 - {
831 - margin-top:0px;
897 + .wdk-wrap .wdk-pricing .wdk-pac.yearly h4 {
898 + margin-top: 0px;
832 899 }
833 -
900 +
834 901 .header {
835 902 background: -webkit-gradient(linear, left top, left bottom, from(#fcfdfe), to(#f9fbfd));
836 903 background: linear-gradient(#fcfdfe, #f9fbfd);
837 904 background-color: rgba(22, 28, 45, 0.03);
@@ -838,8 +905,9 @@
838 905 padding: 0.75rem 1.25rem;
839 906 margin-bottom: 0;
840 907 border-bottom: 1px solid rgba(22, 28, 45, 0.125);
841 908 color: rgb(109, 118, 139);
909 +
842 910 h4 {
843 911 font-size: 24px;
844 912 font-weight: 400;
845 913 margin-bottom: 15px;
@@ -853,8 +921,9 @@
853 921 .list-items {
854 922 padding: 0;
855 923 margin: 0;
856 924 list-style: none;
925 +
857 926 .item {
858 927 display: block;
859 928 padding: 12px 20px;
860 929 font-size: 16px;
@@ -859,13 +928,14 @@
859 928 padding: 12px 20px;
860 929 font-size: 16px;
861 930 color: rgb(109, 118, 139);
862 931 }
932 +
863 933 .item:not(:first-child) {
864 934 border-top: 1px solid rgba(22, 28, 45, 0.125);
865 935 }
866 936 }
867 -
937 +
868 938 .wdk-pac-footer {
869 939 border-top: 1px solid rgba(22, 28, 45, 0.125);
870 940 padding: 20px 20px;
871 941
@@ -879,10 +949,10 @@
879 949 line-height: 1.5;
880 950 border: 1px solid #506690;
881 951 padding: 8px 20px;
882 952 border-radius: 3px;
883 -
884 - &:hover{
953 +
954 + &:hover {
885 955 color: #ffffff;
886 956 background-color: #506690;
887 957 border-color: #506690;
888 958 }
@@ -887,40 +957,61 @@
887 957 border-color: #506690;
888 958 }
889 959 }
890 960 }
891 -
961 +
892 962 .pricing-value {
893 963 font-family: "Poppins", sans-serif;
894 - font-size: 52px;
964 + font-size: 52px;
965 +
895 966 .price {
896 - position: relative;
967 + position: relative;
897 968 font-weight: 500;
898 969 line-height: 1;
899 970 }
900 - .price .before,
971 +
972 + .price .before,
901 973 .price .after {
902 974 font-size: 18px;
903 975 font-weight: 300;
904 - font-style: italic;
976 + font-style: italic;
905 977 }
978 +
906 979 .price .before {
907 980 position: absolute;
908 981 top: 10px;
909 - left: -15px;
982 + left: -15px;
910 983 }
984 +
911 985 .price .after {
912 986 position: relative;
913 987 }
914 988 }
915 -
989 +
916 990 }
917 -
991 +
918 992 .winter_mvc-media .winter_mvc-media-card {
919 993 min-width: 200px;
920 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 + }
921 1012 }
922 -
1013 +
923 1014 .wp-core-ui .quicktags-toolbar input.button.button-small {
924 1015 display: inline-block !important;
925 1016 width: auto !important;
926 1017 }
@@ -925,9 +1016,9 @@
925 1016 width: auto !important;
926 1017 }
927 1018
928 1019 .wdk-unwrapp-field {
929 - .wdk_dropdown_tree > .btn-group {
1020 + .wdk_dropdown_tree>.btn-group {
930 1021 width: 100%;
931 1022 display: flex;
932 1023 height: auto;
933 1024 }
@@ -943,20 +1034,20 @@
943 1034 }
944 1035
945 1036 .wdk_dropdown_tree button.btn.btn-default.dropdown-toggle,
946 1037 .wdk_dropdown_tree button {
947 - border-radius: 4px;
1038 + border-radius: 0;
948 1039 }
949 1040
950 1041 .wdk_dropdown_tree button:first-child {
951 1042 border-top-right-radius: 0;
952 1043 border-bottom-right-radius: 0;
953 - border-top-left-radius: 4px;
954 - border-bottom-left-radius: 4px;
1044 + border-top-left-radius: 0;
1045 + border-bottom-left-radius: 0;
955 1046 }
956 1047
957 1048 .wdk_dropdown_tree .list_container .input-group {
958 - border: 1px solid #8c8f94;
1049 + border-top: 1px solid #8c8f94;
959 1050 }
960 1051
961 1052 .wdk_dropdown_tree .list_scroll {
962 1053 border-left: 1px solid #8c8f94;
@@ -984,9 +1075,9 @@
984 1075 max-width: 100%;
985 1076 }
986 1077
987 1078 .wdk_dropdown_tree .list_container .input-group-addon {
988 - &{
1079 + & {
989 1080 position: relative;
990 1081 }
991 1082
992 1083 & i {
@@ -991,13 +1082,13 @@
991 1082
992 1083 & i {
993 1084 position: absolute;
994 1085 left: 0;
995 - margin-left: 5px;
1086 + margin-left: 11px;
996 1087 top: 50%;
997 1088 margin-top: -9px;
998 1089 }
999 -
1090 +
1000 1091 & i.fa-spin {
1001 1092 margin-left: 7px;
1002 1093 margin-top: -7px;
1003 1094 }
@@ -1020,29 +1111,42 @@
1020 1111
1021 1112 .fa.fa-search:after {
1022 1113 content: "\f179";
1023 1114 }
1024 -
1115 +
1025 1116 .loader-spiner.fa.fa-spinner:after {
1026 1117 content: "\f113";
1027 1118 }
1028 -
1119 +
1029 1120 .loader-spiner.fa.fa-spinner {
1030 1121 -webkit-animation: wdk-spin 2s infinite linear;
1031 - animation: wdk-spin 2s infinite linear;
1122 + animation: wdk-spin 2s infinite linear;
1032 1123 }
1033 1124
1034 1125 @keyframes wdk-spin {
1035 1126 0% {
1036 - -webkit-transform: rotate(0deg);
1037 - transform: rotate(0deg);
1038 - }
1127 + -webkit-transform: rotate(0deg);
1128 + transform: rotate(0deg);
1129 + }
1130 +
1039 1131 100% {
1040 - -webkit-transform: rotate(360deg);
1041 - transform: rotate(360deg);
1042 - }
1132 + -webkit-transform: rotate(360deg);
1133 + transform: rotate(360deg);
1134 + }
1043 1135 }
1044 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 +
1045 1149 }
1046 1150
1047 1151 .tablenav .wdk-unwrapp-field {
1048 1152 float: left;
@@ -1060,22 +1164,34 @@
1060 1164 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk-addons"],
1061 1165 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_currencies"],
1062 1166 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_membership"],
1063 1167 #adminmenu .wp-submenu li.current a[href="admin.php?page=wdk_addons_bookings"] {
1064 - color: greenyellow;
1168 + color: greenyellow;
1065 1169 }
1066 1170
1067 1171
1068 1172 body .select2-container--default {
1173 + .select2-selection--multiple {
1174 + border-radius: 2px;
1175 + }
1069 1176 &.select2-container--focus .select2-selection--multiple,
1070 - & {
1071 - border: 0;
1177 + & {
1178 + border: 0;
1072 1179 min-width: 150px;
1180 + width: 25em !important;
1181 + border-radius: 2px;
1073 1182 }
1183 +
1184 + input {
1185 + min-height: 36px;
1186 + }
1187 +
1074 1188 .select2-selection--multiple {
1189 + cursor: pointer;
1075 1190 .select2-search__field {
1076 1191 border: 0 !important;
1077 1192 }
1193 +
1078 1194 .select2-selection__rendered li {
1079 1195 list-style: none;
1080 1196 margin: 0;
1081 1197
@@ -1083,25 +1199,63 @@
1083 1199 padding: 5px 6px;
1084 1200 margin: 3px 3px;
1085 1201 }
1086 1202 }
1087 -
1203 +
1088 1204 .select2-selection__rendered {
1089 1205 padding: 0;
1090 1206 display: block;
1091 - 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 +
1092 1229 }
1093 1230 }
1094 1231 }
1095 1232
1096 -body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default .select2-selection--multiple{
1233 +body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default .select2-selection--multiple {
1097 1234
1098 - .select2-selection__rendered {
1235 + .select2-selection__rendered {
1099 1236 padding: 0px 45px 0px 5px;
1100 1237 display: flex;
1101 1238 align-items: center;
1102 1239 flex-wrap: wrap;
1103 -
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 +
1104 1258 li.select2-selection__choice {
1105 1259 padding: 1px 6px;
1106 1260 line-height: 19px;
1107 1261 }
@@ -1107,11 +1261,9 @@
1107 1261 }
1108 1262 }
1109 1263
1110 1264
1111 - .select2-selection__choice__remove {
1112 -
1113 - }
1265 + .select2-selection__choice__remove {}
1114 1266 }
1115 1267
1116 1268 body .wdk-field-edit.DROPDOWNMULTIPLE .select2-container--default {
1117 1269 //width: calc(100% - 28px) !important;
@@ -1133,17 +1285,16 @@
1133 1285 margin-top: 0;
1134 1286 }
1135 1287
1136 1288 body .select2-container--default.select2-container--focus .select2-selection--multiple {
1137 - border: 1px solid #8c8f94;
1289 + border: 1px solid #8c8f94;
1138 1290 }
1139 1291
1140 -.datetime_time_mask {
1292 +.datetime_time_mask {}
1141 1293
1142 -}
1143 -
1144 1294 .wdk_btn_load_indicator {
1145 1295 position: relative;
1296 +
1146 1297 &::after {
1147 1298 content: "\f113";
1148 1299 font-family: dashicons;
1149 1300 display: inline-block;
@@ -1168,14 +1319,15 @@
1168 1319 position: absolute;
1169 1320 right: -30px;
1170 1321 color: #2271b1;
1171 1322 }
1172 -
1323 +
1173 1324 @keyframes wdk-spin {
1174 1325 0% {
1175 1326 -webkit-transform: rotate(0deg);
1176 1327 transform: rotate(0deg);
1177 1328 }
1329 +
1178 1330 100% {
1179 1331 -webkit-transform: rotate(360deg);
1180 1332 transform: rotate(360deg);
1181 1333 }
@@ -1183,8 +1335,9 @@
1183 1335 }
1184 1336
1185 1337 .wdk_btn_load_success {
1186 1338 position: relative;
1339 +
1187 1340 &::after {
1188 1341 content: "\f147";
1189 1342 font-family: dashicons;
1190 1343 display: inline-block;
@@ -1207,13 +1360,14 @@
1207 1360 position: absolute;
1208 1361 right: -30px;
1209 1362 color: #2271b1;
1210 1363 }
1211 -
1364 +
1212 1365 }
1213 1366
1214 1367 .wdk_btn_load_error {
1215 1368 position: relative;
1369 +
1216 1370 &::after {
1217 1371 content: "\f335";
1218 1372 font-family: dashicons;
1219 1373 display: inline-block;
@@ -1236,9 +1390,9 @@
1236 1390 position: absolute;
1237 1391 right: -30px;
1238 1392 color: #2271b1;
1239 1393 }
1240 -
1394 +
1241 1395 }
1242 1396
1243 1397 .wdk-depend-fields .wdk_field {
1244 1398 position: relative;
@@ -1251,9 +1405,10 @@
1251 1405 align-items: center;
1252 1406 justify-content: flex-start;
1253 1407 padding: 15px 15px;
1254 1408
1255 - input[type="checkbox"], input[type="radio"] {
1409 + input[type="checkbox"],
1410 + input[type="radio"] {
1256 1411 margin: 0;
1257 1412 }
1258 1413
1259 1414 label {
@@ -1268,9 +1423,9 @@
1268 1423 background: #2c3338;
1269 1424
1270 1425 label {
1271 1426 margin-left: auto;
1272 - }
1427 + }
1273 1428 }
1274 1429
1275 1430 &.wdk_btn_load_indicator.out::after {
1276 1431 right: 15px;
@@ -1288,9 +1443,9 @@
1288 1443 .wdk-wrap .wdk-listing-childs-drop {
1289 1444 margin-top: 6px;
1290 1445 border: 1px solid #c3c4c7;
1291 1446 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1292 - border-radius: 4px;
1447 + border-radius: 0;
1293 1448 border: 1px dashed #8c8f94;
1294 1449 background-color: #fff;
1295 1450
1296 1451 min-height: 75px;
@@ -1296,8 +1451,9 @@
1296 1451 min-height: 75px;
1297 1452 box-sizing: border-box;
1298 1453 padding: 15px 15px 0 15px;
1299 1454 margin-bottom: 15px;
1455 +
1300 1456 .drop-listing-item {
1301 1457 width: 100%;
1302 1458 max-width: initial;
1303 1459 min-width: initial;
@@ -1302,9 +1458,9 @@
1302 1458 max-width: initial;
1303 1459 min-width: initial;
1304 1460 margin: 0px 15px 15px 0px;
1305 1461 cursor: pointer;
1306 - border-radius: 4px;
1462 + border-radius: 0;
1307 1463 border: 1px solid #c3c4c7;
1308 1464 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
1309 1465 background: #fff;
1310 1466
@@ -1364,8 +1520,9 @@
1364 1520 background: #fff;
1365 1521 border: 1px solid #c3c4c7;
1366 1522 margin-bottom: 15px;
1367 1523 margin-top: 10px;
1524 +
1368 1525 label {
1369 1526 display: inline-block;
1370 1527 font-size: 18px;
1371 1528 border: 1px solid #eee;
@@ -1371,20 +1528,20 @@
1371 1528 border: 1px solid #eee;
1372 1529 cursor: pointer;
1373 1530 transition: all .15s;
1374 1531 padding: 10px 15px;
1375 -
1376 1532
1533 +
1377 1534 &.active,
1378 1535 &:hover {
1379 1536 background: #eee;
1380 1537 }
1381 -
1538 +
1382 1539 &:not(:last-child) {
1383 1540 margin-right: -1px;
1384 1541 }
1385 1542 }
1386 - }
1543 + }
1387 1544
1388 1545 .wdk-tabs-panel {
1389 1546 >.wdk-tab {
1390 1547 display: none;
@@ -1393,18 +1550,18 @@
1393 1550 .wdk-tab-input {
1394 1551 display: none;
1395 1552 }
1396 1553
1397 - input:checked + div.wdk-tab {
1554 + input:checked+div.wdk-tab {
1398 1555 display: block
1399 1556 }
1400 1557 }
1401 -
1558 +
1402 1559 }
1403 1560
1404 1561 .wdk-wrap {
1405 1562
1406 - .wdk_multi_treefield_dropdown {
1563 + .wdk_multi_treefield_dropdown {
1407 1564 margin-bottom: 15px;
1408 1565 }
1409 1566
1410 1567 .wdk_multi_treefield_dropdown_container .wdk_multi_treefield_dropdown:last-child {
@@ -1416,10 +1573,51 @@
1416 1573 padding-right: 30px;
1417 1574 }
1418 1575 }
1419 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 + }
1420 1588
1589 + caption {
1590 + color: #000;
1591 + font-weight: 600;
1592 + font-size: 16px;
1593 + padding-bottom: 15px;
1594 + text-align: left;
1595 + }
1421 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 +
1422 1620 .custom_parameter {
1423 1621 float: left;
1424 1622 margin-right: 6px;
1425 1623
@@ -1466,8 +1664,9 @@
1466 1664 &:hover {
1467 1665 background: #135e96;
1468 1666 color: #fff;
1469 1667 }
1668 +
1470 1669 span {
1471 1670 height: auto;
1472 1671 }
1473 1672 }
@@ -1472,8 +1671,332 @@
1472 1671 }
1473 1672 }
1474 1673
1475 1674 .filters-form {
1476 - select,input,button,.custom_parameter {
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: "";
1477 2000 margin-bottom: 5px;
1478 2001 }
1479 2002 }