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 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 186 .icon {
... ... @@ -212,8 +205,15 @@ body {
212 205 overflow: hidden;
213 206  
214 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 219 .vote_for &,
... ...
src/app/pages/auth/auth.scss
  Diff comments   View file @ea32dcf
... ... @@ -25,6 +25,14 @@
25 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 36 @media (max-width: 991px) {
29 37 margin-bottom: 20px;
30 38 }
... ... @@ -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 54 .separator {
69 55 border-top: 2px solid #d8d8d8;
70 56 text-align: center;
... ...
src/app/pages/auth/signin.html
  Diff comments   View file @ea32dcf
... ... @@ -26,7 +26,7 @@
26 26 </div>
27 27 </div>
28 28 <div ng-if="!pageSignin.currentUser">
29   - <div class="col-sm-6">
  29 + <div class="col-sm-5">
30 30 <div class="row">
31 31 <div class="col-md-12">
32 32 <h2>Já possui cadastro</h2>
... ... @@ -50,38 +50,30 @@
50 50 </div>
51 51 <div class="row">
52 52 <div class="col-md-12">
53   - <hr class="separator separator-or"></hr>
  53 + <hr class="separator separator-or"/>
54 54 </div>
55 55 </div>
56 56 <div class="row">
57   - <div class="col-md-5">
  57 + <div class="col-xs-6">
58 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 62 <span class="text">Entrar com Facebook</span>
68 63 </button>
69 64 </div>
70   - <div class="col-md-5">
  65 + <div class="col-xs-6">
71 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 70 <span class="text">Entrar com Google+</span>
81 71 </button>
82 72 </div>
83 73 </div>
84 74 </div>
  75 + <div class="col-sm-1">
  76 + </div>
85 77 <div class="col-sm-6">
86 78 <div class="row">
87 79 <div class="col-sm-12">
... ... @@ -92,30 +84,20 @@
92 84 </div>
93 85 </div>
94 86 <div class="row">
95   - <div class="col-md-6">
  87 + <div class="col-xs-6">
96 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 93 </button>
107 94 </div>
108   - <div class="col-md-6">
  95 + <div class="col-xs-6">
109 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 101 </button>
120 102 </div>
121 103 </div>
... ...