common sass mixins

_mixins.sass

=clearfix
  :display inline-block
  &:after
    :content "."
    :display block
    :height 0
    :clear both
    :visibility hidden
  * html &
    :height 1px

// 10% opacity: +opacity(10)
=opacity( !pct )
  :opacity= !pct/100
  :-ms-filter "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{!pct})"
  :filter alpha(opacity='#{!pct}')

=position( !position, !top = "", !right = "", !bottom = "", !left = "" )
  :position= !position
  @if !top != ""
    :top= !top
  @if !right != ""
    :right= !right
  @if !bottom != ""
    :bottom= !bottom
  @if !left != ""
    :left= !left

=fill-container( !top = 0, !right = 0, !bottom = !top, !left = !right, !position = "absolute" )
  +position(!position, !top, !right, !bottom, !left)

=size( !height, !width = !height )
  height= !height
  width= !width

=max-size( !height, !width = !height )
  max-height= !height
  max-width= !width

=min-size( !height, !width = !height )
  min-height= !height
  min-width= !width

=user-select( !user_select )
  :-moz-user-select= !user_select
  :-khtml-user-select= !user_select
  :-webkit-user-select= !user_select
  :user-select= !user_select

=no-select
  +user-select("none")

=button( !size="medium" )
  +looks-like-button( !size )
  @if !size == "large"
    +acts-as-button( 46px, 20px, 3px, 10px )
    +looks-like-button( !size, 3px, 10px  )

  @if !size == "medium"
    +acts-as-button( 27px, 12px, 2px, 3px )
    +looks-like-button( !size, 2px, 3px )

=looks-like-button( !size="medium", !shadow_offset=3px, !shadow_size=0 )
  +no-select
  @if !size == "large"
    +border-radius( 3px )

  @if !size == "medium"
    +border-radius( 2px )

  :background
    :image url("/images/button_#{!size}_bg.png")
    :color= !bg_button_color
  :color= !text_button_color
  :cursor pointer
  :padding
    :left 8px
    :right 8px
  &.default
    :background-color= !bg_default_button_color
  &:hover
    :background-color= !bg_button_hover_color
    :text-decoration none
    > span.off
      :display none
    > span.on
      :position static
      :visibility visible
  &.disabled,
  &:hover.disabled
    :background-color= !bg_button_disabled_color
    :color= !text_button_disabled_color
  &,
  &:active.disabled
    +box-shadow( !shadow_offset, !shadow_offset, !shadow_size, "black" )
    :background-position 0 0
    :margin 0
  > span
    :background
      :repeat no-repeat
      :position 0 50%
  > span.on
    :position absolute
    :visibility hidden

=acts-as-button( !height=27px, !font_size=12px, !shadow_offset=3px, !shadow_size=0 )
  :display inline-block
  :font-size= !font_size
  :height= !height
  :line-height= !height
  :text-align center
  :overflow hidden

  &:active
    +box-shadow( "none" )
    :background-position 0 -#{!height}
    :margin #{!shadow_offset} -#{!shadow_offset} -#{!shadow_offset} #{!shadow_offset}

  > span
    :padding #{!height/2} 0

=acts-as-dots-border( !border_image="inner_bg", !padding=6px )
  :background-image url("/images/patterns/dots-#{!border_image}.png")
  @if !padding != ""
    :padding= !padding

=box-shadow( !argv1="", !argv2="", !argv3="", !argv4="", !argv5="", !argv6="" )
  :box-shadow= !argv1 !argv2 !argv3 !argv4 !argv5 !argv6
  :-webkit-box-shadow= !argv1 !argv2 !argv3 !argv4 !argv5 !argv6
  :-moz-box-shadow= !argv1 !argv2 !argv3 !argv4 !argv5 !argv6

=border-radius( !argv1="", !argv2="", !argv3="", !argv4="" )
  :border-radius= !argv1 !argv2 !argv3 !argv4
  :-moz-border-radius= !argv1 !argv2 !argv3 !argv4