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: Cleanup ReactButton's CSS, fix hitboxes of reactbutton and
 extrabuttons

---
 src/components/react_button/react_button.vue | 99 +++++++++++++++-------------
 1 file changed, 54 insertions(+), 45 deletions(-)

(limited to 'src/components/react_button/react_button.vue')

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,62 +59,71 @@
 <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);
+      }
     }
   }
-}
 
-.ReactButton {
-  padding: 10px;
-  margin: -10px;
+  /* 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);
+    &:hover .svg-inline--fa {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2