tdesign-react/esm/common/style/web/components/button/_mixin.less

TDesign Component for React

@import "./_var.less";

.button() {
  position: relative;
  z-index: 0;
  overflow: hidden;
  font-size: @btn-font-default;
  outline: none;
  border-width: @btn-border-width;
  border-style: solid;
  border-color: transparent;
  background-color: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: @btn-border-radius;
  transition: all @anim-duration-base linear;
  touch-action: manipulation;
}

.button-size(@btn-height, @btn-font-size, @btn-icon-size, @padding-horizontal) {
  height: @btn-height;
  font: @btn-font-size;
  padding-left: calc(@padding-horizontal - @btn-border-width);
  padding-right: calc(@padding-horizontal - @btn-border-width);

  .t-icon,
  .@{prefix}-loading {
    font-size: @btn-icon-size;
  }
}