diff options
-rw-r--r-- | src/_base.scss | 10 | ||||
-rw-r--r-- | src/_utils.scss | 14 | ||||
-rw-r--r-- | src/index.scss | 2 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 4 | ||||
-rw-r--r-- | tpl/index.pug | 6 | ||||
-rw-r--r-- | tpl/objects/action-menu.pug | 11 | ||||
-rw-r--r-- | tpl/objects/avatar.pug | 7 |
7 files changed, 52 insertions, 2 deletions
diff --git a/src/_base.scss b/src/_base.scss index 54df879..6e404fe 100644 --- a/src/_base.scss +++ b/src/_base.scss | |||
@@ -35,6 +35,16 @@ p { | |||
35 | } | 35 | } |
36 | } | 36 | } |
37 | 37 | ||
38 | strong { | ||
39 | color: fn.color(--fg-lo); | ||
40 | font-weight: bold; | ||
41 | } | ||
42 | |||
43 | small { | ||
44 | color: fn.color(--fg-hi); | ||
45 | font-size: fn.dim(--font-size --sm); | ||
46 | } | ||
47 | |||
38 | ul, | 48 | ul, |
39 | ol { | 49 | ol { |
40 | margin: fn.dim(--paragraph --margin-top) 0 0; | 50 | margin: fn.dim(--paragraph --margin-top) 0 0; |
diff --git a/src/_utils.scss b/src/_utils.scss new file mode 100644 index 0000000..72c1f2f --- /dev/null +++ b/src/_utils.scss | |||
@@ -0,0 +1,14 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | |||
3 | @include iro.bem-utility('db') { | ||
4 | display: block; | ||
5 | } | ||
6 | |||
7 | @include iro.bem-utility('dc') { | ||
8 | display: contents; | ||
9 | } | ||
10 | |||
11 | @include iro.bem-utility('elp') { | ||
12 | overflow: hidden; | ||
13 | text-overflow: ellipsis; | ||
14 | } | ||
diff --git a/src/index.scss b/src/index.scss index 5ceb11f..b4c437e 100644 --- a/src/index.scss +++ b/src/index.scss | |||
@@ -23,4 +23,6 @@ | |||
23 | 23 | ||
24 | @use 'layouts/form'; | 24 | @use 'layouts/form'; |
25 | 25 | ||
26 | @use 'utils'; | ||
27 | |||
26 | @use 'apply-vars'; | 28 | @use 'apply-vars'; |
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 7c2dc4f..e908fdf 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss | |||
@@ -100,6 +100,10 @@ | |||
100 | } | 100 | } |
101 | } | 101 | } |
102 | 102 | ||
103 | @include iro.bem-elem('slot') { | ||
104 | padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); | ||
105 | } | ||
106 | |||
103 | @include iro.bem-elem('icon-slot') { | 107 | @include iro.bem-elem('icon-slot') { |
104 | display: flex; | 108 | display: flex; |
105 | justify-content: center; | 109 | justify-content: center; |
diff --git a/tpl/index.pug b/tpl/index.pug index b878944..4978cc0 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
@@ -446,6 +446,12 @@ html | |||
446 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) | 446 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) |
447 | +action-button(quiet=true selected=true)= 'Menu' | 447 | +action-button(quiet=true selected=true)= 'Menu' |
448 | +action-menu | 448 | +action-menu |
449 | +action-menu-slot(class='l-card l-card--flush') | ||
450 | +avatar(block=true circle=true size='sm' src='avatar.png' class='l-card__block') | ||
451 | .l-card__block.l-card__block--main | ||
452 | strong.u-db= 'Volpeon' | ||
453 | small.u-db= '@volpeon@mk.vulpes.one' | ||
454 | +action-menu-separator | ||
449 | +action-menu-item(icon='user')= 'View profile' | 455 | +action-menu-item(icon='user')= 'View profile' |
450 | +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' | 456 | +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' |
451 | +action-menu-separator | 457 | +action-menu-separator |
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug index 0f690ce..55ceacb 100644 --- a/tpl/objects/action-menu.pug +++ b/tpl/objects/action-menu.pug | |||
@@ -30,3 +30,14 @@ mixin action-menu-item | |||
30 | 30 | ||
31 | mixin action-menu-separator | 31 | mixin action-menu-separator |
32 | .o-action-menu__separator | 32 | .o-action-menu__separator |
33 | |||
34 | mixin action-menu-slot | ||
35 | - | ||
36 | let classes = { | ||
37 | 'o-action-menu__slot ': true, | ||
38 | } | ||
39 | if (attributes.class) { | ||
40 | classes[attributes.class] = true; | ||
41 | } | ||
42 | div(class=classes) | ||
43 | block | ||
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug index 83c0f7c..16de7c5 100644 --- a/tpl/objects/avatar.pug +++ b/tpl/objects/avatar.pug | |||
@@ -4,9 +4,12 @@ mixin avatar | |||
4 | - | 4 | - |
5 | let classes = { | 5 | let classes = { |
6 | 'o-avatar': true, | 6 | 'o-avatar': true, |
7 | 'o-avatar--circle': attributes.circle | 7 | 'o-avatar--circle': attributes.circle, |
8 | 'u-db': attributes.block | ||
9 | } | ||
10 | if (attributes.class) { | ||
11 | classes[attributes.class] = true; | ||
8 | } | 12 | } |
9 | |||
10 | if (attributes.size) { | 13 | if (attributes.size) { |
11 | classes['o-avatar--' + attributes.size] = true; | 14 | classes['o-avatar--' + attributes.size] = true; |
12 | } | 15 | } |