update button toggled state, apply it to emoji reactions
This commit is contained in:
parent
f0c4bb1193
commit
8462853269
6 changed files with 23 additions and 8 deletions
|
@ -117,7 +117,9 @@ button {
|
|||
color: $fallback--text;
|
||||
color: var(--btnToggledText, $fallback--text);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btnToggled, $fallback--fg)
|
||||
background-color: var(--btnToggled, $fallback--fg);
|
||||
box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
box-shadow: var(--buttonPressedShadow);
|
||||
}
|
||||
|
||||
&.danger {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
v-for="(reaction) in emojiReactions"
|
||||
:key="reaction.emoji"
|
||||
class="emoji-reaction btn btn-default"
|
||||
:class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
|
||||
:class="{ 'toggled': reactedWith(reaction.emoji) }"
|
||||
@click="emojiOnClick(reaction.emoji, $event)"
|
||||
>
|
||||
<span class="reaction-emoji">{{ reaction.emoji }}</span>
|
||||
|
@ -40,10 +40,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
.picked-reaction {
|
||||
border: 1px solid var(--link, $fallback--link);
|
||||
margin-left: -1px; // offset the border, can't use inset shadows either
|
||||
margin-right: calc(0.5em - 1px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
@ -460,6 +460,19 @@
|
|||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnDisabledText" />
|
||||
<h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4>
|
||||
<ColorInput
|
||||
v-model="btnToggledColorLocal"
|
||||
name="btnToggledColor"
|
||||
:fallback="previewTheme.colors.btnToggled"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnToggledTextColorLocal"
|
||||
name="btnToggledTextColor"
|
||||
:fallback="previewTheme.colors.btnToggledText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
<h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue