Lungo.js/src/stylesheets/lungo.widgets.button.styl

/**
 * Stylesheet
 *
 * @namespace Lungo.Widgets
 * @class Button
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "constants.styl"

.button, button
  display: inline-block
  border: none
  cursor: pointer
  font-family: inherit
  font-size: 1.15em
  text-align: center
  text-decoration: none
  outline: none

  header &
    height: H = 32px
    line-height: H
    padding: 0 8px
    & > .icon
      font-size: 1.3em
      display: block
      float: left
    & .icon + abbr
      margin-left: 4px
      float: right

  article &
    height: H = 40px
    line-height: (H - 2)
    padding: 0 14px

    & .icon + abbr
      margin-left: 6px

    &:not(.anchor) .icon
      line-height: (H / 2)

    &.anchor
      display: block
      // width: inherit
      width: 100%
      position: relative
      & .icon
        position: absolute
        left: 14px

    &.large
      height: H = 52px
      padding: 0 20px
      font-size: 1.4em
      line-height: (H - 2)
      & .icon + abbr
        margin-left: 10px

    &.small
      height: H = 30px
      padding: 0 10px
      font-size: FONT_SIZE_SMALL
      line-height: (H - 2)
      & .icon + abbr
        margin-left: 4px

    &.tiny
      height: H = 22px
      padding: 0 6px
      font-size: FONT_SIZE_TINY
      line-height: (H - 2)
      & .icon + abbr
        margin-left: 2px