summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-08 10:52:55 +0100
committerVolpeon <git@volpeon.ink>2022-02-08 10:52:55 +0100
commit0cd81a322b92ede51d0da1f8227a3828f08eebdf (patch)
tree80b9a18d9c4442bf0a9ed3797bfad7d6c0ce4c3e
parentAdd border to action menu (diff)
downloadiro-design-0cd81a322b92ede51d0da1f8227a3828f08eebdf.tar.gz
iro-design-0cd81a322b92ede51d0da1f8227a3828f08eebdf.tar.bz2
iro-design-0cd81a322b92ede51d0da1f8227a3828f08eebdf.zip
Improved action menu
-rw-r--r--src/_base.scss10
-rw-r--r--src/_utils.scss14
-rw-r--r--src/index.scss2
-rw-r--r--src/objects/_action-menu.scss4
-rw-r--r--tpl/index.pug6
-rw-r--r--tpl/objects/action-menu.pug11
-rw-r--r--tpl/objects/avatar.pug7
7 files changed, 52 insertions, 2 deletions
diff --git a/src/_base.scss b/src/_base.scss
index 54df879..6e404fe 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -35,6 +35,16 @@ p {
35 } 35 }
36} 36}
37 37
38strong {
39 color: fn.color(--fg-lo);
40 font-weight: bold;
41}
42
43small {
44 color: fn.color(--fg-hi);
45 font-size: fn.dim(--font-size --sm);
46}
47
38ul, 48ul,
39ol { 49ol {
40 margin: fn.dim(--paragraph --margin-top) 0 0; 50 margin: fn.dim(--paragraph --margin-top) 0 0;
diff --git a/src/_utils.scss b/src/_utils.scss
new file mode 100644
index 0000000..72c1f2f
--- /dev/null
+++ b/src/_utils.scss
@@ -0,0 +1,14 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.bem-utility('db') {
4 display: block;
5}
6
7@include iro.bem-utility('dc') {
8 display: contents;
9}
10
11@include iro.bem-utility('elp') {
12 overflow: hidden;
13 text-overflow: ellipsis;
14}
diff --git a/src/index.scss b/src/index.scss
index 5ceb11f..b4c437e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -23,4 +23,6 @@
23 23
24@use 'layouts/form'; 24@use 'layouts/form';
25 25
26@use 'utils';
27
26@use 'apply-vars'; 28@use 'apply-vars';
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 7c2dc4f..e908fdf 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -100,6 +100,10 @@
100 } 100 }
101 } 101 }
102 102
103 @include iro.bem-elem('slot') {
104 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
105 }
106
103 @include iro.bem-elem('icon-slot') { 107 @include iro.bem-elem('icon-slot') {
104 display: flex; 108 display: flex;
105 justify-content: center; 109 justify-content: center;
diff --git a/tpl/index.pug b/tpl/index.pug
index b878944..4978cc0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -446,6 +446,12 @@ html
446 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) 446 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
447 +action-button(quiet=true selected=true)= 'Menu' 447 +action-button(quiet=true selected=true)= 'Menu'
448 +action-menu 448 +action-menu
449 +action-menu-slot(class='l-card l-card--flush')
450 +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block')
451 .l-card__block.l-card__block--main
452 strong.u-db= 'Volpeon'
453 small.u-db= '@volpeon@mk.vulpes.one'
454 +action-menu-separator
449 +action-menu-item(icon='user')= 'View profile' 455 +action-menu-item(icon='user')= 'View profile'
450 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' 456 +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
451 +action-menu-separator 457 +action-menu-separator
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 0f690ce..55ceacb 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -30,3 +30,14 @@ mixin action-menu-item
30 30
31mixin action-menu-separator 31mixin action-menu-separator
32 .o-action-menu__separator 32 .o-action-menu__separator
33
34mixin action-menu-slot
35 -
36 let classes = {
37 'o-action-menu__slot ': true,
38 }
39 if (attributes.class) {
40 classes[attributes.class] = true;
41 }
42 div(class=classes)
43 block
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 83c0f7c..16de7c5 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -4,9 +4,12 @@ mixin avatar
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-avatar': true, 6 'o-avatar': true,
7 'o-avatar--circle': attributes.circle 7 'o-avatar--circle': attributes.circle,
8 'u-db': attributes.block
9 }
10 if (attributes.class) {
11 classes[attributes.class] = true;
8 } 12 }
9
10 if (attributes.size) { 13 if (attributes.size) {
11 classes['o-avatar--' + attributes.size] = true; 14 classes['o-avatar--' + attributes.size] = true;
12 } 15 }