quasar-framework/src/css-components/button/button.ios.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

/*
 * Size small
 */
$button-small-font-size     ?= .75rem
$button-small-icon-size     ?= (1.5 * $button-small-font-size)
$button-small-padding       ?= 0 .8rem
$button-small-min-height    ?= 2rem
$button-small-circular-size ?= 37px

/*
 * Size default
 */
$button-font-size           ?= .85rem
$button-icon-size           ?= (1.5 * $button-font-size)
$button-padding             ?= 0 1rem
$button-min-height          ?= 2.4rem
$button-circular-size       ?= 56px

/*
 * Size big
 */
$button-big-font-size       ?= 1rem
$button-big-icon-size       ?= (1.3 * $button-big-font-size)
$button-big-padding         ?= 0 1.4rem
$button-big-min-height      ?= 3rem
$button-big-circular-size   ?= 72px


$button-border-radius       ?= $generic-border-radius
$button-box-shadow          ?= none
$button-font-weight         ?= normal
$button-text-transform      ?= none
$button-margin              ?= 0


button
  user-select none
  display inline
  outline 0
  border 0
  cursor pointer
  text-decoration none
  position relative
  font-style normal
  text-align center
  text-overflow ellipsis
  white-space nowrap
  vertical-align middle
  color inherit
  background transparent
  line-height 1
  transition all .12s ease-in
  -webkit-appearance button

  border-radius $button-border-radius
  text-transform $button-text-transform

  margin $button-margin
  padding $button-padding
  min-height $button-min-height

  font-weight $button-font-weight
  font-size $button-font-size

  i
    font-size $button-icon-size

  &.small
    font-size $button-small-font-size
    padding $button-small-padding
    min-height $button-small-min-height
    &:not(.circular) i
      font-size $button-small-icon-size
  &.big
    font-size $button-big-font-size
    padding $button-big-padding
    min-height $button-big-min-height
    &:not(.circular) i
      font-size $button-big-icon-size

  &.round
    border-radius 64px
    padding 0 2.6rem

  &.raised
    box-shadow $shadow-2
    &:active:not(.disabled)
      box-shadow $shadow-3

  &.bordered
    border 3px solid

  &.push
    transition none
    box-shadow $shadow-2
    &:active:not(.disabled)
      border-bottom 0
      box-shadow none !important
    &:not(.circular)
      border-radius 7px

  for $name, $color in $colors
    &.{$name}
      background $color
      text-shadow 0 0 2px black

      if $name != 'light' && $name != 'white'
        color white
      else
        text-shadow none

      &:active:not(.disabled)
        background active-color($color) !important

      &.outline
        border 1px solid $color

      &.glossy
        border-color darken($color, 10%) darken($color, 15%) darken($color, 15%)

      if $name != 'light' && $name != 'white'
        &.clear, &.outline
          color $color
          &:active:not(.disabled)
            background $color !important

      &.bordered
        border-color active-color($color)

      &.push
        border-bottom 3px solid dark-active-color($color)

  &.glossy
    border 1px solid
    background-image linear-gradient(to bottom, rgba(white, .3), rgba(white, 0) 50%, rgba(black, .12) 51%, rgba(black, .04))
    &:active:not(.disabled)
      box-shadow inset 0 1px 3px rgba(black, .2), 0 1px rgba(white, .4)

  &.clear, &.outline
    background transparent
    text-shadow none
    &:active:not(.disabled)
      color white

  &.circular
    text-align center
    border-radius 50%
    padding 0
    height $button-circular-size
    width $button-circular-size
    &.small
      height $button-small-circular-size
      width $button-small-circular-size
    &.big
      height $button-big-circular-size
      width $button-big-circular-size

  &.full-width
    display block
    margin-left 0
    margin-right 0
    border-radius 0

body.desktop button
  &.raised
    &:hover:not(.disabled)
      box-shadow $shadow-3

  for $name, $color in $colors
    &.{$name}:not(.disabled)
      &:hover:not(.clear)
        background hover-color($color)
        &:not(.push)
          box-shadow $button-box-shadow
      &.clear:hover
        background lighten($color, 70%)

  &.outline:hover
    color white