Commit 31b32baf7f846aafeb1c19d0419f75449ea2f784
1 parent
5bbea957
Exists in
master
and in
11 other branches
Style of the first box
Showing
5 changed files
with
96 additions
and
28 deletions
Show diff stats
371 Bytes
index.html
| ... | ... | @@ -89,7 +89,7 @@ |
| 89 | 89 | <div class='container-title'>Faça Uma Proposta</div> |
| 90 | 90 | <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div> |
| 91 | 91 | <div class='info'>Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div> |
| 92 | - <div class='send-proposal-button send-button'><a href='#'>Envie Sua Proposta</a></div> | |
| 92 | + <div class='send-proposal-button send-button'><a href='#'><span>Envie Sua Proposta</span></a></div> | |
| 93 | 93 | <div class="login-container hide">Login</div> |
| 94 | 94 | <form class='make-proposal-form save-article-form hide' id='make-proposal-form-{{id}}'> |
| 95 | 95 | <div class="message"></div> |
| ... | ... | @@ -104,6 +104,7 @@ |
| 104 | 104 | <p>Sua proposta foi encaminhada com sucesso!</p> |
| 105 | 105 | <a href='#'>Encaminhar Nova Proposta</a> |
| 106 | 106 | </div> |
| 107 | + <br style="clear: both;" /> | |
| 107 | 108 | </div> |
| 108 | 109 | </div> |
| 109 | 110 | <div class='support-proposal-container'> | ... | ... |
sass/_proposal_detail.scss
| ... | ... | @@ -127,32 +127,63 @@ |
| 127 | 127 | .container-title{ |
| 128 | 128 | color: $color; |
| 129 | 129 | font-weight: bolder; |
| 130 | - font-size: x-large; | |
| 131 | - margin: 10px; | |
| 130 | + font-size: 38px; | |
| 131 | + margin: 20px; | |
| 132 | + text-align: left; | |
| 132 | 133 | } |
| 133 | - .container-button{ | |
| 134 | + .message { | |
| 135 | + margin-left: 20px; | |
| 136 | + font-size: 12px; | |
| 137 | + color: #333; | |
| 138 | + } | |
| 139 | + input, textarea { | |
| 140 | + border-color: $color; | |
| 141 | + } | |
| 142 | + .container-button a, input[type=submit] { | |
| 134 | 143 | font-weight: bolder; |
| 135 | - font-size: x-large; | |
| 144 | + font-size: 14px; | |
| 145 | + text-transform: uppercase; | |
| 136 | 146 | background-color: $color; |
| 137 | 147 | color: white; |
| 138 | - width: 40%; | |
| 139 | - height: 15%; | |
| 148 | + width: 60%; | |
| 140 | 149 | border: none; |
| 141 | - margin-top: 8%; | |
| 150 | + margin: 20px auto; | |
| 142 | 151 | border-radius: 6px; |
| 152 | + text-align: center; | |
| 153 | + text-decoration: none; | |
| 154 | + padding: 20px; | |
| 155 | + display: block; | |
| 156 | + | |
| 157 | + span { | |
| 158 | + padding-left: 20px; | |
| 159 | + background: transparent url(images/airplane.png) left center no-repeat; | |
| 160 | + } | |
| 143 | 161 | } |
| 144 | 162 | .make-proposal-container{ |
| 163 | + .subtitle, .info { | |
| 164 | + margin: 20px; | |
| 165 | + color: #18376C; | |
| 166 | + } | |
| 167 | + .subtitle { | |
| 168 | + font-size: 24px; | |
| 169 | + font-weight: bold; | |
| 170 | + } | |
| 171 | + .info { | |
| 172 | + font-size: 14px; | |
| 173 | + } | |
| 145 | 174 | .name { |
| 146 | 175 | margin-bottom: 15px; |
| 147 | 176 | } |
| 148 | 177 | width: 50%; |
| 149 | - height: 90%; | |
| 178 | + height: $container-height; | |
| 179 | + min-height: $container-height; | |
| 150 | 180 | float: left; |
| 151 | - text-align: center; | |
| 181 | + text-align: left; | |
| 152 | 182 | .make-proposal{ |
| 153 | 183 | border: 1px solid $color; |
| 154 | - margin: 2% 2% 2% 2%; | |
| 155 | - height: 100%; | |
| 184 | + height: $container-height; | |
| 185 | + min-height: $container-height; | |
| 186 | + margin: 0 10px 20px 0; | |
| 156 | 187 | } |
| 157 | 188 | .make-proposal-button{ |
| 158 | 189 | @extend .container-button; |
| ... | ... | @@ -161,7 +192,6 @@ |
| 161 | 192 | @extend .container-button; |
| 162 | 193 | } |
| 163 | 194 | #article_abstract { |
| 164 | - width: 65%; | |
| 165 | 195 | height: 15%; |
| 166 | 196 | } |
| 167 | 197 | label { |
| ... | ... | @@ -171,13 +201,17 @@ |
| 171 | 201 | .support-proposal-container{ |
| 172 | 202 | width: 50%; |
| 173 | 203 | float: left; |
| 174 | - height: 90%; | |
| 204 | + height: $container-height; | |
| 205 | + min-height: $container-height; | |
| 175 | 206 | text-align: center; |
| 207 | + .container-title { | |
| 208 | + text-align: center; | |
| 209 | + } | |
| 176 | 210 | .support-proposal{ |
| 177 | 211 | border: 1px solid $color; |
| 178 | - height: 96%; | |
| 179 | - margin: 2% 2% 2% 2%; | |
| 180 | - padding: 10px; | |
| 212 | + height: $container-height; | |
| 213 | + min-height: $container-height; | |
| 214 | + margin: 0 0 20px 10px; | |
| 181 | 215 | } |
| 182 | 216 | .subtitle { |
| 183 | 217 | color: rgb(163, 163, 163); |
| ... | ... | @@ -214,12 +248,14 @@ |
| 214 | 248 | .experience-proposal-container{ |
| 215 | 249 | float: left; |
| 216 | 250 | width: 50%; |
| 217 | - height: 90%; | |
| 251 | + height: $container-height; | |
| 252 | + min-height: $container-height; | |
| 218 | 253 | text-align: center; |
| 219 | 254 | .experience-proposal{ |
| 220 | 255 | border: 1px solid $color; |
| 221 | - margin: 6% 2% 2% 2%; | |
| 222 | - height: 100%; | |
| 256 | + height: $container-height; | |
| 257 | + min-height: $container-height; | |
| 258 | + margin: 20px 10px 0 0; | |
| 223 | 259 | } |
| 224 | 260 | .send-experience-button { |
| 225 | 261 | @extend .container-button; |
| ... | ... | @@ -228,12 +264,14 @@ |
| 228 | 264 | .talk-proposal-container{ |
| 229 | 265 | width: 50%; |
| 230 | 266 | float: left; |
| 231 | - height: 90%; | |
| 267 | + height: $container-height; | |
| 268 | + min-height: $container-height; | |
| 232 | 269 | text-align: center; |
| 233 | 270 | .talk-proposal{ |
| 234 | 271 | border: 1px solid $color; |
| 235 | - margin: 6% 2% 2% 2%; | |
| 236 | - height: 100%; | |
| 272 | + height: $container-height; | |
| 273 | + min-height: $container-height; | |
| 274 | + margin: 20px 0 0 10px; | |
| 237 | 275 | } |
| 238 | 276 | |
| 239 | 277 | } | ... | ... |
sass/style.scss
| ... | ... | @@ -77,8 +77,36 @@ h1 { |
| 77 | 77 | bottom: 0; |
| 78 | 78 | } |
| 79 | 79 | |
| 80 | -/* | |
| 81 | - * Each button | |
| 82 | - * FIXME: This selector doesn't look reliable | |
| 83 | - */ | |
| 80 | +form { | |
| 81 | + label, input, div.label, textarea { | |
| 82 | + width: 90%; | |
| 83 | + margin: 0 auto; | |
| 84 | + font-size: 14px; | |
| 85 | + display: block; | |
| 86 | + padding: 5px; | |
| 87 | + } | |
| 88 | + | |
| 89 | + input, textarea { | |
| 90 | + color: #333; | |
| 91 | + border: 1px solid #18376C; | |
| 92 | + } | |
| 93 | + | |
| 94 | + textarea { | |
| 95 | + margin-bottom: 10px; | |
| 96 | + } | |
| 84 | 97 | |
| 98 | + a { | |
| 99 | + font-size: 12px; | |
| 100 | + font-weight: bold; | |
| 101 | + color: #333; | |
| 102 | + font-weight: bold; | |
| 103 | + text-decoration: none; | |
| 104 | + margin: 10px 20px; | |
| 105 | + } | |
| 106 | + | |
| 107 | + .actions, .oauth { | |
| 108 | + text-align: center; | |
| 109 | + font-size: 12px; | |
| 110 | + margin-top: 10px; | |
| 111 | + } | |
| 112 | +} | ... | ... |
sass/utilities/_variables.scss
| 1 | 1 | $categories: (saude: #00a9bd, seguranca: #e34748, educacao: #ffb400, desenvolvimento-social: #51d0b3); |
| 2 | -$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é um dos maiores do mundo: atende 202 milhões de brasileiras e brasileiros.", seguranca: '') | |
| 2 | +$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é um dos maiores do mundo: atende 202 milhões de brasileiras e brasileiros.", seguranca: ''); | |
| 3 | +$container-height: 400px; | ... | ... |