mdb-ui-kit/less/_buttons.less

//.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 _not_ flat, but colored.
.btn,
.input-group-btn .btn {

  .background-variations(~".btn", ~"", @mdb-btn-background-color);
  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;

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

    box-shadow: none;

    // hover
    // FIXME: check suffix generation
    .generic-variations(~".btn", ~"&:hover", @mdb-btn-background-color, {
      background-color: fade(@variation-color, 20%);
    });

    &:disabled {
      color: @text-disabled !important;
    }

  }


  //&: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;
  //}

  //.background-variations(~":not(.btn-link):not(.btn-flat)", @mdb-btn-background-color);
  //
  //// BTN hover effect
  //// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
  //.generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @mdb-btn-background-color, {
  //  background-color: contrast(@variation-color, darken(@variation-color, 4%), lighten(@variation-color, 4%), @contrast-factor);
  //});
  //// BTN active effect
  //// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
  //.generic-variations(~":active:not(.btn-link):not(.btn-flat)", @mdb-btn-background-color, {
  //  background-color: contrast(@variation-color, darken(@variation-color, 6%), lighten(@variation-color, 6%), @contrast-factor);
  //});
  //// BTN .active effect
  //// SASS conversion note: please mirror any content change in _mixins-shared.scss button-variations-content
  //.generic-variations(~".active:not(.btn-link):not(.btn-flat)", @mdb-btn-background-color, {
  //  background-color: contrast(@variation-color, darken(@variation-color, 6%), lighten(@variation-color, 6%), @contrast-factor);
  //});
  //// 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;
  }
}

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