diff options
Diffstat (limited to 'apps/user_status/src/components/OnlineStatusSelect.vue')
| -rw-r--r-- | apps/user_status/src/components/OnlineStatusSelect.vue | 42 |
1 files changed, 20 insertions, 22 deletions
diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue index cf34aefef53..0abcc8d68e6 100644 --- a/apps/user_status/src/components/OnlineStatusSelect.vue +++ b/apps/user_status/src/components/OnlineStatusSelect.vue @@ -11,9 +11,10 @@ name="user-status-online" @change="onChange"> <label :for="id" class="user-status-online-select__label"> - {{ label }} <NcUserStatusIcon :status="type" + class="user-status-online-select__icon" aria-hidden="true" /> + {{ label }} <em class="user-status-online-select__subline">{{ subline }}</em> </label> </div> @@ -63,45 +64,42 @@ export default { </script> <style lang="scss" scoped> -@use 'sass:math'; -$icon-size: 24px; -$label-padding: 8px; - .user-status-online-select { &__label { - position: relative; - display: block; - margin: $label-padding; - padding: $label-padding; - padding-inline-start: $icon-size + $label-padding * 2; - border: 2px solid var(--color-main-background); + box-sizing: inherit; + display: grid; + grid-template-columns: var(--default-clickable-area) 1fr 2fr; + align-items: center; + gap: var(--default-grid-baseline); + min-height: var(--default-clickable-area); + padding: var(--default-grid-baseline); border-radius: var(--border-radius-large); background-color: var(--color-background-hover); - background-position: $label-padding center; - background-size: $icon-size; - span, - & { + &, & * { cursor: pointer; } - span { - position: absolute; - top: calc(50% - 10px); - inset-inline-start: 10px; - display: block; - width: $icon-size; - height: $icon-size; + &:hover { + background-color: var(--color-background-dark); } } + &__icon { + flex-shrink: 0; + max-width: 34px; + max-height: 100%; + } + &__input:checked + &__label { outline: 2px solid var(--color-main-text); + background-color: var(--color-background-dark); box-shadow: 0 0 0 4px var(--color-main-background); } &__input:focus-visible + &__label { outline: 2px solid var(--color-primary-element) !important; + background-color: var(--color-background-dark); } &__subline { |