summaryrefslogtreecommitdiffstats
path: root/src/.old/objects/_avatar.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/.old/objects/_avatar.scss')
-rw-r--r--src/.old/objects/_avatar.scss146
1 files changed, 0 insertions, 146 deletions
diff --git a/src/.old/objects/_avatar.scss b/src/.old/objects/_avatar.scss
deleted file mode 100644
index 4be780e..0000000
--- a/src/.old/objects/_avatar.scss
+++ /dev/null
@@ -1,146 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
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
21@include iro.props-namespace('avatar') {
22 @include iro.props-store((
23 --dims: (
24 --400: (
25 --size: fn.global-dim(--size --1600),
26 --font-size: fn.global-dim(--font-size --800),
27 --indicator-size: fn.global-dim(--size --400),
28 ),
29 --300: (
30 --size: fn.global-dim(--size --1200),
31 --font-size: fn.global-dim(--font-size --600),
32 --indicator-size: fn.global-dim(--size --300),
33 ),
34 --200: (
35 --size: fn.global-dim(--size --800),
36 --font-size: fn.global-dim(--font-size --300),
37 --indicator-size: fn.global-dim(--size --225),
38 ),
39 --150: (
40 --size: fn.global-dim(--size --650),
41 --font-size: fn.global-dim(--font-size --200),
42 --indicator-size: fn.global-dim(--size --175),
43 ),
44 --100: (
45 --size: fn.global-dim(--size --500),
46 --font-size: fn.global-dim(--font-size --100),
47 --indicator-size: fn.global-dim(--size --150),
48 ),
49 --75: (
50 --size: fn.global-dim(--size --375),
51 --font-size: fn.global-dim(--font-size --75),
52 --indicator-size: fn.global-dim(--size --125),
53 ),
54 --50: (
55 --size: fn.global-dim(--size --250),
56 --font-size: fn.global-dim(--font-size --50),
57 --indicator-size: fn.global-dim(--size --100),
58 ),
59 --indicator-spacing: fn.global-dim(--size --40),
60 --rounding: 25%,
61 ),
62 ), 'dims');
63
64 @include iro.props-store((
65 --colors: (
66 --h: 354,
67 --s: 44%,
68 --l: 45%,
69
70 --key-focus: (
71 --border: fn.global-color(--focus --fill),
72 --shadow: 0 0 0 calc(2px + fn.global-dim(--focus --outline-width)) fn.global-color(--accent --primary --quiet --obj-lo),
73 ),
74 ),
75 ), 'colors');
76
77 @include iro.bem-object(iro.props-namespace()) {
78 display: inline-block;
79 position: relative;
80 border-radius: fn.dim(--rounding);
81 font-size: fn.dim(--100 --font-size);
82 font-style: normal;
83 vertical-align: .05em;
84
85 @include iro.bem-elem('status') {
86 position: absolute;
87 right: 0;
88 bottom: 0;
89 }
90
91 @include status(100);
92
93 @include iro.bem-elem('content') {
94 display: block;
95 width: fn.dim(--100 --size);
96 height: fn.dim(--100 --size);
97 border-radius: fn.dim(--rounding);
98 line-height: fn.dim(--100 --size);
99 text-align: center;
100 object-fit: cover;
101 object-position: center center;
102 }
103
104 @include iro.bem-modifier('circle') {
105 border-radius: 100%;
106
107 @include iro.bem-elem('content') {
108 border-radius: 100%;
109 }
110 }
111
112 @include iro.bem-modifier('placeholder') {
113 @include iro.bem-elem('content') {
114 background-color: hsl(0, 0%, fn.color(--l));
115 }
116 }
117
118 @include iro.bem-modifier('colored') {
119 @include iro.bem-elem('content') {
120 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
121 color: #fff;
122 }
123 }
124
125 @each $size in 50 75 150 200 300 400 {
126 @include iro.bem-modifier($size) {
127 font-size: fn.dim(--#{$size} --font-size);
128
129 @include status($size);
130
131 @include iro.bem-elem('content') {
132 width: fn.dim(--#{$size} --size);
133 height: fn.dim(--#{$size} --size);
134 line-height: fn.dim(--#{$size} --size);
135 }
136 }
137 }
138
139 @include iro.bem-at-theme('keyboard') {
140 &:focus {
141 outline: 2px solid fn.color(--key-focus --border);
142 box-shadow: fn.color(--key-focus --shadow);
143 }
144 }
145 }
146}