_zocial.sass in zocial-0.0.2

- old
+ new
@@ -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"
\ No newline at end of file