From 2c2f6fd4edeeff624f9795090d3691e4cbb525c6 Mon Sep 17 00:00:00 2001
From: David Sevilla Martin <me@datitisev.me>
Date: Mon, 20 Apr 2020 15:44:53 -0400
Subject: [PATCH] Add less changes from #1950

They got lost when I dropped the commits
---
 less/common/LoadingIndicator.less |  9 ++++++++
 less/common/Modal.less            | 34 +++++++++++++++++++++------
 less/common/Tooltip.less          | 38 ++++++++++++++++---------------
 less/common/common.less           |  1 +
 less/common/keyframes.less        |  9 ++++++++
 less/forum/Composer.less          |  2 +-
 6 files changed, 67 insertions(+), 26 deletions(-)
 create mode 100644 less/common/keyframes.less

diff --git a/less/common/LoadingIndicator.less b/less/common/LoadingIndicator.less
index 3f53505a3..ea24d15cc 100644
--- a/less/common/LoadingIndicator.less
+++ b/less/common/LoadingIndicator.less
@@ -12,3 +12,12 @@
 .LoadingIndicator--block {
   height: 100px;
 }
+
+@keyframes spinner-line-fade-default {
+  0%, 100% {
+    opacity: 0.22; /* minimum opacity */
+  }
+  1% {
+    opacity: 1;
+  }
+}
diff --git a/less/common/Modal.less b/less/common/Modal.less
index e9af0e194..b6ce4229c 100644
--- a/less/common/Modal.less
+++ b/less/common/Modal.less
@@ -15,12 +15,19 @@
   left: 0;
   z-index: @zindex-modal-background;
   background-color: @overlay-bg;
-  opacity: 0;
-  .transition(0.2s opacity);
+  .animation(fadeIn 0.2s);
+}
 
-  &.in {
-    opacity: 1;
-  }
+@keyframes modalScaleIn {
+  from { .scale(.9); }
+  40% { .scale(.9); }
+  to { .scale(1) }
+}
+
+@keyframes modalFadeIn {
+  from { opacity: 0 }
+  40% { opacity: 0 }
+  to { opacity: 1 }
 }
 
 // Container that the modal scrolls within
@@ -40,8 +47,21 @@
     .scale(0.9);
     .transition-transform(0.2s ease-out);
   }
-  &.in .Modal {
-    .scale(1);
+
+  &[aria-hidden="false"] {
+    .animation(e("modalFadeIn .5s, modalScaleIn .4s"));
+
+    .Modal {
+      .scale(1);
+    }
+  }
+
+  &[aria-hidden="true"] {
+    .animation(fadeOut .3s);
+  }
+
+  &.is-open {
+    display: block;
   }
 }
 .modal-open .ModalManager {
diff --git a/less/common/Tooltip.less b/less/common/Tooltip.less
index 282c35736..1f4113964 100644
--- a/less/common/Tooltip.less
+++ b/less/common/Tooltip.less
@@ -10,13 +10,14 @@
   font-weight: normal;
   line-height: 1.4;
   opacity: 0;
-  .transition(0.15s opacity linear);
+  .transition(e("0.15s visibility linear, 0.15s opacity linear"));
+  .animation(fadeIn 0.15s);
 
-  &.in     { opacity: 1; }
-  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
-  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
-  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
-  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+  &[aria-hidden="false"]  { opacity: 1; }
+  &[x-placement="top"]    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
+  &[x-placement="right"]  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
+  &[x-placement="bottom"] { margin-top:   3px; padding: @tooltip-arrow-width 0; }
+  &[x-placement="left"]    { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
 }
 
 // Wrapper for the tooltip content
@@ -40,31 +41,32 @@
   border-color: transparent;
   border-style: solid;
 }
+
 .tooltip {
-  &.top .tooltip-arrow {
-    bottom: 0;
-    left: 50%;
+  &[x-placement="top"] .tooltip-arrow {
+    bottom: 0.2px;
+    left: 50% !important;
     margin-left: -@tooltip-arrow-width;
     border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
     border-top-color: @tooltip-bg;
   }
-  &.right .tooltip-arrow {
-    top: 50%;
-    left: 0;
+  &[x-placement="right"] .tooltip-arrow {
+    top: 50% !important;
+    left: 0.2px;
     margin-top: -@tooltip-arrow-width;
     border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
     border-right-color: @tooltip-bg;
   }
-  &.left .tooltip-arrow {
-    top: 50%;
-    right: 0;
+  &[x-placement="left"] .tooltip-arrow {
+    top: 50% !important;
+    right: 0.2px;
     margin-top: -@tooltip-arrow-width;
     border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-left-color: @tooltip-bg;
   }
-  &.bottom .tooltip-arrow {
-    top: 0;
-    left: 50%;
+  &[x-placement="bottom"] .tooltip-arrow {
+    top: 0.2px;
+    left: 50% !important;
     margin-left: -@tooltip-arrow-width;
     border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
     border-bottom-color: @tooltip-bg;
diff --git a/less/common/common.less b/less/common/common.less
index f62794196..8b5eeeef3 100644
--- a/less/common/common.less
+++ b/less/common/common.less
@@ -8,6 +8,7 @@
 @import "print";
 @import "scaffolding";
 @import "sideNav";
+@import "keyframes";
 
 @import "App";
 @import "Alert";
diff --git a/less/common/keyframes.less b/less/common/keyframes.less
new file mode 100644
index 000000000..c849afb1c
--- /dev/null
+++ b/less/common/keyframes.less
@@ -0,0 +1,9 @@
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
diff --git a/less/forum/Composer.less b/less/forum/Composer.less
index 1e830bdf1..d99d2dc16 100644
--- a/less/forum/Composer.less
+++ b/less/forum/Composer.less
@@ -222,7 +222,7 @@
     transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
     position: relative;
     height: 300px;
-    .transition(~"background 0.2s, box-shadow 0.2s");
+    .transition(~"background 0.2s, box-shadow 0.2s, bottom 0.2s, height 0.2s");
 
     &.active, &.fullScreen {
       background: @body-bg;