├── dist ├── css │ ├── extras │ │ ├── drop-twitter-bootstrap.min.css │ │ └── drop-twitter-bootstrap.css │ ├── drop-theme-basic.min.css │ ├── drop-theme-basic.css │ ├── drop-theme-arrows.min.css │ ├── drop-theme-twipsy.min.css │ ├── drop-theme-hubspot-popovers.min.css │ ├── drop-theme-arrows.css │ ├── drop-theme-twipsy.css │ ├── drop-theme-arrows-bounce-dark.min.css │ ├── drop-theme-arrows-bounce.min.css │ ├── drop-theme-hubspot-popovers.css │ ├── drop-theme-arrows-bounce.css │ └── drop-theme-arrows-bounce-dark.css └── js │ ├── drop.min.js │ └── drop.js ├── .gitignore ├── docs ├── welcome │ ├── images │ │ ├── elias.png │ │ └── elias-kitesurfing.png │ ├── examples │ │ └── social-sharing │ │ │ ├── fonts │ │ │ ├── icomoon.eot │ │ │ ├── icomoon.ttf │ │ │ └── icomoon.woff │ │ │ ├── sass │ │ │ ├── _icons.scss │ │ │ └── drop-example-theme-social-sharing.sass │ │ │ └── css │ │ │ └── drop-example-theme-social-sharing.css │ ├── css │ │ ├── prism.css │ │ └── welcome.css │ ├── coffee │ │ └── welcome.coffee │ ├── js │ │ ├── welcome.js │ │ └── log.js │ ├── index.html │ └── sass │ │ └── welcome.sass ├── Overview │ ├── 1-embedding_drop.md │ ├── 2-drop_vs_tether.md │ └── 3-styling.md └── intro.md ├── .hsdoc ├── src ├── css │ ├── drop-theme-basic.sass │ ├── extras │ │ └── drop-twitter-bootstrap.sass │ ├── drop-theme-arrows.sass │ ├── drop-theme-arrows-bounce.sass │ ├── drop-theme-arrows-bounce-dark.sass │ ├── drop-theme-twipsy.sass │ ├── drop-theme-hubspot-popovers.sass │ └── helpers │ │ └── _drop-animation-scale.sass └── js │ └── drop.js ├── .eslintrc ├── bower.json ├── CHANGELOG.md ├── LICENSE ├── package.json ├── README.md ├── CONTRIBUTING.md └── gulpfile.js /dist/css/extras/drop-twitter-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | .drop{z-index:1060} -------------------------------------------------------------------------------- /dist/css/extras/drop-twitter-bootstrap.css: -------------------------------------------------------------------------------- 1 | .drop { 2 | z-index: 1060; } 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .DS_Store 3 | node_modules/ 4 | bower_components/ 5 | -------------------------------------------------------------------------------- /docs/welcome/images/elias.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpot/drop/HEAD/docs/welcome/images/elias.png -------------------------------------------------------------------------------- /docs/welcome/images/elias-kitesurfing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpot/drop/HEAD/docs/welcome/images/elias-kitesurfing.png -------------------------------------------------------------------------------- /docs/welcome/examples/social-sharing/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpot/drop/HEAD/docs/welcome/examples/social-sharing/fonts/icomoon.eot -------------------------------------------------------------------------------- /docs/welcome/examples/social-sharing/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpot/drop/HEAD/docs/welcome/examples/social-sharing/fonts/icomoon.ttf -------------------------------------------------------------------------------- /docs/welcome/examples/social-sharing/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HubSpot/drop/HEAD/docs/welcome/examples/social-sharing/fonts/icomoon.woff -------------------------------------------------------------------------------- /.hsdoc: -------------------------------------------------------------------------------- 1 | title: "drop" 2 | description: "Dropdowns for Tether" 3 | examples: "docs/**/*.md" 4 | assets: "{bower_components/*,dist/js/*.js,dist/css/*.css,docs/css/*.css,docs/js/*,js,docs/welcome/*}" 5 | -------------------------------------------------------------------------------- /src/css/drop-theme-basic.sass: -------------------------------------------------------------------------------- 1 | @import ../bower_components/tether/src/css/helpers/tether 2 | @import ../bower_components/tether/src/css/helpers/tether-theme-basic 3 | 4 | $themePrefix: "drop" 5 | $themeName: "basic" 6 | $backgroundColor: #eee 7 | $color: #444 8 | 9 | +tether($themePrefix: $themePrefix) 10 | +tether-theme-basic($themePrefix: $themePrefix, $themeName: $themeName, $backgroundColor: $backgroundColor, $color: $color) 11 | -------------------------------------------------------------------------------- /dist/css/drop-theme-basic.min.css: -------------------------------------------------------------------------------- 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-basic{max-width:100%;max-height:100%}.drop-element.drop-theme-basic .drop-content{border-radius:5px;box-shadow:0 2px 8px rgba(0,0,0,.2);font-family:inherit;background:#eee;color:#444;padding:1em;font-size:1.1em;line-height:1.5em} -------------------------------------------------------------------------------- /src/css/extras/drop-twitter-bootstrap.sass: -------------------------------------------------------------------------------- 1 | // https://github.com/HubSpot/drop/issues/9 2 | // Since Twitter Boostrap sets these z-indexes: 3 | // 4 | // @zindex-navbar: 1000; 5 | // @zindex-dropdown: 1000; 6 | // @zindex-popover: 1010; 7 | // @zindex-tooltip: 1030; 8 | // @zindex-navbar-fixed: 1030; 9 | // @zindex-modal-background: 1040; 10 | // @zindex-modal: 1050; 11 | // 12 | // We make sure Drops always end up on top: 13 | .drop 14 | z-index: 1060 -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "es6": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "globals": { 9 | "Tether": false 10 | }, 11 | "rules": { 12 | "arrow-parens": [2, "always"], 13 | "arrow-spacing": 2, 14 | "no-const-assign": 2, 15 | "no-var": 2, 16 | "prefer-arrow-callback": 2, 17 | "quotes": [2, "single"], 18 | "semi": [2, "always"], 19 | "space-before-function-paren": [2, "never"], 20 | "strict": [2, "global"] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/css/drop-theme-arrows.sass: -------------------------------------------------------------------------------- 1 | @import ../bower_components/tether/src/css/helpers/tether 2 | @import ../bower_components/tether/src/css/helpers/tether-theme-arrows 3 | 4 | $themePrefix: "drop" 5 | $themeName: "arrows" 6 | $arrowSize: 16px 7 | $backgroundColor: #eee 8 | $color: #444 9 | $useDropShadow: true 10 | 11 | +tether($themePrefix: $themePrefix) 12 | +tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow) 13 | -------------------------------------------------------------------------------- /dist/css/drop-theme-basic.css: -------------------------------------------------------------------------------- 1 | .drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { 2 | box-sizing: border-box; } 3 | 4 | .drop-element { 5 | position: absolute; 6 | display: none; } 7 | .drop-element.drop-open { 8 | display: block; } 9 | 10 | .drop-element.drop-theme-basic { 11 | max-width: 100%; 12 | max-height: 100%; } 13 | .drop-element.drop-theme-basic .drop-content { 14 | border-radius: 5px; 15 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 16 | font-family: inherit; 17 | background: #eee; 18 | color: #444; 19 | padding: 1em; 20 | font-size: 1.1em; 21 | line-height: 1.5em; } 22 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tether-drop", 3 | "version": "1.4.2", 4 | "homepage": "https://github.com/HubSpot/drop", 5 | "authors": [ 6 | "Adam Schwartz ", 7 | "Zack Bloom " 8 | ], 9 | "maintainers": [ 10 | "Nicholas Hwang " 11 | ], 12 | "description": "Client-side library for creating dropdowns", 13 | "keywords": [ 14 | "dropdown", 15 | "overlay", 16 | "tether" 17 | ], 18 | "license": "MIT", 19 | "main": "dist/js/drop.js", 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "test", 25 | "tests" 26 | ], 27 | "dependencies": { 28 | "tether": "^1.1.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## v1.4.1 2 | - Remove bower install as post npm install script 3 | 4 | ## v1.1.0 5 | - Update `Tether` to version 1 6 | - Bump all dependencies 7 | 8 | ## v1.0.8 9 | - Add minified CSS stylesheets 10 | 11 | ## v1.0.7 12 | - Add `Twipsy` theme [#76](https://github.com/HubSpot/drop/pull/76) 13 | 14 | ## v1.0.6 15 | - Fix next tick `undefined` Drop [#77](https://github.com/HubSpot/drop/pull/77) 16 | 17 | ## v1.0.5 18 | - Remove `bower install` post-install script 19 | 20 | ## v1.0.3 21 | - Remove Compass and Ruby dependencies 22 | 23 | ## v1.0.0 24 | - Add proper UMD to `Drop` 25 | - Convert from `Coffeescript` to `ES6 (Babel)` 26 | - Fix `*.json` files to include `main` 27 | - Remove bundled `drop.js` 28 | - Restructure directory layout 29 | - Update `gulp` builds 30 | - Update `tether` dependency to `v0.7.1` 31 | -------------------------------------------------------------------------------- /src/css/drop-theme-arrows-bounce.sass: -------------------------------------------------------------------------------- 1 | @import ../bower_components/tether/src/css/helpers/tether 2 | @import ../bower_components/tether/src/css/helpers/tether-theme-arrows 3 | 4 | @import helpers/drop-animation-scale 5 | 6 | $themePrefix: "drop" 7 | $themeName: "arrows-bounce" 8 | $arrowSize: 12px 9 | $backgroundColor: #fff 10 | $color: #444 11 | $useDropShadow: true 12 | 13 | +tether($themePrefix: $themePrefix) 14 | +tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow) 15 | 16 | $attachmentOffset: $arrowSize 17 | $easing: cubic-bezier(0, 0, 0.265, 1.55) // Bounce 18 | 19 | +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing) 20 | -------------------------------------------------------------------------------- /src/css/drop-theme-arrows-bounce-dark.sass: -------------------------------------------------------------------------------- 1 | @import ../bower_components/tether/src/css/helpers/tether 2 | @import ../bower_components/tether/src/css/helpers/tether-theme-arrows 3 | 4 | @import helpers/drop-animation-scale 5 | 6 | $themePrefix: "drop" 7 | $themeName: "arrows-bounce-dark" 8 | $arrowSize: 12px 9 | $backgroundColor: #000 10 | $color: #fff 11 | $useDropShadow: false 12 | 13 | +tether($themePrefix: $themePrefix) 14 | +tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow) 15 | 16 | $attachmentOffset: $arrowSize 17 | $easing: cubic-bezier(0, 0, 0.265, 1.55) // Bounce 18 | 19 | +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing) 20 | -------------------------------------------------------------------------------- /src/css/drop-theme-twipsy.sass: -------------------------------------------------------------------------------- 1 | @import ../bower_components/tether/src/css/helpers/tether 2 | @import ../bower_components/tether/src/css/helpers/tether-theme-arrows 3 | 4 | $themePrefix: "drop" 5 | $themeName: "twipsy" 6 | $arrowSize: 10px 7 | $backgroundColor: #414141 8 | $color: #fff 9 | $useDropShadow: false 10 | 11 | +tether($themePrefix: $themePrefix) 12 | +tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow) 13 | 14 | .drop-element.drop-theme-twipsy 15 | opacity: 0 16 | transition: opacity 150ms 17 | 18 | .drop-content 19 | box-shadow: 0 3px 7px rgba(0, 0, 0, .2) 20 | border-radius: 2px 21 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif 22 | padding: 3px 8px 23 | line-height: 18px 24 | font-size: 11px 25 | 26 | &.drop-open-transitionend 27 | display: block 28 | 29 | &.drop-after-open 30 | opacity: 1 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 HubSpot, Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tether-drop", 3 | "version": "1.4.2", 4 | "description": "Client-side library for creating dropdowns", 5 | "authors": [ 6 | "Zack Bloom ", 7 | "Adam Schwartz " 8 | ], 9 | "maintainers": [ 10 | "Nicholas Hwang " 11 | ], 12 | "scripts": { 13 | "build": "gulp build" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/HubSpot/drop.git" 18 | }, 19 | "license": "MIT", 20 | "main": "dist/js/drop.js", 21 | "devDependencies": { 22 | "del": "^1.1.1", 23 | "eslint": "^1.7.3", 24 | "gulp": "^3.9.0", 25 | "gulp-autoprefixer": "^2.3.1", 26 | "gulp-babel": "^5.1.0", 27 | "gulp-bump": "^0.3.0", 28 | "gulp-header": "^1.2.2", 29 | "gulp-minify-css": "^1.1.6", 30 | "gulp-plumber": "^1.0.1", 31 | "gulp-rename": "^1.2.2", 32 | "gulp-sass": "^2.0.1", 33 | "gulp-uglify": "^1.2.0", 34 | "gulp-wrap-umd": "^0.2.1" 35 | }, 36 | "dependencies": { 37 | "tether": "^1.1.0" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /docs/Overview/1-embedding_drop.md: -------------------------------------------------------------------------------- 1 | ## Embedding Drop in Other Libraries 2 | 3 | Drop is designed to be embeddable in other JavaScript libraries. For example, our 4 | [tooltip library](/tooltip) includes an embedded copy of Drop. 5 | 6 | ### Classes 7 | 8 | You probably want to change the classes to use your library's name to prefix its classes, 9 | rather than using `'drop-`'. Drop also adds a class to the body whenever any drop is opened; 10 | by changing the prefix you are ensuring that your library's classes don't conflict with 11 | another usage of Drop on the page. 12 | 13 | To do this, call the `Drop.createContext` method. It will return you a context-aware 14 | `Drop` object you can use to make subsequent calls. 15 | 16 | For example: 17 | 18 | ```coffeescript 19 | _Drop = Drop.createContext 20 | classPrefix: 'tooltip' 21 | ``` 22 | 23 | Then, when you are creating a drop, use the returned object: 24 | 25 | ```coffeescript 26 | drop = new _Drop 27 | ``` 28 | 29 | You can also pass `createContext` any default options you'd like to apply to 30 | drops you create: 31 | 32 | ```coffeescript 33 | _Drop = Drop.createContext 34 | classPrefix: 'tooltip' 35 | defaults: 36 | attach: 'top right' 37 | ``` 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Drop 2 | 3 | [![GitHub 4 | version](https://badge.fury.io/gh/HubSpot%2Fdrop.svg)](http://badge.fury.io/gh/HubSpot%2Fdrop) 5 | 6 | Drop.js is a powerful Javascript and CSS library for creating dropdowns and other floating displays. 7 | 8 | [![Drop Docs](http://i.imgur.com/sgmx9aJ.png)](http://github.hubspot.com/drop/) 9 | 10 | 11 | ## Install 12 | 13 | __Dependencies__ 14 | 15 | * __[Tether](https://github.com/HubSpot/tether)__ 16 | 17 | __npm__ 18 | ```sh 19 | $ npm install tether-drop 20 | ``` 21 | 22 | __bower__ 23 | ```sh 24 | $ bower install tether-drop 25 | ``` 26 | 27 | ## Usage 28 | 29 | ```javascript 30 | let dropInstance = new Drop({ 31 | target: document.querySelector('.drop-target'), 32 | content: 'Welcome to the future', 33 | classes: 'drop-theme-arrows', 34 | position: 'bottom left', 35 | openOn: 'click' 36 | }) 37 | ``` 38 | 39 | [API documentation](http://github.hubspot.com/drop) 40 | 41 | [Demo](http://github.hubspot.com/drop/docs/welcome) 42 | 43 | 44 | ## Contributing 45 | 46 | We encourage contributions of all kinds. If you would like to contribute in some way, please review our [guidelines for contributing](CONTRIBUTING.md). 47 | 48 | 49 | ## License 50 | Copyright © 2015 HubSpot - [MIT License](LICENSE) 51 | -------------------------------------------------------------------------------- /docs/welcome/css/prism.css: -------------------------------------------------------------------------------- 1 | /* Prism.js */ 2 | code[class*="language-"], pre[class*="language-"] {color: black; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Code blocks */ pre[class*="language-"] {padding: 1em; margin: .5em 0; overflow: auto; font-size: 14px; } :not(pre) > code[class*="language-"], pre[class*="language-"] {background: rgba(0, 0, 0, .05); } /* Inline code */ :not(pre) > code[class*="language-"] {padding: .1em; border-radius: .3em; } .token.comment, .token.prolog, .token.doctype, .token.cdata {color: slategray; } .token.punctuation {color: #999; } .namespace {opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol {color: #905; } .token.selector, .token.attr-name, .token.string, .token.builtin {color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable {color: #a67f59; } .token.atrule, .token.attr-value, .token.keyword {color: #07a; } .token.regex, .token.important {color: #e90; } .token.important {font-weight: bold; } .token.entity {cursor: help; } -------------------------------------------------------------------------------- /docs/Overview/2-drop_vs_tether.md: -------------------------------------------------------------------------------- 1 | ## Drop vs Tether 2 | 3 | Drop is a library built on the [Tether](http://github.hubspot.com/tether) positioning engine. 4 | Tether is intentionally designed to only handle positioning. You give it an element and a 5 | target, and it keeps the element where you want it relative to the target. 6 | 7 | Quickly it became clear that while that simplicity allowed Tether to be more powerful, 8 | many of its use cases required a few more concepts. Specifically, Drop adds the following 9 | on top of Tether: 10 | 11 | - The concept of the element being 'opened' or 'closed', and the ability to link events 12 | to the opening and closing. 13 | - Element creation handled for you by Drop. Drop adds a 'drop-content' element inside of it 14 | to make styling easier. 15 | - A simpler attachment syntax that assumes you always want to place the drop in one 16 | of twelve positions outside the target. 17 | - A class on the body to allow you to style elements differently when a drop is opened. 18 | - CSS themes with nice arrow-y bits and animation 19 | 20 | It's very possible that a sufficiently complex application will eventually outgrow 21 | Drop and move to using Tether directly. You can always pass `tetherOptions` 22 | to your Drop instance if you need more explicit control of Tether's behavior. 23 | -------------------------------------------------------------------------------- /src/css/drop-theme-hubspot-popovers.sass: -------------------------------------------------------------------------------- 1 | @import ../bower_components/tether/src/css/helpers/tether 2 | @import ../bower_components/tether/src/css/helpers/tether-theme-arrows 3 | 4 | $themePrefix: "drop" 5 | $themeName: "hubspot-popovers" 6 | $arrowSize: 10px 7 | $backgroundColor: #ebebeb 8 | $color: #444 9 | $useDropShadow: false 10 | 11 | +tether($themePrefix: $themePrefix) 12 | +tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow) 13 | 14 | .drop-element.drop-theme-hubspot-popovers 15 | 16 | .drop-content 17 | box-shadow: 0 3px 7px rgba(0, 0, 0, .2) 18 | border-radius: 2px 19 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif 20 | //border: 1px solid #b3b3b3 21 | padding: 3px 22 | font-size: 13px 23 | 24 | .drop-content-inner 25 | border: 1px solid #dbdbdb 26 | padding: 14px 27 | background: #fff 28 | overflow: hidden 29 | width: 280px 30 | 31 | .title 32 | font-size: 18px 33 | margin-top: 0 34 | margin-bottom: 12px 35 | font-weight: normal 36 | line-height: 1 37 | 38 | p:last-child 39 | margin-bottom: 0 40 | -------------------------------------------------------------------------------- /docs/welcome/coffee/welcome.coffee: -------------------------------------------------------------------------------- 1 | _Drop = Drop.createContext classPrefix: 'drop' 2 | 3 | isMobile = $(window).width() < 567 4 | 5 | init = -> 6 | setupHero() 7 | setupExamples() 8 | 9 | setupHero = -> 10 | drop = new _Drop 11 | target: $('.hero .drop-target')[0] 12 | classes: 'drop-theme-arrows-bounce-dark drop-hero' 13 | position: 'bottom center' 14 | constrainToWindow: false 15 | constrainToScrollParent: false 16 | openOn: 'always' 17 | content: ''' 18 |

