Files
bodyshop/client/src/components/layout-form-row/inline-form-row-title.utils.js

90 lines
2.5 KiB
JavaScript

import { UnorderedListOutlined } from "@ant-design/icons";
export const inlineFormRowTitleStyles = Object.freeze({
input: Object.freeze({
background: "transparent",
border: "none",
borderRadius: 0,
boxShadow: "none",
paddingInline: 0,
paddingBlock: 0,
lineHeight: 1.35,
flex: "1 1 auto",
minWidth: 0,
width: "100%"
}),
row: Object.freeze({
display: "flex",
gap: 6,
flexWrap: "wrap",
alignItems: "center",
width: "100%",
paddingInline: 4
}),
group: Object.freeze({
display: "flex",
alignItems: "center",
gap: 8,
paddingInline: 8,
paddingBlock: 4,
borderRadius: 10,
border: "1px solid var(--imex-form-title-group-border)",
background: "var(--imex-form-title-group-bg)",
minWidth: 0,
flex: "1 1 0"
}),
label: Object.freeze({
color: "var(--ant-color-text-secondary)",
fontSize: 12,
fontWeight: 600,
lineHeight: 1,
whiteSpace: "nowrap",
paddingInline: 6,
paddingBlock: 3,
borderRadius: 999,
border: "1px solid var(--imex-form-title-label-border)",
background: "var(--imex-form-title-label-bg)"
}),
handle: Object.freeze({
color: "var(--ant-color-text-tertiary)",
fontSize: 14,
flex: "0 0 auto",
marginRight: 2
}),
separator: Object.freeze({
width: 1,
height: 16,
background: "color-mix(in srgb, var(--imex-form-surface-border) 58%, transparent)",
borderRadius: 999,
flex: "0 0 auto",
marginInline: 2
}),
text: Object.freeze({
whiteSpace: "nowrap",
fontWeight: 500,
fontSize: "var(--ant-font-size-lg)",
lineHeight: 1.2
})
});
export const INLINE_TITLE_INPUT_STYLE = inlineFormRowTitleStyles.input;
export const INLINE_TITLE_ROW_STYLE = inlineFormRowTitleStyles.row;
export const INLINE_TITLE_GROUP_STYLE = inlineFormRowTitleStyles.group;
export const InlineTitleListIcon = UnorderedListOutlined;
export const INLINE_TITLE_SWITCH_GROUP_STYLE = Object.freeze({
...inlineFormRowTitleStyles.group,
flex: "0 0 auto"
});
export const INLINE_TITLE_LABEL_STYLE = inlineFormRowTitleStyles.label;
export const INLINE_TITLE_HANDLE_STYLE = inlineFormRowTitleStyles.handle;
export const INLINE_TITLE_SEPARATOR_STYLE = inlineFormRowTitleStyles.separator;
export const INLINE_TITLE_TEXT_STYLE = inlineFormRowTitleStyles.text;
export const INLINE_FORM_ROW_WRAP_TITLE_STYLES = Object.freeze({
title: Object.freeze({
whiteSpace: "normal",
overflow: "visible",
textOverflow: "unset"
})
});