Commit b3bcc701e34f84f870bb4a2e13fc696a0ec0a41e
1 parent
d1c174ad
Exists in
master
and in
8 other branches
Fix social icons
Showing
5 changed files
with
66 additions
and
9 deletions
Show diff stats
src/app/components/navbar/navbar.html
| @@ -23,35 +23,35 @@ | @@ -23,35 +23,35 @@ | ||
| 23 | <!-- <li ui-sref-active="active"><a ui-sref="respostas">Respostas</a></li> --> | 23 | <!-- <li ui-sref-active="active"><a ui-sref="respostas">Respostas</a></li> --> |
| 24 | <li role="separator" class="divider"><span>|</span></li> | 24 | <li role="separator" class="divider"><span>|</span></li> |
| 25 | <li class="dropdown"> | 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 | <ul class="dropdown-menu"> | 27 | <ul class="dropdown-menu"> |
| 28 | <li> | 28 | <li> |
| 29 | <a social-facebook custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook"> | 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 | <span class="sr-only">Compartilhar no Facebook</span> | 31 | <span class="sr-only">Compartilhar no Facebook</span> |
| 32 | </a> | 32 | </a> |
| 33 | </li> | 33 | </li> |
| 34 | <li> | 34 | <li> |
| 35 | <a social-twitter custom-url="http://dialoga.gov.br" status="This status is #{{ vm.status }}" title="Compartilhar no Twitter"> | 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 | <span class="sr-only">Compartilhar no Twitter</span> | 37 | <span class="sr-only">Compartilhar no Twitter</span> |
| 38 | </a> | 38 | </a> |
| 39 | </li> | 39 | </li> |
| 40 | <li> | 40 | <li> |
| 41 | <a social-gplus custom-url="http://dialoga.gov.br" title="Compartilhar no Google Plus"> | 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 | <span class="sr-only">Compartilhar no Google Plus</span> | 43 | <span class="sr-only">Compartilhar no Google Plus</span> |
| 44 | </a> | 44 | </a> |
| 45 | </li> | 45 | </li> |
| 46 | <!-- <li> | 46 | <!-- <li> |
| 47 | <a href="whatsapp://send?text=http%3A%2F%2Fdialoga.gov.br" target="_blank" title="Compartilhar no WhatsApp"> | 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 | <span class="sr-only">Compartilhar no WhatsApp</span> | 49 | <span class="sr-only">Compartilhar no WhatsApp</span> |
| 50 | </a> | 50 | </a> |
| 51 | </li> --> | 51 | </li> --> |
| 52 | <li> | 52 | <li> |
| 53 | <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email"> | 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 | <span class="sr-only">Enviar por email</span> | 55 | <span class="sr-only">Enviar por email</span> |
| 56 | </a> | 56 | </a> |
| 57 | </li> | 57 | </li> |
src/app/components/navbar/navbar.scss
| @@ -61,23 +61,37 @@ | @@ -61,23 +61,37 @@ | ||
| 61 | } | 61 | } |
| 62 | } | 62 | } |
| 63 | 63 | ||
| 64 | + .dropdown-toggle { | ||
| 65 | + margin-top: 50px; | ||
| 66 | + } | ||
| 67 | + | ||
| 64 | .dropdown-menu { | 68 | .dropdown-menu { |
| 65 | - min-width: 190px; | 69 | + min-width: 200px; |
| 70 | + background-color: #eee; | ||
| 71 | + padding: 5px; | ||
| 66 | 72 | ||
| 67 | li { | 73 | li { |
| 68 | float: left; | 74 | float: left; |
| 69 | padding: 0; | 75 | padding: 0; |
| 70 | margin: 0; | 76 | margin: 0; |
| 71 | width: 45px; | 77 | width: 45px; |
| 78 | + text-align: center; | ||
| 72 | 79 | ||
| 73 | & > a { | 80 | & > a { |
| 74 | padding: 0; | 81 | padding: 0; |
| 75 | } | 82 | } |
| 76 | 83 | ||
| 77 | &:first-child { | 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
| @@ -133,7 +133,8 @@ body { | @@ -133,7 +133,8 @@ body { | ||
| 133 | } | 133 | } |
| 134 | 134 | ||
| 135 | .icon { | 135 | .icon { |
| 136 | - display: block; | 136 | + display: inline-block; |
| 137 | + vertical-align: middle; | ||
| 137 | } | 138 | } |
| 138 | 139 | ||
| 139 | .icon-wrapper-rounded { | 140 | .icon-wrapper-rounded { |
| @@ -141,11 +142,53 @@ body { | @@ -141,11 +142,53 @@ body { | ||
| 141 | border-radius: 100%; | 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 | // Theme | 186 | // Theme |
| 145 | @each $category, $color in $categories { | 187 | @each $category, $color in $categories { |
| 146 | .#{$category} { | 188 | .#{$category} { |
| 147 | .color-theme-fg { color: $color; } | 189 | .color-theme-fg { color: $color; } |
| 148 | .color-theme-bg { background-color: $color;} | 190 | .color-theme-bg { background-color: $color;} |
| 191 | + .color-theme-bg-darker { background-color: darken($color, 10%);} | ||
| 149 | 192 | ||
| 150 | .contraste & .color-theme-fg { color: #fff; } | 193 | .contraste & .color-theme-fg { color: #fff; } |
| 151 | .contraste & .color-theme-bg { background-color: #000;} | 194 | .contraste & .color-theme-bg { background-color: #000;} |
902 Bytes
src/assets/images/icons/sprite.png
