summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-10 06:25:12 +0100
committerVolpeon <git@volpeon.ink>2022-02-10 06:25:12 +0100
commita8bf508fa2474d07c6c9a4f4c90bc42246896df1 (patch)
tree69933c7a476fa4b427752777196486bec0f11115
parentAdded menu (diff)
downloadiro-design-a8bf508fa2474d07c6c9a4f4c90bc42246896df1.tar.gz
iro-design-a8bf508fa2474d07c6c9a4f4c90bc42246896df1.tar.bz2
iro-design-a8bf508fa2474d07c6c9a4f4c90bc42246896df1.zip
Update
-rw-r--r--package.json2
-rw-r--r--src/objects/_action-button.scss2
-rw-r--r--src/objects/_action-menu.scss4
-rw-r--r--src/objects/_avatar.scss4
-rw-r--r--src/objects/_menu.scss7
-rw-r--r--tpl/index.pug2
-rw-r--r--tpl/objects/menu.pug11
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 @@
1include icon.pug 1include icon.pug
2include status-indicator.pug 2include status-indicator.pug
3include action-button.pug
3 4
4mixin menu 5mixin menu
5 .o-menu 6 .o-menu
6 block 7 block
7 8
8mixin menu-item 9mixin 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