From 81bcfcbaba2274f6a3f2461db572d3bffa708900 Mon Sep 17 00:00:00 2001
From: Svetlana Korobtseva <wizzzjer@gmail.com>
Date: Mon, 23 Sep 2024 23:34:17 +0800
Subject: [PATCH] =?UTF-8?q?=D0=9C=D0=B0=D0=BB=D1=8F=D1=80=D0=BD=D1=8B?=
 =?UTF-8?q?=D0=B5=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demos/images/dosvg-heart.svg              |  1 +
 .../demos/images/dosvg-look.svg               |  1 +
 .../demos/images/dosvg-paw.svg                |  1 +
 .../demos/images/dosvg-sleep.svg              |  1 +
 .../demos/images/dosvg.svg                    |  1 +
 .../demos/index.html                          | 58 ++++++++++++-------
 6 files changed, 41 insertions(+), 22 deletions(-)
 create mode 100644 recipes/horizontal-scroll-with-shadow/demos/images/dosvg-heart.svg
 create mode 100644 recipes/horizontal-scroll-with-shadow/demos/images/dosvg-look.svg
 create mode 100644 recipes/horizontal-scroll-with-shadow/demos/images/dosvg-paw.svg
 create mode 100644 recipes/horizontal-scroll-with-shadow/demos/images/dosvg-sleep.svg
 create mode 100644 recipes/horizontal-scroll-with-shadow/demos/images/dosvg.svg

