antd/es/card/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { genComponentStyleHook, mergeToken } from '../../theme';
import { clearFix, resetComponent } from '../../style'; // ============================== Styles ==============================
// ============================== Head ==============================

var genCardHeadStyle = function genCardHeadStyle(token) {
  var antCls = token.antCls,
      componentCls = token.componentCls,
      cardHeadHeight = token.cardHeadHeight,
      cardHeadPadding = token.cardHeadPadding,
      cardPaddingBase = token.cardPaddingBase,
      cardHeadTabsMarginBottom = token.cardHeadTabsMarginBottom;
  return _extends(_extends({
    minHeight: cardHeadHeight,
    marginBottom: -1,
    padding: "0 ".concat(cardPaddingBase, "px"),
    color: token.colorTextHeading,
    fontWeight: token.fontWeightStrong,
    fontSize: token.fontSizeLG,
    background: 'transparent',
    borderBottom: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorderSecondary),
    borderRadius: "".concat(token.radiusLG, "px ").concat(token.radiusLG, "px 0 0")
  }, clearFix()), _defineProperty({
    '&-wrapper': {
      display: 'flex',
      alignItems: 'center'
    },
    '&-title': _defineProperty({
      display: 'inline-block',
      flex: 1,
      padding: "".concat(cardHeadPadding, "px 0"),
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis'
    }, "\n          > ".concat(componentCls, "-typography,\n          > ").concat(componentCls, "-typography-edit-content\n        "), {
      insetInlineStart: 0,
      marginTop: 0,
      marginBottom: 0
    })
  }, "".concat(antCls, "-tabs-top"), {
    clear: 'both',
    marginBottom: cardHeadTabsMarginBottom,
    color: token.colorText,
    fontWeight: 'normal',
    fontSize: token.fontSizeBase,
    '&-bar': {
      borderBottom: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorBorderSecondary)
    }
  }));
}; // ============================== Grid ==============================


var genCardGridStyle = function genCardGridStyle(token) {
  var cardPaddingBase = token.cardPaddingBase,
      colorBorderSecondary = token.colorBorderSecondary,
      cardShadow = token.cardShadow,
      lineWidth = token.lineWidth;
  return {
    width: '33.33%',
    padding: cardPaddingBase,
    border: 0,
    borderRadius: 0,
    boxShadow: "\n      ".concat(lineWidth, "px 0 0 0 ").concat(colorBorderSecondary, ",\n      0 ").concat(lineWidth, "px 0 0 ").concat(colorBorderSecondary, ",\n      ").concat(lineWidth, "px ").concat(lineWidth, "px 0 0 ").concat(colorBorderSecondary, ",\n      ").concat(lineWidth, "px 0 0 0 ").concat(colorBorderSecondary, " inset,\n      0 ").concat(lineWidth, "px 0 0 ").concat(colorBorderSecondary, " inset;\n    "),
    transition: "all ".concat(token.motionDurationFast),
    '&-hoverable:hover': {
      position: 'relative',
      zIndex: 1,
      boxShadow: cardShadow
    }
  };
}; // ============================== Actions ==============================


var genCardActionsStyle = function genCardActionsStyle(token) {
  var _span;

  var componentCls = token.componentCls,
      iconCls = token.iconCls,
      cardActionsLiMargin = token.cardActionsLiMargin,
      cardActionsIconSize = token.cardActionsIconSize,
      colorBorderSecondary = token.colorBorderSecondary;
  return _extends(_extends({
    margin: 0,
    padding: 0,
    listStyle: 'none',
    background: token.colorBgContainer,
    borderTop: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(colorBorderSecondary),
    display: 'flex'
  }, clearFix()), {
    '& > li': {
      margin: cardActionsLiMargin,
      color: token.colorTextDescription,
      textAlign: 'center',
      '> span': (_span = {
        position: 'relative',
        display: 'block',
        minWidth: token.cardActionsIconSize * 2,
        fontSize: token.fontSize,
        lineHeight: token.lineHeight,
        cursor: 'pointer',
        '&:hover': {
          color: token.colorPrimary,
          transition: "color ".concat(token.motionDurationFast)
        }
      }, _defineProperty(_span, "a:not(".concat(componentCls, "-btn), > ").concat(iconCls), {
        display: 'inline-block',
        width: '100%',
        color: token.colorTextDescription,
        lineHeight: "".concat(token.fontSize * token.lineHeight, "px"),
        transition: "color ".concat(token.motionDurationFast),
        '&:hover': {
          color: token.colorPrimary
        }
      }), _defineProperty(_span, "> ".concat(iconCls), {
        fontSize: cardActionsIconSize,
        lineHeight: "".concat(cardActionsIconSize * token.lineHeight, "px")
      }), _span),
      '&:not(:last-child)': {
        borderInlineEnd: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(colorBorderSecondary)
      }
    }
  });
}; // ============================== Meta ==============================


