antd/es/radio/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 { Keyframes } from '@ant-design/cssinjs';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { genFocusOutline, resetComponent } from '../../style'; // ============================== Styles ==============================

var antRadioEffect = new Keyframes('antRadioEffect', {
  '0%': {
    transform: 'scale(1)',
    opacity: 0.5
  },
  '100%': {
    transform: 'scale(1.6)',
    opacity: 0
  }
}); // styles from RadioGroup only

var getGroupRadioStyle = function getGroupRadioStyle(token) {
  var _extends2;

  var componentCls = token.componentCls,
      antCls = token.antCls;
  var groupPrefixCls = "".concat(componentCls, "-group");
  return _defineProperty({}, groupPrefixCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    display: 'inline-block',
    fontSize: 0,
    // RTL
    '&&-rtl': {
      direction: 'rtl'
    }
  }, _defineProperty(_extends2, "".concat(antCls, "-badge ").concat(antCls, "-badge-count"), {
    zIndex: 1
  }), _defineProperty(_extends2, "> ".concat(antCls, "-badge:not(:first-child) > ").concat(antCls, "-button-wrapper"), {
    borderInlineStart: 'none'
  }), _extends2)));
}; // Styles from radio-wrapper


var getRadioBasicStyle = function getRadioBasicStyle(token) {
  var _$concat3, _extends3;

  var componentCls = token.componentCls,
      radioWrapperMarginRight = token.radioWrapperMarginRight,
      radioCheckedColor = token.radioCheckedColor,
      radioTop = token.radioTop,
      radioSize = token.radioSize,
      motionDurationSlow = token.motionDurationSlow,
      motionDurationFast = token.motionDurationFast,
      motionEaseInOut = token.motionEaseInOut,
      motionEaseInOutCirc = token.motionEaseInOutCirc,
      radioButtonBg = token.radioButtonBg,
      colorBorder = token.colorBorder,
      controlLineWidth = token.controlLineWidth,
      radioDotSize = token.radioDotSize,
      colorBgContainerDisabled = token.colorBgContainerDisabled,
      colorTextDisabled = token.colorTextDisabled,
      paddingXS = token.paddingXS,
      radioDotDisabledColor = token.radioDotDisabledColor,
      controlLineType = token.controlLineType,
      radioDotDisabledSize = token.radioDotDisabledSize,
      wireframe = token.wireframe;
  var radioInnerPrefixCls = "".concat(componentCls, "-inner");
  return _defineProperty({}, "".concat(componentCls, "-wrapper"), _extends(_extends({}, resetComponent(token)), (_extends3 = {
    position: 'relative',
    display: 'inline-flex',
    alignItems: 'baseline',
    marginInlineStart: 0,
    marginInlineEnd: radioWrapperMarginRight,
    cursor: 'pointer',
    // RTL
    '&&-rtl': {
      direction: 'rtl'
    },
    '&-disabled': {
      cursor: 'not-allowed'
    },
    '&::after': {
      display: 'inline-block',
      width: 0,
      overflow: 'hidden',
      content: '"\\a0"'
    }
  }, _defineProperty(_extends3, "".concat(componentCls, "-checked::after"), {
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineStart: 0,
    width: '100%',
    height: '100%',
    border: "".concat(controlLineWidth, "px ").concat(controlLineType, " ").concat(radioCheckedColor),
    borderRadius: '50%',
    visibility: 'hidden',
    animationName: antRadioEffect,
    animationDuration: motionDurationSlow,
    animationTimingFunction: motionEaseInOut,
    animationFillMode: 'both',
    content: '""'
  }), _defineProperty(_extends3, componentCls, _extends(_extends({}, resetComponent(token)), {
    position: 'relative',
    insetBlockStart: radioTop,
    display: 'inline-block',
    outline: 'none',
    cursor: 'pointer'
  })), _defineProperty(_extends3, "".concat(componentCls, "-wrapper:hover &,\n        &:hover ").concat(radioInnerPrefixCls), {
    borderColor: radioCheckedColor
  }), _defineProperty(_extends3, "".concat(componentCls, "-input:focus-visible + ").concat(radioInnerPrefixCls), _extends({}, genFocusOutline(token))), _defineProperty(_extends3, "".concat(componentCls, ":hover::after, ").concat(componentCls, "-wrapper:hover &::after"), {
    visibility: 'visible'
  }), _defineProperty(_extends3, "".concat(componentCls, "-inner"), {
    '&::after': {
      boxSizing: 'border-box',
      position: 'absolute',
      insetBlockStart: '50%',
      insetInlineStart: '50%',
      display: 'block',
      width: radioSize,
      height: radioSize,
      marginBlockStart: radioSize / -2,
      marginInlineStart: radioSize / -2,
      backgroundColor: wireframe ? radioCheckedColor : radioButtonBg,
      borderBlockStart: 0,
      borderInlineStart: 0,
      borderRadius: radioSize,
      transform: 'scale(0)',
      opacity: 0,
      transition: "all ".concat(motionDurationSlow, " ").concat(motionEaseInOutCirc),
      content: '""'
    },
    boxSizing: 'border-box',
    position: 'relative',
    insetBlockStart: 0,
    insetInlineStart: 0,
    display: 'block',
    width: radioSize,
    height: radioSize,
    backgroundColor: radioButtonBg,
    borderColor: colorBorder,
    borderStyle: 'solid',
    borderWidth: controlLineWidth,
    borderRadius: '50%',
    transition: "all ".concat(motionDurationFast)
  }), _defineProperty(_extends3, "".concat(componentCls, "-input"), {
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineEnd: 0,
    insetBlockEnd: 0,
    insetInlineStart: 0,
    zIndex: 1,
    cursor: 'pointer',
    opacity: 0
  }), _defineProperty(_extends3, "".concat(componentCls, "-checked"), _defineProperty({}, radioInnerPrefixCls, {
    borderColor: radioCheckedColor,
    backgroundColor: wireframe ? radioButtonBg : radioCheckedColor,
    '&::after': {
      transform: "scale(".concat(radioDotSize / radioSize, ")"),
      opacity: 1,
      transition: "all ".concat(motionDurationSlow, " ").concat(motionEaseInOutCirc)
    }
  })), _defineProperty(_extends3, "".concat(componentCls, "-disabled"), (_$concat3 = {
    cursor: 'not-allowed'
  }, _defineProperty(_$concat3, radioInnerPrefixCls, {
    backgroundColor: colorBgContainerDisabled,
    borderColor: colorBorder,
    cursor: 'not-allowed',
    '&::after': {
      backgroundColor: radioDotDisabledColor
    }
  }), _defineProperty(_$concat3, '&-input', {
    cursor: 'not-allowed'
  }), _defineProperty(_$concat3, "".concat(componentCls, "-disabled + span"), {
    color: colorTextDisabled,
    cursor: 'not-allowed'
  }), _defineProperty(_$concat3, "&".concat(componentCls, "-checked"), _defineProperty({}, radioInnerPrefixCls, {
    '&::after': {
      transform: "scale(".concat(radioDotDisabledSize / radioSize, ")")
    }
  })), _$concat3)), _defineProperty(_extends3, "span".concat(componentCls, " + *"), {
    paddingInlineStart: paddingXS,
    paddingInlineEnd: paddingXS
  }), _extends3)));
}; // Styles from radio-button


