diff options
author | Volpeon <git@volpeon.ink> | 2024-06-26 21:47:55 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-26 21:47:55 +0200 |
commit | 03bb4268367dcd3b2d327d3834e2047a56687a86 (patch) | |
tree | 83f6f6837fc909dd8cc5f8166c3c1b4ae78c85d9 /src/objects/_popover.scss | |
parent | Update (diff) | |
download | iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.gz iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.tar.bz2 iro-design-03bb4268367dcd3b2d327d3834e2047a56687a86.zip |
Menus
Diffstat (limited to 'src/objects/_popover.scss')
-rw-r--r-- | src/objects/_popover.scss | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss new file mode 100644 index 0000000..9d4b1c7 --- /dev/null +++ b/src/objects/_popover.scss | |||
@@ -0,0 +1,46 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('popover') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --z-index: 10000, | ||
8 | --pad-i: 0, | ||
9 | --pad-b: fn.global-dim(--size --85), | ||
10 | --separator: fn.global-dim(--size --85), | ||
11 | --rounding: fn.global-dim(--rounding), | ||
12 | --border: fn.global-dim(--border --thin), | ||
13 | ), | ||
14 | --colors: ( | ||
15 | --bg: fn.global-color(--bg-l2), | ||
16 | --border: fn.global-color(--border), | ||
17 | --shadow: 0 .2em .5em rgba(#000, .1), | ||
18 | ), | ||
19 | )); | ||
20 | |||
21 | @include iro.bem-object(iro.props-namespace()) { | ||
22 | position: absolute; | ||
23 | z-index: fn.dim(--z-index); | ||
24 | inset-block-start: 0; | ||
25 | inset-inline-start: 0; | ||
26 | padding-block: fn.dim(--pad-b); | ||
27 | padding-inline: fn.dim(--pad-i); | ||
28 | transform: translate(var(--x), var(--y)); | ||
29 | border: fn.dim(--border) solid fn.color(--border); | ||
30 | border-radius: fn.dim(--rounding); | ||
31 | background-color: fn.color(--bg); | ||
32 | box-shadow: fn.color(--shadow); | ||
33 | |||
34 | @include iro.bem-modifier('up-left') { | ||
35 | transform: translate(var(--x), calc(var(--y) - 100%)); | ||
36 | } | ||
37 | |||
38 | @include iro.bem-modifier('up-right') { | ||
39 | transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); | ||
40 | } | ||
41 | |||
42 | @include iro.bem-modifier('down-right') { | ||
43 | transform: translate(calc(var(--x) - 100%), var(--y)); | ||
44 | } | ||
45 | } | ||
46 | } | ||