antd/es/switch/style/index.js

An enterprise-class UI design language and React components implementation

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { TinyColor } from '@ctrl/tinycolor';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { genFocusStyle, resetComponent } from '../../style';

var genSwitchSmallStyle = function genSwitchSmallStyle(token) {
  var _$concat, _$concat2, _$concat3, _not$concat, _$concat4;

  var componentCls = token.componentCls;
  var switchInnerCls = "".concat(componentCls, "-inner");
  return _defineProperty({}, componentCls, _defineProperty({}, "&".concat(componentCls, "-small"), (_$concat4 = {
    minWidth: token.switchMinWidthSM,
    height: token.switchHeightSM,
    lineHeight: "".concat(token.switchHeightSM, "px")
  }, _defineProperty(_$concat4, "".concat(componentCls, "-inner"), (_$concat = {}, _defineProperty(_$concat, "".concat(switchInnerCls, "-checked"), {
    marginInlineStart: "calc(".concat(token.switchInnerMarginMinSM, "px - 100% + ").concat(token.switchPinSizeSM + token.switchPadding * 2, "px)"),
    marginInlineEnd: "calc(".concat(token.switchInnerMarginMaxSM, "px + 100% - ").concat(token.switchPinSizeSM + token.switchPadding * 2, "px)")
  }), _defineProperty(_$concat, "".concat(switchInnerCls, "-unchecked"), {
    marginTop: -token.switchHeightSM,
    marginInlineStart: token.switchInnerMarginMaxSM,
    marginInlineEnd: token.switchInnerMarginMinSM
  }), _$concat)), _defineProperty(_$concat4, "".concat(componentCls, "-handle"), {
    width: token.switchPinSizeSM,
    height: token.switchPinSizeSM
  }), _defineProperty(_$concat4, "".concat(componentCls, "-loading-icon"), {
    top: (token.switchPinSizeSM - token.switchLoadingIconSize) / 2,
    fontSize: token.switchLoadingIconSize
  }), _defineProperty(_$concat4, "&".concat(componentCls, "-checked"), (_$concat3 = {}, _defineProperty(_$concat3, "".concat(componentCls, "-inner"), (_$concat2 = {}, _defineProperty(_$concat2, "".concat(switchInnerCls, "-checked"), {
    marginInlineStart: token.switchInnerMarginMinSM,
    marginInlineEnd: token.switchInnerMarginMaxSM
  }), _defineProperty(_$concat2, "".concat(switchInnerCls, "-unchecked"), {
    marginInlineStart: "calc(".concat(token.switchInnerMarginMaxSM, "px + 100% - ").concat(token.switchPinSizeSM + token.switchPadding * 2, "px)"),
    marginInlineEnd: "calc(".concat(token.switchInnerMarginMinSM, "px - 100% + ").concat(token.switchPinSizeSM + token.switchPadding * 2, "px)")
  }), _$concat2)), _defineProperty(_$concat3, "".concat(componentCls, "-handle"), {
    insetInlineStart: "calc(100% - ".concat(token.switchPinSizeSM + token.switchPadding, "px)")
  }), _$concat3)), _defineProperty(_$concat4, "&:not(".concat(componentCls, "-disabled):active"), (_not$concat = {}, _defineProperty(_not$concat, "&:not(".concat(componentCls, "-checked) ").concat(switchInnerCls), _defineProperty({}, "".concat(switchInnerCls, "-unchecked"), {
    marginInlineStart: token.switchInnerMarginMaxSM + token.marginXXS / 2,
    marginInlineEnd: token.switchInnerMarginMinSM - token.marginXXS / 2
  })), _defineProperty(_not$concat, "&".concat(componentCls, "-checked ").concat(switchInnerCls), _defineProperty({}, "".concat(switchInnerCls, "-checked"), {
    marginInlineStart: token.switchInnerMarginMinSM - token.marginXXS / 2,
    marginInlineEnd: token.switchInnerMarginMaxSM + token.marginXXS / 2
  })), _not$concat)), _$concat4)));
};

var genSwitchLoadingStyle = function genSwitchLoadingStyle(token) {
  var _componentCls2;

  var componentCls = token.componentCls;
  return _defineProperty({}, componentCls, (_componentCls2 = {}, _defineProperty(_componentCls2, "".concat(componentCls, "-loading-icon").concat(token.iconCls), {
    position: 'relative',
    top: (token.switchPinSize - token.fontSize) / 2,
    color: token.switchLoadingIconColor,
    verticalAlign: 'top'
  }), _defineProperty(_componentCls2, "&".concat(componentCls, "-checked ").concat(componentCls, "-loading-icon"), {
    color: token.switchColor
  }), _componentCls2));
};

