Download as
Browse Code »

Commit b3bcc701e34f84f870bb4a2e13fc696a0ec0a41e

Authored by Leonardo Merlin
1 parent d1c174ad
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

Fix social icons

Showing 5 changed files with 66 additions and 9 deletions   Show diff stats
src/app/components/navbar/navbar.html
  Diff comments   View file @b3bcc70
... ... @@ -23,35 +23,35 @@
23 23 <!-- <li ui-sref-active="active"><a ui-sref="respostas">Respostas</a></li> -->
24 24 <li role="separator" class="divider"><span>|</span></li>
25 25 <li class="dropdown">
26   - <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span class="icon-circle"><span class="glyphicon glyphicon-share-alt"></span></span></a>
  26 + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Compartilhar <span class="icon icon-social-share-small"></span></a>
27 27 <ul class="dropdown-menu">
28 28 <li>
29 29 <a social-facebook custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook">
30   - <span class="icon icon-social-facebook"></span>
  30 + <span class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
31 31 <span class="sr-only">Compartilhar no Facebook</span>
32 32 </a>
33 33 </li>
34 34 <li>
35 35 <a social-twitter custom-url="http://dialoga.gov.br" status="This status is #{{ vm.status }}" title="Compartilhar no Twitter">
36   - <span class="icon icon-social-twitter"></span>
  36 + <span class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
37 37 <span class="sr-only">Compartilhar no Twitter</span>
38 38 </a>
39 39 </li>
40 40 <li>
41 41 <a social-gplus custom-url="http://dialoga.gov.br" title="Compartilhar no Google Plus">
42   - <span class="icon icon-social-google-plus"></span>
  42 + <span class="icon-circle icon-small icon-circle-social-googleplus"><span class="icon icon-social-googleplus"></span></span>
43 43 <span class="sr-only">Compartilhar no Google Plus</span>
44 44 </a>
45 45 </li>
46 46 <!-- <li>
47 47 <a href="whatsapp://send?text=http%3A%2F%2Fdialoga.gov.br" target="_blank" title="Compartilhar no WhatsApp">
48   - <span class="icon icon-social-whatsapp"></span>
  48 + <span class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span>
49 49 <span class="sr-only">Compartilhar no WhatsApp</span>
50 50 </a>
51 51 </li> -->
52 52 <li>
53 53 <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email">
54   - <span class="icon icon-social-whatsapp"></span>
  54 + <span class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span>
55 55 <span class="sr-only">Enviar por email</span>
56 56 </a>
57 57 </li>
... ...
src/app/components/navbar/navbar.scss
  Diff comments   View file @b3bcc70
... ... @@ -61,23 +61,37 @@
61 61 }
62 62 }
63 63  
  64 + .dropdown-toggle {
  65 + margin-top: 50px;
  66 + }
  67 +
64 68 .dropdown-menu {
65   - min-width: 190px;
  69 + min-width: 200px;
  70 + background-color: #eee;
  71 + padding: 5px;
66 72  
67 73 li {
68 74 float: left;
69 75 padding: 0;
70 76 margin: 0;
71 77 width: 45px;
  78 + text-align: center;
72 79  
73 80 & > a {
74 81 padding: 0;
75 82 }
76 83  
77 84 &:first-child {
78   - margin-left: 5px;
  85 + // margin-left: 5px;
79 86 }
80 87 }
  88 +
  89 + .icon {
  90 + transform: scale(0.7);
  91 + position: relative;
  92 + top: -10px;
  93 + left: -10px;
  94 + }
81 95 }
82 96 }
83 97  
... ...
src/app/index.scss
  Diff comments   View file @b3bcc70
... ... @@ -133,7 +133,8 @@ body {
133 133 }
134 134  
135 135 .icon {
136   - display: block;
  136 + display: inline-block;
  137 + vertical-align: middle;
137 138 }
138 139  
139 140 .icon-wrapper-rounded {
... ... @@ -141,11 +142,53 @@ body {
141 142 border-radius: 100%;
142 143 }
143 144  
  145 +.icon-circle {
  146 + display: inline-block;
  147 + vertical-align: middle;
  148 + width: 50px;
  149 + height: 50px;
  150 + font-size: 20px;
  151 + text-align: center;
  152 + // border: 1px solid #eee;
  153 + border-radius: 100%;
  154 + overflow: hidden;
  155 +
  156 + &.icon-small {
  157 + width: 35px;
  158 + height: 35px;
  159 + }
  160 +
  161 + .vote_for &,
  162 + .next &,
  163 + .vote_against & {
  164 + padding-top: 12px;
  165 + }
  166 +
  167 + .vote_for & {
  168 + background-color: #4AC97A;
  169 + }
  170 + .next & {
  171 + background-color: #EEB453;
  172 + }
  173 + .vote_against & {
  174 + background-color: #EC4C68;
  175 + }
  176 +}
  177 +
  178 +.icon-circle-social-facebook {background-color: #537ab5; }
  179 +.icon-circle-social-twitter {background-color: #77cbef; }
  180 +.icon-circle-social-googleplus {background-color: #d23b00; }
  181 +.icon-circle-social-whatsapp {background-color: #77cbef; }
  182 +.icon-circle-social-youtube {background-color: #c63635; }
  183 +.icon-circle-social-flickr {background-color: #eaeaea; }
  184 +.icon-circle-mail {background-color: #ecb24e; }
  185 +
144 186 // Theme
145 187 @each $category, $color in $categories {
146 188 .#{$category} {
147 189 .color-theme-fg { color: $color; }
148 190 .color-theme-bg { background-color: $color;}
  191 + .color-theme-bg-darker { background-color: darken($color, 10%);}
149 192  
150 193 .contraste & .color-theme-fg { color: #fff; }
151 194 .contraste & .color-theme-bg { background-color: #000;}
... ...
src/assets/images/icons/social-share-small.png 0 → 100644
View file @b3bcc70

902 Bytes
src/assets/images/icons/sprite.png
View file @b3bcc70

105 KB | W: | H:

106 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin