Source

jqui / sass / _icons.sass



=icon
  +square($icon-size)
  background: 
    image: url(unquote("#{$icon-source}"))

=icon-pos($x, $y)
  background-position:
    x: -$icon-size * ($x - 1)
    y: -$icon-size * ($y - 1)
  &:hover, &:checked
    background-position-y: -$icon-size * $y

=icon-pos-no-hover($x, $y)
  +icon-pos($x, $y)
  &:hover
    background-position-y: -$icon-size * ($y - 1)
  &:hover:checked
    background-position-y: -$icon-size * $y

=icon-pos-before-after($x, $y)
  &:before, &:after
    background-position:
      x: -$icon-size * ($x - 1)
      y: -$icon-size * ($y - 1)
  &:hover:before, &:hover:after
    background-position-y: -$icon-size * $y

=icon-before-after($l: 0, $r: 0, $t: 0, $b: 0)
  content: url(unquote($blank-image))
  +icon
  position: relative
  top: -$t
  padding-bottom: $t

  
=icon-before($x, $y, $l: 0, $r: 0, $t: 0, $b: 0)
  +icon-pos-before-after($x,$y)
  &:before
    +icon-before-after($l,$r,$t,$b)
    margin: 0 8px 0 0

=icon-after($x,$y,$l: 0, $r: 0, $t: 0, $b: 0)
  +icon-pos-before-after($x,$y)
  &:after
    +icon-before-after($l,$r,$t,$b)
    margin: 0 0 0 8px
    
// TODO: Have icons and hover-icons

=icon-alert
  +icon-pos(1,5)
=icon-error
  +icon-alert
=icon-info
  +icon-pos(3,5)
=icon-notice
  +icon-info
=icon-help
  +icon-pos(4,5)
=icon-check
  +icon-pos(2,5)
=icon-success
  +icon-check

=icon-circle-close
  +icon-pos(1,1)
=icon-circle-triangle-n
  +icon-pos(2,1)
=icon-circle-triangle-s
  +icon-pos(3,1)
=icon-circle-triangle-e
  +icon-pos(4,1)
=icon-circle-triangle-w
  +icon-pos(5,1)

=icon-close
  +icon-pos(1,3)

.icon
  +icon
  display: inline-block
  overflow: hidden
  text-indent: -999999px
  
  &.icon-circle-close
    +icon-circle-close
  &.icon-circle-triangle-n
    +icon-circle-triangle-n
  &.icon-circle-triangle-s
    +icon-circle-triangle-s
  &.icon-circle-triangle-e
    +icon-circle-triangle-e
  &.icon-circle-triangle-w
    +icon-circle-triangle-w
  
  &.icon-close
    +icon-close
  
  &.icon-alert
    +icon-alert
  &.icon-info
    +icon-info
  &.icon-notice
    +icon-notice
  &.icon-help
    +icon-help
  &.icon-check
    +icon-success