diff options
-rw-r--r-- | src/objects/_avatar.scss | 51 | ||||
-rw-r--r-- | src/objects/_status-indicator.scss | 15 | ||||
-rw-r--r-- | tpl/objects/action-menu.pug | 2 | ||||
-rw-r--r-- | tpl/objects/menu.pug | 2 | ||||
-rw-r--r-- | tpl/objects/status-indicator.pug | 4 |
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 @@ | |||
1 | mixin status-indicator(status) | 1 | mixin 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) { |