forked from srxl/akkoma-fe
fix mobile post button being too square
This commit is contained in:
parent
c6a4a0a320
commit
edb66ecade
1 changed files with 28 additions and 27 deletions
|
@ -1,13 +1,12 @@
|
|||
<template>
|
||||
<div v-if="isLoggedIn">
|
||||
<button
|
||||
class="button-default new-status-button"
|
||||
:class="{ 'hidden': isHidden, 'always-show': isPersistent }"
|
||||
@click="openPostForm"
|
||||
>
|
||||
<FAIcon icon="pen" />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
v-if="isLoggedIn"
|
||||
class="MobilePostButton button-default new-status-button"
|
||||
:class="{ 'hidden': isHidden, 'always-show': isPersistent }"
|
||||
@click="openPostForm"
|
||||
>
|
||||
<FAIcon icon="pen" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script src="./mobile_post_status_button.js"></script>
|
||||
|
@ -15,25 +14,27 @@
|
|||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.new-status-button {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-radius: 100%;
|
||||
position: fixed;
|
||||
bottom: 1.5em;
|
||||
right: 1.5em;
|
||||
// TODO: this needs its own color, it has to stand out enough and link color
|
||||
// is not very optimal for this particular use.
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btn, $fallback--fg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
|
||||
z-index: 10;
|
||||
.MobilePostButton {
|
||||
&.button-default {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
border-radius: 100%;
|
||||
position: fixed;
|
||||
bottom: 1.5em;
|
||||
right: 1.5em;
|
||||
// TODO: this needs its own color, it has to stand out enough and link color
|
||||
// is not very optimal for this particular use.
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btn, $fallback--fg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3), 0px 4px 6px rgba(0, 0, 0, 0.3);
|
||||
z-index: 10;
|
||||
|
||||
transition: 0.35s transform;
|
||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||
transition: 0.35s transform;
|
||||
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
transform: translateY(150%);
|
||||
|
|
Loading…
Reference in a new issue