From 21eda9de823724389cf833d41d60407925a2b31b Mon Sep 17 00:00:00 2001
From: Augusto dos Anjos Almeida <augusto.almeida@serpro.gov.br>
Date: Mon, 25 May 2015 16:29:57 -0300
Subject: [PATCH] Login form

---
 index.html     |  31 ++++++++++++++++++++-----------
 novo.css       | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
 sass/novo.sass |  50 ++++++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 150 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index e8d2b1f..f6b90d6 100644
--- a/index.html
+++ b/index.html
@@ -353,7 +353,7 @@
             <a href="#" class="new-user button">Cadastre-se</a>
           </div>
         </div>
-        <p>Ou acesse:</p>
+        <p class="box-subtitle">Ou acesse:</p>
         <div class="username">
           <label for="user_name" class="label">Nome de Usuário / E-mail:</label>
           <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail">
@@ -375,6 +375,8 @@
         </div>
       </form>
       <form id="signup-form" class="signup hide" autocomplete="off">
+        <div class="message hide"></div>
+        <p class="box-subtitle">Cadastre-se</p>
         <div class="email">
           <label for="user_email" class="label">E-mail:</label>
           <input id="user_email" name="email" type="text" placeholder="E-mail">
@@ -383,18 +385,25 @@
           <label for="user_name" class="label">Nome de Usuário</label>
           <input id="user_name" name="login" type="text" placeholder="Nome do usuário">
         </div>
-        <div class="password">
-          <label for="user_password" class="label">Senha:</label>
-          <input id="user_password" name="password" type="password" placeholder="Senha">
-        </div>
-        <div class="password-confirmation">
-          <label for="user_password_confirmation" class="label">Confirme a senha:</label>
-          <input id="user_password_confirmation" name="password_confirmation" type="password" placeholder="Confirme a senha">
+        <div class="row">
+          <div class="password col-sm-6">
+            <label for="user_password" class="label">Senha:</label>
+            <input id="user_password" name="password" type="password" placeholder="Senha">
+          </div>
+          <div class="password-confirmation col-sm-6">
+            <label for="user_password_confirmation" class="label">Confirme a senha:</label>
+            <input id="user_password_confirmation" name="password_confirmation" type="password" placeholder="Confirme a senha">
+          </div>
         </div>
         <div class="actions">
-          <div class="message hide"></div>
-          <a href="#" class="confirm-signup">Confirmar</a>
-          <a href="#" class="cancel-signup">Cancelar</a>
+          <div class="row">
+            <div class="col-sm-4">
+              <a href="#" class="confirm-signup button">Confirmar</a>
+            </div>
+            <div class="col-sm-4">
+              <a href="#" class="cancel-signup button button-cancela">Cancelar</a>
+            </div>
+          </div>
         </div>
       </form>
     </script>
