From f375c3000d8e6f324660ff1ff55fc32d2036af75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 22 Feb 2016 11:41:50 +0100
Subject: [PATCH] ux(): help popover

---
 public/app/core/components/popover/popover.ts |   5 +-
 .../core/components/sidemenu/sidemenu.html    |   4 +-
 .../features/datasources/partials/edit.html   |   8 +
 .../datasources/partials/http_settings.html   |  16 +-
 public/sass/_grafana.scss                     |   6 +-
 public/sass/_variables.dark.scss              |   4 +
 public/sass/_variables.light.scss             |   6 +-
 public/sass/components/_drop.scss             |  28 ++
 public/sass/components/_tether_drop.scss      | 307 ------------------
 public/sass/mixins/_drop_element.scss         | 272 ++++++++++++++++
 10 files changed, 333 insertions(+), 323 deletions(-)
 create mode 100644 public/sass/components/_drop.scss
 delete mode 100644 public/sass/components/_tether_drop.scss
 create mode 100644 public/sass/mixins/_drop_element.scss

diff --git a/public/app/core/components/popover/popover.ts b/public/app/core/components/popover/popover.ts
index 5c4534ad500..f2a413aca02 100644
--- a/public/app/core/components/popover/popover.ts
+++ b/public/app/core/components/popover/popover.ts
@@ -16,6 +16,7 @@ export function popoverDirective() {
         return;
       }
 
