From b3bcc701e34f84f870bb4a2e13fc696a0ec0a41e Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@gmail.com>
Date: Sun, 6 Sep 2015 14:35:56 -0300
Subject: [PATCH] Fix social icons

---
 src/app/components/navbar/navbar.html          | 12 ++++++------
 src/app/components/navbar/navbar.scss          | 18 ++++++++++++++++--
 src/app/index.scss                             | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 src/assets/images/icons/social-share-small.png | Bin 0 -> 902 bytes
 src/assets/images/icons/sprite.png             | Bin 107751 -> 0 bytes
 5 files changed, 66 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/images/icons/social-share-small.png

diff --git a/src/app/components/navbar/navbar.html b/src/app/components/navbar/navbar.html
index d5c59ee..e505ae7 100644
--- a/src/app/components/navbar/navbar.html
+++ b/src/app/components/navbar/navbar.html
@@ -23,35 +23,35 @@
         <!-- <li ui-sref-active="active"><a ui-sref="respostas">Respostas</a></li> -->
         <li role="separator" class="divider"><span>|</span></li>
         <li class="dropdown">
-          <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>
+          <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>
           <ul class="dropdown-menu">
             <li>
               <a social-facebook custom-url="http://dialoga.gov.br" title="Compartilhar no Facebook">
-                <span class="icon icon-social-facebook"></span>
+                <span class="icon-circle icon-small icon-circle-social-facebook"><span class="icon icon-social-facebook"></span></span>
                 <span class="sr-only">Compartilhar no Facebook</span>
               </a>
             </li>
             <li>
               <a social-twitter custom-url="http://dialoga.gov.br" status="This status is #{{ vm.status }}" title="Compartilhar no Twitter">
-                <span class="icon icon-social-twitter"></span>
+                <span class="icon-circle icon-small icon-circle-social-twitter"><span class="icon icon-social-twitter"></span></span>
                 <span class="sr-only">Compartilhar no Twitter</span>
               </a>
             </li>
             <li>
               <a social-gplus custom-url="http://dialoga.gov.br" title="Compartilhar no Google Plus">
-                <span class="icon icon-social-google-plus"></span>
+                <span class="icon-circle icon-small icon-circle-social-googleplus"><span class="icon icon-social-googleplus"></span></span>
                 <span class="sr-only">Compartilhar no Google Plus</span>
               </a>
             </li>
             <!-- <li>
               <a href="whatsapp://send?text=http%3A%2F%2Fdialoga.gov.br" target="_blank" title="Compartilhar no WhatsApp">
-                <span class="icon icon-social-whatsapp"></span>
+                <span class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span>
                 <span class="sr-only">Compartilhar no WhatsApp</span>
               </a>
             </li> -->
             <li>
               <a href="mailto:contato@dialoga.gov.br?subject=Conheça o Dialoga Brasil" title="Enviar por email">
-                <span class="icon icon-social-whatsapp"></span>
+                <span class="icon-circle icon-small icon-circle-social-whatsapp"><span class="icon icon-social-whatsapp"></span></span>
                 <span class="sr-only">Enviar por email</span>
               </a>
             </li>
diff --git a/src/app/components/navbar/navbar.scss b/src/app/components/navbar/navbar.scss
index b071a51..7bb6beb 100644
--- a/src/app/components/navbar/navbar.scss
+++ b/src/app/components/navbar/navbar.scss
@@ -61,23 +61,37 @@
             }
         }
 
+        .dropdown-toggle {
+            margin-top: 50px;
+        }
+
         .dropdown-menu {
-            min-width: 190px;
+            min-width: 200px;
+            background-color: #eee;
+            padding: 5px;
 
             li {
                 float: left;
                 padding: 0;
                 margin: 0;
                 width: 45px;
+                text-align: center;
 
                 & > a {
                     padding: 0;
                 }
 
                 &:first-child {
-                    margin-left: 5px;
+                    // margin-left: 5px;
                 }
             }
+            
+            .icon {
+                transform: scale(0.7);
+                position: relative;
+                top: -10px;
+                left: -10px;
+            }
         }
     }
 
diff --git a/src/app/index.scss b/src/app/index.scss
index c2436b3..eef5d76 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -133,7 +133,8 @@ body {
 }
 
 .icon {
-    display: block;
+    display: inline-block;
+    vertical-align: middle; 
 }
 
 .icon-wrapper-rounded {
@@ -141,11 +142,53 @@ body {
     border-radius: 100%;
 }
 
+.icon-circle {
+    display: inline-block;
+    vertical-align: middle;
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+    text-align: center;
+    // border: 1px solid #eee;
+    border-radius: 100%;
+    overflow: hidden;
+    
+    &.icon-small {
+        width: 35px;
+        height: 35px;
+    }
+
+    .vote_for &,
+    .next &,
+    .vote_against & {
+        padding-top: 12px;
+    }
+
+    .vote_for & {
+        background-color: #4AC97A;
+    }
+    .next & {
+        background-color: #EEB453;
+    }
+    .vote_against & {
+        background-color: #EC4C68;
+    }
+}
+
+.icon-circle-social-facebook {background-color: #537ab5; }
+.icon-circle-social-twitter {background-color: #77cbef; }
+.icon-circle-social-googleplus {background-color: #d23b00; }
+.icon-circle-social-whatsapp {background-color: #77cbef; }
+.icon-circle-social-youtube {background-color: #c63635; }
+.icon-circle-social-flickr {background-color: #eaeaea; }
+.icon-circle-mail {background-color: #ecb24e; }
+
 // Theme
 @each $category, $color in $categories {
     .#{$category} {
         .color-theme-fg { color: $color; }
         .color-theme-bg { background-color: $color;}
+        .color-theme-bg-darker { background-color: darken($color, 10%);}
 
         .contraste & .color-theme-fg { color: #fff; }
         .contraste & .color-theme-bg { background-color: #000;}
diff --git a/src/assets/images/icons/social-share-small.png b/src/assets/images/icons/social-share-small.png
new file mode 100644
index 0000000..716c234
Binary files /dev/null and b/src/assets/images/icons/social-share-small.png differ
diff --git a/src/assets/images/icons/sprite.png b/src/assets/images/icons/sprite.png
index 99f2296..404305b 100644
Binary files a/src/assets/images/icons/sprite.png and b/src/assets/images/icons/sprite.png differ
--
libgit2 0.21.2