summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-15 12:17:16 +0100
committerVolpeon <git@volpeon.ink>2022-02-15 12:17:16 +0100
commit0ba5a9d7372d80c7f31ddf14d1805de64dc631c7 (patch)
tree75054d4446dc237449424e9e000f8a57094a6159
parentSmaller status indicator (diff)
downloadiro-design-0ba5a9d7372d80c7f31ddf14d1805de64dc631c7.tar.gz
iro-design-0ba5a9d7372d80c7f31ddf14d1805de64dc631c7.tar.bz2
iro-design-0ba5a9d7372d80c7f31ddf14d1805de64dc631c7.zip
Better indicator size handling
-rw-r--r--src/objects/_avatar.scss51
-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, 40 insertions, 34 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 1ccfa00..42f6520 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,23 +1,42 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4@mixin status($size) {
5 @include iro.bem-elem('status') {
6 width: fn.dim(--#{$size} --indicator-size);
7 height: fn.dim(--#{$size} --indicator-size);
8
9 @include iro.bem-next-elem('content') {
10 mask-image: radial-gradient(
11 circle calc(.5 * fn.dim(--#{$size} --indicator-size) + fn.dim(--indicator-spacing)) at
12 calc(100% - .5 * fn.dim(--#{$size} --indicator-size))
13 calc(100% - .5 * fn.dim(--#{$size} --indicator-size)),
14 transparent 95%,
15 #fff
16 );
17 }
18 }
19}
20
4@include iro.props-namespace('avatar') { 21@include iro.props-namespace('avatar') {
5 @include iro.props-store(( 22 @include iro.props-store((
6 --dims: ( 23 --dims: (
7 --100: ( 24 --100: (
8 --size: fn.global-dim(--size --450), 25 --size: fn.global-dim(--size --450),
9 --font-size: fn.global-dim(--font-size --100), 26 --font-size: fn.global-dim(--font-size --100),
27 --indicator-size: fn.global-dim(--size --125),
10 ), 28 ),
11 --75: ( 29 --75: (
12 --size: fn.global-dim(--size --325), 30 --size: fn.global-dim(--size --325),
13 --font-size: fn.global-dim(--font-size --75), 31 --font-size: fn.global-dim(--font-size --75),
32 --indicator-size: fn.global-dim(--size --100),
14 ), 33 ),
15 --50: ( 34 --50: (
16 --size: fn.global-dim(--size --225), 35 --size: fn.global-dim(--size --225),
17 --font-size: fn.global-dim(--font-size --50), 36 --font-size: fn.global-dim(--font-size --50),
37 --indicator-size: fn.global-dim(--size --85),
18 ), 38 ),
19 --indicator-size: fn.foreign-dim(--status-indicator, --100), 39 --indicator-spacing: fn.global-dim(--size --40),
20 --indicator-spacing: iro.fn-px-to-rem(3px),
21 --rounding: 25%, 40 --rounding: 25%,
22 ), 41 ),
23 ), 'dims'); 42 ), 'dims');
@@ -40,18 +59,10 @@
40 position: absolute; 59 position: absolute;
41 right: 0; 60 right: 0;
42 bottom: 0; 61 bottom: 0;
43
44 @include iro.bem-next-elem('content') {
45 mask-image: radial-gradient(
46 circle calc(.5 * fn.dim(--indicator-size) + fn.dim(--indicator-spacing)) at
47 calc(100% - .5 * fn.dim(--indicator-size))
48 calc(100% - .5 * fn.dim(--indicator-size)),
49 transparent 95%,
50 #fff
51 );
52 }
53 } 62 }
54 63
64 @include status(100);
65
55 @include iro.bem-elem('content') { 66 @include iro.bem-elem('content') {
56 display: block; 67 display: block;
57 width: fn.dim(--100 --size); 68 width: fn.dim(--100 --size);
@@ -80,6 +91,8 @@
80 @include iro.bem-modifier('75') { 91 @include iro.bem-modifier('75') {
81 font-size: fn.dim(--75 --font-size); 92 font-size: fn.dim(--75 --font-size);
82 93
94 @include status(75);
95
83 @include iro.bem-elem('content') { 96 @include iro.bem-elem('content') {
84 width: fn.dim(--75 --size); 97 width: fn.dim(--75 --size);
85 height: fn.dim(--75 --size); 98 height: fn.dim(--75 --size);
@@ -90,6 +103,8 @@
90 @include iro.bem-modifier('50') { 103 @include iro.bem-modifier('50') {
91 font-size: fn.dim(--50 --font-size); 104 font-size: fn.dim(--50 --font-size);
92 105
106 @include status(50);
107
93 @include iro.bem-elem('content') { 108 @include iro.bem-elem('content') {
94 width: fn.dim(--50 --size); 109 width: fn.dim(--50 --size);
95 height: fn.dim(--50 --size); 110 height: fn.dim(--50 --size);
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 6bcb547..b316f69 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -4,8 +4,7 @@
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 --100: fn.global-dim(--size --100), 7 --size: fn.global-dim(--size --125),
8 --125: fn.global-dim(--size --125),
9 ), 8 ),
10 ), 'dims'); 9 ), 'dims');
11 10
@@ -20,17 +19,11 @@
20 19
21 @include iro.bem-object(iro.props-namespace()) { 20 @include iro.bem-object(iro.props-namespace()) {
22 display: inline-block; 21 display: inline-block;
23 width: fn.dim(--100); 22 width: fn.dim(--size);
24 height: fn.dim(--100); 23 height: fn.dim(--size);
25 border-radius: fn.dim(--100); 24 border-radius: 10em;
26 background-color: fn.color(--default); 25 background-color: fn.color(--default);
27 26
28 @include iro.bem-modifier('125') {
29 width: fn.dim(--125);
30 height: fn.dim(--125);
31 border-radius: fn.dim(--125);
32 }
33
34 @each $color in 'green' 'yellow' 'red' { 27 @each $color in 'green' 'yellow' 'red' {
35 @include iro.bem-is($color) { 28 @include iro.bem-is($color) {
36 background-color: fn.color(--#{$color}); 29 background-color: fn.color(--#{$color});
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index b856df8..751e29d 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)(size=125 class='o-action-menu__icon') 14 +status-indicator(attributes.icon)(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 e4180b8..0a654ce 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)(size=125 class='o-menu__icon') 21 +status-indicator(attributes.icon)(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 850348d..7ecb08a 100644
--- a/tpl/objects/status-indicator.pug
+++ b/tpl/objects/status-indicator.pug
@@ -1,9 +1,7 @@
1mixin status-indicator(status) 1mixin status-indicator(status)
2 - 2 -
3 let size = attributes.size || 100;
4 let classes = { 3 let classes = {
5 'o-status-indicator': true, 4 'o-status-indicator': true,
6 ['o-status-indicator--' + size]: true,
7 } 5 }
8 classes['is-' + status] = true 6 classes['is-' + status] = true
9 if (attributes.class) { 7 if (attributes.class) {