mdb-ui-kit/less/_buttons.less

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

//.btn-shadow() {
//  .shadow-z-1();
//  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
//  &:active:not(.btn-link) {
//    .shadow-z-1-hover();
//  }
//}

.typo-button(@colorContrast: false) {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  //line-height: 1;
  letter-spacing: 0;

  & when (@colorContrast) {
    opacity: 0.87;
  }
}

// mdb default buttons are flat by default
// synchronized with mdl 11/23/15
.btn,
.input-group-btn .btn {
  border: none;
  border-radius: @border-radius-base;
  position: relative;
  padding: 8px 30px;
  margin: 10px 1px;
  .typo-button();
  will-change: box-shadow, transform;
  transition: box-shadow 0.2s @mdb-animation-curve-fast-out-linear-in,
  background-color 0.2s @mdb-animation-curve-default,
  color 0.2s @mdb-animation-curve-default;
  outline: none;
  cursor: pointer;
  text-decoration: none;

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

  //---
  // btn-flat
  background: transparent;
  &:not(.btn-raised) {
    .variations(~".btn", ~"", color, @mdb-text-color-primary);
    box-shadow: none;

    &:not(.btn-link) {
      &:hover,
      &:focus {
        // spec: flat/light bg Hover: 20% #999999
        background-color: fade(#999999, 20%);

        .theme-dark & {
          // spec: dark bg Hover: 15% #CCCCCC
          background-color: fade(#CCCCCC, 15%);
        }
      }
    }
  }

  // **raised** only styles (we are raised buttons by default)
  &.btn-raised {
    .background-variations(~".btn", ~"", @mdb-btn-background-color);

    &:not(.btn-link) {
      .shadow-2dp();
      &:hover {

        // Spec:
        //  - Raised Light/Light theme no hover.
        //  - Raised Dark/Dark theme Hover color: 600
        .theme-dark & {
          //// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
          //.generic-variations(~".btn", ~"", @mdb-btn-background-color, {
          //  // FIXME: SPEC - this should be the 600 color, how can we get that programmatically if at all? Or are we limited to the color palette only?
          //  background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor);
          //});
        }
      }

      &.active,
      &:active {
        .shadow-4dp();
      }

      &:focus:not(:active) {
        .focus-shadow();
      }
    }
  }

  // Size variations
  &.btn-sm {
    padding: 5px 20px;
  }
  &.btn-xs {
    padding: 4px 15px;
    font-size: 10px;
  }

  //&.btn-raised {
  //  .btn-shadow();
  //}

  &.btn-fab {
    border-radius: 50%;
    font-size: @mdb-btn-fab-font-size;
    height: @mdb-btn-fab-size;
    margin: auto;
    min-width: @mdb-btn-fab-size;
    width: @mdb-btn-fab-size;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
    position: relative;
    line-height: normal;

    //&,
    //&:hover,
    //&:active {
    //  //.variations(~"", background-color, transparent);
    //  //.variations(~".btn", ~"", background-color, @mdb-btn-primary-color);
    //}
    //&,
    //&:hover {
    //  .shadow-z-1();
    //}
    //&:active {
    //  .shadow-z-1-hover();
    //}

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

    &.btn-fab-mini {
      width: 40px;
      height: 40px;
      padding: 13px 0;
      font-size: 15px;

      &.material-icons {
        top: (@mdb-btn-icon-size-mini - @mdb-btn-fab-font-size) / 2;
        left: (@mdb-btn-icon-size-mini - @mdb-btn-fab-font-size) / 2;
      }
    }

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

  // Align icons inside buttons with text
  i.material-icons {
    vertical-align: middle;
  }

  // Disabled text
  // Spec:
  //  - light theme: Disabled text: 26% #000000
  //  - dark theme: Disabled text: 30% #FFFFFF
  fieldset[disabled] &,
  &.disabled,
  &:disabled {
    color: fade(#000000, 26%);
    .theme-dark & {
      color: fade(#FFFFFF, 30%);
    }

    background: transparent;
  }
}

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

  position: relative;
  //border-radius: 2px;
  margin: 10px 1px;

  &.open {
    .dropdown-toggle {
      //box-shadow: none;
    }

    & > .dropdown-toggle.btn {
      .variations(~".btn", ~"", background-color, @mdb-btn-background-color);
    }
  }

  .dropdown-menu {
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }

  &.btn-group-raised {
    .shadow-2dp();
  }

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