antd/es/button/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { genComponentStyleHook, mergeToken } from '../../theme';
import genGroupStyle from './group';
import { genFocusStyle } from '../../style'; // ============================== Shared ==============================

var genSharedButtonStyle = function genSharedButtonStyle(token) {
  var _componentCls;

  var componentCls = token.componentCls,
      iconCls = token.iconCls;
  return _defineProperty({}, componentCls, (_componentCls = {
    outline: 'none',
    position: 'relative',
    display: 'inline-block',
    fontWeight: 400,
    whiteSpace: 'nowrap',
    textAlign: 'center',
    backgroundImage: 'none',
    backgroundColor: 'transparent',
    border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " transparent"),
    cursor: 'pointer',
    transition: "all ".concat(token.motionDurationFast, " ").concat(token.motionEaseInOut),
    userSelect: 'none',
    touchAction: 'manipulation',
    lineHeight: token.lineHeight,
    color: token.colorText,
    '> span': {
      display: 'inline-block'
    }
  }, _defineProperty(_componentCls, "> ".concat(iconCls, " + span, > span + ").concat(iconCls), {
    marginInlineStart: token.marginXS
  }), _defineProperty(_componentCls, "&".concat(componentCls, "-block"), {
    width: '100%'
  }), _defineProperty(_componentCls, '&:not(:disabled)', _extends({}, genFocusStyle(token))), _componentCls));
};

var genHoverActiveButtonStyle = function genHoverActiveButtonStyle(hoverStyle, activeStyle) {
  return {
    '&:not(:disabled)': {
      '&:hover': hoverStyle,
      '&:active': activeStyle
    }
  };
}; // ============================== Shape ===============================


var genCircleButtonStyle = function genCircleButtonStyle(token) {
  return {
    minWidth: token.controlHeight,
    paddingInlineStart: 0,
    paddingInlineEnd: 0,
    borderRadius: '50%'
  };
};

var genRoundButtonStyle = function genRoundButtonStyle(token) {
  return {
    borderRadius: token.controlHeight,
    paddingInlineStart: token.controlHeight / 2,
    paddingInlineEnd: token.controlHeight / 2,
    width: 'auto'
  };
}; // =============================== Type ===============================


var genGhostButtonStyle = function genGhostButtonStyle(btnCls, textColor, borderColor, textColorDisabled, borderColorDisabled, hoverStyle, activeStyle) {
  return _defineProperty({}, "&".concat(btnCls, "-background-ghost"), _extends(_extends({
    color: textColor || undefined,
    backgroundColor: 'transparent',
    borderColor: borderColor || undefined,
    boxShadow: 'none'
  }, genHoverActiveButtonStyle(_extends({
    backgroundColor: 'transparent'
  }, hoverStyle), _extends({
    backgroundColor: 'transparent'
  }, activeStyle))), {
    '&:disabled': {
      cursor: 'not-allowed',
      color: textColorDisabled || undefined,
      borderColor: borderColorDisabled || undefined
    }
  }));
};

var genSolidDisabledButtonStyle = function genSolidDisabledButtonStyle(token) {
  return {
    '&:disabled': {
      cursor: 'not-allowed',
      borderColor: token.colorBorder,
      color: token.colorTextDisabled,
      backgroundColor: token.colorBgContainerDisabled,
      boxShadow: 'none'
    }
  };
};

var genSolidButtonStyle = function genSolidButtonStyle(token) {
  return _extends({}, genSolidDisabledButtonStyle(token));
};

var genPureDisabledButtonStyle = function genPureDisabledButtonStyle(token) {
  return {
    '&:disabled': {
      cursor: 'not-allowed',
      color: token.colorTextDisabled
    }
  };
}; // Type: Default


