Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
width: percent(100),
height: percent(100),
$nest: {
"&&&": {
display: "flex",
},
},
},
mediaQueries.oneColumnDown({
display: "block",
}),
);
const frame = style(
"frame",
{
width: calc(`${percent(vars.frame.width)} - ${unit(vars.panel.width)}`),
flexBasis: calc(`${percent(vars.frame.width)} - ${unit(vars.panel.width)}`),
height: percent(100),
},
mediaQueries.oneColumnDown({
width: percent(100),
}),
);
const panel = style(
"panel",
{
boxShadow: "0 5px 10px 0 rgba(0, 0, 0, 0.3)",
width: unit(vars.panel.width),
flexBasis: unit(vars.panel.width),
zIndex: 1,
const contentContainer = (hasFullWidth = false) => {
return style(
"contentContainer",
{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: vars.options.alignment === BannerAlignment.LEFT ? "flex-start" : "center",
...paddings(vars.contentContainer.padding),
...backgroundHelper(vars.innerBackground),
minWidth: unit(vars.contentContainer.minWidth),
maxWidth: vars.rightImage.image ? unit(vars.contentContainer.minWidth) : undefined,
minHeight: unit(vars.dimensions.minHeight),
maxHeight: unitIfDefined(vars.dimensions.maxHeight),
flexGrow: 0,
width: hasFullWidth || vars.options.alignment === BannerAlignment.LEFT ? percent(100) : undefined,
},
media(
{
maxWidth:
vars.contentContainer.minWidth + containerVariables().spacing.paddingFull.horizontal * 2,
},
{
right: "initial",
left: 0,
minWidth: percent(100),
maxWidth: percent(100),
minHeight: unitIfDefined(vars.dimensions.mobile.minHeight),
maxHeight: unitIfDefined(vars.dimensions.mobile.maxHeight ?? vars.dimensions.maxHeight),
...(vars.options.mobileAlignment
? {
alignItems:
minWidth: unit(vars.sizing.minWidth),
$nest: {
[`&:hover .${name}`]: nestedStyles && nestedStyles["&&:hover"] ? nestedStyles["&&:hover"] : undefined,
[`&:focus .${name}`]: nestedStyles && nestedStyles["&&:focus"] ? nestedStyles["&&:focus"] : undefined,
[`&:focus-visible .${name}`]:
nestedStyles && nestedStyles["&&:focus-visible"] ? nestedStyles["&&:focus-visible"] : undefined,
[`&:active .${name}`]:
nestedStyles && nestedStyles["&&:active"] ? nestedStyles["&&:active"] : undefined,
},
},
borderStyling,
);
const content = style("content", {}, paddings(vars.spacing.contentPadding));
const imageAspectRatio = percent((vars.image.ratio.height / vars.image.ratio.width) * 100);
const imageContainer = style("imageContainer", {
background: colorOut(globalVars.mixPrimaryAndBg(0.08)),
width: percent(100),
paddingTop: imageAspectRatio,
position: "relative",
maxHeight: unit(vars.image.maxHeight),
});
const image = style("image", {
...absolutePosition.fullSizeOfParent(),
objectFit: "cover",
objectPosition: "center center",
});
const description = style("description", {
borderColor: colorOut(globalVars.mainColors.primary),
},
"&&": {
position: "relative",
},
"& .searchBar__menu-list": {
maxHeight: calc(`100vh - ${unit(titleBarVars.sizing.height)}`),
width: percent(100),
},
"& .searchBar__input": {
color: colorOut(globalVars.mainColors.fg),
width: percent(100),
display: important("block"),
$nest: {
input: {
width: important(percent(100).toString()),
lineHeight: globalVars.lineHeights.base,
},
},
},
"& .suggestedTextInput-menu": {
borderRadius: unit(globalVars.border.radius),
marginTop: unit(-formElementVars.border.width),
marginBottom: unit(-formElementVars.border.width),
},
"&:empty": {
display: "none",
},
},
});
return {