diff --git a/novo.css b/novo.css
index 2951c74..aeaed46 100644
--- a/novo.css
+++ b/novo.css
@@ -6,12 +6,13 @@ body {
 
 h1 {
   border-bottom: 1px solid #d6dcd7;
-  color: #03316f;
   font-family: asap, sans;
   font-size: 28px;
   font-weight: 500;
   padding-bottom: 20px;
   text-transform: uppercase; }
+  h1 a {
+    color: #03316f; }
 
 h2 {
   border-bottom: 1px solid #eeeff1;
@@ -41,7 +42,7 @@ p, ul, select {
 .container, .row {
   margin-bottom: 20px; }
 
-.button {
+.button, .button-cancela, .login input.button, .signup input.button {
   border-bottom: 3px solid #000;
   border-left: 0;
   border-right: 0;
@@ -52,13 +53,16 @@ p, ul, select {
   display: block;
   font-size: 16px;
   font-weight: 700;
-  padding: 20px 0;
+  padding-bottom: 15px;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 15px;
   text-align: center;
   transition: all 400ms; }
-  .button:hover {
+  .button:hover, .button-cancela:hover, .login input.button:hover, .signup input.button:hover {
     background-color: black;
     text-decoration: none; }
-  .button:hover, .button:focus {
+  .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 {
     color: #fff; }
   .button-inline {
     display: inline-block;
@@ -260,9 +264,6 @@ p, ul, select {
     text-decoration: none; }
   .box p {
     border-bottom: 1px dotted #000;
-    font-family: asap, sans;
-    font-size: 14px;
-    font-weight: 400;
     padding-bottom: 15px; }
   .box-propostas {
     height: 500px;
@@ -275,7 +276,6 @@ p, ul, select {
       background-color: #fff; }
     .box-propostas p {
       border-bottom: 0;
-      font-size: 14px;
       padding-bottom: inherit; }
   .box-apoie p {
     border-bottom: 0;
@@ -302,6 +302,7 @@ p, ul, select {
     font-weight: 400;
     margin-bottom: 20px; }
   .box-subtitle, .box-apoie p {
+    color: #335277;
     font-size: 24px;
     font-weight: 700;
     line-height: 1.2;
@@ -401,27 +402,48 @@ p, ul, select {
     padding-top: 5px;
     text-transform: none; }
 
-.login {
+.login, .signup {
   text-align: left; }
-  .login input {
+  .login .message, .signup .message {
+    background: #fcc;
+    border: 1px solid #b00;
+    border-radius: 6px;
+    color: #b00;
+    font-weight: 700;
+    padding-bottom: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 5px;
+    margin-bottom: 20px; }
+  .login input, .signup input {
+    border: 1px solid;
     display: block;
     margin-bottom: 20px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 5px;
     width: 100%; }
-    .login input.button {
+    .login input.button-cancela, .login input.button, .signup input.button-cancela, .signup input.button {
       margin-bottom: 5px; }
-  .login .label {
+  .login .label, .signup .label {
     vertical-align: middle; }
-  .login .icon {
+  .login .icon, .signup .icon {
     vertical-align: middle; }
-  .login .oauth {
+  .login .oauth, .signup .oauth {
     margin-top: 10px;
     text-align: right; }
-  .login .forgot-password {
+  .login .forgot-password, .signup .forgot-password {
     display: block;
     font-size: 14px;
     text-align: center; }
-  .login i {
-    font-style: normal; }
+  .login i, .signup i {
+    font-style: normal;
+    font-weight: 700;
+    padding-left: 5px;
+    padding-right: 5px; }
+  .login .row input, .signup .row input {
+    margin-bottom: 0; }
 
 .vote-actions .like {
   background: url(images/like.png) no-repeat;
@@ -585,11 +607,11 @@ section.reducao-da-pobreza .description {
 
 .saude {
   color: #00a9bd; }
-  .saude .button, .saude .show_body a {
+  .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 {
     background-color: #00a9bd;
     border-color: #006571;
     transition: all 400ms; }
-    .saude .button:hover, .saude .show_body a:hover {
+    .saude .button:hover, .saude .button-cancela:hover, .saude .show_body a:hover {
       background-color: #006571;
       text-decoration: none; }
   .saude .select {
@@ -598,7 +620,7 @@ section.reducao-da-pobreza .description {
     background-color: #006571; }
   .saude .box-propostas {
     border-color: #00a9bd; }
-  .saude .box-title {
+  .saude .box-title, .saude .box-bottom {
     color: #00a9bd; }
   .saude .box-category li {
     background-color: #00a9bd; }
@@ -606,6 +628,15 @@ section.reducao-da-pobreza .description {
     color: #00a9bd; }
   .saude .slick-slider .date, .saude .slick-slider .time {
     color: #00a9bd; }
+  .saude .login input, .saude .signup input {
+    border-color: #00a9bd; }
+    .saude .login input.button-cancela, .saude .login input.button, .saude .signup input.button-cancela, .saude .signup input.button {
+      transition: all 400ms; }
+      .saude .login input.button-cancela:hover, .saude .login input.button:hover, .saude .signup input.button-cancela:hover, .saude .signup input.button:hover {
+        background-color: #006571;
+        text-decoration: none; }
+  .saude .login i, .saude .signup i {
+    color: #00a9bd; }
 
 section.saude {
   background-color: #00a9bd; }
@@ -632,11 +663,11 @@ section.saude {
 
 .seguranca-publica {
   color: #e34748; }
-  .seguranca-publica .button, .seguranca-publica .show_body a {
+  .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 {
     background-color: #e34748;
     border-color: #c01d1e;
     transition: all 400ms; }
-    .seguranca-publica .button:hover, .seguranca-publica .show_body a:hover {
+    .seguranca-publica .button:hover, .seguranca-publica .button-cancela:hover, .seguranca-publica .show_body a:hover {
       background-color: #c01d1e;
       text-decoration: none; }
   .seguranca-publica .select {
@@ -645,7 +676,7 @@ section.saude {
     background-color: #c01d1e; }
   .seguranca-publica .box-propostas {
     border-color: #e34748; }
-  .seguranca-publica .box-title {
+  .seguranca-publica .box-title, .seguranca-publica .box-bottom {
     color: #e34748; }
   .seguranca-publica .box-category li {
     background-color: #e34748; }
@@ -653,6 +684,15 @@ section.saude {
     color: #e34748; }
   .seguranca-publica .slick-slider .date, .seguranca-publica .slick-slider .time {
     color: #e34748; }
+  .seguranca-publica .login input, .seguranca-publica .signup input {
+    border-color: #e34748; }
+    .seguranca-publica .login input.button-cancela, .seguranca-publica .login input.button, .seguranca-publica .signup input.button-cancela, .seguranca-publica .signup input.button {
+      transition: all 400ms; }
+      .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 {
+        background-color: #c01d1e;
+        text-decoration: none; }
+  .seguranca-publica .login i, .seguranca-publica .signup i {
+    color: #e34748; }
 
 section.seguranca-publica {
   background-color: #e34748; }
@@ -679,11 +719,11 @@ section.seguranca-publica {
 
 .educacao {
   color: #ffb400; }
-  .educacao .button, .educacao .show_body a {
+  .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 {
     background-color: #ffb400;
     border-color: #b37e00;
     transition: all 400ms; }
-    .educacao .button:hover, .educacao .show_body a:hover {
+    .educacao .button:hover, .educacao .button-cancela:hover, .educacao .show_body a:hover {
       background-color: #b37e00;
       text-decoration: none; }
   .educacao .select {
@@ -692,7 +732,7 @@ section.seguranca-publica {
     background-color: #b37e00; }
   .educacao .box-propostas {
     border-color: #ffb400; }
-  .educacao .box-title {
+  .educacao .box-title, .educacao .box-bottom {
     color: #ffb400; }
   .educacao .box-category li {
     background-color: #ffb400; }
@@ -700,6 +740,15 @@ section.seguranca-publica {
     color: #ffb400; }
   .educacao .slick-slider .date, .educacao .slick-slider .time {
     color: #ffb400; }
+  .educacao .login input, .educacao .signup input {
+    border-color: #ffb400; }
+    .educacao .login input.button-cancela, .educacao .login input.button, .educacao .signup input.button-cancela, .educacao .signup input.button {
+      transition: all 400ms; }
+      .educacao .login input.button-cancela:hover, .educacao .login input.button:hover, .educacao .signup input.button-cancela:hover, .educacao .signup input.button:hover {
+        background-color: #b37e00;
+        text-decoration: none; }
+  .educacao .login i, .educacao .signup i {
+    color: #ffb400; }
 
 section.educacao {
   background-color: #ffb400; }
@@ -726,11 +775,11 @@ section.educacao {
 
 .reducao-da-pobreza {
   color: #51d0b3; }
-  .reducao-da-pobreza .button, .reducao-da-pobreza .show_body a {
+  .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 {
     background-color: #51d0b3;
     border-color: #2da78b;
     transition: all 400ms; }
-    .reducao-da-pobreza .button:hover, .reducao-da-pobreza .show_body a:hover {
+    .reducao-da-pobreza .button:hover, .reducao-da-pobreza .button-cancela:hover, .reducao-da-pobreza .show_body a:hover {
       background-color: #2da78b;
       text-decoration: none; }
   .reducao-da-pobreza .select {
@@ -739,7 +788,7 @@ section.educacao {
     background-color: #2da78b; }
   .reducao-da-pobreza .box-propostas {
     border-color: #51d0b3; }
-  .reducao-da-pobreza .box-title {
+  .reducao-da-pobreza .box-title, .reducao-da-pobreza .box-bottom {
     color: #51d0b3; }
   .reducao-da-pobreza .box-category li {
     background-color: #51d0b3; }
@@ -747,6 +796,15 @@ section.educacao {
     color: #51d0b3; }
   .reducao-da-pobreza .slick-slider .date, .reducao-da-pobreza .slick-slider .time {
     color: #51d0b3; }
+  .reducao-da-pobreza .login input, .reducao-da-pobreza .signup input {
+    border-color: #51d0b3; }
+    .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 {
+      transition: all 400ms; }
+      .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 {
+        background-color: #2da78b;
+        text-decoration: none; }
+  .reducao-da-pobreza .login i, .reducao-da-pobreza .signup i {
+    color: #51d0b3; }
 
 section.reducao-da-pobreza {
   background-color: #51d0b3; }
diff --git a/sass/novo.sass b/sass/novo.sass
index 2985a65..39d3bf4 100644
--- a/sass/novo.sass
+++ b/sass/novo.sass
@@ -86,12 +86,13 @@ body
   font-weight: 400
 h1
   border-bottom: 1px solid #d6dcd7
-  color: $header-color
   font-family: asap, sans
   font-size: $font-size-h1
   font-weight: 500
   padding-bottom: $gutter
   text-transform: uppercase
+  a
+    color: $header-color
 h2
   border-bottom: 1px solid #eeeff1
   font-size: $font-size-h2
@@ -138,7 +139,10 @@ p,ul,select
   display: block
   font-size: $font-size-base
   font-weight: 700
-  padding: $gutter 0
+  padding-bottom: $gutter * 0.75
+  padding-left: 0
+  padding-right: 0
+  padding-top: $gutter * 0.75
   text-align: center
   +hover(#000, 15%)
   &:hover, &:focus
@@ -147,6 +151,8 @@ p,ul,select
     display: inline-block
     padding-bottom: $gutter * 0.5 !important
     padding-top: $gutter * 0.5 !important
+  &-cancela
+    @extend .button
   &-send
     span
       padding-left: $gutter * 1.5
@@ -363,9 +369,6 @@ p,ul,select
     text-decoration: none
   p
     border-bottom: 1px dotted #000
-    font-family: asap, sans
-    font-size: $font-size-small
-    font-weight: 400
     padding-bottom: $gutter * 0.75
   &-propostas
     height: 500px
@@ -378,7 +381,6 @@ p,ul,select
       background-color: #fff
     p
       border-bottom: 0
-      font-size: $font-size-small
       padding-bottom: inherit
   &-apoie
     p
@@ -407,6 +409,7 @@ p,ul,select
     font-weight: 400
     margin-bottom: $gutter
   &-subtitle
+    color: $link-color
     font-size: $theme-size-header
     font-weight: 700
     line-height: 1.2
@@ -509,14 +512,32 @@ p,ul,select
     text-transform: none
 
 // 6.9 - login form
-.login
+.login,.signup
   text-align: left
+  .message
+    background: #fcc
+    border: 1px solid #b00
+    border-radius: $radius
+    color: #b00
+    font-weight: 700
+    padding-bottom: $gutter * 0.25
+    padding-left: $gutter * 0.5
+    padding-right: $gutter * 0.5
+    padding-top: $gutter * 0.25
+    margin-bottom: $gutter
   input
+    border: 1px solid
     display: block
     margin-bottom: $gutter
+    padding-bottom: $gutter * 0.25
+    padding-left: $gutter * 0.5
+    padding-right: $gutter * 0.5
+    padding-top: $gutter * 0.25
     width: 100%
     &.button
+      @extend .button
       margin-bottom: $gutter * 0.25
+
   .label
     vertical-align: middle
   .icon
@@ -530,6 +551,12 @@ p,ul,select
     text-align: center
   i
     font-style: normal
+    font-weight: 700
+    padding-left: $gutter * 0.25
+    padding-right: $gutter * 0.25
+  .row
+    input
+      margin-bottom: 0
 
 // 6.10 - votacao
 .vote-actions
@@ -707,7 +734,7 @@ h3.titulo-destaque
     .box
       &-propostas
         border-color: $color
-      &-title
+      &-title,&-bottom
         color: $color
       &-category
         li
@@ -718,6 +745,13 @@ h3.titulo-destaque
       &-slider
         .date,.time
           color: $color
+    .login,.signup
+      input
+        border-color: $color
+        &.button
+          +hover($color, 15%)
+      i
+        color: $color
   section.#{$category}
     background-color: $color
   .category-#{$category}
--
libgit2 0.21.2