Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
// @nova-cleanup(merge-styles): Move to components/DiscoveryStreamComponents/CardSections/_CardSections.scss
.section-title-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-medium);
@include at-content-cols(12) {
column-gap: var(--space-large);
}
.section-subtitle {
flex-basis: 100%;
}
}
.ds-section .section-follow,
.ds-section .section-context-menu {
@include wallpaper-contrast-fix;
}
.ds-section .section-follow {
moz-button::part(button) {
transition: background-color 0.2s ease;
}
moz-button::part(moz-button-label) {
// CSS can only transition between fixed values;
// 30ch accommodates the longest localized string (Georgian: 26ch)
max-width: 30ch;
transition:
max-width 0.2s ease,
opacity 0.2s ease;
@starting-style {
max-width: 0;
opacity: 0;
}
}
}
// Also used by nova/_DSCard.scss
@mixin nova-card-stp-controls {
.card-stp-button-hover-background .card-stp-button-position-wrapper {
inset-inline-end: var(--nova-stp-inset);
inset-block-end: var(--nova-stp-inset);
}
.context-menu-position-container .context-menu-button {
width: var(--size-item-medium);
height: var(--size-item-medium);
border-radius: var(--border-radius-circle);
}
}
@mixin nova-section-card-small {
&.ds-card.sections-card-ui {
--nova-small-card-image-width: 132px;
--nova-small-card-image-height: 108px;
&:not(.placeholder) {
box-shadow: var(--card-box-shadow);
}
&:hover,
&:active,
&:focus-within,
&.active {
box-shadow: var(--card-box-shadow-hover);
.meta .sections-card-footer {
padding-inline-end: var(--space-xlarge);
}
}
.ds-card-link {
align-items: flex-start;
gap: var(--space-small);
padding: var(--space-medium);
}
.img-wrapper {
width: var(--nova-small-card-image-width);
height: var(--nova-small-card-image-height);
}
.img-wrapper > .ds-image.img > img {
border-radius: calc(var(--border-radius-small) + var(--space-xxsmall));
}
.meta {
// space-xxsmall is used to align small card publisher title with medium card
height: calc(var(--nova-small-card-image-height) + var(--space-xxsmall));
min-height: 0;
.info-wrap {
margin-block-start: 0;
max-width: none;
}
.sections-card-footer {
margin-block-end: 0;
min-height: var(--size-item-medium);
max-width: none;
}
}
--nova-stp-inset: var(--space-medium);
@include nova-card-stp-controls;
}
}
@mixin nova-section-card-medium {
&.ds-card.sections-card-ui:not(.ds-spoc-rectangle) {
&:not(.placeholder) {
box-shadow: var(--card-box-shadow);
.img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-medium);
}
}
&:hover,
&:active,
&:focus-within,
&.active {
box-shadow: var(--card-box-shadow-hover);
}
.ds-card-link {
gap: var(--space-medium);
padding: var(--space-large) var(--space-large) var(--space-medium);
}
.meta {
padding: 0;
min-height: 79px;
.info-wrap .title {
font-size: var(--font-size-small);
margin-block-end: 0;
}
.info-wrap .excerpt {
display: none;
}
.sections-card-footer {
min-height: var(--size-item-medium);
}
}
--nova-stp-inset: var(--space-large);
@include nova-card-stp-controls;
}
}
@mixin nova-section-card-large {
&.ds-card.sections-card-ui {
&:not(.placeholder) {
box-shadow: var(--card-box-shadow);
}
&:hover,
&:active,
&:focus-within,
&.active {
box-shadow: var(--card-box-shadow-hover);
}
// @nova-cleanup(remove-conditional): Replace with container query to match nova breakpoints.
// Currently prevents classic @media rules from bleeding through.
@media (min-width: $break-point-layout-variant) {
--nova-large-card-image-width: 240px;
--nova-large-card-image-height: 200px;
.ds-card-link {
flex-wrap: wrap;
gap: var(--space-large);
padding: var(--space-xlarge) var(--space-xlarge) var(--space-large);
}
.img-wrapper {
width: var(--nova-large-card-image-width);
height: var(--nova-large-card-image-height);
}
.meta {
display: contents;
.info-wrap {
flex: 1;
margin-inline-start: var(--space-small);
}
.info-wrap .title {
margin-block: 0;
}
.info-wrap .excerpt {
display: block;
-webkit-line-clamp: 6;
margin-block: var(--space-medium) 0;
color: var(--newtab-text-primary-color);
}
.sections-card-footer {
flex-basis: 100%;
margin-block-start: 0;
margin-block-end: 0;
min-height: var(--size-item-medium);
}
}
--nova-stp-inset: var(--space-large);
@include nova-card-stp-controls;
}
}
}
.nova-enabled .ds-section-grid.ds-card-grid {
@include at-content-cols-range(0, 8) {
.col-1-small { @include nova-section-card-small; }
.col-1-medium,
.col-1-large { @include nova-section-card-medium; }
}
@include at-content-cols-range(8, 12) {
.col-2-small { @include nova-section-card-small; }
.col-2-medium { @include nova-section-card-medium; }
.col-2-large { @include nova-section-card-large; }
}
@include at-content-cols-range(12, 16) {
.col-3-small { @include nova-section-card-small; }
.col-3-medium { @include nova-section-card-medium; }
.col-3-large { @include nova-section-card-large; }
}
@include at-content-cols(16) {
.col-4-small { @include nova-section-card-small; }
.col-4-medium { @include nova-section-card-medium; }
.col-4-large { @include nova-section-card-large; }
}
}