From a640703f2da8815dc26ad1600a6f206be1624379 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Wed, 1 Jun 2022 22:10:32 +0200
Subject: feat: Initial after clean slate

---
 apps/web-shared/src/styles/components/popover.scss | 38 ++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 apps/web-shared/src/styles/components/popover.scss

(limited to 'apps/web-shared/src/styles/components/popover.scss')

diff --git a/apps/web-shared/src/styles/components/popover.scss b/apps/web-shared/src/styles/components/popover.scss
new file mode 100644
index 0000000..7f423a0
--- /dev/null
+++ b/apps/web-shared/src/styles/components/popover.scss
@@ -0,0 +1,38 @@
+@use '../base'as *;
+
+/* --------------------------------
+
+File#: _1_popover
+Title: Popover
+Descr: A pop-up box controlled by a trigger element
+Usage: codyhouse.co/license
+
+-------------------------------- */
+:root {
+  --popover-width: 250px;
+  --popover-control-gap: 4px; // ⚠️ use px units - vertical gap between the popover and its control
+  --popover-viewport-gap: 20px; // ⚠️ use px units - vertical gap between the popover and the viewport - visible if popover height > viewport height
+  --popover-transition-duration: 0.2s;
+}
+
+.popover {
+  position: fixed; // top/left position set in JS
+  width: var(--popover-width);
+  z-index: var(--z-index-popover, 5);
+  margin-top: var(--popover-control-gap);
+  margin-bottom: var(--popover-control-gap);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  visibility: hidden;
+  opacity: 0;
+}
+
+.popover--is-visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.popover-control--active {
+  // class added to the trigger when popover is visible
+}
-- 
cgit v1.3