blob: 7f423a00b910d5c3af5001de52146c79cd4fc445 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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
}
|