var genDefaultButtonStyle = function genDefaultButtonStyle(token) {
  return _extends(_extends(_extends(_extends(_extends({}, genSolidButtonStyle(token)), {
    backgroundColor: token.colorBgContainer,
    borderColor: token.colorBorder,
    boxShadow: "0 ".concat(token.controlOutlineWidth, "px 0 ").concat(token.controlTmpOutline)
  }), genHoverActiveButtonStyle({
    color: token.colorPrimaryHover,
    borderColor: token.colorPrimaryHover
  }, {
    color: token.colorPrimaryActive,
    borderColor: token.colorPrimaryActive
  })), genGhostButtonStyle(token.componentCls, token.colorBgContainer, token.colorBgContainer, token.colorTextDisabled, token.colorBorder)), _defineProperty({}, "&".concat(token.componentCls, "-dangerous"), _extends(_extends(_extends({
    color: token.colorError,
    borderColor: token.colorError
  }, genHoverActiveButtonStyle({
    color: token.colorErrorHover,
    borderColor: token.colorErrorBorder
  }, {
    color: token.colorErrorActive,
    borderColor: token.colorErrorActive
  })), genGhostButtonStyle(token.componentCls, token.colorError, token.colorError, token.colorTextDisabled, token.colorBorder)), genSolidDisabledButtonStyle(token))));
}; // Type: Primary


var genPrimaryButtonStyle = function genPrimaryButtonStyle(token) {
  return _extends(_extends(_extends(_extends(_extends({}, genSolidButtonStyle(token)), {
    color: token.colorTextLightSolid,
    backgroundColor: token.colorPrimary,
    boxShadow: "0 ".concat(token.controlOutlineWidth, "px 0 ").concat(token.controlOutline)
  }), genHoverActiveButtonStyle({
    color: token.colorTextLightSolid,
    backgroundColor: token.colorPrimaryHover
  }, {
    color: token.colorTextLightSolid,
    backgroundColor: token.colorPrimaryActive
  })), genGhostButtonStyle(token.componentCls, token.colorPrimary, token.colorPrimary, token.colorTextDisabled, token.colorBorder, {
    color: token.colorPrimaryHover,
    borderColor: token.colorPrimaryHover
  }, {
    color: token.colorPrimaryActive,
    borderColor: token.colorPrimaryActive
  })), _defineProperty({}, "&".concat(token.componentCls, "-dangerous"), _extends(_extends(_extends({
    backgroundColor: token.colorError,
    boxShadow: "0 ".concat(token.controlOutlineWidth, "px 0 ").concat(token.colorErrorOutline)
  }, genHoverActiveButtonStyle({
    backgroundColor: token.colorErrorHover
  }, {
    backgroundColor: token.colorErrorActive
  })), genGhostButtonStyle(token.componentCls, token.colorError, token.colorError, token.colorTextDisabled, token.colorBorder, {
    color: token.colorErrorHover,
    borderColor: token.colorErrorHover
  }, {
    color: token.colorErrorActive,
    borderColor: token.colorErrorActive
  })), genSolidDisabledButtonStyle(token))));
}; // Type: Dashed


var genDashedButtonStyle = function genDashedButtonStyle(token) {
  return _extends(_extends({}, genDefaultButtonStyle(token)), {
    borderStyle: 'dashed'
  });
}; // Type: Link


var genLinkButtonStyle = function genLinkButtonStyle(token) {
  return _extends(_extends(_extends({
    color: token.colorLink
  }, genHoverActiveButtonStyle({
    color: token.colorLinkHover
  }, {
    color: token.colorLinkActive
  })), genPureDisabledButtonStyle(token)), _defineProperty({}, "&".concat(token.componentCls, "-dangerous"), _extends(_extends({
    color: token.colorError
  }, genHoverActiveButtonStyle({
    color: token.colorErrorHover
  }, {
    color: token.colorErrorActive
  })), genPureDisabledButtonStyle(token))));
}; // Type: Text


var genTextButtonStyle = function genTextButtonStyle(token) {
  return _extends(_extends(_extends({}, genHoverActiveButtonStyle({
    color: token.colorText,
    backgroundColor: token.colorBgTextHover
  }, {
    color: token.colorText,
    backgroundColor: token.colorBgTextActive
  })), genPureDisabledButtonStyle(token)), _defineProperty({}, "&".concat(token.componentCls, "-dangerous"), _extends(_extends({
    color: token.colorError
  }, genPureDisabledButtonStyle(token)), genHoverActiveButtonStyle({
    color: token.colorErrorHover,
    backgroundColor: token.colorErrorBg
  }, {
    color: token.colorErrorHover,
    backgroundColor: token.colorErrorBg
  }))));
};

