summaryrefslogtreecommitdiffstats
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
parentUpdate (diff)
downloadiro-design-8f49d0cba610e4829e183e81e4126aba136dfccc.tar.gz
iro-design-8f49d0cba610e4829e183e81e4126aba136dfccc.tar.bz2
iro-design-8f49d0cba610e4829e183e81e4126aba136dfccc.zip
Added action-menu
-rw-r--r--src/index.scss1
-rw-r--r--src/layouts/_card.scss8
-rw-r--r--src/objects/_action-menu.scss94
-rw-r--r--tpl/index.pug15
-rw-r--r--tpl/objects/action-button.pug37
-rw-r--r--tpl/objects/action-menu.pug25
-rw-r--r--tpl/objects/icon.pug15
-rw-r--r--tpl/objects/status-indicator.pug5
8 files changed, 173 insertions, 27 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}
diff --git a/tpl/index.pug b/tpl/index.pug
index 206e40b..a59526e 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -15,6 +15,7 @@ include objects/form.pug
15include objects/action-button.pug 15include objects/action-button.pug
16include objects/status-indicator.pug 16include objects/status-indicator.pug
17include objects/avatar.pug 17include objects/avatar.pug
18include objects/action-menu.pug
18 19
19mixin box 20mixin box
20 +container(padX=true padY=true inPage=true theme="raised") 21 +container(padX=true padY=true inPage=true theme="raised")
@@ -435,3 +436,17 @@ html
435 +avatar(circle=true size='xs' hue=225) 436 +avatar(circle=true size='xs' hue=225)
436 = 'o' 437 = 'o'
437 +avatar(circle=true size='xs' src='avatar.png') 438 +avatar(circle=true size='xs' src='avatar.png')
439
440 //-----------------------------------------
441
442 +h1-heading(level='xl')= 'Action menu'
443 +rule(level='medium')
444
445 +box
446 +action-menu
447 +action-menu-item(icon='trash')= 'Item 1'
448 +action-menu-item= 'Item 2'
449 +action-menu-item= 'Item 3'
450 +action-menu-separator
451 +action-menu-item= 'Item 4'
452
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 0afe1ea..eb524a2 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -1,21 +1,24 @@
1include icon.pug 1include icon.pug
2 2
3mixin action-button 3mixin action-button
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-action-button': true, 6 'o-action-button': true,
7 'o-action-button--block': attributes.block, 7 'o-action-button--block': attributes.block,
8 'o-action-button--quiet': attributes.quiet, 8 'o-action-button--quiet': attributes.quiet,
9 'is-disabled': attributes.disabled, 9 'is-disabled': attributes.disabled,
10 'is-selected': attributes.selected 10 'is-selected': attributes.selected
11 } 11 }
12 12 if (attributes.class) {
13 let href = attributes.disabled ? null : '#'; 13 classes[attributes.class] = true;
14 }
14 15
15 a(class=classes href=href) 16 let href = attributes.disabled ? null : '#';
16 if attributes.icon 17
17 +icon(attributes.icon) 18 a(class=classes href=href)
18 = ' ' 19 if attributes.icon
19 if block 20 +icon(attributes.icon)
20 span.o-action-button__label 21 = ' '
21 block 22 if block
23 span.o-action-button__label
24 block
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
new file mode 100644
index 0000000..85f93bf
--- /dev/null
+++ b/tpl/objects/action-menu.pug
@@ -0,0 +1,25 @@
1include ../objects/action-button.pug
2include icon.pug
3
4mixin action-menu
5 -
6 let classes = {
7 'o-action-menu': true,
8 'o-action-menu--static': true,
9 't-raised': true
10 }
11
12 div(class=classes)
13 block
14
15mixin action-menu-item
16 button.o-action-menu__item.o-action-menu__item--native
17 .l-card.l-card--flush
18 .l-card__block.o-action-menu__icon-slot
19 if attributes.icon
20 +icon(attributes.icon)
21 .l-card__block.l-card__block--main
22 block
23
24mixin action-menu-separator
25 .o-action-menu__separator
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index 0e444f9..494abf6 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -1,7 +1,12 @@
1mixin icon(id) 1mixin icon(id)
2 - 2 -
3 let href = 'icons.svg#' + id 3 let href = 'icons.svg#' + id
4 let classes = attributes.class ? attributes.class : '' 4 let classes = {
5 'o-icon': true
6 }
7 if (attributes.class) {
8 classes[attributes.class] = true;
9 }
5 10
6 svg(class=['o-icon', classes] width='1em' height='1em') 11 svg(class=classes width='1em' height='1em')
7 use(href=href) 12 use(href=href)
diff --git a/tpl/objects/status-indicator.pug b/tpl/objects/status-indicator.pug
index 9b240e1..7ecb08a 100644
--- a/tpl/objects/status-indicator.pug
+++ b/tpl/objects/status-indicator.pug
@@ -4,5 +4,8 @@ mixin status-indicator(status)
4 'o-status-indicator': true, 4 'o-status-indicator': true,
5 } 5 }
6 classes['is-' + status] = true 6 classes['is-' + status] = true
7 if (attributes.class) {
8 classes[attributes.class] = true;
9 }
7 10
8 div(class=classes)&attributes(attributes) 11 div(class=classes)