Drop.js

19 |

The fast and capable
dropdown library
Built on Tether.

20 |

21 | ★ On Github 22 |

23 | ''' 24 | 25 | setupExamples = -> 26 | $('.example').each -> 27 | $example = $ @ 28 | theme = $example.data('theme') 29 | openOn = $example.data('open-on') or 'click' 30 | 31 | $target = $example.find('.drop-target') 32 | $target.addClass theme 33 | 34 | content = $example.find('.drop-content').html() 35 | 36 | drop = new _Drop 37 | target: $target[0] 38 | classes: theme 39 | position: 'bottom center' 40 | constrainToWindow: true 41 | constrainToScrollParent: false 42 | openOn: openOn 43 | content: content 44 | 45 | 46 | init() 47 | -------------------------------------------------------------------------------- /docs/welcome/js/welcome.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var init, isMobile, setupExamples, setupHero, _Drop; 3 | 4 | _Drop = Drop.createContext({ 5 | classPrefix: 'drop' 6 | }); 7 | 8 | isMobile = $(window).width() < 567; 9 | 10 | init = function() { 11 | setupHero(); 12 | return setupExamples(); 13 | }; 14 | 15 | setupHero = function() { 16 | var drop; 17 | return drop = new _Drop({ 18 | target: $('.hero .drop-target')[0], 19 | classes: 'drop-theme-arrows-bounce-dark drop-hero', 20 | position: 'bottom center', 21 | constrainToWindow: false, 22 | constrainToScrollParent: false, 23 | openOn: 'always', 24 | content: '

Drop.js

\n

The fast and capable
dropdown library
Built on Tether.

\n

\n ★ On Github\n

' 25 | }); 26 | }; 27 | 28 | setupExamples = function() { 29 | return $('.example').each(function() { 30 | var $example, $target, content, drop, openOn, theme; 31 | $example = $(this); 32 | theme = $example.data('theme'); 33 | openOn = $example.data('open-on') || 'click'; 34 | $target = $example.find('.drop-target'); 35 | $target.addClass(theme); 36 | content = $example.find('.drop-content').html(); 37 | return drop = new _Drop({ 38 | target: $target[0], 39 | classes: theme, 40 | position: 'bottom center', 41 | constrainToWindow: true, 42 | constrainToScrollParent: false, 43 | openOn: openOn, 44 | content: content 45 | }); 46 | }); 47 | }; 48 | 49 | init(); 50 | 51 | }).call(this); 52 | -------------------------------------------------------------------------------- /docs/welcome/examples/social-sharing/sass/_icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "icomoon"; 3 | src: url("../fonts/icomoon.eot"); 4 | src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype"), 5 | url("../fonts/icomoon.svg#icomoon") format("svg"), 6 | url("../fonts/icomoon.woff") format("woff"), 7 | url("../fonts/icomoon.ttf") format("truetype"); 8 | font-weight: normal; 9 | font-style: normal 10 | } 11 | 12 | .icon-monkey:before { content: "\38" } 13 | .icon-bear:before { content: "\28" } 14 | .icon-squirrel:before { content: "\6f" } 15 | .icon-elephant:before { content: "\65" } 16 | .icon-google-plus:before { content: "\21" } 17 | .icon-facebook:before { content: "\22" } 18 | .icon-twitter:before { content: "\23" } 19 | .icon-github:before { content: "\24" } 20 | .icon-tux:before { content: "\25" } 21 | .icon-apple:before { content: "\26" } 22 | .icon-android:before { content: "\27" } 23 | .icon-windows:before { content: "\29" } 24 | .icon-sun:before { content: "\2a" } 25 | .icon-cloudy:before { content: "\2b" } 26 | .icon-weather:before { content: "\2c" } 27 | .icon-lightning:before { content: "\2d" } 28 | .icon-rainy:before { content: "\2e" } 29 | .icon-windy:before { content: "\2f" } 30 | .icon-chrome:before { content: "\30" } 31 | .icon-firefox:before { content: "\31" } 32 | .icon-IE:before { content: "\32" } 33 | .icon-opera:before { content: "\33" } 34 | .icon-safari:before { content: "\34" } 35 | .icon-finder:before { content: "\35" } 36 | .icon-camera:before { content: "\3a" } 37 | .icon-diamond:before { content: "\36" } 38 | .icon-rocket:before { content: "\37" } 39 | .icon-cars:before { content: "\39" } 40 | .icon-clock:before { content: "\3b" } 41 | .icon-star:before { content: "\3c" } -------------------------------------------------------------------------------- /docs/Overview/3-styling.md: -------------------------------------------------------------------------------- 1 | ## Stying Drops 2 | 3 | Drop creates a basic HTML structure: 4 | 5 | ```html 6 |
7 |
8 | 9 |
10 |
11 | ``` 12 | 13 | It adds the `drop-open` class when the drop is opened. 14 | 15 | All of [Tether's](/tether) classes get added as well, using the `drop-` prefix. 16 | 17 | ### Animation 18 | 19 | To facilitate animation, Drop stratigically adds and removes three classes 20 | when a drop is opened: 21 | 22 | - `drop-open` is added when the drop is opened and removed when it should be hidden. 23 | Use `drop-open` if you don't need animation. 24 | - `drop-after-open` is added in the next event loop tick after the drop is opened. 25 | Start your CSS transitions when `drop-after-open` appears. 26 | - `drop-open-transitionend` is added immediately, but not removed until the `transitionend` 27 | event fires on the drop. Use `drop-open-transitionend` to control the showing and hiding 28 | of your element when using an animation. 29 | 30 | A simple CSS setup which demonstrates the method: 31 | 32 | ```css 33 | .drop-element { 34 | // Set the initial state for our animation 35 | opacity: 0; 36 | } 37 | .drop-element.drop-open-transitionend { 38 | // Show our drop while it's open and while the transition is going on 39 | display: block; 40 | } 41 | .drop-element.drop-after-open { 42 | -webkit-transition: opacity 1s; 43 | -o-transition: opacity 1s; 44 | -moz-transition: opacity 1s; 45 | -ms-transition: opacity 1s; 46 | transition: opacity 1s; 47 | 48 | opacity: 1; 49 | } 50 | ``` 51 | 52 | Be sure to include `.drop-element` in all of your selectors, as all classes get added to both 53 | the element and the target. 54 | 55 | ### Themes 56 | 57 | Drop ships with two animated themes and one non-animated one. They are available in the 58 | sass and css directories of the project. 59 | 60 | If you look at the Sass, you'll notice that we make use of mixins which allow you to configure 61 | many elements of the theme to make it suit your application. 62 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guide 2 | 3 | You will need: 4 | 5 | - Node.js/io.js & npm 6 | - Bower 7 | - Gulp 8 | 9 | 10 | ## Getting started 11 | 12 | 1. Fork the project 13 | 2. Clone your forked project by running `git clone git@github.com:{ 14 | YOUR_USERNAME }/drop.git` 15 | 3. Run `npm install` and `bower install` to install node modules and bower 16 | components. 17 | 4. Test that you can build the source by moving/renaming the existing `dist` 18 | directory and running `npm run build` 19 | 5. Assuming everything went well, you should now have a `dist` directory that 20 | matches the one you moved in step 4 21 | 22 | 23 | ## Writing code! 24 | 25 | We use `gulp` to facilitate things like transpilation, minification, etc. so 26 | can you focus on writing relevant code. If there is a fix or feature you would like 27 | to contribute, we ask that you take the following steps: 28 | 29 | 1. Most of the _editable_ code lives in the `src` directory while built code 30 | will end up in the `dist` directory upon running `npm run build`. 31 | 32 | 2. Depending on how big your changes are, bump the version numbers appropriately 33 | in `bower.json` and `package.json`. We try to follow semver, so a good rule 34 | of thumb for how to bump the version is: 35 | - A fix to existing code, perform a patch bump e.g. x.x.0 -> x.x.1 36 | - New feature, perform a minor bump e.g. x.0.x -> x.1.x 37 | - Breaking changes such a rewrite, perform a major bump e.g. 38 | 1.x.x -> 2.x.x 39 | 40 | Versioning is hard, so just use good judgement and we'll be more than happy 41 | to help out. 42 | 43 | __NOTE__: There is a `gulp` task that will automate some of the versioning. 44 | You can run `gulp version:{type}` where type is `patch|minor|major` to 45 | update both `bower.json` and `package.json` as well as add the appropriate 46 | git tag. 47 | 48 | 3. Provide a thoughtful commit message and push your changes to your fork using 49 | `git push origin master` (assuming your forked project is using `origin` for 50 | the remote name and you are on the `master` branch). 51 | 52 | 4. Open a Pull Request on GitHub with a description of your changes. 53 | 54 | 55 | ## Testing 56 | 57 | Work in progress. We are hoping to add some tests, so if you would like to help 58 | us get started, feel free to contact us through the Issues or open a Pull 59 | Request. 60 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var del = require('del'); 2 | var gulp = require('gulp'); 3 | var babel = require('gulp-babel'); 4 | var bump = require('gulp-bump'); 5 | var header = require('gulp-header'); 6 | var minify = require('gulp-minify-css'); 7 | var plumber = require('gulp-plumber'); 8 | var prefixer = require('gulp-autoprefixer'); 9 | var rename = require('gulp-rename'); 10 | var uglify = require('gulp-uglify'); 11 | var sass = require('gulp-sass'); 12 | var umd = require('gulp-wrap-umd'); 13 | 14 | // Variables 15 | var distDir = './dist'; 16 | var pkg = require('./package.json'); 17 | var banner = ['/*!', pkg.name, pkg.version, '*/\n'].join(' '); 18 | var umdOptions = { 19 | exports: 'Drop', 20 | namespace: 'Drop', 21 | deps: [{ 22 | name: 'Tether', 23 | globalName: 'Tether', 24 | paramName: 'Tether', 25 | amdName: 'tether', 26 | cjsName: 'tether' 27 | }] 28 | }; 29 | 30 | 31 | // Clean 32 | gulp.task('clean', function() { 33 | del.sync([distDir]); 34 | }); 35 | 36 | 37 | // Javascript 38 | gulp.task('js:dev', function() { 39 | gulp.src('./src/js/drop.js') 40 | .pipe(plumber()) 41 | .pipe(babel({ 42 | blacklist: ['minification.removeDebugger'] 43 | })) 44 | .pipe(umd(umdOptions)) 45 | .pipe(gulp.dest(distDir + '/js')); 46 | }); 47 | 48 | gulp.task('js', function() { 49 | gulp.src('./src/js/drop.js') 50 | .pipe(babel()) 51 | .pipe(umd(umdOptions)) 52 | .pipe(header(banner)) 53 | 54 | // Original 55 | .pipe(gulp.dest(distDir + '/js')) 56 | 57 | // Minified 58 | .pipe(uglify()) 59 | .pipe(rename({suffix: '.min'})) 60 | .pipe(gulp.dest(distDir + '/js')); 61 | }); 62 | 63 | 64 | // CSS 65 | gulp.task('css', function() { 66 | gulp.src('./src/css/**/*.sass') 67 | .pipe(sass({ 68 | includePaths: ['./bower_components'] 69 | })) 70 | .pipe(prefixer()) 71 | 72 | // Original 73 | .pipe(gulp.dest(distDir + '/css')) 74 | 75 | // Minified 76 | .pipe(minify()) 77 | .pipe(rename({suffix: '.min'})) 78 | .pipe(gulp.dest(distDir + '/css')); 79 | }); 80 | 81 | 82 | // Version bump 83 | var VERSIONS = ['patch', 'minor', 'major']; 84 | for (var i = 0; i < VERSIONS.length; ++i){ 85 | (function(version) { 86 | gulp.task('version:' + version, function() { 87 | gulp.src(['package.json', 'bower.json']) 88 | .pipe(bump({type: version})) 89 | .pipe(gulp.dest('.')); 90 | }); 91 | })(VERSIONS[i]); 92 | } 93 | 94 | 95 | // Watch 96 | gulp.task('watch', ['js:dev', 'css'], function() { 97 | gulp.watch('./src/js/**/*', ['js:dev']); 98 | gulp.watch('./src/css/**/*', ['css']); 99 | }); 100 | 101 | 102 | // Defaults 103 | gulp.task('build', ['js', 'css']); 104 | gulp.task('default', ['build']); 105 | 106 | -------------------------------------------------------------------------------- /src/css/helpers/_drop-animation-scale.sass: -------------------------------------------------------------------------------- 1 | =drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") 2 | .#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName } 3 | transform: translateZ(0) 4 | transition: opacity 100ms 5 | opacity: 0 6 | 7 | .#{ $themePrefix }-content 8 | transition: transform .3s $easing 9 | transform: scale(0) translateZ(0) 10 | 11 | &.#{ $themePrefix }-open 12 | display: none 13 | 14 | &.#{ $themePrefix }-open-transitionend 15 | display: block 16 | 17 | &.#{ $themePrefix }-after-open 18 | transition: none 19 | opacity: 1 20 | 21 | .#{ $themePrefix }-content 22 | transform: scale(1) translateZ(0) 23 | 24 | // Centers and middles 25 | 26 | &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content 27 | transform-origin: 50% calc(100% + #{ $attachmentOffset }) 28 | 29 | &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content 30 | transform-origin: 50% (-$attachmentOffset) 31 | 32 | &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content 33 | transform-origin: calc(100% + #{ $attachmentOffset }) 50% 34 | 35 | &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content 36 | transform-origin: (-$attachmentOffset) 50% 37 | 38 | // Top and bottom corners 39 | 40 | &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content 41 | transform-origin: 0 (-$attachmentOffset) 42 | 43 | &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content 44 | transform-origin: 100% (-$attachmentOffset) 45 | 46 | &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content 47 | transform-origin: 0 calc(100% + #{ $attachmentOffset }) 48 | 49 | &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content 50 | transform-origin: 100% calc(100% + #{ $attachmentOffset }) 51 | 52 | // Side corners 53 | 54 | &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content 55 | transform-origin: calc(100% + #{ $attachmentOffset }) 0 56 | 57 | &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content 58 | transform-origin: (-$attachmentOffset) 0 59 | 60 | &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content 61 | transform-origin: calc(100% + #{ $attachmentOffset }) 100% 62 | 63 | &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content 64 | transform-origin: (-$attachmentOffset) 100% 65 | -------------------------------------------------------------------------------- /dist/css/drop-theme-arrows.min.css: -------------------------------------------------------------------------------- 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} -------------------------------------------------------------------------------- /docs/welcome/js/log.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var ffSupport, formats, getOrderedMatches, hasMatches, isFF, isIE, isOpera, isSafari, log, makeArray, operaSupport, safariSupport, stringToArgs, _log; 3 | if (!(window.console && window.console.log)) { 4 | return; 5 | } 6 | log = function() { 7 | var args; 8 | args = []; 9 | makeArray(arguments).forEach(function(arg) { 10 | if (typeof arg === 'string') { 11 | return args = args.concat(stringToArgs(arg)); 12 | } else { 13 | return args.push(arg); 14 | } 15 | }); 16 | return _log.apply(window, args); 17 | }; 18 | _log = function() { 19 | return console.log.apply(console, makeArray(arguments)); 20 | }; 21 | makeArray = function(arrayLikeThing) { 22 | return Array.prototype.slice.call(arrayLikeThing); 23 | }; 24 | formats = [ 25 | { 26 | regex: /\*([^\*]+)\*/, 27 | replacer: function(m, p1) { 28 | return "%c" + p1 + "%c"; 29 | }, 30 | styles: function() { 31 | return ['font-style: italic', '']; 32 | } 33 | }, { 34 | regex: /\_([^\_]+)\_/, 35 | replacer: function(m, p1) { 36 | return "%c" + p1 + "%c"; 37 | }, 38 | styles: function() { 39 | return ['font-weight: bold', '']; 40 | } 41 | }, { 42 | regex: /\`([^\`]+)\`/, 43 | replacer: function(m, p1) { 44 | return "%c" + p1 + "%c"; 45 | }, 46 | styles: function() { 47 | return ['background: rgb(255, 255, 219); padding: 1px 5px; border: 1px solid rgba(0, 0, 0, 0.1)', '']; 48 | } 49 | }, { 50 | regex: /\[c\=(?:\"|\')?((?:(?!(?:\"|\')\]).)*)(?:\"|\')?\]((?:(?!\[c\]).)*)\[c\]/, 51 | replacer: function(m, p1, p2) { 52 | return "%c" + p2 + "%c"; 53 | }, 54 | styles: function(match) { 55 | return [match[1], '']; 56 | } 57 | } 58 | ]; 59 | hasMatches = function(str) { 60 | var _hasMatches; 61 | _hasMatches = false; 62 | formats.forEach(function(format) { 63 | if (format.regex.test(str)) { 64 | return _hasMatches = true; 65 | } 66 | }); 67 | return _hasMatches; 68 | }; 69 | getOrderedMatches = function(str) { 70 | var matches; 71 | matches = []; 72 | formats.forEach(function(format) { 73 | var match; 74 | match = str.match(format.regex); 75 | if (match) { 76 | return matches.push({ 77 | format: format, 78 | match: match 79 | }); 80 | } 81 | }); 82 | return matches.sort(function(a, b) { 83 | return a.match.index - b.match.index; 84 | }); 85 | }; 86 | stringToArgs = function(str) { 87 | var firstMatch, matches, styles; 88 | styles = []; 89 | while (hasMatches(str)) { 90 | matches = getOrderedMatches(str); 91 | firstMatch = matches[0]; 92 | str = str.replace(firstMatch.format.regex, firstMatch.format.replacer); 93 | styles = styles.concat(firstMatch.format.styles(firstMatch.match)); 94 | } 95 | return [str].concat(styles); 96 | }; 97 | isSafari = function() { 98 | return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor); 99 | }; 100 | isOpera = function() { 101 | return /OPR/.test(navigator.userAgent) && /Opera/.test(navigator.vendor); 102 | }; 103 | isFF = function() { 104 | return /Firefox/.test(navigator.userAgent); 105 | }; 106 | isIE = function() { 107 | return /MSIE/.test(navigator.userAgent); 108 | }; 109 | safariSupport = function() { 110 | var m; 111 | m = navigator.userAgent.match(/AppleWebKit\/(\d+)\.(\d+)(\.|\+|\s)/); 112 | if (!m) { 113 | return false; 114 | } 115 | return 537.38 <= parseInt(m[1], 10) + (parseInt(m[2], 10) / 100); 116 | }; 117 | operaSupport = function() { 118 | var m; 119 | m = navigator.userAgent.match(/OPR\/(\d+)\./); 120 | if (!m) { 121 | return false; 122 | } 123 | return 15 <= parseInt(m[1], 10); 124 | }; 125 | ffSupport = function() { 126 | return window.console.firebug || window.console.exception; 127 | }; 128 | if (isIE() || (isFF() && !ffSupport()) || (isOpera() && !operaSupport()) || (isSafari() && !safariSupport())) { 129 | window.log = _log; 130 | } else { 131 | window.log = log; 132 | } 133 | window.log.l = _log; 134 | }).call(this); -------------------------------------------------------------------------------- /dist/css/drop-theme-twipsy.min.css: -------------------------------------------------------------------------------- 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} -------------------------------------------------------------------------------- /dist/css/drop-theme-hubspot-popovers.min.css: -------------------------------------------------------------------------------- 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} -------------------------------------------------------------------------------- /docs/welcome/examples/social-sharing/sass/drop-example-theme-social-sharing.sass: -------------------------------------------------------------------------------- 1 | @import compass/css3 2 | @import compass/utilities/general/clearfix 3 | @import compass/css3/user-interface 4 | 5 | @import ../../../../../bower_components/tether/sass/helpers/tether 6 | +tether($themePrefix: "drop") 7 | 8 | @import icons 9 | 10 | .drop-example-theme-social-sharing 11 | 12 | &.drop-target 13 | +inline-block 14 | cursor: pointer 15 | background: #000 16 | color: #fff 17 | display: inline-block 18 | padding: 0 20px 19 | height: 60px 20 | line-height: 60px 21 | font-size: 20px 22 | width: 137px 23 | text-align: center 24 | 25 | &.drop-element 26 | +transform(translateZ(0)) 27 | +transition(opacity 360ms) 28 | opacity: .999 29 | width: 137px + 40px 30 | 31 | &.drop-open 32 | display: none 33 | 34 | &.drop-open-transitionend 35 | display: block 36 | 37 | &.drop-after-open 38 | +transition(none) 39 | opacity: 1 40 | 41 | .drop-content 42 | overflow: hidden 43 | position: relative 44 | 45 | span 46 | 47 | &[class^="icon-"], &[class*=" icon-"] 48 | padding: 0 20px 0 70px 49 | 50 | &:before 51 | font-family: 'icomoon' 52 | font-style: normal 53 | font-weight: normal 54 | position: absolute 55 | font-size: 30px 56 | line-height: 30px 57 | height: 30px 58 | width: 30px 59 | top: 0 60 | bottom: 0 61 | left: 20px 62 | margin: auto 63 | text-align: center 64 | speak: none 65 | 66 | ul 67 | position: relative 68 | display: block 69 | list-style-type: none 70 | margin: 0 71 | padding: 0 72 | 73 | li 74 | position: relative 75 | display: block 76 | 77 | span 78 | +user-select(none) 79 | width: 100% 80 | background: #e0e0e0 81 | line-height: 60px 82 | height: 60px 83 | padding: 0 30px 0 75px 84 | display: block 85 | color: inherit 86 | cursor: pointer 87 | -webkit-backface-visibility: hidden 88 | -webkit-touch-callout: none 89 | font-size: 20px 90 | font-weight: normal 91 | 92 | +transform(translate3d(0, 0, 0)) 93 | 94 | &:hover 95 | background: #000 96 | color: #fff 97 | 98 | &:nth-child(1) span 99 | +transform(translate3d(0, -60px, 0)) 100 | +transition(transform 240ms ease 0ms) 101 | 102 | &:nth-child(2) span 103 | +transform(translate3d(0, -120px, 0)) 104 | +transition(transform 240ms ease 60ms) 105 | 106 | &:nth-child(3) span 107 | +transform(translate3d(0, -180px, 0)) 108 | +transition(transform 240ms ease 120ms) 109 | 110 | &.drop-after-open .drop-content ul li 111 | 112 | &:nth-child(1) span 113 | +transform(translate3d(0, 0, 0)) 114 | +transition(transform 240ms ease 120ms) 115 | 116 | &:nth-child(2) span 117 | +transform(translate3d(0, 0, 0)) 118 | +transition(transform 240ms ease 60ms) 119 | 120 | &:nth-child(3) span 121 | +transform(translate3d(0, 0, 0)) 122 | +transition(transform 240ms ease 0ms) 123 | 124 | &.drop-element-attached-bottom 125 | 126 | .drop-content ul li 127 | 128 | &:nth-child(1) span 129 | +transform(translate3d(0, 180px, 0)) 130 | +transition(transform 240ms ease 120ms) 131 | 132 | &:nth-child(2) span 133 | +transform(translate3d(0, 120px, 0)) 134 | +transition(transform 240ms ease 60ms) 135 | 136 | &:nth-child(3) span 137 | +transform(translate3d(0, 60px, 0)) 138 | +transition(transform 240ms ease 0ms) 139 | 140 | &.drop-after-open .drop-content ul li 141 | 142 | &:nth-child(1) span 143 | +transform(translate3d(0, 0, 0)) 144 | +transition(transform 240ms ease 0ms) 145 | 146 | &:nth-child(2) span 147 | +transform(translate3d(0, 0, 0)) 148 | +transition(transform 240ms ease 60ms) 149 | 150 | &:nth-child(3) span 151 | +transform(translate3d(0, 0, 0)) 152 | +transition(transform 240ms ease 120ms) -------------------------------------------------------------------------------- /dist/css/drop-theme-arrows.css: -------------------------------------------------------------------------------- 1 | .drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { 2 | box-sizing: border-box; } 3 | 4 | .drop-element { 5 | position: absolute; 6 | display: none; } 7 | .drop-element.drop-open { 8 | display: block; } 9 | 10 | .drop-element.drop-theme-arrows { 11 | max-width: 100%; 12 | max-height: 100%; } 13 | .drop-element.drop-theme-arrows .drop-content { 14 | border-radius: 5px; 15 | position: relative; 16 | font-family: inherit; 17 | background: #eee; 18 | color: #444; 19 | padding: 1em; 20 | font-size: 1.1em; 21 | line-height: 1.5em; 22 | -webkit-transform: translateZ(0); 23 | transform: translateZ(0); 24 | -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); 25 | filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); } 26 | .drop-element.drop-theme-arrows .drop-content:before { 27 | content: ""; 28 | display: block; 29 | position: absolute; 30 | width: 0; 31 | height: 0; 32 | border-color: transparent; 33 | border-width: 16px; 34 | border-style: solid; } 35 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content { 36 | margin-bottom: 16px; } 37 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content:before { 38 | top: 100%; 39 | left: 50%; 40 | margin-left: -16px; 41 | border-top-color: #eee; } 42 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content { 43 | margin-top: 16px; } 44 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content:before { 45 | bottom: 100%; 46 | left: 50%; 47 | margin-left: -16px; 48 | border-bottom-color: #eee; } 49 | .drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content { 50 | margin-right: 16px; } 51 | .drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content:before { 52 | left: 100%; 53 | top: 50%; 54 | margin-top: -16px; 55 | border-left-color: #eee; } 56 | .drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content { 57 | margin-left: 16px; } 58 | .drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content:before { 59 | right: 100%; 60 | top: 50%; 61 | margin-top: -16px; 62 | border-right-color: #eee; } 63 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { 64 | margin-top: 16px; } 65 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { 66 | bottom: 100%; 67 | left: 16px; 68 | border-bottom-color: #eee; } 69 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { 70 | margin-top: 16px; } 71 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before { 72 | bottom: 100%; 73 | right: 16px; 74 | border-bottom-color: #eee; } 75 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { 76 | margin-bottom: 16px; } 77 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before { 78 | top: 100%; 79 | left: 16px; 80 | border-top-color: #eee; } 81 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { 82 | margin-bottom: 16px; } 83 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before { 84 | top: 100%; 85 | right: 16px; 86 | border-top-color: #eee; } 87 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { 88 | margin-right: 16px; } 89 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before { 90 | top: 16px; 91 | left: 100%; 92 | border-left-color: #eee; } 93 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { 94 | margin-left: 16px; } 95 | .drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before { 96 | top: 16px; 97 | right: 100%; 98 | border-right-color: #eee; } 99 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { 100 | margin-right: 16px; } 101 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before { 102 | bottom: 16px; 103 | left: 100%; 104 | border-left-color: #eee; } 105 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { 106 | margin-left: 16px; } 107 | .drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before { 108 | bottom: 16px; 109 | right: 100%; 110 | border-right-color: #eee; } 111 | -------------------------------------------------------------------------------- /dist/css/drop-theme-twipsy.css: -------------------------------------------------------------------------------- 1 | .drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { 2 | box-sizing: border-box; } 3 | 4 | .drop-element { 5 | position: absolute; 6 | display: none; } 7 | .drop-element.drop-open { 8 | display: block; } 9 | 10 | .drop-element.drop-theme-twipsy { 11 | max-width: 100%; 12 | max-height: 100%; } 13 | .drop-element.drop-theme-twipsy .drop-content { 14 | border-radius: 5px; 15 | position: relative; 16 | font-family: inherit; 17 | background: #414141; 18 | color: #fff; 19 | padding: 1em; 20 | font-size: 1.1em; 21 | line-height: 1.5em; } 22 | .drop-element.drop-theme-twipsy .drop-content:before { 23 | content: ""; 24 | display: block; 25 | position: absolute; 26 | width: 0; 27 | height: 0; 28 | border-color: transparent; 29 | border-width: 10px; 30 | border-style: solid; } 31 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-center .drop-content { 32 | margin-bottom: 10px; } 33 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-center .drop-content:before { 34 | top: 100%; 35 | left: 50%; 36 | margin-left: -10px; 37 | border-top-color: #414141; } 38 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-center .drop-content { 39 | margin-top: 10px; } 40 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-center .drop-content:before { 41 | bottom: 100%; 42 | left: 50%; 43 | margin-left: -10px; 44 | border-bottom-color: #414141; } 45 | .drop-element.drop-theme-twipsy.drop-element-attached-right.drop-element-attached-middle .drop-content { 46 | margin-right: 10px; } 47 | .drop-element.drop-theme-twipsy.drop-element-attached-right.drop-element-attached-middle .drop-content:before { 48 | left: 100%; 49 | top: 50%; 50 | margin-top: -10px; 51 | border-left-color: #414141; } 52 | .drop-element.drop-theme-twipsy.drop-element-attached-left.drop-element-attached-middle .drop-content { 53 | margin-left: 10px; } 54 | .drop-element.drop-theme-twipsy.drop-element-attached-left.drop-element-attached-middle .drop-content:before { 55 | right: 100%; 56 | top: 50%; 57 | margin-top: -10px; 58 | border-right-color: #414141; } 59 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { 60 | margin-top: 10px; } 61 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { 62 | bottom: 100%; 63 | left: 10px; 64 | border-bottom-color: #414141; } 65 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { 66 | margin-top: 10px; } 67 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before { 68 | bottom: 100%; 69 | right: 10px; 70 | border-bottom-color: #414141; } 71 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { 72 | margin-bottom: 10px; } 73 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before { 74 | top: 100%; 75 | left: 10px; 76 | border-top-color: #414141; } 77 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { 78 | margin-bottom: 10px; } 79 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before { 80 | top: 100%; 81 | right: 10px; 82 | border-top-color: #414141; } 83 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { 84 | margin-right: 10px; } 85 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before { 86 | top: 10px; 87 | left: 100%; 88 | border-left-color: #414141; } 89 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { 90 | margin-left: 10px; } 91 | .drop-element.drop-theme-twipsy.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before { 92 | top: 10px; 93 | right: 100%; 94 | border-right-color: #414141; } 95 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { 96 | margin-right: 10px; } 97 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before { 98 | bottom: 10px; 99 | left: 100%; 100 | border-left-color: #414141; } 101 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { 102 | margin-left: 10px; } 103 | .drop-element.drop-theme-twipsy.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before { 104 | bottom: 10px; 105 | right: 100%; 106 | border-right-color: #414141; } 107 | 108 | .drop-element.drop-theme-twipsy { 109 | opacity: 0; 110 | -webkit-transition: opacity 150ms; 111 | transition: opacity 150ms; } 112 | .drop-element.drop-theme-twipsy .drop-content { 113 | box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2); 114 | border-radius: 2px; 115 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 116 | padding: 3px 8px; 117 | line-height: 18px; 118 | font-size: 11px; } 119 | .drop-element.drop-theme-twipsy.drop-open-transitionend { 120 | display: block; } 121 | .drop-element.drop-theme-twipsy.drop-after-open { 122 | opacity: 1; } 123 | -------------------------------------------------------------------------------- /dist/css/drop-theme-arrows-bounce-dark.min.css: -------------------------------------------------------------------------------- 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%} -------------------------------------------------------------------------------- /dist/css/drop-theme-arrows-bounce.min.css: -------------------------------------------------------------------------------- 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%} -------------------------------------------------------------------------------- /dist/css/drop-theme-hubspot-popovers.css: -------------------------------------------------------------------------------- 1 | .drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { 2 | box-sizing: border-box; } 3 | 4 | .drop-element { 5 | position: absolute; 6 | display: none; } 7 | .drop-element.drop-open { 8 | display: block; } 9 | 10 | .drop-element.drop-theme-hubspot-popovers { 11 | max-width: 100%; 12 | max-height: 100%; } 13 | .drop-element.drop-theme-hubspot-popovers .drop-content { 14 | border-radius: 5px; 15 | position: relative; 16 | font-family: inherit; 17 | background: #ebebeb; 18 | color: #444; 19 | padding: 1em; 20 | font-size: 1.1em; 21 | line-height: 1.5em; } 22 | .drop-element.drop-theme-hubspot-popovers .drop-content:before { 23 | content: ""; 24 | display: block; 25 | position: absolute; 26 | width: 0; 27 | height: 0; 28 | border-color: transparent; 29 | border-width: 10px; 30 | border-style: solid; } 31 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-center .drop-content { 32 | margin-bottom: 10px; } 33 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-center .drop-content:before { 34 | top: 100%; 35 | left: 50%; 36 | margin-left: -10px; 37 | border-top-color: #ebebeb; } 38 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-center .drop-content { 39 | margin-top: 10px; } 40 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-center .drop-content:before { 41 | bottom: 100%; 42 | left: 50%; 43 | margin-left: -10px; 44 | border-bottom-color: #ebebeb; } 45 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-right.drop-element-attached-middle .drop-content { 46 | margin-right: 10px; } 47 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-right.drop-element-attached-middle .drop-content:before { 48 | left: 100%; 49 | top: 50%; 50 | margin-top: -10px; 51 | border-left-color: #ebebeb; } 52 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-element-attached-middle .drop-content { 53 | margin-left: 10px; } 54 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-left.drop-element-attached-middle .drop-content:before { 55 | right: 100%; 56 | top: 50%; 57 | margin-top: -10px; 58 | border-right-color: #ebebeb; } 59 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { 60 | margin-top: 10px; } 61 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { 62 | bottom: 100%; 63 | left: 10px; 64 | border-bottom-color: #ebebeb; } 65 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { 66 | margin-top: 10px; } 67 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before { 68 | bottom: 100%; 69 | right: 10px; 70 | border-bottom-color: #ebebeb; } 71 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { 72 | margin-bottom: 10px; } 73 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before { 74 | top: 100%; 75 | left: 10px; 76 | border-top-color: #ebebeb; } 77 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { 78 | margin-bottom: 10px; } 79 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before { 80 | top: 100%; 81 | right: 10px; 82 | border-top-color: #ebebeb; } 83 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { 84 | margin-right: 10px; } 85 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before { 86 | top: 10px; 87 | left: 100%; 88 | border-left-color: #ebebeb; } 89 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { 90 | margin-left: 10px; } 91 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before { 92 | top: 10px; 93 | right: 100%; 94 | border-right-color: #ebebeb; } 95 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { 96 | margin-right: 10px; } 97 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before { 98 | bottom: 10px; 99 | left: 100%; 100 | border-left-color: #ebebeb; } 101 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { 102 | margin-left: 10px; } 103 | .drop-element.drop-theme-hubspot-popovers.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before { 104 | bottom: 10px; 105 | right: 100%; 106 | border-right-color: #ebebeb; } 107 | 108 | .drop-element.drop-theme-hubspot-popovers .drop-content { 109 | box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2); 110 | border-radius: 2px; 111 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 112 | padding: 3px; 113 | font-size: 13px; } 114 | .drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner { 115 | border: 1px solid #dbdbdb; 116 | padding: 14px; 117 | background: #fff; 118 | overflow: hidden; 119 | width: 280px; } 120 | .drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner .title { 121 | font-size: 18px; 122 | margin-top: 0; 123 | margin-bottom: 12px; 124 | font-weight: normal; 125 | line-height: 1; } 126 | .drop-element.drop-theme-hubspot-popovers .drop-content .drop-content-inner p:last-child { 127 | margin-bottom: 0; } 128 | -------------------------------------------------------------------------------- /dist/js/drop.min.js: -------------------------------------------------------------------------------- 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 2 | 3 | 4 | 5 | 6 | 22 | 23 | ## Drop 24 | 25 | Drop is a JavaScript and CSS library for creating dropdowns and other popups attached to elements on the page. Drop uses [Tether.js](http://github.hubspot.com/tether) to efficiently position its elements. 26 | 27 | Thank you for considering Drop. We believe it's the best way of creating dropdown-style elements available right now. 28 | 29 | ### Features 30 | 31 | Because Drop is built on [Tether](http://github.hubspot.com/tether), you get all of the benefits of its efficient and powerful positioning. 32 | 33 | - Drops automatically reposition on page resizes and scrolls, reorienting to stay in view. 34 | - Drop uses GPU accelerated positioning to maintain 60fps scrolling, even with dozens or hundreds of drops on screen and complex animation 35 | - Drops can be nested within other drops 36 | - Drops can be attached to any of 12 attachment points on the target, or you can leverage the full power of Tether to position your drop anywhere. 37 | - Drops can be configured to open when the user clicks, hovers, or focuses an element. 38 | - Drop is maintained by developers at [HubSpot](http://github.hubspot.com) who care about making it do everything you need. 39 | 40 | ### Dependencies 41 | 42 | Tether 43 | 44 | ### Browser Support 45 | 46 | IE9+ and all modern browsers 47 | 48 | ### Initialization 49 | 50 | To initialize a drop, create a `Drop` instance: 51 | 52 | ```coffeescript 53 | drop = new Drop 54 | target: document.querySelector('.drop-target') 55 | content: 'Welcome to the future!' 56 | position: 'bottom left' 57 | openOn: 'click' 58 | ``` 59 | 60 | You can also create Drops from a custom "context," allowing you to style Drops within that context with CSS 61 | classes prefixed with an arbitrary string. By default, that `classPrefix` is `drop`. To define a new context: 62 | 63 | ```coffeescript 64 | MyDropContext = Drop.createContext 65 | classPrefix: 'my-drop' 66 | 67 | drop = new MyDropContext 68 | target: document.querySelector('.my-drop-target') 69 | content: 'Welcome to my new Drop context!' 70 | ``` 71 | 72 | Any Drops created within this context would be styled with classes like `my-drop-open` and `my-drop-content` 73 | instead of `drop-open` and `drop-content`. Additionally, any options that would be set via `data-drop` 74 | attributes in the default context would be set via `data-my-drop` instead. 75 | 76 | ### Methods 77 | 78 | These methods can be called on the `Drop` instance returned when creating a drop. 79 | 80 | #### `open()` 81 | 82 | Opens the drop. Specifically, this adds `drop-open` and other classes to the drop. 83 | 84 | #### `close()` 85 | 86 | Closes the drop. Specifically, this removes `drop-open` and other classes from the drop. Closed drops will still remain in the DOM. 87 | 88 | #### `remove()` 89 | 90 | Remove the drop from the DOM. The drop will be readded when it's next opened. It can be used as an alternative to `close`. 91 | 92 | #### `toggle()` 93 | 94 | Will close the drop if opened, and open if closed. 95 | 96 | #### `isOpened()` 97 | 98 | Returns true if the drop is opened. 99 | 100 | #### `position()` 101 | 102 | Reposition the drop. Call if you change the content of the drop or the position of the element it's attached to. 103 | 104 | #### `destroy()` 105 | 106 | Remove the drop along with all of its event bindings. Calling any method after `destroy` is undefined. 107 | 108 | ### Options 109 | 110 | The following options can be passed to the drop constructor: 111 | 112 | #### `target` 113 | 114 | The element (or a selector for an element) the Drop should stay adjacent to on the page. An action on this element, such as 115 | a click or hover, can be set to open the drop. 116 | 117 | #### `content` 118 | 119 | The content that should be rendered into the Drop. Can be: 120 | 121 | - A DOM element 122 | - An HTML string 123 | - A function that returns an HTML string or a DOM element. `content()` is called on each open, with the drop instance passed as the first argument. 124 | 125 | If this option is not set, it defaults to the value of the `data-${classPrefix}` (normally `data-drop`) 126 | attribute on the target element. 127 | 128 | #### `position` 129 | 130 | Position specifies the attachment point (on the target) to attach the drop to. Options include: 131 | 132 | ```coffeescript 133 | 'top left' 134 | 'left top' 135 | 'left middle' 136 | 'left bottom' 137 | 'bottom left' 138 | 'bottom center' 139 | 'bottom right' 140 | 'right bottom' 141 | 'right middle' 142 | 'right top' 143 | 'top right' 144 | 'top center' 145 | ``` 146 | 147 | If this option is not set, it defaults to the value of the `data-${classPrefix}-position` (normally 148 | `data-drop-position`) attribute on the target element. 149 | 150 | More information about attachment can be found in the [Tether documentation](http://tether.io). 151 | 152 | #### `openOn` 153 | 154 | Specifies what event on the target opens the drop. If you set this to `undefined` or `null` you will need to manually call `.open()` and `.close()` on the `drop` instance. 155 | `'always'` will open the drop immediately when it's rendered and leave it open. 156 | 157 | ```coffeescript 158 | 'click' 159 | 'hover' 160 | 'focus' 161 | 'always' 162 | ``` 163 | 164 | If this option is not set, it defaults to the value of the `data-${classPrefix}-openOn` (normally 165 | `data-drop-openOn`) attribute on the target element. 166 | 167 | #### `constrainToWindow` 168 | 169 | If set to `true`, uses [Tether's](http://github.hubspot.com/tether) `constraints` list to flip the drop when it would otherwise be outside the viewport. This will cause drops with bottom attachments to switch to top when colliding with the bottom of the page and vice-versa. Dropdowns will not pin to the edge of the window if the user scrolls away from the target after opening a drop, but you can add that behavior by adding constraints through the `tetherOptions` option. 170 | 171 | ```coffeescript 172 | true 173 | false 174 | ``` 175 | 176 | #### `constrainToScrollParent` 177 | 178 | Similar to `constrainToWindow` but for the target element's first scroll parent: the first parent that has `overflow: auto` or `overflow: scroll` set, or the body, whichever comes first. 179 | 180 | #### `classes` 181 | 182 | Additional class names to be added to the drop. These can be set to apply a theme (for example, [`drop-theme-arrows-bounce-dark`](https://github.com/HubSpot/drop/blob/master/css/drop-theme-arrows-bounce-dark.css)) and/or they can be set to apply custom styling to child elements of the drop. 183 | 184 | #### `remove` 185 | 186 | Set to `true` if you'd like the drop element to be removed from the DOM when the drop is closed and recreated when it's opened. 187 | 188 | ```coffeescript 189 | true 190 | false 191 | ``` 192 | 193 | #### `beforeClose` 194 | 195 | Function that is run before closing the drop. If the function returns `false`, the closing of the drop will be prevented. Useful if you only want to programatically close the drop. 196 | 197 | #### `hoverOpenDelay` 198 | 199 | Amount of time (in milliseconds) to delay opening the drop after `mouseover` 200 | 201 | #### `hoverCloseDelay` 202 | 203 | Amount of time (in milliseconds) to delay closing the drop after `mouseout` 204 | 205 | #### `focusDelay` 206 | 207 | Amount of time (in milliseconds) to delay opening the drop after `focus` 208 | 209 | #### `blurDelay` 210 | 211 | Amount of time (in milliseconds) to delay closing the drop after `blur` 212 | 213 | #### `openDelay` 214 | 215 | Sets both the `hoverOpenDelay` and `focusDelay` 216 | 217 | #### `closeDelay` 218 | 219 | Sets both the `hoverCloseDelay` and `blurDelay` 220 | 221 | #### `tetherOptions` 222 | 223 | Additional options can be passed to customize Drop even further. These will get passed to the underlying Tether instance used to position the drop. See the the [Tether documentation](http://tether.io) for more information. Set to `false` to disable Tether. 224 | 225 | #### Defaults 226 | 227 | The default option values are: 228 | 229 | ```coffeescript 230 | defaultOptions = 231 | position: 'bottom left' 232 | openOn: 'click' 233 | constrainToWindow: true 234 | constrainToScrollParent: true 235 | classes: '' 236 | hoverOpenDelay: 0 237 | hoverCloseDelay: 50 238 | focusDelay: 0 239 | blurDelay: 50 240 | tetherOptions: {} 241 | ``` 242 | 243 | ### Events 244 | 245 | The drop instance has a few additional methods which are used for event binding: 246 | 247 | - `on(eventName, handler, [ctx])` 248 | - `off(eventName, [handler])` 249 | - `once(eventName, handelr, [ctx])` 250 | 251 | The following events are fired: 252 | 253 | - `open` 254 | - `close` 255 | 256 | ### Changing Content 257 | 258 | You can access the DOM element which contains the drop's content at `.content`. If you manipulate this content, make sure to call `.position()` to ensure that the 259 | drop remains positioned correctly. 260 | 261 | ### Body Class 262 | 263 | Drop adds a class to the body whenever a drop is open. It defaults to `drop-open`. See the [Embedding documentation](http://github.hubspot.com/drop/overview/embedding_drop/) for more details. 264 | -------------------------------------------------------------------------------- /dist/css/drop-theme-arrows-bounce.css: -------------------------------------------------------------------------------- 1 | .drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { 2 | box-sizing: border-box; } 3 | 4 | .drop-element { 5 | position: absolute; 6 | display: none; } 7 | .drop-element.drop-open { 8 | display: block; } 9 | 10 | .drop-element.drop-theme-arrows-bounce { 11 | max-width: 100%; 12 | max-height: 100%; } 13 | .drop-element.drop-theme-arrows-bounce .drop-content { 14 | border-radius: 5px; 15 | position: relative; 16 | font-family: inherit; 17 | background: #fff; 18 | color: #444; 19 | padding: 1em; 20 | font-size: 1.1em; 21 | line-height: 1.5em; 22 | -webkit-transform: translateZ(0); 23 | transform: translateZ(0); 24 | -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); 25 | filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); } 26 | .drop-element.drop-theme-arrows-bounce .drop-content:before { 27 | content: ""; 28 | display: block; 29 | position: absolute; 30 | width: 0; 31 | height: 0; 32 | border-color: transparent; 33 | border-width: 12px; 34 | border-style: solid; } 35 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-center .drop-content { 36 | margin-bottom: 12px; } 37 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-center .drop-content:before { 38 | top: 100%; 39 | left: 50%; 40 | margin-left: -12px; 41 | border-top-color: #fff; } 42 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content { 43 | margin-top: 12px; } 44 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content:before { 45 | bottom: 100%; 46 | left: 50%; 47 | margin-left: -12px; 48 | border-bottom-color: #fff; } 49 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-element-attached-middle .drop-content { 50 | margin-right: 12px; } 51 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-element-attached-middle .drop-content:before { 52 | left: 100%; 53 | top: 50%; 54 | margin-top: -12px; 55 | border-left-color: #fff; } 56 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-element-attached-middle .drop-content { 57 | margin-left: 12px; } 58 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-element-attached-middle .drop-content:before { 59 | right: 100%; 60 | top: 50%; 61 | margin-top: -12px; 62 | border-right-color: #fff; } 63 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { 64 | margin-top: 12px; } 65 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { 66 | bottom: 100%; 67 | left: 12px; 68 | border-bottom-color: #fff; } 69 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { 70 | margin-top: 12px; } 71 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before { 72 | bottom: 100%; 73 | right: 12px; 74 | border-bottom-color: #fff; } 75 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { 76 | margin-bottom: 12px; } 77 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before { 78 | top: 100%; 79 | left: 12px; 80 | border-top-color: #fff; } 81 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { 82 | margin-bottom: 12px; } 83 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before { 84 | top: 100%; 85 | right: 12px; 86 | border-top-color: #fff; } 87 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { 88 | margin-right: 12px; } 89 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before { 90 | top: 12px; 91 | left: 100%; 92 | border-left-color: #fff; } 93 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { 94 | margin-left: 12px; } 95 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before { 96 | top: 12px; 97 | right: 100%; 98 | border-right-color: #fff; } 99 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { 100 | margin-right: 12px; } 101 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before { 102 | bottom: 12px; 103 | left: 100%; 104 | border-left-color: #fff; } 105 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { 106 | margin-left: 12px; } 107 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before { 108 | bottom: 12px; 109 | right: 100%; 110 | border-right-color: #fff; } 111 | 112 | .drop-element.drop-theme-arrows-bounce { 113 | -webkit-transform: translateZ(0); 114 | transform: translateZ(0); 115 | -webkit-transition: opacity 100ms; 116 | transition: opacity 100ms; 117 | opacity: 0; } 118 | .drop-element.drop-theme-arrows-bounce .drop-content { 119 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); 120 | transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); 121 | -webkit-transform: scale(0) translateZ(0); 122 | transform: scale(0) translateZ(0); } 123 | .drop-element.drop-theme-arrows-bounce.drop-open { 124 | display: none; } 125 | .drop-element.drop-theme-arrows-bounce.drop-open-transitionend { 126 | display: block; } 127 | .drop-element.drop-theme-arrows-bounce.drop-after-open { 128 | -webkit-transition: none; 129 | transition: none; 130 | opacity: 1; } 131 | .drop-element.drop-theme-arrows-bounce.drop-after-open .drop-content { 132 | -webkit-transform: scale(1) translateZ(0); 133 | transform: scale(1) translateZ(0); } 134 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-center .drop-content { 135 | -webkit-transform-origin: 50% calc(100% + 12px); 136 | -ms-transform-origin: 50% calc(100% + 12px); 137 | transform-origin: 50% calc(100% + 12px); } 138 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-center .drop-content { 139 | -webkit-transform-origin: 50% -12px; 140 | -ms-transform-origin: 50% -12px; 141 | transform-origin: 50% -12px; } 142 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-right.drop-element-attached-middle .drop-content { 143 | -webkit-transform-origin: calc(100% + 12px) 50%; 144 | -ms-transform-origin: calc(100% + 12px) 50%; 145 | transform-origin: calc(100% + 12px) 50%; } 146 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-left.drop-element-attached-middle .drop-content { 147 | -webkit-transform-origin: -12px 50%; 148 | -ms-transform-origin: -12px 50%; 149 | transform-origin: -12px 50%; } 150 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { 151 | -webkit-transform-origin: 0 -12px; 152 | -ms-transform-origin: 0 -12px; 153 | transform-origin: 0 -12px; } 154 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { 155 | -webkit-transform-origin: 100% -12px; 156 | -ms-transform-origin: 100% -12px; 157 | transform-origin: 100% -12px; } 158 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { 159 | -webkit-transform-origin: 0 calc(100% + 12px); 160 | -ms-transform-origin: 0 calc(100% + 12px); 161 | transform-origin: 0 calc(100% + 12px); } 162 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { 163 | -webkit-transform-origin: 100% calc(100% + 12px); 164 | -ms-transform-origin: 100% calc(100% + 12px); 165 | transform-origin: 100% calc(100% + 12px); } 166 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { 167 | -webkit-transform-origin: calc(100% + 12px) 0; 168 | -ms-transform-origin: calc(100% + 12px) 0; 169 | transform-origin: calc(100% + 12px) 0; } 170 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { 171 | -webkit-transform-origin: -12px 0; 172 | -ms-transform-origin: -12px 0; 173 | transform-origin: -12px 0; } 174 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { 175 | -webkit-transform-origin: calc(100% + 12px) 100%; 176 | -ms-transform-origin: calc(100% + 12px) 100%; 177 | transform-origin: calc(100% + 12px) 100%; } 178 | .drop-element.drop-theme-arrows-bounce.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { 179 | -webkit-transform-origin: -12px 100%; 180 | -ms-transform-origin: -12px 100%; 181 | transform-origin: -12px 100%; } 182 | -------------------------------------------------------------------------------- /dist/css/drop-theme-arrows-bounce-dark.css: -------------------------------------------------------------------------------- 1 | .drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before { 2 | box-sizing: border-box; } 3 | 4 | .drop-element { 5 | position: absolute; 6 | display: none; } 7 | .drop-element.drop-open { 8 | display: block; } 9 | 10 | .drop-element.drop-theme-arrows-bounce-dark { 11 | max-width: 100%; 12 | max-height: 100%; } 13 | .drop-element.drop-theme-arrows-bounce-dark .drop-content { 14 | border-radius: 5px; 15 | position: relative; 16 | font-family: inherit; 17 | background: #000; 18 | color: #fff; 19 | padding: 1em; 20 | font-size: 1.1em; 21 | line-height: 1.5em; } 22 | .drop-element.drop-theme-arrows-bounce-dark .drop-content:before { 23 | content: ""; 24 | display: block; 25 | position: absolute; 26 | width: 0; 27 | height: 0; 28 | border-color: transparent; 29 | border-width: 12px; 30 | border-style: solid; } 31 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content { 32 | margin-bottom: 12px; } 33 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content:before { 34 | top: 100%; 35 | left: 50%; 36 | margin-left: -12px; 37 | border-top-color: #000; } 38 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content { 39 | margin-top: 12px; } 40 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content:before { 41 | bottom: 100%; 42 | left: 50%; 43 | margin-left: -12px; 44 | border-bottom-color: #000; } 45 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content { 46 | margin-right: 12px; } 47 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content:before { 48 | left: 100%; 49 | top: 50%; 50 | margin-top: -12px; 51 | border-left-color: #000; } 52 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content { 53 | margin-left: 12px; } 54 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content:before { 55 | right: 100%; 56 | top: 50%; 57 | margin-top: -12px; 58 | border-right-color: #000; } 59 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { 60 | margin-top: 12px; } 61 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before { 62 | bottom: 100%; 63 | left: 12px; 64 | border-bottom-color: #000; } 65 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { 66 | margin-top: 12px; } 67 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before { 68 | bottom: 100%; 69 | right: 12px; 70 | border-bottom-color: #000; } 71 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { 72 | margin-bottom: 12px; } 73 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before { 74 | top: 100%; 75 | left: 12px; 76 | border-top-color: #000; } 77 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { 78 | margin-bottom: 12px; } 79 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before { 80 | top: 100%; 81 | right: 12px; 82 | border-top-color: #000; } 83 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { 84 | margin-right: 12px; } 85 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before { 86 | top: 12px; 87 | left: 100%; 88 | border-left-color: #000; } 89 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { 90 | margin-left: 12px; } 91 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before { 92 | top: 12px; 93 | right: 100%; 94 | border-right-color: #000; } 95 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { 96 | margin-right: 12px; } 97 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before { 98 | bottom: 12px; 99 | left: 100%; 100 | border-left-color: #000; } 101 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { 102 | margin-left: 12px; } 103 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before { 104 | bottom: 12px; 105 | right: 100%; 106 | border-right-color: #000; } 107 | 108 | .drop-element.drop-theme-arrows-bounce-dark { 109 | -webkit-transform: translateZ(0); 110 | transform: translateZ(0); 111 | -webkit-transition: opacity 100ms; 112 | transition: opacity 100ms; 113 | opacity: 0; } 114 | .drop-element.drop-theme-arrows-bounce-dark .drop-content { 115 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); 116 | transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.55); 117 | -webkit-transform: scale(0) translateZ(0); 118 | transform: scale(0) translateZ(0); } 119 | .drop-element.drop-theme-arrows-bounce-dark.drop-open { 120 | display: none; } 121 | .drop-element.drop-theme-arrows-bounce-dark.drop-open-transitionend { 122 | display: block; } 123 | .drop-element.drop-theme-arrows-bounce-dark.drop-after-open { 124 | -webkit-transition: none; 125 | transition: none; 126 | opacity: 1; } 127 | .drop-element.drop-theme-arrows-bounce-dark.drop-after-open .drop-content { 128 | -webkit-transform: scale(1) translateZ(0); 129 | transform: scale(1) translateZ(0); } 130 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content { 131 | -webkit-transform-origin: 50% calc(100% + 12px); 132 | -ms-transform-origin: 50% calc(100% + 12px); 133 | transform-origin: 50% calc(100% + 12px); } 134 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content { 135 | -webkit-transform-origin: 50% -12px; 136 | -ms-transform-origin: 50% -12px; 137 | transform-origin: 50% -12px; } 138 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content { 139 | -webkit-transform-origin: calc(100% + 12px) 50%; 140 | -ms-transform-origin: calc(100% + 12px) 50%; 141 | transform-origin: calc(100% + 12px) 50%; } 142 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content { 143 | -webkit-transform-origin: -12px 50%; 144 | -ms-transform-origin: -12px 50%; 145 | transform-origin: -12px 50%; } 146 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { 147 | -webkit-transform-origin: 0 -12px; 148 | -ms-transform-origin: 0 -12px; 149 | transform-origin: 0 -12px; } 150 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { 151 | -webkit-transform-origin: 100% -12px; 152 | -ms-transform-origin: 100% -12px; 153 | transform-origin: 100% -12px; } 154 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { 155 | -webkit-transform-origin: 0 calc(100% + 12px); 156 | -ms-transform-origin: 0 calc(100% + 12px); 157 | transform-origin: 0 calc(100% + 12px); } 158 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { 159 | -webkit-transform-origin: 100% calc(100% + 12px); 160 | -ms-transform-origin: 100% calc(100% + 12px); 161 | transform-origin: 100% calc(100% + 12px); } 162 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { 163 | -webkit-transform-origin: calc(100% + 12px) 0; 164 | -ms-transform-origin: calc(100% + 12px) 0; 165 | transform-origin: calc(100% + 12px) 0; } 166 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { 167 | -webkit-transform-origin: -12px 0; 168 | -ms-transform-origin: -12px 0; 169 | transform-origin: -12px 0; } 170 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { 171 | -webkit-transform-origin: calc(100% + 12px) 100%; 172 | -ms-transform-origin: calc(100% + 12px) 100%; 173 | transform-origin: calc(100% + 12px) 100%; } 174 | .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { 175 | -webkit-transform-origin: -12px 100%; 176 | -ms-transform-origin: -12px 100%; 177 | transform-origin: -12px 100%; } 178 | -------------------------------------------------------------------------------- /docs/welcome/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drop 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 |
30 |
31 | 32 |
33 |
34 |
35 |

Examples

36 |
37 |
38 |
39 |

"The Popup"

40 |

Scale Bounce with Arrows

41 |
42 |
43 | Size 44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 |

"The Social Share"

52 |

List Flyout

53 |
54 |
55 | Share 56 |
57 |
    58 |
  • Facebook
    • 59 |
  • Twitter
    • 60 |
  • GitHub
    • 61 |
62 |
63 |
64 |
65 |
66 |
67 |

"The Hover Card"

68 |

Facebook-style Image Hover Card

69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 | 77 |
78 |
79 | 80 |
81 |
82 |
83 | 84 |
85 |
86 | Elias Torres 87 |
88 |
89 | VP Engineering, HubSpot 90 |
91 |
92 |
93 | 94 |
95 | 96 |
97 |
98 |
99 |
100 |
101 |

"The Popover"

102 |

Popover Messages

103 |
104 |
105 | About Drop.js 106 |
107 |
108 |

Drop.js

109 |

Drop.js is a fast and capable dropdown library built on Tether.

110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 | 128 |
129 |
130 |
131 |
132 | 133 |
134 |
135 |

How to Use

136 |

Drop is an open-source JavaScript and CSS library that creates and positions dropdowns. It's powered by Tether.js.

137 |

To use, first download the latest tether and drop releases. 138 |

Then add this to your page:

139 | 
<link rel="stylesheet" href="drop-theme-arrows.css" />
140 | <script src="tether.min.js"></script>
141 | <script src="drop.min.js"></script>
142 |

Then you can start creating drops. Learn more by visiting the documentation. 143 |

144 |
145 | 146 |