Improved action menu example

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 @@
         "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
-        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right public/icons.svg",
         "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "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 @@
             flex: 0 0 auto;
 
             @include iro.bem-modifier('main') {
-                width:     100%;
-                min-width: 0;
+                flex-shrink: 1;
+                width:       100%;
             }
         }
     }
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 @@
                 &:active {
                     background-color: fn.color(--item --hover --bg);
                     color:            fn.color(--item --hover --fg);
+
+                    @include iro.bem-elem('icon') {
+                        color: currentColor;
+                    }
                 }
             }
         }
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
                         +text-field(placeholder='Example: Volpeon')
 
                     +form-item('Password', 'At least 6 characters, all characters allowed')
-                        +text-field(placeholder='Example: hunter2', type='password')
+                        +text-field(placeholder='Example: hunter2' type='password')
 
                     +form-item('Bio')
                         +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
@@ -443,10 +443,13 @@ html
             +rule(level='medium')
 
             +box
-                +action-menu
-                    +action-menu-item(icon='trash')= 'Item 1'
-                    +action-menu-item= 'Item 2'
-                    +action-menu-item= 'Item 3'
-                    +action-menu-separator
-                    +action-menu-item= 'Item 4'
+                div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
+                    +action-button(quiet=true selected=true)= 'Menu'
+                    +action-menu
+                        +action-menu-item(icon='user')= 'View profile'
+                        +action-menu-separator
+                        +action-menu-item(icon='trash')= 'Delete'
+                        +action-menu-item(icon='bookmark')= 'Bookmark'
+                        +action-menu-item(icon='tags')= 'Tags'
+                        +action-menu-item(postIcon='chevron-right')= 'More'
 
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
         .l-card.l-card--flush
             .l-card__block.o-action-menu__icon-slot
                 if attributes.icon
-                    +icon(attributes.icon)
+                    +icon(attributes.icon)(class='o-action-menu__icon')
             .l-card__block.l-card__block--main
                 block
+            .l-card__block.o-action-menu__icon-slot
+                if attributes.postIcon
+                    +icon(attributes.postIcon)(class='o-action-menu__icon')
 
 mixin action-menu-separator
     .o-action-menu__separator