var getRadioButtonStyle = function getRadioButtonStyle(token) {
  var _$concat4;

  var radioButtonColor = token.radioButtonColor,
      controlHeight = token.controlHeight,
      componentCls = token.componentCls,
      controlLineWidth = token.controlLineWidth,
      controlLineType = token.controlLineType,
      colorBorder = token.colorBorder,
      motionDurationSlow = token.motionDurationSlow,
      motionDurationFast = token.motionDurationFast,
      radioButtonPaddingHorizontal = token.radioButtonPaddingHorizontal,
      fontSize = token.fontSize,
      radioButtonBg = token.radioButtonBg,
      fontSizeLG = token.fontSizeLG,
      controlHeightLG = token.controlHeightLG,
      controlHeightSM = token.controlHeightSM,
      paddingXS = token.paddingXS,
      controlRadius = token.controlRadius,
      controlRadiusSM = token.controlRadiusSM,
      controlRadiusLG = token.controlRadiusLG,
      radioCheckedColor = token.radioCheckedColor,
      radioButtonCheckedBg = token.radioButtonCheckedBg,
      radioButtonHoverColor = token.radioButtonHoverColor,
      radioButtonActiveColor = token.radioButtonActiveColor,
      radioSolidCheckedColor = token.radioSolidCheckedColor,
      colorTextDisabled = token.colorTextDisabled,
      colorBgContainerDisabled = token.colorBgContainerDisabled,
      radioDisabledButtonCheckedColor = token.radioDisabledButtonCheckedColor,
      radioDisabledButtonCheckedBg = token.radioDisabledButtonCheckedBg;
  return _defineProperty({}, "".concat(componentCls, "-button-wrapper"), (_$concat4 = {
    position: 'relative',
    display: 'inline-block',
    height: controlHeight,
    margin: 0,
    paddingInline: radioButtonPaddingHorizontal,
    paddingBlock: 0,
    color: radioButtonColor,
    fontSize: fontSize,
    lineHeight: "".concat(controlHeight - controlLineWidth * 2, "px"),
    background: radioButtonBg,
    border: "".concat(controlLineWidth, "px ").concat(controlLineType, " ").concat(colorBorder),
    // strange align fix for chrome but works
    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
    borderBlockStartWidth: controlLineWidth + 0.02,
    borderInlineStartWidth: 0,
    borderInlineEndWidth: controlLineWidth,
    cursor: 'pointer',
    transition: ["color ".concat(motionDurationFast), "background ".concat(motionDurationFast), "border-color ".concat(motionDurationFast), "box-shadow ".concat(motionDurationFast)].join(','),
    a: {
      color: radioButtonColor
    }
  }, _defineProperty(_$concat4, "> ".concat(componentCls, "-button"), {
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineStart: 0,
    zIndex: -1,
    width: '100%',
    height: '100%'
  }), _defineProperty(_$concat4, '&:not(:first-child)', {
    '&::before': {
      position: 'absolute',
      insetBlockStart: -controlLineWidth,
      insetInlineStart: -controlLineWidth,
      display: 'block',
      boxSizing: 'content-box',
      width: 1,
      height: '100%',
      paddingBlock: controlLineWidth,
      paddingInline: 0,
      backgroundColor: colorBorder,
      transition: "background-color ".concat(motionDurationSlow),
      content: '""'
    }
  }), _defineProperty(_$concat4, '&:first-child', {
    borderInlineStart: "".concat(controlLineWidth, "px ").concat(controlLineType, " ").concat(colorBorder),
    borderStartStartRadius: controlRadius,
    borderEndStartRadius: controlRadius
  }), _defineProperty(_$concat4, '&:last-child', {
    borderStartEndRadius: controlRadius,
    borderEndEndRadius: controlRadius
  }), _defineProperty(_$concat4, '&:first-child:last-child', {
    borderRadius: controlRadius
  }), _defineProperty(_$concat4, "".concat(componentCls, "-group-large &"), {
    height: controlHeightLG,
    fontSize: fontSizeLG,
    lineHeight: "".concat(controlHeightLG - controlLineWidth * 2, "px"),
    '&:first-child': {
      borderStartStartRadius: controlRadiusLG,
      borderEndStartRadius: controlRadiusLG
    },
    '&:last-child': {
      borderStartEndRadius: controlRadiusLG,
      borderEndEndRadius: controlRadiusLG
    }
  }), _defineProperty(_$concat4, "".concat(componentCls, "-group-small &"), {
    height: controlHeightSM,
    paddingInline: paddingXS - controlLineWidth,
    paddingBlock: 0,
    lineHeight: "".concat(controlHeightSM - controlLineWidth * 2, "px"),
    '&:first-child': {
      borderStartStartRadius: controlRadiusSM,
      borderEndStartRadius: controlRadiusSM
    },
    '&:last-child': {
      borderStartEndRadius: controlRadiusSM,
      borderEndEndRadius: controlRadiusSM
    }
  }), _defineProperty(_$concat4, '&:hover', {
    position: 'relative',
    color: radioCheckedColor
  }), _defineProperty(_$concat4, '&:has(:focus-visible)', _extends({}, genFocusOutline(token))), _defineProperty(_$concat4, "".concat(componentCls, "-inner, input[type='checkbox'], input[type='radio']"), {
    width: 0,
    height: 0,
    opacity: 0,
    pointerEvents: 'none'
  }), _defineProperty(_$concat4, '&-checked:not(&-disabled)', {
    zIndex: 1,
    color: radioCheckedColor,
    background: radioButtonCheckedBg,
    borderColor: radioCheckedColor,
    '&::before': {
      backgroundColor: radioCheckedColor
    },
    '&:first-child': {
      borderColor: radioCheckedColor
    },
    '&:hover': {
      color: radioButtonHoverColor,
      borderColor: radioButtonHoverColor,
      '&::before': {
        backgroundColor: radioButtonHoverColor
      }
    },
    '&:active': {
      color: radioButtonActiveColor,
      borderColor: radioButtonActiveColor,
      '&::before': {
        backgroundColor: radioButtonActiveColor
      }
    }
  }), _defineProperty(_$concat4, "".concat(componentCls, "-group-solid &-checked:not(&-disabled)"), {
    color: radioSolidCheckedColor,
    background: radioCheckedColor,
    borderColor: radioCheckedColor,
    '&:hover': {
      color: radioSolidCheckedColor,
      background: radioButtonHoverColor,
      borderColor: radioButtonHoverColor
    },
    '&:active': {
      color: radioSolidCheckedColor,
      background: radioButtonActiveColor,
      borderColor: radioButtonActiveColor
    }
  }), _defineProperty(_$concat4, '&-disabled', {
    color: colorTextDisabled,
    backgroundColor: colorBgContainerDisabled,
    borderColor: colorBorder,
    cursor: 'not-allowed',
    '&:first-child, &:hover': {
      color: colorTextDisabled,
      backgroundColor: colorBgContainerDisabled,
      borderColor: colorBorder
    }
  }), _defineProperty(_$concat4, '&-disabled&-checked', {
    color: radioDisabledButtonCheckedColor,
    backgroundColor: radioDisabledButtonCheckedBg,
    borderColor: colorBorder,
    boxShadow: 'none'
  }), _$concat4));
}; // ============================== Export ==============================


