Source code
Revision control
Copy as Markdown
Other Tools
$ds-width: 936px;
.discovery-stream.ds-layout {
$columns: 12;
--gridColumnGap: 48px;
--gridRowGap: 24px;
grid-template-columns: repeat($columns, 1fr);
grid-column-gap: var(--gridColumnGap);
grid-row-gap: var(--gridRowGap);
margin: 0 auto;
// @nova-cleanup(remove-conditional): Make grid default, remove conditional
.nova-enabled & {
display: grid;
&.ds-layout-widgets {
grid-template-columns: subgrid;
}
}
@while $columns > 0 {
.ds-column-#{$columns} {
grid-column-start: auto;
grid-column-end: span $columns;
}
$columns: $columns - 1;
}
.ds-column-grid {
display: flex;
flex-direction: column;
grid-row-gap: var(--gridRowGap);
// We want to completely hide components with no content,
// otherwise, it creates grid-row-gap gaps around nothing.
> div:empty {
display: none;
}
}
}
.ds-header {
margin: var(--space-small) 0;
.ds-context {
font-weight: var(--font-weight);
}
}
.ds-header,
.ds-layout .section-title span {
color: var(--newtab-contextual-text-primary-color);
font-size: $section-title-font-size;
// @backward-compat { version 150 } D281466/D283723 renamed design tokens; remove once Firefox 150 is on Release.
font-weight: var(--font-weight-heading, var(--heading-font-weight));
// Contrast fix for users who have wallpapers set
@include wallpaper-contrast-fix;
.icon {
fill: var(--newtab-text-secondary-color);
}
}
.collapsible-section.ds-layout {
margin: auto;
.section-top-bar .learn-more-link {
// Contrast fix for users who have wallpapers set
@include wallpaper-contrast-fix;
a {
color: var(--newtab-primary-action-background);
font-weight: var(--font-weight-semibold);
&:is(:focus, :hover) {
text-decoration: none;
}
}
}
}
// Nova Grid Overrides
// @nova-cleanup(remove-conditional): Remove .nova-enabled selector and display: contents wrappers
.nova-enabled .content .ds-layout:not(.discovery-stream) {
display: contents;
> div {
display: contents;
}
}
// @nova-cleanup(remove-conditional): Remove .nova-enabled selector, make default behavior
.nova-enabled .content .discovery-stream.ds-layout {
display: contents;
grid-column: 1 / -1;
.ds-column {
display: contents;
}
.ds-column-grid {
display: contents;
}
// The wrapper div around components
.ds-column-grid > div {
display: contents;
}
}
// @nova-cleanup(remove-conditional): Remove .nova-enabled selector and display: contents wrapper
.nova-enabled .content .ds-top-sites {
display: contents;
}
// @nova-cleanup(remove-conditional): Remove .nova-enabled selector, make default behavior
.nova-enabled .content .top-sites {
grid-column: 1 / -1;
}
// @nova-cleanup(remove-conditional): Remove .nova-enabled selector, make default behavior.
// ds-section-wrapper is the centering grid: auto-fill with 4-column tracks
// so that section headings and card grids share the same width and alignment.
.nova-enabled .content .ds-section-wrapper {
display: grid;
grid-template-columns: repeat(
auto-fill,
calc(4 * var(--col-width) + 3 * var(--space-medium))
);
gap: var(--space-medium);
justify-content: center;
grid-column: 1 / -1;
}
// @nova-cleanup(remove-conditional): Remove .nova-enabled selector, make default behavior.
// ds-card-grid-container is the centering grid: auto-fill with 4-column tracks
// so that ds-header and ds-card-grid share the same width and alignment.
.nova-enabled .content .ds-card-grid-container {
display: grid;
grid-template-columns: repeat(
auto-fill,
calc(4 * var(--col-width) + 3 * var(--space-medium))
);
gap: var(--space-medium);
justify-content: center;
grid-column: 1 / -1;
}