diff options
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | src/objects/_action-button.scss | 2 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 4 | ||||
-rw-r--r-- | src/objects/_avatar.scss | 4 | ||||
-rw-r--r-- | src/objects/_menu.scss | 7 | ||||
-rw-r--r-- | tpl/index.pug | 2 | ||||
-rw-r--r-- | 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 @@ | |||
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 bookmark tags user chevron-right hash public/icons.svg", | 14 | "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x 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/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 @@ | |||
105 | text-decoration: none; | 105 | text-decoration: none; |
106 | text-overflow: ellipsis; | 106 | text-overflow: ellipsis; |
107 | white-space: nowrap; | 107 | white-space: nowrap; |
108 | 108 | ||
109 | &:link, | 109 | &:link, |
110 | &:visited, | 110 | &:visited, |
111 | &:enabled { | 111 | &: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 @@ | |||
12 | --rounding: 3px, | 12 | --rounding: 3px, |
13 | --border: 1px, | 13 | --border: 1px, |
14 | --item: ( | 14 | --item: ( |
15 | --pad-x: .8rem, | 15 | --pad-x: iro.fn-px-to-rem(12px), |
16 | --pad-y: .4rem, | 16 | --pad-y: iro.fn-px-to-rem(7px), |
17 | ), | 17 | ), |
18 | ), | 18 | ), |
19 | ), 'dims'); | 19 | ), '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 @@ | |||
6 | --dims: ( | 6 | --dims: ( |
7 | --size: iro.fn-px-to-rem(40px), | 7 | --size: iro.fn-px-to-rem(40px), |
8 | --size-sm: iro.fn-px-to-rem(30px), | 8 | --size-sm: iro.fn-px-to-rem(30px), |
9 | --size-xs: iro.fn-px-to-rem(20px), | 9 | --size-xs: iro.fn-px-to-rem(18px), |
10 | --indicator-size: fn.foreign-dim(--status-indicator, --size), | 10 | --indicator-size: fn.foreign-dim(--status-indicator, --size), |
11 | --indicator-spacing: iro.fn-px-to-rem(3px), | 11 | --indicator-spacing: iro.fn-px-to-rem(3px), |
12 | --rounding: 25%, | 12 | --rounding: 25%, |
@@ -79,7 +79,7 @@ | |||
79 | } | 79 | } |
80 | 80 | ||
81 | @include iro.bem-modifier('xs') { | 81 | @include iro.bem-modifier('xs') { |
82 | font-size: iro.fn-px-to-rem(12px); | 82 | font-size: iro.fn-px-to-rem(11px); |
83 | 83 | ||
84 | @include iro.bem-elem('content') { | 84 | @include iro.bem-elem('content') { |
85 | width: fn.dim(--size-xs); | 85 | 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 @@ | |||
6 | --dims: ( | 6 | --dims: ( |
7 | --separator: .6rem, | 7 | --separator: .6rem, |
8 | --item: ( | 8 | --item: ( |
9 | --pad-x: .8rem, | 9 | --pad-x: iro.fn-px-to-rem(10px), |
10 | --pad-y: .4rem, | 10 | --pad-y: iro.fn-px-to-rem(5px), |
11 | ), | 11 | ), |
12 | ), | 12 | ), |
13 | ), 'dims'); | 13 | ), 'dims'); |
@@ -61,8 +61,7 @@ | |||
61 | &:enabled { | 61 | &:enabled { |
62 | color: currentColor; | 62 | color: currentColor; |
63 | 63 | ||
64 | &:hover, | 64 | @include iro.bem-multi('&:hover, &:active', 'is' 'selected') { |
65 | &:active { | ||
66 | background-color: fn.color(--item --hover --bg); | 65 | background-color: fn.color(--item --hover --bg); |
67 | color: fn.color(--item --hover --label); | 66 | color: fn.color(--item --hover --label); |
68 | } | 67 | } |
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 | |||
476 | +rule(level='medium') | 476 | +rule(level='medium') |
477 | 477 | ||
478 | +box | 478 | +box |
479 | div(style={ display: 'flex', gap: '2rem' }) | 479 | div(style={ display: 'flex', gap: '3rem' }) |
480 | +menu | 480 | +menu |
481 | +menu-header= 'Category 1' | 481 | +menu-header= 'Category 1' |
482 | +menu-item= 'Mark as away' | 482 | +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 @@ | |||
1 | include icon.pug | 1 | include icon.pug |
2 | include status-indicator.pug | 2 | include status-indicator.pug |
3 | include action-button.pug | ||
3 | 4 | ||
4 | mixin menu | 5 | mixin menu |
5 | .o-menu | 6 | .o-menu |
6 | block | 7 | block |
7 | 8 | ||
8 | mixin menu-item | 9 | mixin menu-item |
9 | button.o-menu__item(disabled=attributes.disabled) | 10 | - |
11 | let classes = { | ||
12 | 'o-menu__item': true, | ||
13 | 'is-selected': attributes.selected, | ||
14 | } | ||
15 | |||
16 | button(class=classes, disabled=attributes.disabled) | ||
10 | .l-card.l-card--flush | 17 | .l-card.l-card--flush |
11 | if attributes.icon | 18 | if attributes.icon |
12 | .l-card__block.o-menu__icon-slot | 19 | .l-card__block.o-menu__icon-slot |
@@ -14,7 +21,7 @@ mixin menu-item | |||
14 | +status-indicator(attributes.icon)(class='o-menu__icon') | 21 | +status-indicator(attributes.icon)(class='o-menu__icon') |
15 | else | 22 | else |
16 | +icon(attributes.icon)(class='o-menu__icon') | 23 | +icon(attributes.icon)(class='o-menu__icon') |
17 | .l-card__block.l-card__block--main | 24 | .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass }) |
18 | block | 25 | block |
19 | if attributes.postIcon | 26 | if attributes.postIcon |
20 | .l-card__block.o-menu__icon-slot | 27 | .l-card__block.o-menu__icon-slot |