1 files changed, 355 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
new file mode 100644
index 0000000000..fb838f4628
--- /dev/null
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
@@ -0,0 +1,355 @@
+$col4-header-line-height: 20;
+$col4-header-font-size: 14;
+
+.ds-onboarding-container,
+.ds-card-grid .ds-card {
+  @include dark-theme-only {
+    background: none;
+  }
+
+  background: $white;
+  border-radius: 4px;
+
+  &:not(.placeholder) {
+    @include dark-theme-only {
+      background: var(--newtab-background-color-secondary);
+    }
+
+    border-radius: $border-radius-new;
+    box-shadow: $shadow-card;
+
+    .img-wrapper .img {
+      img,
+      .placeholder-image {
+        border-radius: $border-radius-new $border-radius-new 0 0;
+      }
+    }
+  }
+}
+
+.ds-onboarding-container {
+  padding-inline-start: 16px;
+  padding-inline-end: 16px;
+
+  @media (min-width: $break-point-medium) {
+    padding-inline-end: 48px;
+  }
+
+  @media (min-width: $break-point-large) {
+    padding-inline-end: 56px;
+  }
+
+  margin-bottom: 24px;
+  // This is to position the dismiss button to the right most of this element.
+  position: relative;
+
+  .ds-onboarding {
+    position: static;
+    display: flex;
+
+    .ds-dismiss-button {
+      inset-inline-end: 8px;
+      top: 8px;
+    }
+  }
+
+  header {
+    @include dark-theme-only {
+      color: var(--newtab-background-color-primary);
+    }
+
+    display: flex;
+    margin: 32px 0 8px;
+
+    @media (min-width: $break-point-medium) {
+      margin: 16px 0 8px;
+      display: block;
+      height: 24px;
+    }
+
+    font-size: 17px;
+    line-height: 23.8px;
+    font-weight: 600;
+    color: $pocket-icon-fill;
+  }
+
+  p {
+    margin: 8px 0 16px;
+    font-size: 13px;
+    line-height: 19.5px;
+  }
+
+  .icon-pocket {
+    @include dark-theme-only {
+      @media (forced-colors: active) {
+        fill: CurrentColor;
+      }
+      fill: var(--newtab-text-primary-color);
+    }
+    @media (forced-colors: active) {
+      fill: CurrentColor;
+    }
+
+    fill: $pocket-icon-fill;
+    margin-top: 3px;
+    margin-inline-end: 8px;
+    height: 22px;
+    width: 22px;
+    background-image: url('chrome://global/skin/icons/pocket.svg');
+
+    @media (min-width: $break-point-medium) {
+      margin-top: -5px;
+      margin-inline-start: -2px;
+      margin-inline-end: 15px;
+      height: 30px;
+      width: 30px;
+    }
+
+    background-size: contain;
+  }
+
+  .ds-onboarding-graphic {
+    background-image: url('chrome://activity-stream/content/data/content/assets/pocket-onboarding.avif');
+
+    @media (min-resolution: 2x) {
+      background-image: url('chrome://activity-stream/content/data/content/assets/pocket-onboarding@2x.avif');
+    }
+
+    border-radius: 8px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 120px;
+    width: 200px;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    margin-inline-start: 54px;
+    flex-shrink: 0;
+    display: none;
+
+    @media (min-width: $break-point-large) {
+      display: block;
+    }
+  }
+}
+
+.ds-card-grid {
+  display: grid;
+  grid-gap: 24px;
+
+  &.ds-card-grid-compact {
+    grid-gap: 20px;
+  }
+
+  &.ds-card-grid-recent-saves {
+    .ds-card {
+      // Hide the second row orphan on narrow screens.
+      @media (min-width: $break-point-medium) and (max-width: $break-point-large) {
+        &:last-child:nth-child(2n - 1) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .ds-card-link:focus {
+    @include ds-focus;
+
+    transition: none;
+    border-radius: $border-radius-new;
+  }
+
+  // "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: 17px;
+      line-height: 24px;
+    }
+
+    .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-top: 8px;
+        }
+
+        .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: 13px;
+        }
+
+        .status-message .story-context-label {
+          font-size: 11.7px;
+        }
+
+        .story-badge-icon {
+          margin-inline-end: 2px;
+          margin-bottom: 2px;
+          height: 14px;
+          width: 14px;
+          background-size: 14px;
+        }
+
+        .title {
+          font-size: 14px;
+          line-height: 20px;
+        }
+
+        .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 (max-height: 1065px) {
+        .excerpt {
+          display: none;
+        }
+      }
+
+      @media (max-width: $break-point-widest) {
+        @include small-cards;
+      }
+
+      @media (min-width: $break-point-widest) and (max-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: 8px;
+      box-shadow: $shadow-card;
+    }
+
+    .meta {
+      padding: 12px 0 0;
+    }
+  }
+}
+
+.ds-layout {
+  .ds-sub-header {
+    margin-top: 24px;
+
+    .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: 14px;
+      line-height: 16px;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &:active {
+        color: var(--newtab-primary-element-active-color);
+      }
+    }
+  }
+}