From b7aa8fe56ab61c351a9e25f61fa8d064e8365f54 Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Mon, 16 Dec 2024 11:54:27 +0300
Subject: [PATCH] F: Add selection animation for graphs

---
 rsconcept/frontend/src/styling/constants.css |  1 +
 rsconcept/frontend/src/styling/overrides.css | 23 ++++++++++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/rsconcept/frontend/src/styling/constants.css b/rsconcept/frontend/src/styling/constants.css
index 46b9b376..b37dc650 100644
--- a/rsconcept/frontend/src/styling/constants.css
+++ b/rsconcept/frontend/src/styling/constants.css
@@ -19,6 +19,7 @@
   --duration-move: 500ms;
   --duration-modal: 300ms;
   --duration-fade: 300ms;
+  --duration-select: 100ms;
 
   /* Light Theme */
   --cl-bg-120:      hsl(000, 000%, 100%);
diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css
index 4bd97b0b..f5f35644 100644
--- a/rsconcept/frontend/src/styling/overrides.css
+++ b/rsconcept/frontend/src/styling/overrides.css
@@ -115,14 +115,26 @@
   border-radius: 5px;
   padding: 2px;
   width: 150px;
-  height: 40px;
+  height: fit-content;
+
+  outline-offset: -2px;
+  outline-style: solid;
+  outline-color: transparent;
+
+  transition-property: outline-offset;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: var(--duration-select);
 
   &.selected {
+    outline-offset: 4px;
+    outline-color: var(--cl-teal-bg-100);
     border-color: var(--cd-bg-40);
   }
 
   .dark & {
     &.selected {
+      outline-offset: 4px;
+      border-color: var(--cd-teal-bg-100);
       border-color: var(--cl-bg-40);
     }
   }
@@ -137,18 +149,25 @@
   width: 40px;
   height: 40px;
 
-  outline-offset: 4px;
+  outline-offset: -2px;
   outline-style: solid;
   outline-color: transparent;
 
+  transition-property: outline-offset;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: var(--duration-select);
+
   &.selected {
+    outline-offset: 4px;
     outline-color: var(--cl-teal-bg-100);
     border-color: transparent;
   }
 
   .dark & {
     &.selected {
+      outline-offset: 4px;
       border-color: var(--cd-teal-bg-100);
+      border-color: transparent;
     }
   }
 }