Source code
Revision control
Copy as Markdown
Other Tools
// Shared body styles for OMC highlight popovers. Variant-specific overrides
// (font sizes, etc.) live in _OMCHighlightPopover.scss.
.nova-enabled {
.highlight-popover-body {
display: flex;
flex-direction: column;
gap: var(--space-small);
.title {
font-weight: var(--font-weight-heading);
margin: 0;
}
.subtitle {
font-size: var(--font-size-root);
margin: 0;
}
.button-wrapper {
align-self: flex-start;
}
}
.highlight-popover-image {
width: 100%;
height: auto;
border-radius: var(--border-radius-small);
}
// The survey illustration is a compact tile grid, not a full-width banner
// like the other widgets-callout images, so stretching it to 100% makes the
// popover too tall. Constrain to the Figma image-slot width (169px) and
// center it; the source PNG scales to fit.
.widgets-survey-callout .highlight-popover-image {
/* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
width: 169px;
align-self: center;
}
}