From 2844a2bd71dcf1eb17a53992c10129b7496332e0 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 31 Oct 2023 17:41:43 +0100
Subject: feat(components): add an Overlay component

* add useScrollbarWidth hook
* add useScrollLock hook
* add a new component to lock scroll with an overlay (it can be useful
especially on small screens to prevent background contents to be
scrolled)
---
 src/components/atoms/overlay/overlay.module.scss | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/components/atoms/overlay/overlay.module.scss

(limited to 'src/components/atoms/overlay/overlay.module.scss')

diff --git a/src/components/atoms/overlay/overlay.module.scss b/src/components/atoms/overlay/overlay.module.scss
new file mode 100644
index 0000000..edbc4ae
--- /dev/null
+++ b/src/components/atoms/overlay/overlay.module.scss
@@ -0,0 +1,18 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: hsla(0, 0%, 0%, 0.6);
+  transition: all 0.3s linear 0s;
+
+  &--hidden {
+    opacity: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+}
-- 
cgit v1.2.3