PluginProbe
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) / 1.8.11
Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) v1.8.11
1.8.13 1.8.12.3 1.8.12.2 1.8.12.1 1.8.12 1.8.11.3 1.8.11.2 1.8.11.1 1.8.11 1.6.6 1.6.60 1.6.7 1.6.8 1.6.9 1.7.0 1.7.0.1 1.7.0.11 1.7.0.12 1.7.0.14 1.7.0.2 1.7.0.3 1.7.0.5 1.7.0.6 1.7.0.7 1.7.0.9 All 211 releases
charitable / assets / scss / charitable.scss

charitable.scss in Charitable – Donation & Fundraising Platform (Donation Forms, Recurring Donations & Fundraising Campaigns) 1.8.11, at assets/scss/charitable.scss

1,695 lines 33.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Campaign summary widget */
2 .campaign-description {
3 margin-bottom: 1em;
4 }
5
6 .single-campaign .campaign-description {
7 font-size: 1.5em;
8 font-weight: bolder;
9 }
10
11 .single-campaign.campaign-widget .campaign-description {
12 font-size: 1em;
13 font-weight: normal;
14 }
15
16 .campaign-summary {
17 *zoom: 1;
18 padding: 0 1em;
19 margin-bottom: 1em;
20 border: 1px solid #e6e6e6;
21 display: flex;
22 flex-wrap: wrap;
23 flex-direction: row;
24 }
25
26 .campaign-summary:before,
27 .campaign-summary:after {
28 content: " ";
29 display: table;
30 }
31
32 .campaign-summary:after {
33 clear: both;
34 }
35
36 .campaign-summary .campaign-summary-item {
37 float: left;
38 width: 50%;
39 padding: 1em 0;
40 border-bottom: 1px solid #e6e6e6;
41 }
42
43 .campaign-summary .campaign-raised .amount,
44 .campaign-summary .campaign-figures .amount {
45 display: block;
46 font-size: 1.5em;
47 font-weight: bolder;
48 }
49
50 .campaign-summary .campaign-donors {
51 clear: left;
52 }
53
54 .campaign-summary .donors-count,
55 .campaign-summary .time-left {
56 font-weight: bolder;
57 }
58
59 .campaign-summary .campaign-donation {
60 float: left;
61 width: 100%;
62 padding: 1em 0;
63 text-align: center;
64 }
65
66 .campaign-summary .campaign-donation .donate-button {
67 display: inline-block;
68 }
69
70 .campaign-is-endless .campaign-summary-item,
71 .campaign-has-no-goal .campaign-summary-item {
72 width: 100%;
73 text-align: center;
74 }
75
76 /* Campaign Progress Bar */
77 .campaign-progress-bar {
78 width: 100%;
79 height: 10px;
80 background-color: #e6e6e6;
81 }
82
83 .campaign-progress-bar .bar {
84 position: relative;
85 display: block;
86 height: 100%;
87 }
88
89 /* Donate Button */
90 .donate-button {
91 padding: 6px 24px;
92 font-size: 1em;
93 line-height: 1.5em;
94 border: none;
95 color: #fff;
96 }
97
98 /* Forms */
99 .charitable-button {
100 cursor: pointer;
101 }
102
103 .charitable-form-field {
104 margin-bottom: 1em;
105 }
106
107 .charitable-form-field label {
108 display: block;
109 margin-bottom: 4px;
110 }
111
112 .charitable-form-field input,
113 .charitable-form-field select,
114 .charitable-form-field textarea {
115 width: 100%;
116 }
117
118 .charitable-form-field button,
119 .charitable-form-field input[type=submit]=submit],
120 .charitable-form-field input[type=button]=button],
121 .charitable-form-field input[type=radio]=radio],
122 .charitable-form-field input[type=checkbox]=checkbox] {
123 width: auto;
124 margin-left: 0;
125 }
126
127 .charitable-form-field.odd {
128 clear: left;
129 }
130
131 .charitable-form-field.charitable-form-field-checkbox input[type=checkbox]=checkbox] {
132 display: inline;
133 height: auto;
134 }
135
136 .charitable-form-field.charitable-form-field-checkbox label {
137 display: inline;
138 padding-left: 4px;
139 font-size: 16px;
140 line-height: 16px;
141 }
142
143 .charitable-form-field.charitable-radio-list {
144 list-style: none;
145 margin-left: 0;
146 padding-left: 0;
147 }
148
149 .charitable-form-field.charitable-radio-list li {
150 list-style: none;
151 margin: 0 20px 0 0;
152 display: inline-block;
153 line-height: 1em;
154 }
155
156 .charitable-form-field.charitable-form-field-multi-checkbox ul {
157 list-style: none;
158 margin-left: 0;
159 padding-left: 0;
160 }
161
162 .charitable-form-field.charitable-form-field-multi-checkbox ul li {
163 list-style: none;
164 margin-left: 0;
165 padding-left: 0;
166 }
167
168 .charitable-form-field .wp-media-buttons {
169 margin-bottom: 0.5em;
170 }
171
172 .charitable-form-field .wp-editor-container {
173 border: 1px solid #dedede;
174 }
175
176 .charitable-fieldset> :last-child,
177 .charitable-fieldset-field-wrapper> :last-child {
178 margin-bottom: 1em;
179 }
180
181 .charitable-radio-list label,
182 .charitable-checkbox-list label {
183 display: inline;
184 }
185
186 .charitable-submit-field .button {
187 font-size: 1em;
188 line-height: 1.5em;
189 }
190
191 .charitable-form-content {
192 margin-bottom: 1em;
193 font-size: 16px;
194 }
195
196 .charitable-gateway-fields {
197 padding-top: 1em;
198 }
199
200 #charitable_field_cc_cvc {
201 max-width: 180px;
202 }
203
204 @media (min-width: 48em) {
205 #charitable_field_cc_cvc {
206 float: left;
207 width: 33%;
208 }
209 }
210
211 @media (min-width: 48em) {
212 #charitable_field_cc_expiration {
213 float: left;
214 width: 63%;
215 margin-left: 4%;
216 clear: none;
217 }
218 }
219
220 #charitable_field_cc_expiration .charitable-fieldset-field-header {
221 font-weight: normal;
222 }
223
224 #charitable_field_cc_expiration fieldset>*:not(.charitable-fieldset-field-header) {
225 float: left;
226 width: 49%;
227 max-width: 140px;
228 }
229
230 #charitable_field_cc_expiration .year {
231 margin-left: 2%;
232 }
233
234 .charitable-form-fields .charitable-fieldset {
235 margin: 0 0 1em;
236 padding: 1.5em 20px 0.5em;
237 border: 1px solid #ebebeb;
238 }
239
240 .charitable-form-fields .charitable-fieldset-field-wrapper {
241 margin: 0;
242 padding: 0;
243 border: none;
244 }
245
246 .charitable-form-fields .charitable-fieldset-field-wrapper .charitable-fieldset-field-header {
247 margin-bottom: 4px;
248 font-weight: bold;
249 }
250
251 .charitable-form-header {
252 margin: 0 0 1em;
253 font-size: 1.2em;
254 font-weight: bolder;
255 }
256
257 .charitable-repeatable-form-field-table {
258 margin-bottom: 1em;
259 }
260
261 .charitable-donation-form {
262 padding-top: 1em;
263 }
264
265 .charitable-donation-form .donation-amounts {
266 display: grid;
267 grid-template-columns: 1fr 1fr;
268 margin: 0 0 1em;
269 padding: 0;
270 list-style: none;
271 }
272
273 .charitable-donation-form .donation-amounts li:last-child {
274 /* grid-column: 1 / -1; */
275 }
276
277 .charitable-donation-form .donation-amounts li:last-child label {
278 /* width: 100%; */
279 }
280
281 .charitable-donation-form .donation-amounts:before,
282 .charitable-donation-form .donation-amounts:after {
283 /* content: " ";
284 display: table; */
285 }
286
287 .charitable-donation-form .donation-amounts:after {
288 clear: both;
289 }
290
291 .charitable-donation-form .donation-amounts .donation-amount {
292 position: relative;
293 float: auto;
294 width: auto;
295 margin: 0 2% 0.5em 0;
296 border: 1px solid #ddd;
297 background-color: transparent;
298 list-style: none;
299 }
300
301 .charitable-donation-form .donation-amounts .donation-amount .custom-donation-amount-wrapper,
302 .charitable-donation-form .donation-amounts .donation-amount>label {
303 display: block;
304 width: auto;
305 padding: 0.5em 1em;
306 margin: 0;
307 font-size: 1em;
308 cursor: pointer;
309 }
310
311 .charitable-donation-form .donation-amounts .donation-amount .amount {
312 font-weight: bolder;
313 }
314
315 .charitable-donation-form .donation-amounts .donation-amount:nth-child(2n+2) {
316 margin-right: 0;
317 }
318
319 .charitable-donation-form .donation-amounts .donation-amount input[type=radio]=radio] {
320 margin: 0 6px 0 0;
321 vertical-align: middle;
322 }
323
324 .charitable-donation-form .donation-amounts .donation-amount.selected {
325 background-color: black;
326 }
327
328 .charitable-donation-form .donation-amounts .donation-amount.selected label {
329 color: #fff;
330 }
331
332 .charitable-donation-form .donation-amounts .donation-amount.custom-donation-amount.selected label {
333 color: inherit;
334 }
335
336 .charitable-donation-form.charitable-template-standard .donation-amounts .donation-amount.custom-donation-amount.selected,
337 .charitable-donation-form.charitable-template-standard .donation-amounts.donation-suggested-amount li {
338 background-color: transparent !important;
339 }
340
341 .charitable-donation-form.charitable-template-standard .charitable-your-donation-amount {
342 font-size: 18px;
343 line-height: 20px;
344 }
345
346 @media screen and (max-width: 37.5em) {
347 .charitable-donation-form .donation-amounts .donation-amount {
348 float: none;
349 width: 100%;
350 margin-right: 0;
351 }
352 }
353
354 .charitable-donation-form .custom-donation-input {
355 max-width: calc(100% - 2rem);
356 min-height: 30px;
357 border-width: 0.078rem;
358 border-style: solid;
359 border-radius: 0.25rem;
360 padding: 0.8rem 1rem;
361 background-color: #fff;
362 color: #4d4d4d;
363 font-size: 1rem;
364 font-family: inherit;
365 font-weight: 500;
366 line-height: 1.2;
367 }
368
369 #charitable-donor-fields>.charitable-form-field,
370 #charitable-donor-fields .charitable-form-fields>.charitable-form-field {
371 clear: both;
372 padding: 0 20px;
373 }
374
375 .widget_charitable_donate_widget #charitable-donation-amount-form {
376 padding-top: 0;
377 }
378
379 .widget_charitable_donate_widget #charitable-donation-amount-form .donation-amounts .donation-amount {
380 width: 100%;
381 margin-right: 0;
382 }
383
384 .charitable-hidden {
385 display: none !important;
386 visibility: hidden;
387 }
388
389 .charitable-form-field-donor-fields .charitable-login-details {
390 padding-top: 1em;
391 }
392
393 #charitable-donor-fields {
394 padding: 1.5em 0 0.5em;
395 }
396
397 #charitable-donor-fields .charitable-form-header {
398 padding: 0 20px;
399 }
400
401 .charitable-modal #charitable-donor-fields .charitable-form-header {
402 padding-left: 0;
403 }
404
405 .charitable-donor-details {
406 padding: 0 20px 1em 0;
407 font-size: 1rem;
408 margin-bottom: 25px;
409 }
410
411 .charitable-donor-details .donor-address,
412 .charitable-donor-details .donor-contact-details {
413 margin-bottom: 0.5em;
414 }
415
416 .charitable-donor-details .charitable-change-user-details {
417 margin-bottom: 0;
418 padding-bottom: 0;
419 }
420
421 #charitable-user-fields,
422 #charitable-meta-fields {
423 padding: 0 20px;
424 }
425
426 .charitable-modal #charitable-user-fields,
427 .charitable-modal #charitable-meta-fields {
428 padding: 0;
429 }
430
431 #charitable-meta-fields {
432 padding-top: 1.5em;
433 margin-top: 1.5em;
434 border-top: 1px solid #ebebeb;
435 }
436
437 .charitable-terms-text {
438 border: 1px solid #ebebeb;
439 padding: 10px;
440 background-color: #f8f8f8;
441 margin-bottom: 1em;
442 max-height: 200px;
443 overflow: scroll;
444 display: none;
445 }
446
447 .charitable-terms-text.active {
448 display: block;
449 }
450
451 #login-prompt {
452 margin-bottom: 4px;
453 }
454
455 .charitable-login-form {
456 padding: 1em;
457 margin-bottom: 1em;
458 border: 1px solid #ebebeb;
459 }
460
461 .charitable-login-form label {
462 display: block;
463 margin-bottom: 4px;
464 }
465
466 .charitable-login-form>p,
467 .charitable-login-form .login-username,
468 .charitable-login-form .login-password,
469 .charitable-login-form .login-remember {
470 margin-bottom: 1em;
471 padding-bottom: 0;
472 }
473
474 .charitable-login-form .login-submit {
475 margin-bottom: 0;
476 padding-bottom: 0;
477 }
478
479 .js .charitable-donation-form .donation-amount input[type=radio]=radio] {
480 display: none;
481 }
482
483 /* Receipts */
484 .donation-summary {
485 margin-bottom: 1em;
486 padding-bottom: 0;
487 }
488
489 .donation-summary dd,
490 .donation-summary dt {
491 margin-top: 0;
492 }
493
494 .donation-summary dt {
495 float: left;
496 margin-right: .5em;
497 font-weight: bold;
498 }
499
500 .donation-summary dd {
501 display: block;
502 margin-bottom: 0;
503 }
504
505 .donation-summary dd::after {
506 content: " ";
507 display: block;
508 clear: left;
509 }
510
511 .charitable-table.donation-details {
512 width: 100%;
513 text-align: left;
514 }
515
516 .charitable-table.donation-details td {
517 padding: 15px 0;
518 }
519
520 .charitable-table.donation-details tfoot td {
521 border-top: 1px solid #e6e6e6;
522 padding-top: 15px;
523 font-weight: 500;
524 }
525
526 h3.charitable-header {
527 font-weight: 800;
528 border-bottom: 1px solid black;
529 padding-bottom: 10px;
530 margin-top: 50px;
531 }
532
533 .charitable-table tr,
534 .charitable-table td {
535 padding-right: 1.5em;
536 }
537
538 /* Campaigns grid */
539 .campaign-loop.campaign-list,
540 .campaign-loop.campaign-grid {
541 margin: 0 0 1em 0;
542 padding: 0;
543 list-style: none;
544 }
545
546 .campaign-loop.campaign-list li.campaign,
547 .campaign-loop.campaign-list .campaign.hentry,
548 .campaign-loop.campaign-grid li.campaign,
549 .campaign-loop.campaign-grid .campaign.hentry {
550 position: relative;
551 padding: 0;
552 margin: 0 0 1em 0;
553 list-style: none;
554 box-shadow: none;
555 box-sizing: border-box;
556 }
557
558 .campaign-loop.campaign-list li.campaign h3,
559 .campaign-loop.campaign-list .campaign.hentry h3,
560 .campaign-loop.campaign-grid li.campaign h3,
561 .campaign-loop.campaign-grid .campaign.hentry h3 {
562 margin-top: 0;
563 text-decoration: none;
564 }
565
566 .campaign-loop.campaign-list .wp-post-image,
567 .campaign-loop.campaign-grid .wp-post-image {
568 padding-bottom: 1em;
569 }
570
571 .campaign-loop.campaign-list .campaign-donation-stats,
572 .campaign-loop.campaign-grid .campaign-donation-stats {
573 margin-bottom: 1em;
574 }
575
576 .campaign-loop.campaign-list .campaign-donation-stats .amount,
577 .campaign-loop.campaign-list .campaign-donation-stats .goal-amount,
578 .campaign-loop.campaign-grid .campaign-donation-stats .amount,
579 .campaign-loop.campaign-grid .campaign-donation-stats .goal-amount {
580 font-weight: bolder;
581 }
582
583 .campaign-loop.campaign-list .campaign-donation .button,
584 .campaign-loop.campaign-grid .campaign-donation .button {
585 display: inline-block;
586 }
587
588 .campaign-progress-bar {
589 margin-bottom: 0.5em;
590 overflow: hidden;
591 }
592
593 .campaign-loop.campaign-list li.campaign,
594 .campaign-loop.campaign-list .campaign.hentry {
595 padding: 0 0 1em 0;
596 margin: 0 0 1em 0;
597 border-bottom: 1px solid #e6e6e6;
598 }
599
600 .campaign-loop.campaign-grid {
601 margin: 0 0 1em 0;
602 padding: 0;
603 *zoom: 1;
604 }
605
606 .campaign-loop.campaign-grid:before,
607 .campaign-loop.campaign-grid:after {
608 content: " ";
609 display: table;
610 }
611
612 .campaign-loop.campaign-grid:after {
613 clear: both;
614 }
615
616 .campaign-loop.campaign-grid .wp-post-image {
617 max-width: 100%;
618 width: 100%;
619 }
620
621 .campaign-loop.campaign-grid li.campaign,
622 .campaign-loop.campaign-grid .campaign.hentry {
623 list-style: none;
624 float: left;
625 margin: 0 2% 1em 0;
626 padding: 1em;
627 border: 1px solid #e6e6e6;
628 }
629
630 .campaign-loop.campaign-grid .campaign-donation {
631 text-align: center;
632 }
633
634 .campaign-grid.masonry {
635 -moz-column-gap: 1em;
636 -webkit-column-gap: 1em;
637 column-gap: 1em;
638 }
639
640 .campaign-grid.masonry li.campaign,
641 .campaign-grid.masonry .campaign.hentry {
642 display: inline-block;
643 margin: 0 0 1em;
644 width: 100%;
645 float: none;
646 }
647
648 .campaign-grid-2 li.campaign,
649 .campaign-grid-2 .campaign.hentry {
650 width: 49%;
651 }
652
653 .campaign-grid-2 li.campaign:nth-child(2n+2),
654 .campaign-grid-2 .campaign.hentry:nth-child(2n+2) {
655 margin-right: 0;
656 }
657
658 .campaign-grid-2.masonry {
659 -moz-column-count: 2;
660 -webkit-column-count: 2;
661 column-count: 2;
662 }
663
664 .campaign-grid-3 li.campaign,
665 .campaign-grid-3 .campaign.hentry {
666 width: 32%;
667 }
668
669 .campaign-grid-3 li.campaign:nth-child(3n+3),
670 .campaign-grid-3 .campaign.hentry:nth-child(3n+3) {
671 margin-right: 0;
672 }
673
674 .campaign-grid-3.masonry {
675 -moz-column-count: 3;
676 -webkit-column-count: 3;
677 column-count: 3;
678 }
679
680 .campaign-grid-4 li.campaign,
681 .campaign-grid-4 .campaign.hentry {
682 width: 23.5%;
683 }
684
685 .campaign-grid-4 li.campaign:nth-child(4n+4),
686 .campaign-grid-4 .campaign.hentry:nth-child(4n+4) {
687 margin-right: 0;
688 }
689
690 .campaign-grid-4.masonry {
691 -moz-column-count: 4;
692 -webkit-column-count: 4;
693 column-count: 4;
694 }
695
696 /* Donors */
697 .donors-list {
698 list-style: none;
699 padding-left: 0;
700 margin-left: 0;
701 }
702
703 .donors-list .donor {
704 *zoom: 1;
705 list-style: none;
706 padding: 1em 0;
707 }
708
709 .donors-list .donor:before,
710 .donors-list .donor:after {
711 content: " ";
712 display: table;
713 }
714
715 .donors-list .donor:after {
716 clear: both;
717 }
718
719 .donors-list .donor .avatar {
720 margin: 0;
721 }
722
723 .donors-list .donor .donor-name {
724 font-weight: bold;
725 }
726
727 .donors-list .donor .donor-name,
728 .donors-list .donor .donor-location,
729 .donors-list .donor .donor-donation-amount {
730 margin: 0.5em 0 0 0;
731 }
732
733 .donors-list .donor>*:first-child {
734 margin-top: 0;
735 }
736
737 .donors-list.donors-list-horizontal .donor {
738 display: inline-block;
739 padding: 0 20px 1em 0;
740 width: 100px;
741 vertical-align: top;
742 }
743
744 .donors-list.donors-list-vertical .donor {
745 border-bottom: 1px solid #e6e6e6;
746 }
747
748 /* Widgets */
749 .widget.widget_charitable_campaigns_widget .campaigns {
750 margin: 0 0 1em 0;
751 padding: 0;
752 list-style: none;
753 }
754
755 .widget.widget_charitable_campaigns_widget .campaign {
756 list-style: none;
757 padding: 1em 0;
758 border-bottom-color: #e6e6e6;
759 border-bottom-style: solid;
760 border-bottom-width: 1px;
761 }
762
763 .widget.widget_charitable_campaigns_widget .campaign .wp-post-image {
764 padding: 0;
765 margin: 0 0 0.5em 0;
766 }
767
768 .widget.widget_charitable_campaigns_widget .campaign .campaign-title {
769 padding: 0;
770 margin: 0 0 0.5em 0;
771 font-size: inherit;
772 font-weight: bolder;
773 }
774
775 .widget.widget_charitable_campaigns_widget .campaign .campaign-time-left {
776 font-weight: normal;
777 }
778
779 /* Notices */
780 .charitable-notice {
781 padding: 1em;
782 margin-bottom: 1em;
783 border: 1px solid;
784 }
785
786 .charitable-notice > ul {
787 padding: 0;
788 margin: 0;
789 list-style: none;
790 &.charitable-notice-errors {
791 font-size: 1rem;
792 line-height: 1rem;
793 li {
794 margin-bottom: 5px;
795 &:last-child {
796 margin-bottom: 0;
797 }
798 &:before {
799 // svg warning icon.
800 content: "\f534";
801 font-family: "dashicons";
802 height: 15px;
803 color: orange;
804 position: relative;
805 top: 6px;
806 font-size: 1.3rem;
807 margin-right: 10px;
808 }
809 }
810 }
811 }
812
813 .charitable-notice>ul li {
814 padding: 0;
815 border: none;
816 }
817
818 .charitable-notice a {
819 text-decoration: underline;
820 }
821
822 /* modal donation */
823
824 .charitable-modal.charitable-modal-donation {
825 width: 80%;
826 max-width: 800px;
827 padding: 1em;
828 background-color: #fff;
829 overflow-y: auto;
830 }
831
832 .charitable-modal.charitable-modal-donation .charitable-submit-field {
833 margin-bottom: 0;
834 }
835
836 /*# sourceMappingURL=modal.css.map */
837
838
839 /* donation form templates */
840
841 .charitable-donation-form.charitable-template-standard {
842 .charitable-fieldset {
843 padding: 0;
844 border: none;
845
846 .charitable-form-header {
847 font-size: 21px;
848 line-height: 21px;
849 font-weight: 800;
850 margin-bottom: 10px;
851 }
852 }
853
854 .charitable-fieldset {
855 margin: 0 0 1em;
856 padding: 1em 20px .5em !important;
857 border: 1px solid #ebebeb;
858 }
859
860 .charitable-fieldset> :last-child,
861 .charitable-fieldset-field-wrapper> :last-child {
862 margin-bottom: 0;
863 }
864
865 .donation-amounts {
866 &.has-suggested-amounts {
867 margin-bottom: 0;
868 grid-template-columns: 1fr 1fr;
869
870 &.donation-amounts-count-3,
871 &.donation-amounts-count-5 {
872 li:last-child {
873 grid-column: 1 / -1;
874 }
875 }
876
877 }
878
879 .donation-amount {
880 margin: 5px;
881 }
882
883 li {
884 text-align: center;
885
886 span.description {
887 font-size: 16px !important;
888 line-height: 21px !important;
889 font-weight: 500;
890 display: block;
891 margin: 5px auto;
892 }
893 }
894
895 &.donation-suggested-amount {
896 display: flex;
897 flex-direction: row;
898 margin-top: 5px !important;
899 margin-bottom: 10px;
900 padding: 5px;
901
902 span.custom-donation-amount-wrapper {
903 display: flex;
904 flex-direction: column;
905 width: 100%;
906 }
907
908 li {
909 display: flex;
910 text-align: left;
911 align-items: center;
912 justify-content: space-between;
913 background: white;
914 border: 1px solid #ddd;
915 border-radius: 0;
916 padding: 4px 0;
917 margin: 5px;
918
919 label {
920 width: 100%;
921 margin-bottom: 10px;
922 display: block;
923 }
924
925 input[type="text"]="text""] {
926 border-width: .078rem;
927 border-style: solid;
928 border-radius: .25rem;
929 padding: 0.8rem 10px;
930 max-width: calc(100% - 4rem);
931 background-color: #fff;
932 color: #4d4d4d;
933 font-size: 1rem;
934 font-family: inherit;
935 font-weight: 500;
936 line-height: 1.2;
937 }
938
939 width: 100%;
940 margin: 0;
941 }
942 }
943
944
945
946 }
947
948 #charitable-donor-fields {
949 .charitable-form-header {
950 padding: 0;
951 }
952
953 padding-top: 0;
954
955 .charitable-form-fields {
956 margin-top: 15px;
957 }
958
959 #charitable-user-fields {
960 padding-left: 0;
961 padding-right: 0;
962
963 input,
964 select {
965 font-size: 16px;
966 line-height: 16px;
967 }
968
969 input {
970 border-width: .078rem;
971 border-style: solid;
972 border-radius: .25rem;
973 padding: 0.8rem 1rem;
974 background-color: #fff;
975 color: #4d4d4d;
976 font-size: 1rem;
977 font-family: inherit;
978 font-weight: 500;
979 line-height: 1.2;
980 }
981
982 select {
983 border-width: .078rem;
984 border-style: solid;
985 border-radius: .25rem;
986 padding: 0.8rem 1rem;
987 background-color: #fff;
988 color: #4d4d4d;
989 font-size: 1rem;
990 font-family: inherit;
991 font-weight: 500;
992 line-height: 1.2;
993 }
994
995 .charitable-form-field {
996 display: flex;
997 flex-direction: column;
998
999 label {
1000 font-size: 16px;
1001 line-height: 16px;
1002 font-weight: 500;
1003 margin-bottom: 10px;
1004 }
1005
1006 input {
1007 width: auto;
1008 }
1009 }
1010 }
1011 }
1012
1013 #charitable-gateway-fields {
1014 #charitable-gateway-selector-header {
1015 font-size: 16px;
1016 line-height: 16px;
1017 font-weight: 500;
1018 margin-bottom: 10px;
1019 }
1020
1021 .charitable-form-field {
1022 margin-bottom: 5px;
1023 }
1024
1025 #charitable-gateway-selector {
1026 margin-top: 5px;
1027 margin-bottom: 0px;
1028
1029 li {
1030 margin-right: 15px;
1031
1032 label {
1033 font-size: 16px;
1034 line-height: 16px;
1035 font-weight: 500;
1036 }
1037
1038 }
1039 }
1040
1041 #charitable-gateway-selector-header {
1042 display: none;
1043 }
1044
1045 .charitable-gateway-fields.charitable-form-fields {
1046 .charitable-form-field {
1047 display: flex;
1048 flex-direction: column;
1049 }
1050
1051 label {
1052 font-size: 16px;
1053 line-height: 16px;
1054 font-weight: 500;
1055 margin-top: 15px;
1056 margin-bottom: 10px;
1057 display: block;
1058 }
1059
1060 input {
1061 width: auto;
1062 border-width: 0.078rem;
1063 border-style: solid;
1064 border-radius: 0.25rem;
1065 padding: 12.8px 16px;
1066 min-height: 25px;
1067 background-color: #fff;
1068 color: #4d4d4d;
1069 font-size: 1rem;
1070 font-family: inherit;
1071 font-weight: 500;
1072 line-height: 1.2;
1073 }
1074 }
1075 #charitable_stripe_card_field {
1076 width: auto;
1077 border-width: .078rem;
1078 border-style: solid;
1079 border-radius: .25rem;
1080 padding: 0.8rem 1rem;
1081 min-height: 30px;
1082 background-color: #fff;
1083 color: #4d4d4d;
1084 font-size: 1rem;
1085 font-family: inherit;
1086 font-weight: 500;
1087 line-height: 1.2;
1088 // padding-top: 22px !important;
1089 // padding-bottom: 3px;
1090 display: grid;
1091 align-items: center;
1092 }
1093 }
1094
1095 }
1096
1097 .charitable-donation-form.charitable-template-minimal {
1098 .charitable-fieldset {
1099 padding: 0;
1100 border: none;
1101
1102 .charitable-form-header {
1103 font-size: 21px;
1104 line-height: 21px;
1105 font-weight: 800;
1106 margin-bottom: 10px;
1107 }
1108 }
1109
1110 .charitable-fieldset> :last-child,
1111 .charitable-fieldset-field-wrapper> :last-child {
1112 margin-bottom: 0;
1113 }
1114
1115 .donation-amounts {
1116 &.has-suggested-amounts {
1117 margin-bottom: 0;
1118
1119 &.donation-amounts-count-1 {
1120 grid-template-columns: 1fr;
1121 }
1122
1123 &.donation-amounts-count-2 {
1124 grid-template-columns: 1fr 1fr;
1125
1126 .donation-amount {
1127 margin: 5px;
1128
1129 &:first-child {
1130 margin-left: 0;
1131 }
1132
1133 &:last-child {
1134 margin-right: 0;
1135 }
1136 }
1137 }
1138
1139 &.donation-amounts-count-3 {
1140 grid-template-columns: 1fr 1fr 1fr;
1141
1142 .donation-amount {
1143 margin: 5px;
1144
1145 &:first-child {
1146 margin-left: 0;
1147 }
1148
1149 &:last-child {
1150 margin-right: 0;
1151 }
1152 }
1153 }
1154
1155 &.donation-amounts-count-4 {
1156 grid-template-columns: 1fr 1fr 1fr 1fr;
1157
1158 .donation-amount {
1159 margin: 5px;
1160
1161 &:first-child {
1162 margin-left: 0;
1163 }
1164
1165 &:last-child {
1166 margin-right: 0;
1167 }
1168 }
1169 }
1170
1171 &.donation-amounts-count-5 {
1172 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
1173
1174 .donation-amount {
1175 margin: 5px;
1176
1177 &:first-child {
1178 margin-left: 0;
1179 }
1180
1181 &:last-child {
1182 margin-right: 0;
1183 }
1184 }
1185 }
1186
1187 &.donation-amounts-count-6 {
1188 .donation-amount {
1189 margin: 5px;
1190 }
1191
1192 grid-template-columns: 1fr 1fr 1fr;
1193 }
1194
1195 &.donation-amounts-count-7,
1196 &.donation-amounts-count-8 {
1197 .donation-amount {
1198 margin: 5px;
1199 }
1200
1201 grid-template-columns: 1fr 1fr 1fr 1fr;
1202 }
1203 }
1204
1205 .donation-amount {
1206 margin: 5px;
1207
1208 &:first-child {
1209 margin-left: 0;
1210 }
1211
1212 &:last-child {
1213 margin-right: 0;
1214 }
1215 }
1216
1217 li {
1218 text-align: center;
1219
1220 span.description {
1221 font-size: 16px !important;
1222 line-height: 21px !important;
1223 font-weight: 500;
1224 display: block;
1225 margin: 5px auto;
1226 }
1227 }
1228
1229 &.donation-suggested-amount {
1230 display: flex;
1231 flex-direction: row;
1232 margin-top: 5px !important;
1233
1234 span.custom-donation-amount-wrapper {
1235 display: block;
1236 width: 100%;
1237 }
1238
1239 li {
1240 display: flex;
1241 align-items: center;
1242 justify-content: space-between;
1243 background: white;
1244 border: solid 1px #8c8c8c;
1245 border-radius: 4px;
1246 padding: 4px 0;
1247
1248 label {
1249 width: 100%;
1250 display: none;
1251 }
1252
1253 input[type="text"]="text""] {
1254 height: fit-content;
1255 background-color: #fff;
1256 font-size: var(--givewp-font-size-headline-md);
1257 font-weight: normal;
1258 line-height: 1.5;
1259 color: #bababa;
1260 border: none;
1261 outline: none;
1262 box-shadow: none;
1263 width: 100%;
1264 text-align: center;
1265 padding: 0;
1266 min-height: 45px;
1267 }
1268 width: 100%;
1269 margin: 0;
1270 }
1271 }
1272 }
1273
1274 .charitable-custom-donation-field-alone {
1275 display: flex;
1276 align-items: center;
1277 justify-content: space-between;
1278 background: white;
1279 border: solid 1px #8c8c8c;
1280 border-radius: 4px;
1281 padding: 4px 0;
1282
1283 label {
1284 width: 100%;
1285 display: none;
1286 }
1287
1288 input[type="text"]="text""] {
1289 height: fit-content;
1290 background-color: #fff;
1291 font-size: var(--givewp-font-size-headline-md);
1292 font-weight: normal;
1293 line-height: 1.5;
1294 color: #bababa;
1295 border: none;
1296 outline: none;
1297 box-shadow: none;
1298 width: 100%;
1299 text-align: center;
1300 padding: 0;
1301 }
1302
1303 width: 100%;
1304 margin: 0;
1305 }
1306
1307 #charitable-donor-fields {
1308 .charitable-form-header {
1309 padding: 0;
1310 }
1311
1312 padding-top: 0;
1313
1314 .charitable-form-fields {
1315 margin-top: 15px;
1316 }
1317
1318 #charitable-user-fields {
1319 padding-left: 0;
1320 padding-right: 0;
1321
1322 input,
1323 select {
1324 font-size: 16px;
1325 line-height: 16px;
1326 }
1327
1328 input {
1329 border-width: .078rem;
1330 border-style: solid;
1331 border-radius: .25rem;
1332 padding: 0.8rem 1rem;
1333 background-color: #fff;
1334 color: #4d4d4d;
1335 font-size: inherit;
1336 font-family: inherit;
1337 font-weight: 500;
1338 line-height: 1.2;
1339 min-height: 18px;
1340 }
1341
1342 select {
1343 border-width: .078rem;
1344 border-style: solid;
1345 border-radius: .25rem;
1346 padding: 0.5rem 1rem;
1347 min-height: 40px;
1348 background-color: #fff;
1349 color: #4d4d4d;
1350 font-size: inherit;
1351 font-family: inherit;
1352 font-weight: 500;
1353 line-height: 1.2;
1354 }
1355
1356 .charitable-form-field {
1357 display: flex;
1358 flex-direction: column;
1359
1360 label {
1361 font-size: 16px;
1362 line-height: 16px;
1363 font-weight: 500;
1364 margin-bottom: 10px;
1365 }
1366
1367 input {
1368 width: auto;
1369 }
1370 }
1371
1372 .charitable-form-group {
1373 &.charitable-form-group-number-1 {
1374 display: flex;
1375 flex-direction: row;
1376 justify-content: stretch;
1377 align-content: center;
1378 width: 100%;
1379 gap: 15px;
1380 flex-wrap: wrap;
1381
1382 #charitable_field_title {}
1383
1384 div#charitable_field_first_name,
1385 div#charitable_field_last_name,
1386 div#charitable_field_email {
1387 flex: 1;
1388 }
1389
1390 input {}
1391 }
1392 }
1393 }
1394 }
1395
1396 #charitable-gateway-fields {
1397 #charitable-gateway-selector-header {
1398 font-size: 16px;
1399 line-height: 16px;
1400 font-weight: 500;
1401 margin-bottom: 10px;
1402 }
1403
1404 .charitable-form-field {
1405 margin-bottom: 5px;
1406 }
1407
1408 #charitable-gateway-selector {
1409 margin-top: 5px;
1410 margin-bottom: 0px;
1411
1412 li {
1413 margin-right: 5px;
1414
1415 input[type="radio"]="radio""] {
1416 display: none;
1417 }
1418
1419 label {
1420 display: inline-block;
1421 position: relative;
1422 font-size: 16px;
1423 line-height: 16px;
1424 font-weight: 500;
1425 padding: 10px 20px;
1426 margin-right: -1px;
1427 /* Overlap bordering */
1428 border: 1px solid #ccc;
1429 cursor: pointer;
1430 background-color: #f1f1f1;
1431 opacity: .55;
1432 }
1433
1434 input[type="radio"]="radio""]:checked+label {
1435 background-color: #fff;
1436 color: #000;
1437 font-weight: bold;
1438 opacity: 1;
1439 padding-left: 35px;
1440 }
1441
1442 /* Add checkmark icon when checked */
1443 input[type="radio"]="radio""]:checked+label::before {
1444 content: "\f15e";
1445 font-size: 22px;
1446 font-family: 'dashicons';
1447 font-weight: 900;
1448 position: absolute;
1449 left: 10px;
1450 top: 50%;
1451 transform: translateY(-50%);
1452 color: green;
1453 }
1454
1455 // label {
1456 // font-size: 16px;
1457 // line-height: 16px;
1458 // font-weight: 500;
1459
1460 // }
1461 }
1462 }
1463
1464 #charitable-gateway-selector-header {
1465 display: none;
1466 }
1467
1468 .charitable-gateway-fields.charitable-form-fields {
1469 padding: 10px 10px;
1470
1471 .charitable-form-field {
1472 display: flex;
1473 flex-direction: column;
1474 }
1475
1476 label {
1477 font-size: 16px;
1478 line-height: 16px;
1479 font-weight: 500;
1480 margin-top: 15px;
1481 margin-bottom: 10px;
1482 display: block;
1483 }
1484
1485 input {
1486 width: auto;
1487 border-width: .078rem;
1488 border-style: solid;
1489 border-radius: .25rem;
1490 padding: 0.8rem 1rem;
1491 background-color: #fff;
1492 color: #4d4d4d;
1493 font-size: inherit;
1494 font-family: inherit;
1495 font-weight: 500;
1496 line-height: 1.2;
1497 }
1498 }
1499 }
1500
1501 .donate-button {
1502 width: 100%;
1503 }
1504
1505 .charitable-notice {
1506 padding: 5px 10px;
1507 font-size: 16px;
1508 line-height: 16px;
1509 font-weight: 600;
1510
1511 li {
1512 margin: 10px 0;
1513 }
1514 }
1515 }
1516
1517 // mobile styles for under 700px wide //
1518 @media screen and (max-width: 700px) {
1519 .charitable-donation-form.charitable-template-minimal {
1520 #charitable-donor-fields #charitable-user-fields {
1521 .charitable-form-group.charitable-form-group-number-1 {
1522 flex-direction: column;
1523 }
1524 }
1525 .donation-amounts.has-suggested-amounts.donation-amounts-count-1,
1526 .donation-amounts.has-suggested-amounts.donation-amounts-count-2,
1527 .donation-amounts.has-suggested-amounts.donation-amounts-count-3,
1528 .donation-amounts.has-suggested-amounts.donation-amounts-count-5,
1529 .donation-amounts.has-suggested-amounts.donation-amounts-count-7,
1530 .donation-amounts.has-suggested-amounts.donation-amounts-count-8,
1531 .donation-amounts.has-suggested-amounts.donation-amounts-count-9,
1532 .donation-amounts.has-suggested-amounts.donation-amounts-count-10 {
1533 grid-template-columns: 1fr;
1534 }
1535 .donation-amounts.has-suggested-amounts.donation-amounts-count-4,
1536 .donation-amounts.has-suggested-amounts.donation-amounts-count-6{
1537 grid-template-columns: 1fr 1fr;
1538 }
1539 }
1540 }
1541
1542
1543 #charitable-gateway-fields-stripe {
1544 &.charitable-cc-fields-multiple {
1545 display: grid;
1546 grid-template-columns: 75% 25%;
1547 grid-template-rows: auto auto; /* This creates the equivalent of a 2x2 grid */
1548 gap: 10px; /* Optional: Sets the gap between grid items */
1549
1550 > div.charitable_stripe_multiple_field:nth-child(even), /* Target every odd div (1st, 3rd, 5th, etc.) */
1551 > div:first-child {
1552
1553 input {
1554 font-family: sans-serif !important;
1555 font-size: 16px !important;
1556 padding: 10px 10px !important;
1557 min-height: 15px !important;
1558 font-weight: 500 !important;
1559 }
1560 }
1561
1562 > div.charitable_stripe_multiple_field:nth-child(odd) { /* Target every even div (2nd, 4th, 6th, etc.) */
1563
1564 }
1565
1566 > div {
1567 > div,
1568 input {
1569 width: auto !important;
1570 border-width: .078rem !important;
1571 border-style: solid !important;
1572 border-radius: .25rem !important;
1573 padding: 10px 10px !important;
1574 background-color: #fff !important;
1575 color: #4d4d4d !important;
1576 font-size: 1rem !important;
1577 font-family: inherit !important;
1578 font-weight: 500 !important;
1579 line-height: 1.2 !important;
1580 min-height: 15px;
1581 font-size: 16px !important;
1582 }
1583 }
1584 }
1585 }
1586
1587
1588 #google-pay-button {
1589 min-height: 40px; /* Minimum height for the button */
1590 margin: 10px 0;
1591 button {
1592 width: 100%;
1593 }
1594 }
1595
1596 .charitable-privacy-policy-text {
1597 font-size: 16px;
1598 line-height: 21px;
1599 font-weight: 400;
1600 }
1601
1602 #charitable-square-wallet-buttons {
1603 display: flex;
1604 flex-direction: row;
1605 gap: 0px;
1606 margin: 0;
1607 }
1608
1609 /* When empty, hide the container */
1610 #charitable-square-wallet-buttons:empty {
1611 display: none;
1612 }
1613
1614 /* All direct child divs */
1615 #charitable-square-wallet-buttons > div {
1616 flex: 1; /* This makes divs share space equally */
1617 }
1618
1619 /* When exactly one div child */
1620 #charitable-square-wallet-buttons > div:only-child {
1621 width: 100%;
1622 }
1623
1624 /* When exactly two div children */
1625 #charitable-square-wallet-buttons > div:first-child:nth-last-child(2),
1626 #charitable-square-wallet-buttons > div:first-child:nth-last-child(2) ~ div {
1627 width: 50%;
1628 }
1629
1630
1631 #google-pay-button,
1632 #apple-pay-button {
1633 min-height: 40px;
1634 margin: 10px 0;
1635 display: flex;
1636 align-items: center;
1637 justify-content: center;
1638 color: #666;
1639 font-size: 14px;
1640 width: 100%;
1641 /* border: 1px solid #ddd; */
1642 }
1643
1644 #google-pay-button:before,
1645 #apple-pay-button:before {
1646 content: "Google Pay";
1647 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
1648 }
1649
1650 #apple-pay-button:before {
1651 content: "Apple Pay";
1652 }
1653
1654 .wallet-enabled #google-pay-button:before,
1655 .wallet-enabled #apple-pay-button:before {
1656 display: none;
1657 }
1658
1659 #charitable-square-wallet-separator {
1660 text-align: center;
1661 width: 100%;
1662 display: block;
1663 margin: 0;
1664 font-size: 14px;
1665 color: #666;
1666 position: relative;
1667 }
1668
1669 #charitable-square-wallet-separator:before,
1670 #charitable-square-wallet-separator:after {
1671 content: "";
1672 position: absolute;
1673 top: 50%;
1674 width: 33%;
1675 height: 1px;
1676 background: #ddd;
1677 }
1678
1679 #charitable-square-wallet-separator:before {
1680 left: 0;
1681 }
1682
1683 #charitable-square-wallet-separator:after {
1684 right: 0;
1685 }
1686
1687 #charitable-square-card-payment-fields {
1688 border: 0;
1689 margin: 0;
1690 padding: 0;
1691 &.no-wallets {
1692 padding: 0;
1693 border: none;
1694 }
1695 }