132 lines
3.2 KiB
SCSS
132 lines
3.2 KiB
SCSS
$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;
|
|
}
|
|
|
|
@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;
|
|
font-weight: var(--font-weight-heading);
|
|
|
|
// 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 {
|
|
@include nova-centering-grid(4);
|
|
}
|
|
|
|
// @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 {
|
|
@include nova-centering-grid(4);
|
|
}
|