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 / pro / _fields.scss
secure-custom-fields / assets / src / sass / pro Last commit date
_blocks.scss 1 week ago _field-group.scss 1 year ago _fields.scss 1 year ago acf-pro-field-group.scss 1 year ago acf-pro-input.scss 7 months ago acf-styles-in-iframe-for-blocks.scss 6 months ago
_fields.scss
875 lines
1 /*---------------------------------------------------------------------------------------------
2 *
3 * Repeater
4 *
5 *---------------------------------------------------------------------------------------------*/
6
7 .acf-repeater {
8
9 /* table */
10 > table {
11 margin: 0 0 8px;
12 background: #F9F9F9;
13
14 > tbody tr.acf-divider:not(:first-child) > td {
15 border-top: 10px solid $gray-200;
16 }
17 }
18
19 /* row handle (add/remove) */
20 .acf-row-handle {
21 width: 16px;
22 text-align: center !important;
23 vertical-align: middle !important;
24 position: relative;
25
26 .acf-order-input-wrap {
27 width: 45px;
28 }
29
30 .acf-order-input::-webkit-outer-spin-button,
31 .acf-order-input::-webkit-inner-spin-button {
32 -webkit-appearance: none;
33 margin: 0;
34 }
35
36 .acf-order-input {
37 -moz-appearance: textfield;
38 text-align: center;
39 }
40
41 /* icons */
42 .acf-icon {
43 display: none;
44 position: absolute;
45 top: 0;
46 margin: -8px 0 0 -2px;
47
48
49 /* minus icon */
50 &.-minus {
51 top: 50%;
52
53 /* ie fix */
54 body.browser-msie & { top: 25px; }
55
56 }
57 }
58
59
60 /* .order */
61 &.order {
62 background: #f4f4f4;
63 cursor: move;
64 color: #aaa;
65 text-shadow: #fff 0 1px 0;
66
67 &:hover {
68 color: #666;
69 }
70
71 + td {
72 border-left-color: #DFDFDF;
73 }
74 }
75
76 &.pagination {
77 cursor: auto;
78 }
79
80 /* remove */
81 &.remove {
82 background: #F9F9F9;
83 border-left-color: #DFDFDF;
84 }
85 }
86
87
88 /* add in spacer to th (force correct width) */
89 th.acf-row-handle:before {
90 content: "";
91 width: 16px;
92 display: block;
93 height: 1px;
94 }
95
96
97 /* row */
98 .acf-row {
99
100 /* hide clone */
101 &.acf-clone {
102 display: none !important;
103 }
104
105
106 /* hover */
107 &:hover,
108 &.-hover {
109
110 /* icons */
111 > .acf-row-handle .acf-icon {
112 display: block;
113
114 // Show "duplicate" icon above "add" when holding "shift" key.
115 &.show-on-shift {
116 display: none;
117 body.acf-keydown-shift & {
118 display: block;
119 }
120 }
121 &.hide-on-shift {
122 body.acf-keydown-shift & {
123 display: none;
124 }
125 }
126 }
127 }
128 }
129
130 /* sortable */
131 > table > tbody > tr.ui-sortable-helper {
132 box-shadow: 0 1px 5px rgba(0,0,0,0.2);
133 }
134
135 > table > tbody > tr.ui-sortable-placeholder {
136 visibility: visible !important;
137
138 td {
139 background: #F9F9F9;
140 }
141 }
142
143
144 /* layouts */
145 /*
146 &.-row > table > tbody > tr:before,
147 &.-block > table > tbody > tr:before {
148 content: "";
149 display: table-row;
150 height: 2px;
151 background: #f00;
152 }
153 */
154
155 &.-row > table > tbody > tr > td,
156 &.-block > table > tbody > tr > td {
157 border-top-color: #E1E1E1;
158 }
159
160
161 /* empty */
162 &.-empty > table > thead > tr > th {
163 border-bottom: 0 none;
164 }
165
166 &.-empty.-row > table,
167 &.-empty.-block > table {
168 display: none;
169 }
170
171
172 /* collapsed */
173 .acf-row.-collapsed {
174
175 > .acf-field {
176 display: none !important;
177 }
178
179 > td.acf-field.-collapsed-target {
180 display: table-cell !important;
181 }
182 }
183
184 /* collapsed (block layout) */
185 .acf-row.-collapsed > .acf-fields {
186
187 > * {
188 display: none !important;
189 }
190
191 > .acf-field.-collapsed-target {
192 display: block !important;
193
194 &[data-width]] {
195 float: none !important;
196 width: auto !important;
197 }
198 }
199 }
200
201
202 /* collapsed (table layout) */
203 &.-table .acf-row.-collapsed .acf-field.-collapsed-target {
204 border-left-color: #dfdfdf;
205 }
206
207 // Reached maximum rows.
208 &.-max {
209
210 // Hide icons to add rows.
211 .acf-icon[data-event="add-row"]="add-row""] {
212 display: none !important;
213 }
214 }
215
216 > .acf-actions {
217 .acf-button {
218 float: right;
219 pointer-events: auto !important;
220 }
221
222 .acf-tablenav {
223 float: right;
224 margin-right: 20px;
225
226 .current-page {
227 width: auto !important;
228 }
229 }
230 }
231 }
232
233 /*---------------------------------------------------------------------------------------------
234 *
235 * Flexible Content
236 *
237 *---------------------------------------------------------------------------------------------*/
238
239 .acf-flexible-content {
240 position: relative;
241
242 // clones
243 > .clones {
244 display: none;
245 }
246
247 // values
248 > .values {
249 margin: 0 0 8px;
250
251 // sortable
252 > .ui-sortable-placeholder {
253 visibility: visible !important;
254 border: 1px dashed #b4b9be;
255
256 box-shadow: none;
257 background: transparent;
258 }
259 }
260
261 // layout
262 .layout {
263 position: relative;
264 margin: 20px 0 0;
265 background: #fff;
266 border: 1px solid $wp-card-border;
267
268 &:first-child {
269 margin-top: 0;
270 }
271
272 // handle
273 .acf-fc-layout-handle {
274 display: block;
275 position: relative;
276 padding: 8px 10px;
277 cursor: move;
278 border-bottom: $wp-card-border solid 1px;
279 color: #444;
280 font-size: 14px;
281 line-height: 1.4em;
282 }
283
284 // order
285 .acf-fc-layout-order {
286 display: block;
287 width: 20px;
288 height: 20px;
289 border-radius: 10px;
290 display: inline-block;
291 text-align: center;
292 line-height: 20px;
293 margin: 0 2px 0 0;
294 background: #F1F1F1;
295 font-size: 12px;
296 color: #444;
297
298 html[dir="rtl"]="rtl""] & {
299 float: right;
300 margin-right: 0;
301 margin-left: 5px;
302 }
303 }
304
305 // controlls
306 .acf-fc-layout-controls {
307 position: absolute;
308 top: 8px;
309 right: 8px;
310
311 .acf-icon {
312 display: block;
313 float: left;
314 margin: 0 0 0 5px;
315
316 &.-plus, &.-minus, &.-duplicate { visibility: hidden; }
317 }
318
319 html[dir="rtl"]="rtl""] & {
320 right: auto;
321 left: 9px;
322 }
323
324 }
325
326 &.is-selected {
327 border-color: $wp-input-border;
328 .acf-fc-layout-handle {
329 border-color: $wp-input-border;
330 }
331 }
332
333 // open
334 &:hover,
335 &.-hover {
336
337 // controls
338 .acf-fc-layout-controls {
339
340 .acf-icon {
341 &.-plus, &.-minus, &.-duplicate { visibility: visible; }
342 }
343 }
344 }
345
346 // collapsed
347 &.-collapsed {
348 > .acf-fc-layout-handle {
349 border-bottom-width: 0;
350 }
351
352 > .acf-fields,
353 > .acf-table {
354 display: none;
355 }
356 }
357
358 // table
359 > .acf-table {
360 border: 0 none;
361 box-shadow: none;
362
363 > tbody > tr {
364 background: #fff;
365 }
366
367 > thead > tr > th {
368 background: #F9F9F9;
369 }
370 }
371 }
372
373 // no value
374 .no-value-message {
375 padding: 19px;
376 border: #ccc dashed 2px;
377 text-align: center;
378 display: none;
379 }
380
381 // empty
382 &.-empty > .no-value-message {
383 display: block;
384 }
385 }
386
387 // popup
388 .acf-fc-popup {
389 padding: 5px 0;
390 z-index: 900001; // +1 higher than .acf-tooltip
391 min-width: 135px;
392
393 ul, li {
394 list-style: none;
395 display: block;
396 margin: 0;
397 padding: 0;
398 }
399
400 li {
401 position: relative;
402 float: none;
403 white-space: nowrap;
404 }
405
406 .badge {
407 display: inline-block;
408 border-radius: 8px;
409 font-size: 9px;
410 line-height: 15px;
411 padding: 0 5px;
412
413 background: #d54e21;
414 text-align: center;
415 color: #fff;
416 vertical-align: top;
417 margin: 0 0 0 5px;
418 }
419
420 a {
421 color: #eee;
422 padding: 5px 10px;
423 display: block;
424 text-decoration: none;
425 position: relative;
426
427 &:hover {
428 background: #0073aa;
429 color: #fff;
430 }
431
432 &.disabled {
433 color: #888;
434 background: transparent;
435 }
436 }
437 }
438
439
440
441 /*---------------------------------------------------------------------------------------------
442 *
443 * Galery
444 *
445 *---------------------------------------------------------------------------------------------*/
446
447 .acf-gallery {
448 border: $wp-card-border solid 1px;
449 height: 400px;
450 position: relative;
451
452 /* main */
453 .acf-gallery-main {
454 position: absolute;
455 top: 0;
456 right: 0;
457 bottom: 0;
458 left: 0;
459 background: #fff;
460 z-index: 2;
461 }
462
463 /* attachments */
464 .acf-gallery-attachments {
465 position: absolute;
466 top: 0;
467 right: 0;
468 bottom: 48px;
469 left: 0;
470 padding: 5px;
471 overflow: auto;
472 overflow-x: hidden;
473 }
474
475
476 /* attachment */
477 .acf-gallery-attachment {
478 width: 25%;
479 float: left;
480 cursor: pointer;
481 position: relative;
482
483 .margin {
484 margin: 5px;
485 border: $wp-card-border-1 solid 1px;
486 position: relative;
487 overflow: hidden;
488 background: #eee;
489
490 &:before {
491 content: "";
492 display: block;
493 padding-top: 100%;
494 }
495 }
496
497 .thumbnail {
498 position: absolute;
499 top: 0;
500 left: 0;
501 width: 100%;
502 height: 100%;
503 transform: translate(50%, 50%);
504
505 html[dir="rtl"]="rtl""] & {
506 transform: translate(-50%, 50%);
507 }
508
509 img {
510 display: block;
511 height: auto;
512 max-height: 100%;
513 width: auto;
514 transform: translate(-50%, -50%);
515
516 html[dir="rtl"]="rtl""] & {
517 transform: translate(50%, -50%);
518 }
519 }
520 }
521
522 .filename {
523 position: absolute;
524 bottom: 0;
525 left: 0;
526 right: 0;
527 padding: 5%;
528 background: #F4F4F4;
529 background: rgba(255, 255, 255, 0.8);
530 border-top: #DFDFDF solid 1px;
531 font-weight: bold;
532 text-align: center;
533 word-wrap: break-word;
534 max-height: 90%;
535 overflow: hidden;
536 }
537
538 .actions {
539 position: absolute;
540 top: 0;
541 right: 0;
542 display: none;
543 }
544
545
546 /* hover */
547 &:hover {
548
549 .actions {
550 display: block;
551 }
552
553 }
554
555
556 /* sortable */
557 &.ui-sortable-helper {
558
559 .margin {
560 border: none;
561 box-shadow: 0 1px 3px rgba(0,0,0,0.3);
562 }
563 }
564
565 &.ui-sortable-placeholder {
566
567 .margin {
568 background: #F1F1F1;
569 border: none;
570
571 * {
572 display: none !important;
573 }
574 }
575
576 }
577
578
579 /* active */
580 &.active {
581
582 .margin {
583 box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 5px #0073aa;
584 }
585
586 }
587
588
589 /* icon */
590 &.-icon {
591
592 .thumbnail img {
593 transform: translate(-50%, -70%);
594 }
595
596 }
597
598
599 /* rtl */
600 html[dir="rtl"]="rtl""] & {
601 float: right;
602 }
603
604 }
605
606
607
608 &.sidebar-open {
609
610 /* hide attachment actions when sidebar is open */
611 .acf-gallery-attachment .actions {
612 display: none;
613 }
614
615
616 /* allow sidebar to move over main for small widths (widget edit box) */
617 .acf-gallery-side {
618 z-index: 2;
619 }
620
621 }
622
623
624 /* toolbar */
625 .acf-gallery-toolbar {
626 position: absolute;
627 right: 0;
628 bottom: 0;
629 left: 0;
630 padding: 10px;
631 border-top: $wp-card-border-1 solid 1px;
632 background: #fff;
633 min-height: 28px;
634
635 .acf-hl li {
636 line-height: 24px;
637 }
638
639 .bulk-actions-select {
640 width: auto;
641 margin: 0 1px 0 0;
642 }
643
644 }
645
646
647 /* sidebar */
648 .acf-gallery-side {
649 position: absolute;
650 top: 0;
651 right: 0;
652 bottom: 0;
653 width: 0;
654
655 background: #F9F9F9;
656 border-left: $wp-card-border solid 1px;
657
658 z-index: 1;
659 overflow: hidden;
660
661 .acf-gallery-side-inner {
662 position: absolute;
663 top: 0;
664 left: 0;
665 bottom: 0;
666 width: 349px;
667 }
668
669 }
670
671
672 /* side info */
673 .acf-gallery-side-info {
674 @include clearfix();
675 position: relative;
676 width: 100%;
677 padding: 10px;
678 margin: -10px 0 15px -10px;
679 background: #F1F1F1;
680 border-bottom: #DFDFDF solid 1px;
681
682 html[dir="rtl"]="rtl""] & {
683 margin-left: 0;
684 margin-right: -10px;
685 }
686
687 img {
688 float: left;
689 width: auto;
690 max-width: 65px;
691 max-height: 65px;
692 margin: 0 10px 1px 0;
693 background: #FFFFFF;
694 padding: 3px;
695 border: $wp-card-border solid 1px;
696 border-radius: 1px;
697
698 /* rtl */
699 html[dir="rtl"]="rtl""] & {
700 float: right;
701 margin: 0 0 0 10px;
702 }
703 }
704
705 p {
706 font-size: 13px;
707 line-height: 15px;
708 margin: 3px 0;
709 word-break: break-all;
710 color: #666;
711
712 strong {
713 color: #000;
714 }
715 }
716
717 a {
718 text-decoration: none;
719
720 &.acf-gallery-edit {
721 color: #21759b;
722 }
723
724 &.acf-gallery-remove {
725 color: #bc0b0b;
726 }
727
728 &:hover {
729 text-decoration: underline;
730 }
731
732 }
733
734 }
735
736
737 /* side data */
738 .acf-gallery-side-data {
739 position: absolute;
740 top: 0;
741 right: 0;
742 bottom: 48px;
743 left: 0;
744 overflow: auto;
745 overflow-x: inherit;
746 padding: 10px;
747
748
749 .acf-label,
750 th.label {
751 color: #666666;
752 font-size: 12px;
753 line-height: 25px;
754 padding: 0 4px 8px 0 !important;
755 width: auto !important;
756 vertical-align: top;
757
758 html[dir="rtl"]="rtl""] & {
759 padding: 0 0 8px 4px !important;
760 }
761
762 label {
763 font-weight: normal;
764 }
765 }
766
767 .acf-input,
768 td.field {
769 padding: 0 0 8px !important;
770 }
771
772 textarea {
773 min-height: 0;
774 height: 60px;
775 }
776
777 p.help {
778 font-size: 12px;
779
780 &:hover {
781 font-weight: normal;
782 }
783 }
784
785 }
786
787
788 /* column widths */
789 &[data-columns="1"]="1""] .acf-gallery-attachment { width: 100%; }
790 &[data-columns="2"]="2""] .acf-gallery-attachment { width: 50%; }
791 &[data-columns="3"]="3""] .acf-gallery-attachment { width: 33.333%; }
792 &[data-columns="4"]="4""] .acf-gallery-attachment { width: 25%; }
793 &[data-columns="5"]="5""] .acf-gallery-attachment { width: 20%; }
794 &[data-columns="6"]="6""] .acf-gallery-attachment { width: 16.666%; }
795 &[data-columns="7"]="7""] .acf-gallery-attachment { width: 14.285%; }
796 &[data-columns="8"]="8""] .acf-gallery-attachment { width: 12.5%; }
797
798
799 /* resizable */
800 .ui-resizable-handle {
801 display: block;
802 position: absolute;
803 }
804
805 .ui-resizable-s {
806 bottom: -5px;
807 cursor: ns-resize;
808 height: 7px;
809 left: 0;
810 width: 100%;
811 }
812
813 }
814
815
816
817 /* media modal selected */
818 .acf-media-modal .attachment.acf-selected {
819 box-shadow: 0 0 0 3px #fff inset, 0 0 0 7px #0073aa inset !important;
820
821 .check {
822 display: none !important;
823 }
824
825 .thumbnail {
826 opacity: 0.25 !important;
827 }
828
829 .attachment-preview:before {
830 background: rgba(0,0,0,0.15);
831 z-index: 1;
832 position: relative;
833 }
834
835 }
836
837
838 .acf-admin-single-options-page {
839 .select2-dropdown {
840 border-color: $blue-300 !important;
841 margin-top: -5px;
842 overflow: hidden;
843 box-shadow: $elevation-01;
844 }
845
846 .select2-dropdown.select2-dropdown--above {
847 margin-top: 0;
848 }
849
850 .select2-container--default .select2-results__option[aria-selected="true"]="true""] {
851 background-color: $gray-50 !important;
852 color: $gray-500;
853
854 &:hover {
855 color: $blue-400;
856 }
857 }
858
859 .select2-container--default
860 .select2-results__option--highlighted[aria-selected]] {
861 color: #fff !important;
862 background-color: $blue-500 !important;
863 }
864
865 // remove bottom margin on options
866 .select2-dropdown .select2-results__option {
867 margin-bottom: 0;
868 }
869 }
870
871 // z-index helper for the popup modal.
872 .acf-create-options-page-popup ~ .select2-container {
873 z-index: 999999999;
874 }
875