apps/funding/static/funding/funding.scss

   1 .funding {
   2     background: orange;
   3     margin: auto;
   4     padding: 5px 0;
   5     position: relative;
   6     a.call {
   7         height: 1.2em;
   8         width: 9em;
   9         padding: .35em .5em;
  10         margin: .5em;
  11         display: inline-block;
  12         vertical-align: top;
  13         text-align: center;
  14
  15         background: lighten(#018189, .05);
  16     }
  17     .description {
  18         display: inline-block;
  19         padding-left: .6em;
  20         a {
  21             display: block;
  22             color: black;
  23             padding: 0 3px;
  24         }
  25     }
  26     strong {
  27         font-size: 1.5em;
  28         padding: .2em 0 0;
  29         //display: block;
  30     }
  31     .progress {
  32         .piece {
  33             font-size: 1.3em;
  34             padding: .3em .5em;
  35         }
  36         width: 95.7em;
  37         margin: .3em 0 .4em;
  38         border-radius: 2em;
  39         background-image: url(/static/img/progress-pixel.png);
  40         background-repeat: repeat-y;
  41         background-color: fade-out(#ec6d00, .5);
  42         box-shadow: .1em .1em .1em #888;
  43     }
  44     .with-button .progress {
  45         width: 78em;
  46     }
  47
  48     .funding-title {
  49         font-size: 1.1em;
  50     }
  51     .funding-title-strong {
  52         @extend .funding-title;
  53         font-weight: bold;
  54         font-size: 1.5em;
  55     }
  56     .close {
  57         position: absolute;
  58         top: 0px;
  59         right: 5px;
  60     }
  61 }
  62
  63 .funding-top-header {
  64     @extend: .funding;
  65     width: 97.5em;
  66 }
  67
  68
  69 .wlfund {
  70     width: 100%;
  71     border-collapse: collapse;
  72
  73     td {
  74         padding: 0 0 1em 0;
  75         text-align: center;
  76     }
  77
  78     td:last-child {
  79         text-align: right;
  80     }
  81
  82     td div {
  83         padding: 1em;
  84         box-shadow: 0 2px 0 #DDDDDD;
  85     }
  86
  87     .funding-plus td div {
  88         background: fade-out(#0D7E85, .8);
  89     }
  90
  91     .funding-minus td div {
  92         background: white;
  93     }
  94 }
  95
  96
  97
  98 .honking {
  99     background: #018189;
 100     font-size: 1.5em;
 101     padding: .5em;
 102     color: white;
 103     border: 0;
 104     box-shadow: 0.2em 0.2em 0.3em #888888;
 105     position: relative;
 106 }
 107 .honking:hover {
 108     box-shadow: none;
 109     top: .1em;
 110     left: .1em;
 111 }
 112
 113
 114
 115 .share {
 116     a {
 117         margin-right: 1.5em;
 118
 119         img {
 120             vertical-align: middle;
 121         }
 122     }
 123 }
 124
 125 .funding-handle {
 126     position: absolute;
 127     top: 0;
 128     right: 0;
 129     z-index:2;
 130     background: orange;
 131     cursor:pointer;
 132     padding: .2em 1em;
 133     border-radius: 0 0 0 1em;
 134     font-size: 13px;
 135 }
 136
 137 .funding-cover {
 138     float:left;
 139     margin-right: 10px;
 140 }
 141
 142 .funding-details-intro {
 143     padding-top: 1em;
 144
 145     h3:first-of-type {
 146         margin-top: 0;
 147     }
 148 }