Source code
Revision control
Copy as Markdown
Other Tools
/* stylelint-disable max-nesting-depth */
.ds-navigation {
color: var(--newtab-contextual-text-primary-color);
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
padding: var(--space-xsmall) 0;
@media (min-width: $break-point-widest) {
line-height: 32px;
}
&.ds-navigation-centered {
text-align: center;
}
&.ds-navigation-right-aligned {
text-align: end;
}
// Contrast fix for users who have wallpapers set
@include wallpaper-contrast-fix;
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
&::after {
content: 'ยท';
padding: var(--space-xsmall);
}
&:last-child::after {
content: none;
}
a {
&:hover,
&:active {
text-decoration: none;
}
&:active {
color: var(--newtab-primary-element-active-color);
}
}
}
.ds-navigation-header {
padding-inline-end: var(--space-xsmall);
}
.ds-navigation-privacy {
padding-inline-start: var(--space-xsmall);
float: inline-end;
&:hover {
text-decoration: none;
}
}
// @nova-cleanup(remove-conditional): Remove .nova-enabled wrapper, make default
.nova-enabled .content & {
grid-column: 1 / -1;
}
&.ds-navigation-new-topics {
display: block;
padding-block-start: var(--space-xxlarge);
.ds-navigation-header {
font-size: var(--font-size-small);
// @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));
display: inline-block;
margin-block-end: var(--space-small);
}
.ds-navigation-family {
text-align: center;
font-size: var(--font-size-small);
margin: var(--space-large) auto var(--space-xlarge);
span {
margin: 0 var(--space-small);
}
.firefox-logo,
.pocket-logo {
height: 20px;
width: 20px;
background-size: cover;
}
.firefox-logo {
background-image: url('chrome://newtab/content/data/content/assets/firefox.svg');
}
.pocket-logo {
background-image: url('chrome://global/skin/icons/help.svg');
fill: $pocket-icon-fill;
}
.ds-navigation-family-message {
display: block;
@media (min-width: $break-point-medium) {
display: inline;
}
}
@media (min-width: $break-point-medium) {
// Bug 1967304 - Large number (40px)
margin-block-start: calc(var(--space-large) + var(--space-xlarge));
}
}
ul {
display: grid;
grid-gap: 0 var(--space-xlarge);
grid-auto-flow: column;
grid-template: repeat(8, 1fr) / repeat(1, 1fr);
li {
border-block-start: 1px solid var(--border-color);
line-height: 24px;
font-size: var(--font-size-small);
font-weight: var(--font-weight-semibold);
&::after {
content: '';
padding: 0;
}
&:nth-last-child(2),
&:nth-last-child(3) {
display: none;
}
&:nth-last-child(1) {
border-block-end: 1px solid var(--border-color);
}
}
@media (min-width: $break-point-medium) {
grid-template: repeat(3, 1fr) / repeat(2, 1fr);
li {
&:nth-child(3) {
border-block-end: 1px solid var(--border-color);
}
}
}
@media (min-width: $break-point-large) {
grid-template: repeat(2, 1fr) / repeat(3, 1fr);
li {
&:nth-child(odd) {
border-block-end: 0;
}
&:nth-child(even) {
border-block-end: 1px solid var(--border-color);
}
}
}
@media (min-width: $break-point-widest) {
grid-template: repeat(2, 1fr) / repeat(4, 1fr);
li {
&:nth-last-child(2),
&:nth-last-child(3) {
display: block;
}
}
}
}
}
}