diff options
author | Volpeon <git@volpeon.ink> | 2024-06-28 14:22:27 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-28 14:22:27 +0200 |
commit | f98a5c58c830a283d07d8efad4502281a5e0369e (patch) | |
tree | 84c4abdd260e595c7b314d79ae7af58bd406bf67 /src/objects/_avatar.scss | |
parent | Add card (diff) | |
download | iro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.tar.gz iro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.tar.bz2 iro-design-f98a5c58c830a283d07d8efad4502281a5e0369e.zip |
Update
Diffstat (limited to 'src/objects/_avatar.scss')
-rw-r--r-- | src/objects/_avatar.scss | 33 |
1 files changed, 25 insertions, 8 deletions
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index e6fa74e..5a34d19 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss | |||
@@ -24,9 +24,11 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
24 | @include iro.props-namespace('avatar') { | 24 | @include iro.props-namespace('avatar') { |
25 | @include iro.props-store(( | 25 | @include iro.props-store(( |
26 | --dims: ( | 26 | --dims: ( |
27 | --size: fn.global-dim(--size --500), | 27 | --size: fn.global-dim(--size --500), |
28 | --font-size: fn.global-dim(--font-size --100), | 28 | --font-size: fn.global-dim(--font-size --100), |
29 | --indicator-size: fn.global-dim(--size --150), | 29 | --indicator-size: fn.global-dim(--size --150), |
30 | --indicator-spacing: fn.global-dim(--size --40), | ||
31 | --rounding: 25%, | ||
30 | 32 | ||
31 | --xxxl: ( | 33 | --xxxl: ( |
32 | --size: fn.global-dim(--size --1600), | 34 | --size: fn.global-dim(--size --1600), |
@@ -58,8 +60,6 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
58 | --font-size: fn.global-dim(--font-size --50), | 60 | --font-size: fn.global-dim(--font-size --50), |
59 | --indicator-size: fn.global-dim(--size --100), | 61 | --indicator-size: fn.global-dim(--size --100), |
60 | ), | 62 | ), |
61 | --indicator-spacing: fn.global-dim(--size --40), | ||
62 | --rounding: 25%, | ||
63 | 63 | ||
64 | --key-focus: ( | 64 | --key-focus: ( |
65 | --border: fn.global-dim(--key-focus --border), | 65 | --border: fn.global-dim(--key-focus --border), |
@@ -82,12 +82,24 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
82 | @include iro.bem-object(iro.props-namespace()) { | 82 | @include iro.bem-object(iro.props-namespace()) { |
83 | display: inline-block; | 83 | display: inline-block; |
84 | position: relative; | 84 | position: relative; |
85 | border: fn.dim(--key-focus --border) solid transparent; | ||
86 | border-radius: fn.dim(--rounding); | 85 | border-radius: fn.dim(--rounding); |
87 | font-size: fn.dim(--font-size); | 86 | font-size: fn.dim(--font-size); |
88 | font-style: normal; | 87 | font-style: normal; |
89 | vertical-align: .05em; | 88 | vertical-align: .05em; |
90 | 89 | ||
90 | &::after { | ||
91 | content: ''; | ||
92 | display: none; | ||
93 | position: absolute; | ||
94 | z-index: 1; | ||
95 | inset: calc(-1 * fn.dim(--key-focus --border-offset)); | ||
96 | border: fn.dim(--key-focus --border-offset) solid transparent; | ||
97 | border-radius: fn.dim(--rounding); | ||
98 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
99 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
100 | pointer-events: none; | ||
101 | } | ||
102 | |||
91 | @include iro.bem-elem('status') { | 103 | @include iro.bem-elem('status') { |
92 | position: absolute; | 104 | position: absolute; |
93 | inset-inline-end: 0; | 105 | inset-inline-end: 0; |
@@ -110,6 +122,10 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
110 | @include iro.bem-modifier('circle') { | 122 | @include iro.bem-modifier('circle') { |
111 | border-radius: 100%; | 123 | border-radius: 100%; |
112 | 124 | ||
125 | &::after { | ||
126 | border-radius: 100%; | ||
127 | } | ||
128 | |||
113 | @include iro.bem-elem('content') { | 129 | @include iro.bem-elem('content') { |
114 | border-radius: 100%; | 130 | border-radius: 100%; |
115 | } | 131 | } |
@@ -143,8 +159,9 @@ $sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; | |||
143 | } | 159 | } |
144 | 160 | ||
145 | &:focus-visible { | 161 | &:focus-visible { |
146 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | 162 | &::after { |
147 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | 163 | display: block; |
164 | } | ||
148 | } | 165 | } |
149 | } | 166 | } |
150 | } | 167 | } |