From 101b451a38325925d79d4174d1d9faa826fd7d69 Mon Sep 17 00:00:00 2001
From: yury <yury.work.js@gmail.com>
Date: Sat, 22 Jun 2024 04:52:46 +0300
Subject: [PATCH] feat: fix blur

---
 src/components/BlurComponent/styles.scss      | 79 ++++++-------------
 .../MultipleAnswers/styles.module.scss        |  1 -
 2 files changed, 26 insertions(+), 54 deletions(-)

diff --git a/src/components/BlurComponent/styles.scss b/src/components/BlurComponent/styles.scss
index 14ceccf..e055656 100644
--- a/src/components/BlurComponent/styles.scss
+++ b/src/components/BlurComponent/styles.scss
@@ -2,6 +2,8 @@
   position: relative;
   height: 100%;
   width: 100%;
+  text-align: center;
+  text-align: -webkit-center;
 
   .gradient-blur {
     position: absolute;
@@ -24,86 +26,57 @@
     &::before {
       content: "";
       z-index: 1;
-      backdrop-filter: blur(2px);
-      mask: linear-gradient(
-                      to bottom,
-                      rgba(0, 0, 0, 0) 0%,
-                      rgba(0, 0, 0, 1) 12.5%,
-                      rgba(0, 0, 0, 1) 25%,
-                      rgba(0, 0, 0, 0) 37.5%
-      );
+      backdrop-filter: blur(1px);
+      -webkit-backdrop-filter: blur(1px);
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
     }
 
 
     & > div:nth-of-type(1) {
       z-index: 2;
       backdrop-filter: blur(1px);
-      mask: linear-gradient(
-                      to bottom,
-                      rgba(0, 0, 0, 0) 12.5%,
-                      rgba(0, 0, 0, 1) 25%,
-                      rgba(0, 0, 0, 1) 37.5%,
-                      rgba(0, 0, 0, 0) 50%
-      );
+      -webkit-backdrop-filter: blur(1px);
+      mask: linear-gradient(to bottom, rgba(255, 255, 255, 0) 13%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 18%, rgba(0, 0, 0, 0) 50%);
     }
 
     & > div:nth-of-type(2) {
       z-index: 3;
       backdrop-filter: blur(2px);
-      mask: linear-gradient(
-                      to bottom,
-                      rgba(0, 0, 0, 0) 25%,
-                      rgba(0, 0, 0, 1) 37.5%,
-                      rgba(0, 0, 0, 1) 50%,
-                      rgba(0, 0, 0, 0) 62.5%
-      );
+      -webkit-backdrop-filter: blur(2px);
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
+      /* margin-top: 10px; */
     }
 
     & > div:nth-of-type(3) {
-      z-index: 4;
+      z-index: -7;
       backdrop-filter: blur(4px);
-      mask: linear-gradient(
-                      to bottom,
-                      rgba(0, 0, 0, 0) 37.5%,
-                      rgba(0, 0, 0, 1) 50%,
-                      rgba(0, 0, 0, 1) 62.5%,
-                      rgba(0, 0, 0, 0) 75%
-      );
+      -webkit-backdrop-filter: blur(4px);
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
+      margin-top: 20px;
     }
 
     & > div:nth-of-type(4) {
-      z-index: 5;
+      z-index: -14;
       backdrop-filter: blur(8px);
-      mask: linear-gradient(
-                      to bottom,
-                      rgba(0, 0, 0, 0) 50%,
-                      rgba(0, 0, 0, 1) 62.5%,
-                      rgba(0, 0, 0, 1) 75%,
-                      rgba(0, 0, 0, 0) 87.5%
-      );
+      -webkit-backdrop-filter: blur(8px);
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
+      margin-top: 28px;
     }
 
     & > div:nth-of-type(5) {
-      z-index: 6;
+      z-index: -16;
       backdrop-filter: blur(16px);
-      mask: linear-gradient(
-                      to bottom,
-                      rgba(0, 0, 0, 0) 62.5%,
-                      rgba(0, 0, 0, 1) 75%,
-                      rgba(0, 0, 0, 1) 87.5%,
-                      rgba(0, 0, 0, 0) 100%
-      );
+      -webkit-backdrop-filter: blur(16px);
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
+      margin-top: 31px;
     }
 
     & > div:nth-of-type(6) {
-      z-index: 7;
+      z-index: -20;
       backdrop-filter: blur(32px);
-      mask: linear-gradient(
-                      to bottom,
-                      rgba(0, 0, 0, 0) 75%,
-                      rgba(0, 0, 0, 1) 87.5%,
-                      rgba(0, 0, 0, 1) 100%
-      );
+      -webkit-backdrop-filter: blur(32px);
+      mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
+      margin-top: 33px;
     }
 
     &::after {
diff --git a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss
index e757d8e..a6d6c34 100644
--- a/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss
+++ b/src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss
@@ -19,7 +19,6 @@
 
   button {
     z-index: 10;
-    max-width: 100%;
   }
 }