Skip to content

N
nexpie-grafana-theme
Commit b98c826e by Torkel Ödegaard
Options

ux(): worked on new popover

parent a93fe5b2
Showing with 155 additions and 233 deletions
public/app/core/components/popover/popover.ts
...@@ -8,15 +8,44 @@ import Drop from 'tether-drop'; ...@@ -8,15 +8,44 @@ import Drop from 'tether-drop';
export function popoverDirective() { export function popoverDirective() {
return { return {
restrict: 'E', restrict: 'E',
link: function(scope, elem, attrs) { transclude: true,
link: function(scope, elem, attrs, ctrl, transclude) {
var inputElem = elem.prev(); var inputElem = elem.prev();
console.log(inputElem); 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({ var drop = new Drop({
target: inputElem[0], target: inputElem[0],
content: 'Welcome to the future!', content: content,
position: 'right middle', position: 'right middle',
classes: 'drop-theme-arrows-bounce-dark', classes: 'drop-popover',
openOn: 'click' 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 @@ ...@@ -6,8 +6,17 @@
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Url</span> <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> <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> </gf-popover>
</div> </div>
......
public/sass/components/_popovers.scss
...@@ -124,183 +124,5 @@ ...@@ -124,183 +124,5 @@
bottom: -$popoverArrowWidth; 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
$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);
@mixin tether($themePrefix: "tether") { .drop-element {
.#{ $themePrefix }-element, .#{ $themePrefix }-element * {
&, &:after, &:before {
box-sizing: border-box;
}
}
.#{ $themePrefix }-element {
position: absolute; position: absolute;
display: none; display: none;
}
&.#{ $themePrefix }-open { &.drop-open {
display: block; display: block;
// hide when out of bounds
&.drop-out-of-bounds {
display: none;
}
}
ul {
margin: 0 0 1rem 1rem;
} }
} }
@mixin tether-theme-arrows($themePrefix: "tether", $themeName: "arrows", $arrowSize: 16px, $arrowPointerEvents: null, $backgroundColor: #fff, $color: inherit, $useDropShadow: false) { .drop-element, .drop-element * {
.#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName } { box-sizing: border-box;
}
.drop-element.drop-popover {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
.#{ $themePrefix }-content { .drop-content {
border-radius: 5px; border-radius: $border-radius-lg;
position: relative; position: relative;
font-family: inherit; font-family: inherit;
background: $backgroundColor; background: $backgroundColor;
color: $color; color: $color;
padding: 1em; padding: 1em;
font-size: 1.1em; font-size: $font-size-sm;
line-height: 1.5em; max-width: 20rem;
@if $useDropShadow { @if $useDropShadow {
transform: translateZ(0); transform: translateZ(0);
...@@ -51,7 +63,7 @@ ...@@ -51,7 +63,7 @@
// Centers and middles // Centers and middles
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content { &.drop-element-attached-bottom.drop-element-attached-center .drop-content {
margin-bottom: $arrowSize; margin-bottom: $arrowSize;
&:before { &:before {
...@@ -62,7 +74,7 @@ ...@@ -62,7 +74,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content { &.drop-element-attached-top.drop-element-attached-center .drop-content {
margin-top: $arrowSize; margin-top: $arrowSize;
&:before { &:before {
...@@ -73,7 +85,7 @@ ...@@ -73,7 +85,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content { &.drop-element-attached-right.drop-element-attached-middle .drop-content {
margin-right: $arrowSize; margin-right: $arrowSize;
&:before { &:before {
...@@ -84,7 +96,7 @@ ...@@ -84,7 +96,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content { &.drop-element-attached-left.drop-element-attached-middle .drop-content {
margin-left: $arrowSize; margin-left: $arrowSize;
&:before { &:before {
...@@ -96,16 +108,15 @@ ...@@ -96,16 +108,15 @@
} }
// Target middle/center, element corner // Target middle/center, element corner
&.drop-element-attached-left.drop-target-attached-center .drop-content {
&.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content {
left: - $arrowSize * 2; left: - $arrowSize * 2;
} }
&.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content { &.drop-element-attached-right.drop-target-attached-center .drop-content {
left: $arrowSize * 2; left: $arrowSize * 2;
} }
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content {
margin-top: $arrowSize; margin-top: $arrowSize;
&:before { &:before {
...@@ -115,7 +126,7 @@ ...@@ -115,7 +126,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content {
margin-top: $arrowSize; margin-top: $arrowSize;
&:before { &:before {
...@@ -125,7 +136,7 @@ ...@@ -125,7 +136,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content {
margin-bottom: $arrowSize; margin-bottom: $arrowSize;
&:before { &:before {
...@@ -135,7 +146,7 @@ ...@@ -135,7 +146,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content { &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content {
margin-bottom: $arrowSize; margin-bottom: $arrowSize;
&:before { &:before {
...@@ -146,7 +157,7 @@ ...@@ -146,7 +157,7 @@
} }
// Top and bottom corners // Top and bottom corners
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content { &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
margin-top: $arrowSize; margin-top: $arrowSize;
&:before { &:before {
...@@ -156,7 +167,7 @@ ...@@ -156,7 +167,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content { &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
margin-top: $arrowSize; margin-top: $arrowSize;
&:before { &:before {
...@@ -166,7 +177,7 @@ ...@@ -166,7 +177,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content { &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
margin-bottom: $arrowSize; margin-bottom: $arrowSize;
&:before { &:before {
...@@ -176,7 +187,7 @@ ...@@ -176,7 +187,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content { &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
margin-bottom: $arrowSize; margin-bottom: $arrowSize;
&:before { &:before {
...@@ -187,7 +198,7 @@ ...@@ -187,7 +198,7 @@
} }
// Side corners // Side corners
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content { &.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
margin-right: $arrowSize; margin-right: $arrowSize;
&:before { &:before {
...@@ -197,7 +208,7 @@ ...@@ -197,7 +208,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content { &.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
margin-left: $arrowSize; margin-left: $arrowSize;
&:before { &:before {
...@@ -207,7 +218,7 @@ ...@@ -207,7 +218,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content { &.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
margin-right: $arrowSize; margin-right: $arrowSize;
&:before { &:before {
...@@ -217,7 +228,7 @@ ...@@ -217,7 +228,7 @@
} }
} }
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content { &.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
margin-left: $arrowSize; margin-left: $arrowSize;
&:before { &:before {
...@@ -226,20 +237,71 @@ ...@@ -226,20 +237,71 @@
border-right-color: $backgroundColor; border-right-color: $backgroundColor;
} }
} }
}
} }
$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);
@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%;
}
}
}
// +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing) @include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment