diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/layouts/_card.scss | 4 | ||||
| -rw-r--r-- | src/objects/_action-menu.scss | 4 | ||||
| -rw-r--r-- | tpl/index.pug | 17 | ||||
| -rw-r--r-- | tpl/objects/action-menu.pug | 5 |
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 | ||
| 24 | mixin action-menu-separator | 27 | mixin action-menu-separator |
| 25 | .o-action-menu__separator | 28 | .o-action-menu__separator |
