@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
77 lines • 7.8 kB
JavaScript
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
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 { isNumber } from 'lodash-es';
export var useStyles = createStyles(function (_ref) {
var css = _ref.css,
token = _ref.token,
prefixCls = _ref.prefixCls,
responsive = _ref.responsive;
return {
borderless: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n gap: 48px;\n .", "-collapse .", "-collapse-header {\n padding-block-end: 16px;\n border-block-end: 1px solid ", ";\n }\n "])), prefixCls, prefixCls, token.colorBorderSecondary),
root: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n width: 100%;\n\n .", "-form-item {\n margin: 0 !important;\n }\n\n .", "-form-item .", "-form-item-label > label {\n height: unset;\n }\n\n .", "-row {\n position: relative;\n flex-wrap: nowrap;\n }\n\n .", "-form-item-label {\n position: relative;\n flex: 1;\n max-width: 100%;\n }\n\n .", "-form-item-row {\n align-items: center;\n }\n\n .", "-form-item-control {\n position: relative;\n flex: 0;\n min-width: unset !important;\n }\n\n .", "-collapse-item {\n border-radius: ", "px !important;\n }\n\n ", " {\n gap: 0 !important;\n }\n "])), prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, token.borderRadius, responsive.mobile)
};
});
export var useFlatGroupStyles = createStyles(function (_ref2) {
var cx = _ref2.cx,
css = _ref2.css,
token = _ref2.token,
stylish = _ref2.stylish;
return {
borderless: cx(stylish.variantBorderlessWithoutHover, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding-inline: 0;\n "])))),
filled: stylish.variantFilledWithoutHover,
mobile: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding-block: 0;\n padding-inline: 16px;\n background: ", ";\n border-radius: 0;\n "])), token.colorBgContainer),
outlined: stylish.variantOutlinedWithoutHover,
root: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding-inline: 16px;\n border-radius: ", "px;\n "])), token.borderRadiusLG)
};
});
export var useFooterStyles = createStyles(function (_ref3) {
var css = _ref3.css,
token = _ref3.token,
responsive = _ref3.responsive;
return {
root: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", " {\n padding: 16px;\n background: ", ";\n border-block-start: 1px solid ", ";\n }\n "])), responsive.mobile, token.colorBgContainer, token.colorBorderSecondary)
};
});
export var useGroupStyles = createStyles(function (_ref4) {
var css = _ref4.css,
token = _ref4.token,
responsive = _ref4.responsive;
return {
mobileGroupBody: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding-block: 0;\n padding-inline: 16px;\n background: ", ";\n "])), token.colorBgContainer),
mobileGroupHeader: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n padding: 16px;\n background: ", ";\n "])), token.colorBgLayout),
title: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n align-items: center;\n font-size: 16px;\n font-weight: bold;\n "]))),
titleBorderless: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n font-size: 18px;\n font-weight: bold;\n "]))),
titleMobile: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n ", " {\n font-size: 14px;\n font-weight: 400;\n opacity: 0.5;\n }\n "])), responsive.mobile)
};
});
export var useItemStyles = createStyles(function (_ref5, _ref6) {
var css = _ref5.css,
responsive = _ref5.responsive,
prefixCls = _ref5.prefixCls;
var minWidth = _ref6.minWidth;
return {
itemMinWidth: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n .", "-form-item-control {\n width: ", ";\n }\n "])), prefixCls, isNumber(minWidth) ? "".concat(minWidth, "px") : minWidth),
itemNoDivider: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n &:not(:first-child) {\n padding-block-start: 0;\n }\n "]))),
root: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n &.", "-form-item {\n padding-block: 16px;\n padding-inline: 0;\n\n .", "-form-item-label {\n text-align: start;\n }\n\n .", "-row {\n gap: 12px;\n justify-content: space-between;\n\n > div {\n flex: unset;\n flex-grow: unset;\n }\n }\n\n .", "-form-item-required::before {\n align-self: flex-start;\n }\n\n ", " {\n &.", "-form-item-horizontal {\n .", "-form-item-label {\n flex: 1 !important;\n }\n .", "-form-item-control {\n flex: none !important;\n }\n }\n }\n }\n "])), prefixCls, prefixCls, prefixCls, prefixCls, responsive.mobile, prefixCls, prefixCls, prefixCls),
verticalLayout: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n &.", "-form-item {\n .", "-row {\n align-items: stretch;\n }\n }\n "])), prefixCls, prefixCls)
};
});
export var useSubmitFooterStyles = createStyles(function (_ref7) {
var responsive = _ref7.responsive,
css = _ref7.css,
token = _ref7.token;
return {
floatFooter: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n position: fixed;\n z-index: 1000;\n inset-block-end: 24px;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n\n width: max-content;\n padding: 8px;\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: 48px;\n box-shadow: ", ";\n "])), token.colorBgContainer, token.colorBorderSecondary, token.boxShadowSecondary),
footer: css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n ", " {\n margin-block-start: -", "px;\n padding: 16px;\n background: ", ";\n border-block-start: 1px solid ", ";\n }\n "])), responsive.mobile, token.borderRadius, token.colorBgContainer, token.colorBorderSecondary)
};
});
export var useTitleStyles = createStyles(function (_ref8) {
var css = _ref8.css,
token = _ref8.token;
return {
content: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n position: relative;\n text-align: start;\n "]))),
desc: css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n display: block;\n\n line-height: 1.44;\n color: ", ";\n word-wrap: break-word;\n white-space: pre-wrap;\n "])), token.colorTextDescription),
title: css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n font-weight: 500;\n line-height: 1;\n "])))
};
});