i-take-these-pills.sass

// An attempt at recreating the same button style, cross browser...
// add the gradient image yoself foo
 
 
.btn
  :display inline-block
  :background none
  :margin 0
  :padding 3px 0
  :border-width 0
  :overflow visible
  :font 100%/1.2 Arial, sans-serif
  :text-decoration none
  :color #333
    
* html button.btn
  :padding-bottom 1px
 
 
// Immediately below is a temporary hack to serve the
// following margin values only to Gecko browsers
// Gecko browsers add an extra 3px of left/right
// padding to button elements which cant be overriden.
// Thus, we use -3px of left/right margin to overcome this.
 
 
html:not([lang*=""]) button.btn
  :margin 0 -3px
 
.btn span
  :background #ddd url('/images/btn-bg.png') repeat-x 0 0
  :margin 0
  :padding 3px 0
  :border-left 1px solid #bbb
  :border-right 1px solid #aaa
 
* html .btn span
  :padding-top 0
 
.btn span span
  :position relative
  :padding 3px .4em
  :border-width 0
  :border-top 1px solid #bbb
  :border-bottom 1px solid #aaa
 
    
// pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT )
 
 
button.pill-l span
  :border-right-width 0
 
button.pill-l span span
  :border-right 1px solid #bbb
 
button.pill-c span
  :border-right-style none
  :border-left-color #fff
 
button.pill-c span span
  :border-right 1px solid #bbb
 
button.pill-r span
  :border-left-color #fff
 
  
// only needed if implementing separate hover/focus/active state for buttons
 
 
.btn:hover span,
.btn:hover span span,
.btn:focus span,
.btn:focus span span
  :cursor pointer
  :border-color #666 !important
  :color #000
 
.btn:active span
  :background-position 0 -400px
  :outline none
 
.btn:focus,
.btn:active
  :outline none
 
 
 
// use if one button should be the 'primary' button
 
 
.primary
  :font-weight bold
  :color #000