PluginProbe ʕ •ᴥ•ʔ
Secure Custom Fields / trunk
Secure Custom Fields vtrunk
6.9.1 6.9.0 6.8.9 6.8.7 6.8.8 6.8.6 6.8.4 6.8.5 trunk 6.4.0-beta1 6.4.0-beta2 6.4.1 6.4.1-beta3 6.4.1-beta4 6.4.1-beta5 6.4.1-beta6 6.4.1-beta7 6.4.2 6.5.0 6.5.1 6.5.2 6.5.3 6.5.4 6.5.5 6.5.6 6.5.7 6.6.0 6.7.0 6.7.1 6.8.0 6.8.1 6.8.2 6.8.3
secure-custom-fields / assets / src / sass / _field-group.scss
secure-custom-fields / assets / src / sass Last commit date
pro 3 weeks ago _acf-headerbar.scss 1 year ago _acf-icon-picker.scss 1 year ago _admin-inputs.scss 1 year ago _admin-toolbar.scss 1 year ago _btn.scss 1 year ago _dark.scss 1 year ago _edit-field-group.scss 1 year ago _field-group.scss 1 year ago _field-picker.scss 1 year ago _field-type-icons.scss 1 year ago _fields.scss 1 month ago _forms.scss 11 months ago _global.scss 1 year ago _icons.scss 1 year ago _input.scss 1 year ago _list-table.scss 1 year ago _media.scss 1 year ago _mixins.scss 1 year ago _post-types-taxonomies.scss 1 year ago _postbox.scss 1 year ago _pro-upgrade.scss 1 year ago _sub-field-groups.scss 1 year ago _tools.scss 1 year ago _typography.scss 1 year ago _updates.scss 1 year ago _variables.scss 1 year ago acf-dark.scss 1 year ago acf-field-group.scss 8 months ago acf-global.scss 2 months ago acf-input.scss 1 month ago
_field-group.scss
819 lines
1 /*--------------------------------------------------------------------------------------------
2 *
3 * Field Group
4 *
5 *--------------------------------------------------------------------------------------------*/
6
7 // Reset postbox inner padding.
8 #acf-field-group-fields > .inside,
9 #acf-field-group-locations > .inside,
10 #acf-field-group-options > .inside {
11 padding: 0;
12 margin: 0;
13 }
14
15 // Hide metabox order buttons added in WP 5.5.
16 .postbox {
17 .handle-order-higher,
18 .handle-order-lower {
19 display: none;
20 }
21 }
22
23 /*----------------------------------------------------------------------------
24 *
25 * Postbox: Publish
26 *
27 *----------------------------------------------------------------------------*/
28 #minor-publishing-actions,
29 #misc-publishing-actions #visibility,
30 #misc-publishing-actions .edit-timestamp {
31 display: none;
32 }
33
34 #minor-publishing {
35 border-bottom: 0 none;
36 }
37
38 #misc-pub-section {
39 border-bottom: 0 none;
40 }
41
42 #misc-publishing-actions .misc-pub-section {
43 border-bottom-color: #F5F5F5;
44 }
45
46
47 /*----------------------------------------------------------------------------
48 *
49 * Postbox: Fields
50 *
51 *----------------------------------------------------------------------------*/
52 #acf-field-group-fields {
53 border: 0 none;
54
55 .inside {
56 border-top: {
57 width: 0;
58 style: none;
59 };
60 }
61
62 /* links */
63 a {
64 text-decoration: none;
65 }
66
67 /* Field type */
68 .li-field-type {
69
70 .field-type-icon {
71 margin: {
72 right: 8px;
73 };
74
75 @media screen and (max-width: 600px) {
76 display: none;
77 }
78
79 }
80
81 .field-type-label {
82 display: flex;
83 }
84
85 .acf-pro-label-field-type {
86 position: relative;
87 top: -3px;
88 margin-left: 8px;
89
90 img {
91 max-width: 34px;
92 }
93 }
94
95 }
96
97 /* table header */
98 .li-field-order {
99 width: 64px;
100 justify-content: center;
101
102 @media screen and (max-width: $md) {
103 width: 32px;
104 }
105
106 }
107 .li-field-label { width: calc(50% - 64px); }
108 .li-field-name { width: 25%; word-break: break-word; }
109 .li-field-key { display: none; }
110 .li-field-type { width: 25%; }
111
112 /* show keys */
113 &.show-field-keys {
114
115 .li-field-label { width: calc(35% - 64px); };
116 .li-field-name { width: 15%; };
117 .li-field-key { width: 25%; display: flex; };
118 .li-field-type { width: 25%; };
119
120 }
121
122 /* hide tabs */
123 &.hide-tabs {
124 .acf-field-settings-tab-bar {
125 display: none;
126 }
127
128 .acf-field-settings-main {
129 padding: 0;
130
131 &.acf-field-settings-main-general {
132 padding-top: 32px;
133 }
134
135 .acf-field {
136 margin-bottom: 32px;
137 }
138
139 .acf-field-setting-wrapper {
140 padding-top: 0;
141 border-top: none;
142 }
143
144 .acf-field-settings-split .acf-field {
145 border-bottom: {
146 width: 1px;
147 style: solid;
148 color: $gray-200;
149 };
150 }
151
152 .acf-field-setting-first_day {
153 padding-top: 0;
154 border-top: none;
155 }
156 }
157
158 .acf-field-settings-footer {
159 margin-top: 32px;
160 }
161 }
162
163 /* fields */
164 .acf-field-list-wrap {
165 border: $wp-card-border solid 1px;
166 }
167
168 .acf-field-list {
169 background: #f5f5f5;
170 margin-top: -1px;
171
172 .acf-tbody {
173
174 > .li-field-name,
175 > .li-field-key {
176 align-items: flex-start;
177 }
178
179 }
180
181 .copyable:not(.input-copyable, .copy-unsupported) {
182 cursor: pointer;
183 display: inline-flex;
184 align-items: center;
185
186 &:hover:after {
187 content: '';
188 padding-left: 5px;
189 $icon-size: 12px;
190 display: inline-flex;
191 width: $icon-size;
192 height: $icon-size;
193 background-color: $gray-500;
194 border: none;
195 border-radius: 0;
196 -webkit-mask-size: contain;
197 mask-size: contain;
198 -webkit-mask-repeat: no-repeat;
199 mask-repeat: no-repeat;
200 -webkit-mask-position: center;
201 mask-position: center;
202 text-indent: 500%;
203 white-space: nowrap;
204 overflow: hidden;
205 -webkit-mask-image: url('../../images/icons/icon-copy.svg');
206 mask-image: url('../../images/icons/icon-copy.svg');
207 background-size: cover;
208 }
209
210 &.sub-label {
211 padding-right: 22px;
212
213 &:hover {
214 padding-right: 0;
215
216 &:after {
217 $icon-size: 14px;
218 width: $icon-size;
219 height: $icon-size;
220 padding-left: 8px;
221 }
222 }
223 }
224
225 &.copied:hover:after {
226 -webkit-mask-image: url('../../images/icons/icon-check-circle-solid.svg');
227 mask-image: url('../../images/icons/icon-check-circle-solid.svg');
228 background-color: $acf_success;
229 }
230 }
231
232 .copyable.input-copyable:not(.copy-unsupported) {
233 cursor: pointer;
234 display: block;
235 position: relative;
236 align-items: center;
237
238 input {
239 padding-right: 40px;
240 }
241
242 .acf-input-wrap:after {
243 content: '';
244 padding-left: 5px;
245 $icon-size: 16px;
246 right: 12px;
247 top: 12px;
248 position: absolute;
249 width: $icon-size;
250 height: $icon-size;
251 background-color: $gray-400;
252 border: none;
253 border-radius: 0;
254 -webkit-mask-size: contain;
255 mask-size: contain;
256 -webkit-mask-repeat: no-repeat;
257 mask-repeat: no-repeat;
258 -webkit-mask-position: center;
259 mask-position: center;
260 text-indent: 500%;
261 white-space: nowrap;
262 overflow: hidden;
263 -webkit-mask-image: url('../../images/icons/icon-copy.svg');
264 mask-image: url('../../images/icons/icon-copy.svg');
265 background-size: cover;
266 }
267
268 &.copied .acf-input-wrap:after {
269 -webkit-mask-image: url('../../images/icons/icon-check-circle-solid.svg');
270 mask-image: url('../../images/icons/icon-check-circle-solid.svg');
271 background-color: $acf_success;
272 }
273 }
274
275
276
277 /* no fields */
278 .no-fields-message {
279 padding: 15px 15px;
280 background: #fff;
281 display: none;
282 }
283
284 /* empty */
285 &.-empty {
286 .no-fields-message {
287 display: block;
288 }
289 }
290 }
291
292 // WP Admin 3.8
293 @include wp-admin('3-8') {
294 .acf-field-list-wrap {
295 border-color: $wp38-card-border-1;
296 }
297 }
298 }
299
300
301 .rtl #acf-field-group-fields {
302 .li-field-type {
303 .field-type-icon {
304 margin: {
305 left: 8px;
306 right: 0;
307 };
308 }
309 }
310 }
311
312 /* field object */
313 .acf-field-object {
314 border-top: $wp38-card-border-2 solid 1px;
315 background: #fff;
316
317 /* sortable */
318 &.ui-sortable-helper {
319 overflow: hidden !important;
320 border: {
321 width: 1px;
322 style: solid;
323 color: $blue-200 !important;
324 };
325 border-radius: $radius-lg;
326 filter: drop-shadow(0px 10px 20px rgba(16, 24, 40, 0.14)) drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.1));
327
328 &:before {
329 display: none !important;
330 }
331
332 }
333
334 &.ui-sortable-placeholder {
335 box-shadow: 0 -1px 0 0 #DFDFDF;
336 visibility: visible !important;
337 background: #F9F9F9;
338 border-top-color: transparent;
339 min-height: 54px;
340
341 // hide tab field separator
342 &:after, &:before {
343 visibility: hidden;
344 }
345 }
346
347
348 /* meta */
349 > .meta {
350 display: none;
351 }
352
353
354 /* handle */
355 > .handle {
356
357 a {
358 -webkit-transition: none;
359 -moz-transition: none;
360 -o-transition: none;
361 transition: none;
362 }
363
364 li {
365 word-wrap: break-word;
366 }
367
368 strong {
369 display: block;
370 padding-bottom: 0;
371 font-size: 14px;
372 line-height: 14px;
373 min-height: 14px;
374 }
375
376 .row-options {
377 display: block;
378 opacity: 0;
379 margin: {
380 top: 5px;
381 };
382
383 @media screen and (max-width: 880px) {
384 opacity: 1;
385 margin: {
386 bottom: 0;
387 };
388 }
389
390 a {
391 margin-right: 4px;
392
393 &:hover {
394 color: darken($color-primary-hover, 10%);
395 }
396
397 }
398
399 a.delete-field {
400 color: #a00;
401
402 &:hover { color: #f00; }
403 }
404
405 &.active {
406 visibility: visible;
407 }
408 }
409
410 }
411
412 /* open */
413 &.open {
414
415 + .acf-field-object {
416 border-top-color: #E1E1E1;
417 }
418
419 > .handle {
420 background: $acf_blue;
421 border: darken($acf_blue, 2%) solid 1px;
422 text-shadow: #268FBB 0 1px 0;
423 color: #fff;
424 position: relative;
425 margin: 0 -1px 0 -1px;
426
427 a {
428 color: #fff !important;
429
430 &:hover {
431 text-decoration: underline !important;
432 }
433 }
434
435 }
436 }
437
438
439 /*
440 // debug
441 &[data-save="meta"] {
442 > .handle {
443 border-left: #ffb700 solid 5px !important;
444 }
445 }
446
447 &[data-save="settings"] {
448 > .handle {
449 border-left: #0ec563 solid 5px !important;
450 }
451 }
452 */
453
454
455 /* hover */
456 &:hover, &.-hover, &:focus-within {
457
458 > .handle {
459
460 .row-options {
461 opacity: 1;
462 margin-bottom: 0;
463 }
464
465 }
466 }
467
468
469 /* settings */
470 > .settings {
471 display: none;
472 width: 100%;
473
474 > .acf-table {
475 border: none;
476 }
477 }
478
479
480 /* conditional logic */
481 .rule-groups {
482 margin-top: 20px;
483 }
484
485 }
486
487
488 /*----------------------------------------------------------------------------
489 *
490 * Postbox: Locations
491 *
492 *----------------------------------------------------------------------------*/
493
494 .rule-groups {
495
496 h4 {
497 margin: 3px 0;
498 }
499
500 .rule-group {
501 margin: 0 0 5px;
502
503 h4 {
504 margin: 0 0 3px;
505 }
506
507 td.param {
508 width: 35%;
509 }
510
511 td.operator {
512 width: 20%;
513 }
514
515 td.add {
516 width: 40px;
517 }
518
519 td.remove {
520 width: 28px;
521 vertical-align: middle;
522
523 a {
524 width: 22px;
525 height: 22px;
526 visibility: hidden;
527
528 &:before {
529 position: relative;
530 top: -2px;
531 font-size: 16px;
532 }
533
534 }
535 }
536
537 tr:hover td.remove a {
538 visibility: visible;
539 }
540
541 // empty select
542 select:empty {
543 background: #f8f8f8;
544 }
545 }
546
547
548 &:not(.rule-groups-multiple) {
549 .rule-group {
550 &:first-child tr:first-child td.remove a {
551 /* Don't allow user to delete the only rule group */
552 visibility: hidden !important;
553 }
554 }
555 }
556 }
557
558
559 /*----------------------------------------------------------------------------
560 *
561 * Options
562 *
563 *----------------------------------------------------------------------------*/
564
565 #acf-field-group-options tr[data-name="hide_on_screen"]="hide_on_screen""] li {
566 float: left;
567 width: 33%;
568 }
569
570 @media (max-width: 1100px) {
571
572 #acf-field-group-options tr[data-name="hide_on_screen"]="hide_on_screen""] li {
573 width: 50%;
574 }
575
576 }
577
578
579 /*----------------------------------------------------------------------------
580 *
581 * Conditional Logic
582 *
583 *----------------------------------------------------------------------------*/
584
585 table.conditional-logic-rules {
586 background: transparent;
587 border: 0 none;
588 border-radius: 0;
589 }
590
591 table.conditional-logic-rules tbody td {
592 background: transparent;
593 border: 0 none !important;
594 padding: 5px 2px !important;
595 }
596
597
598 /*----------------------------------------------------------------------------
599 *
600 * Field: Tab
601 *
602 *----------------------------------------------------------------------------*/
603
604 .acf-field-object-tab {
605
606 // hide setting
607 .acf-field-setting-name,
608 .acf-field-setting-instructions,
609 .acf-field-setting-required,
610 .acf-field-setting-warning,
611 .acf-field-setting-wrapper {
612 display: none;
613 }
614
615 // hide name
616 .li-field-name {
617 visibility: hidden;
618 }
619
620 p:first-child {
621 margin: 0.5em 0;
622 }
623
624 // hide presentation setting tabs.
625 li.acf-settings-type-presentation,
626 .acf-field-settings-main-presentation {
627 display: none !important;
628 }
629 }
630
631 /*----------------------------------------------------------------------------
632 *
633 * Field: Accordion
634 *
635 *----------------------------------------------------------------------------*/
636
637 .acf-field-object-accordion {
638
639 // hide setting
640 .acf-field-setting-name,
641 .acf-field-setting-instructions,
642 .acf-field-setting-required,
643 .acf-field-setting-warning,
644 .acf-field-setting-wrapper {
645 display: none;
646 }
647
648 // hide name
649 .li-field-name {
650 visibility: hidden;
651 }
652
653 p:first-child {
654 margin: 0.5em 0;
655 }
656
657 // show settings
658 .acf-field-setting-instructions {
659 display: block;
660 }
661
662 }
663
664
665 /*----------------------------------------------------------------------------
666 *
667 * Field: Message
668 *
669 *----------------------------------------------------------------------------*/
670
671 .acf-field-object-message tr[data-name="name"]="name""],
672 .acf-field-object-message tr[data-name="instructions"]="instructions""],
673 .acf-field-object-message tr[data-name="required"]="required""] {
674 display: none !important;
675 }
676
677 .acf-field-object-message .li-field-name {
678 visibility: hidden;
679 }
680
681 .acf-field-object-message textarea {
682 height: 175px !important;
683 }
684
685
686 /*----------------------------------------------------------------------------
687 *
688 * Field: Separator
689 *
690 *----------------------------------------------------------------------------*/
691
692 .acf-field-object-separator tr[data-name="name"]="name""],
693 .acf-field-object-separator tr[data-name="instructions"]="instructions""],
694 .acf-field-object-separator tr[data-name="required"]="required""] {
695 display: none !important;
696 }
697
698
699 /*----------------------------------------------------------------------------
700 *
701 * Field: Date Picker
702 *
703 *----------------------------------------------------------------------------*/
704
705 .acf-field-object-date-picker,
706 .acf-field-object-time-picker,
707 .acf-field-object-date-time-picker {
708
709 .acf-radio-list {
710
711 li {
712 line-height: 25px;
713 }
714
715 span {
716 display: inline-block;
717 min-width: 10em;
718 }
719
720 input[type="text"]="text""] {
721 width: 100px;
722 }
723 }
724
725 }
726
727 .acf-field-object-date-time-picker {
728
729 .acf-radio-list {
730
731 span {
732 min-width: 15em;
733 }
734
735 input[type="text"]="text""] {
736 width: 200px;
737 }
738 }
739
740 }
741
742
743 /*--------------------------------------------------------------------------------------------
744 *
745 * Slug
746 *
747 *--------------------------------------------------------------------------------------------*/
748
749 #slugdiv {
750
751 .inside {
752 padding: 12px;
753 margin: 0;
754 }
755
756 input[type="text"]="text""] {
757 width: 100%;
758 height: 28px;
759 font-size: 14px;
760 }
761 }
762
763
764 /*--------------------------------------------------------------------------------------------
765 *
766 * RTL
767 *
768 *--------------------------------------------------------------------------------------------*/
769
770 html[dir="rtl"]="rtl""] .acf-field-object.open > .handle {
771 margin: 0
772 }
773
774 /*----------------------------------------------------------------------------
775 *
776 * Device
777 *
778 *----------------------------------------------------------------------------*/
779
780 @media only screen and (max-width: 850px) {
781
782 tr.acf-field,
783 td.acf-label,
784 td.acf-input {
785 display: block !important;
786 width: auto !important;
787 border: 0 none !important;
788 }
789
790 tr.acf-field {
791 border-top: #ededed solid 1px !important;
792 margin-bottom: 0 !important;
793 }
794
795 td.acf-label {
796 background: transparent !important;
797 padding-bottom: 0 !important;
798
799 }
800
801 }
802
803 /*----------------------------------------------------------------------------
804 *
805 * Subtle background on accordion & tab fields to separate them from others
806 *
807 *----------------------------------------------------------------------------*/
808 .post-type-acf-field-group {
809
810 #acf-field-group-fields {
811
812 .acf-field-object-tab,
813 .acf-field-object-accordion {
814 background-color: $gray-50;
815 }
816
817 }
818
819 }