Download as
Browse Code »

Commit 21eda9de823724389cf833d41d60407925a2b31b

Authored by Augusto dos Anjos Almeida
1 parent 6dbe70d4
Exists in refactory-sass

Login form

Showing 3 changed files with 150 additions and 49 deletions   Show diff stats
index.html
  Diff comments   View file @21eda9d
... ... @@ -353,7 +353,7 @@
353 353 <a href="#" class="new-user button">Cadastre-se</a>
354 354 </div>
355 355 </div>
356   - <p>Ou acesse:</p>
  356 + <p class="box-subtitle">Ou acesse:</p>
357 357 <div class="username">
358 358 <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
359 359 <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
... ... @@ -375,6 +375,8 @@
375 375 </div>
376 376 </form>
377 377 <form id="signup-form" class="signup hide" autocomplete="off">
  378 + <div class="message hide"></div>
  379 + <p class="box-subtitle">Cadastre-se</p>
378 380 <div class="email">
379 381 <label for="user_email" class="label">E-mail:</label>
380 382 <input id="user_email" name="email" type="text" placeholder="E-mail">
... ... @@ -383,18 +385,25 @@
383 385 <label for="user_name" class="label">Nome de Usuário</label>
384 386 <input id="user_name" name="login" type="text" placeholder="Nome do usuário">
385 387 </div>
386   - <div class="password">
387   - <label for="user_password" class="label">Senha:</label>
388   - <input id="user_password" name="password" type="password" placeholder="Senha">
389   - </div>
390   - <div class="password-confirmation">
391   - <label for="user_password_confirmation" class="label">Confirme a senha:</label>
392   - <input id="user_password_confirmation" name="password_confirmation" type="password" placeholder="Confirme a senha">
  388 + <div class="row">
  389 + <div class="password col-sm-6">
  390 + <label for="user_password" class="label">Senha:</label>
  391 + <input id="user_password" name="password" type="password" placeholder="Senha">
  392 + </div>
  393 + <div class="password-confirmation col-sm-6">
  394 + <label for="user_password_confirmation" class="label">Confirme a senha:</label>
  395 + <input id="user_password_confirmation" name="password_confirmation" type="password" placeholder="Confirme a senha">
  396 + </div>
393 397 </div>
394 398 <div class="actions">
395   - <div class="message hide"></div>
396   - <a href="#" class="confirm-signup">Confirmar</a>
397   - <a href="#" class="cancel-signup">Cancelar</a>
  399 + <div class="row">
  400 + <div class="col-sm-4">
  401 + <a href="#" class="confirm-signup button">Confirmar</a>
  402 + </div>
  403 + <div class="col-sm-4">
  404 + <a href="#" class="cancel-signup button button-cancela">Cancelar</a>
  405 + </div>
  406 + </div>
398 407 </div>
399 408 </form>
400 409 </script>
... ...
novo.css
  Diff comments   View file @21eda9d
