static/scss/_donation.scss

   1 .donation-card {
   2         border-radius: 4px;
   3         background-color: white;
   4         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
   5 }
   6
   7 .ownamount {
   8         overflow: hidden;
   9         width: 95%;
  10         height: 48px;
  11         padding: 0 16px;
  12         border-radius: 2px;
  13         border: none;
  14 }
  15
  16 .ownamount {
  17         background-color: rgba($blue-grey-900, .08);
  18         border-bottom: 2px solid $blue-grey-900;
  19         width: 90%;
  20 }
  21
  22 input.radiobtn:not(old) {
  23         display: none;
  24 }
  25
  26 input.radiobtn:not(old) + label {
  27         display: inline-block;
  28         background-image: url("/static/img/icons/icon-radiobtn-off.png");
  29         background-repeat: no-repeat;
  30         background-position: 0 0;
  31         padding-left: 38px;
  32 }
  33
  34 input.radiobtn:not(old):checked + label {
  35         background-image: url("/static/img/icons/icon-radiobtn-on.png");
  36 }
  37
  38 .inline-card {
  39         border-radius: 8px;
  40         background-color: $blue-grey-50;
  41         padding: 24px;
  42         position: relative;
  43         padding: 24px 20px;
  44 }
  45
  46 label.amount {
  47         width: 84px;
  48         height: 48px;
  49         display: block;
  50         background-color: white;
  51         border-radius: 2px;
  52         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
  53         font-size: 20px;
  54         color: $blue-400;
  55         text-align: center;
  56         margin: 0 8px 16px 8px;
  57         padding: 8px 0 0 0;
  58 }
  59
  60 input[name=amount] {
  61         display: none;
  62 }
  63
  64 input[name=amount]:checked + label {
  65         background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210));
  66         color: white;
  67 }
  68
  69 .or {
  70         display: block;
  71         height: 200px;
  72         width: 1px;
  73         border: 1px solid $blue-grey-300;
  74         position: absolute;
  75         left: 350px;
  76         top: 12px;
  77         &:before {
  78                 content: "OR";
  79                 font-family: 'Ubuntu', sans-serif;
  80                 font-size: 16px;
  81                 font-weight: 500;
  82                 color: $blue-grey-300;
  83                 background-color: $blue-grey-50;
  84                 display: block;
  85                 position: absolute;
  86                 top: 12px;
  87                 left: -12px;
  88                 width: 24px;
  89                 height: 24px;
  90         }
  91 }