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 / _list-table.scss
secure-custom-fields / assets / src / sass Last commit date
pro 2 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
_list-table.scss
845 lines
1 /*---------------------------------------------------------------------------------------------
2 *
3 * Field Groups
4 *
5 *---------------------------------------------------------------------------------------------*/
6 .acf-internal-post-type {
7
8 // Hide tablenav top.
9 .tablenav.top {
10 display: none;
11 }
12
13 // Fix margin due to hidden tablenav.
14 .subsubsub {
15 margin-bottom: 3px;
16 }
17
18 // table.
19 .wp-list-table {
20 margin: {
21 top: 0;
22 right: 0;
23 bottom: 0;
24 left: 0;
25 }
26 border-radius: $radius-lg;
27 border: none;
28 overflow: hidden;
29 box-shadow: $elevation-01;
30
31 strong {
32 color: $gray-400;
33 margin: 0;
34 }
35
36 a.row-title {
37 font-size: 13px !important;
38 font-weight: 500;
39 }
40
41 th,
42 td {
43 color: $gray-700;
44
45 &.sortable a {
46 padding: 0;
47 }
48
49 &.check-column {
50 padding: {
51 top: 12px;
52 right: 16px;
53 left: 16px;
54 };
55
56 @media screen and (max-width: $md) {
57 vertical-align: top;
58 padding: {
59 right: 2px;
60 left: 10px;
61 };
62 }
63
64 }
65
66 input {
67 margin: 0;
68 padding: 0;
69 }
70
71 .acf-more-items {
72 display: inline-flex;
73 flex-direction: row;
74 justify-content: center;
75 align-items: center;
76 padding: 0px 6px 1px;
77 gap: 8px;
78 width: 25px;
79 height: 16px;
80 background: $gray-200;
81 border-radius: 100px;
82 font-weight: 400;
83 font-size: 10px;
84 color: $gray-600;
85 }
86
87 .acf-emdash {
88 color: $gray-300;
89 }
90 }
91
92 // Table headers
93 thead th, thead td,
94 tfoot th, tfoot td {
95 height: 48px;
96 padding: {
97 right: 24px;
98 left: 24px;
99 };
100 box-sizing: border-box;
101 background-color: $gray-50;
102 border-color: $gray-200;
103 @extend .p4;
104 font-weight: 500;
105
106 @media screen and (max-width: $md) {
107 padding: {
108 right: 16px;
109 left: 8px;
110 };
111 }
112
113 &.check-column {
114 @media screen and (max-width: $md) {
115 vertical-align: middle;
116 }
117 }
118
119 }
120
121 // Table body
122 tbody th,
123 tbody td {
124 box-sizing: border-box;
125 height: 60px;
126 padding: {
127 top: 10px;
128 right: 24px;
129 bottom: 10px;
130 left: 24px;
131 };
132 vertical-align: top;
133 background-color: #fff;
134 border-bottom: {
135 width: 1px;
136 color: $gray-200;
137 style: solid;
138 };
139 @extend .p4;
140
141 @media screen and (max-width: $md) {
142 padding: {
143 right: 16px;
144 left: 8px;
145 };
146 }
147
148 }
149
150 .column-acf-key {
151 white-space: nowrap;
152 }
153
154 // SVG icons
155 .column-acf-key .acf-icon-key-solid {
156 display: inline-block;
157 position: relative;
158 bottom: -2px;
159 width: 15px;
160 height: 15px;
161 margin: {
162 right: 4px;
163 };
164 color: $gray-400;
165 }
166
167 // Post location icon
168 .acf-location .dashicons {
169 position: relative;
170 bottom: -2px;
171 width: 16px;
172 height: 16px;
173 margin: {
174 right: 6px;
175 };
176 font-size: 16px;
177 color: $gray-400;
178 }
179
180 .post-state {
181 @extend .p3;
182 color: $gray-500;
183 }
184
185 // Add subtle hover background to define row.
186 tr:hover,
187 tr:focus-within {
188 background: #f7f7f7;
189
190 .row-actions {
191 margin: {
192 bottom: 0;
193 };
194 };
195
196 }
197
198 // Use less specific identifier to inherit mobile styling.
199 @media screen and ( min-width: 782px ) {
200 .column-acf-count { width: 10%; }
201 }
202
203 .row-actions {
204 span.file {
205 display: block;
206 overflow: hidden;
207 white-space: nowrap;
208 text-overflow: ellipsis;
209 }
210 }
211 }
212
213 &.rtl {
214 .wp-list-table {
215 .column-acf-key .acf-icon-key-solid {
216 margin: {
217 left: 4px;
218 right: 0;
219 };
220 }
221
222 .acf-location .dashicons {
223 margin: {
224 left: 6px;
225 right: 0;
226 };
227 }
228 }
229 }
230
231 // Actions
232 .row-actions {
233 margin: {
234 top: 2px;
235 };
236 padding: {
237 top: 0;
238 right: 0;
239 bottom: 0;
240 left: 0;
241 }
242 @extend .p5;
243 line-height: 14px;
244 color: $gray-300;
245
246 .trash a {
247 color: $acf_error;
248 }
249
250 }
251
252
253 // Remove padding from checkbox column
254 .widefat thead td.check-column,
255 .widefat tfoot td.check-column {
256 padding: {
257 top: 0;
258 };
259 }
260
261 }
262
263 /*--------------------------------------------------------------------------------------------
264 *
265 * Row actions
266 *
267 *--------------------------------------------------------------------------------------------*/
268 .acf-internal-post-type {
269
270 .row-actions {
271 @extend .p6;
272
273 a:hover {
274 color: darken($color-primary-hover, 10%);
275 }
276
277 .trash a {
278 color: #a00;
279 &:hover { color: #f00; }
280 }
281
282 &.visible {
283 margin: {
284 bottom: 0;
285 };
286 opacity: 1;
287 }
288
289 }
290
291 }
292
293
294 /*--------------------------------------------------------------------------------------------
295 *
296 * Row hover
297 *
298 *--------------------------------------------------------------------------------------------*/
299 .acf-internal-post-type {
300
301 #the-list tr:hover td,
302 #the-list tr:hover th {
303 background-color: lighten($blue-50, 3%);
304 }
305
306 }
307
308 /*---------------------------------------------------------------------------------------------
309 *
310 * Table Nav
311 *
312 *---------------------------------------------------------------------------------------------*/
313 .acf-internal-post-type {
314
315 .tablenav {
316 margin: {
317 top: 24px;
318 right: 0;
319 bottom: 0;
320 left: 0;
321 };
322 padding: {
323 top: 0;
324 right: 0;
325 bottom: 0;
326 left: 0;
327 };
328 color: $gray-500;
329 }
330
331 }
332
333 /*--------------------------------------------------------------------------------------------
334 *
335 * Search box
336 *
337 *--------------------------------------------------------------------------------------------*/
338 .acf-internal-post-type #posts-filter p.search-box {
339 margin: {
340 top: 5px;
341 right: 0;
342 bottom: 24px;
343 left: 0;
344 };
345
346 #post-search-input {
347 min-width: 280px;
348 margin: {
349 top: 0;
350 right: 8px;
351 bottom: 0;
352 left: 0;
353 };
354 }
355
356 @media screen and (max-width: 768px) {
357 display: flex;
358 box-sizing: border-box;
359 padding-right: 24px;
360 margin-right: 16px;
361 position: inherit;
362
363 #post-search-input {
364 min-width: auto;
365 }
366
367 }
368
369 }
370
371 .rtl.acf-internal-post-type #posts-filter p.search-box {
372 #post-search-input {
373 margin: {
374 right: 0;
375 left: 8px;
376 };
377 }
378
379 @media screen and (max-width: 768px) {
380 padding-left: 24px;
381 padding-right: 0;
382 margin-left: 16px;
383 margin-right: 0;
384 }
385 }
386
387 /*--------------------------------------------------------------------------------------------
388 *
389 * Status tabs
390 *
391 *--------------------------------------------------------------------------------------------*/
392 .acf-internal-post-type .subsubsub {
393 display: flex;
394 align-items: flex-end;
395 height: 40px;
396 margin: {
397 bottom: 16px;
398 };
399
400 li {
401 margin: {
402 top: 0;
403 right: 4px;
404 };
405 color: $gray-400;
406 @extend .p4;
407
408 .count {
409 color: $gray-500;
410 }
411
412 }
413
414 }
415
416 /*--------------------------------------------------------------------------------------------
417 *
418 * Pagination
419 *
420 *--------------------------------------------------------------------------------------------*/
421 .acf-internal-post-type {
422
423 .tablenav-pages {
424 display: flex;
425 align-items: center;
426
427 &.no-pages{
428 display: none;
429 }
430
431 .displaying-num {
432 margin: {
433 top: 0;
434 right: 16px;
435 bottom: 0;
436 left: 0;
437 };
438 }
439
440 .pagination-links {
441 display: flex;
442 align-items: center;
443
444 #table-paging {
445 margin: {
446 top: 0;
447 right: 4px;
448 bottom: 0;
449 left: 8px;
450 };
451
452 .total-pages {
453 margin: {
454 right: 0;
455 };
456 }
457
458 }
459
460 }
461
462 // Hide pagination if there's only 1 page
463 &.one-page .pagination-links {
464 display: none;
465 }
466
467 }
468
469 }
470
471 /*--------------------------------------------------------------------------------------------
472 *
473 * Pagination buttons & icons
474 *
475 *--------------------------------------------------------------------------------------------*/
476 .acf-internal-post-type .tablenav-pages .pagination-links .button {
477 display: inline-flex;
478 align-items: center;
479 align-content: center;
480 justify-content: center;
481 min-width: 40px;
482 margin: {
483 top: 0;
484 right: 0;
485 bottom: 0;
486 left: 0;
487 };
488 padding: {
489 top: 0;
490 right: 0;
491 bottom: 0;
492 left: 0;
493 };
494 background-color: transparent;
495
496 // Pagination Buttons
497 &:nth-child(1),
498 &:nth-child(2),
499 &:last-child,
500 &:nth-last-child(2) {
501 display: inline-block;
502 position: relative;
503 text-indent: 100%;
504 white-space: nowrap;
505 overflow: hidden;
506 margin: {
507 left: 4px;
508 }
509
510 // Pagination Button Icons
511 &:before {
512 $icon-size: 20px;
513 content: "";
514 display: block;
515 position: absolute;
516 width: 100%;
517 height: 100%;
518 top: 0;
519 left: 0;
520 $icon-size: $icon-size;
521 background-color: $link-color;
522 border-radius: 0;
523 -webkit-mask-size: $icon-size;
524 mask-size: $icon-size;
525 -webkit-mask-repeat: no-repeat;
526 mask-repeat: no-repeat;
527 -webkit-mask-position: center;
528 mask-position: center;
529 }
530
531 }
532
533 // First Page Icon
534 &:nth-child(1):before {
535 -webkit-mask-image: url('../../images/icons/icon-chevron-left-double.svg');
536 mask-image: url('../../images/icons/icon-chevron-left-double.svg');
537 }
538
539 // Previous Page Icon
540 &:nth-child(2):before {
541 -webkit-mask-image: url('../../images/icons/icon-chevron-left.svg');
542 mask-image: url('../../images/icons/icon-chevron-left.svg');
543 }
544
545 // Next Page Icon
546 &:nth-last-child(2):before {
547 -webkit-mask-image: url('../../images/icons/icon-chevron-right.svg');
548 mask-image: url('../../images/icons/icon-chevron-right.svg');
549 }
550
551 // Last Page Icon
552 &:last-child:before {
553 -webkit-mask-image: url('../../images/icons/icon-chevron-right-double.svg');
554 mask-image: url('../../images/icons/icon-chevron-right-double.svg');
555 }
556
557 // Pagination Button Hover State
558 &:hover {
559 border-color: $blue-600;
560 background-color: rgba($link-color, .05);
561
562 &:before {
563 background-color: $blue-600;
564 }
565
566 }
567
568 // Pagination Button Disabled State
569 &.disabled {
570 background-color: transparent !important;
571
572 &.disabled:before {
573 background-color: $gray-300;
574 }
575
576 }
577
578 }
579
580 /*---------------------------------------------------------------------------------------------
581 *
582 * Empty state
583 *
584 *---------------------------------------------------------------------------------------------*/
585 .acf-no-field-groups-wrapper,
586 .acf-no-taxonomies-wrapper,
587 .acf-no-post-types-wrapper,
588 .acf-no-options-pages-wrapper,
589 .acf-options-preview-wrapper {
590 display: flex;
591 justify-content: center;
592 padding: {
593 top: 48px;
594 bottom: 48px;
595 };
596
597 .acf-no-field-groups-inner,
598 .acf-no-taxonomies-inner,
599 .acf-no-post-types-inner,
600 .acf-no-options-pages-inner,
601 .acf-options-preview-inner {
602 display: flex;
603 flex-wrap: wrap;
604 justify-content: center;
605 align-content: center;
606 align-items: flex-start;
607 text-align: center;
608 max-width: 420px;
609 min-height: 320px;
610
611 img,
612 h2,
613 p {
614 flex: 1 0 100%;
615 }
616
617 h2 {
618 @extend .acf-h2;
619 margin: {
620 top: 32px;
621 bottom: 0;
622 };
623 padding: 0;
624 color: $gray-700;
625 line-height: 1.6rem;
626 }
627
628 p {
629 @extend .p2;
630 margin: {
631 top: 12px;
632 bottom: 0;
633 };
634 padding: 0;
635 color: $gray-500;
636
637 &.acf-small {
638 display: block;
639 position: relative;
640 margin: {
641 top: 32px;
642 };
643 @extend .p6;
644 }
645
646 }
647
648
649 img {
650 max-width: 284px;
651 margin: {
652 bottom: 0;
653 };
654 }
655
656 .acf-btn {
657 margin: {
658 top: 32px;
659 };
660 }
661
662 }
663
664 .acf-no-post-types-inner,
665 .acf-no-options-pages-inner {
666 img {
667 width: 106px;
668 height: 88px;
669 }
670 }
671
672 .acf-no-taxonomies-inner {
673 img {
674 width: 98px;
675 height: 88px;
676 }
677 }
678
679 };
680
681 .acf-no-field-groups,
682 .acf-no-post-types,
683 .acf-no-taxonomies,
684 .acf-no-options-pages {
685
686 #the-list tr:hover td,
687 #the-list tr:hover th,
688 .acf-admin-field-groups .wp-list-table tr:hover,
689 .striped > tbody > :nth-child(odd), ul.striped > :nth-child(odd), .alternate {
690 background-color: transparent !important;
691 }
692
693 .wp-list-table {
694
695 thead,
696 tfoot {
697 display: none;
698 }
699
700 a.acf-btn {
701 border: 1px solid rgba(0, 0, 0, 0.16);
702 box-shadow: none;
703 }
704
705 }
706
707 }
708
709 .acf-internal-post-type #the-list .no-items td {
710 vertical-align: middle;
711 }
712
713
714 /*---------------------------------------------------------------------------------------------
715 *
716 * Options Page Preview
717 *
718 *---------------------------------------------------------------------------------------------*/
719 .acf-options-preview,
720 .acf-no-options-pages-wrapper {
721 .acf-btn {
722 margin: {
723 left: 8px;
724 };
725 };
726
727 .disabled {
728 background-color: $gray-100 !important;
729 color: $gray-400 !important;
730 border: 1px $gray-300 solid;
731 cursor: default !important;
732 }
733
734 .acf-options-pages-preview-upgrade-button {
735 height: 48px;
736 padding: 8px 48px 8px 48px !important;
737 border: none !important;
738 gap: 6px;
739 display: inline-flex;
740 align-items: center;
741 align-self: stretch;
742 background: $gradient-pro;
743 border-radius: $radius-md;
744 text-decoration: none;
745
746 &:focus {
747 border: none;
748 outline: none;
749 box-shadow: none;
750 }
751
752 p {
753 margin: 0;
754 padding: {
755 top: 8px;
756 bottom: 8px;
757 }
758 @extend .p4;
759 font-weight: normal;
760 text-transform: none;
761 color: #fff;
762 }
763
764 .acf-icon {
765 $icon-size: 20px;
766 width: $icon-size;
767 height: $icon-size;
768 margin: {
769 right: 6px;
770 left: -2px;
771 };
772 background-color: $gray-50;
773 }
774 }
775
776 .acf-ui-options-page-pro-features-actions a.acf-btn i {
777 margin-right: -2px !important;
778 margin-left: 0px !important;
779 }
780
781 .acf-pro-label {
782 vertical-align: middle;
783 }
784
785 }
786
787 /*---------------------------------------------------------------------------------------------
788 *
789 * Small screen list table info toggle
790 *
791 *---------------------------------------------------------------------------------------------*/
792 .acf-internal-post-type {
793
794 .wp-list-table .toggle-row:before {
795 top: 4px;
796 left: 16px;
797 border-radius: 0;
798 $icon-size: 20px;
799 content: "";
800 display: block;
801 position: absolute;
802 width: 16px;
803 height: 16px;
804 $icon-size: $icon-size;
805 background-color: $link-color;
806 border-radius: 0;
807 -webkit-mask-size: $icon-size;
808 mask-size: $icon-size;
809 -webkit-mask-repeat: no-repeat;
810 mask-repeat: no-repeat;
811 -webkit-mask-position: center;
812 mask-position: center;
813 -webkit-mask-image: url('../../images/icons/icon-chevron-down.svg');
814 mask-image: url('../../images/icons/icon-chevron-down.svg');
815 text-indent: 100%;
816 white-space: nowrap;
817 overflow: hidden;
818 }
819
820 .wp-list-table .is-expanded .toggle-row:before {
821 -webkit-mask-image: url('../../images/icons/icon-chevron-up.svg');
822 mask-image: url('../../images/icons/icon-chevron-up.svg');
823 }
824
825 }
826
827 /*---------------------------------------------------------------------------------------------
828 *
829 * Small screen checkbox
830 *
831 *---------------------------------------------------------------------------------------------*/
832 .acf-internal-post-type {
833
834 @media screen and (max-width: $md) {
835
836 .widefat th input[type="checkbox"]="checkbox""],
837 .widefat thead td input[type="checkbox"]="checkbox""],
838 .widefat tfoot td input[type="checkbox"]="checkbox""] {
839 margin-bottom: 0;
840 }
841
842 }
843
844 }
845