src/club/static/club/club.scss

   1 .plan-select {
   2     margin-bottom: 15px;
   3 }
   4
   5 .methods {
   6     color: #888;
   7     line-height: 30px;
   8 }
   9 .methods .method {
  10     border: 1px solid #888;
  11     border-radius: 5px;
  12     display: inline-block;
  13     padding: 0 5px;
  14 }
  15
  16 .methods img {
  17     height: 30px;
  18     margin-right: 5px;
  19     vertical-align: middle;
  20 }
  21
  22 .payment-method.disabled {
  23     opacity: .5;
  24     filter: grayscale(100%);
  25 }
  26
  27 .button {
  28     box-sizing: border-box;
  29     display: inline-block;
  30     text-align: center;
  31 }
  32 .kwota, .inna .button, .plan-toggle, .inna input {
  33     border: 1px solid black;
  34     border-radius: 8px;
  35     background: none;
  36     cursor: pointer;
  37     padding: 0;
  38     margin-right: 3%;
  39     margin-bottom: 10px;
  40     line-height: 3em;
  41     font-size: 20px;
  42 }
  43 .plan-toggle {
  44     width: 46.5%;
  45 }
  46 .kwota {
  47     width: 30%;
  48 }
  49 .kwota:after {
  50     content: " zł";
  51 }
  52 .kwota.yearly {
  53     background: orange;
  54
  55 }
  56 .inna .button {
  57     width: 63%;
  58 }
  59 .inna input {
  60     width: 60%;
  61     padding-left: 1.5%;
  62     padding-right: 1.5%;
  63     height: 3em !important;
  64     text-align: center;
  65 }
  66 .chunk-alt {
  67     position: relative;
  68     overflow: hidden;
  69 }
  70 .chunk-alt .chunk {
  71     top: 0;
  72 }
  73
  74 .kwota.active, .plan-toggle.active {
  75     background: #9ACD32;
  76 }
  77 .inna input {display: none;}
  78 .inna.active input {display: inline;}
  79 .inna.active .button {display: none;}
  80
  81 .ambassador {
  82     padding: 2em;
  83     margin-bottom: 1em;
  84     border: 1px solid #ddd;
  85     position: relative;
  86 }
  87 .ambassador.with-photo {
  88     padding-right: 145px;
  89 }
  90 .ambassador img {
  91     border-radius: 100%;
  92     height: 100px;
  93     width: 100px;
  94     position: absolute;
  95     top: 35px;
  96     right: 30px;
  97 }
  98 .ambassador div {
  99     text-align: right;
 100     line-height: 1.5em;
 101 }
 102
 103 .club-form-info {
 104     line-height: 1.5em;
 105 }
 106
 107 @media screen and (max-width: 1023px) {
 108     .club-form-info {
 109         margin-top: 2em;
 110     }
 111 }
 112
 113
 114 @media screen and (min-width: 1024px) {
 115     .club-form-info {
 116         border-left: 1px solid #ddd;
 117         padding-left: 2em;
 118         margin-left: 2em;
 119     }
 120     .twocol {
 121         display: flex;
 122     }
 123     .twocol > form, .twocol > div {
 124         flex: 1;
 125     }
 126 }