zocial 0.0.1 → 0.0.2

data/lib/zocial.rb

@@ -3,7 +3,7 @@ Compass::Frameworks.register("zocial", :path => "#{File.dirname(__FILE__)}/..")
 
 module Zocial
   
-  VERSION = "0.0.1"
-  DATE = "2011-09-24"
+  VERSION = "0.0.2"
+  DATE = "2011-09-27"
 
 end

data/stylesheets/_zocial.sass

@@ -1,463 +1,17 @@
-// Defaults
+// Hey Compass!
+@import "compass"
+
+// Default variables
 $zocial-font-size: 1.8em !default
+$zocial-font-weight: bold !default
 $zocial-icon-font: zocial-lite !default
 $zocial-icon-default: "-" !default
 $zocial-text-font: helvetica !default
 
-@import "fonts"
-
-=zocial
-  .zocial, .zocial > span
-    +border-radius(0.2em)
-    position: relative
-
-  // Button Structure
-  .zocial
-    +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
-    +font-family($zocial-text-font)
-    +text-shadow(0 1px 0 rgba(#000,.5))
-    position: relative
-    border: 1px solid rgba(#000,.2)
-    border-bottom-color: rgba(#000,.4)
-    color: #fff !important
-    cursor: pointer
-    display: inline-block
-    font-size: $zocial-font-size
-    outline: none
-    padding: 0
-    text-decoration: none !important
-    
-    // Misc
-    button::-moz-focus-inner
-      border: 0
-      padding: 0
-
-    // These buttons can be displayed as standalone icons if you also add a class of "icon"
-    &.icon
-      width: 1.85em
-      overflow: hidden
-
-    & > span
-      position: relative
-      display: inline-block
-      font-size: 80%
-      font-weight: bold
-      line-height: 2em
-      padding-right: 0.825em
-      white-space: nowrap
-      &:before
-        +box-shadow(0.075em 0 0 rgba(#fff,.25))
-        +font-family($zocial-icon-font)
-        border-right: 0.075em solid rgba(#000,.1)
-        display: block
-        float: left
-        font-size: 125%
-        font-style: normal
-        font-weight: normal
-        margin: 0.0675em 0.5em 0 0
-        text-align: center
-        width: 1.75em
-
-    // Gradient default
-    & > span
-      +background(linear-gradient(top, rgba(#fff,.1), rgba(#fff,.05) 49%, rgba(#000,.05) 51%, rgba(#000,.1)))
-
-    // Gradient hover and focus
-    &:hover > span, &:focus > span
-      +background(linear-gradient(top, rgba(#fff,.15), rgba(#fff,.15) 49%, rgba(#000,.1) 51%, rgba(#000,.15)))
-
-    // Gradient active/clicked
-    &:active > span
-      +background(linear-gradient(bottom, rgba(#fff,.1), rgba(#fff, 0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))
-
-    // Adjustments for light background buttons
-    &.white, &.twitter, &.github
-      +text-shadow(0 1px 0 rgba(#fff,.8))
-      +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
-
-    &.github:hover > span, &.twitter:focus > span, &.github:focus > span
-      +background(linear-gradient(top, rgba(#fff,.5), rgba(#fff,.2) 49%, rgba(#000,.05) 51%, rgba(#000,.15)))
-
-    &.twitter:active > span, &.github:active > span
-      +background(linear-gradient(bottom, rgba(#fff,0), rgba(#fff,0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))
-
-    // Assumes full set if the icon-font is zocial
-    @if $zocial-icon-font == "zocial"
-      // Adjustments for light background buttons
-      &.plancast, &.posterous, &.dropbox, &.openid, &.instapaper, &.wikipedia, &.cloudapp, &.gmail
-        +text-shadow(0 1px 0 rgba(#fff,.8))
-        +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
-
-      &.plancast:hover > span, &.posterous:hover > span, &.dropbox:hover > span, &.openid:hover > span, &.instapaper:hover > span, &.github:hover > span, &.wikipedia:hover > span, &.gmail:hover > span,
-      &.plancast:focus > span, &.posterous:focus > span, &.dropbox:focus > span, &.openid:focus > span, &.instapaper:focus > span, &.github:focus > span, &.wikipedia:focus > span, &.gmail:focus > span
-        +background(linear-gradient(top, rgba(#fff,.5), rgba(#fff,.2) 49%, rgba(#000,.05) 51%, rgba(#000,.15)))
-
-      &.plancast:active > span, &.posterous:active > span, &.dropbox:active > span, &.openid:active > span, &.instapaper:active > span, &.wikipedia:active > span, &.gmail:active > span
-        +background(linear-gradient(bottom, rgba(#fff,0), rgba(#fff,0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))
-
-
-    // Default
-    & > span:before
-      content: $zocial-icon-default
-    
-    // Basic colors + content
-    &.white
-      background: #fff
-      color: #000 !important
-      &  > span:before
-        content: $zocial-icon-default
-        color: #000
-    &.black
-      background: #000
-      color: #fff !important
-      &  > span:before
-        content: $zocial-icon-default
-        color: #fff
-    &.red
-      background: red
-      color: #fff !important
-      &  > span:before
-        content: $zocial-icon-default
-        color: #fff
-    &.green
-      background: green
-      color: #fff !important
-      &  > span:before
-        content: $zocial-icon-default
-        color: #fff
-    &.blue
-      background: blue
-      color: #fff !important
-      &  > span:before
-        content: $zocial-icon-default
-        color: #fff
-
-    // Icons
-    &.facebook > span:before
-      content: "f"
-    &.github > span:before
-      content: "g"
-    &.googleplus > span:before
-      content: "+"
-    &.rss > span:before
-      content: "R"
-    &.smashingmag > span:before
-      content: "*"
-    &.twitter > span:before
-      content: "T"
-    
-    // Assumes full set if the icon-font is zocial
-    @if $zocial-icon-font == "zocial"
-      &.google > span:before
-        content: "G"
-
-      &.linkedin > span:before
-        content: "L"
-
-      &.meetup > span:before
-        content: "M"
-
-      &.plancast > span:before
-        content: "P"
-
-      &.soundcloud > span:before
-        content: "s"
-
-      &.tumblr > span:before
-        content: "t"
-
-      &.dribbble > span:before
-        content: "D"
-
-      &.forrst > span:before
-        content: ":"
-        color: #50894F
-
-      &.dropbox > span:before
-        content: "d"
-        color: #4EA4E3
-
-      &.posterous > span:before
-        content: "~"
-
-      &.flattr > span:before
-        content: "%"
-
-      &.spotify > span:before
-        content: "="
-
-      &.foursquare > span:before
-        content: "4"
-
-      &.intensedebate > span:before
-        content: "{"
-
-      &.wordpress > span:before
-        content: "w"
-
-      &.yahoo > span:before
-        content: "Y"
-
-      &.openid > span:before
-        content: "o"
-        color: #FF921D
-
-      &.guest > span:before
-        content: "?"
-
-      &.instapaper > span:before
-        content: "I"
-
-      &.android > span:before
-        content: "&"
-
-      &.itunes > span:before
-        content: "A"
-
-      &.paypal > span:before
-        content: "$"
-
-      &.appstore > span:before
-        content: "^"
-
-      &.creativecommons > span:before
-        content: "C"
-
-      &.disqus > span:before
-        content: "Q"
-
-      &.eventasaurus > span:before
-        content: "v"
-
-      &.eventbrite > span:before
-        content: "|"
-
-      &.chrome > span:before
-        content: "["
-
-      &.html5 > span:before
-        content: "5"
-
-      &.songkick > span:before
-        content: "k"
-
-      &.vimeo > span:before
-        content: "V"
-
-      &.youtube > span:before
-        content: "U"
-
-      &.gowalla > span:before
-        content: "@"
-
-      &.skype > span:before
-        content: "S"
-
-      &.aol > span:before
-        content: "\""
-
-      &.wikipedia > span:before
-        content: ","
-
-      &.yelp > span:before
-        content: "y"
-
-      &.evernote > span:before
-        content: "E"
-
-      &.ie > span:before
-        content: "6"
-
-      &.cloudapp > span:before
-        content: "c"
-
-      &.gmail > span:before
-        content: "m"
-        color: #ff0000
-
-      &.amazon > span:before
-        content: "a"
-
-      &.lastfm > span:before
-        content: "l"
-
-    // Colors
-    &.github
-      color: #050505 !important
-      background: #FBFBFB
-    &.googleplus
-      background: #282626
-    &.googleplus:before
-      content: ""
-      display: block
-      height: 0.2em
-      margin-bottom: -0.1em
-      width: 100%
-      position: relative
-      left: 0em
-      top: 0
-      +background(linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b))
-      +border-radius(0.2em 0.2em 0 0)
-      border-bottom: 1px solid rgba(#000,.8)
-      +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
-      z-index: 0
-    &.facebook
-      background: #4863AE
-    &.rss
-      background: #FF7F25
-    &.smashingmag
-      background: #FF4F27
-    &.twitter
-      background: #E9F9FF
-      color: #3C6B9C !important
-
-    // Assumes full set if the icon-font is zocial
-    @if $zocial-icon-font == "zocial"
-      &.openid
-        background: #f5f5f5
-        color: #333 !important
-
-      &.guest
-        background: #1B4D6D
-
-      &.instapaper
-        color: #222 !important
-        background: #eee
-
-      &.android
-        background: #A4C639
-
-      &.itunes
-        background: #222
-
-      &.paypal
-        background: #FF921D
-        color: #032751 !important
-        +text-shadow(0 1px 0 rgba(#fff,.5))
-
-      &.appstore
-        background: #007DCB !important
-
-      &.creativecommons
-        background: #000
-
-      &.disqus
-        background: #216892
-
-      &.gowalla
-        background: #FF720A
-
-      &.skype
-        background: #00A2ED
-
-      &.aol
-        background: #FF0000
-
-      &.wikipedia
-        background: #fff
-        color: #000 !important
-
-      &.yelp
-        background: #E60010
-
-      &.scribd > span:before
-        content: "}"
-        color: #00D5EA !important
-
-      &.scribd
-        background: #231C1A
-
-      &.eventasaurus
-        background: #8CCC33
-
-      &.eventbrite
-        background: #FF5616
-
-      &.chrome
-        background: #006CD4
-
-      &.html5
-        background: #FF3617
-
-      &.songkick
-        background: #FF0050
-
-      &.vimeo
-        background: #00A2CD
-
-      &.youtube
-        background: #FF0000
-
-      &.yahoo
-        background: #A200C2
-
-      &.intensedebate
-        background: #0099E1
-
-      &.wordpress
-        background: #464646
-
-      &.linkedin
-        background: #0083A8
-
-      &.google
-        background: #4E6CF7
-
-      &.meetup
-        background: #FF0026
-
-      &.plancast
-        background: #E7EBED
-        color: #333 !important
-
-      &.soundcloud
-        background: #FF4500
-
-      &.tumblr
-        background: #374a61
-
-      &.foursquare
-        background: #44A8E0
-
-      &.dribbble
-        background: #ea4c89
-
-      &.forrst
-        background: #1E360D
-
-      &.dropbox
-        background: #f5f5f5
-        color: #312c2a !important
-
-      &.posterous
-        background: #FFD959
-        color: #BC7134 !important
-
-      &.flattr
-        background: #8ABA42
-
-      &.spotify
-        background: #60AF00
-
-      &.evernote
-        background: #6BB130
-        color: #fff !important
-
-      &.ie
-        background: #00A1D9
-
-      &.cloudapp
-        background: #fff
-        color: #312c2a !important
-
-      &.gmail
-        background: #efefef
-        color: #222 !important
-
-      &.amazon
-        background: #FFAD1D
-        color: #030037 !important
-        text-shadow: 0 1px 0 rgba(#fff,.5)
-
-      &.lastfm
-        background: #dc1a23
+// Zocial is magic!
+@import "partials/fonts"
+@import "partials/base"
+@import "partials/adjustments"
+@import "partials/colors"
+@import "partials/lite"
+@import "partials/full"

data/stylesheets/partials/_adjustments.sass

@@ -0,0 +1,19 @@
+// Adjustments for light background buttons
+//
+// &.white, &.twitter, &.github
+// &.plancast, &.posterous, &.dropbox, &.openid, &.instapaper, &.wikipedia, &.cloudapp, &.gmail
+.adjustment-1
+  +text-shadow(0 1px 0 rgba(#fff,.8))
+  +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
+
+// &.github:hover > span, &.twitter:focus > span, &.github:focus > span
+//
+// &.plancast:hover > span, &.posterous:hover > span, &.dropbox:hover > span, &.openid:hover > span, &.instapaper:hover > span, &.github:hover > span, &.wikipedia:hover > span, &.gmail:hover > span,
+// &.plancast:focus > span, &.posterous:focus > span, &.dropbox:focus > span, &.openid:focus > span, &.instapaper:focus > span, &.github:focus > span, &.wikipedia:focus > span, &.gmail:focus > span
+.adjustment-2
+  +background(linear-gradient(top, rgba(#fff,.5), rgba(#fff,.2) 49%, rgba(#000,.05) 51%, rgba(#000,.15)))
+
+// &.twitter:active > span, &.github:active > span
+// &.plancast:active > span, &.posterous:active > span, &.dropbox:active > span, &.openid:active > span, &.instapaper:active > span, &.wikipedia:active > span, &.gmail:active > span
+.adjustment-3
+  +background(linear-gradient(bottom, rgba(#fff,0), rgba(#fff,0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))

data/stylesheets/partials/_base.sass

@@ -0,0 +1,69 @@
+=zocial-base
+  .zocial, .zocial > span
+    +border-radius(0.2em)
+    position: relative
+
+  // Button Structure
+  .zocial
+    +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
+    +font-family($zocial-text-font)
+    +text-shadow(0 1px 0 rgba(#000,.5))
+    position: relative
+    border: 1px solid rgba(#000,.2)
+    border-bottom-color: rgba(#000,.4)
+    color: #fff !important
+    cursor: pointer
+    display: inline-block
+    font-size: $zocial-font-size
+    outline: none
+    padding: 0
+    text-decoration: none !important
+    
+    // Misc
+    button::-moz-focus-inner
+      border: 0
+      padding: 0
+
+    // These buttons can be displayed as standalone icons if you also add a class of "icon"
+    &.icon
+      width: 1.85em
+      overflow: hidden
+
+    & > span
+      position: relative
+      display: inline-block
+      font-size: 80%
+      font-weight: $zocial-font-weight
+      line-height: 2em
+      padding-right: 0.825em
+      white-space: nowrap
+      &:before
+        +box-shadow(0.075em 0 0 rgba(#fff,.25))
+        +font-family($zocial-icon-font)
+        border-right: 0.075em solid rgba(#000,.1)
+        display: block
+        float: left
+        font-size: 125%
+        font-style: normal
+        font-weight: normal
+        margin: 0.0675em 0.5em 0 0
+        text-align: center
+        width: 1.75em
+
+    // Gradient default
+    & > span
+      +background(linear-gradient(top, rgba(#fff,.1), rgba(#fff,.05) 49%, rgba(#000,.05) 51%, rgba(#000,.1)))
+
+    // Gradient hover and focus
+    &:hover > span, &:focus > span
+      +background(linear-gradient(top, rgba(#fff,.15), rgba(#fff,.15) 49%, rgba(#000,.1) 51%, rgba(#000,.15)))
+
+    // Gradient active/clicked
+    &:active > span
+      +background(linear-gradient(bottom, rgba(#fff,.1), rgba(#fff, 0) 30%, rgba(#000, 0) 50%, rgba(#000,.1)))
+
+    // Default button styles
+    & > span:before
+      content: $zocial-icon-default
+
++zocial-base

data/stylesheets/partials/_colors.sass

@@ -0,0 +1,48 @@
+=zocial-colors
+  +zocial-white
+  +zocial-black
+  +zocial-red
+  +zocial-green
+  +zocial-blue
+
+// Colors
+=zocial-white
+  .zocial.white
+    @extend .adjustment-1
+    background: #fff
+    color: #000 !important
+    &  > span:before
+      content: $zocial-icon-default
+      color: #000
+
+=zocial-black
+  .zocial.black
+    background: #000
+    color: #fff !important
+    &  > span:before
+      content: $zocial-icon-default
+      color: #fff
+
+=zocial-red
+  .zocial.red
+    background: red
+    color: #fff !important
+    &  > span:before
+      content: $zocial-icon-default
+      color: #fff
+
+=zocial-green
+  .zocial.green
+    background: green
+    color: #fff !important
+    &  > span:before
+      content: $zocial-icon-default
+      color: #fff
+
+=zocial-blue
+  .zocial.blue
+    background: blue
+    color: #fff !important
+    &  > span:before
+      content: $zocial-icon-default
+      color: #fff

data/stylesheets/{_fonts.sass → partials/_fonts.sass}

@@ -1,5 +1,3 @@
-@import "compass"
-
 // Font family mixin
 =font-family($zocial-text-font)
   @extend .ff-#{$zocial-text-font}

data/stylesheets/partials/_full.sass

@@ -0,0 +1,367 @@
+=zocial-full
+  // mixin zocial-lite
+  +zocial-lite
+  // now do the rest
+  +zocial-amazon
+  +zocial-android
+  +zocial-aol
+  +zocial-appstore
+  +zocial-chrome
+  +zocial-cloudapp
+  +zocial-creativecommons
+  +zocial-disqus
+  +zocial-dribbble
+  +zocial-dropbox
+  +zocial-eventasaurus
+  +zocial-eventbrite
+  +zocial-evernote
+  +zocial-flattr
+  +zocial-forrst
+  +zocial-foursquare
+  +zocial-gmail
+  +zocial-google
+  +zocial-gowalla
+  +zocial-guest
+  +zocial-html5
+  +zocial-ie
+  +zocial-instapaper
+  +zocial-intensedebate
+  +zocial-itunes
+  +zocial-lastfm
+  +zocial-linkedin
+  +zocial-meetup
+  +zocial-openid
+  +zocial-paypal
+  +zocial-plancast
+  +zocial-posterous
+  +zocial-scribd
+  +zocial-skype
+  +zocial-songkick
+  +zocial-soundcloud
+  +zocial-spotify
+  +zocial-tumblr
+  +zocial-vimeo
+  +zocial-wikipedia
+  +zocial-wordpress
+  +zocial-yahoo
+  +zocial-yelp
+  +zocial-youtube
+
+// Paid - Sorted A-Z
+=zocial-amazon
+  .zocial.amazon
+    background: #FFAD1D
+    color: #030037 !important
+    text-shadow: 0 1px 0 rgba(#fff,.5)
+    & > span:before
+      content: "a"
+
+=zocial-android
+  .zocial.android
+    background: #A4C639
+    & > span:before
+      content: "&"
+
+=zocial-aol
+  .zocial.aol
+    background: #FF0000
+    & > span:before
+      content: "\""
+
+=zocial-appstore
+  .zocial.appstore
+    background: #007DCB !important
+    & > span:before
+      content: "^"
+
+=zocial-chrome
+  .zocial.chrome
+    background: #006CD4
+    & > span:before
+      content: "["
+
+=zocial-cloudapp
+  .zocial.cloudapp
+    @extend .adjustment-1
+    background: #fff
+    color: #312c2a !important
+    & > span:before
+      content: "c"
+
+=zocial-creativecommons
+  .zocial.creativecommons
+    background: #000
+    & > span:before
+      content: "C"
+
+=zocial-disqus
+  .zocial.disqus
+    background: #216892
+    & > span:before
+      content: "Q"
+
+=zocial-dribbble
+  .zocial.dribbble
+    background: #ea4c89
+    & > span:before
+      content: "D"
+
+=zocial-dropbox
+  .zocial.dropbox
+    @extend .adjustment-1
+    background: #f5f5f5
+    color: #312c2a !important
+    &:hover > span, &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: "d"
+      color: #4EA4E3
+
+=zocial-eventasaurus
+  .zocial.eventasaurus
+    background: #8CCC33
+    & > span:before
+      content: "v"
+
+=zocial-eventbrite
+  .zocial.eventbrite
+    background: #FF5616
+    & > span:before
+      content: "|"
+
+=zocial-evernote
+  .zocial.evernote
+    background: #6BB130
+    color: #fff !important
+    & > span:before
+      content: "E"
+
+=zocial-flattr
+  .zocial.flattr
+    background: #8ABA42
+    & > span:before
+      content: "%"
+
+=zocial-forrst
+  .zocial.forrst
+    background: #1E360D
+    & > span:before
+      content: ":"
+      color: #50894F
+
+=zocial-foursquare
+  .zocial.foursquare
+    background: #44A8E0
+    & > span:before
+      content: "4"
+
+=zocial-gmail
+  .zocial.gmail
+    @extend .adjustment-1
+    background: #efefef
+    color: #222 !important
+    &:hover > span, &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: "m"
+      color: #ff0000
+
+=zocial-google
+  .zocial.google
+    background: #4E6CF7
+    & > span:before
+      content: "G"
+
+=zocial-gowalla
+  .zocial.gowalla
+    background: #FF720A
+    & > span:before
+      content: "@"
+
+=zocial-guest
+  .zocial.guest
+    background: #1B4D6D
+    & > span:before
+      content: "?"
+
+=zocial-html5
+  .zocial.html5
+    background: #FF3617
+    & > span:before
+      content: "5"
+
+=zocial-ie
+  .zocial.ie
+    background: #00A1D9
+    & > span:before
+      content: "6"
+
+=zocial-instapaper
+  .zocial.instapaper
+    @extend .adjustment-1
+    color: #222 !important
+    background: #eee
+    &:hover > span, &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: "I"
+
+=zocial-intensedebate
+  .zocial.intensedebate
+    background: #0099E1
+    & > span:before
+      content: "{"
+
+=zocial-itunes
+  .zocial.itunes
+    background: #222
+    & > span:before
+      content: "A"
+
+=zocial-lastfm
+  .zocial.lastfm
+    background: #dc1a23
+    & > span:before
+      content: "l"
+
+=zocial-linkedin
+  .zocial.linkedin
+    background: #0083A8
+    & > span:before
+      content: "L"
+
+=zocial-meetup
+  .zocial.meetup
+    background: #FF0026
+    & > span:before
+      content: "M"
+
+=zocial-openid
+  .zocial.openid
+    @extend .adjustment-1
+    background: #f5f5f5
+    color: #333 !important
+    &:hover > span, &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: "o"
+      color: #FF921D
+
+=zocial-paypal
+  .zocial.paypal
+    background: #FF921D
+    color: #032751 !important
+    +text-shadow(0 1px 0 rgba(#fff,.5))
+    & > span:before
+      content: "$"
+
+=zocial-plancast
+  .zocial.plancast
+    @extend .adjustment-1
+    background: #E7EBED
+    color: #333 !important
+    &:hover > span, &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: "P"
+
+=zocial-posterous
+  .zocial.posterous
+    @extend .adjustment-1
+    background: #FFD959
+    color: #BC7134 !important
+    &:hover > span, &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: "~"
+
+=zocial-scribd
+  .zocial.scribd
+    background: #231C1A
+    & > span:before
+      content: "}"
+      color: #00D5EA !important
+
+=zocial-skype
+  .zocial.skype
+    background: #00A2ED
+    & > span:before
+      content: "S"
+
+=zocial-songkick
+  .zocial.songkick
+    background: #FF0050
+    & > span:before
+      content: "k"
+
+=zocial-soundcloud
+  .zocial.soundcloud
+    background: #FF4500
+    & > span:before
+      content: "s"
+
+=zocial-spotify
+  .zocial.spotify
+    background: #60AF00
+    & > span:before
+      content: "=zocial-"
+
+=zocial-tumblr
+  .zocial.tumblr
+    background: #374a61
+    & > span:before
+      content: "t"
+
+=zocial-vimeo
+  .zocial.vimeo
+    background: #00A2CD
+    & > span:before
+      content: "V"
+
+=zocial-wikipedia
+  .zocial.wikipedia
+    @extend .adjustment-1
+    background: #fff
+    color: #000 !important
+    &:hover > span, &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: ","
+
+=zocial-wordpress
+  .zocial.wordpress
+    background: #464646
+    & > span:before
+      content: "w"
+
+=zocial-yahoo
+  .zocial.yahoo
+    background: #A200C2
+    & > span:before
+      content: "Y"
+
+=zocial-yelp
+  .zocial.yelp
+    background: #E60010
+    & > span:before
+      content: "y"
+
+=zocial-youtube
+  .zocial.youtube
+    background: #FF0000
+    & > span:before
+      content: "U"

data/stylesheets/partials/_lite.sass

@@ -0,0 +1,70 @@
+=zocial-lite
+  +zocial-facebook
+  +zocial-github
+  +zocial-googleplus
+  +zocial-rss
+  +zocial-smashingmag
+  +zocial-twitter
+
+// Open Source - Sorted A-Z
+=zocial-facebook
+  .zocial.facebook
+    background: #4863AE
+    &> span:before
+      content: "f"
+
+=zocial-github
+  .zocial.github
+    @extend .adjustment-1
+    color: #050505 !important
+    background: #FBFBFB
+    &:hover > span, &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: "g"
+
+=zocial-googleplus
+  .zocial.googleplus
+    background: #282626
+    &:before
+      content: ""
+      display: block
+      height: 0.2em
+      margin-bottom: -0.1em
+      width: 100%
+      position: relative
+      left: 0em
+      top: 0
+      +background(linear-gradient(left, #d20e1b, #d20e1b 25%, #3156e6 25%, #3156e6 50%, #2aa134 50%, #2aa134 75%, #ecb01b 75%, #ecb01b))
+      +border-radius(0.2em 0.2em 0 0)
+      border-bottom: 1px solid rgba(#000,.8)
+      +box-shadow(inset 0 0.063em 0 rgba(#fff,.4), inset 0 0 0.063em rgba(#fff,.6), 0 0.063em 0 rgba(#fff,.3))
+      z-index: 0
+    & > span:before
+      content: "+"
+
+=zocial-rss
+  .zocial.rss
+    background: #FF7F25
+    & > span:before
+      content: "R"
+
+=zocial-smashingmag
+  .zocial.smashingmag
+    background: #FF4F27
+    & > span:before
+      content: "*"
+
+=zocial-twitter
+  .zocial.twitter
+    @extend .adjustment-1
+    background: #E9F9FF
+    color: #3C6B9C !important
+    &:focus > span
+      @extend .adjustment-2
+    &:active > span
+      @extend .adjustment-3
+    & > span:before
+      content: "T"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: zocial
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
   prerelease: 
 platform: ruby
 authors:
@@ -10,11 +10,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-09-24 00:00:00.000000000Z
+date: 2011-09-27 00:00:00.000000000Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &70222067780580 !ruby/object:Gem::Requirement
+  requirement: &70097243731780 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -22,7 +22,7 @@ dependencies:
         version: 0.11.5
   type: :runtime
   prerelease: false
-  version_requirements: *70222067780580
+  version_requirements: *70097243731780
 description: Zocial CSS3 button set and vector icons with @font-face
 email:
 - adam@stacoviak.com
@@ -33,8 +33,13 @@ extra_rdoc_files: []
 files:
 - README.mdown
 - lib/zocial.rb
-- stylesheets/_fonts.sass
 - stylesheets/_zocial.sass
+- stylesheets/partials/_adjustments.sass
+- stylesheets/partials/_base.sass
+- stylesheets/partials/_colors.sass
+- stylesheets/partials/_fonts.sass
+- stylesheets/partials/_full.sass
+- stylesheets/partials/_lite.sass
 - templates/css/config.rb
 - templates/css/manifest.rb
 - templates/css/zocial-min.css
@@ -59,7 +64,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -1930045921893056838
+      hash: -2297521699150107220
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements: