@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

package/es/card/components/Card/style.js

@@ -1,283 +1,209 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/card/components/Card/style.ts
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { resetComponent, useStyle as useAntdStyle } from "../../../utils";
-var genActiveStyle = (token) => ({
-  backgroundColor: token.controlItemBgActive,
-  borderColor: token.controlOutline
-});
-var genProCardStyle = (token) => {
-  var _a;
-  const { componentCls } = token;
+var genActiveStyle = function genActiveStyle(token) {
   return {
-    [componentCls]: __spreadProps(__spreadValues({
-      position: "relative",
-      display: "flex",
-      flexDirection: "column",
-      boxSizing: "border-box",
-      width: "100%",
-      marginBlock: 0,
-      marginInline: 0,
-      paddingBlock: 0,
-      paddingInline: 0,
-      backgroundColor: token.colorBgContainer,
-      borderRadius: token.borderRadius,
-      transition: "all 0.3s"
-    }, (_a = resetComponent) == null ? void 0 : _a(token)), {
-      "&-box-shadow": {
-        boxShadow: "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
-        borderColor: "transparent"
-      },
-      "&-col": {
-        width: "100%"
-      },
-      "&-border": {
-        border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
-      },
-      "&-hoverable": {
-        cursor: "pointer",
-        transition: "box-shadow 0.3s, border-color 0.3s",
-        "&:hover": {
-          borderColor: "transparent",
-          boxShadow: "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017"
-        },
-        [`&${componentCls}-checked:hover`]: {
-          borderColor: token.controlOutline
-        }
-      },
-      "&-checked": __spreadProps(__spreadValues({}, genActiveStyle(token)), {
-        "&::after": {
-          visibility: "visible",
-          position: "absolute",
-          insetBlockStart: 2,
-          insetInlineEnd: 2,
-          opacity: 1,
-          width: 0,
-          height: 0,
-          border: `6px solid ${token.colorPrimary}`,
-          borderBlockEnd: "6px solid transparent",
-          borderInlineStart: "6px solid transparent",
-          borderStartEndRadius: 2,
-          content: '""'
-        }
-      }),
-      "&:focus": __spreadValues({}, genActiveStyle(token)),
-      "&&-ghost": {
-        backgroundColor: "transparent",
-        [`> ${componentCls}`]: {
-          "&-header": {
-            paddingInlineEnd: 0,
-            paddingBlockEnd: token.padding,
-            paddingInlineStart: 0
-          },
-          "&-body": {
-            paddingBlock: 0,
-            paddingInline: 0,
-            backgroundColor: "transparent"
-          }
-        }
-      },
-      "&&-split > &-body": {
-        paddingBlock: 0,
-        paddingInline: 0
-      },
-      "&&-contain-card > &-body": {
-        display: "flex"
-      },
-      [`${componentCls}-body-direction-column`]: {
-        flexDirection: "column"
-      },
-      [`${componentCls}-body-wrap`]: {
-        flexWrap: "wrap"
-      },
-      "&&-collapse": {
-        [`> ${componentCls}`]: {
-          "&-header": {
-            paddingBlockEnd: token.padding,
-            borderBlockEnd: 0
-          },
-          "&-body": {
-            display: "none"
-          }
-        }
-      },
-      [`${componentCls}-header`]: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        paddingInline: token.paddingLG,
-        paddingBlock: token.padding,
-        paddingBlockEnd: 0,
-        "&-border": {
-          "&": {
-            paddingBlockEnd: token.padding
-          },
-          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
-        },
-        "&-collapsible": {
-          cursor: "pointer"
-        }
-      },
-      [`${componentCls}-title`]: {
-        color: token.colorText,
-        fontWeight: 500,
-        fontSize: token.fontSizeLG,
-        lineHeight: token.lineHeight
-      },
-      [`${componentCls}-extra`]: {
-        color: token.colorText
-      },
-      [`${componentCls}-type-inner`]: {
-        [`${componentCls}-header`]: {
-          backgroundColor: token.colorFillAlter
-        }
-      },
-      [`${componentCls}-collapsible-icon`]: {
-        marginInlineEnd: token.marginXS,
-        color: token.colorIconHover,
-        ":hover": {
-          color: token.colorPrimaryHover
-        },
-        "& svg": {
-          transition: `transform ${token.motionDurationMid}`
-        }
-      },
-      [`${componentCls}-body`]: {
-        display: "block",
-        boxSizing: "border-box",
-        height: "100%",
-        paddingInline: token.paddingLG,
-        paddingBlock: token.padding,
-        "&-center": {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        }
-      },
-      "&&-size-small": {
-        [componentCls]: {
-          "&-header": {
-            paddingInline: token.paddingSM,
-            paddingBlock: token.paddingXS,
-            paddingBlockEnd: 0,
-            "&-border": {
-              paddingBlockEnd: token.paddingXS
-            }
-          },
-          "&-title": {
-            fontSize: token.fontSize
-          },
-          "&-body": {
-            paddingInline: token.paddingSM,
-            paddingBlock: token.paddingSM
-          }
-        },
-        [`${componentCls}-header${componentCls}-header-collapsible`]: {
-          paddingBlock: token.paddingXS
-        }
+    backgroundColor: token.controlItemBgActive,
+    borderColor: token.controlOutline
+  };
+};
+var genProCardStyle = function genProCardStyle(token) {
+  var componentCls = token.componentCls;
+  return _defineProperty(_defineProperty(_defineProperty({}, componentCls, _objectSpread(_objectSpread({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    width: '100%',
+    marginBlock: 0,
+    marginInline: 0,
+    paddingBlock: 0,
+    paddingInline: 0,
+    backgroundColor: token.colorBgContainer,
+    borderRadius: token.borderRadius,
+    transition: 'all 0.3s'
+  }, resetComponent === null || resetComponent === void 0 ? void 0 : resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    '&-box-shadow': {
+      boxShadow: '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017',
+      borderColor: 'transparent'
+    },
+    '&-col': {
+      width: '100%'
+    },
+    '&-border': {
+      border: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
+    },
+    '&-hoverable': _defineProperty({
+      cursor: 'pointer',
+      transition: 'box-shadow 0.3s, border-color 0.3s',
+      '&:hover': {
+        borderColor: 'transparent',
+        boxShadow: '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017'
       }
+    }, "&".concat(componentCls, "-checked:hover"), {
+      borderColor: token.controlOutline
     }),
-    [`${componentCls}-col`]: {
-      [`&${componentCls}-split-vertical`]: {
-        borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
-      },
-      [`&${componentCls}-split-horizontal`]: {
-        borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+    '&-checked': _objectSpread(_objectSpread({}, genActiveStyle(token)), {}, {
+      '&::after': {
+        visibility: 'visible',
+        position: 'absolute',
+        insetBlockStart: 2,
+        insetInlineEnd: 2,
+        opacity: 1,
+        width: 0,
+        height: 0,
+        border: "6px solid ".concat(token.colorPrimary),
+        borderBlockEnd: '6px solid transparent',
+        borderInlineStart: '6px solid transparent',
+        borderStartEndRadius: 2,
+        content: '""'
       }
+    }),
+    '&:focus': _objectSpread({}, genActiveStyle(token)),
+    '&&-ghost': _defineProperty({
+      backgroundColor: 'transparent'
+    }, "> ".concat(componentCls), {
+      '&-header': {
+        paddingInlineEnd: 0,
+        paddingBlockEnd: token.padding,
+        paddingInlineStart: 0
+      },
+      '&-body': {
+        paddingBlock: 0,
+        paddingInline: 0,
+        backgroundColor: 'transparent'
+      }
+    }),
+    '&&-split > &-body': {
+      paddingBlock: 0,
+      paddingInline: 0
     },
-    [`${componentCls}-tabs`]: {
-      [`${token.antCls}-tabs-top > ${token.antCls}-tabs-nav`]: {
-        marginBlockEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          marginBlockStart: token.marginXS,
-          paddingInlineStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-bottom > ${token.antCls}-tabs-nav`]: {
-        marginBlockEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingInlineStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-left`]: {
-        [`${token.antCls}-tabs-content-holder`]: {
-          [`${token.antCls}-tabs-content`]: {
-            [`${token.antCls}-tabs-tabpane`]: {
-              paddingInlineStart: 0
-            }
-          }
-        }
-      },
-      // 这里是为了保证 tabs 的高度和左侧的一致
-      [`${token.antCls}-tabs-left > ${token.antCls}-tabs-nav`]: {
-        marginInlineEnd: 0,
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingBlockStart: token.padding
-        }
-      },
-      [`${token.antCls}-tabs-right`]: {
-        [`${token.antCls}-tabs-content-holder`]: {
-          [`${token.antCls}-tabs-content`]: {
-            [`${token.antCls}-tabs-tabpane`]: {
-              paddingInlineStart: 0
-            }
-          }
-        }
-      },
-      [`${token.antCls}-tabs-right > ${token.antCls}-tabs-nav`]: {
-        [`${token.antCls}-tabs-nav-list`]: {
-          paddingBlockStart: token.padding
-        }
+    '&&-contain-card > &-body': {
+      display: 'flex'
+    }
+  }, "".concat(componentCls, "-body-direction-column"), {
+    flexDirection: 'column'
+  }), "".concat(componentCls, "-body-wrap"), {
+    flexWrap: 'wrap'
+  }), '&&-collapse', _defineProperty({}, "> ".concat(componentCls), {
+    '&-header': {
+      paddingBlockEnd: token.padding,
+      borderBlockEnd: 0
+    },
+    '&-body': {
+      display: 'none'
+    }
+  })), "".concat(componentCls, "-header"), {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingInline: token.paddingLG,
+    paddingBlock: token.padding,
+    paddingBlockEnd: 0,
+    '&-border': {
+      '&': {
+        paddingBlockEnd: token.padding
+      },
+      borderBlockEnd: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
+    },
+    '&-collapsible': {
+      cursor: 'pointer'
+    }
+  }), "".concat(componentCls, "-title"), {
+    color: token.colorText,
+    fontWeight: 500,
+    fontSize: token.fontSizeLG,
+    lineHeight: token.lineHeight
+  }), "".concat(componentCls, "-extra"), {
+    color: token.colorText
+  }), "".concat(componentCls, "-type-inner"), _defineProperty({}, "".concat(componentCls, "-header"), {
+    backgroundColor: token.colorFillAlter
+  })), "".concat(componentCls, "-collapsible-icon"), {
+    marginInlineEnd: token.marginXS,
+    color: token.colorIconHover,
+    ':hover': {
+      color: token.colorPrimaryHover
+    },
+    '& svg': {
+      transition: "transform ".concat(token.motionDurationMid)
+    }
+  }), "".concat(componentCls, "-body"), {
+    display: 'block',
+    boxSizing: 'border-box',
+    height: '100%',
+    paddingInline: token.paddingLG,
+    paddingBlock: token.padding,
+    '&-center': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }), '&&-size-small', _defineProperty(_defineProperty({}, componentCls, {
+    '&-header': {
+      paddingInline: token.paddingSM,
+      paddingBlock: token.paddingXS,
+      paddingBlockEnd: 0,
+      '&-border': {
+        paddingBlockEnd: token.paddingXS
       }
+    },
+    '&-title': {
+      fontSize: token.fontSize
+    },
+    '&-body': {
+      paddingInline: token.paddingSM,
+      paddingBlock: token.paddingSM
     }
-  };
+  }), "".concat(componentCls, "-header").concat(componentCls, "-header-collapsible"), {
+    paddingBlock: token.paddingXS
+  })))), "".concat(componentCls, "-col"), _defineProperty(_defineProperty({}, "&".concat(componentCls, "-split-vertical"), {
+    borderInlineEnd: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
+  }), "&".concat(componentCls, "-split-horizontal"), {
+    borderBlockEnd: "".concat(token.lineWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
+  })), "".concat(componentCls, "-tabs"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-tabs-top > ").concat(token.antCls, "-tabs-nav"), _defineProperty({
+    marginBlockEnd: 0
+  }, "".concat(token.antCls, "-tabs-nav-list"), {
+    marginBlockStart: token.marginXS,
+    paddingInlineStart: token.padding
+  })), "".concat(token.antCls, "-tabs-bottom > ").concat(token.antCls, "-tabs-nav"), _defineProperty({
+    marginBlockEnd: 0
+  }, "".concat(token.antCls, "-tabs-nav-list"), {
+    paddingInlineStart: token.padding
+  })), "".concat(token.antCls, "-tabs-left"), _defineProperty({}, "".concat(token.antCls, "-tabs-content-holder"), _defineProperty({}, "".concat(token.antCls, "-tabs-content"), _defineProperty({}, "".concat(token.antCls, "-tabs-tabpane"), {
+    paddingInlineStart: 0
+  })))), "".concat(token.antCls, "-tabs-left > ").concat(token.antCls, "-tabs-nav"), _defineProperty({
+    marginInlineEnd: 0
+  }, "".concat(token.antCls, "-tabs-nav-list"), {
+    paddingBlockStart: token.padding
+  })), "".concat(token.antCls, "-tabs-right"), _defineProperty({}, "".concat(token.antCls, "-tabs-content-holder"), _defineProperty({}, "".concat(token.antCls, "-tabs-content"), _defineProperty({}, "".concat(token.antCls, "-tabs-tabpane"), {
+    paddingInlineStart: 0
+  })))), "".concat(token.antCls, "-tabs-right > ").concat(token.antCls, "-tabs-nav"), _defineProperty({}, "".concat(token.antCls, "-tabs-nav-list"), {
+    paddingBlockStart: token.padding
+  })));
 };
 var GRID_COLUMNS = 24;
