@ant-design/x/es/sources/style/index.js

Craft AI-driven interfaces effortlessly

import { mergeToken } from '@ant-design/cssinjs-utils';
import { genCollapseMotion } from "../../style";
import { genStyleHooks } from "../../theme/genStyleUtils";

// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default

const genSourcesStyle = token => {
  const {
    componentCls,
    paddingXS,
    fontSizeSM,
    marginXXS,
    marginXS,
    marginSM,
    colorTextSecondary,
    colorText,
    fontSize,
    colorLink,
    lineHeight,
    colorFillSecondary,
    controlHeightXS,
    paddingXXS,
    calc
  } = token;
  return {
    [componentCls]: {
      [`${componentCls}-title-wrapper`]: {
        width: 'fit-content',
        display: 'flex',
        flexDirection: 'row',
        gridGap: paddingXS,
        alignItems: 'center',
        fontSize: fontSize,
        color: colorTextSecondary,
        lineHeight: lineHeight,
        cursor: 'pointer',
        marginBottom: marginSM
      },
      [`${componentCls}-title-down-icon`]: {
        fontSize: fontSizeSM,
        svg: {
          transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`
        }
      },
      [`${componentCls}-icon-position-end`]: {
        [`${componentCls}-title-down-icon`]: {
          order: 1
        }
      },
      [`${componentCls}-list`]: {
        listStyle: 'none',
        margin: 0,
        padding: 0,
        'ul, ol': {
          margin: 0,
          padding: 0,
          listStyle: 'none'
        }
      },
      [`${componentCls}-list-item`]: {
        marginBottom: marginXS
      },
      [`${componentCls}-link`]: {
        color: colorText,
        display: 'flex',
        gap: marginXXS,
        '&:hover': {
          color: colorLink
        }
      },
      [`&${componentCls}-inline`]: {
        display: 'inline-flex',
        [`${componentCls}-title-wrapper`]: {
          background: colorFillSecondary,
          borderRadius: calc(controlHeightXS).div(2).equal(),
          height: controlHeightXS,
          lineHeight: controlHeightXS,
          fontSize: calc(fontSizeSM).sub(2).equal(),
          color: colorTextSecondary,
          fontWeight: 400,
          paddingInline: calc(paddingXXS).add(2).equal(),
          paddingBlock: 0,
          marginInline: marginXXS,
          marginBlock: 0
        }
      },
      [`${componentCls}-carousel-title`]: {
        display: 'flex',
        justifyContent: 'space-between'
      },
      [`${componentCls}-carousel-btn`]: {
        display: 'inline-flex',
        cursor: 'pointer',
        height: token.controlHeight,
        borderRadius: token.borderRadius,
        paddingInline: paddingXS,
        transition: `background ${token.motionDurationMid} ${token.motionEaseInOut}`,
        [`&:not(${componentCls}-carousel-btn-disabled):hover`]: {
          background: colorFillSecondary
        }
      },
      [`${componentCls}-carousel-btn-disabled`]: {
        opacity: 0.4,
        cursor: 'text'
      },
      [`${componentCls}-carousel-item`]: {
        padding: paddingXS,
        boxSizing: 'border-box',
        fontSize: fontSize,
        lineHeight: lineHeight,
        cursor: 'pointer',
        '&-title-wrapper': {
          gridGap: marginXXS,
          display: 'flex'
        },
        '&-description': {
          opacity: 0.8,
          display: '-webkit-box',
          overflow: 'hidden',
          WebkitBoxOrient: 'vertical',
          WebkitLineClamp: 3,
          textOverflow: 'ellipsis'
        }
      },
      [`&${componentCls}-rtl`]: {
        direction: 'rtl'
      }
    }
  };
};
export const prepareComponentToken = () => ({});
export default genStyleHooks('Sources', token => {
  const SourcesToken = mergeToken(token, {});
  return [genSourcesStyle(SourcesToken), genCollapseMotion(SourcesToken)];
}, prepareComponentToken);