button style Article one (Ant Design React)

This article describes the style structure of Elementui, iview, ant in the button.

Ant Design react

Ant-react button in two files less:

• Mixins.less: The function is encapsulated according to the button function style.
• Index.less: Call the function in mixins.less to declare the relevant class of the button

Let's first look at the structure of mixins.less.

• BTN (basic style, mostly with Set button universal style):

.btn() {
  Display: inline-block;//inline block elements
  Font-weight: @btn-font-weight;//font thickness
  Text-align: center;//The font is centered
  Touch-action: manipulation; / / browser only allows scrolling and continuous zoom operation
  Cursor: pointer; / / mouse move up shape
  Background-image: none;//The background image is empty
  Border: @border-width-base @border-style-base transparent;//border transparent
  White-space: nowrap;//Do not wrap
  .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);//padding height font-size border-radius setting
  User-select: none;//text cannot be selected
  Transition: all .3s @ease-in-out;//transition
  Position: relative;//relative positioning

  > .@{iconfont-css-prefix} {
    Line-height: 1;//row height without unit is the proportion of relative font
  }

  &,
  &:active,
  &:focus {
    Outline: 0; / / is a line drawn around the element, located at the periphery of the edge of the border, can play a prominent role
  }

  &:not([disabled]):hover {
    Text-decoration: none;//Define standard text
  }

  &:not([disabled]):active {
    Outline: 0;
    Transition: none;
  }

  &.disabled,
  &[disabled] {
    Cursor: not-allowed;
    > * {
      Pointer-events: none; // element will never be the target of a mouse event
    }
  }

  &-lg {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
  }

  &-sm {
    .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
  }
} 

One of the specific properties do not say, do not know the Baidu attribute can be known, is probably set font weight, font center, do not wrap, transition, positioning, border, activation, focus, hover, disabled and other styles, where btn called Button-size function. &-LG, &-sm set large buttons and small buttons, call the Button-size function

• Button-size (set button size):

.button-size(@height; @padding; @font-size; @border-radius) {
  padding: @padding;
  font-size: @font-size;
  border-radius: @border-radius;
  height: @height;
}

Toheight、padding、font-size、border-radiusset the button size for input parameters, width can be set by padding and font-size.

• The next section is the Set Button type main button, secondary button, dashed button, dangerous button, Ghost key style function:

.button-variant-primary(@color; @background) {
  .button-color(@color; @background; @background);
  &:hover,
  &:focus {
    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
  }

  &:active,
  &.active {
    .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);
  }

  .button-disabled();
}

.button-variant-other(@color; @background; @border) {
  .button-color(@color; @background; @border);

  &:hover,
  &:focus {
    .button-color(@primary-5; @background; @primary-5);
  }

  &:active,
  &.active {
    .button-color(@primary-7; @background; @primary-7);
  }

  .button-disabled();
}

.button-variant-danger(@color; @background; @border) {
  .button-color(@color; @background; @border);

  &:hover {
    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
  }

  &:focus {
    .button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`);
  }

  &:active,
  &.active {
    .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
  }

  .button-disabled();
}

.button-variant-ghost(@color) {
  .button-color(@color; transparent; @color);

  &:hover,
  &:focus {
    .button-color(~`colorPalette("@{color}", 5)`; transparent; ~`colorPalette("@{color}", 5)`);
  }

  &:active,
  &.active {
    .button-color(~`colorPalette("@{color}", 7)`; transparent; ~`colorPalette("@{color}", 7)`);
  }

  .button-disabled();
}

In the code we can see that these functions are called Button-color to set the button's border, background, text color, and call button-disabled to set the disabled style. The main or basic color style is different, and the hover,active color style is not the same. And in the later function Btn-primary, Btn-default, Btn-ghost, btn-dashed, Btn-danger call the corresponding function above. The code is as follows:

// primary button style
.btn-primary() {
  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
}

// default button style
.btn-default() {
  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
  &:hover,
  &:focus,
  &:active,
  &.active {
    background: @btn-default-bg;
    text-decoration: none;
  }
}

// ghost button style
.btn-ghost() {
  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
}

// dashed button style
.btn-dashed() {
  .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
  border-style: dashed;
}

// danger button style
.btn-danger() {
  .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}

The rest is the style of the button group and the style of the circle button

.button-group-base(@btnClassName) {//The basic style of the button group
  Position: relative;
  Display: inline-block;
  > .@{btnClassName},
  > span > .@{btnClassName} {
    Position: relative;
    Line-height: @btn-height-base - 2px;

    &:hover,
    &:focus,
    &:active,
    &.active {
      Z-index: 2;
    }

    &:disabled {
      Z-index: 0;
    }
  }

  // size
  &-lg > .@{btnClassName},
  &-lg > span > .@{btnClassName} {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
    Line-height: @btn-height-lg - 2px;
  }

  &-sm > .@{btnClassName},
  &-sm > span > .@{btnClassName} {
    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
    Line-height: @btn-height-sm - 2px;
    > .@{iconfont-css-prefix} {
      Font-size: @font-size-base;
    }
  }
}
.btn-group(@btnClassName: btn) {// button group is mainly to set the border and rounded corners of a row of buttons
  .button-group-base(@btnClassName);

  .@{btnClassName} + .@{btnClassName},
  .@{btnClassName} + &,
  Span + .@{btnClassName},
  .@{btnClassName} + span,
  > span + span,
  & + .@{btnClassName},
  & + & {
    Margin-left: -1px;
  }

  .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
    Border-left-color: transparent;
  }

  .@{btnClassName} {
    Border-radius: 0;
  }

  > .@{btnClassName}:first-child,
  > span:first-child > .@{btnClassName} {
    Margin-left: 0;
  }
  > .@{btnClassName}:only-child {
    Border-radius: @btn-border-radius-base;
  }
  > span:only-child > .@{btnClassName} {
    Border-radius: @btn-border-radius-base;
  }

  > .@{btnClassName}:first-child:not(:last-child),
  > span:first-child:not(:last-child) > .@{btnClassName} {
    Border-bottom-left-radius: @btn-border-radius-base;
    Border-top-left-radius: @btn-border-radius-base;
  }

  > .@{btnClassName}:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .@{btnClassName} {
    Border-bottom-right-radius: @btn-border-radius-base;
    Border-top-right-radius: @btn-border-radius-base;
  }

  &-sm {
    > .@{btnClassName}:only-child {
      Border-radius: @btn-border-radius-sm;
    }
    > span:only-child > .@{btnClassName} {
      Border-radius: @btn-border-radius-sm;
    }
    > .@{btnClassName}:first-child:not(:last-child),
    > span:first-child:not(:last-child) > .@{btnClassName} {
      Border-bottom-left-radius: @btn-border-radius-sm;
      Border-top-left-radius: @btn-border-radius-sm;
    }
    > .@{btnClassName}:last-child:not(:first-child),
    > span:last-child:not(:first-child) > .@{btnClassName} {
      Border-bottom-right-radius: @btn-border-radius-sm;
      Border-top-right-radius: @btn-border-radius-sm;
    }
  }

  & > & {
    Float: left;
  }

  & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
    Border-radius: 0;
  }

  & > &:first-child:not(:last-child) {
    > .@{btnClassName}:last-child {
      Border-bottom-right-radius: 0;
      Border-top-right-radius: 0;
      Padding-right: 8px;
    }
  }

  & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
    Border-bottom-left-radius: 0;
    Border-top-left-radius: 0;
    Padding-left: 8px;
  }
}