summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/index.scss1
-rw-r--r--src/layouts/_card.scss8
-rw-r--r--src/objects/_action-menu.scss94
3 files changed, 99 insertions, 4 deletions
diff --git a/src/index.scss b/src/index.scss
index 24b8d72..5ceb11f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -19,6 +19,7 @@
19@use 'objects/action-button'; 19@use 'objects/action-button';
20@use 'objects/status-indicator'; 20@use 'objects/status-indicator';
21@use 'objects/avatar'; 21@use 'objects/avatar';
22@use 'objects/action-menu';
22 23
23@use 'layouts/form'; 24@use 'layouts/form';
24 25
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index a5b9028..a2d201f 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -17,13 +17,13 @@
17 @include iro.bem-layout(iro.props-namespace()) { 17 @include iro.bem-layout(iro.props-namespace()) {
18 display: flex; 18 display: flex;
19 align-items: center; 19 align-items: center;
20 padding: prop(--dims --pad-y) prop(--dims --pad-x); 20 padding: fn.dim(--pad-y) fn.dim(--pad-x);
21 gap: prop(--dims --pad-x); 21 gap: fn.dim(--pad-x);
22 line-height: 1.4; 22 line-height: 1.4;
23 23
24 @include iro.bem-modifier('lg') { 24 @include iro.bem-modifier('lg') {
25 padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x); 25 padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x);
26 gap: prop(--dims --lg --pad-x); 26 gap: fn.dim(--lg --pad-x);
27 } 27 }
28 28
29 @include iro.bem-modifier('flush') { 29 @include iro.bem-modifier('flush') {
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}