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         cursor: pointer;
 137
 138         &.active {
 139             background: #9ACD3240;
 140         }
 141     }
 142 }
 143
 144
 145 label.required {
 146     &::before {
 147         content: " * ";
 148         color: red;
 149     }
 150 }
 151
 152
 153
 154 .helptext {
 155     position: relative;
 156
 157     .short {
 158         height: 1.5em;
 159         overflow: hidden;
 160         position: relative;
 161
 162         &:after {
 163             content:' ';
 164             position:absolute;
 165             bottom:0;
 166             width:25%;
 167             height:20px;
 168             background-color:transparent;
 169             overflow: hidden;
 170             /* assume ltr */
 171             right:0;
 172             background-image:-webkit-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
 173             background-image:-moz-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
 174             background-image:-o-linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%);
 175             background-image:linear-gradient(to right,rgba(255,255,255,0),#ffffff 50%)
 176         }
 177     }
 178
 179     .morelink {
 180         position: absolute;
 181         top: 0;
 182         right: 0;
 183         &:after {
 184             content: " ↓";
 185         }
 186     }
 187 }
 188
 189
 190 #payment-form {
 191     textarea {
 192         box-sizing: border-box;
 193         padding: 8px;
 194         width: 400px;
 195         height: 4em;
 196     }
 197     input[type="text"], input[type="email"] {
 198         box-sizing: border-box;
 199         width: 400px;
 200         padding: 8px;
 201         &#id_postal_code {
 202             width: 100px;
 203         }
 204         &#id_postal_town {
 205             width: 300px;
 206         }
 207     }
 208     select {
 209         box-sizing: border-box;
 210         width: 400px;
 211         padding: 8px;
 212     }
 213 }