Source code
Revision control
Copy as Markdown
Other Tools
.ds-card-grid .ds-card {
background: var(--newtab-background-color-secondary);
border-radius: var(--border-radius-small);
&:not(.placeholder) {
border-radius: var(--border-radius-medium);
box-shadow: $shadow-card;
img,
.placeholder-image {
border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}
}
}
.ds-card.refined-cards:not(.placeholder) {
.img-wrapper .img {
height: 160px;
width: 100%;
}
}
.ds-card-grid {
display: grid;
grid-gap: var(--space-xlarge);
position: relative;
&.ds-card-grid-compact {
grid-gap: var(--space-large);
}
&.ad-sizing-variant-a,
&.ad-sizing-variant-b {
row-gap: var(--space-xlarge);
column-gap: var(--space-large);
}
.ds-card-link:focus {
@include ds-focus;
transition: none;
border-radius: var(--border-radius-medium);
}
// "2/3 width layout"
.ds-column-5 &,
.ds-column-6 &,
.ds-column-7 &,
.ds-column-8 & {
grid-template-columns: repeat(2, 1fr);
}
// "Full width layout"
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
grid-template-columns: repeat(1, 1fr);
@media (min-width: $break-point-medium) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $break-point-large) {
grid-template-columns: repeat(3, 1fr);
}
.title {
font-size: var(--font-size-large);
}
.excerpt {
@include limit-visible-lines(3, 24, 15);
}
}
&.empty {
grid-template-columns: auto;
}
@mixin small-cards {
.ds-card {
&.placeholder {
min-height: 247px;
}
.meta {
.story-footer {
margin-block-start: var(--space-small);
}
.source,
.story-sponsored-label,
.status-message .story-context-label {
color: var(--newtab-text-secondary-color);
-webkit-line-clamp: 2;
}
.source,
.story-sponsored-label {
font-size: var(--font-size-small);
}
.status-message .story-context-label {
font-size: var(--font-size-small);
}
.story-badge-icon {
margin-inline-end: var(--space-xxsmall);
margin-block-end: var(--space-xxsmall);
height: 14px;
width: 14px;
background-size: 14px;
}
.title {
font-size: inherit;
}
.info-wrap {
flex-grow: 0;
}
}
}
}
&.ds-card-grid-four-card-variant {
// "Full width layout"
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
grid-template-columns: repeat(1, 1fr);
@media (min-width: $break-point-medium) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $break-point-large) {
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: $break-point-widest) {
grid-template-columns: repeat(4, 1fr);
}
}
@include small-cards;
}
&.ds-card-grid-hybrid-layout {
.ds-column-9 &,
.ds-column-10 &,
.ds-column-11 &,
.ds-column-12 & {
grid-template-columns: repeat(1, 1fr);
@media (min-width: $break-point-medium) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: $break-point-large) {
grid-template-columns: repeat(3, 1fr);
}
@media (height <= 1065px) {
.excerpt {
display: none;
}
}
@media (max-width: $break-point-widest) {
@include small-cards;
}
@media (min-width: $break-point-widest) and (height <= 964px) {
@include small-cards;
grid-template-columns: repeat(4, 1fr);
}
}
}
}
.outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card,
.outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card {
&:not(.placeholder) {
box-shadow: none;
background: none;
.ds-card-link:focus {
box-shadow: none;
.img-wrapper .img img {
@include ds-focus;
}
}
.img-wrapper .img img {
border-radius: var(--border-radius-medium);
box-shadow: $shadow-card;
}
.meta {
padding: var(--space-medium) 0 0;
}
}
}
.ds-layout {
.ds-sub-header {
margin-block-start: var(--space-xlarge);
.section-title-container {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
display: flex;
}
.section-sub-link {
color: var(--newtab-primary-action-background);
font-size: inherit;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:active {
color: var(--newtab-primary-element-active-color);
}
}
}
}