Commit 31b32baf7f846aafeb1c19d0419f75449ea2f784

Authored by Caio Almeida
1 parent 5bbea957

Style of the first box

images/airplane.png 0 → 100644

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