@blexar/framework/src/components/button.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.button
  position: relative
  display: inline-flex
  align-items: center
  justify-content: center
  margin-bottom: $margin
  padding: $padding ($padding * 1.5)
  outline: none
  border-style: solid
  border-radius: $border-radius
  border-color: transparent
  border-width: $border
  background-clip: border-box
  vertical-align: middle
  text-align: center
  text-decoration: none
  user-select: none
  cursor: pointer
  line-height: $element-lineheight
  _button-color: $gray $dark

  &:not(:last-child)
    margin-{$dir-end}: $margin

  // generate size modifiers
  generateSizes()

  // generate color modifiers
  for color in $modifiers-color
    $accent = lookup('$' + color)
    $text = isLight(color) ? $black : $white

    &.is-{color}
      _button-color: $accent $text

  // generate gradient modifiers
  for color in $modifiers-color-grad
    $grad = lookup('$grad-' + color)

    &.is-{color}.is-gradient
      _button-grad: $grad $white

  &.is-gradient
    background-color: transparent
    background-position: -1px -1px
    background-size: calc(100% + 4px) calc(100% + 4px)

    &:focus:not(:active)
      box-shadow: 0 0 0 $outline alpha($primary, $outline-opacity)

    &:hover, &:active, &.is-active
      opacity: 0.8

    .is-disabled, &[disabled]
      border-color: $primary
      background-color: $primary

  .icon
    &:first-child:not(:last-child)
      margin-{$dir-end}: ($padding * 0.5)

    &:last-child:not(:first-child)
      margin-{$dir-start}: ($padding * 0.5)

    &:only-child
      margin: 0 ($padding * -0.5)

  .label
    margin: ($padding * -1) 0

  &.is-block
    width: 100%

  &.is-rounded
    border-radius: 10em

  &.is-outlined
    background-color: transparent
    border-style: solid
    border-width: $border

  &.is-clean
    padding: $padding
    color: $dark
    _icon-color: $dark

    &, &:hover, &:active, &:focus, &.is-active
      background-color: transparent

  &.is-link
    padding-top: 0.3em
    padding-bottom: 0.3em
    padding-{$dir-start}: 0
    padding-{$dir-end}: 0.7em
    border: 0
    background-color: transparent
    color: $link
    _icon-color: $link

    &:after
      position: absolute
      display: block
      content: ''
      width: 100%
      height: 0.15em
      background-color: $link
      bottom: 0
      left: 0
      right: 0

    &:hover, &:active, &.is-active
      color: $link-hover

      &:after
        background-color: $link-hover
        height: 0.25em

  &:hover
    text-decoration: none

  &.is-disabled, &[disabled]
    opacity: 0.8
    cursor: not-allowed

@keyframes spinner-rotation
  to
    transform: rotate(360deg)