@oceanbase/design/lib/card/style/index.js

The Design System of OceanBase

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/card/style/index.ts
var style_exports = {};
__export(style_exports, {
  default: () => style_default,
  genCardStyle: () => genCardStyle,
  genTableStyle: () => genTableStyle
});
module.exports = __toCommonJS(style_exports);
var import_style = require("../../tabs/style");
var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
var genTableStyle = (padding, token) => {
  const { antCls } = token;
  const tableComponentCls = `${antCls}-table`;
  return {
    [`${tableComponentCls}-wrapper`]: {
      [`${tableComponentCls}`]: {
        // first column should align with card title
        [`${tableComponentCls}-thead > tr > th:first-child, ${tableComponentCls}-tbody > tr > td:first-child`]: {
          paddingLeft: padding
        },
        // last column should align with card extra
        [`${tableComponentCls}-thead > tr > th:last-child, ${tableComponentCls}-tbody > tr > td:last-child`]: {
          paddingRight: padding
        }
      },
      [`${tableComponentCls}-pagination${antCls}-pagination`]: {
        // add marginLeft for table batchOperationBar
        [`${tableComponentCls}-batch-operation-bar`]: {
          marginLeft: padding
        },
        // add marginRight for table pagination
        [`& > li:last-child`]: {
          marginRight: padding
        }
      }
    }
  };
};
var genCardStyle = (token) => {
  const { componentCls, antCls, tabsComponentCls, tabsPrefixCls, paddingSM, paddingLG } = token;
  const tableComponentCls = `${antCls}-table`;
  return {
    [`${componentCls}`]: {
      // nested Card style
      [`${componentCls}:not(${componentCls}-bordered):not(${componentCls}-type-inner)`]: {
        boxShadow: "none"
      }
    },
    [`${componentCls}${componentCls}-no-divider`]: {
      [`${componentCls}-head`]: {
        // should not remove border-bottom to avoid tabs inkbar display correctly
        borderBottomColor: "transparent",
        // remove divider for top and bottom tabs
        [tabsComponentCls]: {
          [`&${tabsComponentCls}-top, &${tabsComponentCls}-bottom`]: {
            [`${tabsComponentCls}-nav::before`]: {
              border: "none"
            }
          }
        }
      }
    },
    [`${componentCls}${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
      [`${componentCls}-body`]: {
        padding: `0 ${paddingLG}px ${paddingLG}px ${paddingLG}px`
      }
    },
    [`${componentCls}-small${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
      [`${componentCls}-body`]: {
        padding: `0 ${paddingSM}px ${paddingSM}px ${paddingSM}px`
      }
    },
    [`${componentCls}-small${componentCls}-contain-tabs >${componentCls}-head`]: {
      [`${componentCls}-head-title, ${componentCls}-head-extra`]: {
        paddingTop: token.paddingXS
      }
    },
    [`${componentCls}${componentCls}-contain-tabs`]: {
      [`${componentCls}-head`]: (0, import_style.genTabsStyle)({
        ...token,
        componentCls: tabsComponentCls,
        prefixCls: tabsPrefixCls
      })
    },
    [`${componentCls}${componentCls}-contain-grid`]: {
      [`${componentCls}-head`]: {
        // work for Card containing Card.Grid
        marginBottom: -1
      }
    },
    [`${componentCls}:not(${componentCls}-contain-grid)`]: {
      [`${componentCls}-head`]: {
        // work for Card not containing Card.Grid
        marginBottom: 0
      }
    },
    // reduce margin between card title and table
    [`&${componentCls}-has-title${componentCls}-no-divider:not(${componentCls}-contain-tabs)`]: {
      [`${componentCls}-body`]: {
        [`& > ${tableComponentCls}-wrapper ${tableComponentCls}:not(${tableComponentCls}-bordered):first-child`]: {
          marginTop: -token.marginSM
        }
      }
    },
    // no body horizontal padding card
    [`${componentCls}${componentCls}-no-body-horizontal-padding`]: genTableStyle(paddingLG, token),
    // no body horizontal padding small card
    [`${componentCls}${componentCls}-no-body-horizontal-padding${componentCls}-small`]: genTableStyle(paddingSM, token)
  };
};
var style_default = (prefixCls, tabsPrefixCls) => {
  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Card", (token) => {
    return [
      genCardStyle({
        ...token,
        tabsComponentCls: `.${tabsPrefixCls}`,
        tabsPrefixCls
      })
    ];
  });
  return useStyle(prefixCls);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  genCardStyle,
  genTableStyle
});