tor-browser

_CardGrid.scss (4799B)

---

.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);
     }
   }
 }
}