icons
6 years ago
currencyswitcher.scss
5 years ago
feerecovery.scss
5 years ago
ffm.scss
5 years ago
form.scss
5 years ago
mixins.scss
6 years ago
newsletter.scss
5 years ago
paypal-commerce.scss
5 years ago
receipt.scss
5 years ago
recurring.scss
5 years ago
square.scss
6 years ago
tributes.scss
5 years ago
util.scss
6 years ago
recurring.scss
150 lines
| 1 | /* stylelint-disable */ |
| 2 | .give-recurring-multi-level-message { |
| 3 | display: none; |
| 4 | } |
| 5 | |
| 6 | .give-recurring-donors-choice { |
| 7 | background: #fff; |
| 8 | border: 1px solid rgba(255, 255, 255, 0); |
| 9 | box-sizing: border-box; |
| 10 | box-shadow: 0 0 16px rgba(0, 0, 0, 0.121203); |
| 11 | border-radius: 5px; |
| 12 | margin: 20px 30px 0 30px !important; |
| 13 | padding: 0; |
| 14 | position: relative; |
| 15 | transition: border 0.2s ease; |
| 16 | |
| 17 | @media screen and (max-width: $break-phone) { |
| 18 | margin: 20px 20px 0 20px !important; |
| 19 | } |
| 20 | |
| 21 | label { |
| 22 | font-weight: 400 !important; |
| 23 | font-size: 16px; |
| 24 | line-height: 1.4; |
| 25 | padding: 14px 22px 14px 22px !important; |
| 26 | width: calc(100% - 62px); |
| 27 | margin-left: 40px !important; |
| 28 | color: #333; |
| 29 | display: inline-block; |
| 30 | cursor: pointer; |
| 31 | |
| 32 | @media screen and (max-width: $break-phone) { |
| 33 | font-size: 14px !important; |
| 34 | padding: 14px 20px 14px 22px !important; |
| 35 | } |
| 36 | } |
| 37 | |
| 38 | label::before { |
| 39 | content: ' '; |
| 40 | position: absolute; |
| 41 | top: calc(50% - 12px); |
| 42 | left: 22px !important; |
| 43 | width: 20px; |
| 44 | height: 20px; |
| 45 | border: 1px solid #b4b9be; |
| 46 | background-color: #fff; |
| 47 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); |
| 48 | } |
| 49 | |
| 50 | &:hover, |
| 51 | &:focus-within { |
| 52 | border: 1px solid #3398db; |
| 53 | |
| 54 | label::before { |
| 55 | background-color: rgba(245, 245, 245, 0.815); |
| 56 | } |
| 57 | } |
| 58 | |
| 59 | &.active { |
| 60 | border: 1px solid #3398db; |
| 61 | } |
| 62 | |
| 63 | input[type='checkbox']='checkbox']:checked + label::after { |
| 64 | clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); |
| 65 | -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); |
| 66 | } |
| 67 | |
| 68 | input[type='checkbox']='checkbox'] + label::after { |
| 69 | transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease; |
| 70 | border-radius: 11px; |
| 71 | width: 20px; |
| 72 | height: 20px; |
| 73 | position: absolute; |
| 74 | top: calc(50% - 12px); |
| 75 | left: 22px; |
| 76 | content: ' '; |
| 77 | display: block; |
| 78 | 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='%231E8CBE'/%3E%3C/svg%3E%0A"); |
| 79 | background-repeat: no-repeat; |
| 80 | background-position: center; |
| 81 | clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); |
| 82 | -webkit-clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); |
| 83 | } |
| 84 | |
| 85 | .give-recurring-donors-choice-period { |
| 86 | font-family: Montserrat, sans-serif; |
| 87 | font-weight: 400; |
| 88 | font-size: 16px; |
| 89 | line-height: 1; |
| 90 | display: inline; |
| 91 | margin: 0; |
| 92 | color: #333; |
| 93 | padding: 0 20px 0 0 !important; |
| 94 | border: none; |
| 95 | border-bottom: 1px solid #a2a3a2; |
| 96 | border-radius: 0; |
| 97 | -moz-appearance: none; |
| 98 | -webkit-appearance: none; |
| 99 | appearance: none; |
| 100 | background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.66016 7.19531C5.90625 7.44141 6.31641 7.44141 6.5625 7.19531L11.8945 1.89062C12.1406 1.61719 12.1406 1.20703 11.8945 0.960938L11.2656 0.332031C11.0195 0.0859375 10.6094 0.0859375 10.3359 0.332031L6.125 4.54297L1.88672 0.332031C1.61328 0.0859375 1.20312 0.0859375 0.957031 0.332031L0.328125 0.960938C0.0820312 1.20703 0.0820312 1.61719 0.328125 1.89062L5.66016 7.19531Z' fill='%23A2A3A2'/%3E%3C/svg%3E"), |
| 101 | linear-gradient(to bottom, #fff 0%, #fff 100%); |
| 102 | background-repeat: no-repeat, repeat; |
| 103 | background-position: right 4px top 50%, 0 0; |
| 104 | background-size: 0.65em auto, 100%; |
| 105 | |
| 106 | @media screen and (max-width: $break-phone) { |
| 107 | font-size: 14px; |
| 108 | } |
| 109 | |
| 110 | &::-ms-expand { |
| 111 | display: none; |
| 112 | } |
| 113 | |
| 114 | &:hover { |
| 115 | border-color: #888; |
| 116 | } |
| 117 | |
| 118 | &:focus { |
| 119 | box-shadow: none; |
| 120 | outline: none; |
| 121 | } |
| 122 | |
| 123 | option { |
| 124 | font-weight: normal; |
| 125 | } |
| 126 | } |
| 127 | } |
| 128 | |
| 129 | /*--------------------------------- |
| 130 | RTL styles |
| 131 | -----------------------------------*/ |
| 132 | |
| 133 | html[dir='rtl']='rtl'] { |
| 134 | .give-recurring-donors-choice { |
| 135 | label { |
| 136 | margin-right: 40px !important; |
| 137 | margin-left: 0 !important; |
| 138 | } |
| 139 | |
| 140 | label::before { |
| 141 | right: 22px !important; |
| 142 | } |
| 143 | |
| 144 | input[type='checkbox']='checkbox'] + label::after { |
| 145 | right: 22px; |
| 146 | margin-right: 1px; |
| 147 | } |
| 148 | } |
| 149 | } |
| 150 |