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: @mdl-btn-border-radus;
  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();
      }
    }
  }

  //&:not(.btn-link):not(.btn-flat) {
  //  background-color: @mdb-btn-background-color;
  //  color: @mdb-text-color-primary;
  //
  //  &:not(.btn-fab) {
  //    &:hover {
  //      .shadow-z-1();
  //    }
  //    &:active {
  //      .shadow-z-1-hover();
  //    }
  //  }
  //}

  //transition: background-color 0.2s ease, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  //outline: none !important;

  //.btn-flat:not(.btn-link){
  //  color: @mdb-text-color-primary;
  //}

  //// BTN flat hover effect
  //// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
  //.generic-variations(~".btn-flat:hover:not(.btn-link)", @mdb-btn-background-color, {
  //  background-color: fade(@variation-color, 20%);
  //});

  // 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%);
    }
  }
}

// This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default)
//.btn-link,
//.btn:not([class*="btn-"]),
//.btn-default {
//  color: @mdb-text-color-primary;
//  &:hover {
//    color: @mdb-text-color-primary;
//  }
//}
//.btn:not([class*="btn-"]), .btn-default, .btn-flat:not(.btn-link) {
//  &:hover, &.active {
//    background-color: rgba(255,255,255,0.5);
//  }
//}
//.open > .dropdown-toggle.btn {
//  .variations(~"", background-color, @mdb-btn-background-color);
//}
//.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
//  margin-left: 0;
//}
//.btn-group, .btn-group-vertical {
//  position: relative;
//  border-radius: 2px;
//  margin: 10px 1px;
//
//  .btn-shadow();
//  &.open .dropdown-toggle {
//    box-shadow: none;
//  }
//  &.btn-group-raised {
//    .btn-shadow();
//  }
//  .btn, .btn:active, .btn-group {
//    box-shadow: none !important;
//    margin: 0;
//  }
//}
//.btn-group-flat {
//  box-shadow: none !important;
//}