summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-07 18:47:29 +0100
committerVolpeon <git@volpeon.ink>2022-02-07 18:47:29 +0100
commit732c2bce047de5105e84ca61bebcf05de564917f (patch)
tree5b68bcd21d08340120bcce9dbf0252b5a6620020
parentAdded action-menu (diff)
downloadiro-design-732c2bce047de5105e84ca61bebcf05de564917f.tar.gz
iro-design-732c2bce047de5105e84ca61bebcf05de564917f.tar.bz2
iro-design-732c2bce047de5105e84ca61bebcf05de564917f.zip
Improved action menu example
-rw-r--r--package.json2
-rw-r--r--src/layouts/_card.scss4
-rw-r--r--src/objects/_action-menu.scss4
-rw-r--r--tpl/index.pug17
-rw-r--r--tpl/objects/action-menu.pug5
5 files changed, 21 insertions, 11 deletions
diff --git a/package.json b/package.json
index 273342d..6751812 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", 11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
12 "build:assets": "cp -r static/* public/", 12 "build:assets": "cp -r static/* public/",
13 "build:app": "pug tpl/index.pug -p tpl --out public/", 13 "build:app": "pug tpl/index.pug -p tpl --out public/",
14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash public/icons.svg", 14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right public/icons.svg",
15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css", 15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
16 "lint:style": "stylelint \"src/**/*.scss\"", 16 "lint:style": "stylelint \"src/**/*.scss\"",
17 "fix:style": "stylelint \"src/**/*.scss\" --fix", 17 "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index a2d201f..ce742bf 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -34,8 +34,8 @@
34 flex: 0 0 auto; 34 flex: 0 0 auto;
35 35
36 @include iro.bem-modifier('main') { 36 @include iro.bem-modifier('main') {
37 width: 100%; 37 flex-shrink: 1;
38 min-width: 0; 38 width: 100%;
39 } 39 }
40 } 40 }
41 } 41 }
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 35d23b8..69fb9b0 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -77,6 +77,10 @@
77 &:active { 77 &:active {
78 background-color: fn.color(--item --hover --bg); 78 background-color: fn.color(--item --hover --bg);
79 color: fn.color(--item --hover --fg); 79 color: fn.color(--item --hover --fg);
80
81 @include iro.bem-elem('icon') {
82 color: currentColor;
83 }
80 } 84 }
81 } 85 }
82 } 86 }
diff --git a/tpl/index.pug b/tpl/index.pug
index a59526e..1b10016 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -285,7 +285,7 @@ html
285 +text-field(placeholder='Example: Volpeon') 285 +text-field(placeholder='Example: Volpeon')
286 286
287 +form-item('Password', 'At least 6 characters, all characters allowed') 287 +form-item('Password', 'At least 6 characters, all characters allowed')
288 +text-field(placeholder='Example: hunter2', type='password') 288 +text-field(placeholder='Example: hunter2' type='password')
289 289
290 +form-item('Bio') 290 +form-item('Bio')
291 +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...') 291 +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
@@ -443,10 +443,13 @@ html
443 +rule(level='medium') 443 +rule(level='medium')
444 444
445 +box 445 +box
446 +action-menu 446 div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
447 +action-menu-item(icon='trash')= 'Item 1' 447 +action-button(quiet=true selected=true)= 'Menu'
448 +action-menu-item= 'Item 2' 448 +action-menu
449 +action-menu-item= 'Item 3' 449 +action-menu-item(icon='user')= 'View profile'
450 +action-menu-separator 450 +action-menu-separator
451 +action-menu-item= 'Item 4' 451 +action-menu-item(icon='trash')= 'Delete'
452 +action-menu-item(icon='bookmark')= 'Bookmark'
453 +action-menu-item(icon='tags')= 'Tags'
454 +action-menu-item(postIcon='chevron-right')= 'More'
452 455
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 85f93bf..6ab4e0d 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -17,9 +17,12 @@ mixin action-menu-item
17 .l-card.l-card--flush 17 .l-card.l-card--flush
18 .l-card__block.o-action-menu__icon-slot 18 .l-card__block.o-action-menu__icon-slot
19 if attributes.icon 19 if attributes.icon
20 +icon(attributes.icon) 20 +icon(attributes.icon)(class='o-action-menu__icon')
21 .l-card__block.l-card__block--main 21 .l-card__block.l-card__block--main
22 block 22 block
23 .l-card__block.o-action-menu__icon-slot
24 if attributes.postIcon
25 +icon(attributes.postIcon)(class='o-action-menu__icon')
23 26
24mixin action-menu-separator 27mixin action-menu-separator
25 .o-action-menu__separator 28 .o-action-menu__separator