mdb-ui-kit/scss/_buttons.scss

// specification: https://www.google.com/design/spec/components/buttons.html

// bmd default buttons are flat by default
.btn {
  position: relative;
  margin-bottom: $bmd-btn-margin-bottom; // just enough room so that focus shadows aren't covered up
  font-size: $bmd-btn-font-size;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  transition: box-shadow 0.2s $bmd-animation-curve-fast-out-linear-in, background-color 0.2s $bmd-animation-curve-default, color 0.2s $bmd-animation-curve-default;
  will-change: box-shadow, transform;

  @include undo-bs-tab-focus();

  //--
  // Colors

  // flat removes bg, add color variations to text
  @include bmd-flat-button-color();

  // fab and raised
  //  - colored, add their text and bg
  //  - hover color contrasted
  //  - shared shadow state on hover/active/focus
  &.bmd-btn-fab,
  &.btn-raised,
  .btn-group-raised & {
    @include bmd-raised-button-color();

    // enlarged shadow on hover, focus
    @include hover-focus() {
      //border: 1px solid $blue;
      z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
      @include box-shadow($bmd-shadow-4dp);
    }

    // :active - momentary press: big shadow, release and it is gone
    // .active - persistent big shadow
    &.active,
    &:active {
      z-index: 1; // add to the z-index so that the expanded shadow is above anything below it i.e. another button
      @include box-shadow($bmd-shadow-focus);
      //border: 1px solid $green;
    }
  }

  //---
  // btn-raised
  &.btn-raised,
  .btn-group-raised & {

    // baseline shadow
    @include box-shadow($bmd-shadow-2dp);

    // reverse any of the above for links
    &.btn-link {
      box-shadow: none;
      @include bmd-hover-focus-active() {
        box-shadow: none;
      }
    }

    @include bmd-disabled() {
      box-shadow: none;
    }
  }

  // https://www.google.com/design/spec/components/buttons-floating-action-button.html
  &.bmd-btn-fab,
  &.bmd-btn-icon {
    overflow: hidden;
    font-size: $bmd-btn-fab-font-size;
    line-height: normal;

    .btn-group-lg &,
    .btn-group-sm &,
    & {
      padding: 0; // need specificity
      border-radius: 50%;
    }

    .material-icons {
      position: absolute;
      top: 50%;
      left: 50%;
      width: $bmd-btn-fab-font-size;
      line-height: $bmd-btn-fab-font-size;
      transform: translate(-($bmd-btn-fab-font-size / 2), -($bmd-btn-fab-font-size / 2));
    }
  }

  &.bmd-btn-fab {
    // see above for color variations
    width: $bmd-btn-fab-size;
    min-width: $bmd-btn-fab-size;
    height: $bmd-btn-fab-size;
    //margin: auto;
    //margin: 2px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.
    box-shadow: 0 1px 1.5px 0 $gray-lighter, 0 1px 1px 0 $gray-light;

    .ripple-container {
      border-radius: 50%;
    }

    &.bmd-btn-fab-sm,
    .btn-group-sm & {
      width: $bmd-btn-fab-size-sm;
      min-width: $bmd-btn-fab-size-sm;
      height: $bmd-btn-fab-size-sm;
      //margin: 1px; // use z-index focus/hover/active instead. This is not called for in the spec, but it ensures room for the box-shadow, which is nice to have.

      //.material-icons {
      //  top: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2;
      //  left: ($bmd-btn-icon-size-sm - $bmd-btn-fab-font-size) / 2;
      //}
    }
  }

  // Icon buttons
  &.bmd-btn-icon {
    width: $bmd-btn-icon-size;
    min-width: $bmd-btn-icon-size;
    height: $bmd-btn-icon-size;
    margin: 0;
    color: inherit;

    &.bmd-btn-icon-sm,
    .btn-group-sm & {
      width: $bmd-btn-icon-size-sm;
      min-width: $bmd-btn-icon-size-sm;
      height: $bmd-btn-icon-size-sm;
      font-size: $bmd-btn-icon-font-size-sm;

      .material-icons {
        //$position: ($bmd-btn-icon-size-sm - $bmd-btn-icon-font-size-sm) / 2;
        //top: $position;
        //left: $position;
        width: $bmd-btn-icon-font-size-sm;
        font-size: $bmd-btn-icon-font-size-sm;
        line-height: 1;
        transform: translate(-($bmd-btn-icon-font-size-sm / 2), -($bmd-btn-icon-font-size-sm / 2));
      }
    }
  }

  // Align icons inside buttons with text
  .material-icons {
    position: relative;
    top: .25em;
    margin-top: -1em;
    margin-bottom: -1em;
    font-size: 1.5em;
  }

  // Size variations
  &.btn-lg,
  .btn-group-lg & {
    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $bmd-btn-font-size-lg, $btn-border-radius-lg);
  }
  &.btn-sm,
  .btn-group-sm & {
    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $bmd-btn-font-size-sm, $btn-border-radius-sm);
    font-size: $bmd-btn-font-size-sm;
  }
}

// Disabled buttons and button groups
.btn,
.input-group-btn .btn,
.btn-group,
.btn-group-vertical {
  // have to ratchet up the specificity to kill drop shadows on disabled raised buttons
  @include bmd-disabled() {
    color: $bmd-btn-disabled;
    .bg-inverse & {
      color: $bmd-inverse-btn-disabled;
    }

    // flat buttons shouldn't lose transparency on disabled hover/focus
    &,
    &:hover,
    &:focus {
      background: transparent;
    }
  }
}

// btn-group variations
.btn-group,
.btn-group-vertical {

  position: relative;
  margin: 10px 1px;

  // spec: https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons
  //&.open {
  //  .dropdown-toggle {
  //  }
  //
  //  > .dropdown-toggle.btn {
  //    @include bmd-raised-button-color-bg();
  //  }
  //}

  .dropdown-menu {
    border-radius: 0 0 $border-radius $border-radius;
  }

  &.btn-group-raised {
    @include box-shadow($bmd-shadow-2dp);
  }

  .btn + .btn,
  .btn,
  .btn:active,
  .btn-group {
    margin: 0;
  }
}