amazeui/less/button.less

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

// Name:            Button
//
// Description:     Define style for buttons
//
// Component:       `.am-btn`
//
// Sub-objects:     `.am-btn-group`
//                  `.am-btn-dropdown`
//
// Modifiers:       `.am-btn-default`
//                  `.am-btn-primary`
//                  `.am-btn-warning`
//                  `.am-btn-success`
//                  `.am-btn-danger`
//                  `.am-btn-secondary`
//                  `.am-btn-link`
//                  `.am-btn-sm`
//                  `.am-btn-lg`
//                  `.am-btn-xs`
//                  `.am-btn-block`
//
// States:          `.am-active`
//                  `.am-disabled`
//
// =============================================================================


/* ==========================================================================
   Component: Button
 ============================================================================ */

// Button base styles
.@{ns}btn {
  display: inline-block;
  margin-bottom: 0; // for input.am-btn
  padding: 0.5em 1em; // relative font size
  vertical-align: middle;
  font-size: @btn-font-size;
  font-weight: @btn-font-weight;
  line-height: @btn-line-height;
  text-align: center;
  white-space: nowrap;
  background-image: none;
  border: 1px solid transparent;
  border-radius: @global-radius;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  user-select: none;
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
  .hook-btn;

  &,
  &:active {
    &:focus {
      .tab-focus();
    }
  }

  &:hover,
  &:focus {
    color: @btn-default-color;
    text-decoration: none;
    .hook-btn-hover;
  }

  &:active,
  &.@{ns}active {
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .15);
    .hook-btn-active;
  }

  &.@{ns}disabled,
  &[disabled],
  fieldset[disabled] & {
    // https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
    pointer-events: none; // Disable mouse events
    border-color: transparent;
    cursor: not-allowed; // may not styled because pointer-events: none;
    opacity: 0.45;
    box-shadow: none;
    .hook-btn-disable;
  }

  &.@{ns}round {
    border-radius: @global-rounded;
  }

  &.@{ns}radius {
    border-radius: @radius-normal;
  }
}


// Modifiers
// =============================================================================

.@{ns}btn-default {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
  .hook-btn-default;
}

.@{ns}btn-primary {
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .hook-btn-primary;
}

.@{ns}btn-secondary {
  .button-variant(@btn-secondary-color; @btn-secondary-bg; @btn-secondary-border);
  .hook-btn-secondary;
}

.@{ns}btn-warning {
  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
  .hook-btn-warning;
}

.@{ns}btn-danger {
  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
  .hook-btn-danger;
}

.@{ns}btn-success {
  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
  .hook-btn-success;
}


/* Style links like a button */
.@{ns}btn-link {
  color: @link-color;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;

  &,
  &:active,
  &[disabled],
  fieldset[disabled] & {
    background-color: transparent;
    box-shadow: none;
  }

  &,
  &:hover,
  &:focus,
  &:active {
    border-color: transparent;
  }

  &:hover,
  &:focus {
    color: @link-hover-color;
    text-decoration: underline;
    background-color: transparent;
  }

  &[disabled],
  fieldset[disabled] & {
    &:hover,
    &:focus {
      color: @btn-link-disabled-color;
      text-decoration: none;
    }
  }
}


/* button size */
.@{ns}btn-xs {
  .button-size(@btn-xs-font-size);
  .hook-btn-xs;
}

.@{ns}btn-sm {
  .button-size(@btn-sm-font-size);
  .hook-btn-sm;
}

.@{ns}btn-lg {
  .button-size(@btn-lg-font-size);
  .hook-btn-lg;
}

.@{ns}btn-xl {
  .button-size(@btn-xl-font-size);
  .hook-btn-xl;
}


/* Block button  */
.@{ns}btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}


/* Multiple block buttons vertically space */
.@{ns}btn-block + .@{ns}btn-block {
  margin-top: 5px;
}


/* Specificity overrides */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.@{ns}btn-block {
    width: 100%;
  }
}


/* Button with loading spinner */
.@{ns}btn.@{ns}btn-loading {
  .@{ns}icon-spin {
    margin-right: 5px;
  }
}


// Hooks
// =============================================================================

.hook-btn() {}
.hook-btn-hover() {}
.hook-btn-active() {}
.hook-btn-disable() {}

.hook-btn-default() {}
.hook-btn-primary() {}
.hook-btn-warning() {}
.hook-btn-danger() {}
.hook-btn-success() {}
.hook-btn-secondary() {}

.hook-btn-xs() {}
.hook-btn-sm() {}
.hook-btn-xl() {}
.hook-btn-lg() {}