+      var offset = attrs.offset || '0 -10px';
 
       transclude(function(clone, newScope) {
         var content = document.createElement("div");
@@ -27,10 +28,10 @@ export function popoverDirective() {
           target: inputElem[0],
           content: content,
           position: 'right middle',
-          classes: 'drop-popover',
+          classes: 'drop-help',
           openOn: 'click',
           tetherOptions: {
-            offset: "0 -10px"
+            offset: offset
           }
         });
 
diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
index 6e460e813ce..200f01e23cf 100644
--- a/public/app/core/components/sidemenu/sidemenu.html
+++ b/public/app/core/components/sidemenu/sidemenu.html
@@ -1,7 +1,7 @@
 <ul class="sidemenu">
 
 	<li class="sidemenu-org-section" ng-if="ctrl.isSignedIn" class="dropdown">
-		<div class="sidemenu-org">
+		<a class="sidemenu-org" href="profile">
 			<div class="sidemenu-org-avatar">
 				<img ng-if="ctrl.user.gravatarUrl" ng-src="{{ctrl.user.gravatarUrl}}">
 				<span class="sidemenu-org-avatar--missing">
@@ -12,7 +12,7 @@
 				<span class="sidemenu-org-user sidemenu-item-text">{{ctrl.user.name}}</span>
 				<span class="sidemenu-org-name sidemenu-item-text">{{ctrl.user.orgName}}</span>
 			</div>
-		</div>
+		</a>
 		<i class="fa fa-caret-right"></i>
 		<ul class="dropdown-menu" role="menu">
 			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="menuItem.cssClass">
diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html
index e96e8d0e08a..7dff11ac1c2 100644
--- a/public/app/features/datasources/partials/edit.html
+++ b/public/app/features/datasources/partials/edit.html
@@ -15,6 +15,13 @@
 			<div class="gf-form">
 				<span class="gf-form-label width-7">Name</span>
 				<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
+
+				<gf-popover offset="0px -85px">
+					The name is used when you select the data source in panels.
+					The <code>Default</code> data source is preselected in new
+					new panels.
+				</gf-popover>
+
 				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
 			</div>
 
@@ -24,6 +31,7 @@
 					<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
 				</div>
 			</div>
+
 		</div>
 
 		<rebuild-on-change property="datasourceMeta.id">
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html
index 93a47f4065a..a42d3e76c1b 100644
--- a/public/app/features/datasources/partials/http_settings.html
+++ b/public/app/features/datasources/partials/http_settings.html
@@ -9,14 +9,14 @@
 
 		<gf-popover>
 			<p>Specify a complete HTTP url (http://your_server:8080)</p>
-			<p ng-show="current.access === 'direct'">
-				When access method is <code>Direct</code> then this url needs to be
-				accessable from your browser.
-			</p>
-			<p ng-show="current.access === 'proxy'">
-				Your access method is currently <code>Proxy</code> then the url needs to
-				be accessable from the grafana backend.
-			</p>
+			<span ng-show="current.access === 'direct'">
+				Your access method is <code>Direct</code>, this means the url
+				needs to be accessable from the browser.
+			</span>
+			<span ng-show="current.access === 'proxy'">
+				Your access method is currently <code>Proxy</code>, this means the url
+				needs to be accessable from the grafana backend.
+			</span>
 		</gf-popover>
 	</div>
 
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index d273e9019ce..1d90ffaa97d 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -7,7 +7,7 @@
 @import "mixins/grid-framework";
 @import "mixins/hover";
 @import "mixins/forms";
-
+@import "mixins/drop_element";
 
 // BASE
 @import "base/normalize";
@@ -64,7 +64,7 @@
 @import "components/footer";
 @import "components/infobox";
 @import "components/shortcuts";
-@import "components/tether_drop";
+@import "components/drop";
 @import "components/query_editor";
 
 // PAGES
@@ -76,5 +76,5 @@
 @import "pages/signup";
 @import "pages/styleguide";
 
-@import "old_responsive";
 
+@import "old_responsive";
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 8604552f020..eb2733206de 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -246,5 +246,9 @@ $popoverTitleBackground:  $popoverBackground;
 $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
+// popover
+$popover-help-bg:         $btn-secondary-bg;
+$popover-help-color:      $text-color;
+
 // images
 $checkboxImageUrl: '../img/checkbox.png';
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 0b753411b32..9b04bd7445a 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -174,7 +174,7 @@ $dropdownBorder:                $tight-form-border;
 $dropdownDividerTop:            $gray-6;
 $dropdownDividerBottom:         $white;
 $dropdownDivider:               $dropdownDividerTop;
-$dropdownTitle:                 $dark-5;
+$dropdownTitle:                 $gray-3;
 
 $dropdownLinkColor:             $dark-3;
 $dropdownLinkColorHover:        $link-color;
@@ -273,5 +273,9 @@ $popoverTitleBackground:  $white;
 $popoverArrowOuterWidth:  $popoverArrowWidth + 1;
 $popoverArrowOuterColor:  rgba(0,0,0,.25);
 
+// popover
+$popover-help-bg:         $blue-dark;
+$popover-help-color:      $gray-6;
+
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss
new file mode 100644
index 00000000000..7a256f8efab
--- /dev/null
+++ b/public/sass/components/_drop.scss
@@ -0,0 +1,28 @@
+$popover-arrow-size: 1rem;
+$color: inherit;
+$backgroundColor: $btn-secondary-bg;
+$color: $text-color;
+$useDropShadow: false;
+$attachmentOffset: $popover-arrow-size;
+$easing: cubic-bezier(0, 0, 0.265, 1.55);
+
+.drop-element {
+  position: absolute;
+  display: none;
+
+  &.drop-open {
+    display: block;
+  }
+
+  &.drop-open.drop-popover.drop-out-of-bounds,
+  &.drop-open-transitionend.drop-popover.drop-out-of-bounds {
+    display: none;
+  }
+}
+
+.drop-element, .drop-element * {
+  box-sizing: border-box;
+}
+
+@include drop-theme("help", $popover-help-bg, $popover-help-color);
+@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing);
diff --git a/public/sass/components/_tether_drop.scss b/public/sass/components/_tether_drop.scss
deleted file mode 100644
index 28b563383b0..00000000000
--- a/public/sass/components/_tether_drop.scss
+++ /dev/null
@@ -1,307 +0,0 @@
-$arrowPointerEvents: null;
-$color: inherit;
-$useDropShadow: false;
-$arrowSize: 1rem;
-$backgroundColor: $btn-secondary-bg;
-$color: $text-color;
-$useDropShadow: false;
-$attachmentOffset: $arrowSize;
-$easing: cubic-bezier(0, 0, 0.265, 1.55);
-
-.drop-element {
-  position: absolute;
-  display: none;
-
-  &.drop-open {
-    display: block;
-    // hide when out of bounds
-    &.drop-out-of-bounds {
-      display: none;
-    }
-  }
-
-  ul {
-    margin: 0 0 1rem 1rem;
-  }
-}
-
-.drop-element, .drop-element * {
-  box-sizing: border-box;
-}
-
-.drop-element.drop-popover {
-  max-width: 100%;
-  max-height: 100%;
-
-  .drop-content {
-    border-radius: $border-radius-lg;
-    position: relative;
-    font-family: inherit;
-    background: $backgroundColor;
-    color: $color;
-    padding: 1em;
-    font-size: $font-size-sm;
-    max-width: 20rem;
-
-    @if $useDropShadow {
-      transform: translateZ(0);
-      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2));
-    }
-
-    &:before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-width: $arrowSize;
-      border-style: solid;
-      pointer-events: $arrowPointerEvents;
-    }
-  }
-
-  // Centers and middles
-
-  &.drop-element-attached-bottom.drop-element-attached-center .drop-content {
-    margin-bottom: $arrowSize;
-
-    &:before {
-      top: 100%;
-      left: 50%;
-      margin-left: - $arrowSize;
-      border-top-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-top.drop-element-attached-center .drop-content {
-    margin-top: $arrowSize;
-
-    &:before {
-      bottom: 100%;
-      left: 50%;
-      margin-left: - $arrowSize;
-      border-bottom-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-right.drop-element-attached-middle .drop-content {
-    margin-right: $arrowSize;
-
-    &:before {
-      left: 100%;
-      top: 50%;
-      margin-top: - $arrowSize;
-      border-left-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-left.drop-element-attached-middle .drop-content {
-    margin-left: $arrowSize;
-
-    &:before {
-      right: 100%;
-      top: 50%;
-      margin-top: - $arrowSize;
-      border-right-color: $backgroundColor;
-    }
-  }
-
-  // Target middle/center, element corner
-  &.drop-element-attached-left.drop-target-attached-center .drop-content {
-    left: - $arrowSize * 2;
-  }
-
-  &.drop-element-attached-right.drop-target-attached-center .drop-content {
-    left: $arrowSize * 2;
-  }
-
-  &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content {
-    margin-top: $arrowSize;
-
-    &:before {
-      bottom: 100%;
-      left: $arrowSize;
-      border-bottom-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
-    margin-top: $arrowSize;
-
-    &:before {
-      bottom: 100%;
-      right: $arrowSize;
-      border-bottom-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
-    margin-bottom: $arrowSize;
-
-    &:before {
-      top: 100%;
-      left: $arrowSize;
-      border-top-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
-    margin-bottom: $arrowSize;
-
-    &:before {
-      top: 100%;
-      right: $arrowSize;
-      border-top-color: $backgroundColor;
-    }
-  }
-
-  // Top and bottom corners
-  &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
-    margin-top: $arrowSize;
-
-    &:before {
-      bottom: 100%;
-      left: $arrowSize;
-      border-bottom-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
-    margin-top: $arrowSize;
-
-    &:before {
-      bottom: 100%;
-      right: $arrowSize;
-      border-bottom-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
-    margin-bottom: $arrowSize;
-
-    &:before {
-      top: 100%;
-      left: $arrowSize;
-      border-top-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
-    margin-bottom: $arrowSize;
-
-    &:before {
-      top: 100%;
-      right: $arrowSize;
-      border-top-color: $backgroundColor;
-    }
-  }
-
-  // Side corners
-  &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
-    margin-right: $arrowSize;
-
-    &:before {
-      top: $arrowSize;
-      left: 100%;
-      border-left-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
-    margin-left: $arrowSize;
-
-    &:before {
-      top: $arrowSize;
-      right: 100%;
-      border-right-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
-    margin-right: $arrowSize;
-
-    &:before {
-      bottom: $arrowSize;
-      left: 100%;
-      border-left-color: $backgroundColor;
-    }
-  }
-
-  &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
-    margin-left: $arrowSize;
-
-    &:before {
-      bottom: $arrowSize;
-      right: 100%;
-      border-right-color: $backgroundColor;
-    }
-  }
-}
-
-
-@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") {
-  .#{$themePrefix}-element.#{$themePrefix}-#{$themeName} {
-    transform: translateZ(0);
-    transition: opacity 100ms;
-    opacity: 0;
-    .#{$themePrefix}-content {
-      transition: transform 0.2s $easing;
-      transform: scale(0) translateZ(0);
-    }
-    &.#{$themePrefix}-open {
-      display: none;
-    }
-    &.#{$themePrefix}-open-transitionend {
-      display: block;
-    }
-    &.#{$themePrefix}-after-open {
-      transition: none;
-      opacity: 1;
-      .#{$themePrefix}-content {
-        transform: scale(1) translateZ(0);
-      }
-    }
-    // Centers and middles
-    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
-      transform-origin: 50% calc(100% + #{$attachmentOffset});
-    }
-    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
-      transform-origin: 50% (-$attachmentOffset);
-    }
-    &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
-      transform-origin: calc(100% + #{$attachmentOffset}) 50%;
-    }
-    &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
-      transform-origin: -($attachmentOffset 50%);
-    }
-    // Top and bottom corners
-    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
-      transform-origin: 0 (-$attachmentOffset);
-    }
-    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
-      transform-origin: 100% (-$attachmentOffset);
-    }
-    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
-      transform-origin: 0 calc(100% + #{$attachmentOffset});
-    }
-    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
-      transform-origin: 100% calc(100% + #{$attachmentOffset});
-    }
-    // Side corners
-    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
-      transform-origin: calc(100% + #{$attachmentOffset}) 0;
-    }
-    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
-      transform-origin: (-$attachmentOffset) 0;
-    }
-    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
-      transform-origin: calc(100% + #{$attachmentOffset}) 100%;
-    }
-    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
-      transform-origin: (-$attachmentOffset) 100%;
-    }
-  }
-}
-
-@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss
new file mode 100644
index 00000000000..b4bd2f1a51e
--- /dev/null
+++ b/public/sass/mixins/_drop_element.scss
@@ -0,0 +1,272 @@
+
+@mixin drop-theme($themeName, $theme-bg, $theme-color) {
+  .drop-element.drop-#{$themeName} {
+    max-width: 100%;
+    max-height: 100%;
+
+    .drop-content {
+      border-radius: $border-radius-lg;
+      position: relative;
+      font-family: inherit;
+      background: $theme-bg;
+      color: $theme-color;
+      padding: 1em;
+      font-size: $font-size-sm;
+      max-width: 20rem;
+
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-width: $popover-arrow-size;
+        border-style: solid;
+        pointer-events: null;
+      }
+    }
+
+    // Centers and middles
+
+    &.drop-element-attached-bottom.drop-element-attached-center .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        left: 50%;
+        margin-left: - $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-top.drop-element-attached-center .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        left: 50%;
+        margin-left: - $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-right.drop-element-attached-middle .drop-content {
+      margin-right: $popover-arrow-size;
+
+      &:before {
+        left: 100%;
+        top: 50%;
+        margin-top: - $popover-arrow-size;
+        border-left-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-left.drop-element-attached-middle .drop-content {
+      margin-left: $popover-arrow-size;
+
+      &:before {
+        right: 100%;
+        top: 50%;
+        margin-top: - $popover-arrow-size;
+        border-right-color: $theme-bg;
+      }
+    }
+
+    // Target middle/center, element corner
+    &.drop-element-attached-left.drop-target-attached-center .drop-content {
+      left: - $popover-arrow-size * 2;
+    }
+
+    &.drop-element-attached-right.drop-target-attached-center .drop-content {
+      left: $popover-arrow-size * 2;
+    }
+
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        left: $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        right: $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        left: $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        right: $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    // Top and bottom corners
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        left: $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
+      margin-top: $popover-arrow-size;
+
+      &:before {
+        bottom: 100%;
+        right: $popover-arrow-size;
+        border-bottom-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        left: $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
+      margin-bottom: $popover-arrow-size;
+
+      &:before {
+        top: 100%;
+        right: $popover-arrow-size;
+        border-top-color: $theme-bg;
+      }
+    }
+
+    // Side corners
+    &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
+      margin-right: $popover-arrow-size;
+
+      &:before {
+        top: $popover-arrow-size;
+        left: 100%;
+        border-left-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
+      margin-left: $popover-arrow-size;
+
+      &:before {
+        top: $popover-arrow-size;
+        right: 100%;
+        border-right-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
+      margin-right: $popover-arrow-size;
+
+      &:before {
+        bottom: $popover-arrow-size;
+        left: 100%;
+        border-left-color: $theme-bg;
+      }
+    }
+
+    &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
+      margin-left: $popover-arrow-size;
+
+      &:before {
+        bottom: $popover-arrow-size;
+        right: 100%;
+        border-right-color: $theme-bg;
+      }
+    }
+  }
+}
+
+@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") {
+  .#{$themePrefix}-element.#{$themePrefix}-#{$themeName} {
+    transform: translateZ(0);
+    transition: opacity 100ms;
+    opacity: 0;
+    .#{$themePrefix}-content {
+      transition: transform 0.2s $easing;
+      transform: scale(0) translateZ(0);
+    }
+    &.#{$themePrefix}-open {
+      display: none;
+    }
+    &.#{$themePrefix}-open-transitionend {
+      display: block;
+    }
+    &.#{$themePrefix}-after-open {
+      transition: none;
+      opacity: 1;
+      .#{$themePrefix}-content {
+        transform: scale(1) translateZ(0);
+      }
+    }
+    // Centers and middles
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
+      transform-origin: 50% calc(100% + #{$attachmentOffset});
+    }
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content {
+      transform-origin: 50% (-$attachmentOffset);
+    }
+    &.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
+      transform-origin: calc(100% + #{$attachmentOffset}) 50%;
+    }
+    &.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content {
+      transform-origin: -($attachmentOffset 50%);
+    }
+    // Top and bottom corners
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
+      transform-origin: 0 (-$attachmentOffset);
+    }
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content {
+      transform-origin: 100% (-$attachmentOffset);
+    }
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
+      transform-origin: 0 calc(100% + #{$attachmentOffset});
+    }
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content {
+      transform-origin: 100% calc(100% + #{$attachmentOffset});
+    }
+    // Side corners
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
+      transform-origin: calc(100% + #{$attachmentOffset}) 0;
+    }
+    &.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
+      transform-origin: (-$attachmentOffset) 0;
+    }
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content {
+      transform-origin: calc(100% + #{$attachmentOffset}) 100%;
+    }
+    &.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content {
+      transform-origin: (-$attachmentOffset) 100%;
+    }
+  }
+}
+