var genCardMetaStyle = function genCardMetaStyle(token) {
  return _extends(_extends({
    margin: "-".concat(token.marginXXS, "px 0"),
    display: 'flex'
  }, clearFix()), {
    '&-avatar': {
      paddingInlineEnd: token.padding
    },
    '&-detail': {
      overflow: 'hidden',
      '> div:not(:last-child)': {
        marginBottom: token.marginXS
      }
    },
    '&-title': {
      overflow: 'hidden',
      color: token.colorTextHeading,
      fontWeight: token.fontWeightStrong,
      fontSize: token.fontSizeLG,
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis'
    },
    '&-description': {
      color: token.colorTextDescription
    }
  });
}; // ============================== Inner ==============================


var genCardTypeInnerStyle = function genCardTypeInnerStyle(token) {
  var _ref;

  var componentCls = token.componentCls,
      cardPaddingBase = token.cardPaddingBase,
      colorFillAlter = token.colorFillAlter,
      cardInnerHeadPadding = token.cardInnerHeadPadding;
  return _ref = {}, _defineProperty(_ref, "".concat(componentCls, "-head"), {
    padding: "0 ".concat(cardPaddingBase, "px"),
    background: colorFillAlter,
    '&-title': {
      padding: "".concat(cardInnerHeadPadding, "px 0"),
      fontSize: token.fontSizeBase
    }
  }), _defineProperty(_ref, "".concat(componentCls, "-body"), {
    padding: "".concat(token.padding, "px ").concat(cardPaddingBase, "px")
  }), _defineProperty(_ref, "".concat(componentCls, "-extra"), {
    padding: "".concat(cardInnerHeadPadding + 1.5, "px 0")
  }), _ref;
}; // ============================== Loading ==============================


var genCardLoadingStyle = function genCardLoadingStyle(token) {
  var componentCls = token.componentCls;
  return _defineProperty({
    overflow: 'hidden'
  }, "".concat(componentCls, "-body"), {
    userSelect: 'none'
  });
}; // ============================== Basic ==============================


