-
Учетные данные пользователя
-
-
-
-
+
+
+
Учетные данные пользователя
+
+
+
-
+
);
}
diff --git a/rsconcept/frontend/src/styling/animations.ts b/rsconcept/frontend/src/styling/animations.ts
deleted file mode 100644
index ff2cd8e9..00000000
--- a/rsconcept/frontend/src/styling/animations.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Module: animations parameters.
- */
-
-import { Variants } from 'framer-motion';
-
-export const animateDropdown: Variants = {
- open: {
- clipPath: 'inset(0% 0% 0% 0%)',
- transition: {
- type: 'spring',
- bounce: 0,
- duration: 0.4,
- delayChildren: 0.2,
- staggerChildren: 0.05
- }
- },
- closed: {
- clipPath: 'inset(10% 0% 90% 0%)',
- transition: {
- type: 'spring',
- bounce: 0,
- duration: 0.3
- }
- }
-};
-
-export const animateDropdownItem: Variants = {
- open: {
- opacity: 1,
- y: 0,
- transition: {
- type: 'spring',
- duration: 0.1,
- stiffness: 300,
- damping: 24
- }
- },
- closed: {
- opacity: 0,
- y: 10,
- transition: {
- duration: 0.1
- }
- }
-};
-
-export const animateModal = {
- initial: {
- clipPath: 'inset(50% 50% 50% 50%)',
- opacity: 0
- },
- animate: {
- clipPath: 'inset(0% 0% 0% 0%)',
- opacity: 1,
- transition: {
- type: 'spring',
- bounce: 0,
- duration: 0.3
- }
- },
- exit: {
- opacity: 0,
- clipPath: 'inset(50% 50% 50% 50%)',
- transition: {
- type: 'spring',
- bounce: 0,
- duration: 0.2
- }
- }
-};
diff --git a/rsconcept/frontend/src/styling/constants.css b/rsconcept/frontend/src/styling/constants.css
index 8a61ee5e..46b9b376 100644
--- a/rsconcept/frontend/src/styling/constants.css
+++ b/rsconcept/frontend/src/styling/constants.css
@@ -16,7 +16,9 @@
--text-max-width: 75ch;
--scroll-padding: 3rem;
- --duration-move: 400ms;
+ --duration-move: 500ms;
+ --duration-modal: 300ms;
+ --duration-fade: 300ms;
/* Light Theme */
--cl-bg-120: hsl(000, 000%, 100%);
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index 4be32573..f1311275 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -214,11 +214,14 @@
}
.cc-column {
- @apply flex flex-col gap-3;
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
}
.cc-icons {
- @apply flex gap-1;
+ display: flex;
+ gap: 0.25rem;
}
.cc-fit-content {
@@ -254,4 +257,30 @@
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: var(--duration-move);
}
+
+ .cc-fade-in {
+ opacity: 1;
+
+ transition-property: opacity;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: var(--duration-fade);
+
+ @starting-style {
+ opacity: 0;
+ }
+ }
+
+ .cc-animate-modal {
+ clip-path: inset(0% 0% 0% 0%);
+ opacity: 1;
+
+ transition-property: clip-path, opacity;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: var(--duration-modal);
+
+ @starting-style {
+ clip-path: inset(50% 50% 50% 50%);
+ opacity: 0;
+ }
+ }
}
diff --git a/rsconcept/frontend/src/utils/constants.ts b/rsconcept/frontend/src/utils/constants.ts
index a30cd720..f0777c94 100644
--- a/rsconcept/frontend/src/utils/constants.ts
+++ b/rsconcept/frontend/src/utils/constants.ts
@@ -23,6 +23,7 @@ export const PARAMETER = {
fastAnimation: 200, // milliseconds - duration of fast animation
fadeDuration: 300, // milliseconds - duration of fade animation
+ dropdownDuration: 300, // milliseconds - duration of dropdown animation
moveDuration: 500, // milliseconds - duration of move animation
graphHandleSize: 3, // pixels - size of graph connection handle