summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-01-26 15:23:52 +0100
committerVolpeon <git@volpeon.ink>2023-01-26 15:23:52 +0100
commita1870a62f262dad9affcfebec1e07168c022ae5d (patch)
tree266f463bfa14f13642ffda9b29d3123560fdc33f /src/objects
parentFix (diff)
downloadiro-design-a1870a62f262dad9affcfebec1e07168c022ae5d.tar.gz
iro-design-a1870a62f262dad9affcfebec1e07168c022ae5d.tar.bz2
iro-design-a1870a62f262dad9affcfebec1e07168c022ae5d.zip
Avatar
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_avatar.scss28
1 files changed, 26 insertions, 2 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 9be249f..da7fdbd 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -66,6 +66,18 @@
66 font-style: normal; 66 font-style: normal;
67 vertical-align: .05em; 67 vertical-align: .05em;
68 68
69 &::after {
70 content: '';
71 display: block;
72 position: absolute;
73 top: 0;
74 right: 0;
75 bottom: 0;
76 left: 0;
77 border: 2px solid transparent;
78 border-radius: fn.dim(--rounding);
79 }
80
69 @include iro.bem-elem('status') { 81 @include iro.bem-elem('status') {
70 position: absolute; 82 position: absolute;
71 right: 0; 83 right: 0;
@@ -91,6 +103,10 @@
91 } 103 }
92 104
93 @include iro.bem-modifier('circle') { 105 @include iro.bem-modifier('circle') {
106 &::after {
107 border-radius: 100%;
108 }
109
94 @include iro.bem-elem('content') { 110 @include iro.bem-elem('content') {
95 border-radius: 100%; 111 border-radius: 100%;
96 } 112 }
@@ -102,6 +118,12 @@
102 } 118 }
103 } 119 }
104 120
121 @include iro.bem-modifier('colored') {
122 @include iro.bem-elem('content') {
123 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
124 }
125 }
126
105 @each $size in 50 75 150 { 127 @each $size in 50 75 150 {
106 @include iro.bem-modifier($size) { 128 @include iro.bem-modifier($size) {
107 font-size: fn.dim(--#{$size} --font-size); 129 font-size: fn.dim(--#{$size} --font-size);
@@ -118,8 +140,10 @@
118 140
119 @include iro.bem-at-theme('keyboard') { 141 @include iro.bem-at-theme('keyboard') {
120 &:focus { 142 &:focus {
121 border-color: fn.color(--key-focus --border); 143 &::after {
122 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow); 144 border-color: fn.color(--key-focus --border);
145 box-shadow: fn.color(--key-focus --shadow);
146 }
123 } 147 }
124 } 148 }
125 } 149 }