diff options
Diffstat (limited to 'apps/user_status/src')
| -rw-r--r-- | apps/user_status/src/components/OnlineStatusSelect.vue | 14 |
1 files changed, 13 insertions, 1 deletions
diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue index d9ce249ad13..f920189fce1 100644 --- a/apps/user_status/src/components/OnlineStatusSelect.vue +++ b/apps/user_status/src/components/OnlineStatusSelect.vue @@ -27,8 +27,9 @@ type="radio" name="user-status-online" @change="onChange"> - <label :for="id" :class="icon" class="user-status-online-select__label"> + <label :for="id" class="user-status-online-select__label"> {{ label }} + <span :class="icon" role="img" /> <em class="user-status-online-select__subline">{{ subline }}</em> </label> </div> @@ -76,6 +77,7 @@ export default { </script> <style lang="scss" scoped> +@use 'sass:math'; $icon-size: 24px; $label-padding: 8px; @@ -91,6 +93,7 @@ $label-padding: 8px; } &__label { + position: relative; display: block; margin: $label-padding; padding: $label-padding; @@ -105,6 +108,15 @@ $label-padding: 8px; & { cursor: pointer; } + + span { + position: absolute; + top: calc(50% - math.div($icon-size, 2)); + left: $label-padding; + display: block; + width: $icon-size; + height: $icon-size; + } } &__input:checked + &__label, |