gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature/blur component

Browse Source
This commit is contained in:
Yury 2024-06-22 07:58:47 +00:00
parent 84383b6e07
commit 2408481948
3 changed files with 32 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/BlurComponent/styles.scss
View File

@ -2,6 +2,8 @@
position: relative;
height: 100%;
width: 100%;
text-align: center;
text-align: -webkit-center;
.gradient-blur {
position: absolute;
@ -10,7 +12,7 @@
left: -100px;
right: -100px;
bottom: -16px;
top: -24px;
top: -48px;
height: auto;
pointer-events: none;
@ -24,97 +26,68 @@
&::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%
);
-webkit-backdrop-filter: blur(0.5px);
backdrop-filter: blur(0.5px);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 12.5%, black 25%, rgba(0, 0, 0, 0) 37.5%);
}
& > div:nth-of-type(1) {
z-index: 2;
-webkit-backdrop-filter: blur(1px);
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-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, black 25%, black 37.5%, rgba(0, 0, 0, 0) 50%);
}
& > div:nth-of-type(2) {
z-index: 3;
-webkit-backdrop-filter: blur(2px);
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-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, black 37.5%, black 50%, rgba(0, 0, 0, 0) 62.5%);
}
& > div:nth-of-type(3) {
z-index: 4;
-webkit-backdrop-filter: blur(4px);
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-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, black 50%, black 62.5%, rgba(0, 0, 0, 0) 75%);
}
& > div:nth-of-type(4) {
z-index: 5;
-webkit-backdrop-filter: blur(8px);
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-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, black 62.5%, black 75%, rgba(0, 0, 0, 0) 87.5%);
}
& > div:nth-of-type(5) {
z-index: 6;
-webkit-backdrop-filter: blur(16px);
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-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, black 75%, black 87.5%, rgba(0, 0, 0, 0) 100%);
}
& > div:nth-of-type(6) {
z-index: 7;
-webkit-backdrop-filter: blur(32px);
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-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, black 87.5%, black 100%);
}
&::after {
content: "";
z-index: 8;
-webkit-backdrop-filter: blur(64px);
backdrop-filter: blur(64px);
mask: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 87.5%,
rgba(0, 0, 0, 1) 100%
);
-webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, black 100%);
}
}
}

6
src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx
View File

@ -3,7 +3,7 @@ import styles from "./styles.module.scss";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import { useNavigate } from "react-router-dom";
import {useNavigate, useLocation} from "react-router-dom";
import routes from "@/routes";
import Answer from "../../../../ui/Answer";
import QuestionnaireGreenButton from "../../../../ui/GreenButton";
@ -19,6 +19,7 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
const { currentlyAffecting, gender } = useSelector(
selectors.selectQuestionnaire
);
const location = useLocation();
const handleClick = (answer: IAnswer) => {
if (currentlyAffecting.includes(`$${answer.id}`)) {
@ -54,6 +55,7 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
);
};
return (
<>
<div className={styles["multiply-answers"]}>
@ -79,7 +81,7 @@ function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
</div>
{!!currentlyAffecting.length && (
<QuestionnaireGreenButton
isActiveBlur={true}
isActiveBlur={location.pathname.includes('v1/questionnaire/relationships/currentlyAffecting/')}
className={styles.button}
onClick={handleNext}
>

1
src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss
View File

@ -19,7 +19,6 @@
button {
z-index: 10;
max-width: 100%;
}
}