Fix invisible statustags/v26.0.0beta1
@@ -94,8 +94,8 @@ | |||
} | |||
.icon-user-status-invisible { | |||
/* $dir is the app name, so we add this to the icon var to avoid conflicts between apps */ | |||
background-image: var(--icon-user-status-invisible-dark); | |||
background-image: url("../img/user-status-invisible.svg"); | |||
filter: var(--background-invert-if-dark); | |||
} | |||
/*# sourceMappingURL=user-status-menu.css.map */ |
@@ -1 +1 @@ | |||
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;ACuCC;EAEA;;;ADrCD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAID;ACsBC;EAEA","file":"user-status-menu.css"} | |||
{"version":3,"sourceRoot":"","sources":["../../../core/css/variables.scss","user-status-menu.scss","../../../core/css/functions.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBA;AAAA;AAAA;AA4BA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AD1BA;ACuCC;EAEA;;;ADrCD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA","file":"user-status-menu.css"} |
@@ -38,7 +38,7 @@ | |||
background-image: url('../img/user-status-dnd.svg'); | |||
} | |||
// TODO: debug why icon-black-white does not work here | |||
.icon-user-status-invisible { | |||
@include icon-color('user-status-invisible', 'user_status', variables.$color-black, 1); | |||
background-image: url('../img/user-status-invisible.svg'); | |||
filter: var(--background-invert-if-dark); | |||
} |
@@ -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, |