var genCardStyle = function genCardStyle(token) {
  var _extends3, _$concat2, _$concat3, _ref3;

  var componentCls = token.componentCls,
      cardShadow = token.cardShadow,
      cardHeadHeight = token.cardHeadHeight,
      cardHeadPadding = token.cardHeadPadding,
      cardPaddingBase = token.cardPaddingBase,
      colorBorderSecondary = token.colorBorderSecondary,
      boxShadow = token.boxShadow;
  return _ref3 = {}, _defineProperty(_ref3, componentCls, _extends(_extends({}, resetComponent(token)), (_extends3 = {
    position: 'relative',
    background: token.colorBgContainer,
    borderRadius: token.radiusLG
  }, _defineProperty(_extends3, "&:not(".concat(componentCls, "-bordered)"), {
    boxShadow: boxShadow
  }), _defineProperty(_extends3, "".concat(componentCls, "-head"), genCardHeadStyle(token)), _defineProperty(_extends3, "".concat(componentCls, "-extra"), {
    // https://stackoverflow.com/a/22429853/3040605
    marginInlineStart: 'auto',
    padding: '',
    color: '',
    fontWeight: 'normal',
    fontSize: token.fontSizeBase
  }), _defineProperty(_extends3, "".concat(componentCls, "-body"), _extends({
    padding: cardPaddingBase
  }, clearFix())), _defineProperty(_extends3, "".concat(componentCls, "-grid"), genCardGridStyle(token)), _defineProperty(_extends3, "".concat(componentCls, "-cover"), {
    '> *': {
      display: 'block',
      width: '100%'
    },
    img: {
      borderRadius: "".concat(token.radiusLG, "px ").concat(token.radiusLG, "px 0 0")
    }
  }), _defineProperty(_extends3, "".concat(componentCls, "-actions"), genCardActionsStyle(token)), _defineProperty(_extends3, "".concat(componentCls, "-meta"), genCardMetaStyle(token)), _extends3))), _defineProperty(_ref3, "".concat(componentCls, "-bordered"), _defineProperty({
    border: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(colorBorderSecondary)
  }, "".concat(componentCls, "-cover"), {
    marginTop: -1,
    marginInlineStart: -1,
    marginInlineEnd: -1
  })), _defineProperty(_ref3, "".concat(componentCls, "-hoverable"), {
    cursor: 'pointer',
    transition: "box-shadow ".concat(token.motionDurationFast, ", border-color ").concat(token.motionDurationFast),
    '&:hover': {
      borderColor: 'transparent',
      boxShadow: cardShadow
    }
  }), _defineProperty(_ref3, "".concat(componentCls, "-contain-grid"), (_$concat2 = {}, _defineProperty(_$concat2, "".concat(componentCls, "-body"), {
    display: 'flex',
    flexWrap: 'wrap'
  }), _defineProperty(_$concat2, "&:not(".concat(componentCls, "-loading) ").concat(componentCls, "-body"), {
    marginBlockStart: -token.lineWidth,
    marginInlineStart: -token.lineWidth,
    padding: 0
  }), _$concat2)), _defineProperty(_ref3, "".concat(componentCls, "-contain-tabs"), _defineProperty({}, "> ".concat(componentCls, "-head"), (_$concat3 = {}, _defineProperty(_$concat3, "".concat(componentCls, "-head-title"), {
    minHeight: cardHeadHeight - cardHeadPadding,
    paddingBottom: 0
  }), _defineProperty(_$concat3, "".concat(componentCls, "-extra"), {
    paddingBottom: 0
  }), _$concat3))), _defineProperty(_ref3, "".concat(componentCls, "-type-inner"), genCardTypeInnerStyle(token)), _defineProperty(_ref3, "".concat(componentCls, "-loading"), genCardLoadingStyle(token)), _defineProperty(_ref3, "".concat(componentCls, "-rtl"), {
    direction: 'rtl'
  }), _ref3;
}; // ============================== Size ==============================


var genCardSizeStyle = function genCardSizeStyle(token) {
  var _$concat5, _$concat7;

  var componentCls = token.componentCls,
      cardPaddingBase = token.cardPaddingBase,
      cardHeadPadding = token.cardHeadPadding;
  var cardPaddingBaseSM = cardPaddingBase / 2;
  var cardHeadPaddingSM = cardHeadPadding / 2;
  return _defineProperty({}, "".concat(componentCls, "-small"), (_$concat7 = {}, _defineProperty(_$concat7, "> ".concat(componentCls, "-head"), _defineProperty({
    minHeight: cardHeadPaddingSM * 2 + token.fontSize,
    padding: "0 ".concat(cardPaddingBaseSM, "px"),
    fontSize: token.fontSize
  }, "> ".concat(componentCls, "-head-wrapper"), (_$concat5 = {}, _defineProperty(_$concat5, "> ".concat(componentCls, "-head-title"), {
    padding: "".concat(cardHeadPaddingSM, "px 0")
  }), _defineProperty(_$concat5, "> ".concat(componentCls, "-extra"), {
    padding: "".concat(cardHeadPaddingSM, "px 0"),
    fontSize: token.fontSize
  }), _$concat5))), _defineProperty(_$concat7, "> ".concat(componentCls, "-body"), {
    padding: cardPaddingBaseSM
  }), _$concat7));
}; // ============================== Export ==============================


export default genComponentStyleHook('Card', function (token) {
  var cardHeadPadding = token.padding;
  var cardToken = mergeToken(token, {
    cardShadow: token.boxShadowCard,
    cardHeadHeight: token.fontSizeLG + cardHeadPadding * 2,
    cardHeadPadding: cardHeadPadding,
    cardPaddingBase: token.paddingLG,
    cardHeadTabsMarginBottom: -token.padding - token.lineWidth,
    cardInnerHeadPadding: token.paddingSM,
    cardActionsLiMargin: "".concat(token.paddingSM, "px 0"),
    cardActionsIconSize: token.fontSize
  });
  return [// Style
  genCardStyle(cardToken), // Size
  genCardSizeStyle(cardToken)];
});