antd/es/segmented/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 { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style'; // ============================== Mixins ==============================

function segmentedDisabledItem(cls, token) {
  return _defineProperty({}, "".concat(cls, ", ").concat(cls, ":hover, ").concat(cls, ":focus"), {
    color: token.colorTextDisabled,
    cursor: 'not-allowed'
  });
}

function getSegmentedItemSelectedStyle(token) {
  return {
    backgroundColor: token.bgColorSelected,
    boxShadow: token.boxShadow
  };
}

var segmentedTextEllipsisCss = {
  overflow: 'hidden',
  // handle text ellipsis
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  wordBreak: 'keep-all'
}; // ============================== Styles ==============================

var genSegmentedStyle = function genSegmentedStyle(token) {
  var _$concat, _lg, _sm, _extends2, _extends4;

  var componentCls = token.componentCls;
  return _defineProperty({}, componentCls, _extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), (_extends2 = {
    display: 'inline-block',
    padding: token.segmentedContainerPadding,
    color: token.labelColor,
    backgroundColor: token.bgColor,
    borderRadius: token.controlRadius,
    transition: "all ".concat(token.motionDurationFast, " ").concat(token.motionEaseInOut)
  }, _defineProperty(_extends2, "".concat(componentCls, "-group"), {
    position: 'relative',
    display: 'flex',
    alignItems: 'stretch',
    justifyItems: 'flex-start',
    width: '100%'
  }), _defineProperty(_extends2, '&&-rtl', {
    direction: 'rtl'
  }), _defineProperty(_extends2, '&&-block', {
    display: 'flex'
  }), _defineProperty(_extends2, "&&-block ".concat(componentCls, "-item"), {
    flex: 1,
    minWidth: 0
  }), _defineProperty(_extends2, "".concat(componentCls, "-item"), (_$concat = {
    position: 'relative',
    textAlign: 'center',
    cursor: 'pointer',
    transition: "color ".concat(token.motionDurationFast, " ").concat(token.motionEaseInOut),
    borderRadius: token.controlRadiusSM,
    '&-selected': _extends(_extends({}, getSegmentedItemSelectedStyle(token)), {
      color: token.labelColorHover
    }),
    '&::after': {
      content: '""',
      position: 'absolute',
      width: '100%',
      height: '100%',
      top: 0,
      insetInlineStart: 0,
      borderRadius: token.controlRadiusSM,
      transition: "background-color ".concat(token.motionDurationFast)
    }
  }, _defineProperty(_$concat, "&:hover:not(".concat(componentCls, "-item-selected):not(").concat(componentCls, "-item-disabled)"), {
    color: token.labelColorHover,
    '&::after': {
      backgroundColor: token.bgColorHover
    }
  }), _defineProperty(_$concat, '&-label', _extends({
    minHeight: token.controlHeight - token.segmentedContainerPadding * 2,
    lineHeight: "".concat(token.controlHeight - token.segmentedContainerPadding * 2, "px"),
    padding: "0 ".concat(token.segmentedPaddingHorizontal, "px")
  }, segmentedTextEllipsisCss)), _defineProperty(_$concat, '&-icon + *', {
    marginInlineEnd: token.marginSM / 2
  }), _defineProperty(_$concat, '&-input', {
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineStart: 0,
    width: 0,
    height: 0,
    opacity: 0,
    pointerEvents: 'none'
  }), _$concat)), _defineProperty(_extends2, '&&-lg', (_lg = {
    borderRadius: token.controlRadiusLG
  }, _defineProperty(_lg, "".concat(componentCls, "-item-label"), {
    minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
    lineHeight: "".concat(token.controlHeightLG - token.segmentedContainerPadding * 2, "px"),
    padding: "0 ".concat(token.segmentedPaddingHorizontal, "px"),
    fontSize: token.fontSizeLG
  }), _defineProperty(_lg, "".concat(componentCls, "-item-selected"), {
    borderRadius: token.controlRadius
  }), _lg)), _defineProperty(_extends2, '&&-sm', (_sm = {
    borderRadius: token.controlRadiusSM
  }, _defineProperty(_sm, "".concat(componentCls, "-item-label"), {
    minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
    lineHeight: "".concat(token.controlHeightSM - token.segmentedContainerPadding * 2, "px"),
    padding: "0 ".concat(token.segmentedPaddingHorizontalSM, "px")
  }), _defineProperty(_sm, "".concat(componentCls, "-item-selected"), {
    borderRadius: token.controlRadiusXS
  }), _sm)), _extends2)), segmentedDisabledItem("&-disabled ".concat(componentCls, "-item"), token)), segmentedDisabledItem("".concat(componentCls, "-item-disabled"), token)), (_extends4 = {}, _defineProperty(_extends4, "".concat(componentCls, "-thumb"), _extends(_extends({}, getSegmentedItemSelectedStyle(token)), _defineProperty({
    position: 'absolute',
    insetBlockStart: 0,
    insetInlineStart: 0,
    width: 0,
    height: '100%',
    padding: "".concat(token.paddingXXS, "px 0"),
    borderRadius: token.controlRadiusSM
  }, "& ~ ".concat(componentCls, "-item:not(").concat(componentCls, "-item-selected):not(").concat(componentCls, "-item-disabled)::after"), {
    backgroundColor: 'transparent'
  }))), _defineProperty(_extends4, "".concat(componentCls, "-thumb-motion-appear-active"), {
    transition: "transform ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut, ", width ").concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut),
    willChange: 'transform, width'
  }), _extends4)));
}; // ============================== Export ==============================


export default genComponentStyleHook('Segmented', function (token) {
  var lineWidthBold = token.lineWidthBold,
      controlLineWidth = token.controlLineWidth,
      colorTextLabel = token.colorTextLabel,
      colorText = token.colorText,
      colorFillSecondary = token.colorFillSecondary,
      colorBgContainer = token.colorBgContainer;
  var segmentedToken = mergeToken(token, {
    segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth,
    segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth,
    segmentedContainerPadding: lineWidthBold,
    labelColor: colorTextLabel,
    labelColorHover: colorText,
    bgColor: colorFillSecondary,
    bgColorHover: colorFillSecondary,
    bgColorSelected: colorBgContainer
  });
  return [genSegmentedStyle(segmentedToken)];
});