... ... @@ -6,12 +6,13 @@ body {
6 6  
7 7 h1 {
8 8 border-bottom: 1px solid #d6dcd7;
9   - color: #03316f;
10 9 font-family: asap, sans;
11 10 font-size: 28px;
12 11 font-weight: 500;
13 12 padding-bottom: 20px;
14 13 text-transform: uppercase; }
  14 + h1 a {
  15 + color: #03316f; }
15 16  
16 17 h2 {
17 18 border-bottom: 1px solid #eeeff1;
... ... @@ -41,7 +42,7 @@ p, ul, select {
41 42 .container, .row {
42 43 margin-bottom: 20px; }
43 44  
44   -.button {
  45 +.button, .button-cancela, .login input.button, .signup input.button {
45 46 border-bottom: 3px solid #000;
46 47 border-left: 0;
47 48 border-right: 0;
... ... @@ -52,13 +53,16 @@ p, ul, select {
52 53 display: block;
53 54 font-size: 16px;
54 55 font-weight: 700;
55   - padding: 20px 0;
  56 + padding-bottom: 15px;
  57 + padding-left: 0;
  58 + padding-right: 0;
  59 + padding-top: 15px;
56 60 text-align: center;
57 61 transition: all 400ms; }
58   - .button:hover {
  62 + .button:hover, .button-cancela:hover, .login input.button:hover, .signup input.button:hover {
59 63 background-color: black;
60 64 text-decoration: none; }
61   - .button:hover, .button:focus {
  65 + .button:hover, .button-cancela:hover, .login input.button:hover, .signup input.button:hover, .button:focus, .button-cancela:focus, .login input.button:focus, .signup input.button:focus {
62 66 color: #fff; }
63 67 .button-inline {
64 68 display: inline-block;
... ... @@ -260,9 +264,6 @@ p, ul, select {
260 264 text-decoration: none; }
261 265 .box p {
262 266 border-bottom: 1px dotted #000;
263   - font-family: asap, sans;
264   - font-size: 14px;
265   - font-weight: 400;
266 267 padding-bottom: 15px; }
267 268 .box-propostas {
268 269 height: 500px;
... ... @@ -275,7 +276,6 @@ p, ul, select {
275 276 background-color: #fff; }
276 277 .box-propostas p {
277 278 border-bottom: 0;
278   - font-size: 14px;
279 279 padding-bottom: inherit; }
280 280 .box-apoie p {
281 281 border-bottom: 0;
... ... @@ -302,6 +302,7 @@ p, ul, select {
302 302 font-weight: 400;
303 303 margin-bottom: 20px; }
304 304 .box-subtitle, .box-apoie p {
  305 + color: #335277;
305 306 font-size: 24px;
306 307 font-weight: 700;
307 308 line-height: 1.2;
... ... @@ -401,27 +402,48 @@ p, ul, select {
401 402 padding-top: 5px;
402 403 text-transform: none; }
403 404  
404   -.login {
  405 +.login, .signup {
405 406 text-align: left; }
406   - .login input {
  407 + .login .message, .signup .message {
  408 + background: #fcc;
  409 + border: 1px solid #b00;
  410 + border-radius: 6px;
  411 + color: #b00;
  412 + font-weight: 700;
  413 + padding-bottom: 5px;
  414 + padding-left: 10px;
  415 + padding-right: 10px;
  416 + padding-top: 5px;
  417 + margin-bottom: 20px; }
  418 + .login input, .signup input {
  419 + border: 1px solid;
407 420 display: block;
408 421 margin-bottom: 20px;
  422 + padding-bottom: 5px;
  423 + padding-left: 10px;
  424 + padding-right: 10px;
  425 + padding-top: 5px;
409 426 width: 100%; }
410   - .login input.button {
  427 + .login input.button-cancela, .login input.button, .signup input.button-cancela, .signup input.button {
411 428 margin-bottom: 5px; }
412   - .login .label {
  429 + .login .label, .signup .label {
413 430 vertical-align: middle; }
414   - .login .icon {
  431 + .login .icon, .signup .icon {
415 432 vertical-align: middle; }
416   - .login .oauth {
  433 + .login .oauth, .signup .oauth {
417 434 margin-top: 10px;
418 435 text-align: right; }
419   - .login .forgot-password {
  436 + .login .forgot-password, .signup .forgot-password {
420 437 display: block;
421 438 font-size: 14px;
422 439 text-align: center; }
423   - .login i {
424   - font-style: normal; }
  440 + .login i, .signup i {
  441 + font-style: normal;
  442 + font-weight: 700;
  443 + padding-left: 5px;
  444 + padding-right: 5px; }
  445 + .login .row input, .signup .row input {
  446 + margin-bottom: 0; }
425 447  
426 448 .vote-actions .like {
427 449 background: url(images/like.png) no-repeat;
... ... @@ -585,11 +607,11 @@ section.reducao-da-pobreza .description {
585 607  
586 608 .saude {
587 609 color: #00a9bd; }
588   - .saude .button, .saude .show_body a {
  610 + .saude .button, .saude .button-cancela, .saude .login input.button, .login .saude input.button, .saude .signup input.button, .signup .saude input.button, .saude .show_body a {
589 611 background-color: #00a9bd;
590 612 border-color: #006571;
591 613 transition: all 400ms; }
592   - .saude .button:hover, .saude .show_body a:hover {
  614 + .saude .button:hover, .saude .button-cancela:hover, .saude .show_body a:hover {
593 615 background-color: #006571;
594 616 text-decoration: none; }
595 617 .saude .select {
... ... @@ -598,7 +620,7 @@ section.reducao-da-pobreza .description {
598 620 background-color: #006571; }
599 621 .saude .box-propostas {
600 622 border-color: #00a9bd; }
601   - .saude .box-title {
  623 + .saude .box-title, .saude .box-bottom {
602 624 color: #00a9bd; }
603 625 .saude .box-category li {
604 626 background-color: #00a9bd; }
... ... @@ -606,6 +628,15 @@ section.reducao-da-pobreza .description {
606 628 color: #00a9bd; }
607 629 .saude .slick-slider .date, .saude .slick-slider .time {
608 630 color: #00a9bd; }
  631 + .saude .login input, .saude .signup input {
  632 + border-color: #00a9bd; }
  633 + .saude .login input.button-cancela, .saude .login input.button, .saude .signup input.button-cancela, .saude .signup input.button {
  634 + transition: all 400ms; }
  635 + .saude .login input.button-cancela:hover, .saude .login input.button:hover, .saude .signup input.button-cancela:hover, .saude .signup input.button:hover {
  636 + background-color: #006571;
  637 + text-decoration: none; }
  638 + .saude .login i, .saude .signup i {
  639 + color: #00a9bd; }
609 640  
610 641 section.saude {
611 642 background-color: #00a9bd; }
... ... @@ -632,11 +663,11 @@ section.saude {
632 663  
633 664 .seguranca-publica {
634 665 color: #e34748; }
635   - .seguranca-publica .button, .seguranca-publica .show_body a {
  666 + .seguranca-publica .button, .seguranca-publica .button-cancela, .seguranca-publica .login input.button, .login .seguranca-publica input.button, .seguranca-publica .signup input.button, .signup .seguranca-publica input.button, .seguranca-publica .show_body a {
636 667 background-color: #e34748;
637 668 border-color: #c01d1e;
638 669 transition: all 400ms; }
639   - .seguranca-publica .button:hover, .seguranca-publica .show_body a:hover {
  670 + .seguranca-publica .button:hover, .seguranca-publica .button-cancela:hover, .seguranca-publica .show_body a:hover {
640 671 background-color: #c01d1e;
641 672 text-decoration: none; }
642 673 .seguranca-publica .select {
... ... @@ -645,7 +676,7 @@ section.saude {
645 676 background-color: #c01d1e; }
646 677 .seguranca-publica .box-propostas {
647 678 border-color: #e34748; }
648   - .seguranca-publica .box-title {
  679 + .seguranca-publica .box-title, .seguranca-publica .box-bottom {
649 680 color: #e34748; }
650 681 .seguranca-publica .box-category li {
651 682 background-color: #e34748; }
... ... @@ -653,6 +684,15 @@ section.saude {
653 684 color: #e34748; }
654 685 .seguranca-publica .slick-slider .date, .seguranca-publica .slick-slider .time {
655 686 color: #e34748; }
  687 + .seguranca-publica .login input, .seguranca-publica .signup input {
  688 + border-color: #e34748; }
  689 + .seguranca-publica .login input.button-cancela, .seguranca-publica .login input.button, .seguranca-publica .signup input.button-cancela, .seguranca-publica .signup input.button {
  690 + transition: all 400ms; }
  691 + .seguranca-publica .login input.button-cancela:hover, .seguranca-publica .login input.button:hover, .seguranca-publica .signup input.button-cancela:hover, .seguranca-publica .signup input.button:hover {
  692 + background-color: #c01d1e;
  693 + text-decoration: none; }
  694 + .seguranca-publica .login i, .seguranca-publica .signup i {
  695 + color: #e34748; }
656 696  
657 697 section.seguranca-publica {
658 698 background-color: #e34748; }
... ... @@ -679,11 +719,11 @@ section.seguranca-publica {
679 719  
680 720 .educacao {
681 721 color: #ffb400; }
682   - .educacao .button, .educacao .show_body a {
  722 + .educacao .button, .educacao .button-cancela, .educacao .login input.button, .login .educacao input.button, .educacao .signup input.button, .signup .educacao input.button, .educacao .show_body a {
683 723 background-color: #ffb400;
684 724 border-color: #b37e00;
685 725 transition: all 400ms; }
686   - .educacao .button:hover, .educacao .show_body a:hover {
  726 + .educacao .button:hover, .educacao .button-cancela:hover, .educacao .show_body a:hover {
687 727 background-color: #b37e00;
688 728 text-decoration: none; }
689 729 .educacao .select {
... ... @@ -692,7 +732,7 @@ section.seguranca-publica {
692 732 background-color: #b37e00; }
693 733 .educacao .box-propostas {
694 734 border-color: #ffb400; }
695   - .educacao .box-title {
  735 + .educacao .box-title, .educacao .box-bottom {
696 736 color: #ffb400; }
697 737 .educacao .box-category li {
698 738 background-color: #ffb400; }
... ... @@ -700,6 +740,15 @@ section.seguranca-publica {
700 740 color: #ffb400; }
701 741 .educacao .slick-slider .date, .educacao .slick-slider .time {
702 742 color: #ffb400; }
  743 + .educacao .login input, .educacao .signup input {
  744 + border-color: #ffb400; }
  745 + .educacao .login input.button-cancela, .educacao .login input.button, .educacao .signup input.button-cancela, .educacao .signup input.button {
  746 + transition: all 400ms; }
  747 + .educacao .login input.button-cancela:hover, .educacao .login input.button:hover, .educacao .signup input.button-cancela:hover, .educacao .signup input.button:hover {
  748 + background-color: #b37e00;
  749 + text-decoration: none; }
  750 + .educacao .login i, .educacao .signup i {
  751 + color: #ffb400; }
703 752  
704 753 section.educacao {
705 754 background-color: #ffb400; }
... ... @@ -726,11 +775,11 @@ section.educacao {
726 775  
727 776 .reducao-da-pobreza {
728 777 color: #51d0b3; }
729   - .reducao-da-pobreza .button, .reducao-da-pobreza .show_body a {
  778 + .reducao-da-pobreza .button, .reducao-da-pobreza .button-cancela, .reducao-da-pobreza .login input.button, .login .reducao-da-pobreza input.button, .reducao-da-pobreza .signup input.button, .signup .reducao-da-pobreza input.button, .reducao-da-pobreza .show_body a {
730 779 background-color: #51d0b3;
731 780 border-color: #2da78b;
732 781 transition: all 400ms; }
733   - .reducao-da-pobreza .button:hover, .reducao-da-pobreza .show_body a:hover {
  782 + .reducao-da-pobreza .button:hover, .reducao-da-pobreza .button-cancela:hover, .reducao-da-pobreza .show_body a:hover {
734 783 background-color: #2da78b;
735 784 text-decoration: none; }
736 785 .reducao-da-pobreza .select {
... ... @@ -739,7 +788,7 @@ section.educacao {
739 788 background-color: #2da78b; }
740 789 .reducao-da-pobreza .box-propostas {
741 790 border-color: #51d0b3; }
742   - .reducao-da-pobreza .box-title {
  791 + .reducao-da-pobreza .box-title, .reducao-da-pobreza .box-bottom {
743 792 color: #51d0b3; }
744 793 .reducao-da-pobreza .box-category li {
745 794 background-color: #51d0b3; }
... ... @@ -747,6 +796,15 @@ section.educacao {
747 796 color: #51d0b3; }
748 797 .reducao-da-pobreza .slick-slider .date, .reducao-da-pobreza .slick-slider .time {
749 798 color: #51d0b3; }
  799 + .reducao-da-pobreza .login input, .reducao-da-pobreza .signup input {
  800 + border-color: #51d0b3; }
  801 + .reducao-da-pobreza .login input.button-cancela, .reducao-da-pobreza .login input.button, .reducao-da-pobreza .signup input.button-cancela, .reducao-da-pobreza .signup input.button {
  802 + transition: all 400ms; }
  803 + .reducao-da-pobreza .login input.button-cancela:hover, .reducao-da-pobreza .login input.button:hover, .reducao-da-pobreza .signup input.button-cancela:hover, .reducao-da-pobreza .signup input.button:hover {
  804 + background-color: #2da78b;
  805 + text-decoration: none; }
  806 + .reducao-da-pobreza .login i, .reducao-da-pobreza .signup i {
  807 + color: #51d0b3; }
750 808  
751 809 section.reducao-da-pobreza {
752 810 background-color: #51d0b3; }
... ...
sass/novo.sass
  Diff comments   View file @21eda9d
... ... @@ -86,12 +86,13 @@ body
86 86 font-weight: 400
87 87 h1
88 88 border-bottom: 1px solid #d6dcd7
89   - color: $header-color
90 89 font-family: asap, sans
91 90 font-size: $font-size-h1
92 91 font-weight: 500
93 92 padding-bottom: $gutter
94 93 text-transform: uppercase
  94 + a
  95 + color: $header-color
95 96 h2
96 97 border-bottom: 1px solid #eeeff1
97 98 font-size: $font-size-h2
... ... @@ -138,7 +139,10 @@ p,ul,select
138 139 display: block
139 140 font-size: $font-size-base
140 141 font-weight: 700
141   - padding: $gutter 0
  142 + padding-bottom: $gutter * 0.75
  143 + padding-left: 0
  144 + padding-right: 0
  145 + padding-top: $gutter * 0.75
142 146 text-align: center
143 147 +hover(#000, 15%)
144 148 &:hover, &:focus
... ... @@ -147,6 +151,8 @@ p,ul,select
147 151 display: inline-block
148 152 padding-bottom: $gutter * 0.5 !important
149 153 padding-top: $gutter * 0.5 !important
  154 + &-cancela
  155 + @extend .button
150 156 &-send
151 157 span
152 158 padding-left: $gutter * 1.5
... ... @@ -363,9 +369,6 @@ p,ul,select
363 369 text-decoration: none
364 370 p
365 371 border-bottom: 1px dotted #000
366   - font-family: asap, sans
367   - font-size: $font-size-small
368   - font-weight: 400
369 372 padding-bottom: $gutter * 0.75
370 373 &-propostas
371 374 height: 500px
... ... @@ -378,7 +381,6 @@ p,ul,select
378 381 background-color: #fff
379 382 p
380 383 border-bottom: 0
381   - font-size: $font-size-small
382 384 padding-bottom: inherit
383 385 &-apoie
384 386 p
... ... @@ -407,6 +409,7 @@ p,ul,select
407 409 font-weight: 400
408 410 margin-bottom: $gutter
409 411 &-subtitle
  412 + color: $link-color
410 413 font-size: $theme-size-header
411 414 font-weight: 700
412 415 line-height: 1.2
... ... @@ -509,14 +512,32 @@ p,ul,select
509 512 text-transform: none
510 513  
511 514 // 6.9 - login form
512   -.login
  515 +.login,.signup
513 516 text-align: left
  517 + .message
  518 + background: #fcc
  519 + border: 1px solid #b00
  520 + border-radius: $radius
  521 + color: #b00
  522 + font-weight: 700
  523 + padding-bottom: $gutter * 0.25
  524 + padding-left: $gutter * 0.5
  525 + padding-right: $gutter * 0.5
  526 + padding-top: $gutter * 0.25
  527 + margin-bottom: $gutter
514 528 input
  529 + border: 1px solid
515 530 display: block
516 531 margin-bottom: $gutter
  532 + padding-bottom: $gutter * 0.25
  533 + padding-left: $gutter * 0.5
  534 + padding-right: $gutter * 0.5
  535 + padding-top: $gutter * 0.25
517 536 width: 100%
518 537 &.button
  538 + @extend .button
519 539 margin-bottom: $gutter * 0.25
  540 +
520 541 .label
521 542 vertical-align: middle
522 543 .icon
... ... @@ -530,6 +551,12 @@ p,ul,select
530 551 text-align: center
531 552 i
532 553 font-style: normal
  554 + font-weight: 700
  555 + padding-left: $gutter * 0.25
  556 + padding-right: $gutter * 0.25
  557 + .row
  558 + input
  559 + margin-bottom: 0
533 560  
534 561 // 6.10 - votacao
535 562 .vote-actions
... ... @@ -707,7 +734,7 @@ h3.titulo-destaque
707 734 .box
708 735 &-propostas
709 736 border-color: $color
710   - &-title
  737 + &-title,&-bottom
711 738 color: $color
712 739 &-category
713 740 li
... ... @@ -718,6 +745,13 @@ h3.titulo-destaque
718 745 &-slider
719 746 .date,.time
720 747 color: $color
  748 + .login,.signup
  749 + input
  750 + border-color: $color
  751 + &.button
  752 + +hover($color, 15%)
  753 + i
  754 + color: $color
721 755 section.#{$category}
722 756 background-color: $color
723 757 .category-#{$category}
... ...