Download as
Browse Code »

Commit ea32dcff30168711c6e260dd91f1c61dec3944e5

Authored by Leonardo Merlin
1 parent cec34540
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Update social buttons

Showing 3 changed files with 39 additions and 71 deletions   Show diff stats
src/app/index.scss
  Diff comments   View file @ea32dcf
@@ -181,13 +181,6 @@ body { @@ -181,13 +181,6 @@ body {
181 // margin-left: 5px; 181 // margin-left: 5px;
182 } 182 }
183 } 183 }
184 -  
185 - .icon {  
186 - transform: scale(0.7);  
187 - position: relative;  
188 - top: -10px;  
189 - left: -10px;  
190 - }  
191 } 184 }
192 185
193 .icon { 186 .icon {
@@ -212,8 +205,15 @@ body { @@ -212,8 +205,15 @@ body {
212 overflow: hidden; 205 overflow: hidden;
213 206
214 &.icon-small { 207 &.icon-small {
215 - width: 35px;  
216 - height: 35px; 208 + width: 40px;
  209 + height: 40px;
  210 +
  211 + .icon {
  212 + // transform: scale(0.7);
  213 + position: relative;
  214 + top: -8px;
  215 + left: -8px;
  216 + }
217 } 217 }
218 218
219 .vote_for &, 219 .vote_for &,
src/app/pages/auth/auth.scss
  Diff comments   View file @ea32dcf
@@ -25,6 +25,14 @@ @@ -25,6 +25,14 @@
25 &:active {background-color: #b92d25; } 25 &:active {background-color: #b92d25; }
26 } 26 }
27 27
  28 + .text {
  29 + text-align: left;
  30 + width: 50%;
  31 + display: inline-block;
  32 + vertical-align: middle;
  33 + float: none;
  34 + }
  35 +
28 @media (max-width: 991px) { 36 @media (max-width: 991px) {
29 margin-bottom: 20px; 37 margin-bottom: 20px;
30 } 38 }
@@ -43,28 +51,6 @@ @@ -43,28 +51,6 @@
43 } 51 }
44 } 52 }
45 53
46 - .glyphicon {  
47 - &.icon-white {  
48 - fill: white;  
49 - }  
50 - }  
51 -  
52 - .border-social-icon {  
53 - border-radius: 25px;  
54 - padding: 7px 9px;  
55 - width: 40px;  
56 - height: 40px;  
57 - display: inline-block;  
58 -  
59 - &.border-social-facebook {  
60 - background: #547BBC;  
61 - }  
62 -  
63 - &.border-social-googlePlus {  
64 - background: #D44105;  
65 - }  
66 - }  
67 -  
68 .separator { 54 .separator {
69 border-top: 2px solid #d8d8d8; 55 border-top: 2px solid #d8d8d8;
70 text-align: center; 56 text-align: center;
src/app/pages/auth/signin.html
  Diff comments   View file @ea32dcf
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 </div> 26 </div>
27 </div> 27 </div>
28 <div ng-if="!pageSignin.currentUser"> 28 <div ng-if="!pageSignin.currentUser">
29 - <div class="col-sm-6"> 29 + <div class="col-sm-5">
30 <div class="row"> 30 <div class="row">
31 <div class="col-md-12"> 31 <div class="col-md-12">
32 <h2>Já possui cadastro</h2> 32 <h2>Já possui cadastro</h2>
@@ -50,38 +50,30 @@ @@ -50,38 +50,30 @@
50 </div> 50 </div>
51 <div class="row"> 51 <div class="row">
52 <div class="col-md-12"> 52 <div class="col-md-12">
53 - <hr class="separator separator-or"></hr> 53 + <hr class="separator separator-or"/>
54 </div> 54 </div>
55 </div> 55 </div>
56 <div class="row"> 56 <div class="row">
57 - <div class="col-md-5"> 57 + <div class="col-xs-6">
58 <button type="button" class="btn btn-lg btn-block btn-social btn-facebook"> 58 <button type="button" class="btn btn-lg btn-block btn-social btn-facebook">
59 - <div class="border-social-icon border-social-facebook">  
60 - <span class="glyphicon icon-google-plus icon-white" aria-hidden="true">  
61 - <!-- Facebook -->  
62 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25">  
63 - <path d="M18 32L12 32 12 16l-4 0 0-5.5 4 0 0-3.2C12 2.7 13.2 0 18.5 0l4.4 0 0 5.5 -2.8 0c-2.1 0-2.2 0.8-2.2 2.2l0 2.8 5 0 -0.6 5.5L18 16 18 32z"/>  
64 - </svg>  
65 - </span>  
66 - </div> 59 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook">
  60 + <span class="icon icon-social-facebook"></span>
  61 + </span>
67 <span class="text">Entrar com Facebook</span> 62 <span class="text">Entrar com Facebook</span>
68 </button> 63 </button>
69 </div> 64 </div>
70 - <div class="col-md-5"> 65 + <div class="col-xs-6">
71 <button type="button" class="btn btn-lg btn-block btn-social btn-google-plus"> 66 <button type="button" class="btn btn-lg btn-block btn-social btn-google-plus">
72 - <div class="border-social-icon border-social-googlePlus">  
73 - <span class="glyphicon icon-google-plus icon-white" aria-hidden="true">  
74 - <!-- Google Plus -->  
75 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25">  
76 - <path d="M17.5 2c0 0-6.3 0-8.4 0C5.3 2 1.8 4.8 1.8 8.1c0 3.4 2.6 6.1 6.4 6.1 0.3 0 0.5 0 0.8 0 -0.2 0.5-0.4 1-0.4 1.6 0 0.9 0.5 1.7 1.1 2.3 -0.5 0-0.9 0-1.5 0C3.6 18.1 0 21.1 0 24.1c0 3 3.9 4.9 8.6 4.9 5.3 0 8.2-3 8.2-6 0-2.4-0.7-3.9-2.9-5.4 -0.8-0.5-2.2-1.8-2.2-2.6 0-0.9 0.3-1.3 1.6-2.4 1.4-1.1 2.4-2.6 2.4-4.4 0-2.1-0.9-4.2-2.7-4.8l2.7 0L17.5 2zM14.5 22.5c0.1 0.3 0.1 0.6 0.1 0.9 0 2.4-1.6 4.4-6.1 4.4 -3.2 0-5.5-2-5.5-4.5 0-2.4 2.9-4.4 6.1-4.4 0.8 0 1.4 0.1 2.1 0.3C12.9 20.4 14.2 21.1 14.5 22.5zM9.4 13.4c-2.2-0.1-4.2-2.4-4.6-5.2 -0.4-2.8 1.1-5 3.2-4.9 2.2 0.1 4.2 2.3 4.6 5.2C13 11.2 11.6 13.4 9.4 13.4zM26 8L26 2 24 2 24 8 18 8 18 10 24 10 24 16 26 16 26 10 32 10 32 8z"/>  
77 - </svg>  
78 - </span>  
79 - </div> 67 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-googleplus">
  68 + <span class="icon icon-social-googleplus"></span>
  69 + </span>
80 <span class="text">Entrar com Google+</span> 70 <span class="text">Entrar com Google+</span>
81 </button> 71 </button>
82 </div> 72 </div>
83 </div> 73 </div>
84 </div> 74 </div>
  75 + <div class="col-sm-1">
  76 + </div>
85 <div class="col-sm-6"> 77 <div class="col-sm-6">
86 <div class="row"> 78 <div class="row">
87 <div class="col-sm-12"> 79 <div class="col-sm-12">
@@ -92,30 +84,20 @@ @@ -92,30 +84,20 @@
92 </div> 84 </div>
93 </div> 85 </div>
94 <div class="row"> 86 <div class="row">
95 - <div class="col-md-6"> 87 + <div class="col-xs-6">
96 <button type="button" class="btn btn-lg btn-block btn-social btn-facebook"> 88 <button type="button" class="btn btn-lg btn-block btn-social btn-facebook">
97 - <div class="border-social-icon border-social-facebook">  
98 - <span class="glyphicon icon-google-plus icon-white" aria-hidden="true">  
99 - <!-- Google Plus -->  
100 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25">  
101 - <path d="M18 32L12 32 12 16l-4 0 0-5.5 4 0 0-3.2C12 2.7 13.2 0 18.5 0l4.4 0 0 5.5 -2.8 0c-2.1 0-2.2 0.8-2.2 2.2l0 2.8 5 0 -0.6 5.5L18 16 18 32z"/>  
102 - </svg>  
103 - </span>  
104 - </div>  
105 - <span class="text">Conectar pelo Facebook</span> 89 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-facebook">
  90 + <span class="icon icon-social-facebook"></span>
  91 + </span>
  92 + <span class="text">Entrar com Facebook</span>
106 </button> 93 </button>
107 </div> 94 </div>
108 - <div class="col-md-6"> 95 + <div class="col-xs-6">
109 <button type="button" class="btn btn-lg btn-block btn-social btn-google-plus"> 96 <button type="button" class="btn btn-lg btn-block btn-social btn-google-plus">
110 - <div class="border-social-icon border-social-googlePlus">  
111 - <span class="glyphicon icon-google-plus icon-white" aria-hidden="true">  
112 - <!-- Google Plus -->  
113 - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="25" height="25">  
114 - <path d="M17.5 2c0 0-6.3 0-8.4 0C5.3 2 1.8 4.8 1.8 8.1c0 3.4 2.6 6.1 6.4 6.1 0.3 0 0.5 0 0.8 0 -0.2 0.5-0.4 1-0.4 1.6 0 0.9 0.5 1.7 1.1 2.3 -0.5 0-0.9 0-1.5 0C3.6 18.1 0 21.1 0 24.1c0 3 3.9 4.9 8.6 4.9 5.3 0 8.2-3 8.2-6 0-2.4-0.7-3.9-2.9-5.4 -0.8-0.5-2.2-1.8-2.2-2.6 0-0.9 0.3-1.3 1.6-2.4 1.4-1.1 2.4-2.6 2.4-4.4 0-2.1-0.9-4.2-2.7-4.8l2.7 0L17.5 2zM14.5 22.5c0.1 0.3 0.1 0.6 0.1 0.9 0 2.4-1.6 4.4-6.1 4.4 -3.2 0-5.5-2-5.5-4.5 0-2.4 2.9-4.4 6.1-4.4 0.8 0 1.4 0.1 2.1 0.3C12.9 20.4 14.2 21.1 14.5 22.5zM9.4 13.4c-2.2-0.1-4.2-2.4-4.6-5.2 -0.4-2.8 1.1-5 3.2-4.9 2.2 0.1 4.2 2.3 4.6 5.2C13 11.2 11.6 13.4 9.4 13.4zM26 8L26 2 24 2 24 8 18 8 18 10 24 10 24 16 26 16 26 10 32 10 32 8z"/>  
115 - </svg>  
116 - </span>  
117 - </div>  
118 - <span class="text">Conectar pelo Google+</span> 97 + <span aria-hidden="true" class="icon-circle icon-small icon-circle-social-googleplus">
  98 + <span class="icon icon-social-googleplus"></span>
  99 + </span>
  100 + <span class="text">Entrar com Google+</span>
119 </button> 101 </button>
120 </div> 102 </div>
121 </div> 103 </div>