@ustack/uskin/css/components/button.less

A graceful framework which provides developers another chance to build an amazing site.

// Variables
@btn_v_padding: 0;
@btn_h_padding: 12px;
@btn_font_size: 13px;
@btn_min_width: 80px;
@btn_height: 32px;
@btn_border_radius: @border_radius;
@btn_border_width: 1px;

@btn_font_color: white;
@btn_bg_color: @color_info;
@btn_hover_bg_color: @color_info_600;
@btn_active_bg_color: @color_info_700;

@btn_create_bg_color: @color_success;
@btn_create_hover_bg_color: @color_success_600;
@btn_create_active_bg_color: @color_success_700;

@btn_warning_bg_color: @color_warning;
@btn_warning_hover_bg_color: @color_warning_600;
@btn_warning_active_bg_color: @color_warning_700;

@btn_del_bg_color: @color_delete;
@btn_del_hover_bg_color: @color_delete_600;
@btn_del_active_bg_color: @color_delete_700;

@btn_cancel_font_color: @color_font_800;
@btn_cancel_bg_color: @color_cancel;
@btn_cancel_hover_bg_color: @color_cancel_600;
@btn_cancel_active_bg_color: @color_cancel_700;

@btn_disable_font_color: @color_font_700;
@btn_disable_bg_color: @color_disabled_400;
@btn_disable_hover_bg_color: @color_disabled_400;
@btn_disable_active_bg_color: @color_disabled_400;

@btn_status_font_color: @color_font;
@btn_status_selected_color: @color_font;
@btn_status_bg_color: @color_grey;
@btn_status_hover_bg_color: @color_info_100;
@btn_status_selected_bg_color: @color_info_200;

@btn_glyph_size: 16px;
@btn_glyph_margin_right: 6px;

.btn {
  display: inline-block;
  box-sizing: border-box;
  min-width: @btn_min_width;
  border: @btn_border_width solid transparent;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  .button-size(@btn_v_padding; @btn_h_padding; @btn_font_size; @btn_height; @btn_border_radius);
  .button-hue(@btn_font_color; @btn_bg_color; @btn_hover_bg_color; @btn_active_bg_color);
  &[disabled],
  &.disabled {
    .button-hue(@btn_disable_font_color; @btn_disable_bg_color; @btn_disable_hover_bg_color; @btn_disable_active_bg_color);
    cursor: not-allowed;
  }
  > i + span{
    margin-left: 6px;
  }
  > span + i {
    margin-left: 6px;
  }
  .glyphicon {
    vertical-align: text-bottom;
    font-weight: bold;
    width: 13px;
  }
}


// Color
.btn-create {
  .button-hue(@btn_font_color; @btn_create_bg_color; @btn_create_hover_bg_color; @btn_create_active_bg_color);
}

.btn-warning {
  .button-hue(@btn_font_color; @btn_warning_bg_color; @btn_warning_hover_bg_color; @btn_warning_active_bg_color);
}

.btn-delete {
  .button-hue(@btn_font_color; @btn_del_bg_color; @btn_del_hover_bg_color; @btn_del_active_bg_color);
}

.btn-cancel {
  .button-hue(@btn_cancel_font_color; @btn_cancel_bg_color; @btn_cancel_hover_bg_color; @btn_cancel_active_bg_color);
}

// Status button
.btn-status {
  .button-hue(@btn_status_font_color; @btn_status_bg_color; @btn_status_hover_bg_color; @btn_status_hover_bg_color);
  &.selected {
    color: @btn_status_selected_color;
    background-color: @btn_status_selected_bg_color;
    border-color: @btn_status_selected_bg_color;
  }
}

// Initialize btn width
.btn-initial { min-width: initial; }

// Size
.btn-xl {
  .button-size(0; 40px; 18px; 48px; 2px);
}

.btn-lg {
  .button-size(0; 20px; 14px; 40px; 2px);
}

.btn-sm {
  .button-size(0; 12px; 12px; 28px; 2px);
}

.btn-xs{
  .button-size(0; 12px; 12px; 24px; 2px);
}

.btn-loading {
  > .icon-loading {
    .loading-ani();
  }
}