73 lines
1.4 KiB
SCSS
73 lines
1.4 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;
|
|
|
|
@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: 8px 0;
|
|
|
|
.ds-context {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.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-bold);
|
|
|
|
// 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-bold);
|
|
|
|
&:is(:focus, :hover) {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|