diff options
-rw-r--r-- | src/index.scss | 1 | ||||
-rw-r--r-- | src/layouts/_card.scss | 8 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 94 | ||||
-rw-r--r-- | tpl/index.pug | 15 | ||||
-rw-r--r-- | tpl/objects/action-button.pug | 37 | ||||
-rw-r--r-- | tpl/objects/action-menu.pug | 25 | ||||
-rw-r--r-- | tpl/objects/icon.pug | 15 | ||||
-rw-r--r-- | tpl/objects/status-indicator.pug | 5 |
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 | |||
15 | include objects/action-button.pug | 15 | include objects/action-button.pug |
16 | include objects/status-indicator.pug | 16 | include objects/status-indicator.pug |
17 | include objects/avatar.pug | 17 | include objects/avatar.pug |
18 | include objects/action-menu.pug | ||
18 | 19 | ||
19 | mixin box | 20 | mixin 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 @@ | |||
1 | include icon.pug | 1 | include icon.pug |
2 | 2 | ||
3 | mixin action-button | 3 | mixin 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 @@ | |||
1 | include ../objects/action-button.pug | ||
2 | include icon.pug | ||
3 | |||
4 | mixin 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 | |||
15 | mixin 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 | |||
24 | mixin 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 @@ | |||
1 | mixin icon(id) | 1 | mixin 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) |