123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235 |
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _cssinjs = require("@ant-design/cssinjs");
- // =====================================================
- // == Outlined ==
- // =====================================================
- const genBaseOutlinedStyle = (token, options) => {
- const {
- componentCls,
- antCls,
- controlOutlineWidth
- } = token;
- return {
- [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
- border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${options.borderColor}`,
- background: token.selectorBg
- },
- [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: {
- [`&:hover ${componentCls}-selector`]: {
- borderColor: options.hoverBorderHover
- },
- [`${componentCls}-focused& ${componentCls}-selector`]: {
- borderColor: options.activeBorderColor,
- boxShadow: `0 0 0 ${(0, _cssinjs.unit)(controlOutlineWidth)} ${options.activeOutlineColor}`,
- outline: 0
- },
- [`${componentCls}-prefix`]: {
- color: options.color
- }
- }
- };
- };
- const genOutlinedStatusStyle = (token, options) => ({
- [`&${token.componentCls}-status-${options.status}`]: Object.assign({}, genBaseOutlinedStyle(token, options))
- });
- const genOutlinedStyle = token => ({
- '&-outlined': Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseOutlinedStyle(token, {
- borderColor: token.colorBorder,
- hoverBorderHover: token.hoverBorderColor,
- activeBorderColor: token.activeBorderColor,
- activeOutlineColor: token.activeOutlineColor,
- color: token.colorText
- })), genOutlinedStatusStyle(token, {
- status: 'error',
- borderColor: token.colorError,
- hoverBorderHover: token.colorErrorHover,
- activeBorderColor: token.colorError,
- activeOutlineColor: token.colorErrorOutline,
- color: token.colorError
- })), genOutlinedStatusStyle(token, {
- status: 'warning',
- borderColor: token.colorWarning,
- hoverBorderHover: token.colorWarningHover,
- activeBorderColor: token.colorWarning,
- activeOutlineColor: token.colorWarningOutline,
- color: token.colorWarning
- })), {
- [`&${token.componentCls}-disabled`]: {
- [`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
- background: token.colorBgContainerDisabled,
- color: token.colorTextDisabled
- }
- },
- [`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
- background: token.multipleItemBg,
- border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
- }
- })
- });
- // =====================================================
- // == Filled ==
- // =====================================================
- const genBaseFilledStyle = (token, options) => {
- const {
- componentCls,
- antCls
- } = token;
- return {
- [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
- background: options.bg,
- border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} transparent`,
- color: options.color
- },
- [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: {
- [`&:hover ${componentCls}-selector`]: {
- background: options.hoverBg
- },
- [`${componentCls}-focused& ${componentCls}-selector`]: {
- background: token.selectorBg,
- borderColor: options.activeBorderColor,
- outline: 0
- }
- }
- };
- };
- const genFilledStatusStyle = (token, options) => ({
- [`&${token.componentCls}-status-${options.status}`]: Object.assign({}, genBaseFilledStyle(token, options))
- });
- const genFilledStyle = token => ({
- '&-filled': Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseFilledStyle(token, {
- bg: token.colorFillTertiary,
- hoverBg: token.colorFillSecondary,
- activeBorderColor: token.activeBorderColor,
- color: token.colorText
- })), genFilledStatusStyle(token, {
- status: 'error',
- bg: token.colorErrorBg,
- hoverBg: token.colorErrorBgHover,
- activeBorderColor: token.colorError,
- color: token.colorError
- })), genFilledStatusStyle(token, {
- status: 'warning',
- bg: token.colorWarningBg,
- hoverBg: token.colorWarningBgHover,
- activeBorderColor: token.colorWarning,
- color: token.colorWarning
- })), {
- [`&${token.componentCls}-disabled`]: {
- [`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
- borderColor: token.colorBorder,
- background: token.colorBgContainerDisabled,
- color: token.colorTextDisabled
- }
- },
- [`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
- background: token.colorBgContainer,
- border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.colorSplit}`
- }
- })
- });
- // =====================================================
- // == Borderless ==
- // =====================================================
- const genBorderlessStyle = token => ({
- '&-borderless': {
- [`${token.componentCls}-selector`]: {
- background: 'transparent',
- border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} transparent`
- },
- [`&${token.componentCls}-disabled`]: {
- [`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
- color: token.colorTextDisabled
- }
- },
- [`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
- background: token.multipleItemBg,
- border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
- },
- // Status
- [`&${token.componentCls}-status-error`]: {
- [`${token.componentCls}-prefix, ${token.componentCls}-selection-item`]: {
- color: token.colorError
- }
- },
- [`&${token.componentCls}-status-warning`]: {
- [`${token.componentCls}-prefix, ${token.componentCls}-selection-item`]: {
- color: token.colorWarning
- }
- }
- }
- });
- // =====================================================
- // == Underlined ==
- // =====================================================
- const genBaseUnderlinedStyle = (token, options) => {
- const {
- componentCls,
- antCls
- } = token;
- return {
- [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: {
- borderWidth: `0 0 ${(0, _cssinjs.unit)(token.lineWidth)} 0`,
- borderStyle: `none none ${token.lineType} none`,
- borderColor: options.borderColor,
- background: token.selectorBg,
- borderRadius: 0
- },
- [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: {
- [`&:hover ${componentCls}-selector`]: {
- borderColor: options.hoverBorderHover
- },
- [`${componentCls}-focused& ${componentCls}-selector`]: {
- borderColor: options.activeBorderColor,
- outline: 0
- },
- [`${componentCls}-prefix`]: {
- color: options.color
- }
- }
- };
- };
- const genUnderlinedStatusStyle = (token, options) => ({
- [`&${token.componentCls}-status-${options.status}`]: Object.assign({}, genBaseUnderlinedStyle(token, options))
- });
- const genUnderlinedStyle = token => ({
- '&-underlined': Object.assign(Object.assign(Object.assign(Object.assign({}, genBaseUnderlinedStyle(token, {
- borderColor: token.colorBorder,
- hoverBorderHover: token.hoverBorderColor,
- activeBorderColor: token.activeBorderColor,
- activeOutlineColor: token.activeOutlineColor,
- color: token.colorText
- })), genUnderlinedStatusStyle(token, {
- status: 'error',
- borderColor: token.colorError,
- hoverBorderHover: token.colorErrorHover,
- activeBorderColor: token.colorError,
- activeOutlineColor: token.colorErrorOutline,
- color: token.colorError
- })), genUnderlinedStatusStyle(token, {
- status: 'warning',
- borderColor: token.colorWarning,
- hoverBorderHover: token.colorWarningHover,
- activeBorderColor: token.colorWarning,
- activeOutlineColor: token.colorWarningOutline,
- color: token.colorWarning
- })), {
- [`&${token.componentCls}-disabled`]: {
- [`&:not(${token.componentCls}-customize-input) ${token.componentCls}-selector`]: {
- color: token.colorTextDisabled
- }
- },
- [`&${token.componentCls}-multiple ${token.componentCls}-selection-item`]: {
- background: token.multipleItemBg,
- border: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${token.multipleItemBorderColor}`
- }
- })
- });
- const genVariantsStyle = token => ({
- [token.componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({}, genOutlinedStyle(token)), genFilledStyle(token)), genBorderlessStyle(token)), genUnderlinedStyle(token))
- });
- var _default = exports.default = genVariantsStyle;
|