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

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

// Mixins

// Button sizes
.button-size(@v_padding; @h_padding; @font_size; @height; @border_radius) {
  padding: @v_padding @h_padding;
  font-size: @font_size;
  height: @height;
  line-height: (@height - 2 * @btn_border_width);
  border-radius: @border_radius;
}

// Button hue
.button-hue(@text_color; @bg_color; @hover_bg_color; @active_bg_color) {
  color: @text_color;
  background-color: @bg_color;
  border-color: @bg_color;
  &:hover {
    color: @text_color;
    background-color: @hover_bg_color;
    border-color: @hover_bg_color;
  }
  &:active {
    color: @text_color;
    background-color: @active_bg_color;
    background-color: @active_bg_color;
  }
  &:focus {
    outline: none;
  }
}

// For border-button
.button-hue(@text_color; @bg_color; @hover_bg_color; @active_bg_color; @border_color) {
  color: @text_color;
  background-color: @bg_color;
  border-color: @border_color;
  &:hover {
    color: @text_color;
    background-color: @hover_bg_color;
  }
  &:active {
    color: @text_color;
    background-color: @active_bg_color;
  }
  &:focus {
    outline: none;
  }
}