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     min-height: 100px;
  87 }
  88 .ambassador.with-photo {
  89     padding-right: 145px;
  90 }
  91 .ambassador img {
  92     border-radius: 100%;
  93     height: 100px;
  94     width: 100px;
  95     position: absolute;
  96     top: 35px;
  97     right: 30px;
  98 }
  99 .ambassador div {
 100     text-align: right;
 101     line-height: 1.5em;
 102 }
 103
 104 .club-form-info {
 105     line-height: 1.5em;
 106 }
 107
 108 @media screen and (max-width: 1023px) {
 109     .club-form-info {
 110         margin-top: 2em;
 111     }
 112 }
 113
 114
 115 @media screen and (min-width: 1024px) {
 116     .club-form-info {
 117         border-left: 1px solid #ddd;
 118         padding-left: 2em;
 119         margin-left: 2em;
 120     }
 121     .twocol {
 122         display: flex;
 123     }
 124     .twocol > form, .twocol > div {
 125         flex: 1;
 126     }
 127 }
 128
 129
 130 .methods {
 131     .button {
 132         border: 1px solid black;
 133         border-radius: 10px;
 134         padding: 10px;
 135         margin-right: 3%;
 136
 137         &.active {
 138             background: #9ACD3240;
 139         }
 140     }
 141 }