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 }
  43
  44 label.amount {
  45         width: 84px;
  46         height: 48px;
  47         display: block;
  48         background-color: white;
  49         border-radius: 2px;
  50         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
  51         font-size: 20px;
  52         color: $blue-400;
  53         text-align: left;
  54         margin: 0 8px 16px 8px;
  55         padding-top: 8px;
  56 }
  57
  58 input[name=amount] {
  59         display: none;
  60 }
  61
  62 input[name=amount]:checked + label {
  63         background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210));
  64         color: white;
  65 }