From f6c4b2f2239a19e8cd60edc51b3cbe594846dcd6 Mon Sep 17 00:00:00 2001 From: thomasbengtsson Date: Tue, 1 Mar 2016 15:30:19 +0100 Subject: [PATCH] Clearing timeouts upon destroy --- dist/css/drop-theme-arrows-bounce-dark.css | 40 +++++++++++++------ .../css/drop-theme-arrows-bounce-dark.min.css | 2 +- dist/css/drop-theme-arrows-bounce.css | 40 +++++++++++++------ dist/css/drop-theme-arrows-bounce.min.css | 2 +- dist/css/drop-theme-arrows.css | 28 +++++++++++++ dist/css/drop-theme-arrows.min.css | 2 +- dist/css/drop-theme-hubspot-popovers.css | 28 +++++++++++++ dist/css/drop-theme-hubspot-popovers.min.css | 2 +- dist/css/drop-theme-twipsy.css | 28 +++++++++++++ dist/css/drop-theme-twipsy.min.css | 2 +- dist/js/drop.js | 2 +- dist/js/drop.min.js | 2 +- src/js/drop.js | 27 ++++++++----- 13 files changed, 164 insertions(+), 41 deletions(-) diff --git a/dist/css/drop-theme-arrows-bounce-dark.css b/dist/css/drop-theme-arrows-bounce-dark.css index 3259251..e72579a 100644 --- a/dist/css/drop-theme-arrows-bounce-dark.css +++ b/dist/css/drop-theme-arrows-bounce-dark.css @@ -56,6 +56,34 @@ top: 50%; margin-top: -12px; border-right-color: #000; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-target-attached-center .drop-content { + left: -24px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-target-attached-center .drop-content { + left: 24px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .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-middle .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .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-middle .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .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-middle .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .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-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 { @@ -129,49 +157,37 @@ 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%; } diff --git a/dist/css/drop-theme-arrows-bounce-dark.min.css b/dist/css/drop-theme-arrows-bounce-dark.min.css index 90b386e..16627f6 100644 --- a/dist/css/drop-theme-arrows-bounce-dark.min.css +++ b/dist/css/drop-theme-arrows-bounce-dark.min.css @@ -1 +1 @@ -.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.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%;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .1s;transition:opacity .1s;opacity:0}.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;-webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.265,1.55);transition:transform .3s cubic-bezier(0,0,.265,1.55);-webkit-transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}.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: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: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: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: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: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: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: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: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: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: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:before{bottom:12px;right:100%;border-right-color:#000}.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{margin-bottom:12px;-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{margin-right:12px;-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{margin-left:12px;-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{margin-top:12px;-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{margin-top:12px;-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{margin-bottom:12px;-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{margin-bottom:12px;-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{margin-right:12px;-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{margin-left:12px;-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{margin-right:12px;-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{margin-left:12px;-webkit-transform-origin:-12px 100%;-ms-transform-origin:-12px 100%;transform-origin:-12px 100%} \ No newline at end of file +.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.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%;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .1s;transition:opacity .1s;opacity:0}.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;-webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.265,1.55);transition:transform .3s cubic-bezier(0,0,.265,1.55);-webkit-transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}.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: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: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:before{right:100%;top:50%;margin-top:-12px;border-right-color:#000}.drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-target-attached-center .drop-content{left:-24px}.drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-target-attached-center .drop-content{left:24px}.drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content{margin-top:12px}.drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .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-middle .drop-content{margin-top:12px}.drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .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-middle .drop-content{margin-bottom:12px}.drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .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-middle .drop-content{margin-bottom:12px}.drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .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-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: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: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: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: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: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: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:before{bottom:12px;right:100%;border-right-color:#000}.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{margin-bottom:12px;-webkit-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;transform-origin:50% -12px}.drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content{margin-right:12px;-webkit-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{margin-left:12px;-webkit-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{margin-top:12px;-webkit-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{margin-top:12px;-webkit-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{margin-bottom:12px;-webkit-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{margin-bottom:12px;-webkit-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{margin-right:12px;-webkit-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{margin-left:12px;-webkit-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{margin-right:12px;-webkit-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{margin-left:12px;-webkit-transform-origin:-12px 100%;transform-origin:-12px 100%} \ No newline at end of file diff --git a/dist/css/drop-theme-arrows-bounce.css b/dist/css/drop-theme-arrows-bounce.css index 0c75406..33c6c29 100644 --- a/dist/css/drop-theme-arrows-bounce.css +++ b/dist/css/drop-theme-arrows-bounce.css @@ -60,6 +60,34 @@ top: 50%; margin-top: -12px; border-right-color: #fff; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-target-attached-center .drop-content { + left: -24px; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-target-attached-center .drop-content { + left: 24px; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content:before { + bottom: 100%; + left: 12px; + border-bottom-color: #fff; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-top: 12px; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content:before { + bottom: 100%; + right: 12px; + border-bottom-color: #fff; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content:before { + top: 100%; + left: 12px; + border-top-color: #fff; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-bottom: 12px; } + .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content:before { + top: 100%; + right: 12px; + border-top-color: #fff; } .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { margin-top: 12px; } .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { @@ -133,49 +161,37 @@ transform: scale(1) translateZ(0); } .drop-element.drop-theme-arrows-bounce.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.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.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.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.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.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.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.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.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.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.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.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%; } diff --git a/dist/css/drop-theme-arrows-bounce.min.css b/dist/css/drop-theme-arrows-bounce.min.css index 136a0b1..887a077 100644 --- a/dist/css/drop-theme-arrows-bounce.min.css +++ b/dist/css/drop-theme-arrows-bounce.min.css @@ -1 +1 @@ -.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.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 .drop-content{border-radius:5px;position:relative;font-family:inherit;background:#fff;color:#444;padding:1em;font-size:1.1em;line-height:1.5em;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2));filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2))}.drop-element.drop-theme-arrows-bounce .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.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-12px;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-12px;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:12px;left:100%;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:12px;right:100%;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:12px;left:100%;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:12px;right:100%;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce{max-width:100%;max-height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .1s;transition:opacity .1s;opacity:0}.drop-element.drop-theme-arrows-bounce .drop-content{-webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.265,1.55);transition:transform .3s cubic-bezier(0,0,.265,1.55);-webkit-transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}.drop-element.drop-theme-arrows-bounce.drop-open{display:none}.drop-element.drop-theme-arrows-bounce.drop-open-transitionend{display:block}.drop-element.drop-theme-arrows-bounce.drop-after-open{-webkit-transition:none;transition:none;opacity:1}.drop-element.drop-theme-arrows-bounce.drop-after-open .drop-content{-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-center .drop-content{margin-bottom:12px;-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.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.drop-element-attached-right.drop-element-attached-middle .drop-content{margin-right:12px;-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.drop-element-attached-left.drop-element-attached-middle .drop-content{margin-left:12px;-webkit-transform-origin:-12px 50%;-ms-transform-origin:-12px 50%;transform-origin:-12px 50%}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content{margin-top:12px;-webkit-transform-origin:0 -12px;-ms-transform-origin:0 -12px;transform-origin:0 -12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content{margin-top:12px;-webkit-transform-origin:100% -12px;-ms-transform-origin:100% -12px;transform-origin:100% -12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content{margin-bottom:12px;-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.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:12px;-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.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:12px;-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.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:12px;-webkit-transform-origin:-12px 0;-ms-transform-origin:-12px 0;transform-origin:-12px 0}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:12px;-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.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:12px;-webkit-transform-origin:-12px 100%;-ms-transform-origin:-12px 100%;transform-origin:-12px 100%} \ No newline at end of file +.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.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 .drop-content{border-radius:5px;position:relative;font-family:inherit;background:#fff;color:#444;padding:1em;font-size:1.1em;line-height:1.5em;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2));filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2))}.drop-element.drop-theme-arrows-bounce .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.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-12px;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-12px;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-target-attached-center .drop-content{left:-24px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-target-attached-center .drop-content{left:24px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content{margin-top:12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content:before{bottom:100%;left:12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content{margin-top:12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content:before{bottom:100%;right:12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content{margin-bottom:12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content:before{top:100%;left:12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content{margin-bottom:12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content:before{top:100%;right:12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:12px;border-bottom-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:12px;border-top-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:12px;left:100%;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:12px;right:100%;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:12px;left:100%;border-left-color:#fff}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:12px;right:100%;border-right-color:#fff}.drop-element.drop-theme-arrows-bounce{max-width:100%;max-height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-transition:opacity .1s;transition:opacity .1s;opacity:0}.drop-element.drop-theme-arrows-bounce .drop-content{-webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.265,1.55);transition:transform .3s cubic-bezier(0,0,.265,1.55);-webkit-transform:scale(0) translateZ(0);transform:scale(0) translateZ(0)}.drop-element.drop-theme-arrows-bounce.drop-open{display:none}.drop-element.drop-theme-arrows-bounce.drop-open-transitionend{display:block}.drop-element.drop-theme-arrows-bounce.drop-after-open{-webkit-transition:none;transition:none;opacity:1}.drop-element.drop-theme-arrows-bounce.drop-after-open .drop-content{-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-center .drop-content{margin-bottom:12px;-webkit-transform-origin:50% calc(100% + 12px);transform-origin:50% calc(100% + 12px)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content{-webkit-transform-origin:50% -12px;transform-origin:50% -12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-element-attached-middle .drop-content{margin-right:12px;-webkit-transform-origin:calc(100% + 12px) 50%;transform-origin:calc(100% + 12px) 50%}.drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-element-attached-middle .drop-content{margin-left:12px;-webkit-transform-origin:-12px 50%;transform-origin:-12px 50%}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content{margin-top:12px;-webkit-transform-origin:0 -12px;transform-origin:0 -12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content{margin-top:12px;-webkit-transform-origin:100% -12px;transform-origin:100% -12px}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content{margin-bottom:12px;-webkit-transform-origin:0 calc(100% + 12px);transform-origin:0 calc(100% + 12px)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:12px;-webkit-transform-origin:100% calc(100% + 12px);transform-origin:100% calc(100% + 12px)}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:12px;-webkit-transform-origin:calc(100% + 12px) 0;transform-origin:calc(100% + 12px) 0}.drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:12px;-webkit-transform-origin:-12px 0;transform-origin:-12px 0}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:12px;-webkit-transform-origin:calc(100% + 12px) 100%;transform-origin:calc(100% + 12px) 100%}.drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:12px;-webkit-transform-origin:-12px 100%;transform-origin:-12px 100%} \ No newline at end of file diff --git a/dist/css/drop-theme-arrows.css b/dist/css/drop-theme-arrows.css index 3dc5789..b342877 100644 --- a/dist/css/drop-theme-arrows.css +++ b/dist/css/drop-theme-arrows.css @@ -60,6 +60,34 @@ top: 50%; margin-top: -16px; border-right-color: #eee; } + .drop-element.drop-theme-arrows.drop-element-attached-left.drop-target-attached-center .drop-content { + left: -32px; } + .drop-element.drop-theme-arrows.drop-element-attached-right.drop-target-attached-center .drop-content { + left: 32px; } + .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-top: 16px; } + .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content:before { + bottom: 100%; + left: 16px; + border-bottom-color: #eee; } + .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-top: 16px; } + .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content:before { + bottom: 100%; + right: 16px; + border-bottom-color: #eee; } + .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-bottom: 16px; } + .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content:before { + top: 100%; + left: 16px; + border-top-color: #eee; } + .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-bottom: 16px; } + .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content:before { + top: 100%; + right: 16px; + border-top-color: #eee; } .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { margin-top: 16px; } .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { diff --git a/dist/css/drop-theme-arrows.min.css b/dist/css/drop-theme-arrows.min.css index be98045..f30d5d9 100644 --- a/dist/css/drop-theme-arrows.min.css +++ b/dist/css/drop-theme-arrows.min.css @@ -1 +1 @@ -.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:16px}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:16px}.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.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{max-width:100%;max-height:100%}.drop-element.drop-theme-arrows .drop-content{border-radius:5px;position:relative;font-family:inherit;background:#eee;color:#444;padding:1em;font-size:1.1em;line-height:1.5em;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2));filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2))}.drop-element.drop-theme-arrows .drop-content:before{content:"";display:block;position:absolute;width:0;height:0;border-color:transparent;border-width:16px;border-style:solid}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:16px}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:16px}.drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-16px;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-16px;border-right-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content{margin-top:16px}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:16px;left:100%;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:16px;right:100%;border-right-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:16px;left:100%;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:16px;right:100%;border-right-color:#eee} \ No newline at end of file +.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:16px}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:16px}.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.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{max-width:100%;max-height:100%}.drop-element.drop-theme-arrows .drop-content{border-radius:5px;position:relative;font-family:inherit;background:#eee;color:#444;padding:1em;font-size:1.1em;line-height:1.5em;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2));filter:drop-shadow(0 1px 4px rgba(0, 0, 0, .2))}.drop-element.drop-theme-arrows .drop-content:before{content:"";display:block;position:absolute;width:0;height:0;border-color:transparent;border-width:16px;border-style:solid}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:16px}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:16px}.drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-16px;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-16px;border-right-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content{margin-top:16px}.drop-element.drop-theme-arrows.drop-element-attached-left.drop-target-attached-center .drop-content{left:-32px}.drop-element.drop-theme-arrows.drop-element-attached-right.drop-target-attached-center .drop-content{left:32px}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content:before{bottom:100%;left:16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content:before{bottom:100%;right:16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content:before{top:100%;left:16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content:before{top:100%;right:16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:16px;border-bottom-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:16px;border-top-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:16px;left:100%;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:16px;right:100%;border-right-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:16px;left:100%;border-left-color:#eee}.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:16px;right:100%;border-right-color:#eee} \ No newline at end of file diff --git a/dist/css/drop-theme-hubspot-popovers.css b/dist/css/drop-theme-hubspot-popovers.css index 8767cf3..98ce4d2 100644 --- a/dist/css/drop-theme-hubspot-popovers.css +++ b/dist/css/drop-theme-hubspot-popovers.css @@ -56,6 +56,34 @@ top: 50%; margin-top: -10px; border-right-color: #ebebeb; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-target-attached-center .drop-content { + left: -20px; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-right.drop-target-attached-center .drop-content { + left: 20px; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-top: 10px; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content:before { + bottom: 100%; + left: 10px; + border-bottom-color: #ebebeb; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-top: 10px; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content:before { + bottom: 100%; + right: 10px; + border-bottom-color: #ebebeb; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-bottom: 10px; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content:before { + top: 100%; + left: 10px; + border-top-color: #ebebeb; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-bottom: 10px; } + .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content:before { + top: 100%; + right: 10px; + border-top-color: #ebebeb; } .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { margin-top: 10px; } .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { diff --git a/dist/css/drop-theme-hubspot-popovers.min.css b/dist/css/drop-theme-hubspot-popovers.min.css index 2ca9da9..f360a8e 100644 --- a/dist/css/drop-theme-hubspot-popovers.min.css +++ b/dist/css/drop-theme-hubspot-popovers.min.css @@ -1 +1 @@ -.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-center .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:10px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-right.drop-element-attached-middle .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:10px}.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.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-hubspot-popovers{max-width:100%;max-height:100%}.drop-element.drop-theme-hubspot-popovers .drop-content{position:relative;background:#ebebeb;color:#444;line-height:1.5em;box-shadow:0 3px 7px rgba(0,0,0,.2);border-radius:2px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px;font-size:13px}.drop-element.drop-theme-hubspot-popovers .drop-content:before{content:"";display:block;position:absolute;width:0;height:0;border-color:transparent;border-width:10px;border-style:solid}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-10px;border-top-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:10px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-10px;border-bottom-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-element-attached-middle .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:10px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-10px;border-left-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-10px;border-right-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content{margin-top:10px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:10px;border-bottom-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:10px;border-bottom-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:10px;border-top-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:10px;border-top-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:10px;left:100%;border-left-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:10px;right:100%;border-right-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:10px;left:100%;border-left-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:10px;right:100%;border-right-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner{border:1px solid #dbdbdb;padding:14px;background:#fff;overflow:hidden;width:280px}.drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner .title{font-size:18px;margin-top:0;margin-bottom:12px;font-weight:400;line-height:1}.drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner p:last-child{margin-bottom:0} \ No newline at end of file +.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-center .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:10px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-right.drop-element-attached-middle .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:10px}.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.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-hubspot-popovers{max-width:100%;max-height:100%}.drop-element.drop-theme-hubspot-popovers .drop-content{position:relative;background:#ebebeb;color:#444;line-height:1.5em;box-shadow:0 3px 7px rgba(0,0,0,.2);border-radius:2px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px;font-size:13px}.drop-element.drop-theme-hubspot-popovers .drop-content:before{content:"";display:block;position:absolute;width:0;height:0;border-color:transparent;border-width:10px;border-style:solid}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-10px;border-top-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:10px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-10px;border-bottom-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-element-attached-middle .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:10px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-10px;border-left-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-10px;border-right-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content{margin-top:10px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-target-attached-center .drop-content{left:-20px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-right.drop-target-attached-center .drop-content{left:20px}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content:before{bottom:100%;left:10px;border-bottom-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content:before{bottom:100%;right:10px;border-bottom-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content:before{top:100%;left:10px;border-top-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content:before{top:100%;right:10px;border-top-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:10px;border-bottom-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:10px;border-bottom-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:10px;border-top-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:10px;border-top-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:10px;left:100%;border-left-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:10px;right:100%;border-right-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:10px;left:100%;border-left-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:10px;right:100%;border-right-color:#ebebeb}.drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner{border:1px solid #dbdbdb;padding:14px;background:#fff;overflow:hidden;width:280px}.drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner .title{font-size:18px;margin-top:0;margin-bottom:12px;font-weight:400;line-height:1}.drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner p:last-child{margin-bottom:0} \ No newline at end of file diff --git a/dist/css/drop-theme-twipsy.css b/dist/css/drop-theme-twipsy.css index 6a932bb..7f66e4a 100644 --- a/dist/css/drop-theme-twipsy.css +++ b/dist/css/drop-theme-twipsy.css @@ -56,6 +56,34 @@ top: 50%; margin-top: -10px; border-right-color: #414141; } + .drop-element.drop-theme-twipsy.drop-element-attached-left.drop-target-attached-center .drop-content { + left: -20px; } + .drop-element.drop-theme-twipsy.drop-element-attached-right.drop-target-attached-center .drop-content { + left: 20px; } + .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-top: 10px; } + .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content:before { + bottom: 100%; + left: 10px; + border-bottom-color: #414141; } + .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-top: 10px; } + .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content:before { + bottom: 100%; + right: 10px; + border-bottom-color: #414141; } + .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { + margin-bottom: 10px; } + .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content:before { + top: 100%; + left: 10px; + border-top-color: #414141; } + .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { + margin-bottom: 10px; } + .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content:before { + top: 100%; + right: 10px; + border-top-color: #414141; } .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { margin-top: 10px; } .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { diff --git a/dist/css/drop-theme-twipsy.min.css b/dist/css/drop-theme-twipsy.min.css index e2195aa..9deca24 100644 --- a/dist/css/drop-theme-twipsy.min.css +++ b/dist/css/drop-theme-twipsy.min.css @@ -1 +1 @@ -.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-center .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:10px}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-right.drop-element-attached-middle .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:10px}.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.drop-element:after,.drop-element:before{box-sizing:border-box}.drop-element{position:absolute;display:none}.drop-element.drop-open,.drop-element.drop-theme-twipsy.drop-open-transitionend{display:block}.drop-element.drop-theme-twipsy{max-width:100%;max-height:100%;opacity:0;-webkit-transition:opacity 150ms;transition:opacity 150ms}.drop-element.drop-theme-twipsy .drop-content{position:relative;background:#414141;color:#fff;box-shadow:0 3px 7px rgba(0,0,0,.2);border-radius:2px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px 8px;line-height:18px;font-size:11px}.drop-element.drop-theme-twipsy .drop-content:before{content:"";display:block;position:absolute;width:0;height:0;border-color:transparent;border-width:10px;border-style:solid}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-10px;border-top-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:10px}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-10px;border-bottom-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-left.drop-element-attached-middle .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:10px}.drop-element.drop-theme-twipsy.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-10px;border-left-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-10px;border-right-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content{margin-top:10px}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:10px;border-bottom-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:10px;border-bottom-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:10px;border-top-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:10px;border-top-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:10px;left:100%;border-left-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:10px;right:100%;border-right-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:10px;left:100%;border-left-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:10px;right:100%;border-right-color:#414141}.drop-element.drop-theme-twipsy.drop-after-open{opacity:1} \ No newline at end of file +.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-center .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content{margin-bottom:10px}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-right.drop-element-attached-middle .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content{margin-right:10px}.drop-element,.drop-element *,.drop-element :after,.drop-element :before,.drop-element:after,.drop-element:before{box-sizing:border-box}.drop-element{position:absolute;display:none}.drop-element.drop-open,.drop-element.drop-theme-twipsy.drop-open-transitionend{display:block}.drop-element.drop-theme-twipsy{max-width:100%;max-height:100%;opacity:0;-webkit-transition:opacity 150ms;transition:opacity 150ms}.drop-element.drop-theme-twipsy .drop-content{position:relative;background:#414141;color:#fff;box-shadow:0 3px 7px rgba(0,0,0,.2);border-radius:2px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;padding:3px 8px;line-height:18px;font-size:11px}.drop-element.drop-theme-twipsy .drop-content:before{content:"";display:block;position:absolute;width:0;height:0;border-color:transparent;border-width:10px;border-style:solid}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-center .drop-content:before{top:100%;left:50%;margin-left:-10px;border-top-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-center .drop-content{margin-top:10px}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-center .drop-content:before{bottom:100%;left:50%;margin-left:-10px;border-bottom-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-left.drop-element-attached-middle .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content{margin-left:10px}.drop-element.drop-theme-twipsy.drop-element-attached-right.drop-element-attached-middle .drop-content:before{left:100%;top:50%;margin-top:-10px;border-left-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-left.drop-element-attached-middle .drop-content:before{right:100%;top:50%;margin-top:-10px;border-right-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content,.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content{margin-top:10px}.drop-element.drop-theme-twipsy.drop-element-attached-left.drop-target-attached-center .drop-content{left:-20px}.drop-element.drop-theme-twipsy.drop-element-attached-right.drop-target-attached-center .drop-content{left:20px}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content:before{bottom:100%;left:10px;border-bottom-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content:before{bottom:100%;right:10px;border-bottom-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content:before{top:100%;left:10px;border-top-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content:before{top:100%;right:10px;border-top-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before{bottom:100%;left:10px;border-bottom-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before{bottom:100%;right:10px;border-bottom-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before{top:100%;left:10px;border-top-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before{top:100%;right:10px;border-top-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before{top:10px;left:100%;border-left-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before{top:10px;right:100%;border-right-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before{bottom:10px;left:100%;border-left-color:#414141}.drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before{bottom:10px;right:100%;border-right-color:#414141}.drop-element.drop-theme-twipsy.drop-after-open{opacity:1} \ No newline at end of file diff --git a/dist/js/drop.js b/dist/js/drop.js index fb20a2d..209cde7 100644 --- a/dist/js/drop.js +++ b/dist/js/drop.js @@ -1,4 +1,4 @@ -/*! tether-drop 1.4.1 */ +/*! tether-drop 1.4.2 */ (function(root, factory) { if (typeof define === 'function' && define.amd) { diff --git a/dist/js/drop.min.js b/dist/js/drop.min.js index 1eb6ce6..e825806 100644 --- a/dist/js/drop.min.js +++ b/dist/js/drop.min.js @@ -1 +1 @@ -!function(t,e){"function"==typeof define&&define.amd?define(["tether"],e):"object"==typeof exports?module.exports=e(require("tether")):t.Drop=e(t.Tether)}(this,function(t){"use strict";function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function o(t){var e=t.split(" "),n=a(e,2),o=n[0],i=n[1];if(["left","right"].indexOf(o)>=0){var s=[i,o];o=s[0],i=s[1]}return[o,i].join(" ")}function i(t,e){for(var n=void 0,o=[];-1!==(n=t.indexOf(e));)o.push(t.splice(n,1));return o}function s(){var a=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],h=function(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];return new(r.apply(b,[null].concat(e)))};p(h,{createContext:s,drops:[],defaults:{}});var g={classPrefix:"drop",defaults:{position:"bottom left",openOn:"click",beforeClose:null,constrainToScrollParent:!0,constrainToWindow:!0,classes:"",remove:!1,openDelay:0,closeDelay:50,focusDelay:null,blurDelay:null,hoverOpenDelay:null,hoverCloseDelay:null,tetherOptions:{}}};p(h,g,a),p(h.defaults,g.defaults,a.defaults),"undefined"==typeof x[h.classPrefix]&&(x[h.classPrefix]=[]),h.updateBodyClasses=function(){for(var t=!1,e=x[h.classPrefix],n=e.length,o=0;n>o;++o)if(e[o].isOpened()){t=!0;break}t?d(document.body,h.classPrefix+"-open"):c(document.body,h.classPrefix+"-open")};var b=function(s){function r(t){if(e(this,r),u(Object.getPrototypeOf(r.prototype),"constructor",this).call(this),this.options=p({},h.defaults,t),this.target=this.options.target,"undefined"==typeof this.target)throw new Error("Drop Error: You must provide a target.");var n="data-"+h.classPrefix,o=this.target.getAttribute(n);o&&null==this.options.content&&(this.options.content=o);for(var i=["position","openOn"],s=0;s=0)for(var n=function(e){t.toggle(e),e.preventDefault()},o=function(e){t.isOpened()&&(e.target===t.drop||t.drop.contains(e.target)||e.target===t.target||t.target.contains(e.target)||t.close(e))},i=0;i=0&&(this._on(this.target,"mouseover",l),this._on(this.drop,"mouseover",l),this._on(this.target,"mouseout",u),this._on(this.drop,"mouseout",u)),e.indexOf("focus")>=0&&(this._on(this.target,"focus",l),this._on(this.drop,"focus",l),this._on(this.target,"blur",u),this._on(this.drop,"blur",u))}}},{key:"isOpened",value:function(){return this.drop?f(this.drop,h.classPrefix+"-open"):void 0}},{key:"toggle",value:function(t){this.isOpened()?this.close(t):this.open(t)}},{key:"open",value:function(t){var e=this;this.isOpened()||(this.drop.parentNode||document.body.appendChild(this.drop),"undefined"!=typeof this.tether&&this.tether.enable(),d(this.drop,h.classPrefix+"-open"),d(this.drop,h.classPrefix+"-open-transitionend"),setTimeout(function(){e.drop&&d(e.drop,h.classPrefix+"-after-open")}),"undefined"!=typeof this.tether&&this.tether.position(),this.trigger("open"),h.updateBodyClasses())}},{key:"_transitionEndHandler",value:function(t){t.target===t.currentTarget&&(f(this.drop,h.classPrefix+"-open")||c(this.drop,h.classPrefix+"-open-transitionend"),this.drop.removeEventListener(m,this.transitionEndHandler))}},{key:"beforeCloseHandler",value:function(t){var e=!0;return this.isClosing||"function"!=typeof this.options.beforeClose||(this.isClosing=!0,e=this.options.beforeClose(t,this)!==!1),this.isClosing=!1,e}},{key:"close",value:function(t){this.isOpened()&&this.beforeCloseHandler(t)&&(c(this.drop,h.classPrefix+"-open"),c(this.drop,h.classPrefix+"-after-open"),this.drop.addEventListener(m,this.transitionEndHandler),this.trigger("close"),"undefined"!=typeof this.tether&&this.tether.disable(),h.updateBodyClasses(),this.options.remove&&this.remove(t))}},{key:"remove",value:function(t){this.close(t),this.drop.parentNode&&this.drop.parentNode.removeChild(this.drop)}},{key:"position",value:function(){this.isOpened()&&"undefined"!=typeof this.tether&&this.tether.position()}},{key:"destroy",value:function(){this.remove(),"undefined"!=typeof this.tether&&this.tether.destroy();for(var t=0;t=0){var s=[i,o];o=s[0],i=s[1]}return[o,i].join(" ")}function i(t,e){for(var n=void 0,o=[];-1!==(n=t.indexOf(e));)o.push(t.splice(n,1));return o}function s(){var a=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],u=function(){for(var t=arguments.length,e=Array(t),n=0;t>n;n++)e[n]=arguments[n];return new(r.apply(b,[null].concat(e)))};p(u,{createContext:s,drops:[],defaults:{}});var g={classPrefix:"drop",defaults:{position:"bottom left",openOn:"click",beforeClose:null,constrainToScrollParent:!0,constrainToWindow:!0,classes:"",remove:!1,openDelay:0,closeDelay:50,focusDelay:null,blurDelay:null,hoverOpenDelay:null,hoverCloseDelay:null,tetherOptions:{}}};p(u,g,a),p(u.defaults,g.defaults,a.defaults),"undefined"==typeof x[u.classPrefix]&&(x[u.classPrefix]=[]),u.updateBodyClasses=function(){for(var t=!1,e=x[u.classPrefix],n=e.length,o=0;n>o;++o)if(e[o].isOpened()){t=!0;break}t?d(document.body,u.classPrefix+"-open"):c(document.body,u.classPrefix+"-open")};var b=function(s){function r(t){if(e(this,r),h(Object.getPrototypeOf(r.prototype),"constructor",this).call(this),this.options=p({},u.defaults,t),this.target=this.options.target,"undefined"==typeof this.target)throw new Error("Drop Error: You must provide a target.");var n="data-"+u.classPrefix,o=this.target.getAttribute(n);o&&null==this.options.content&&(this.options.content=o);for(var i=["position","openOn"],s=0;s=0)for(var n=function(e){t.toggle(e),e.preventDefault()},o=function(e){t.isOpened()&&(e.target===t.drop||t.drop.contains(e.target)||e.target===t.target||t.target.contains(e.target)||t.close(e))},i=0;i=0&&(this._on(this.target,"mouseover",l),this._on(this.drop,"mouseover",l),this._on(this.target,"mouseout",h),this._on(this.drop,"mouseout",h)),e.indexOf("focus")>=0&&(this._on(this.target,"focus",l),this._on(this.drop,"focus",l),this._on(this.target,"blur",h),this._on(this.drop,"blur",h))}}},{key:"isOpened",value:function(){return this.drop?f(this.drop,u.classPrefix+"-open"):void 0}},{key:"toggle",value:function(t){this.isOpened()?this.close(t):this.open(t)}},{key:"open",value:function(t){var e=this;this.isOpened()||(this.drop.parentNode||document.body.appendChild(this.drop),"undefined"!=typeof this.tether&&this.tether.enable(),d(this.drop,u.classPrefix+"-open"),d(this.drop,u.classPrefix+"-open-transitionend"),setTimeout(function(){e.drop&&d(e.drop,u.classPrefix+"-after-open")}),"undefined"!=typeof this.tether&&this.tether.position(),this.trigger("open"),u.updateBodyClasses())}},{key:"_transitionEndHandler",value:function(t){t.target===t.currentTarget&&(f(this.drop,u.classPrefix+"-open")||c(this.drop,u.classPrefix+"-open-transitionend"),this.drop.removeEventListener(m,this.transitionEndHandler))}},{key:"beforeCloseHandler",value:function(t){var e=!0;return this.isClosing||"function"!=typeof this.options.beforeClose||(this.isClosing=!0,e=this.options.beforeClose(t,this)!==!1),this.isClosing=!1,e}},{key:"close",value:function(t){this.isOpened()&&this.beforeCloseHandler(t)&&(c(this.drop,u.classPrefix+"-open"),c(this.drop,u.classPrefix+"-after-open"),this.drop.addEventListener(m,this.transitionEndHandler),this.trigger("close"),"undefined"!=typeof this.tether&&this.tether.disable(),u.updateBodyClasses(),this.options.remove&&this.remove(t))}},{key:"remove",value:function(t){this.close(t),this.drop.parentNode&&this.drop.parentNode.removeChild(this.drop)}},{key:"position",value:function(){this.isOpened()&&"undefined"!=typeof this.tether&&this.tether.position()}},{key:"destroy",value:function(){this.remove(),"undefined"!=typeof this.tether&&this.tether.destroy();for(var t=0;t { - if (outTimeout !== null) { - clearTimeout(outTimeout); + if (this.outTimeout !== null) { + clearTimeout(this.outTimeout); } else { - inTimeout = setTimeout(() => { + this.inTimeout = setTimeout(() => { this.open(event); - inTimeout = null; + this.inTimeout = null; }, (event.type === 'focus' ? this.options.focusDelay : this.options.hoverOpenDelay) || @@ -323,12 +323,12 @@ function createContext(options={}) { }; const outHandler = (event) => { - if (inTimeout !== null) { - clearTimeout(inTimeout); + if (this.inTimeout !== null) { + clearTimeout(this.inTimeout); } else { - outTimeout = setTimeout(() => { + this.outTimeout = setTimeout(() => { this.close(event); - outTimeout = null; + this.outTimeout = null; }, (event.type === 'blur' ? this.options.blurDelay : this.options.hoverCloseDelay) || @@ -482,6 +482,13 @@ function createContext(options={}) { removeFromArray(allDrops[drop.classPrefix], this); removeFromArray(drop.drops, this); + + if (this.outTimeout !== null) { + clearTimeout(this.outTimeout); + } + if (this.inTimeout !== null) { + clearTimeout(this.inTimeout); + } } }