buttons.css.scss

// Button design - by nitzanron@

// I heard you like variables...
$button: #c2c2c2;
$buttonHover: #d2d2d2;
$buttonActive: #9a9a9a;
$buttonText: #000;
$buttonPrimary: #a3c2d2;
$buttonPrimaryHover: #a7d2df;
$buttonPrimaryActive: #78afc0;
$buttonPrimaryText: #fff;
$buttonLight: #e9e9e9;
$buttonLightHover: #f3f3f3;
$buttonLightActive: #c2c2c2;
$buttonLightText: #000;
$buttonPink: #ff8383;
$buttonPinkHover: #ff9999;
$buttonPinkActive: #eb7171;
$buttonPinkText: #fff;
$buttonPurple: #c290c6;
$buttonPurpleHover: #d1a6db;
$buttonPurpleActive: #b380b7;
$buttonPurpleText: #fff;
$buttonGreen: #93c690;
$buttonGreenHover: #a5d3a2;
$buttonGreenActive: #93c690;
$buttonGreenText: #fff;
$buttonYellow: #e7da7f;
$buttonYellowHover: #efe38e;
$buttonYellowActive: #dbce72;
$buttonYellowText: #000;
$buttonDisabled: #e9e9e9;
$buttonDisabledActive: #c2c2c2;
$buttonDisabledText: #c2c2c2;

$buttonBorderRadius: 4px;
$buttonBorderRadiusLarge: 6px;
$buttonBorderRadiusSmall: 3px;

%btn {
  height: 20px;
  font-size: 12px;
  text-shadow: none;
  line-height: 20px;
  letter-spacing: 0.04em;
  border: 0;
  padding: 5px 20px;

  border-radius: $buttonBorderRadius;
  &.btn-large { border-radius: $buttonBorderRadiusLarge; }
  &.btn-small { border-radius: $buttonBorderRadiusSmall; }

  background: $button;
  box-shadow: 0 2px 0 0 $buttonActive;
  color: $buttonText;

  &.btn-primary { background: $buttonPrimary; box-shadow-color: $buttonPrimaryActive; color: $buttonPrimaryText; }
  &.btn-light   { background: $buttonLight;   box-shadow-color: $buttonLightActive;   color: $buttonLightText;   }
  &.btn-pink    { background: $buttonPink;    box-shadow-color: $buttonPinkActive;    color: $buttonPinkText;    }
  &.btn-purple  { background: $buttonPurple;  box-shadow-color: $buttonPurpleActive;  color: $buttonPurpleText;  }
  &.btn-green   { background: $buttonGreen;   box-shadow-color: $buttonGreenActive;   color: $buttonGreenText;   }
  &.btn-yellow  { background: $buttonYellow;  box-shadow-color: $buttonYellowActive;  color: $buttonYellowText;  }
}

%btn_hover {
  color: $buttonText;
  background: $buttonHover;

  &.btn-primary { background: $buttonPrimaryHover; color: $buttonPrimaryText; }
  &.btn-light   { background: $buttonLightHover;   color: $buttonLightText;   }
  &.btn-pink    { background: $buttonPinkHover;    color: $buttonPinkText;    }
  &.btn-purple  { background: $buttonPurpleHover;  color: $buttonPurpleText;  }
  &.btn-green   { background: $buttonGreenHover;   color: $buttonGreenText;   }
  &.btn-yellow  { background: $buttonYellowHover;  color: $buttonYellowText;  }
}

%btn_active {
  box-shadow: none;
  margin-top: 2px;
  color: $buttonText;
  background: $buttonActive;

  &.btn-primary { background: $buttonPrimaryActive;color: $buttonPrimaryText; }
  &.btn-light   { background: $buttonLightActive;  color: $buttonLightText;   }
  &.btn-pink    { background: $buttonPinkActive;   color: $buttonPinkText;    }
  &.btn-purple  { background: $buttonPurpleActive; color: $buttonPurpleText;  }
  &.btn-green   { background: $buttonGreenActive;  color: $buttonGreenText;   }
  &.btn-yellow  { background: $buttonYellowActive; color: $buttonYellowText;  }
}

%btn_disabled {
  background: $buttonDisabled;
  color: $buttonDisabledActive;
  box-shadow: 0 2px 0 0 $buttonDisabledActive;
  opacity: inherit;
  &:active { margin-top: 0; }
}

.btn {
  @extend %btn;

  &:active, .active { @extend %btn_active; }
  &:hover { @extend %btn_hover; }
  &[disabled] { @extend %btn_disabled; }

  &.btn-link {
    &, &:hover, &:active {
      background: none;
      border-bottom: none;
      box-shadow: none;
      padding: inherit;
      letter-spacing: inherit;
    }
  }
}

input.btn, button.btn {
  height: 30px;
  i { padding-top: 3px; }
}

.btn-group {
  > .btn { font-size: 12px; }

  > .btn:first-child {
    border-top-left-radius: $buttonBorderRadius;
    border-bottom-left-radius: $buttonBorderRadius;
  }
  > .btn:last-child,
  > .dropdown-toggle {
    border-top-right-radius: $buttonBorderRadius;
    border-bottom-right-radius: $buttonBorderRadius;
  }

  &.open {
    .btn.dropdown-toggle { @extend %btn_active; }
  }
}