summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/objects/_avatar.scss2
-rw-r--r--src/objects/_status-indicator.scss15
-rw-r--r--tpl/objects/action-menu.pug2
-rw-r--r--tpl/objects/menu.pug2
-rw-r--r--tpl/objects/status-indicator.pug4
5 files changed, 17 insertions, 8 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 0d9773f..1ccfa00 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -16,7 +16,7 @@
16 --size: fn.global-dim(--size --225), 16 --size: fn.global-dim(--size --225),
17 --font-size: fn.global-dim(--font-size --50), 17 --font-size: fn.global-dim(--font-size --50),
18 ), 18 ),
19 --indicator-size: fn.foreign-dim(--status-indicator, --size), 19 --indicator-size: fn.foreign-dim(--status-indicator, --100),
20 --indicator-spacing: iro.fn-px-to-rem(3px), 20 --indicator-spacing: iro.fn-px-to-rem(3px),
21 --rounding: 25%, 21 --rounding: 25%,
22 ), 22 ),
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 0ddd115..6bcb547 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -4,7 +4,8 @@
4@include iro.props-namespace('status-indicator') { 4@include iro.props-namespace('status-indicator') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --size: iro.fn-px-to-rem(10px), 7 --100: fn.global-dim(--size --100),
8 --125: fn.global-dim(--size --125),
8 ), 9 ),
9 ), 'dims'); 10 ), 'dims');
10 11
@@ -19,11 +20,17 @@
19 20
20 @include iro.bem-object(iro.props-namespace()) { 21 @include iro.bem-object(iro.props-namespace()) {
21 display: inline-block; 22 display: inline-block;
22 width: fn.dim(--size); 23 width: fn.dim(--100);
23 height: fn.dim(--size); 24 height: fn.dim(--100);
24 border-radius: fn.dim(--size); 25 border-radius: fn.dim(--100);
25 background-color: fn.color(--default); 26 background-color: fn.color(--default);
26 27
28 @include iro.bem-modifier('125') {
29 width: fn.dim(--125);
30 height: fn.dim(--125);
31 border-radius: fn.dim(--125);
32 }
33
27 @each $color in 'green' 'yellow' 'red' { 34 @each $color in 'green' 'yellow' 'red' {
28 @include iro.bem-is($color) { 35 @include iro.bem-is($color) {
29 background-color: fn.color(--#{$color}); 36 background-color: fn.color(--#{$color});
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 751e29d..b856df8 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -11,7 +11,7 @@ mixin action-menu-item
11 .l-card__block.o-action-menu__icon-slot 11 .l-card__block.o-action-menu__icon-slot
12 if attributes.icon 12 if attributes.icon
13 if attributes.iconIsStatus 13 if attributes.iconIsStatus
14 +status-indicator(attributes.icon)(class='o-action-menu__icon') 14 +status-indicator(attributes.icon)(size=125 class='o-action-menu__icon')
15 else 15 else
16 +icon(attributes.icon)(class='o-action-menu__icon') 16 +icon(attributes.icon)(class='o-action-menu__icon')
17 .l-card__block.l-card__block--main 17 .l-card__block.l-card__block--main
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 0a654ce..e4180b8 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -18,7 +18,7 @@ mixin menu-item
18 if attributes.icon 18 if attributes.icon
19 .l-card__block.o-menu__icon-slot 19 .l-card__block.o-menu__icon-slot
20 if attributes.iconIsStatus 20 if attributes.iconIsStatus
21 +status-indicator(attributes.icon)(class='o-menu__icon') 21 +status-indicator(attributes.icon)(size=125 class='o-menu__icon')
22 else 22 else
23 +icon(attributes.icon)(class='o-menu__icon') 23 +icon(attributes.icon)(class='o-menu__icon')
24 .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass }) 24 .l-card__block.l-card__block--main&attributes({ class: attributes.contentClass })
diff --git a/tpl/objects/status-indicator.pug b/tpl/objects/status-indicator.pug
index 7ecb08a..850348d 100644
--- a/tpl/objects/status-indicator.pug
+++ b/tpl/objects/status-indicator.pug
@@ -1,7 +1,9 @@
1mixin status-indicator(status) 1mixin status-indicator(status)
2 - 2 -
3 let size = attributes.size || 100;
3 let classes = { 4 let classes = {
4 'o-status-indicator': true, 5 'o-status-indicator': true,
6 ['o-status-indicator--' + size]: true,
5 } 7 }
6 classes['is-' + status] = true 8 classes['is-' + status] = true
7 if (attributes.class) { 9 if (attributes.class) {