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: top;
  20         text-align: center;
  21
  22         background: lighten(#018189, .05);
  23         @include size(width, 135px);
  24     }
  25     .learn-more {
  26         text-align: center;
  27         margin: auto;
  28         @include size(font-size, 10px);
  29         padding: .5em;
  30         @include min-screen(420px) {
  31             padding: 0;
  32         }
  33     }
  34     .description {
  35         @include size(padding-left, 6px);
  36
  37         a {
  38             display: block;
  39             color: black;
  40             @include size(padding, 0 3px);
  41         }
  42     }
  43     strong {
  44         @include size(font-size, 15px);
  45         @include size(padding, 3px 0 0);
  46     }
  47     .progress {
  48         .piece {
  49             @include size(font-size, 13px);
  50             @include size(padding, 4px 6px);
  51         }
  52         @include size(margin, 3px 12px 4px 0);
  53         @include size(border-radius, 20px);
  54         background-image: url(/static/img/progress-pixel.png);
  55         background-repeat: repeat-y;
  56         background-color: #F68900;
  57         @include box-shadow(1px 1px 1px #888);
  58     }
  59     .with-button {
  60         clear: left;
  61         @include min-screen(420px) {
  62             clear: none;
  63             @include size(margin-left, 171px);
  64         }
  65     }
  66
  67     .funding-title {
  68         @include size(font-size, 11px);
  69     }
  70     .funding-title-strong {
  71         @extend .funding-title;
  72         font-weight: bold;
  73         @include size(font-size, 15px);
  74     }
  75     .close {
  76         position: absolute;
  77         top: 0px;
  78         @include size(right, 5px);
  79     }
  80 }
  81
  82 .funding-top-header {
  83     @extend .funding;
  84
  85     @include min-screen(1000px) {
  86         @include size(width, 975px);
  87     }
  88 }
  89
  90
  91 .wlfund {
  92     width: 100%;
  93     border-spacing:0;
  94
  95     td {
  96         @include size(padding, 10px 5px 10px);
  97         text-align: center;
  98         @include size(border-top, 10px solid rgba(255, 255, 255, 0));
  99         @include size(border-bottom, 2px solid #DDDDDD);
 100
 101         background-clip: padding-box;
 102         -moz-background-clip: padding;
 103         -webkit-background-clip: padding;
 104     }
 105     td.oneline {
 106         white-space: nowrap;
 107     }
 108
 109     td:last-child {
 110         text-align: right;
 111     }
 112
 113     .funding-plus td {
 114         background-color: mix(#0D7E85, white, .2);
 115     }
 116
 117     .funding-minus td {
 118         background-color: white;
 119     }
 120 }
 121
 122
 123
 124 .honking {
 125     background: #018189;
 126     @include size(font-size, 15px);
 127     @include size(padding, 7.5px);
 128     color: white;
 129     border: 0;
 130     @include box-shadow(3px 3px 4.5px #888888);
 131     position: relative;
 132 }
 133 .honking:hover {
 134     @include box-shadow(none);
 135     @include size(top, 1px);
 136     @include size(left, 1px);
 137 }
 138
 139
 140
 141 .share {
 142     a {
 143         @include size(margin-right, 15px);
 144
 145         img {
 146             vertical-align: middle;
 147         }
 148     }
 149 }
 150
 151 .funding-handle {
 152     position: absolute;
 153     top: 0;
 154     right: 0;
 155     z-index: 2;
 156     background: orange;
 157     cursor: pointer;
 158     @include size(padding, 2.6px 13px);
 159     @include size(border-radius, 0 0 0 10px);
 160     @include size(font-size, 13px);
 161 }
 162
 163 .funding-cover {
 164     float: left;
 165     @include size(margin-right, 10px);
 166 }
 167
 168 .funding-details-intro {
 169     @include size(padding-top, 10px);
 170
 171     h3:first-of-type {
 172         margin-top: 0;
 173     }
 174 }