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"
>
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index ac940b98..04734674 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -1,6 +1,7 @@
@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);
- }
-}
-