1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
$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: 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-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;
}
}
}
}
|
