diff options
Diffstat (limited to 'src/objects')
-rw-r--r-- | src/objects/_avatar.scss | 51 | ||||
-rw-r--r-- | src/objects/_status-indicator.scss | 15 |
2 files changed, 37 insertions, 29 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}); |