summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-07 18:37:09 +0100
committerVolpeon <git@volpeon.ink>2022-02-07 18:37:09 +0100
commit8f49d0cba610e4829e183e81e4126aba136dfccc (patch)
tree528b2260c3c8aa2f5d544691797d4f8e7e008625 /src/objects
parentUpdate (diff)
downloadiro-design-8f49d0cba610e4829e183e81e4126aba136dfccc.tar.gz
iro-design-8f49d0cba610e4829e183e81e4126aba136dfccc.tar.bz2
iro-design-8f49d0cba610e4829e183e81e4126aba136dfccc.zip
Added action-menu
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-menu.scss94
1 files changed, 94 insertions, 0 deletions
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
new file mode 100644
index 0000000..35d23b8
--- /dev/null
+++ b/src/objects/_action-menu.scss
@@ -0,0 +1,94 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-menu') {
5 @include iro.props-store((
6 --dims: (
7 --x: 0,
8 --y: 0,
9 --pad-x: 0,
10 --pad-y: .3rem,
11 --separator: .3rem,
12 --rounding: 3px,
13 --item: (
14 --pad-x: .8rem,
15 --pad-y: .4rem,
16 ),
17 ),
18 ), 'dims');
19
20 @include iro.props-store((
21 --colors: (
22 --shadow: 0 .2em .5em rgba(#000, .3),
23 --separator: fn.global-color(--obj),
24 --icon: fn.global-color(--fg-hi),
25 --item: (
26 --hover: (
27 --bg: fn.global-color(--obj-hi),
28 --fg: fn.global-color(--fg-lo),
29 ),
30 ),
31 ),
32 ), 'colors');
33
34 @include iro.bem-object(iro.props-namespace()) {
35 @include iro.bem-composed-of('action-button' 'object');
36
37 position: absolute;
38 z-index: 10000;
39 top: fn.dim(--y);
40 left: fn.dim(--x);
41 padding: fn.dim(--pad-y) fn.dim(--pad-x);
42 border-radius: fn.dim(--rounding);
43 background-color: fn.global-color(--bg);
44 box-shadow: fn.color(--shadow);
45 color: fn.global-color(--fg);
46
47 @include iro.bem-modifier('static') {
48 position: static;
49 }
50
51 @include iro.bem-modifier('up-left') {
52 transform: translate(0, -100%);
53 }
54
55 @include iro.bem-modifier('up-right') {
56 transform: translate(-100%, -100%);
57 }
58
59 @include iro.bem-modifier('down-right') {
60 transform: translate(-100%, 0);
61 }
62
63 @include iro.bem-elem('separator') {
64 height: 1px;
65 margin: fn.dim(--separator) 0;
66 background-color: fn.color(--separator);
67 }
68
69 @include iro.bem-elem('item') {
70 display: block;
71 box-sizing: border-box;
72 width: 100%;
73 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
74
75 @include iro.bem-multi('&:link, &:visited', 'modifier' 'native') {
76 &:hover,
77 &:active {
78 background-color: fn.color(--item --hover --bg);
79 color: fn.color(--item --hover --fg);
80 }
81 }
82 }
83
84 @include iro.bem-elem('icon-slot') {
85 display: flex;
86 justify-content: center;
87 width: 1em;
88 }
89
90 @include iro.bem-elem('icon') {
91 color: fn.color(--icon);
92 }
93 }
94}