change a few more buttons to real buttons

This commit is contained in:
Shpuld Shpuldson 2021-01-20 17:36:40 +02:00
parent 9bf80cc7be
commit 02ab803725
4 changed files with 20 additions and 23 deletions

View File

@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased] ## [Unreleased]
### Fixed
- Button to remove uploaded media in post status form is now properly placed and sized.
## [2.2.3] - 2021-01-18 ## [2.2.3] - 2021-01-18

View File

@ -178,6 +178,13 @@ a {
&.-fullwidth { &.-fullwidth {
width: 100%; width: 100%;
} }
&.-hover-highlight {
&:hover svg {
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
}
}
} }
input, textarea, .select, .input { input, textarea, .select, .input {

View File

@ -21,20 +21,17 @@
@keydown.enter.stop.prevent="nextOption(index)" @keydown.enter.stop.prevent="nextOption(index)"
> >
</div> </div>
<div <button
v-if="options.length > 2" v-if="options.length > 2"
class="icon-container" class="delete-option button-unstyled -hover-highlight"
@click="deleteOption(index)"
> >
<FAIcon <FAIcon icon="times" />
icon="times" </button>
class="delete"
@click="deleteOption(index)"
/>
</div>
</div> </div>
<a <button
v-if="options.length < maxOptions" v-if="options.length < maxOptions"
class="add-option faint" class="add-option faint button-unstyled -hover-highlight"
@click="addOption" @click="addOption"
> >
<FAIcon <FAIcon
@ -43,7 +40,7 @@
/> />
{{ $t("polls.add_option") }} {{ $t("polls.add_option") }}
</a> </button>
<div class="poll-type-expiry"> <div class="poll-type-expiry">
<div <div
class="poll-type" class="poll-type"
@ -116,7 +113,6 @@
align-self: flex-start; align-self: flex-start;
padding-top: 0.25em; padding-top: 0.25em;
padding-left: 0.1em; padding-left: 0.1em;
cursor: pointer;
} }
.poll-option { .poll-option {
@ -135,19 +131,11 @@
} }
} }
.icon-container { .delete-option {
// Hack: Move the icon over the input box // Hack: Move the icon over the input box
width: 1.5em; width: 1.5em;
margin-left: -1.5em; margin-left: -1.5em;
z-index: 1; z-index: 1;
.delete {
cursor: pointer;
&:hover {
color: inherit;
}
}
} }
.poll-type-expiry { .poll-type-expiry {

View File

@ -125,7 +125,7 @@
> >
</EmojiInput> </EmojiInput>
<button <button
class="button-unstyled" class="button-unstyled -hover-highlight"
@click="deleteField(i)" @click="deleteField(i)"
> >
<FAIcon <FAIcon
@ -136,7 +136,7 @@
</div> </div>
<button <button
v-if="newFields.length < maxFields" v-if="newFields.length < maxFields"
class="add-field faint button-unstyled" class="add-field faint button-unstyled -hover-highlight"
@click="addField" @click="addField"
> >
<FAIcon icon="plus" /> <FAIcon icon="plus" />