vue-material/src/components/mdButton/mdButton.scss

@import '../../core/stylesheets/variables.scss';

$button-width: 88px;
$button-height: 36px;
$button-radius: 2px;

$button-fab-size: 56px;
$button-fab-size-mini: 40px;
$button-fab-space: 24px;

$button-dense-height: 32px;

$button-icon-size: 40px;

.md-button {
  min-width: $button-width;
  min-height: $button-height;
  margin: 6px 8px;
  padding: 0 16px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  outline: none;
  background: none;
  border: 0;
  border-radius: $button-radius;
  transition: $swift-ease-out;
  color: currentColor;
  font-family: inherit;
  font-size: 14px;
  font-style: inherit;
  font-variant: inherit;
  font-weight: 500;
  letter-spacing: inherit;
  line-height: $button-height;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: top;
  white-space: nowrap;

  &:focus {
    outline: none;
  }

  &::-moz-focus-inner {
    border:0;
  }

  &:hover {
    &:not([disabled]) {
      &:not(.md-raised) {
        background-color: rgba(#999, .2);
        text-decoration: none;
      }

      &.md-raised {
        background-color: rgba(#000, .12);
      }
    }
  }

  &:active:not([disabled]) {
    background-color: rgba(#999, .4);
  }

  &.md-raised:not([disabled]) {
    box-shadow: $material-shadow-2dp;
  }

  &.md-dense {
    min-height: $button-dense-height;
    line-height: $button-dense-height;
    font-size: 13px;
  }

  &.md-icon-button,
  &.md-fab {
    .md-icon {
      position: absolute;
      top: 1px;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }

  &.md-icon-button {
    width: $button-icon-size;
    min-width: $button-icon-size;
    height: $button-icon-size;
    margin: 0 6px;
    padding: 8px;
    border-radius: 50%;
    line-height: 24px;

    &:not([disabled]) {
      &:hover {
        background: none;
      }
    }

    &.md-dense {
      width: $button-dense-height;
      min-width: $button-dense-height;
      height: $button-dense-height;
      min-height: $button-dense-height;
      padding: 4px;
      line-height: $button-dense-height;
    }

    .md-ink-ripple {
      border-radius: 50%;

      .md-ripple {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
      }
    }

    .md-ripple.md-active {
      animation-duration: .9s;
    }
  }

  &.md-fab {
    width: $button-fab-size;
    height: $button-fab-size;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    box-shadow: $material-shadow-2dp;
    border-radius: $button-fab-size;
    line-height: $button-fab-size;
    background-clip: padding-box;
    transition: $swift-ease-out;
    transition-property: background-color,
                         box-shadow,
                         transform;

    &:hover,
    &:focus {
      box-shadow: $material-shadow-5dp;
    }

    &.md-mini {
      width: $button-fab-size-mini;
      height: $button-fab-size-mini;
      line-height: $button-fab-size-mini;
    }

    .md-ink-ripple {
      border-radius: $button-fab-size;
    }
  }

  &[disabled] {
    color: rgba(#000, .26);
    cursor: default;
    pointer-events: none;

    &.md-raised,
    &.md-fab {
      background-color: rgba(#000, .12);
    }

    &.md-fab {
      box-shadow: none;
    }
  }

  &:after {
    transition: $swift-ease-out;
  }

  .md-ink-ripple {
    border-radius: $button-radius;
    background-clip: padding-box;
    overflow: hidden;
  }
}

.md-button.md-icon-button,
.md-button.md-fab {
  .md-icon {
    display: block;
  }
}

.md-fab,
.md-speed-dial {
  &.md-fab-top-left,
  &.md-fab-top-center,
  &.md-fab-top-right,
  &.md-fab-bottom-left,
  &.md-fab-bottom-center,
  &.md-fab-bottom-right {
    margin: 0;
    position: absolute;
    z-index: 10;
  }

  &.md-fab-top-left {
    top: $button-fab-space;
    left: $button-fab-space;
  }

  &.md-fab-top-center {
    top: $button-fab-space;
    left: 50%;
    transform: translateX(-50%);
  }

  &.md-fab-top-right {
    top: $button-fab-space;
    right: $button-fab-space;
  }

  &.md-fab-bottom-left {
    bottom: $button-fab-space;
    left: $button-fab-space;
  }

  &.md-fab-bottom-center {
    bottom: $button-fab-space;
    left: 50%;
    transform: translateX(-50%);
  }

  &.md-fab-bottom-right {
    right: $button-fab-space;
    bottom: $button-fab-space;
  }
}

.md-button-tooltip {
  &.md-tooltip-top {
    margin-top: -8px;
  }

  &.md-tooltip-right {
    margin-left: 8px;
  }

  &.md-tooltip-bottom {
    margin-top: 8px;
  }

  &.md-tooltip-left {
    margin-left: -8px;
  }
}