@import nib

$btn_base
  border: 1px solid #ff7617
  display: inline-block
  *display: inline
  overflow: visible
  zoom: 1
  padding: 2px 0 0px unquote("\9")
  line-height: 1.5 !important
  text-align: center
  color: #fff
  cursor: pointer
  border-radius: 2px
  min-width: 42px
  _width: 42px
  
/**
 * 小按钮
 */
.micro-btn
  display: inline-block
  *display: inline
  zoom: 1

.medi-btn
  .stress-btn,.extrude-btn,.ordinary-btn
    padding: 5px 10px
    padding: 7px 0 3px unquote("\9")
    font-weight: bold
    min-width: 40px
    _width: 40px

.big-btn
  .stress-btn,.extrude-btn,.ordinary-btn
    padding: 9px 15px 8px
    font-weight: bold
    font-size: 14px
    min-width: 68px
    _width: 68px

.huge-btn
  .stress-btn,.extrude-btn,.ordinary-btn
    padding: 10px 15px 8px
    font-weight: bold
    font-size: 20px
    min-width: 108px
    _width: 108px

.press-disb
  .stress-btn,.extrude-btn,.ordinary-btn
    cursor: default
    opacity: 0.5

.stress-btn
  @extend $btn_base
  background-color: #ff7e28
  background-image: linear-gradient(top, #ffaf44, #ff7e28)
  &:hover
    background: #fb6808
    background-image: linear-gradient(top, #fe9c3d, #fb6808);
    border-color: #eb5e00
    text-decoration: none
  &:active
    background: #fb6808
    background-image:linear-gradient(top, #fe9c3d, #fb6808)
    border-color: #eb5e00
    box-shadow: 0px 1px 3px #f36000 inset

.extrude-btn
  @extend $btn_base
  background-color: #fff7e4
  background-image:linear-gradient(top, #fff, #fff7e4)
  border: 1px solid #f8cfa5
  color: #ff8400
  box-shadow: 0 1px 0 0 #fbe7d2
  &:hover
    background: #fff7e4
    background-image: linear-gradient(top, #fff, #fff7e4)
    border: 1px solid #ffb46b
    box-shadow: 0 1px 0 0 #f9d9b7
    text-decoration: none
  &:active
    background: #fff7e4
    background-image:  linear-gradient(top, #fff, #fff7e4)
    box-shadow: 0 1px 3px #ffc388 inset

.ordinary-btn
  @extend $btn_base
  background-color: #f1f1f1
  background-image: linear-gradient(top, #f5f5f5,#f1f1f1)
  border: 1px solid #ddd
  color: #555
  box-shadow: 0 1px 0 0 #f8f8f8
  &:hover
    background: #f1f1f1
    background-image:linear-gradient(top, #f5f5f5,#f1f1f1)
    border: 1px solid #c6c6c6
    box-shadow: 0 1px 0 0 #eee
    text-decoration: none
  &:active
    background: #f1f1f1
    background-image: linear-gradient(top, #f5f5f5,#f1f1f1)
    border: 1px solid #c6c6c6
    box-shadow: 0 1px 3px #d0d0d0 inset