angular/modules/angular2_material/src/components/button/button.scss

@import "../../core/style/variables";
@import "../../core/style/shadows";

// TODO(jelbourn): This goes away.
@import "../../core/style/default-theme";


// Standard button sizing.
$md-button-padding: 0 rem(0.600) !default;
$md-button-min-width: rem(8.800) !default;
$md-button-margin: rem(0.600) rem(0.800) !default;
$md-button-line-height: rem(3.60) !default;
$md-button-border-radius: 3px !default;

// FAB sizing.
$md-fab-size: rem(5.600) !default;
$md-fab-line-height: rem(5.600) !default;
$md-fab-padding: rem(1.60) !default;
$md-fab-mini-size: rem(4.00) !default;
$md-fab-mini-line-height: rem(4.00) !default;

/** Mixin to create distinct classes for fab positions, e.g. ".md-fab-bottom-right". */
@mixin md-fab-position($spot, $top: auto, $right: auto, $bottom: auto, $left: auto) {
  .md-fab-position-#{$spot} {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    position: absolute;
  }
}

// Base styles for all buttons.
@mixin md-button-base() {
  box-sizing: border-box;
  position: relative;
  display: inline-block;

  font-size: $md-body-font-size-base;
  font-weight: 500;

  // Reset browser <button> styles.
  background: transparent;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  outline: none;
  border: none;

  // Apply nowrap and remove underline for anchor md-buttons.
  white-space: nowrap;
  text-decoration: none;

  // Sizing.
  padding: $md-button-padding;
  margin: $md-button-margin;
  min-width: $md-button-min-width;
  line-height: $md-button-line-height;
  border-radius: $md-button-border-radius;

  // Animation.
  // TODO(jelbourn): figure out where will-change would be beneficial.
  transition: background $swift-ease-out-duration $swift-ease-out-timing-function;

  // Hide the default browser focus indicator.
  &:focus {
    outline: none;
  }

  &:hover, &:focus {
    // Remove anchor underline again for more specific modifiers.
    text-decoration: none;

    background: md-color($md-background, 500, 0.2);
  }

  &.md-primary {
    color: md-color($md-primary);
  }

  &.md-accent {
    color: md-color($md-accent);
  }

  &:disabled {
    color: md-color($md-foreground, disabled);
    background-color: transparent;
    cursor: default;
  }
}

/** Base styles for raised buttons, including FABs. */
@mixin md-raised-button() {
  @include md-button-base();

  // Force hardware acceleration.
  // TODO(jelbourn): determine if this actually has an impact.
  transform: translate3d(0, 0, 0);
  box-shadow: $md-shadow-bottom-z-1;

  transition: background $swift-ease-out-duration $swift-ease-out-timing-function,
              box-shadow $swift-ease-out-duration $swift-ease-out-timing-function;

  &:active {
    box-shadow: $md-shadow-bottom-z-2;
  }

  &:disabled {
    box-shadow: none;
  }

  &.md-primary {
    color: md-color($md-primary, default-contrast);
    background-color: md-color($md-primary);
  }

  &.md-accent {
    color: md-color($md-accent, default-contrast);
    background-color: md-color($md-accent);
  }
}


[md-button] {
  @include md-button-base();
}

[md-raised-button] {
  @include md-raised-button();

  color: md-color($md-background, default-contrast);
  background-color: md-color($md-background, 50);
}

[md-fab] {
  @include md-raised-button();

  z-index: $z-index-fab;

  border-radius: 50%;
  min-width: 0;
  width: $md-fab-size;
  height: $md-fab-size;
  line-height: $md-fab-line-height;
  vertical-align: middle;

  // TODO(jelbourn): May need `background-clip: padding-box;` depending on ripple implementation.

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

// Styles for high contrast mode.
@media screen and (-ms-high-contrast: active) {
  [md-raised],
  [md-fab] {
    border: 1px solid #fff;
  }
}

$md-fab-pos-offset: ($md-fab-size - $md-fab-padding) / 2;
@include md-fab-position(bottom-right, auto, $md-fab-pos-offset, $md-fab-pos-offset, auto);
@include md-fab-position(bottom-left, auto, auto, $md-fab-pos-offset, $md-fab-pos-offset);
@include md-fab-position(top-right, $md-fab-pos-offset, $md-fab-pos-offset, auto, auto);
@include md-fab-position(top-left, $md-fab-pos-offset, auto, auto, $md-fab-pos-offset);