ux(): worked on new popover
This commit is contained in:
Torkel Ödegaard
@@ -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();
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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%; }
|
||||
|
||||
@@ -1,245 +1,307 @@
|
||||
|
||||
@mixin tether($themePrefix: "tether") {
|
||||
.#{ $themePrefix }-element, .#{ $themePrefix }-element * {
|
||||
&, &:after, &:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.#{ $themePrefix }-element {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-open {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@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));
|
||||
}
|
||||
|
||||
&: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
|
||||
|
||||
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content {
|
||||
margin-bottom: $arrowSize;
|
||||
|
||||
&: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;
|
||||
|
||||
&: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;
|
||||
|
||||
&: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;
|
||||
|
||||
&:before {
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
margin-top: - $arrowSize;
|
||||
border-right-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Target middle/center, element corner
|
||||
|
||||
&.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content {
|
||||
left: - $arrowSize * 2;
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content {
|
||||
left: $arrowSize * 2;
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
|
||||
margin-top: $arrowSize;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
left: $arrowSize;
|
||||
border-bottom-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
|
||||
margin-top: $arrowSize;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
right: $arrowSize;
|
||||
border-bottom-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
|
||||
margin-bottom: $arrowSize;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
left: $arrowSize;
|
||||
border-top-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
|
||||
margin-bottom: $arrowSize;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
right: $arrowSize;
|
||||
border-top-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Top and bottom corners
|
||||
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content {
|
||||
margin-top: $arrowSize;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
left: $arrowSize;
|
||||
border-bottom-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content {
|
||||
margin-top: $arrowSize;
|
||||
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
right: $arrowSize;
|
||||
border-bottom-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content {
|
||||
margin-bottom: $arrowSize;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
left: $arrowSize;
|
||||
border-top-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content {
|
||||
margin-bottom: $arrowSize;
|
||||
|
||||
&:before {
|
||||
top: 100%;
|
||||
right: $arrowSize;
|
||||
border-top-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
// Side corners
|
||||
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content {
|
||||
margin-right: $arrowSize;
|
||||
|
||||
&:before {
|
||||
top: $arrowSize;
|
||||
left: 100%;
|
||||
border-left-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content {
|
||||
margin-left: $arrowSize;
|
||||
|
||||
&:before {
|
||||
top: $arrowSize;
|
||||
right: 100%;
|
||||
border-right-color: $backgroundColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content {
|
||||
margin-right: $arrowSize;
|
||||
|
||||
&:before {
|
||||
bottom: $arrowSize;
|
||||
left: 100%;
|
||||
border-left-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$themePrefix: "drop";
|
||||
$themeName: "arrows-bounce-dark";
|
||||
$arrowSize: 12px;
|
||||
$backgroundColor: #000;
|
||||
$color: #fff;
|
||||
$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);
|
||||
|
||||
@include tether($themePrefix: $themePrefix);
|
||||
@include tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow);
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing)
|
||||
@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);
|
||||
|
||||
Reference in New Issue
Block a user