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 .currency-dropdown,
   8 .ownamount {
   9         overflow: hidden;
  10         width: 95%;
  11         height: 48px;
  12         padding: 0 16px;
  13         border-radius: 2px;
  14         border: none;
  15 }
  16
  17 .dropdown-wrapper,
  18 .ownamount {
  19         background-color: rgba($blue-grey-900, .08);
  20         border-bottom: 2px solid $blue-grey-900;
  21         width: 90%;
  22 }
  23 .currency-dropdown {
  24         background-color: transparent;
  25         &:focus {
  26                 outline: none;
  27         }
  28 }
  29
  30 .inline-card {
  31         border-radius: 8px;
  32         background-color: $blue-grey-50;
  33         padding: 24px;
  34 }
  35
  36 label.amount {
  37         width: 84px;
  38         height: 48px;
  39         display: block;
  40         background-color: white;
  41         border-radius: 2px;
  42         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
  43         font-size: 20px;
  44         color: $blue-400;
  45         text-align: left;
  46         margin: 0 8px 16px 8px;
  47         padding-top: 8px;
  48 }
  49
  50 input[name=amount] {
  51         display: none;
  52 }
  53
  54 input[name=amount]:checked + label {
  55         background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210));
  56         color: white;
  57 }