RSS Git Download  Clone
Raw Blame History
@mixin gradient-generator($color: null) {
  background-color: $color;
  @include gradient-y($color, shade-color($color, 10%));
}

@mixin button-generator(
  $background,
  $border: shade-color($background, 15%),
  $color: tint-color(color-contrast($background), 10%),
  $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)
) {
  color: $color;
  @include gradient-generator($background);
  border-color: $border;
  border-bottom-color: shade-color($border, 15%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  text-shadow: 0 1px 1px rgba(color-contrast($color), 0.75);

  .btn-check:focus + &,
  &:focus,
  &:hover {
    color: $hover-color;
    @include gradient-generator(shade-color($background, 15%));
    border-color: $border;
    border-bottom-color: shade-color($border, 15%);
    outline: 0;
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    background-image: none;
    border-color: $active-border;
    border-bottom-color: shade-color($active-border, 15%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),
      0 1px 2px rgba(0, 0, 0, 0.05);
    outline: 0;
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    background-image: none;
    border-color: $disabled-border;
    border-bottom-color: shade-color($disabled-border, 15%);
    box-shadow: none;
    text-shadow: none;
  }
}

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-generator($value);
  }
}

.btn-blend-left {
  border: $input-border-width solid $input-group-addon-border-color;
  border-left: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.btn-blend-right {
  border: $input-border-width solid $input-group-addon-border-color;
  border-right: 0;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}