var genSwitchHandleStyle = function genSwitchHandleStyle(token) {
  var _not$concat2, _componentCls3;

  var componentCls = token.componentCls;
  var switchHandleCls = "".concat(componentCls, "-handle");
  return _defineProperty({}, componentCls, (_componentCls3 = {}, _defineProperty(_componentCls3, switchHandleCls, {
    position: 'absolute',
    top: token.switchPadding,
    insetInlineStart: token.switchPadding,
    width: token.switchPinSize,
    height: token.switchPinSize,
    transition: "all ".concat(token.switchDuration, " ease-in-out"),
    '&::before': {
      position: 'absolute',
      top: 0,
      insetInlineEnd: 0,
      bottom: 0,
      insetInlineStart: 0,
      backgroundColor: token.switchBg,
      borderRadius: token.switchPinSize / 2,
      boxShadow: token.switchHandleShadow,
      transition: "all ".concat(token.switchDuration, " ease-in-out"),
      content: '""'
    }
  }), _defineProperty(_componentCls3, "&".concat(componentCls, "-checked ").concat(switchHandleCls), {
    insetInlineStart: "calc(100% - ".concat(token.switchPinSize + token.switchPadding, "px)")
  }), _defineProperty(_componentCls3, "&:not(".concat(componentCls, "-disabled):active"), (_not$concat2 = {}, _defineProperty(_not$concat2, "".concat(switchHandleCls, "::before"), {
    insetInlineEnd: token.switchHandleActiveInset,
    insetInlineStart: 0
  }), _defineProperty(_not$concat2, "&".concat(componentCls, "-checked ").concat(switchHandleCls, "::before"), {
    insetInlineEnd: 0,
    insetInlineStart: token.switchHandleActiveInset
  }), _not$concat2)), _componentCls3));
};

var genSwitchInnerStyle = function genSwitchInnerStyle(token) {
  var _switchInnerCls, _$concat$concat2, _not$concat3, _componentCls4;

  var componentCls = token.componentCls;
  var switchInnerCls = "".concat(componentCls, "-inner");
  return _defineProperty({}, componentCls, (_componentCls4 = {}, _defineProperty(_componentCls4, switchInnerCls, (_switchInnerCls = {
    display: 'block',
    overflow: 'hidden',
    borderRadius: 100
  }, _defineProperty(_switchInnerCls, "".concat(switchInnerCls, "-checked, ").concat(switchInnerCls, "-unchecked"), {
    display: 'block',
    color: token.colorTextLightSolid,
    fontSize: token.fontSizeSM,
    transition: "margin-inline-start ".concat(token.switchDuration, " ease-in-out, margin-inline-end ").concat(token.switchDuration, " ease-in-out"),
    pointerEvents: 'none'
  }), _defineProperty(_switchInnerCls, "".concat(switchInnerCls, "-checked"), {
    marginInlineStart: "calc(".concat(token.switchInnerMarginMin, "px - 100% + ").concat(token.switchPinSize + token.switchPadding * 2, "px)"),
    marginInlineEnd: "calc(".concat(token.switchInnerMarginMax, "px + 100% - ").concat(token.switchPinSize + token.switchPadding * 2, "px)")
  }), _defineProperty(_switchInnerCls, "".concat(switchInnerCls, "-unchecked"), {
    marginTop: -token.switchHeight,
    marginInlineStart: token.switchInnerMarginMax,
    marginInlineEnd: token.switchInnerMarginMin
  }), _switchInnerCls)), _defineProperty(_componentCls4, "&".concat(componentCls, "-checked ").concat(switchInnerCls), (_$concat$concat2 = {}, _defineProperty(_$concat$concat2, "".concat(switchInnerCls, "-checked"), {
    marginInlineStart: token.switchInnerMarginMin,
    marginInlineEnd: token.switchInnerMarginMax
  }), _defineProperty(_$concat$concat2, "".concat(switchInnerCls, "-unchecked"), {
    marginInlineStart: "calc(".concat(token.switchInnerMarginMax, "px + 100% - ").concat(token.switchPinSize + token.switchPadding * 2, "px)"),
    marginInlineEnd: "calc(".concat(token.switchInnerMarginMin, "px - 100% + ").concat(token.switchPinSize + token.switchPadding * 2, "px)")
  }), _$concat$concat2)), _defineProperty(_componentCls4, "&:not(".concat(componentCls, "-disabled):active"), (_not$concat3 = {}, _defineProperty(_not$concat3, "&:not(".concat(componentCls, "-checked) ").concat(switchInnerCls), _defineProperty({}, "".concat(switchInnerCls, "-unchecked"), {
    marginInlineStart: token.switchInnerMarginMax + token.marginXXS,
    marginInlineEnd: token.switchInnerMarginMin - token.marginXXS
  })), _defineProperty(_not$concat3, "&".concat(componentCls, "-checked ").concat(switchInnerCls), _defineProperty({}, "".concat(switchInnerCls, "-checked"), {
    marginInlineStart: token.switchInnerMarginMin - token.marginXXS,
    marginInlineEnd: token.switchInnerMarginMax + token.marginXXS
  })), _not$concat3)), _componentCls4));
};

