src/wolnelektury/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 mono;
   8         @include size(font-size, 16px);
   9         position: absolute;
  10         top: 0px;
  11         right: 0;
  12         @include size(padding, 1px 5px 10px 10px);
  13     }
  14     .call-area {
  15         float:left;
  16         @include size(padding-right, 6px);
  17     }
  18     a.call {
  19         @include size(height, 18px);
  20
  21         @include size(padding, 5.25px 7.5px);
  22         @include size(margin, 7.5px);
  23         display: inline-block;
  24         vertical-align: middle;
  25         text-align: center;
  26
  27         background: lighten(#018189, .05);
  28         @include size(width, 135px);
  29
  30         @include min-screen(420px) {
  31             vertical-align: top;
  32         }
  33     }
  34     .learn-more {
  35         text-align: center;
  36         margin: auto;
  37         @include size(font-size, 10px);
  38         padding: .5em;
  39
  40         @include min-screen(300px) {
  41             display: inline;
  42         }
  43         @include min-screen(420px) {
  44             padding: 0;
  45             display: block;
  46         }
  47     }
  48     .description {
  49         @include size(padding-left, 6px);
  50
  51         a {
  52             display: block;
  53             color: black;
  54             @include size(padding, 0 3px);
  55         }
  56     }
  57     strong {
  58         @include size(font-size, 15px);
  59         @include size(padding, 3px 0 0);
  60     }
  61     .progress {
  62         .piece {
  63             @include size(font-size, 13px);
  64             @include size(padding, 4px 6px);
  65         }
  66         @include size(margin, 3px 12px 4px 0);
  67         @include size(border-radius, 20px);
  68         background-image: url(/static/img/progress-pixel.png);
  69         background-repeat: repeat-y;
  70         background-color: #F68900;
  71         @include box-shadow(1px 1px 1px #888);
  72
  73         .progress-collected {
  74             float:left;
  75             &:after {
  76                 content: " / ";
  77             }
  78             @include min-screen(500px) {
  79                 &:after {
  80                     content: none;
  81                 }
  82             }
  83         }
  84         .progress-target {
  85             float: left;
  86             padding-left: 0;
  87             @include min-screen(500px) {
  88                 float: right;
  89                 @include size(padding-left, 6px);
  90             }
  91         }
  92         .progress-extralabel {
  93             display: none;
  94             @include min-screen(500px) {
  95                 display: inline;
  96             }
  97         }
  98         .progress-until {
  99             display: inline-block;
 100             margin-right: 0em;
 101             text-align: right;
 102             @include min-screen(500px) {
 103                 text-align: center;
 104             }
 105         }
 106     }
 107     .with-button {
 108         clear: left;
 109         @include min-screen(420px) {
 110             clear: none;
 111             @include size(margin-left, 171px);
 112         }
 113     }
 114
 115     .funding-title {
 116         @include size(font-size, 11px);
 117         display: block;
 118         @include min-screen(640px) {
 119             display: inline;
 120         }
 121     }
 122     .funding-title-strong {
 123         @extend .funding-title;
 124         font-weight: bold;
 125         @include size(font-size, 15px);
 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-closeable {
 199     display: none;
 200 }
 201 #funding-handle {
 202     position: absolute;
 203     top: 0;
 204     right: 0;
 205     z-index: 2;
 206     background: orange;
 207     cursor: pointer;
 208     @include size(padding, 2.6px 13px);
 209     @include size(border-radius, 0 0 0 10px);
 210     @include size(font-size, 13px);
 211 }
 212
 213 .funding-cover {
 214     float: left;
 215     @include size(margin-right, 10px);
 216 }
 217
 218 .funding-details-intro {
 219     @include size(padding-top, 10px);
 220
 221     h3:first-of-type {
 222         margin-top: 0;
 223     }
 224 }