From a8bf508fa2474d07c6c9a4f4c90bc42246896df1 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 10 Feb 2022 06:25:12 +0100 Subject: Update --- package.json | 2 +- src/objects/_action-button.scss | 2 +- src/objects/_action-menu.scss | 4 ++-- src/objects/_avatar.scss | 4 ++-- src/objects/_menu.scss | 7 +++---- tpl/index.pug | 2 +- tpl/objects/menu.pug | 11 +++++++++-- 7 files changed, 19 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index e89abdb..b1233f2 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 bookmark tags user chevron-right hash public/icons.svg", + "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x 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/objects/_action-button.scss b/src/objects/_action-button.scss index 47e2c93..751a01e 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -105,7 +105,7 @@ text-decoration: none; text-overflow: ellipsis; white-space: nowrap; - + &:link, &:visited, &:enabled { diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index ff88774..1e95b39 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss @@ -12,8 +12,8 @@ --rounding: 3px, --border: 1px, --item: ( - --pad-x: .8rem, - --pad-y: .4rem, + --pad-x: iro.fn-px-to-rem(12px), + --pad-y: iro.fn-px-to-rem(7px), ), ), ), 'dims'); diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index ca0d373..09bebf0 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -6,7 +6,7 @@ --dims: ( --size: iro.fn-px-to-rem(40px), --size-sm: iro.fn-px-to-rem(30px), - --size-xs: iro.fn-px-to-rem(20px), + --size-xs: iro.fn-px-to-rem(18px), --indicator-size: fn.foreign-dim(--status-indicator, --size), --indicator-spacing: iro.fn-px-to-rem(3px), --rounding: 25%, @@ -79,7 +79,7 @@ } @include iro.bem-modifier('xs') { - font-size: iro.fn-px-to-rem(12px); + font-size: iro.fn-px-to-rem(11px); @include iro.bem-elem('content') { width: fn.dim(--size-xs); diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 91ef0a5..12899a3 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -6,8 +6,8 @@ --dims: ( --separator: .6rem, --item: ( - --pad-x: .8rem, - --pad-y: .4rem, + --pad-x: iro.fn-px-to-rem(10px), + --pad-y: iro.fn-px-to-rem(5px), ), ), ), 'dims'); @@ -61,8 +61,7 @@ &:enabled { color: currentColor; - &:hover, - &:active { + @include iro.bem-multi('&:hover, &:active', 'is' 'selected') { background-color: fn.color(--item --hover --bg); color: fn.color(--item --hover --label); } diff --git a/tpl/index.pug b/tpl/index.pug index fa9bd85..510e09b 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -476,7 +476,7 @@ html +rule(level='medium') +box - div(style={ display: 'flex', gap: '2rem' }) + div(style={ display: 'flex', gap: '3rem' }) +menu +menu-header= 'Category 1' +menu-item= 'Mark as away' diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 7c9c07e..97a571d 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -1,12 +1,19 @@ include icon.pug include status-indicator.pug +include action-button.pug mixin menu .o-menu block mixin menu-item - button.o-menu__item(disabled=attributes.disabled) + - + let classes = { + 'o-menu__item': true, + 'is-selected': attributes.selected, + } + + button(class=classes, disabled=attributes.disabled) .l-card.l-card--flush if attributes.icon .l-card__block.o-menu__icon-slot @@ -14,7 +21,7 @@ mixin menu-item +status-indicator(attributes.icon)(class='o-menu__icon') else +icon(attributes.icon)(class='o-menu__icon') - .l-card__block.l-card__block--main + .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass }) block if attributes.postIcon .l-card__block.o-menu__icon-slot -- cgit v1.2.3-70-g09d2