marco.pms.web/public/scss/_bootstrap-extended/mixins/_buttons.scss

// Buttons
// *******************************************************************************

// Basic
@mixin button-variant(
  $background: null,
  $border: null,
  $hover-background: null,
  $hover-border: null,
  $active-background: null,
  $active-border: null
) {
}
@mixin template-button-variant($parent, $background, $color: null, $border: null) {
  $background: $background;
  $border: $background;
  $color: if($color, $color, color-contrast($background));
  $hover-background: if(
    $color == $color-contrast-light,
    shade-color($background, $btn-hover-bg-shade-amount),
    tint-color($background, $btn-hover-bg-tint-amount)
  );
  $hover-border: if(
    $color == $color-contrast-light,
    shade-color($border, $btn-hover-border-shade-amount),
    tint-color($border, $btn-hover-border-tint-amount)
  );
  $hover-color: color-contrast($hover-background);

  $active-background: if(
    $color == $color-contrast-light,
    shade-color($background, $btn-active-bg-shade-amount),
    tint-color($background, $btn-active-bg-tint-amount)
  );
  $active-border: if(
    $color == $color-contrast-light,
    shade-color($border, $btn-active-border-shade-amount),
    tint-color($border, $btn-active-border-tint-amount)
  );
  $active-color: color-contrast($active-background);
  $disabled-background: $background;
  $disabled-border: $border;
  $disabled-color: color-contrast($disabled-background);

  #{$parent} {
    color: $color;
    @include gradient-bg($background);
    border-color: $border;
    @include box-shadow($btn-box-shadow);
    box-shadow: 0 0.125rem 0.25rem 0 rgba($background, 0.4);

    &:hover {
      color: $hover-color !important;
      @include gradient-bg($hover-background !important);
      border-color: $hover-border !important;
      transform: $btn-hover-transform !important;
    }

    .btn-check:focus + &,
    &:focus,
    &.focus {
      color: $hover-color;
      @include gradient-bg($hover-background);
      border-color: $hover-border;
      transform: $btn-focus-transform;
      box-shadow: none;
    }

    .btn-check:checked + &,
    .btn-check:active + &,
    &:active,
    &.active,
    &.show.dropdown-toggle,
    .show > &.dropdown-toggle {
      color: $active-color !important;
      background-color: $active-background !important;
      // Remove CSS gradients if they're enabled
      background-image: if($enable-gradients, none !important, null);
      border-color: $active-border !important;

      &:focus {
        box-shadow: none;
      }
    }

    &.disabled,
    &:disabled {
      color: $disabled-color !important;
      background-color: $disabled-background !important;
      // Remove CSS gradients if they're enabled
      background-image: if($enable-gradients, none !important, null);
      border-color: $disabled-border !important;
      box-shadow: none !important;
    }
  }

  // Button groups
  // .btn-group #{$parent},
  // .input-group #{$parent} {
  //   border-right: $input-btn-border-width solid $active-background;
  //   border-left: $input-btn-border-width solid $active-background;
  // }
  // .btn-group-vertical #{$parent} {
  //   border-top-color: $active-background;
  //   border-bottom-color: $active-background;
  // }
}

// Outline
@mixin button-outline-variant($color: null, $color-hover: null, $hover-color: null) {
}
// ? $hover-color <-> $color-hover used by bootstrap
@mixin template-button-outline-variant($parent, $color, $hover-color: null) {
  $color: $color;
  $background: $color;
  $color-hover: color-contrast($color);

  $focus-background: $color;

  $hover-background: if(
    $color-hover == $color-contrast-light,
    shade-color($background, $btn-hover-bg-shade-amount),
    tint-color($background, $btn-hover-bg-tint-amount)
  );

  $active-background: if(
    $color-hover == $color-contrast-light,
    shade-color($background, $btn-active-bg-shade-amount),
    tint-color($background, $btn-active-bg-tint-amount)
  );

  #{$parent} {
    color: $color;
    border-color: $color;
    background: transparent;

    &:hover {
      color: $color-hover !important;
      background-color: $hover-background !important;
      border-color: $hover-background !important;
      box-shadow: 0 0.125rem 0.25rem 0 rgba($background, 0.4) !important;
      transform: $btn-hover-transform !important;
    }

    .btn-check:focus + &,
    &:focus {
      color: $color-hover;
      background-color: $hover-background;
      border-color: $hover-background;
      box-shadow: none;
      transform: $btn-focus-transform;
    }

    .btn-check:checked + &,
    .btn-check:active + &,
    &:active,
    &.active,
    &.dropdown-toggle.show {
      color: $color-hover !important;
      background-color: $active-background !important;
      border-color: $active-background !important;
      &:focus {
        box-shadow: none;
      }
    }

    &.disabled,
    &:disabled {
      box-shadow: none !important;
      color: $color !important;
      background-color: transparent !important;
    }
  }

  #{$parent} .badge {
    background: $color;
    border-color: $color;
    color: color-contrast($color);
  }

  #{$parent}:hover .badge,
  #{$parent}:focus:hover .badge,
  #{$parent}:active .badge,
  #{$parent}.active .badge,
  .show > #{$parent}.dropdown-toggle .badge {
    background: $color-hover;
    border-color: $color-hover;
    color: if(alpha($color) ==1, $color, color-contrast($color-hover));
  }
}