export default genComponentStyleHook('Radio', function (token) {
  var padding = token.padding,
      controlLineWidth = token.controlLineWidth,
      colorBgContainerDisabled = token.colorBgContainerDisabled,
      colorTextDisabled = token.colorTextDisabled,
      colorBgContainer = token.colorBgContainer,
      fontSize = token.fontSize,
      lineHeight = token.lineHeight,
      fontSizeLG = token.fontSizeLG,
      controlOutline = token.controlOutline,
      colorPrimaryHover = token.colorPrimaryHover,
      colorPrimaryActive = token.colorPrimaryActive,
      colorText = token.colorText,
      colorPrimary = token.colorPrimary,
      marginXS = token.marginXS,
      controlOutlineWidth = token.controlOutlineWidth,
      paddingXXS = token.paddingXXS,
      wireframe = token.wireframe; // Radio

  var radioFocusShadow = "0 0 0 ".concat(controlOutlineWidth, "px ").concat(controlOutline);
  var radioButtonFocusShadow = radioFocusShadow;
  var radioSize = fontSizeLG;
  var radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2;
  var radioDotDisabledSize = radioSize - paddingXXS * 2;
  var radioDotSize = wireframe ? radioDotDisabledSize : radioSize - (paddingXXS + controlLineWidth) * 2;
  var radioCheckedColor = colorPrimary; // Radio buttons

  var radioButtonColor = colorText;
  var radioButtonHoverColor = colorPrimaryHover;
  var radioButtonActiveColor = colorPrimaryActive;
  var radioButtonPaddingHorizontal = padding - controlLineWidth;
  var radioDisabledButtonCheckedColor = colorTextDisabled;
  var radioWrapperMarginRight = marginXS;
  var radioToken = mergeToken(token, {
    radioFocusShadow: radioFocusShadow,
    radioButtonFocusShadow: radioButtonFocusShadow,
    radioSize: radioSize,
    radioTop: radioTop,
    radioDotSize: radioDotSize,
    radioDotDisabledSize: radioDotDisabledSize,
    radioCheckedColor: radioCheckedColor,
    radioDotDisabledColor: colorTextDisabled,
    radioSolidCheckedColor: colorBgContainer,
    radioButtonBg: colorBgContainer,
    radioButtonCheckedBg: colorBgContainer,
    radioButtonColor: radioButtonColor,
    radioButtonHoverColor: radioButtonHoverColor,
    radioButtonActiveColor: radioButtonActiveColor,
    radioButtonPaddingHorizontal: radioButtonPaddingHorizontal,
    radioDisabledButtonCheckedBg: colorBgContainerDisabled,
    radioDisabledButtonCheckedColor: radioDisabledButtonCheckedColor,
    radioWrapperMarginRight: radioWrapperMarginRight
  });
  return [getGroupRadioStyle(radioToken), getRadioBasicStyle(radioToken), getRadioButtonStyle(radioToken)];
});