From d12f97c6231dca27f150b5376bbd51e0b1756e23 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Thu, 29 Jul 2021 10:27:43 +0100
Subject: [PATCH] [BASE][CSS] Snappier and consistent animations.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
---
 public/assets/css/base.css              | 15 ++++++++++-----
 public/assets/css/settings/settings.css | 13 ++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index ed3d982efb..f691defbda 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -29,6 +29,11 @@
 
     --shadow: 0px 0px 16px 0px #383E51;
     --shadow-light: 0px 0px 16px 0px #8E8DBE;
+
+    /* transitions and animations */
+    --cubic-transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    --fade-in: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
 
 /* TYPOGRAPHY */
@@ -104,10 +109,10 @@ a:visited {
 a:focus,
 a:hover {
     border-radius: var(--unit-size) !important;
-    padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
     background: var(--white) !important;
     color: var(--bg1) !important;
-    transition: all 0.4s ease;
+    padding: 0 var(--unit-size) 0 var(--unit-size) !important;
+    transition: var(--cubic-transition);
 }
 
 #instance:focus svg,
@@ -119,10 +124,10 @@ a:hover {
 summary:hover > svg,
 summary:focus > svg {
     border-radius: var(--unit-size);
-    padding: var(--small-size) !important;
+    padding: var(--unit-size) !important;
     background: var(--white) !important;
     fill: var(--bg1) !important;
-    transition: all 0.4s ease;
+    transition: var(--cubic-transition);
 }
 
 hr {
@@ -279,7 +284,7 @@ figcaption a:link {
 }
 
 .panel aside {
-    animation: fadeIn 300ms cubic-bezier(0, 0.55, 0.45, 1);
+    animation: var(--fade-in);
 }
 
 .icon-left,
diff --git a/public/assets/css/settings/settings.css b/public/assets/css/settings/settings.css
index 776603eda5..193b0957f9 100644
--- a/public/assets/css/settings/settings.css
+++ b/public/assets/css/settings/settings.css
@@ -54,22 +54,25 @@
 .section-title-settings summary:focus,
 .section-title-settings summary:hover {
     border-radius: var(--unit-size) !important;
-    padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
     background: var(--white) !important;
     color: var(--bg1) !important;
-    transition: all 0.4s ease;
+    transition: var(--cubic-transition);
+}
+
+.section-title-settings summary:focus {
+    padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
 }
 
 .section-title-settings summary:focus .icon-details-open,
 .section-title-settings summary:hover .icon-details-open {
     fill: var(--bg1);
-    transition: all 0.4s ease;
+    transition: var(--cubic-transition);
 }
 
 /* SECTION DETAILS OPENED */
 .section-title-settings[open] svg {
     transform: rotate(180deg);
-    animation: fadeOut 300ms;
+    animation: var(--fade-out)
 }
 
 .section-title-settings[open] .set-nav li:first-of-type {
@@ -83,5 +86,5 @@
 /* SECTION DETAILS CLOSED */
 .section-title-settings:not([open]) svg {
     transform: initial;
-    animation: fadeIn 300ms;
+    animation: var(--fade-in);
 }
\ No newline at end of file