rbowen / centos / centos.org

Forked from centos/centos.org 5 years ago
Clone

Blame content/assets/css/bootstrap/_buttons.scss

e8ec7a
//
e8ec7a
// Buttons
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
e8ec7a
// Base styles
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
// Core styles
e8ec7a
.btn {
e8ec7a
  display: inline-block;
e8ec7a
  padding: $padding-base-vertical $padding-base-horizontal;
e8ec7a
  margin-bottom: 0; // For input.btn
e8ec7a
  font-size: $font-size-base;
e8ec7a
  font-weight: $btn-font-weight;
e8ec7a
  line-height: $line-height-base;
e8ec7a
  text-align: center;
e8ec7a
  vertical-align: middle;
e8ec7a
  cursor: pointer;
e8ec7a
  border: 1px solid transparent;
e8ec7a
  border-radius: $border-radius-base;
e8ec7a
  white-space: nowrap;
e8ec7a
  @include user-select(none);
e8ec7a
e8ec7a
  &:focus {
e8ec7a
    @include tab-focus();
e8ec7a
  }
e8ec7a
e8ec7a
  &:hover,
e8ec7a
  &:focus {
e8ec7a
    color: $btn-default-color;
e8ec7a
    text-decoration: none;
e8ec7a
  }
e8ec7a
e8ec7a
  &:active,
e8ec7a
  &.active {
e8ec7a
    outline: 0;
e8ec7a
    background-image: none;
e8ec7a
    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
e8ec7a
  }
e8ec7a
e8ec7a
  &.disabled,
e8ec7a
  &[disabled],
e8ec7a
  fieldset[disabled] & {
e8ec7a
    cursor: not-allowed;
e8ec7a
    pointer-events: none; // Future-proof disabling of clicks
e8ec7a
    @include opacity(.65);
e8ec7a
    @include box-shadow(none);
e8ec7a
  }
e8ec7a
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Alternate buttons
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
.btn-default {
e8ec7a
  @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
e8ec7a
}
e8ec7a
.btn-primary {
e8ec7a
  @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
e8ec7a
}
e8ec7a
// Warning appears as orange
e8ec7a
.btn-warning {
e8ec7a
  @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
e8ec7a
}
e8ec7a
// Danger and error appear as red
e8ec7a
.btn-danger {
e8ec7a
  @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
e8ec7a
}
e8ec7a
// Success appears as green
e8ec7a
.btn-success {
e8ec7a
  @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
e8ec7a
}
e8ec7a
// Info appears as blue-green
e8ec7a
.btn-info {
e8ec7a
  @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Link buttons
e8ec7a
// -------------------------
e8ec7a
e8ec7a
// Make a button look and behave like a link
e8ec7a
.btn-link {
e8ec7a
  color: $link-color;
e8ec7a
  font-weight: normal;
e8ec7a
  cursor: pointer;
e8ec7a
  border-radius: 0;
e8ec7a
e8ec7a
  &,
e8ec7a
  &:active,
e8ec7a
  &[disabled],
e8ec7a
  fieldset[disabled] & {
e8ec7a
    background-color: transparent;
e8ec7a
    @include box-shadow(none);
e8ec7a
  }
e8ec7a
  &,
e8ec7a
  &:hover,
e8ec7a
  &:focus,
e8ec7a
  &:active {
e8ec7a
    border-color: transparent;
e8ec7a
  }
e8ec7a
  &:hover,
e8ec7a
  &:focus {
e8ec7a
    color: $link-hover-color;
e8ec7a
    text-decoration: underline;
e8ec7a
    background-color: transparent;
e8ec7a
  }
e8ec7a
  &[disabled],
e8ec7a
  fieldset[disabled] & {
e8ec7a
    &:hover,
e8ec7a
    &:focus {
e8ec7a
      color: $btn-link-disabled-color;
e8ec7a
      text-decoration: none;
e8ec7a
    }
e8ec7a
  }
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Button Sizes
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
.btn-lg {
e8ec7a
  // line-height: ensure even-numbered height of button next to large input
e8ec7a
  @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
e8ec7a
}
e8ec7a
.btn-sm,
e8ec7a
.btn-xs {
e8ec7a
  // line-height: ensure proper height of button next to small input
e8ec7a
  @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
e8ec7a
}
e8ec7a
.btn-xs {
e8ec7a
  padding: 1px 5px;
e8ec7a
}
e8ec7a
e8ec7a
e8ec7a
// Block button
e8ec7a
// --------------------------------------------------
e8ec7a
e8ec7a
.btn-block {
e8ec7a
  display: block;
e8ec7a
  width: 100%;
e8ec7a
  padding-left: 0;
e8ec7a
  padding-right: 0;
e8ec7a
}
e8ec7a
e8ec7a
// Vertically space out multiple block buttons
e8ec7a
.btn-block + .btn-block {
e8ec7a
  margin-top: 5px;
e8ec7a
}
e8ec7a
e8ec7a
// Specificity overrides
e8ec7a
input[type="submit"],
e8ec7a
input[type="reset"],
e8ec7a
input[type="button"] {
e8ec7a
  &.btn-block {
e8ec7a
    width: 100%;
e8ec7a
  }
e8ec7a
}