From d8cdeb4d37547c8ae66ca672f1311d5dcf91613c Mon Sep 17 00:00:00 2001
From: Nicolas Turlais <nicolas.turlais@gmail.com>
Date: Tue, 15 Oct 2024 21:33:57 +0200
Subject: [PATCH] Transition time as css var #141 #142

---
 src/css/chocolat.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/css/chocolat.css b/src/css/chocolat.css
index c7fde6a..145f459 100644
--- a/src/css/chocolat.css
+++ b/src/css/chocolat.css
@@ -4,6 +4,7 @@
     --chocolat-icon-close: url('./../icons/icon-close.svg');
     --chocolat-icon-loader: url('./../icons/icon-loader.svg');
     --chocolat-icon-fullscreen: url('./../icons/icon-fullscreen.svg');
+    --chocolat-transition-time: 0.4s;
 }
 
 .chocolat-zoomable.chocolat-zoomed {
@@ -13,7 +14,7 @@
     overflow: hidden;
 }
 .chocolat-overlay {
-    transition: opacity 0.4s ease, visibility 0s 0.4s ease;
+    transition: opacity var(--chocolat-transition-time) ease, visibility 0s var(--chocolat-transition-time) ease;
     height: 100%;
     width: 100%;
     position: fixed;
@@ -25,13 +26,13 @@
     opacity: 0;
 }
 .chocolat-overlay.chocolat-visible {
-    transition: opacity 0.4s, visibility 0s;
+    transition: opacity var(--chocolat-transition-time), visibility 0s;
     visibility: visible;
     opacity: 0.8;
 }
 
 .chocolat-wrapper {
-    transition: opacity 0.4s ease, visibility 0s 0.4s ease;
+    transition: opacity var(--chocolat-transition-time) ease, visibility 0s var(--chocolat-transition-time) ease;
     width: 100%;
     height: 100%;
     position: fixed;
@@ -43,7 +44,7 @@
     visibility: hidden;
 }
 .chocolat-wrapper.chocolat-visible {
-    transition: opacity 0.4s, visibility 0s;
+    transition: opacity var(--chocolat-transition-time), visibility 0s;
     opacity: 1;
     visibility: visible;
 }