ux(): worked on new popover

public/app/core/components/popover/popover.ts

@@ -8,15 +8,44 @@ import Drop from 'tether-drop';
 export function popoverDirective() {
   return {
     restrict: 'E',
-    link: function(scope, elem, attrs) {
+    transclude: true,
+    link: function(scope, elem, attrs, ctrl, transclude) {
       var inputElem = elem.prev();
-      console.log(inputElem);
-      var drop = new Drop({
-        target: inputElem[0],
-        content: 'Welcome to the future!',
-        position: 'right middle',
-        classes: 'drop-theme-arrows-bounce-dark',
-        openOn: 'click'
+      if (inputElem.length === 0) {
+        console.log('Failed to find input element for popover');
+        return;
+      }
+
+
+      transclude(function(clone, newScope) {
+        var content = document.createElement("div");
+        _.each(clone, (node) => {
+          content.appendChild(node);
+        });
+
+        var drop = new Drop({
+          target: inputElem[0],
+          content: content,
+          position: 'right middle',
+          classes: 'drop-popover',
+          openOn: 'click',
+          tetherOptions: {
+            offset: "0 -10px"
+          }
+        });
+
+      // inputElem.on('focus.popover', function() {
+      //   drop.open();
+      // });
+      //
+      // inputElem.on('blur.popover', function() {
+      //   close();
+      // });
+
+        scope.$on('$destroy', function() {
+          drop.destroy();
+        });
+
       });
     }
   };

public/app/features/datasources/partials/http_settings.html

@@ -6,8 +6,17 @@
 	<div class="gf-form">
 		<span class="gf-form-label width-7">Url</span>
 		<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
-		<gf-popover style="display: none">
-			Help
+
+		<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>
 		</gf-popover>
 	</div>
 

public/sass/components/_popovers.scss

@@ -124,183 +124,5 @@
       bottom: -$popoverArrowWidth;
     }
   }
-
 }
 
-.drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before {
-  box-sizing: border-box; }
-
-.drop-element {
-  position: absolute;
-  display: none; }
-  .drop-element.drop-open {
-    display: block; }
-
-.drop-element.drop-theme-arrows-bounce-dark {
-  max-width: 100%;
-  max-height: 100%; }
-  .drop-element.drop-theme-arrows-bounce-dark .drop-content {
-    border-radius: 5px;
-    position: relative;
-    font-family: inherit;
-    background: #000;
-    color: #fff;
-    padding: 1em;
-    font-size: 1.1em;
-    line-height: 1.5em; }
-    .drop-element.drop-theme-arrows-bounce-dark .drop-content:before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-color: transparent;
-      border-width: 12px;
-      border-style: solid; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content {
-    margin-bottom: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content:before {
-      top: 100%;
-      left: 50%;
-      margin-left: -12px;
-      border-top-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content {
-    margin-top: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content:before {
-      bottom: 100%;
-      left: 50%;
-      margin-left: -12px;
-      border-bottom-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content {
-    margin-right: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content:before {
-      left: 100%;
-      top: 50%;
-      margin-top: -12px;
-      border-left-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content {
-    margin-left: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content:before {
-      right: 100%;
-      top: 50%;
-      margin-top: -12px;
-      border-right-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
-    margin-top: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before {
-      bottom: 100%;
-      left: 12px;
-      border-bottom-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
-    margin-top: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before {
-      bottom: 100%;
-      right: 12px;
-      border-bottom-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
-    margin-bottom: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before {
-      top: 100%;
-      left: 12px;
-      border-top-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
-    margin-bottom: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before {
-      top: 100%;
-      right: 12px;
-      border-top-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
-    margin-right: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before {
-      top: 12px;
-      left: 100%;
-      border-left-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
-    margin-left: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before {
-      top: 12px;
-      right: 100%;
-      border-right-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
-    margin-right: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before {
-      bottom: 12px;
-      left: 100%;
-      border-left-color: #000; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
-    margin-left: 12px; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before {
-      bottom: 12px;
-      right: 100%;
-      border-right-color: #000; }
-
-.drop-element.drop-theme-arrows-bounce-dark {
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-  -webkit-transition: opacity 100ms;
-          transition: opacity 100ms;
-  opacity: 0; }
-  .drop-element.drop-theme-arrows-bounce-dark .drop-content {
-    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.55);
-            transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.55);
-    -webkit-transform: scale(0) translateZ(0);
-            transform: scale(0) translateZ(0); }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-open {
-    display: none; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-open-transitionend {
-    display: block; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-after-open {
-    -webkit-transition: none;
-            transition: none;
-    opacity: 1; }
-    .drop-element.drop-theme-arrows-bounce-dark.drop-after-open .drop-content {
-      -webkit-transform: scale(1) translateZ(0);
-              transform: scale(1) translateZ(0); }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content {
-    -webkit-transform-origin: 50% calc(100% + 12px);
-        -ms-transform-origin: 50% calc(100% + 12px);
-            transform-origin: 50% calc(100% + 12px); }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content {
-    -webkit-transform-origin: 50% -12px;
-        -ms-transform-origin: 50% -12px;
-            transform-origin: 50% -12px; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content {
-    -webkit-transform-origin: calc(100% + 12px) 50%;
-        -ms-transform-origin: calc(100% + 12px) 50%;
-            transform-origin: calc(100% + 12px) 50%; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content {
-    -webkit-transform-origin: -12px 50%;
-        -ms-transform-origin: -12px 50%;
-            transform-origin: -12px 50%; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
-    -webkit-transform-origin: 0 -12px;
-        -ms-transform-origin: 0 -12px;
-            transform-origin: 0 -12px; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
-    -webkit-transform-origin: 100% -12px;
-        -ms-transform-origin: 100% -12px;
-            transform-origin: 100% -12px; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
-    -webkit-transform-origin: 0 calc(100% + 12px);
-        -ms-transform-origin: 0 calc(100% + 12px);
-            transform-origin: 0 calc(100% + 12px); }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
-    -webkit-transform-origin: 100% calc(100% + 12px);
-        -ms-transform-origin: 100% calc(100% + 12px);
-            transform-origin: 100% calc(100% + 12px); }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
-    -webkit-transform-origin: calc(100% + 12px) 0;
-        -ms-transform-origin: calc(100% + 12px) 0;
-            transform-origin: calc(100% + 12px) 0; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
-    -webkit-transform-origin: -12px 0;
-        -ms-transform-origin: -12px 0;
-            transform-origin: -12px 0; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
-    -webkit-transform-origin: calc(100% + 12px) 100%;
-        -ms-transform-origin: calc(100% + 12px) 100%;
-            transform-origin: calc(100% + 12px) 100%; }
-  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
-    -webkit-transform-origin: -12px 100%;
-        -ms-transform-origin: -12px 100%;
-            transform-origin: -12px 100%; }

public/sass/components/_tether_drop.scss

@@ -1,245 +1,307 @@
+$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;
 
-@mixin tether($themePrefix: "tether") {
-  .#{ $themePrefix }-element, .#{ $themePrefix }-element * {
-    &, &:after, &:before {
-      box-sizing: border-box;
+  &.drop-open {
+    display: block;
+    // hide when out of bounds
+    &.drop-out-of-bounds {
+      display: none;
     }
   }
 
-  .#{ $themePrefix }-element {
-    position: absolute;
-    display: none;
+  ul {
+    margin: 0 0 1rem 1rem;
   }
+}
 
-  &.#{ $themePrefix }-open {
-    display: block;
-  }
+.drop-element, .drop-element * {
+  box-sizing: border-box;
 }
 
-@mixin tether-theme-arrows($themePrefix: "tether", $themeName: "arrows", $arrowSize: 16px, $arrowPointerEvents: null, $backgroundColor: #fff, $color: inherit, $useDropShadow: false) {
-  .#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName } {
-    max-width: 100%;
-    max-height: 100%;
-
-    .#{ $themePrefix }-content {
-      border-radius: 5px;
-      position: relative;
-      font-family: inherit;
-      background: $backgroundColor;
-      color: $color;
-      padding: 1em;
-      font-size: 1.1em;
-      line-height: 1.5em;
-
-      @if $useDropShadow {
-        transform: translateZ(0);
-        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2));
-      }
+.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;
-      }
+    &: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
+  // Centers and middles
 
-    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content {
-      margin-bottom: $arrowSize;
+  &.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;
-      }
+    &:before {
+      top: 100%;
+      left: 50%;
+      margin-left: - $arrowSize;
+      border-top-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content {
-      margin-top: $arrowSize;
+  &.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;
-      }
+    &:before {
+      bottom: 100%;
+      left: 50%;
+      margin-left: - $arrowSize;
+      border-bottom-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content {
-      margin-right: $arrowSize;
+  &.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;
-      }
+    &:before {
+      left: 100%;
+      top: 50%;
+      margin-top: - $arrowSize;
+      border-left-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content {
-      margin-left: $arrowSize;
+  &.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;
-      }
+    &:before {
+      right: 100%;
+      top: 50%;
+      margin-top: - $arrowSize;
+      border-right-color: $backgroundColor;
     }
+  }
 
-    // Target middle/center, element corner
+  // Target middle/center, element corner
+  &.drop-element-attached-left.drop-target-attached-center .drop-content {
+    left: - $arrowSize * 2;
+  }
 
-    &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-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;
 
-    &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content {
-      left: $arrowSize * 2;
+    &:before {
+      bottom: 100%;
+      left: $arrowSize;
+      border-bottom-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
-      margin-top: $arrowSize;
+  &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
+    margin-top: $arrowSize;
 
-      &:before {
-        bottom: 100%;
-        left: $arrowSize;
-        border-bottom-color: $backgroundColor;
-      }
+    &:before {
+      bottom: 100%;
+      right: $arrowSize;
+      border-bottom-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
-      margin-top: $arrowSize;
+  &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
+    margin-bottom: $arrowSize;
 
-      &:before {
-        bottom: 100%;
-        right: $arrowSize;
-        border-bottom-color: $backgroundColor;
-      }
+    &:before {
+      top: 100%;
+      left: $arrowSize;
+      border-top-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
-      margin-bottom: $arrowSize;
+  &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
+    margin-bottom: $arrowSize;
 
-      &:before {
-        top: 100%;
-        left: $arrowSize;
-        border-top-color: $backgroundColor;
-      }
+    &:before {
+      top: 100%;
+      right: $arrowSize;
+      border-top-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
-      margin-bottom: $arrowSize;
+  // Top and bottom corners
+  &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
+    margin-top: $arrowSize;
 
-      &:before {
-        top: 100%;
-        right: $arrowSize;
-        border-top-color: $backgroundColor;
-      }
+    &:before {
+      bottom: 100%;
+      left: $arrowSize;
+      border-bottom-color: $backgroundColor;
     }
+  }
 
-    // Top and bottom corners
-    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content {
-      margin-top: $arrowSize;
+  &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
+    margin-top: $arrowSize;
 
-      &:before {
-        bottom: 100%;
-        left: $arrowSize;
-        border-bottom-color: $backgroundColor;
-      }
+    &:before {
+      bottom: 100%;
+      right: $arrowSize;
+      border-bottom-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content {
-      margin-top: $arrowSize;
+  &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
+    margin-bottom: $arrowSize;
 
-      &:before {
-        bottom: 100%;
-        right: $arrowSize;
-        border-bottom-color: $backgroundColor;
-      }
+    &:before {
+      top: 100%;
+      left: $arrowSize;
+      border-top-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content {
-      margin-bottom: $arrowSize;
+  &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
+    margin-bottom: $arrowSize;
 
-      &:before {
-        top: 100%;
-        left: $arrowSize;
-        border-top-color: $backgroundColor;
-      }
+    &:before {
+      top: 100%;
+      right: $arrowSize;
+      border-top-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content {
-      margin-bottom: $arrowSize;
+  // Side corners
+  &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
+    margin-right: $arrowSize;
 
-      &:before {
-        top: 100%;
-        right: $arrowSize;
-        border-top-color: $backgroundColor;
-      }
+    &:before {
+      top: $arrowSize;
+      left: 100%;
+      border-left-color: $backgroundColor;
     }
+  }
 
-    // Side corners
-    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content {
-      margin-right: $arrowSize;
+  &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
+    margin-left: $arrowSize;
 
-      &:before {
-        top: $arrowSize;
-        left: 100%;
-        border-left-color: $backgroundColor;
-      }
+    &:before {
+      top: $arrowSize;
+      right: 100%;
+      border-right-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content {
-      margin-left: $arrowSize;
+  &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
+    margin-right: $arrowSize;
 
-      &:before {
-        top: $arrowSize;
-        right: 100%;
-        border-right-color: $backgroundColor;
-      }
+    &:before {
+      bottom: $arrowSize;
+      left: 100%;
+      border-left-color: $backgroundColor;
     }
+  }
 
-    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content {
-      margin-right: $arrowSize;
+  &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
+    margin-left: $arrowSize;
 
-      &:before {
-        bottom: $arrowSize;
-        left: 100%;
-        border-left-color: $backgroundColor;
-      }
+    &:before {
+      bottom: $arrowSize;
+      right: 100%;
+      border-right-color: $backgroundColor;
     }
+  }
+}
 
-    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-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%;
+    }
   }
 }
 
-$themePrefix: "drop";
-$themeName: "arrows-bounce-dark";
-$arrowSize: 12px;
-$backgroundColor: #000;
-$color: #fff;
-$useDropShadow: false;
-$attachmentOffset: $arrowSize;
-$easing: cubic-bezier(0, 0, 0.265, 1.55);
-
-@include tether($themePrefix: $themePrefix);
-@include tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow);
-
-
-// +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing)
+@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);