the glory.. and majesty.. of compass sprites.

Signed-off-by: Ian Jennings <[email protected]>
spacecowboyian · Nov 7, 2013 · 34ad723 · 34ad723
1 parent 8fe8ca7
commit 34ad723
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 8 deletions.
diff --git a/app/images/facebook-16.png → app/images/icons/facebook-16.png b/app/images/facebook-16.png → app/images/icons/facebook-16.png
diff --git a/app/images/facebook-24.png → app/images/icons/facebook-24.png b/app/images/facebook-24.png → app/images/icons/facebook-24.png
diff --git a/app/images/twitter-16.png → app/images/icons/twitter-16.png b/app/images/twitter-16.png → app/images/icons/twitter-16.png
diff --git a/app/images/twitter-24.png → app/images/icons/twitter-24.png b/app/images/twitter-24.png → app/images/icons/twitter-24.png
diff --git a/app/styles/login.scss b/app/styles/login.scss
@@ -54,15 +54,17 @@
             background:#3b5998;
 
             .icon{
-                background-image:url(../images/facebook-24.png);
+                @extend .icons-facebook-24;
+                @include sprite-background-position($icons-sprites, facebook-24, 5px, 6px);
             }
         }
 
         &.btn-signin-twitter{
             background:#00acee;
 
             .icon{
-                background-image:url(../images/twitter-24.png);
+                @extend .icons-twitter-24;
+                @include sprite-background-position($icons-sprites, twitter-24, 6px, 5px);
             }
         }
     }

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -11,9 +11,12 @@ $almostWhite: rgba($black,.04);
 @import 'compass';
 @import 'responsive';
 @import 'mixins/triangle';
-@import 'login';
 
+$icons-spacing: 20px;
+@import '../images/icons/*.png';
+@include all-icons-sprites;
 
+@import 'login';
 
 
 $green: green;
@@ -78,16 +81,17 @@ button {
         width:16px;
         height:16px;
         background-repeat:no-repeat;
-        margin-left:3px;
+        margin: 0 0 0 3px;
+
 
         &.icon-tw-white{
-            background-image:url(../images/twitter-16.png);
-            background-position:0px 2px;
+            @extend .icons-twitter-16;
+            @include sprite-background-position($icons-sprites, twitter-16, 0, 2px);
         }
 
         &.icon-fb-white{
-            background-image:url(../images/facebook-16.png);
-            background-position:0px 1px;
+            @extend .icons-facebook-16;
+            @include sprite-background-position($icons-sprites, facebook-16, 0, 1px);
         }
     }
 }