mdb-ui-kit/scss/mixins/_buttons.scss

// from bs mixins/buttons button-variant
@mixin bmd-button-variant($color, $background, $focus-background, $active-background, $border, $focus-border, $active-border) {
  color: $color;
  background-color: $background;
  border-color: $border;

  @include hover {
    color: $color;
    background-color: $focus-background;
    border-color: $focus-border;
  }

  #{if(&, "&", "*")}:focus,
  #{if(&, "&", "*")}.focus {
    color: $color;
    background-color: $focus-background;
    border-color: $focus-border;
  }

  #{if(&, "&", "*")}:active,
  #{if(&, "&", "*")}.active,
  .open > #{if(&, "&", "*")}.dropdown-toggle {
    color: $color;
    background-color: $focus-background;
    border-color: $focus-border;

    &:hover,
    &:focus,
    &.focus {
      color: $color;
      background-color: $active-background;
      border-color: $active-border;
    }
  }

  // when it is an icon, kill the active bg on open dropdown, but stabilize on hover
  .open > #{if(&, "&", "*")}.dropdown-toggle.bmd-btn-icon {
    color: inherit;
    background-color: $background;

    // leave hover on with the lighter focus color
    &:hover {
      background-color: $focus-background;
    }
  }

  #{if(&, "&", "*")}.disabled,
  #{if(&, "&", "*")}:disabled {
    &:focus,
    &.focus {
      background-color: $background;
      border-color: $border;
    }
    @include hover {
      background-color: $background;
      border-color: $border;
    }
  }
}

@mixin bmd-flat-button-variant($color) {

  $background: $mdb-btn-bg;
  $border: $mdb-btn-border;

  $focus-background: $mdb-btn-focus-bg;
  $focus-border: $mdb-btn-focus-bg;

  $active-background: $mdb-btn-active-bg;
  $active-border: $mdb-btn-active-bg;

  @include bmd-button-variant($color,
    $background,
    $focus-background,
    $active-background,
    $border,
    $focus-border,
    $active-border);

  // inverse color scheme
  .bg-inverse #{if(&, "&", "*")} {
    $focus-background: $mdb-inverse-btn-focus-bg;
    $focus-border: $mdb-inverse-btn-focus-bg;

    $active-background: $mdb-inverse-btn-active-bg;
    $active-border: $mdb-inverse-btn-active-bg;

    @include bmd-button-variant($color,
      $background,
      $focus-background,
      $active-background,
      $border,
      $focus-border,
      $active-border);
  }

  // reverse the above for links
  #{if(&, "&", "*")}.btn-link {
    background-color: transparent;
  }
}

@mixin bmd-flat-button-color() {

  @include bmd-flat-button-variant($mdb-btn-color);

  // flat bg with text color variations
  #{if(&, "&", "*")}.btn-primary {
    @include bmd-flat-button-variant($btn-primary-bg);
  }
  #{if(&, "&", "*")}.btn-secondary {
    @include bmd-flat-button-variant($btn-secondary-color);
  }
  #{if(&, "&", "*")}.btn-info {
    @include bmd-flat-button-variant($btn-info-bg);
  }
  #{if(&, "&", "*")}.btn-success {
    @include bmd-flat-button-variant($btn-success-bg);
  }
  #{if(&, "&", "*")}.btn-warning {
    @include bmd-flat-button-variant($btn-warning-bg);
  }
  #{if(&, "&", "*")}.btn-danger {
    @include bmd-flat-button-variant($btn-danger-bg);
  }
}

@mixin bmd-raised-button-variant($color, $background, $border) {

  // 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?
  $focus-background: contrast-color($background, darken($background, 4%), lighten($background, 4%));
  //$focus-background: darken($background, 10%);  // default bootstrap
  $focus-border: darken($border, 12%);

  $active-background: $focus-background;
  //$active-background: darken($background, 17%);
  $active-border: darken($border, 25%);

  @include bmd-button-variant($color,
    $background,
    $focus-background,
    $active-background,
    $border,
    $focus-border,
    $active-border);
}

@mixin bmd-raised-button-color() {

  #{if(&, "&", "*")}.btn-primary {
    @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  }
  #{if(&, "&", "*")}.btn-secondary {
    @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
  }
  #{if(&, "&", "*")}.btn-info {
    @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
  }
  #{if(&, "&", "*")}.btn-success {
    @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
  }
  #{if(&, "&", "*")}.btn-warning {
    @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
  }
  #{if(&, "&", "*")}.btn-danger {
    @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
  }
}

@mixin undo-bs-tab-focus() {
  // clear out the tab-focus() from BS
  #{if(&, "&", "*")},
  #{if(&, "&", "*")}:active,
  #{if(&, "&", "*")}.active {
    &:focus,
    &.focus {
      //@include tab-focus();
      outline: 0;
    }
  }
}