icons
4 years ago
authorizenet.scss
4 years ago
currencyswitcher.scss
4 years ago
feerecovery.scss
4 years ago
ffm.scss
4 years ago
form.scss
3 years ago
legacy-consumer.scss
4 years ago
mixins.scss
4 years ago
newsletter.scss
4 years ago
paypal-commerce.scss
4 years ago
receipt.scss
3 years ago
recurring.scss
4 years ago
square.scss
4 years ago
tributes.scss
3 years ago
util.scss
4 years ago
legacy-consumer.scss
133 lines
| 1 | /* |
| 2 | * Fields API / Form Consumer Styles |
| 3 | */ |
| 4 | @import './src/Form/LegacyConsumer/resources/css/common'; |
| 5 | |
| 6 | .give-section.choose-amount > .form-row { |
| 7 | padding: 20px 30px 0; |
| 8 | } |
| 9 | |
| 10 | .give-section.payment > .form-row { |
| 11 | padding: 0 20px; |
| 12 | margin-top: 15px; |
| 13 | display: block; |
| 14 | } |
| 15 | |
| 16 | #give-payment-mode-wrap > .form-row:not(:first-of-type) { |
| 17 | margin-top: 20px; |
| 18 | } |
| 19 | |
| 20 | div[data-field-type='checkbox']='checkbox'] label { |
| 21 | padding: 0 0 0 40px; |
| 22 | } |
| 23 | |
| 24 | .give-label { |
| 25 | font-size: 14px; |
| 26 | cursor: pointer; |
| 27 | color: #828382 !important; |
| 28 | } |
| 29 | |
| 30 | div[data-field-type='checkbox']='checkbox'] .give-label, |
| 31 | div[data-field-type='radio']='radio'] .give-label { |
| 32 | margin: 0 0 5px; |
| 33 | position: relative; |
| 34 | line-height: 1.7; |
| 35 | } |
| 36 | |
| 37 | /* Align checkbox with its label */ |
| 38 | [data-field-type='html']='html'] + [data-field-type='checkbox']='checkbox'] { |
| 39 | margin-top: -15px !important; |
| 40 | } |
| 41 | |
| 42 | /* Align next element after checkboxes end */ |
| 43 | [data-field-type='checkbox']='checkbox'] + *:not([data-field-type='checkbox']) { |
| 44 | margin-top: 15px !important; |
| 45 | } |
| 46 | |
| 47 | /* Fields API: Styles for custom checkbox fields. */ |
| 48 | [data-field-type='checkbox']='checkbox'] { |
| 49 | margin-bottom: 0 !important; |
| 50 | padding-bottom: 0 !important; |
| 51 | label { |
| 52 | padding: 0 0 0 32px; |
| 53 | margin-left: 0; |
| 54 | display: inline-block; |
| 55 | position: relative; |
| 56 | font-size: 14px; |
| 57 | cursor: pointer; |
| 58 | color: #828382 !important; |
| 59 | } |
| 60 | label::before { |
| 61 | content: ' '; |
| 62 | position: absolute; |
| 63 | top: calc(50% - 12px); |
| 64 | left: 0; |
| 65 | width: 20px; |
| 66 | height: 20px; |
| 67 | border: 1px solid #b4b9be; |
| 68 | background-color: #fff; |
| 69 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); |
| 70 | } |
| 71 | label::after { |
| 72 | content: ' '; |
| 73 | position: absolute; |
| 74 | top: calc(50% - 12px); |
| 75 | left: 0; |
| 76 | width: 20px; |
| 77 | height: 20px; |
| 78 | background-repeat: no-repeat; |
| 79 | background-position: center; |
| 80 | // clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); |
| 81 | } |
| 82 | label.active::after { |
| 83 | content: ' '; |
| 84 | background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73047 10.7812C6.00391 11.0547 6.46875 11.0547 6.74219 10.7812L14.7812 2.74219C15.0547 2.46875 15.0547 2.00391 14.7812 1.73047L13.7969 0.746094C13.5234 0.472656 13.0859 0.472656 12.8125 0.746094L6.25 7.30859L3.16016 4.24609C2.88672 3.97266 2.44922 3.97266 2.17578 4.24609L1.19141 5.23047C0.917969 5.50391 0.917969 5.96875 1.19141 6.24219L5.73047 10.7812Z' fill='%234fa651'/%3E%3C/svg%3E%0A") !important; |
| 85 | } |
| 86 | } |
| 87 | |
| 88 | /* Fields API: Styles for custom radio fields. */ |
| 89 | [data-field-type='radio']='radio'] { |
| 90 | label { |
| 91 | padding: 0 0 0 32px; |
| 92 | margin-left: 0; |
| 93 | display: inline-block; |
| 94 | position: relative; |
| 95 | font-size: 14px; |
| 96 | cursor: pointer; |
| 97 | color: #828382 !important; |
| 98 | |
| 99 | &::before { |
| 100 | content: ' '; |
| 101 | position: absolute; |
| 102 | top: calc(50% - 12px); |
| 103 | left: 0; |
| 104 | width: 20px; |
| 105 | height: 20px; |
| 106 | border-radius: 50%; |
| 107 | border: 1px solid #b4b9be; |
| 108 | background-color: #fff; |
| 109 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); |
| 110 | } |
| 111 | |
| 112 | &::after { |
| 113 | transform: scale3d(0, 0, 0); |
| 114 | transition: transform 0.2s ease; |
| 115 | border-radius: 12px; |
| 116 | width: 10px; |
| 117 | height: 10px; |
| 118 | position: absolute; |
| 119 | top: calc(50% - 6px); |
| 120 | left: 6px; |
| 121 | content: ' '; |
| 122 | display: block; |
| 123 | background: #333; |
| 124 | } |
| 125 | |
| 126 | &.active { |
| 127 | &::after { |
| 128 | transform: scale3d(1, 1, 1); |
| 129 | } |
| 130 | } |
| 131 | } |
| 132 | } |
| 133 |