Add less changes from #1950

They got lost when I dropped the commits

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;
+  }
+}

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 {

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;

less/common/common.less

@@ -8,6 +8,7 @@
 @import "print";
 @import "scaffolding";
 @import "sideNav";
+@import "keyframes";
 
 @import "App";
 @import "Alert";

less/common/keyframes.less

@@ -0,0 +1,9 @@
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}

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;