¨4.0.1¨

Themes/Storefront/resources/assets/public/sass/vendors/_drift-zoom.scss

@@ -0,0 +1,32 @@
+.drift-bounding-box {
+    background: $color-default-transparent-lite;
+    background: var(--color-primary-transparent-lite);
+    z-index: 7;
+}
+
+.drift-zoom-pane {
+    left: 100%;
+    background: $color-white;
+    border-radius: $radius-default;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    z-index: 7;
+}
+
+.drift-zoom-pane-loader:before,
+.drift-zoom-pane-loader:after {
+    background: $color-default;
+    background: var(--color-primary);
+}
+
+/*rtl:ignore*/
+.rtl {
+    .drift-zoom-pane {
+        &.mobile-drift-zoom-pane {
+            right: auto;
+        }
+
+        img {
+            left: 0;
+        }
+    }
+}

Themes/Storefront/resources/assets/public/sass/vendors/_slick.scss

@@ -0,0 +1,129 @@
+.slick-list .slick-track {
+    float: left;
+}
+
+.slick-dotted {
+    &.slick-slider {
+        margin-bottom: 0;
+    }
+}
+
+.slick-prev,
+.slick-next {
+    z-index: 1;
+
+    &.slick-disabled:before {
+        opacity: 0.7;
+    }
+
+    &:before {
+        font-family: "Line Awesome Free";
+        font-size: 14px;
+        font-weight: 900;
+        color: $color-gray-dark;
+        opacity: 1;
+        transition: $transition-default;
+    }
+
+    &:hover {
+        &:before {
+            color: $color-default;
+            color: var(--color-primary);
+        }
+    }
+}
+
+.slick-prev:before {
+    content: "\f104";
+}
+
+.slick-next:before {
+    content: "\f105";
+}
+
+.rtl {
+    .slick-prev:before {
+        content: "\f105";
+    }
+
+    .slick-next:before {
+        content: "\f104";
+    }
+}
+
+.slick-dots {
+    bottom: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-bottom: -12px;
+
+    li {
+        height: 8px;
+        width: 8px;
+        margin: 0 6px 12px;
+        transition: $transition-primary;
+
+        button {
+            height: 8px;
+            width: 8px;
+            padding: 0;
+            transition: $transition-primary;
+
+            &:before {
+                content: "";
+                font-size: 14px;
+                height: 8px;
+                width: 8px;
+                background: $color-default;
+                background: var(--color-primary);
+                border-radius: 15px;
+                transition: $transition-primary;
+            }
+        }
+
+        &.slick-active {
+            width: 25px;
+
+            button {
+                width: 25px;
+
+                &:before {
+                    width: 25px;
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}
+
+.arrow-prev.slick-arrow,
+.arrow-next.slick-arrow {
+    position: absolute;
+    font-size: 14px;
+    padding: 4px 0;
+    color: $color-gray-dark;
+    z-index: 1;
+    cursor: pointer;
+    transition: none;
+
+    &:hover {
+        font-weight: 500;
+        color: $color-default;
+        color: var(--color-primary);
+    }
+}
+
+.arrow-prev {
+    right: 69px;
+}
+
+.arrow-next {
+    right: -3px;
+}
+
+.slick-arrow {
+    &.slick-disabled {
+        opacity: 0.6;
+    }
+}