summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-08 18:05:15 +0100
committerVolpeon <git@volpeon.ink>2022-02-08 18:05:15 +0100
commit9fb3237247f637b55a7da6bbf2847c17c2fb2ad0 (patch)
tree44bb936cbb48e59d50ff36a0f79e696f3232ba9b
parentUpdate (diff)
downloadiro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.tar.gz
iro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.tar.bz2
iro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.zip
Added menu
Diffstat
-rw-r--r--package.json2
-rw-r--r--src/_functions.scss1
-rw-r--r--src/index.scss1
-rw-r--r--src/objects/_action-menu.scss30
-rw-r--r--src/objects/_heading.scss23
-rw-r--r--src/objects/_menu.scss92
-rw-r--r--tpl/index.pug57
-rw-r--r--tpl/objects/action-menu.pug3
-rw-r--r--tpl/objects/menu.pug28
9 files changed, 201 insertions, 36 deletions
diff --git a/package.json b/package.json
index 0a8a966..e89abdb 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 public/icons.svg", 14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash 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/_functions.scss b/src/_functions.scss
index f15ed0c..9425413 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -43,6 +43,7 @@
43 font-style: font-prop($font, $overrides, $key, --style), 43 font-style: font-prop($font, $overrides, $key, --style),
44 line-height: font-prop($font, $overrides, $key, --line-height), 44 line-height: font-prop($font, $overrides, $key, --line-height),
45 text-transform: font-prop($font, $overrides, $key, --transform), 45 text-transform: font-prop($font, $overrides, $key, --transform),
46 letter-spacing: font-prop($font, $overrides, $key, --spacing),
46 font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates), 47 font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates),
47 ); 48 );
48 49
diff --git a/src/index.scss b/src/index.scss
index b4c437e..44fba76 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -20,6 +20,7 @@
20@use 'objects/status-indicator'; 20@use 'objects/status-indicator';
21@use 'objects/avatar'; 21@use 'objects/avatar';
22@use 'objects/action-menu'; 22@use 'objects/action-menu';
23@use 'objects/menu';
23 24
24@use 'layouts/form'; 25@use 'layouts/form';
25 26
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss
index 2c922f8..ff88774 100644
--- a/src/objects/_action-menu.scss
+++ b/src/objects/_action-menu.scss
@@ -43,8 +43,6 @@
43 ), 'colors'); 43 ), 'colors');
44 44
45 @include iro.bem-object(iro.props-namespace()) { 45 @include iro.bem-object(iro.props-namespace()) {
46 @include iro.bem-composed-of('action-button' 'object');
47
48 position: absolute; 46 position: absolute;
49 z-index: 10000; 47 z-index: 10000;
50 top: fn.dim(--y); 48 top: fn.dim(--y);
@@ -72,12 +70,6 @@
72 transform: translate(-100%, 0); 70 transform: translate(-100%, 0);
73 } 71 }
74 72
75 @include iro.bem-elem('separator') {
76 height: 1px;
77 margin: fn.dim(--separator) 0;
78 background-color: fn.color(--separator);
79 }
80
81 @include iro.bem-elem('item') { 73 @include iro.bem-elem('item') {
82 display: block; 74 display: block;
83 box-sizing: border-box; 75 box-sizing: border-box;
@@ -91,18 +83,10 @@
91 &:enabled { 83 &:enabled {
92 color: currentColor; 84 color: currentColor;
93 85
94 @include iro.bem-elem('icon') {
95 color: fn.color(--icon);
96 }
97
98 &:hover, 86 &:hover,
99 &:active { 87 &:active {
100 background-color: fn.color(--item --hover --bg); 88 background-color: fn.color(--item --hover --bg);
101 color: fn.color(--item --hover --label); 89 color: fn.color(--item --hover --label);
102
103 @include iro.bem-elem('icon') {
104 color: currentColor;
105 }
106 } 90 }
107 91
108 @include iro.bem-at-theme('keyboard') { 92 @include iro.bem-at-theme('keyboard') {
@@ -112,15 +96,17 @@
112 background-color: fn.color(--item --key-focus --bg); 96 background-color: fn.color(--item --key-focus --bg);
113 box-shadow: fn.color(--item --key-focus --shadow); 97 box-shadow: fn.color(--item --key-focus --shadow);
114 color: fn.color(--item --key-focus --label); 98 color: fn.color(--item --key-focus --label);
115
116 @include iro.bem-elem('icon') {
117 color: currentColor;
118 }
119 } 99 }
120 } 100 }
121 } 101 }
122 } 102 }
123 103
104 @include iro.bem-elem('separator') {
105 height: 1px;
106 margin: fn.dim(--separator) 0;
107 background-color: fn.color(--separator);
108 }
109
124 @include iro.bem-elem('slot') { 110 @include iro.bem-elem('slot') {
125 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); 111 padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x);
126 } 112 }
@@ -130,9 +116,5 @@
130 justify-content: center; 116 justify-content: center;
131 width: 1em; 117 width: 1em;
132 } 118 }
133
134 @include iro.bem-elem('icon') {
135 color: fn.color(--item --disabled --label);
136 }
137 } 119 }
138} 120}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index cd91c61..c1feb5e 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -51,20 +51,25 @@
51 } 51 }
52 52
53 @include iro.bem-modifier('sm') { 53 @include iro.bem-modifier('sm') {
54 @include fn.set-font(--standard, (--line-height: null)); 54 @include fn.set-font(--standard, (
55 --line-height: null,
56 --size: fn.global-dim(--font-size --md),
57 --weight: 500
58 ));
55 59
56 color: fn.color(--strong); 60 color: fn.color(--strong);
57 font-size: fn.global-dim(--font-size --md);
58 font-weight: 500;
59 } 61 }
60 62
61 @include iro.bem-modifier('xs') { 63 @include iro.bem-modifier('xs') {
62 @include fn.set-font(--standard, (--line-height: null)); 64 @include fn.set-font(--standard, (
65 --line-height: null,
66 --size: fn.global-dim(--font-size --xs),
67 --weight: 500,
68 --transform: uppercase,
69 --spacing: .5px
70 ));
63 71
64 color: fn.color(--light); 72 color: fn.color(--light);
65 font-size: fn.global-dim(--font-size --xs);
66 font-weight: 500;
67 text-transform: uppercase;
68 } 73 }
69 } 74 }
70} 75}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
new file mode 100644
index 0000000..91ef0a5
--- /dev/null
+++ b/src/objects/_menu.scss
@@ -0,0 +1,92 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('menu') {
5 @include iro.props-store((
6 --dims: (
7 --separator: .6rem,
8 --item: (
9 --pad-x: .8rem,
10 --pad-y: .4rem,
11 ),
12 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: (
17 --header: (
18 --label: fn.global-color(--fg-hi2),
19 ),
20 --item: (
21 --hover: (
22 --bg: fn.global-color(--obj-hi),
23 --label: fn.global-color(--fg-lo),
24 ),
25 --disabled: (
26 --label: fn.global-color(--fg-hi3),
27 ),
28 --key-focus: (
29 --bg: fn.global-color(--obj-hi),
30 --label: fn.global-color(--fg-lo),
31 --border: fn.global-color(--focus --fill),
32 --shadow: fn.global-color(--focus --shadow),
33 ),
34 ),
35 ),
36 ), 'colors');
37
38 @include iro.bem-object(iro.props-namespace()) {
39 @include iro.bem-elem('header') {
40 padding:
41 calc(1.5 * fn.dim(--item --pad-y))
42 fn.dim(--item --pad-x)
43 calc(.5 * fn.dim(--item --pad-y));
44 color: fn.color(--header --label);
45 font-size: fn.global-dim(--font-size --xs);
46 font-weight: 500;
47 letter-spacing: .5px;
48 text-transform: uppercase;
49 }
50
51 @include iro.bem-elem('item') {
52 display: block;
53 box-sizing: border-box;
54 width: 100%;
55 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
56 border: 2px solid transparent;
57 color: fn.color(--item --disabled --label);
58
59 &:link,
60 &:visited,
61 &:enabled {
62 color: currentColor;
63
64 &:hover,
65 &:active {
66 background-color: fn.color(--item --hover --bg);
67 color: fn.color(--item --hover --label);
68 }
69
70 @include iro.bem-at-theme('keyboard') {
71 &:focus {
72 border-radius: 2px;
73 border-color: fn.color(--item --key-focus --border);
74 background-color: fn.color(--item --key-focus --bg);
75 box-shadow: fn.color(--item --key-focus --shadow);
76 color: fn.color(--item --key-focus --label);
77 }
78 }
79 }
80 }
81
82 @include iro.bem-elem('separator') {
83 height: fn.dim(--separator);
84 }
85
86 @include iro.bem-elem('icon-slot') {
87 display: flex;
88 justify-content: center;
89 width: 1em;
90 }
91 }
92}
diff --git a/tpl/index.pug b/tpl/index.pug
index 4978cc0..fa9bd85 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -16,11 +16,21 @@ include objects/action-button.pug
16include objects/status-indicator.pug 16include objects/status-indicator.pug
17include objects/avatar.pug 17include objects/avatar.pug
18include objects/action-menu.pug 18include objects/action-menu.pug
19include objects/menu.pug
19 20
20mixin box 21mixin box
21 +container(padX=true padY=true inPage=true theme="raised") 22 +container(padX=true padY=true inPage=true theme="raised")
22 block 23 block
23 24
25mixin user-card(name, hue)
26 -
27 const avaName = name.slice(0, 1)
28
29 .l-card.l-card--flush
30 +avatar(block=true size='xs' class='l-card__block' hue=hue)
31 = avaName
32 = name
33
24 34
25doctype html 35doctype html
26html 36html
@@ -460,3 +470,50 @@ html
460 +action-menu-item(icon='tags')= 'Tags' 470 +action-menu-item(icon='tags')= 'Tags'
461 +action-menu-item(postIcon='chevron-right')= 'More' 471 +action-menu-item(postIcon='chevron-right')= 'More'
462 472
473 //-----------------------------------------
474
475 +h1-heading(level='xl')= 'Menu'
476 +rule(level='medium')
477
478 +box
479 div(style={ display: 'flex', gap: '2rem' })
480 +menu
481 +menu-header= 'Category 1'
482 +menu-item= 'Mark as away'
483 +menu-item= 'Delete'
484 +menu-separator
485 +menu-header= 'Category 2'
486 +menu-item(icon='bookmark')= 'Bookmark'
487 +menu-item(icon='tags')= 'Tags'
488
489 +menu
490 +menu-item
491 strong= 'Bouncer'
492 +menu-separator
493 +menu-item
494 strong= 'Libera'
495 +menu-item(icon='hash')= 'achannel'
496 +menu-item(icon='hash')= 'kitsuneirc'
497 +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
498 +menu-item(icon='red' iconIsStatus=true)= 'someone'
499 +menu-separator
500 +menu-item
501 strong= 'Ergo Testnet'
502 +menu-separator
503 +menu-item
504 strong= 'NixNet'
505
506 +menu
507 +menu-header= 'Operators'
508 +menu-item
509 +user-card('volpeon', 0)
510 +menu-item
511 +user-card('curiousfox', 90)
512 +menu-separator
513 +menu-header= 'Moderators'
514 +menu-item
515 +user-card('user3567', 135)
516 +menu-item
517 +user-card('johndoe', 270)
518
519
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 55ceacb..8c1a584 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -1,4 +1,3 @@
1include action-button.pug
2include icon.pug 1include icon.pug
3include status-indicator.pug 2include status-indicator.pug
4 3
@@ -14,7 +13,7 @@ mixin action-menu
14 block 13 block
15 14
16mixin action-menu-item 15mixin action-menu-item
17 button.o-action-menu__item.o-action-menu__item--native(disabled=attributes.disabled) 16 button.o-action-menu__item(disabled=attributes.disabled)
18 .l-card.l-card--flush 17 .l-card.l-card--flush
19 .l-card__block.o-action-menu__icon-slot 18 .l-card__block.o-action-menu__icon-slot
20 if attributes.icon 19 if attributes.icon
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
new file mode 100644
index 0000000..7c9c07e
--- /dev/null
+++ b/tpl/objects/menu.pug
@@ -0,0 +1,28 @@
1include icon.pug
2include status-indicator.pug
3
4mixin menu
5 .o-menu
6 block
7
8mixin menu-item
9 button.o-menu__item(disabled=attributes.disabled)
10 .l-card.l-card--flush
11 if attributes.icon
12 .l-card__block.o-menu__icon-slot
13 if attributes.iconIsStatus
14 +status-indicator(attributes.icon)(class='o-menu__icon')
15 else
16 +icon(attributes.icon)(class='o-menu__icon')
17 .l-card__block.l-card__block--main
18 block
19 if attributes.postIcon
20 .l-card__block.o-menu__icon-slot
21 +icon(attributes.postIcon)(class='o-menu__icon')
22
23mixin menu-header
24 header.o-menu__header
25 block
26
27mixin menu-separator
28 .o-menu__separator
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 04:54:27 +0000