var genTypeButtonStyle = function genTypeButtonStyle(token) {
  var _ref3;

  var componentCls = token.componentCls;
  return _ref3 = {}, _defineProperty(_ref3, "".concat(componentCls, "-default"), genDefaultButtonStyle(token)), _defineProperty(_ref3, "".concat(componentCls, "-primary"), genPrimaryButtonStyle(token)), _defineProperty(_ref3, "".concat(componentCls, "-dashed"), genDashedButtonStyle(token)), _defineProperty(_ref3, "".concat(componentCls, "-link"), genLinkButtonStyle(token)), _defineProperty(_ref3, "".concat(componentCls, "-text"), genTextButtonStyle(token)), _ref3;
}; // =============================== Size ===============================


var genSizeButtonStyle = function genSizeButtonStyle(token) {
  var _$concat$concat;

  var sizePrefixCls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
  var componentCls = token.componentCls,
      iconCls = token.iconCls;
  var paddingVertical = Math.max(0, (token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.controlLineWidth);
  var paddingHorizontal = token.padding - token.controlLineWidth;
  var iconOnlyCls = "".concat(componentCls, "-icon-only");
  return [// Size
  _defineProperty({}, "".concat(componentCls).concat(sizePrefixCls), (_$concat$concat = {
    fontSize: token.fontSize,
    height: token.controlHeight,
    padding: "".concat(paddingVertical, "px ").concat(paddingHorizontal, "px"),
    borderRadius: token.controlRadius
  }, _defineProperty(_$concat$concat, "&".concat(iconOnlyCls), {
    width: token.controlHeight,
    paddingInlineStart: 0,
    paddingInlineEnd: 0,
    '> span': {
      transform: 'scale(1.143)' // 14px -> 16px

    }
  }), _defineProperty(_$concat$concat, "&".concat(componentCls, "-loading"), {
    opacity: token.opacityLoading,
    cursor: 'default'
  }), _defineProperty(_$concat$concat, "".concat(componentCls, "-loading-icon"), {
    transition: "width ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut, ", opacity ").concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut)
  }), _defineProperty(_$concat$concat, "&:not(".concat(iconOnlyCls, ") ").concat(componentCls, "-loading-icon > ").concat(iconCls), {
    marginInlineEnd: token.marginXS
  }), _$concat$concat)), // Shape - patch prefixCls again to override solid border radius style
  _defineProperty({}, "".concat(componentCls).concat(componentCls, "-circle").concat(sizePrefixCls), genCircleButtonStyle(token)), _defineProperty({}, "".concat(componentCls).concat(componentCls, "-round").concat(sizePrefixCls), genRoundButtonStyle(token))];
};

var genSizeBaseButtonStyle = function genSizeBaseButtonStyle(token) {
  return genSizeButtonStyle(token);
};

var genSizeSmallButtonStyle = function genSizeSmallButtonStyle(token) {
  var smallToken = mergeToken(token, {
    controlHeight: token.controlHeightSM,
    padding: token.paddingXS,
    controlRadius: token.controlRadiusSM
  });
  return genSizeButtonStyle(smallToken, "".concat(token.componentCls, "-sm"));
};

var genSizeLargeButtonStyle = function genSizeLargeButtonStyle(token) {
  var largeToken = mergeToken(token, {
    controlHeight: token.controlHeightLG,
    fontSize: token.fontSizeLG,
    controlRadius: token.controlRadiusLG
  });
  return genSizeButtonStyle(largeToken, "".concat(token.componentCls, "-lg"));
}; // ============================== Export ==============================


export default genComponentStyleHook('Button', function (token) {
  var controlTmpOutline = token.controlTmpOutline;
  var buttonToken = mergeToken(token, {
    colorOutlineDefault: controlTmpOutline
  });
  return [// Shared
  genSharedButtonStyle(buttonToken), // Size
  genSizeSmallButtonStyle(buttonToken), genSizeBaseButtonStyle(buttonToken), genSizeLargeButtonStyle(buttonToken), // Group (type, ghost, danger, disabled, loading)
  genTypeButtonStyle(buttonToken), // Button Group
  genGroupStyle(buttonToken)];
});