antd-hz/lib/modal/style/confirm.js

华卓科技基于 antd 5.0 定制的组件库

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _ = require(".");
var _style = require("../../style");
var _internal = require("../../theme/internal");
// Style as confirm component

// ============================= Confirm ==============================
const genModalConfirmStyle = token => {
  const {
    componentCls,
    // titleFontSize,
    titleLineHeight,
    modalConfirmIconSize,
    // fontSize,
    lineHeight,
    modalTitleHeight,
    fontHeight
    // confirmBodyPadding,
  } = token;
  const confirmComponentCls = `${componentCls}-confirm`;
  return {
    [confirmComponentCls]: {
      '&-rtl': {
        direction: 'rtl'
      },
      [`${token.antCls}-modal-close`]: {
        height: '16px !important',
        width: '16px !important',
        right: '16px !important',
        top: '12px !important',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        [`span`]: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        },
        '&:hover': {
          backgroundColor: 'transparent !important'
        }
      },
      [`${token.antCls}-modal-title`]: {
        backgroundColor: 'transparent !important'
      },
      [`${token.antCls}-modal-header`]: {
        // display: 'none',
        height: '0',
        backgroundColor: 'transparent !important'
      },
      [`${confirmComponentCls}-body-wrapper`]: Object.assign({}, (0, _style.clearFix)()),
      [`&${componentCls} ${componentCls}-body`]: {
        // padding: confirmBodyPadding,
        padding: '24px 26px 18px'
      },
      // ====================== Body ======================
      [`${confirmComponentCls}-body`]: {
        display: 'flex',
        flexWrap: 'nowrap',
        alignItems: 'start',
        [`> ${token.iconCls}`]: {
          flex: 'none',
          fontSize: modalConfirmIconSize,
          marginInlineEnd: token.confirmIconMarginInlineEnd,
          marginTop: token.calc(token.calc(fontHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
        },
        [`&-has-title > ${token.iconCls}`]: {
          marginTop: token.calc(token.calc(modalTitleHeight).sub(modalConfirmIconSize).equal()).div(2).equal()
        }
      },
      [`${confirmComponentCls}-paragraph`]: {
        display: 'flex',
        flexDirection: 'column',
        flex: 'auto',
        rowGap: token.marginXS
      },
      // https://github.com/ant-design/ant-design/issues/48159
      [`${token.iconCls} + ${confirmComponentCls}-paragraph`]: {
        maxWidth: `calc(100% - ${(0, _cssinjs.unit)(token.calc(token.modalConfirmIconSize).add(token.marginSM).equal())})`
      },
      [`${confirmComponentCls}-title`]: {
        color: token.colorTextHeading,
        fontWeight: token.fontWeightStrong,
        // fontSize: titleFontSize,
        fontSize: '14px',
        lineHeight: titleLineHeight
      },
      [`${confirmComponentCls}-content`]: {
        color: token.colorText,
        fontSize: '12px',
        lineHeight
      },
      // ===================== Footer =====================
      [`${confirmComponentCls}-btns`]: {
        textAlign: 'center',
        // marginTop: token.confirmBtnsMarginTop,
        marginTop: '18px',
        height: '26px',
        [`${token.antCls}-btn`]: {
          paddingTop: 0,
          paddingBottom: 0,
          minWidth: 90
        },
        [`${token.antCls}-btn, ${token.antCls}-btn *`]: {
          height: '26px !important',
          lineHeight: '24px !important',
          overflow: 'hidden'
        },
        [`${token.antCls}-btn + ${token.antCls}-btn`]: {
          marginBottom: 0,
          marginInlineStart: 10
        }
      }
    },
    [`${confirmComponentCls}-error ${confirmComponentCls}-body > ${token.iconCls}`]: {
      color: token.colorError
    },
    [`${confirmComponentCls}-warning ${confirmComponentCls}-body > ${token.iconCls},
        ${confirmComponentCls}-confirm ${confirmComponentCls}-body > ${token.iconCls}`]: {
      color: token.colorWarning
    },
    [`${confirmComponentCls}-info ${confirmComponentCls}-body > ${token.iconCls}`]: {
      color: token.colorInfo
    },
    [`${confirmComponentCls}-success ${confirmComponentCls}-body > ${token.iconCls}`]: {
      color: token.colorSuccess
    }
  };
};
// ============================== Export ==============================
var _default = exports.default = (0, _internal.genSubStyleComponent)(['Modal', 'confirm'], token => {
  const modalToken = (0, _.prepareToken)(token);
  return [genModalConfirmStyle(modalToken)];
}, _.prepareComponentToken, {
  // confirm is weak than modal since no conflict here
  order: -1000
});