diff --git a/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-heart.svg b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-heart.svg
new file mode 100644
index 0000000000..b3b9623602
--- /dev/null
+++ b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-heart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="none"><rect width="34" height="20" x="35.9" y="55.042" fill="#18191c" rx="10" transform="rotate(-45 35.9 55.042)"/><rect width="34" height="20" x="50.042" y="69.184" fill="#18191c" rx="10" transform="rotate(-135 50.042 69.184)"/></svg>
diff --git a/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-look.svg b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-look.svg
new file mode 100644
index 0000000000..5fa331e8a9
--- /dev/null
+++ b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-look.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="none"><path stroke="#18191c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7" d="M14.453 52v23l4 2M23.453 47v23h3M10.499 33c-5.999 5.998 3.856 15.853 9.854 9.855"/><path stroke="#18191c" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.49" d="M86 27c4.272 0 3.6 10.153 3.6 19.406"/><path stroke="#18191c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7" d="M62.453 54v23l3 1M71.453 48v23h4"/><rect width="74" height="27" x="6" y="38" fill="#18191c" rx="13.5"/><circle cx="77.129" cy="34.129" r="12.129" fill="#18191c"/><circle cx="76" cy="30" r="3" fill="#18191c" stroke="#fff" stroke-width="2"/><circle cx="63.542" cy="36.542" r="8.49" fill="#18191c" transform="rotate(.35 63.542 36.542)"/><path fill="#fff" d="M58.372 34.065c-2.345 0-4.372-.4-4.372-2.416C54 29.634 55.9 28 58.245 28s4.245 1.634 4.245 3.65c0 2.014-1.774 2.415-4.118 2.415Z"/></svg>
diff --git a/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-paw.svg b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-paw.svg
new file mode 100644
index 0000000000..c42c41b9f7
--- /dev/null
+++ b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-paw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="none"><rect width="22.382" height="13.166" x="40.783" y="60.967" fill="#18191c" rx="6.583" transform="rotate(-45 40.783 60.967)"/><rect width="22.382" height="13.166" x="50.093" y="70.277" fill="#18191c" rx="6.583" transform="rotate(-135 50.093 70.277)"/><rect width="7.241" height="13.166" x="42.94" y="30" fill="#18191c" rx="3.621" transform="rotate(15 42.94 30)"/><rect width="7.241" height="13.166" x="32.407" y="36.583" fill="#18191c" rx="3.621" transform="rotate(15 32.407 36.583)"/><rect width="7.241" height="13.166" fill="#18191c" rx="3.621" transform="scale(-1 1) rotate(15 -142.4 -201.21)"/><rect width="7.241" height="13.166" fill="#18191c" rx="3.621" transform="scale(-1 1) rotate(15 -170.233 -238.746)"/></svg>
diff --git a/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-sleep.svg b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-sleep.svg
new file mode 100644
index 0000000000..0328d0274d
--- /dev/null
+++ b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg-sleep.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="none"><path stroke="#18191c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7" d="M32 64H16l2-4M73 64H61l-2-4M17.998 44.205c-1.875-8.273-15.467-5.193-13.592 3.08"/><path stroke="#18191c" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.49" d="M73.639 42.852c-4.273 0-3.6 10.153-3.6 19.406M90.62 42.852c4.271 0 3.6 10.153 3.6 19.406"/><rect width="74" height="27" x="10" y="34" fill="#18191c" rx="13.5"/><circle cx="82.129" cy="50.129" r="12.129" fill="#18191c"/><circle cx="82.077" cy="57.458" r="8.49" fill="#18191c" transform="rotate(.35 82.077 57.458)"/><path fill="#fff" d="M82.256 60.32c-2.345 0-4.372-.4-4.372-2.416 0-2.015 1.9-3.65 4.245-3.65 2.344 0 4.245 1.635 4.245 3.65 0 2.015-1.774 2.415-4.118 2.415Z"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M83.585 43.822c0 3.881 5.821 3.881 5.821 0M74.852 43.822c0 3.881 5.822 3.881 5.822 0"/></svg>
diff --git a/recipes/horizontal-scroll-with-shadow/demos/images/dosvg.svg b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg.svg
new file mode 100644
index 0000000000..0521d0ad72
--- /dev/null
+++ b/recipes/horizontal-scroll-with-shadow/demos/images/dosvg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill="none"><path stroke="#18191c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7" d="M14.453 50v23l4 2M23.453 45v23h3M10.499 31c-5.999 5.998 3.856 15.853 9.854 9.855"/><path stroke="#18191c" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.49" d="M69.639 28.852c-4.273 0-3.6 10.153-3.6 19.406M86.62 28.852c4.271 0 3.6 10.153 3.6 19.406"/><path stroke="#18191c" stroke-linecap="round" stroke-linejoin="round" stroke-width="7" d="M62.453 52v23l3 1M71.453 46v23h4"/><rect width="74" height="27" x="6" y="36" fill="#18191c" rx="13.5"/><circle cx="78.129" cy="36.129" r="12.129" fill="#18191c"/><circle cx="78.077" cy="43.458" r="8.49" fill="#18191c" transform="rotate(.35 78.077 43.458)"/><path fill="#fff" d="M78.256 46.32c-2.345 0-4.372-.4-4.372-2.416 0-2.015 1.9-3.65 4.245-3.65 2.344 0 4.245 1.635 4.245 3.65 0 2.015-1.774 2.415-4.118 2.415Z"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M76.674 32.733c0-3.881-5.822-3.881-5.822 0M85.406 32.733c0-3.881-5.822-3.881-5.822 0"/></svg>
diff --git a/recipes/horizontal-scroll-with-shadow/demos/index.html b/recipes/horizontal-scroll-with-shadow/demos/index.html
index adf5c4d645..ceadd5cbfd 100644
--- a/recipes/horizontal-scroll-with-shadow/demos/index.html
+++ b/recipes/horizontal-scroll-with-shadow/demos/index.html
@@ -4,10 +4,6 @@
   <title>Горизонтальный скролл с тенями</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap">
 
   <style>
     html, body {
@@ -27,14 +23,17 @@
     .component {
       position: relative;
       width: 600px;
-      height: 220px;
       overflow: hidden;
     }
 
     .component__container {
       display: flex;
+      gap: 25px;
+      padding-block-end: 25px;
       overflow-x: scroll;
       scroll-behavior: smooth;
+      scrollbar-color: #C56FFF transparent;
+      scrollbar-width: thin;
     }
 
     .component__container::-webkit-scrollbar {
@@ -42,31 +41,30 @@
     }
 
     .component__container::-webkit-scrollbar-track {
-      background: #1f2023;
+      background: #5F377D;
       border-radius: 4px;
     }
 
     .component__container::-webkit-scrollbar-thumb {
-      background: #888;
+      background: #C56FFF;
       border-radius: 4px;
     }
 
     .component__container::-webkit-scrollbar-thumb:hover {
-      background: #555;
+      background: #FFFFFF;
     }
 
     .component__container div {
       min-width: 200px;
       height: 200px;
-      margin-right: 20px;
-      background-color: #fff;
+      background-color: #C56FFF;
       flex-shrink: 0;
     }
 
     .component__shadow {
       position: absolute;
       top: 0;
-      bottom: 0;
+      bottom: calc(100% - 200px);
       width: 50px;
       pointer-events: none;
     }
@@ -84,6 +82,31 @@
     .scroll-shadow__shadow--hide {
       display: none;
     }
+
+    .component__container div {
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    .component__container div:nth-of-type(1) {
+      background-image: url(images/dosvg.svg);
+    }
+
+    .component__container div:nth-of-type(2) {
+      background-image: url(images/dosvg-heart.svg);
+    }
+
+    .component__container div:nth-of-type(3) {
+      background-image: url(images/dosvg-look.svg);
+    }
+
+    .component__container div:nth-of-type(4) {
+      background-image: url(images/dosvg-paw.svg);
+    }
+
+    .component__container div:nth-of-type(5) {
+      background-image: url(images/dosvg-sleep.svg);
+    }
   </style>
 </head>
 <body>
@@ -110,17 +133,8 @@
         const scrollLeft = container.scrollLeft;
         const maxScrollLeft = container.scrollWidth - container.clientWidth;
 
-        if (scrollLeft > 10) {
-          shadowLeft.classList.remove('scroll-shadow__shadow--hide');
-        } else {
-          shadowLeft.classList.add('scroll-shadow__shadow--hide');
-        }
-
-        if (scrollLeft < maxScrollLeft - 10) {
-          shadowRight.classList.remove('scroll-shadow__shadow--hide');
-        } else {
-          shadowRight.classList.add('scroll-shadow__shadow--hide');
-        }
+        shadowLeft.classList.toggle('scroll-shadow__shadow--hide', scrollLeft <= 10);
+        shadowRight.classList.toggle('scroll-shadow__shadow--hide', scrollLeft >= maxScrollLeft - 10);
       }
 
       container.addEventListener('scroll', updateShadows);