Source

jqui / sass / _input.sass

Full commit
$button-border-colour: #b6b6b6
$button-text-colour: #4f4f4f
$button-border-colour-hover: #9d9d9d
$button-text-colour-hover: #313131
$button-border-colour-active: #7096ab
$button-text-colour-active: #1c4257
$button-border-colour-selected: $button-border-colour-hover
$button-text-colour-selected: $button-text-colour-hover
$button-border-colour-default: $button-border-colour-active
$button-text-colour-default: $button-text-colour-active

=button-text
  text-align: center
  color: $button-text-colour
  line-height: 1.4em
  text-shadow: 0px 1px 0px rgba(255,255,255,0.8)
  font-size: 14px
  text-decoration: none
  font-weight: bold
  
button, input[type="button"], input[type="submit"], .button, .button-set label, .button-set input[type="radio"]
  margin: 5px
  -khtml-appearance: none
  -moz-appearance: none
  -webkit-appearance: none
  +bg-x($button-bg)
  +button-text
  &:checked, &:checked + label
    background-position: 0px -66px
    border-color: $button-border-colour-selected
    color: $button-text-colour-selected
    &:hover:not(:disabled), &:active:not(:disabled)
      border-color: $button-border-colour-selected
      color: $button-text-colour-selected
    &:active:not(:disabled)
      background-position: 0px -66px
  &:hover:not(:disabled)
    +box-shadow(0px, 0px, 8px, rgba(212,212,212,1))
    border-color: $button-border-colour-hover
    color: $button-text-colour-hover
  &:active:not(:disabled)
    background-position: 0px -66px
  &.default, &[type="submit"]
    background-position: 0px -33px
    border-color: $button-border-colour-default
    color: $button-text-colour-default
    &:hover, &:active:not(:disabled)
      color: $button-text-colour-default
      border-color: $button-border-colour-default
    &:active:not(:disabled)
      background-position: 0px -99px
  &:disabled, &.disabled, &:disabled + label
    &:hover
      +box-shadow(0,0,0,0)
      color: $button-text-colour
      &[type="submit"], &.default
        color: $button-text-colour-default
    &:active + label
      background-position: 0 0
    +opacity(50)
    cursor: default
  display: inline-block
  position: relative
  cursor: pointer
  border: 1px solid $button-border-colour
  +rounded-border(3px)
  padding: 4px 8px
  
  &[type="radio"]
    display: none
  
  // TODO: make these icons depend upon the value that is the attribute.
  // TODO: make the icons in the before/after selectors hover too.

  &[left-icon="action"]
    +icon-before(1,1)
  
  &[right-icon]
    +icon-after(2,1)

.button-set
  margin: 0 7px
  *
    -moz-appearance: none
    
  label
    margin:
      left: 0
      right: -5px
    +rounded-border(0px)
  .first, :first-child + label
    +rounded-border-left(3px)
  .last, :last-child
    +rounded-border-right(3px)

input
  &[type="radio"], &[type="checkbox"], &[type="range"]
    -khtml-appearance: none
    -moz-appearance: none
    -webkit-appearance: none
    &:disabled
      +opacity(50)
  &[type="radio"], &[type="checkbox"]
    +icon
    +icon-pos-no-hover(8,1)
  &[type="checkbox"]
    +icon-pos-no-hover(7,1)
  &[type="range"]
    margin: 10px 0
    height: 5px
    +bg-x($range-bg)
    &:hover:not(:disabled)::-webkit-slider-thumb
      +icon-pos(6,2)
        
    &::-webkit-slider-thumb
      -khtml-appearance: none
      +icon
      +icon-pos(6,1)