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; | ... | ... |