1 files changed, 38 insertions, 0 deletions
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
+}