export const nubClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = richEditorVariables();
const style = styleFactory("nub");
const root = style({
position: "relative",
display: "block",
width: unit(vars.nub.width),
height: unit(vars.nub.width),
borderTop: singleBorder({
width: vars.menu.borderWidth,
}),
borderRight: singleBorder({
width: vars.menu.borderWidth,
}),
boxShadow: globalVars.overlay.dropShadow,
background: colorOut(vars.colors.bg),
});
const position = style("position", {
position: "absolute",
display: "flex",
alignItems: "flex-start",
justifyContent: "center",
overflow: "hidden",
width: unit(vars.nub.width * 2),
height: unit(vars.nub.width * 2),
...userSelect(),
transform: translateX("-50%"),
pointerEvents: "none",
});
return { root, position };
});
export const insertLinkClasses = useThemeCache(() => {
const vars = richEditorVariables();
const style = styleFactory("insertLink");
const root = style({
position: "relative",
display: "flex",
flexWrap: "nowrap",
alignItems: "center",
maxWidth: unit(vars.insertLink.width),
width: percent(100),
paddingLeft: 0,
});
const input = style("input", {
zIndex: 2,
$nest: {
"&, &.InputBox": {
border: important("0"),
marginBottom: important("0"),
flexGrow: 1,
maxWidth: calc(`100% - ${unit(vars.menuButton.size)}`),
},
},
});
return { root, input };
});
export const countClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = countVariables();
const style = styleFactory("count");
const root = (countBg?: ColorValues) => {
return style({
...absolutePosition.topRight(4),
display: "block",
backgroundColor: countBg ? colorOut(countBg) : colorOut(vars.notifications.bg),
height: unit(vars.sizing.height),
lineHeight: unit(vars.sizing.height),
minWidth: unit(vars.sizing.height),
fontSize: unit(vars.font.size),
fontWeight: globalVars.fonts.weights.semiBold,
borderRadius: unit(vars.sizing.height / 2),
whiteSpace: "nowrap",
padding: `0 3px`,
});
};
const text = (countFg?: ColorValues) => {
return style("text", {
display: "block",
textAlign: "center",
color: !!countFg ? colorOut(countFg) : "inherit",
});
};
return { root, text };
});
export const siteNavClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = siteNavVariables();
const mediaQueries = layoutVariables().mediaQueries();
const style = styleFactory("siteNav");
const root = style(
{
position: "relative",
display: "block",
zIndex: 1,
marginTop: unit(vars.nodeToggle.height / 2 - vars.node.fontSize / 2),
},
mediaQueries.noBleedDown({
marginLeft: unit(vars.nodeToggle.width - vars.nodeToggle.iconWidth / 2 - vars.spacer.default),
}),
);
const title = style("title", {
fontSize: unit(globalVars.fonts.size.large),
fontWeight: globalVars.fonts.weights.bold,
});
const children = style("children", {
position: "relative",
display: "block",
});
return { root, title, children };
});
export const typographyClasses = useThemeCache(() => {
const style = styleFactory("typography");
const globalVars = globalVariables();
const vars = containerVariables();
const mediaQueries = layoutVariables().mediaQueries();
const pageTitle = style(
"pageTitle",
{
fontSize: unit(globalVars.fonts.size.title),
lineHeight: globalVars.lineHeights.condensed,
$nest: lineHeightAdjustment(globalVars.lineHeights.condensed),
},
mediaQueries.oneColumnDown({
fontSize: unit(globalVars.fonts.mobile.size.title),
}),
);
const subTitle = style("subTitle", {
fontSize: unit(globalVars.fonts.size.subTitle),
});
const componentSubTitle = style("componentSubTitle", {
fontSize: unit(globalVars.fonts.size.large),
});
return { pageTitle, subTitle, componentSubTitle };
});
export const buttonLoaderClasses = (buttonType: ButtonTypes) => {
const globalVars = globalVariables();
const flexUtils = flexHelper();
const style = styleFactory("buttonLoader");
const buttonVars = buttonVariables();
let typeVars;
switch (buttonType) {
case ButtonTypes.PRIMARY:
typeVars = buttonVars.primary;
break;
default:
typeVars = buttonVars.standard;
break;
}
const root = style({
...flexUtils.middle(),
padding: unit(4),
height: percent(100),
width: percent(100),
$nest: {
"&:after": spinnerLoader({
color: typeVars.spinnerColor || (globalVars.mainColors.primary as any),
dimensions: 20,
}),
},
});
return { root };
};
export const attachmentIconsClasses = useThemeCache(() => {
const globalVars = globalVariables();
const vars = attachmentIconVariables();
const style = styleFactory("attachmentIcons");
const root = style({
display: "block",
position: "relative",
});
const items = style("items", {
display: "flex",
flexWrap: "wrap",
alignItems: "flex-start",
justifyContent: "flex-end",
width: calc(`100% + ${px(vars.spacing.default * 2)}`),
overflow: "hidden",
...margins({
top: -vars.spacing.default,
left: -vars.spacing.default,
right: globalVars.meta.spacing.default,
}),
});
const item = style("item", {
margin: vars.spacing.default,
});
return { root, items, item };
});
export const containerClasses = useThemeCache(() => {
const style = styleFactory("container");
const globalVars = globalVariables();
const vars = containerVariables();
const mediaQueries = layoutVariables().mediaQueries();
const root = style(
{
display: "flex",
flexDirection: "column",
position: "relative",
boxSizing: "border-box",
width: percent(100),
maxWidth: globalVars.content.width,
marginLeft: "auto",
marginRight: "auto",
...paddings(vars.spacing.padding),
},
mediaQueries.oneColumnDown({
...paddings({
horizontal: 8,
}),
}),
);
return { root };
});
export const loaderClasses = useThemeCache(() => {
const vars = loaderVariables();
const flex = flexHelper();
const style = styleFactory("loader");
const fullPageLoader = style("fullPageLoader", {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
margin: "auto",
height: unit(vars.fullPage.size),
width: unit(vars.fullPage.size),
$nest: {
"&:after": {
...spinnerLoader(vars.fullPage),
},
},
});
const mediumLoader = style("mediumLoader", {
...absolutePosition.fullSizeOfParent(),
...flex.middle(),
height: percent(100),
width: percent(100),
$nest: {
"&:after": {
...spinnerLoader(vars.medium),
},
},
});
const smallLoader = style("smallLoader", {
...flex.middle(),
height: percent(46),
width: percent(46),
margin: "auto",
$nest: {
"&:after": {
...spinnerLoader(vars.small),
},
},
});
const loaderContainer = (size: TLength) => {
return style({
position: "relative",
display: "block",
margin: "auto",
height: unit(size),
width: unit(size),
});
};
return {
fullPageLoader,
mediumLoader,
smallLoader,
loaderContainer,
};
});
export const inheritHeightClass = () => {
const style = styleFactory("inheritHeight");
return style({
display: "flex",
flexDirection: "column",
flexGrow: 1,
});
};
