1 files changed, 48 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss
new file mode 100644
index 0000000000..b11bcdcf55
--- /dev/null
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSImage/_DSImage.scss
@@ -0,0 +1,48 @@
+.ds-image {
+  display: block;
+  position: relative;
+  opacity: 0;
+
+  &.use-transition {
+    transition: opacity 0.8s;
+  }
+
+  &.loaded {
+    opacity: 1;
+  }
+
+  img,
+  .placeholder-image,
+  .broken-image {
+    background-color: var(--newtab-element-secondary-color);
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .placeholder-image {
+    overflow: hidden;
+    background-color: var(--placeholderBackgroundColor);
+
+    &::before {
+      content: '';
+      background-image: url('chrome://activity-stream/content/data/content/assets/pocket-swoosh.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      transform: rotate(var(--placeholderBackgroundRotation));
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      // We use margin-left over margin-inline-start on purpose.
+      // This is because we are using it to offset an image's content,
+      // and the image content is the same in ltr and rtl.
+      margin-left: var(--placeholderBackgroundOffsetx); // stylelint-disable-line property-disallowed-list
+      margin-top: var(--placeholderBackgroundOffsety);
+      background-size: var(--placeholderBackgroundScale);
+    }
+  }
+}