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;
@while $columns > 0 {
.ds-column-#{$columns} {
grid-column-start: auto;
grid-column-end: span $columns;
}
$columns: $columns - 1;
}
.ds-column-grid {
display: grid;
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: 8px 0;
.ds-context {
font-weight: 400;
}
}
.ds-header,
.ds-layout .section-title span {
color: var(--newtab-text-primary-color);
font-size: $section-title-font-size;
font-weight: 600;
line-height: 20px;
.icon {
fill: var(--newtab-text-secondary-color);
}
}
.collapsible-section.ds-layout {
margin: auto;
.section-top-bar {
.learn-more-link a {
color: var(--newtab-primary-action-background);
font-weight: 500;
&:is(:focus, :hover) {
text-decoration: none;
}
}
}
}