From 213c5637d4bbebcd3508f0b91da8e6bfae528c1d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Feb 2021 09:18:44 +0200
Subject: [PATCH] Cleanup ReactButton's CSS, fix hitboxes of reactbutton and
extrabuttons
---
.../extra_buttons/extra_buttons.vue | 5 +
src/components/popover/popover.vue | 1 +
src/components/react_button/react_button.vue | 105 ++++++++++--------
3 files changed, 63 insertions(+), 48 deletions(-)
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index e845d8fc..c6cb9fbe 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -139,6 +139,11 @@
@import '../../_variables.scss';
.ExtraButtons {
+ /* override of popover internal stuff */
+ .popover-trigger-button {
+ width: auto;
+ }
+
.popover-trigger {
position: static;
padding: 10px;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 2252c68f..876dd61d 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -7,6 +7,7 @@
ref="trigger"
class="button-unstyled -fullwidth popover-trigger-button"
@click="onClick"
+ type="button"
>
<slot name="trigger" />
</button>
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 99523407..04734674 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -59,63 +59,72 @@
<style lang="scss">
@import '../../_variables.scss';
-.reaction-picker-filter {
- padding: 0.5em;
- display: flex;
- input {
- flex: 1;
+.ReactButton {
+ .reaction-picker-filter {
+ padding: 0.5em;
+ display: flex;
+
+ input {
+ flex: 1;
+ }
}
-}
-.reaction-picker-divider {
- height: 1px;
- width: 100%;
- margin: 0.5em;
- background-color: var(--border, $fallback--border);
-}
+ .reaction-picker-divider {
+ height: 1px;
+ width: 100%;
+ margin: 0.5em;
+ background-color: var(--border, $fallback--border);
+ }
-.reaction-picker {
- width: 10em;
- height: 9em;
- font-size: 1.5em;
- overflow-y: scroll;
- display: flex;
- flex-wrap: wrap;
- padding: 0.5em;
- text-align: center;
- align-content: flex-start;
- user-select: none;
+ .reaction-picker {
+ width: 10em;
+ height: 9em;
+ font-size: 1.5em;
+ overflow-y: scroll;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0.5em;
+ text-align: center;
+ align-content: flex-start;
+ user-select: none;
- mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
- linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
- linear-gradient(to top, white, white);
- transition: mask-size 150ms;
- mask-size: 100% 20px, 100% 20px, auto;
- // Autoprefixed seem to ignore this one, and also syntax is different
- -webkit-mask-composite: xor;
- mask-composite: exclude;
+ mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+ linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+ linear-gradient(to top, white, white);
+ transition: mask-size 150ms;
+ mask-size: 100% 20px, 100% 20px, auto;
- .emoji-button {
- cursor: pointer;
+ /* Autoprefixed seem to ignore this one, and also syntax is different */
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
- flex-basis: 20%;
- line-height: 1.5em;
- align-content: center;
+ .emoji-button {
+ cursor: pointer;
- &:hover {
- transform: scale(1.25);
+ flex-basis: 20%;
+ line-height: 1.5em;
+ align-content: center;
+
+ &:hover {
+ transform: scale(1.25);
+ }
+ }
+ }
+
+ /* override of popover internal stuff */
+ .popover-trigger-button {
+ width: auto;
+ }
+
+ .popover-trigger {
+ padding: 10px;
+ margin: -10px;
+
+ &:hover .svg-inline--fa {
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
}
}
}
-.ReactButton {
- padding: 10px;
- margin: -10px;
-
- &:hover .svg-inline--fa {
- color: $fallback--text;
- color: var(--text, $fallback--text);
- }
-}
-
</style>