-var genColStyle = (index, token) => {
-  const { componentCls } = token;
+var genColStyle = function genColStyle(index, token) {
+  var componentCls = token.componentCls;
   if (index === 0) {
-    return {
-      [`${componentCls}-col-0`]: {
-        display: "none"
-      }
-    };
+    return _defineProperty({}, "".concat(componentCls, "-col-0"), {
+      display: 'none'
+    });
   }
-  return {
-    [`${componentCls}-col-${index}`]: {
-      flexShrink: 0,
-      width: `${index / GRID_COLUMNS * 100}%`
-    }
-  };
+  return _defineProperty({}, "".concat(componentCls, "-col-").concat(index), {
+    flexShrink: 0,
+    width: "".concat(index / GRID_COLUMNS * 100, "%")
+  });
 };
-var genGridStyle = (token) => {
-  return Array(GRID_COLUMNS + 1).fill(1).map((_, index) => genColStyle(index, token));
+var genGridStyle = function genGridStyle(token) {
+  return Array(GRID_COLUMNS + 1).fill(1).map(function (_, index) {
+    return genColStyle(index, token);
+  });
 };
-function useStyle(prefixCls) {
-  return useAntdStyle("ProCard", (token) => {
-    const proCardToken = __spreadProps(__spreadValues({}, token), {
-      componentCls: `.${prefixCls}`
+export default function useStyle(prefixCls) {
+  return useAntdStyle('ProCard', function (token) {
+    var proCardToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
     });
     return [genProCardStyle(proCardToken), genGridStyle(proCardToken)];
   });
-}
-export {
-  useStyle as default
-};
+}