var genSwitchStyle = function genSwitchStyle(token) {
  var _extends3;

  var componentCls = token.componentCls;
  return _defineProperty({}, componentCls, _extends(_extends(_extends(_extends({}, resetComponent(token)), _defineProperty({
    position: 'relative',
    display: 'inline-block',
    boxSizing: 'border-box',
    minWidth: token.switchMinWidth,
    height: token.switchHeight,
    lineHeight: "".concat(token.switchHeight, "px"),
    verticalAlign: 'middle',
    background: token.colorTextQuaternary,
    border: '0',
    borderRadius: 100,
    cursor: 'pointer',
    transition: "all ".concat(token.motionDurationFast),
    userSelect: 'none'
  }, "&:hover:not(".concat(componentCls, "-disabled)"), {
    background: token.colorTextTertiary
  })), genFocusStyle(token)), (_extends3 = {}, _defineProperty(_extends3, "&".concat(componentCls, "-checked"), _defineProperty({
    background: token.switchColor
  }, "&:hover:not(".concat(componentCls, "-disabled)"), {
    background: token.colorPrimaryHover
  })), _defineProperty(_extends3, "&".concat(componentCls, "-loading, &").concat(componentCls, "-disabled"), {
    cursor: 'not-allowed',
    opacity: token.switchDisabledOpacity,
    '*': {
      boxShadow: 'none',
      cursor: 'not-allowed'
    }
  }), _defineProperty(_extends3, "&".concat(componentCls, "-rtl"), {
    direction: 'rtl'
  }), _extends3)));
}; // ============================== Export ==============================


export default genComponentStyleHook('Switch', function (token) {
  var switchHeight = token.fontSize * token.lineHeight;
  var switchHeightSM = token.controlHeight / 2;
  var switchPadding = token.paddingXXS / 2;
  var switchPinSize = switchHeight - switchPadding * 2;
  var switchPinSizeSM = switchHeightSM - switchPadding * 2;
  var switchToken = mergeToken(token, {
    switchMinWidth: switchPinSize * 2 + switchPadding * 4,
    switchHeight: switchHeight,
    switchDuration: token.motionDurationMid,
    switchColor: token.colorPrimary,
    switchDisabledOpacity: token.opacityLoading,
    switchInnerMarginMin: switchPinSize / 2,
    switchInnerMarginMax: switchPinSize + switchPadding + token.paddingXXS,
    switchPadding: switchPadding,
    switchPinSize: switchPinSize,
    switchBg: token.colorBgContainer,
    switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2,
    switchHeightSM: switchHeightSM,
    switchInnerMarginMinSM: switchPinSizeSM / 2,
    switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + token.paddingXXS,
    switchPinSizeSM: switchPinSizeSM,
    switchHandleShadow: "0 2px 4px 0 ".concat(new TinyColor('#00230b').setAlpha(0.2).toRgbString()),
    switchLoadingIconSize: token.fontSizeIcon * 0.75,
    switchLoadingIconColor: "rgba(0, 0, 0, ".concat(token.opacityLoading, ")"),
    switchHandleActiveInset: '-30%'
  });
  return [genSwitchStyle(switchToken), // inner style
  genSwitchInnerStyle(switchToken), // handle style
  genSwitchHandleStyle(switchToken), // loading style
  genSwitchLoadingStyle(switchToken), // small style
  genSwitchSmallStyle(switchToken)];
});