apps/wolnelektury_core/static/scss/funding/funding.scss

   1 .funding {
   2     background: orange;
   3     margin: auto;
   4     @include size(padding, 5px 0);
   5     position: relative;
   6     .close {
   7         @include size(font-size, 10px);
   8     }
   9     .call-area {
  10         float:left;
  11         @include size(padding-right, 6px);
  12     }
  13     a.call {
  14         @include size(height, 18px);
  15
  16         @include size(padding, 5.25px 7.5px);
  17         @include size(margin, 7.5px);
  18         display: inline-block;
  19         vertical-align: middle;
  20         text-align: center;
  21
  22         background: lighten(#018189, .05);
  23         @include size(width, 135px);
  24
  25         @include min-screen(420px) {
  26             vertical-align: top;
  27         }
  28     }
  29     .learn-more {
  30         text-align: center;
  31         margin: auto;
  32         @include size(font-size, 10px);
  33         padding: .5em;
  34
  35         @include min-screen(300px) {
  36             display: inline;
  37         }
  38         @include min-screen(420px) {
  39             padding: 0;
  40             display: block;
  41         }
  42     }
  43     .description {
  44         @include size(padding-left, 6px);
  45
  46         a {
  47             display: block;
  48             color: black;
  49             @include size(padding, 0 3px);
  50         }
  51     }
  52     strong {
  53         @include size(font-size, 15px);
  54         @include size(padding, 3px 0 0);
  55     }
  56     .progress {
  57         .piece {
  58             @include size(font-size, 13px);
  59             @include size(padding, 4px 6px);
  60         }
  61         @include size(margin, 3px 12px 4px 0);
  62         @include size(border-radius, 20px);
  63         background-image: url(/static/img/progress-pixel.png);
  64         background-repeat: repeat-y;
  65         background-color: #F68900;
  66         @include box-shadow(1px 1px 1px #888);
  67
  68         .progress-collected {
  69             float:left;
  70             &:after {
  71                 content: " / ";
  72             }
  73             @include min-screen(500px) {
  74                 &:after {
  75                     content: none;
  76                 }
  77             }
  78         }
  79         .progress-target {
  80             float: left;
  81             padding-left: 0;
  82             @include min-screen(500px) {
  83                 float: right;
  84                 @include size(padding-left, 6px);
  85             }
  86         }
  87         .progress-extralabel {
  88             display: none;
  89             @include min-screen(500px) {
  90                 display: inline;
  91             }
  92         }
  93         .progress-until {
  94             display: inline-block;
  95             margin-right: 0em;
  96             text-align: right;
  97             @include min-screen(500px) {
  98                 text-align: center;
  99             }
 100         }
 101     }
 102     .with-button {
 103         clear: left;
 104         @include min-screen(420px) {
 105             clear: none;
 106             @include size(margin-left, 171px);
 107         }
 108     }
 109
 110     .funding-title {
 111         @include size(font-size, 11px);
 112         display: block;
 113         @include min-screen(640px) {
 114             display: inline;
 115         }
 116     }
 117     .funding-title-strong {
 118         @extend .funding-title;
 119         font-weight: bold;
 120         @include size(font-size, 15px);
 121     }
 122     .close {
 123         position: absolute;
 124         top: 0px;
 125         @include size(right, 5px);
 126     }
 127 }
 128
 129 .funding-top-header {
 130     @extend .funding;
 131
 132     @include min-screen(1000px) {
 133         @include size(width, 975px);
 134     }
 135 }
 136
 137
 138 .wlfund {
 139     width: 100%;
 140     border-spacing:0;
 141
 142     td {
 143         @include size(padding, 10px 5px 10px);
 144         text-align: center;
 145         @include size(border-top, 10px solid rgba(255, 255, 255, 0));
 146         @include size(border-bottom, 2px solid #DDDDDD);
 147
 148         background-clip: padding-box;
 149         -moz-background-clip: padding;
 150         -webkit-background-clip: padding;
 151     }
 152     td.oneline {
 153         white-space: nowrap;
 154     }
 155
 156     td:last-child {
 157         text-align: right;
 158     }
 159
 160     .funding-plus td {
 161         background-color: mix(#0D7E85, white, .2);
 162     }
 163
 164     .funding-minus td {
 165         background-color: white;
 166     }
 167 }
 168
 169
 170
 171 .honking {
 172     background: #018189;
 173     @include size(font-size, 15px);
 174     @include size(padding, 7.5px);
 175     color: white;
 176     border: 0;
 177     @include box-shadow(3px 3px 4.5px #888888);
 178     position: relative;
 179 }
 180 .honking:hover {
 181     @include box-shadow(none);
 182     @include size(top, 1px);
 183     @include size(left, 1px);
 184 }
 185
 186
 187
 188 .share {
 189     a {
 190         @include size(margin-right, 15px);
 191
 192         img {
 193             vertical-align: middle;
 194         }
 195     }
 196 }
 197
 198 .funding-handle {
 199     position: absolute;
 200     top: 0;
 201     right: 0;
 202     z-index: 2;
 203     background: orange;
 204     cursor: pointer;
 205     @include size(padding, 2.6px 13px);
 206     @include size(border-radius, 0 0 0 10px);
 207     @include size(font-size, 13px);
 208 }
 209
 210 .funding-cover {
 211     float: left;
 212     @include size(margin-right, 10px);
 213 }
 214
 215 .funding-details-intro {
 216     @include size(padding-top, 10px);
 217
 218     h3:first-of-type {
 219         margin-top: 0;
 220     }
 221 }