@lobehub/ui/es/Image/style.js

Lobe UI is an open-source UI component library for building AIGC web apps

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { createStyles } from 'antd-style';
import { rgba } from 'polished';
export var useStyles = createStyles(function (_ref) {
  var cx = _ref.cx,
    css = _ref.css,
    token = _ref.token,
    stylish = _ref.stylish,
    prefixCls = _ref.prefixCls;
  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
    maxHeight = _ref2.maxHeight,
    maxWidth = _ref2.maxWidth,
    minWidth = _ref2.minWidth,
    minHeight = _ref2.minHeight,
    alwaysShowActions = _ref2.alwaysShowActions,
    objectFit = _ref2.objectFit;
  var MAX_HEIGHT = typeof maxHeight === 'number' ? "".concat(maxHeight, "px") : maxHeight;
  var MAX_WIDTH = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
  var MIN_HEIGHT = typeof minHeight === 'number' ? "".concat(minHeight, "px") : minHeight;
  var MIN_WIDTH = typeof minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
  var actions = cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      opacity: ", ";\n    "])), alwaysShowActions ? 1 : 0));
  return {
    actions: actions,
    borderless: stylish.variantBorderlessWithoutHover,
    filled: cx(stylish.variantOutlinedWithoutHover, stylish.variantFilledWithoutHover),
    image: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n        height: auto;\n\n        .", "-image-img {\n          width: 100%;\n          min-width: ", ";\n          max-width: ", ";\n          height: auto;\n          min-height: ", ";\n          max-height: ", ";\n\n          object-fit: ", ";\n        }\n      "])), prefixCls, MIN_WIDTH, MAX_WIDTH, MIN_HEIGHT, MAX_HEIGHT, objectFit || 'cover'),
    mask: cx(stylish.blur, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          backdrop-filter: blur(8px);\n        "])))),
    outlined: stylish.variantOutlinedWithoutHover,
    preview: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        img {\n          width: 100%;\n        }\n      "]))),
    root: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        cursor: pointer;\n        user-select: none;\n\n        position: relative;\n\n        overflow: hidden;\n\n        border-radius: ", "px;\n\n        &:hover {\n          .", " {\n            opacity: 1;\n          }\n        }\n      "])), token.borderRadius, actions),
    toolbar: cx(stylish.blur, stylish.variantOutlinedWithoutHover, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding: 4px;\n          background: ", ";\n          border-radius: ", "px;\n        "])), rgba(token.colorBgMask, 0.5), token.borderRadiusLG))
  };
});