├── .editorconfig ├── .gitattributes ├── .gitignore ├── LICENSE.txt ├── README.md ├── bower.json ├── demo ├── ajax-content.html ├── apple-touch-icon-114x114.png ├── apple-touch-icon-144x144.png ├── apple-touch-icon-72x72.png ├── apple-touch-icon.png ├── css │ ├── demo.css │ └── demo.scss ├── favicon.ico ├── humaan-head.png ├── img │ ├── modaal-loading.gif │ └── temp │ │ ├── gallery-1.jpg │ │ ├── gallery-2.jpg │ │ ├── gallery-3.jpg │ │ ├── gallery-4.jpg │ │ ├── gallery-thumb-1.jpg │ │ ├── gallery-thumb-2.jpg │ │ ├── gallery-thumb-3.jpg │ │ └── gallery-thumb-4.jpg ├── js │ └── demo.js ├── shape-rpt-retina.png ├── shape-rpt.png ├── social-share-modaal.png └── social-share.png ├── dist ├── css │ ├── modaal.css │ ├── modaal.min.css │ └── modaal.scss └── js │ ├── modaal.js │ └── modaal.min.js ├── gulpfile.js ├── index.html ├── package.json └── source ├── css ├── modaal.css └── modaal.scss └── js └── modaal.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 4 9 | indent_style = tab 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # osx noise 2 | .DS_Store 3 | .Spotlight-V100 4 | .Trashes 5 | ehthumbs.db 6 | Thumbs.db 7 | 8 | # xcode noise 9 | build/* 10 | *.mode1 11 | *.mode1v3 12 | *.mode2v3 13 | *.perspective 14 | *.perspectivev3 15 | *.pbxuser 16 | *.xcworkspace 17 | xcuserdata 18 | 19 | # svn & cvs 20 | .svn 21 | CVS 22 | 23 | # sass 24 | *.scssc 25 | *.css.map 26 | 27 | # bower 28 | bower_components 29 | 30 | # general 31 | *.log 32 | 33 | # node_modules 34 | node_modules/* 35 | 36 | # ides 37 | .idea 38 | 39 | package-lock.json -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2016 Humaan (http://humaan.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | *** 4 | 5 | - Version 0.4.4 6 | - Requires jQuery 1.11.2 or higher (v2 not tested, v3 works but not extensively stress tested). 7 | - Built by [Humaan](http://www.humaan.com) 8 | 9 | *** 10 | 11 | # Modaal 12 | Modaal is a WCAG 2.0 Level AA accessible modal window plugin. 13 | 14 | 15 | ## Demos 16 | [View Modaal Demos](http://humaan.com/modaal) 17 | 18 | 19 | # Another modal plugin? why? 20 | It's hard to find a plugin with the right mix of quality, flexibility and accessibility. We thought it would be interesting to develop something that would work in a variety of projects, furthering the cause for an accessible web. 21 | 22 | *** 23 | 24 | ## 1. Getting Setup 25 | 26 | #### 1.1. Installation 27 | 28 | - [Download ZIP](https://github.com/humaan/Modaal/archive/master.zip) 29 | - First, copy and paste `js/modaal.min.js` in your project, and link to it before the closing `` element. 30 | - Next, you'll need to copy and paste the plugin's css into your project. We include both a SASS file and CSS file for flexibility. 31 | - Lastly, link to your new `modaal.css` file before the closing `` element. 32 | 33 | Note: This plugin requires your website or application already runs a copy of [jQuery](http://jquery.com/), version 1.11.2 or higher. Currently version 2 has not been tested. Version 3 works but has not been stress tested for bugs/issues. 34 | 35 | 36 | #### 1.2. Installation with Package Managers 37 | 38 | Modaal is now setup and ready to be used with [Bower](https://bower.io/) and [NPM](https://www.npmjs.com/package/modaal) and can be installed using the following commands. 39 | 40 | ```shell 41 | bower install modaal 42 | 43 | npm install modaal 44 | ``` 45 | 46 | #### 1.3 Installation with CDN 47 | 48 | Modaal is now setup and ready to be used with CDN [JSDelivr](http://www.jsdelivr.com/projects/modaal) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/modaal/badge)](https://www.jsdelivr.com/package/npm/modaal) 49 | 50 | 51 | #### 1.4. The Basics 52 | 53 | Out of the box Modaal is setup to work using inline content using as little customisation as possible. The first thing you'll require is a link to trigger the modal window. It's recommended that your `href` attribute targets a unique ID for a hidden element on the page containing your modal content. Like so: 54 | 55 | ```html 56 | Show 57 | 60 | ``` 61 | ```js 62 | $('.inline').modaal(); 63 | ``` 64 | 65 | If you would prefer your trigger element is _not_ an ``, you can define a `content_source` value like so: 66 | 67 | ```html 68 | 69 | 72 | ``` 73 | ```js 74 | $('.inline').modaal({ 75 | content_source: '#inline' 76 | }); 77 | ``` 78 | 79 | 80 | ## 2. Configuration 81 | 82 | #### 2.1. Practical Example 83 | ```js 84 | $('.my-link').modaal({ 85 | type: 'ajax', 86 | loading_content: 'Loading content, please wait.' 87 | }); 88 | ``` 89 | 90 | #### 2.2. Configuration Options 91 | key | type | default | values | notes 92 | ----|------|---------|--------|------- 93 | type|`string`|`inline`|`ajax`
`inline`
`image`
`iframe`
`confirm`
`video`
`instagram`| 94 | content_source|`string`|null||Accepts a string value for your target element, such as '#my-content'. This allows for when trigger element is an `` link. Not to be confused with the already existing `source` event. 95 | animation|`string`|`fade`|`fade`, `none`| 96 | animation_speed|`integer`|`300`||Animation speed is the duration it takes to reveal the Modaal window once triggered. It's important to note, that if you change this, you must also change the `after_callback_delay` below so that callback events sync up. This will be overwritten and set to `0` if `type` is `none`. 97 | after_callback_delay|`integer`|`350`||Specify a delay value for the after open callbacks. This is necessary because with the bundled animations have a set duration in the bundled CSS. Specify a delay of the same amount as the animation duration in so more accurately fire the after open/close callbacks. Defaults 350, does not apply if animation is 'none', after open callbacks are dispatched immediately 98 | is_locked|`boolean`|`false`|`true`
`false`|Set this to `true` to disable closing the modal via keypress or by clicking the close or background. Beware that if `type` is `confirm` there will be no interface to dismiss the modal. If `is_locked` is `true`, you'd have to programmatically arrange to dismiss the modal. Confirm modals are always locked regardless of this option. 99 | hide_close|`boolean`|`false`|`true`
`false`|Set this to `true` to hide the close modal button. Key press and overlay click will still close the modal. This method is best used when you want to put a custom close button inside the modal container space. 100 | background|`string`|`#000`||Sets the background overlay color 101 | overlay_opacity|`float`|`0.8`||Sets the background overlay transparency 102 | overlay_close|`boolean`|`true`|`true`
`false`|Controls whether the overlay background can be clicked to close. 103 | accessible_title|`string`|`Dialog Window`||Set the `aria-label` attribute value used for Accessibility purposes. 104 | start_open|`boolean`|`false`|`true`
`false`|Set this to `true` if you want the Modaal window to launch immediately on load. 105 | fullscreen|`boolean`|`false`|`true`
`false`|Set this to `true` to make the Modaal fill the entire screen, false will default to own width/height attributes. 106 | custom_class|`string`|`''`||Fill in this string with a custom class that will be applied to the outer most modal wrapper. 107 | background_scroll|`boolean`|`false`|`true`
`false`|Set this to` true` to enable the page to scroll behind the open modal 108 | should_open|`boolean`
`function`|`true`||Set to `false` or make the closure return `false` to prevent the modal from opening 109 | close_text|`string`|`Close`||String for close button text. Available for localisation and alternative languages to be used. 110 | close_aria_label|`string`|`Close (Press escape to close)`||String for close button aria-label attribute (value that screen readers will read out). Available for localisation and alternative languages to be used. 111 | width|`integer`|null||Set the desired width of the modal. 112 | height|`integer`|null||Set the desired height of the modal. 113 | gallery_active_class|`string`|`gallery_active_item`||Active class applied to the currently active image or image slide in a gallery 114 | outer_controls|`boolean`|`false`|`true`
`false`|Set to true to put the next/prev controls outside the Modaal wrapper, at the edges of the browser window. 115 | confirm_button_text|`string`|`Confirm`||Text on the confirm button. 116 | confirm_cancel_button_text|`string`|`Cancel`||Text on the confirm modal cancel button. 117 | confirm_title|`string`|`Confirm Title`||Title for confirm modal. Default 118 | confirm_content|`string`|`

This is the default confirm dialog content. Replace me through the options

`||HTML content for confirm message 119 | loading_content|`string`|`Loading …`||HTML content for loading message. 120 | loading_class|`string`|`is_loading`||Class name to be applied while content is loaded via AJAX. 121 | ajax_error_class|`string`|`modaal-error`||Class name to be applied when content has failed to load. Default is '' 122 | instagram_id|`string`|`null`||Unique photo ID for an Instagram photo. 123 | 124 | #### 2.3. Inline Attribute Configuration 125 | Modaal has been developed to support common jQuery configuration options, but in an effort to extend functionality and widen its usage we've developed support for inline `data-option-name` attribute support. 126 | 127 | To enable this, the Modaal trigger link must have a class of `modaal`, then you can add attributes to the link as needed like so: 128 | 129 | ```html 130 | Show 131 | ``` 132 | 133 | Or for non `` elements: 134 | 135 | ```html 136 | 137 | ``` 138 | 139 | It's important to note, that configuration options that contain an underscore (`_`) in them need to be replaced with a hyphen (`-`) in it's respective html attribute. For example, `overlay_opacity` configuration would read `data-overlay-opacity="0.8"`. 140 | 141 | 142 | #### 2.4. Configuration Events 143 | event | params | notes 144 | ------|--------|------- 145 | before_open|`event`|Executed before the modaal has revealed 146 | after_open|`modal_wrapper`|Executed once the duration for Option `after_callback_delay` has expired after the open method is called. 147 | before_close|`modal_wrapper`|Executed once the Modaal has been instructed to close. 148 | after_close||Executed once the the duration for `after_callback_delay` has expired after the close method is called. 149 | before_image_change|`current_item`
`incoming_item`|Executed before the image changes in a gallery Modaal. 150 | after_image_change|`current_item`| Executed after the image has changed in a gallery Modaal. 151 | confirm_callback|`lastFocus`|Executed when the confirm button is pressed as opposed to cancel. 152 | confirm_cancel_callback|`lastFocus`|Executed when the cancel button is pressed as opposed to confirm. 153 | source||Callback function executed on the default source, it is intended to transform the source (href in an AJAX modal or iframe). The function passes in the triggering element as well as the default source depending of the modal type. The default output of the function is an untransformed default source. 154 | ajax_success|`target`|Callback for when AJAX content is loaded in 155 | 156 | 157 | ###### 2.4.1 Working With Events 158 | There are two approaches to using events. The first is to call the entire `function() { }` in where the event configuration is set as seen below in `before_open`, and the second is to reference only the JS function name where the rest of the action occurs, as seen below in `after_open`. 159 | ```js 160 | $('.my-link').modaal({ 161 | before_open: function() { 162 | alert('Before open'); 163 | }, 164 | after_open: myFunction 165 | }); 166 | 167 | function myFunction() { 168 | alert('After open'); 169 | } 170 | ``` 171 | 172 | 173 | ## 3. Methods 174 | 175 | 176 | #### 3.1. Programatically Creating Modaals 177 | To initialise a programatically created Modaal, but not open, it can been called like any other doc ready instance, with 178 | ```js 179 | $('.my-link').modaal(); 180 | ``` 181 | 182 | Or with any options as available: 183 | ```js 184 | $('.my-link').modaal({ 185 | type: 'ajax', 186 | loading_content: 'Loading content, please wait.' 187 | }); 188 | ``` 189 | 190 | 191 | #### 3.2. Programatically Open a Modaal 192 | For any modaal instance that has already been initialised, it can be triggered to open with 193 | ```js 194 | $('.my-link').modaal('open'); 195 | ``` 196 | 197 | If the modaal has been programatically created and needs to open straight away, the following approach can be used to initialise _and_ open immediately: 198 | ```js 199 | $('.my-link').modaal({ start_open: true }); 200 | ``` 201 | This approach allows you to define other options that may be required as well as open immediately once it's ready. 202 | 203 | 204 | #### 3.3. Programatically Close a Modaal 205 | Currently Modaal only supports a close method which can be called like so. 206 | ```js 207 | $('.my-link').modaal('close'); 208 | ``` 209 | Based on this example, we know we've already established (and opened) the modal associated to the `.my-link` class, so to close we use the same selector with a string of `close` instead of options; 210 | 211 | 212 | 213 | ## 4. Tips & Tricks 214 | 215 | #### 4.1. Avoiding Conflicts 216 | Through development, we've worked hard to ensure no conflicts will occur with any existing code, however it's important to note some of the classes currently in use and best to avoid in your own stylesheet. These include: 217 | 218 | `modaal-inline`, `modaal-ajax`, `modaal-image`, `modaal-confirm`, `modaal-iframe`, `modaal-video`, `modaal-wrapper`, `modaal-outer-wrapper`, `modaal-inner-wrapper`, `modaal-container`, `modaal-close`, `modaal-content` 219 | 220 | #### 4.2. Customising the CSS 221 | We wanted to provide users the chance to really extend on Modaal's base through customising the modal styles to meet their own project. We understand working with various projects and differing styles how important it is to tailor the aesthetics right down to even the most minute detail. 222 | 223 | Provided in the distribution files are both un-minified css and SASS files to best integrate with your workflow. Within the SASS file you'll find a number of variables located at the top of the document for which you can tweak as desired. 224 | 225 | It's our recommendation, should you wish to change any styling, that you minify your final output so as to save on overall page weight. The primary recommendation would be to run the `gulp dist` task which will minify the CSS (and JS if changes have been made), with another alternative to be found at [cssminifier.com](http://cssminifier.com/). 226 | 227 | #### 4.3. Video file URLs 228 | The Modaal video type has been tested thoroughly using both Vimeo and Youtube. For best outcome, please ensure the url format looks like the one of the following below. We transplant this URL into an iframe which then each service provider controls all the necessary play back from there. 229 | 230 | ###### 4.3.1. Youtube 231 | `https://www.youtube.com/embed/cBJyo0tgLnw` where the ID at the end is your unique video id. This can be found by selecting 'Share' on a youtube video, then clicking on 'Embed'. You'll find this URL within the content presented. 232 | 233 | ###### 4.3.1. Vimeo 234 | `https://player.vimeo.com/video/109626219` where the ID at the end is your unique video id. This can be found by selecting 'Share' on a vimeo video (commonly seen on the right hand side), and by selecting the content within 'Embed'. You'll find the URL necessary towards the very beginning of that embed code inside `src=""`. 235 | 236 | 237 | ## 5. Reporting issues and contributing code 238 | #### 5.1. Reporting an issue 239 | 240 | 1. Please ensure the issue you're reporting is reproducible in a standalone environment, and not a result of something in your own build. 241 | 2. Use [jsFiddle](http://jsfiddle.net) or [jsBin](http://jsbin.com) to provide a test page showing issue. 242 | 3. In your issue, please indicate which *browser*, *operating system* and *os version* you're using. 243 | 4. Please also indicate plugin version. 244 | 5. If you have made any alterations to the plugin files (JS or CSS), please also list and include code samples. 245 | 246 | *The more information you can provide regarding an issue, the better.* 247 | 248 | #### 5.2. Contributing to the plugin 249 | Thanks for your contribution! Please refer to the guidelines below. 250 | 251 | 1. Please ensure the issue you're reporting is reproducible in a standalone environment, and not a result of something in your own build. 252 | 2. Please ensure your pull request has a base branch of `develop` selected. pull request's with base `master` will not be accepted. 253 | 3. Please ensure the problem you're resolving has an open issue ticket. 254 | 4. Adhere to the current style and formatting of the plugin files, including CSS, SASS and JS. 255 | 5. Please ensure any changes are tested thoroughly in multiple browsers. We will do this, but if we locate bugs in the new code, the pull request will not be accepted. 256 | 6. Outline all changes in your commit message and also reference the issue ticket. For example "Contribution: Fix for issue #17 - Update to XYZ file to do make it do ABC" 257 | 258 | #### 5.3. Development Setup 259 | 1. Ensure you're running [NodeJS](http://nodejs.org/) 260 | 2. Install Gulp by running `npm install --global gulp`. More details are available through the [Gulp documentation](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md). 261 | 3. Install the NPM dependencies by running `npm install`. (if this throws an error, try `sudo` the command). 262 | 4. The build can now be called by running `gulp watch` to watch for SASS updates. 263 | 5. When you're happy with the final output, please also run `gulp dist` to minify and compress changes. 264 | 265 | 266 | ## License 267 | Copyright © [Humaan](http://humaan.com) 268 | Licensed under the MIT license. 269 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modaal", 3 | "description": "An accessible dialog window library for all humans.", 4 | "authors": "Humaan - contact@humaan.com.au", 5 | "license": "MIT", 6 | "homepage": "https://github.com/humaan/Modaal", 7 | "main": [ 8 | "dist/css/modaal.css", 9 | "dist/js/modaal.js" 10 | ], 11 | "ignore": [ 12 | "demo", 13 | "source", 14 | ".editorconfig", 15 | ".gitattributes", 16 | ".gitignore", 17 | "LICENSE.txt", 18 | "gulpfile.js", 19 | "README.md", 20 | "index.php", 21 | "package-lock.json", 22 | "package.json" 23 | ] 24 | } -------------------------------------------------------------------------------- /demo/ajax-content.html: -------------------------------------------------------------------------------- 1 |

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

2 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.

3 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui.

4 |

Natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum.

5 | -------------------------------------------------------------------------------- /demo/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /demo/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /demo/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /demo/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/apple-touch-icon.png -------------------------------------------------------------------------------- /demo/css/demo.css: -------------------------------------------------------------------------------- 1 | html, body, div, span, applet, object, iframe, 2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 3 | a, abbr, acronym, address, big, cite, code, 4 | del, dfn, em, img, ins, kbd, q, s, samp, 5 | small, strike, strong, sub, sup, tt, var, 6 | b, u, i, center, 7 | dl, dt, dd, ol, ul, li, 8 | fieldset, form, label, legend, 9 | table, caption, tbody, tfoot, thead, tr, th, td, 10 | article, aside, canvas, details, embed, 11 | figure, figcaption, footer, header, hgroup, 12 | menu, nav, output, ruby, section, summary, 13 | time, mark, audio, video { 14 | margin: 0; 15 | padding: 0; 16 | border: 0; 17 | font-size: 100%; 18 | font: inherit; 19 | vertical-align: baseline; } 20 | 21 | /* HTML5 display-role reset for older browsers */ 22 | article, aside, details, figcaption, figure, 23 | footer, header, hgroup, menu, nav, section { 24 | display: block; } 25 | 26 | body { 27 | line-height: 1; } 28 | 29 | ol, ul { 30 | list-style: none; } 31 | 32 | blockquote, q { 33 | quotes: none; } 34 | 35 | blockquote:before, blockquote:after, q:before, q:after { 36 | content: ''; 37 | content: none; } 38 | 39 | table { 40 | border-collapse: collapse; 41 | border-spacing: 0; } 42 | 43 | body { 44 | font-size: 15px; 45 | color: #697072; 46 | background: #fff; 47 | font-family: 'Lato', Arial, Helvetica, sans-serif; 48 | line-height: 1.4; 49 | padding: 0; 50 | -webkit-font-smoothing: antialiased; 51 | -moz-osx-font-smoothing: grayscale; } 52 | 53 | strong { 54 | font-weight: bold; } 55 | 56 | h2 { 57 | font-size: 25px; 58 | color: #425863; 59 | margin: 30px 0 5px; } 60 | h2.highlight { 61 | font-size: 14px; 62 | text-transform: uppercase; 63 | margin: 0 0 80px; 64 | color: #6d4d9a; 65 | font-weight: 800; 66 | letter-spacing: 2px; 67 | text-align: center; } 68 | 69 | h3.highlight { 70 | font-size: 14px; 71 | text-transform: uppercase; 72 | margin: 60px 0 20px; 73 | color: #6d4d9a; 74 | font-weight: 800; 75 | letter-spacing: 2px; } 76 | 77 | a { 78 | color: #6d4d9a; 79 | text-decoration: none; } 80 | a:focus, a:hover { 81 | color: #493467; } 82 | 83 | p { 84 | margin: 0 0 10px; } 85 | p + p { 86 | margin: 20px 0 0; } 87 | 88 | hr { 89 | border: none; 90 | height: 1px; 91 | width: 100%; 92 | margin: 40px 0; 93 | background: #e0e7ea; } 94 | 95 | .clearboth { 96 | clear: both; } 97 | 98 | .hidden { 99 | display: none; } 100 | 101 | .ui-hidden { 102 | border: 0; 103 | clip: rect(0 0 0 0); 104 | height: 1px; 105 | margin: -1px; 106 | overflow: hidden; 107 | padding: 0; 108 | position: absolute; 109 | width: 1px; } 110 | 111 | .container { 112 | width: 100%; 113 | max-width: 1000px; 114 | margin: 0 auto; 115 | padding: 0 40px; 116 | box-sizing: border-box; } 117 | 118 | .btn { 119 | display: inline-block; 120 | background: #6d4d9a; 121 | border: 3px solid #6d4d9a; 122 | color: #fff; 123 | font-weight: 800; 124 | font-size: 13px; 125 | text-transform: uppercase; 126 | letter-spacing: 2px; 127 | padding: 10px 25px; 128 | line-height: 20px; } 129 | .btn:focus, .btn:hover { 130 | border-color: #d95200; 131 | background: #d95200; 132 | color: #fff; } 133 | .btn:focus span, .btn:hover span { 134 | color: #d95200; } 135 | .btn.btn-small { 136 | font-size: 11px; 137 | padding: 5px 15px; } 138 | .btn.btn-download { 139 | padding: 10px 20px 10px 25px; 140 | margin-right: 20px; } 141 | .btn.btn-download span { 142 | position: relative; 143 | right: -20px; 144 | padding: 0 15px; 145 | margin: -10px 0; 146 | background: #fff; 147 | color: #6d4d9a; } 148 | .btn.btn-download span:before { 149 | display: block; 150 | content: " "; 151 | position: absolute; 152 | left: 0; 153 | top: -12px; 154 | bottom: -12px; 155 | background: #fff; 156 | width: 100%; } 157 | .btn.btn-download span strong { 158 | position: relative; 159 | z-index: 1; } 160 | .btn + .btn { 161 | margin-left: 20px; } 162 | 163 | .share { 164 | margin: 60px 0 0; } 165 | 166 | .social-share { 167 | display: inline-block; 168 | width: 30px; 169 | height: 30px; 170 | margin: 0 10px; 171 | background: url(../social-share.png) no-repeat 0 0; 172 | background-size: 90px 30px; 173 | border-radius: 100%; 174 | position: relative; } 175 | .social-share:before { 176 | content: " "; 177 | position: absolute; 178 | width: 50px; 179 | height: 50px; 180 | border: 2px solid #eee; 181 | -ms-transform: translate(-50%, -50%); 182 | transform: translate(-50%, -50%); 183 | position: absolute; 184 | top: 50%; 185 | left: 50%; 186 | opacity: 0; 187 | transition: opacity 0.3s; 188 | border-radius: 100%; } 189 | .social-share:focus:before, .social-share:hover:before { 190 | opacity: 1; } 191 | .social-share.share-fb { 192 | background-position: 0 0; } 193 | .social-share.share-tw { 194 | background-position: -30px 0; } 195 | .social-share.share-other { 196 | background-position: -60px 0; } 197 | 198 | .modaal-header { 199 | text-align: center; 200 | font-size: 20px; 201 | display: block; 202 | width: 100%; 203 | height: 100vh; 204 | position: relative; } 205 | .modaal-header h1 { 206 | position: relative; 207 | display: block; 208 | margin: 0 0 70px; 209 | width: 100%; 210 | height: 60%; } 211 | .modaal-header h1:before { 212 | display: block; 213 | content: " "; 214 | position: absolute; 215 | top: 0; 216 | left: 50%; 217 | height: 100%; 218 | width: 206px; 219 | margin: 0 0 0 -103px; 220 | background: url(../shape-rpt.png) repeat bottom left; } 221 | .modaal-header p { 222 | margin: 0 0 30px; } 223 | .modaal-header .modaal-logo { 224 | z-index: 1; 225 | display: block; 226 | position: absolute; 227 | top: 50%; 228 | left: 50%; 229 | width: 590px; 230 | height: 176px; 231 | margin: -88px 0 0 -295px; 232 | fill: #6d4d9a; } 233 | 234 | .version { 235 | position: absolute; 236 | bottom: 30px; 237 | right: 25px; 238 | font-size: 11px; 239 | font-weight: 800; 240 | color: #697072; 241 | letter-spacing: 2px; 242 | text-transform: uppercase; 243 | opacity: 0.5; } 244 | 245 | .scroll-trigger { 246 | display: block; 247 | position: absolute; 248 | bottom: 50px; 249 | left: 50%; 250 | width: 30px; 251 | height: 60px; 252 | margin: 0 0 0 -15px; 253 | transition: transform 0.3s; 254 | -ms-transform: translateY(0); 255 | transform: translateY(0); } 256 | .scroll-trigger:focus, .scroll-trigger:hover { 257 | -ms-transform: translateY(15px); 258 | transform: translateY(15px); } 259 | .scroll-trigger:focus .scroll-arrow, .scroll-trigger:hover .scroll-arrow { 260 | background: #6d4d9a; } 261 | .scroll-trigger:focus .scroll-arrow:before, .scroll-trigger:focus .scroll-arrow:after, .scroll-trigger:hover .scroll-arrow:before, .scroll-trigger:hover .scroll-arrow:after { 262 | background: #6d4d9a; } 263 | 264 | .scroll-arrow { 265 | display: block; 266 | height: 100%; 267 | margin: 0 auto; 268 | position: relative; 269 | width: 4px; 270 | border-radius: 4px; 271 | background: #eee; 272 | transition: background-color 0.3s; } 273 | .scroll-arrow:before, .scroll-arrow:after { 274 | position: absolute; 275 | display: block; 276 | content: " "; 277 | width: 20px; 278 | height: 4px; 279 | border-radius: 4px; 280 | background: #eee; 281 | bottom: 3px; 282 | transition: background-color 0.3s; } 283 | .scroll-arrow:before { 284 | -ms-transform: rotate(45deg); 285 | transform: rotate(45deg); 286 | margin: 0 0 0 -14px; } 287 | .scroll-arrow:after { 288 | -ms-transform: rotate(-45deg); 289 | transform: rotate(-45deg); 290 | margin: 0 0 0 -1px; } 291 | 292 | .modaal-fixed-header { 293 | position: fixed; 294 | top: -70px; 295 | left: 0; 296 | width: 100%; 297 | height: 70px; 298 | box-shadow: 0 0 5px rgba(0, 0, 0, 0); 299 | background: #6d4d9a; 300 | -ms-transform: translateY(0); 301 | transform: translateY(0); 302 | transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } 303 | .modaal-fixed-header.reveal { 304 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 305 | -ms-transform: translateY(70px); 306 | transform: translateY(70px); } 307 | .modaal-fixed-header .modaal-logo { 308 | display: block; 309 | float: left; 310 | width: 102px; 311 | height: 30px; 312 | margin: 20px 0 0 30px; 313 | fill: #fff; } 314 | .modaal-fixed-header .btn { 315 | float: right; 316 | margin: 13px 30px 0 0; 317 | border-color: #fff; 318 | background: #fff; 319 | padding: 6px 16px; 320 | font-size: 11px; 321 | color: #6d4d9a; } 322 | .modaal-fixed-header .btn:focus, .modaal-fixed-header .btn:hover { 323 | background: transparent; 324 | color: #fff; } 325 | 326 | #page-nav { 327 | margin: 0 300px; 328 | text-align: center; } 329 | #page-nav li { 330 | display: inline-block; 331 | padding: 21px 0 0; } 332 | #page-nav a { 333 | color: #fff; 334 | padding: 10px 20px; 335 | font-weight: 800; 336 | font-size: 13px; 337 | text-transform: uppercase; } 338 | #page-nav a:focus, #page-nav a:hover { 339 | background: #fff; 340 | color: #6d4d9a; } 341 | 342 | .overview-copy { 343 | text-align: center; 344 | background: #f5f5f5; 345 | font-size: 17px; 346 | line-height: 1.9; 347 | padding: 120px 0; 348 | margin: 0 0 120px; } 349 | .overview-copy h2 { 350 | margin: 70px 0 40px; } 351 | .overview-copy p:first-child { 352 | font-size: 24px; } 353 | 354 | .overview { 355 | text-align: left; 356 | margin: 0 0 120px; } 357 | .overview h2 { 358 | margin: 70px 0 40px; } 359 | .overview ul { 360 | margin: 0; } 361 | .overview ul li { 362 | text-align: center; 363 | box-sizing: border-box; 364 | margin: 20px 0 0; 365 | padding: 0 20px; } 366 | 367 | .examples-wrap { 368 | border-top: 2px solid #eee; 369 | padding: 130px 0 0; 370 | background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 320px); 371 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); } 372 | 373 | .modaal-example { 374 | display: block; 375 | margin: 0; 376 | border-top: 1px solid #eee; 377 | padding: 60px 0; 378 | box-sizing: border-box; } 379 | .modaal-example:nth-child(2n+1) { 380 | clear: both; } 381 | .modaal-example h2 { 382 | margin: 0 0 10px; 383 | font-size: 25px; } 384 | .modaal-example p + .btn { 385 | margin: 30px 0 0; } 386 | .modaal-example .btn + p { 387 | margin-top: 40px; } 388 | .modaal-example pre { 389 | position: relative; 390 | display: block; 391 | padding: 10px 15px; 392 | margin: 20px 0 40px; 393 | background: #eee; 394 | width: 100%; 395 | text-align: left; 396 | font-family: 'Inconsolata', sans-serif; 397 | box-sizing: border-box; 398 | overflow: auto; } 399 | .modaal-example pre span { 400 | color: #6d4d9a; } 401 | .modaal-example pre strong { 402 | display: block; 403 | position: absolute; 404 | top: 9px; 405 | right: 10px; 406 | line-height: 1; 407 | font-size: 10px; 408 | text-transform: uppercase; 409 | color: #6d4d9a; 410 | font-family: 'Lato', Arial, Helvetica, sans-serif; 411 | letter-spacing: 1px; } 412 | .modaal-example pre + pre { 413 | margin-top: -20px; } 414 | .modaal-example.example-no-brdr { 415 | border: none; } 416 | 417 | .gallery-thumb img { 418 | width: 75px; } 419 | 420 | .inline-code { 421 | background: #eee; 422 | font-family: 'Inconsolata', sans-serif; 423 | margin: 0 3px; 424 | padding: 3px 5px; } 425 | .inline-code span { 426 | color: #6d4d9a; } 427 | .inline-code.start-row { 428 | margin-left: 0; } 429 | 430 | .page-wrap { 431 | margin: 80px auto 0; 432 | padding: 80px 0; 433 | border-top: 1px solid #eee; 434 | text-align: center; } 435 | 436 | .demo-form { 437 | margin: 30px 0; } 438 | .demo-form input { 439 | margin: 0 10px 0 0; } 440 | 441 | .modaal-container h2 { 442 | margin: 0 0 20px; 443 | padding: 0; } 444 | 445 | .humaan-project { 446 | display: block; 447 | position: absolute; 448 | bottom: 27px; 449 | left: 25px; 450 | font-size: 11px; 451 | font-weight: 800; 452 | color: #697072; 453 | letter-spacing: 2px; 454 | text-transform: uppercase; 455 | padding: 2px 0 3px 30px; 456 | background: url(../humaan-head.png) no-repeat 0 0; 457 | background-size: 20px; } 458 | .humaan-project:focus, .humaan-project:hover { 459 | color: #697072; 460 | opacity: 0.7; } 461 | 462 | @media only screen and (max-height: 1000px) { 463 | .modaal-header h1 { 464 | height: 50%; } 465 | .scroll-trigger { 466 | height: 30px; } } 467 | 468 | @media only screen and (max-height: 768px) { 469 | .modaal-header h1 { 470 | height: 50%; } 471 | .scroll-trigger { 472 | display: none !important; } } 473 | 474 | @media only screen and (max-height: 700px) { 475 | .modaal-header { 476 | font-size: 15px; } 477 | .modaal-header h1 { 478 | height: 40%; 479 | margin: 0 0 40px; } 480 | .share { 481 | margin: 40px 0 0; } } 482 | 483 | @media only screen and (max-width: 768px) { 484 | .modaal-header .modaal-logo { 485 | width: 430px; 486 | height: 176px; 487 | margin: -88px 0 0 -215px; } 488 | .modaal-header .btn { 489 | display: block; 490 | margin: 0 auto; 491 | max-width: 254px; 492 | padding: 10px 0; 493 | font-size: 11px; } 494 | .modaal-header .btn.btn-download { 495 | margin: 0 auto 15px; } 496 | .modaal-header .btn span { 497 | display: none; } 498 | .scroll-trigger { 499 | display: none !important; } } 500 | 501 | @media only screen and (max-width: 500px) { 502 | .overview-copy { 503 | padding: 90px 0; } 504 | .overview-copy p:first-child { 505 | font-size: 20px; } 506 | .modaal-header .modaal-logo { 507 | width: 280px; 508 | height: 83px; 509 | margin: -41px 0 0 -140px; } 510 | .examples-wrap { 511 | padding: 90px 0 0; } 512 | h2.highlight { 513 | margin-bottom: 40px; } 514 | .modaal-example pre strong { 515 | position: relative; 516 | margin: 0 0 5px; 517 | right: auto; 518 | top: auto; } } 519 | -------------------------------------------------------------------------------- /demo/css/demo.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | $modaal-main: #6d4d9a; //#ea5a3d; //#2879d4; 3 | $modaal-grey: #697072; 4 | $modaal-purple: #d95200; 5 | $modaal-grey-light: #eee; 6 | $modaal-grey-light2: #f5f5f5; 7 | 8 | // Reset 9 | html, body, div, span, applet, object, iframe, 10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 11 | a, abbr, acronym, address, big, cite, code, 12 | del, dfn, em, img, ins, kbd, q, s, samp, 13 | small, strike, strong, sub, sup, tt, var, 14 | b, u, i, center, 15 | dl, dt, dd, ol, ul, li, 16 | fieldset, form, label, legend, 17 | table, caption, tbody, tfoot, thead, tr, th, td, 18 | article, aside, canvas, details, embed, 19 | figure, figcaption, footer, header, hgroup, 20 | menu, nav, output, ruby, section, summary, 21 | time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } 22 | /* HTML5 display-role reset for older browsers */ 23 | article, aside, details, figcaption, figure, 24 | footer, header, hgroup, menu, nav, section { display: block; } 25 | body { line-height: 1; } 26 | ol, ul { list-style: none; } 27 | blockquote, q { quotes: none; } 28 | blockquote:before, blockquote:after, q:before, q:after { content: '';content: none; } 29 | table { border-collapse: collapse; border-spacing: 0; } 30 | 31 | 32 | // Page Styles 33 | body { 34 | font-size: 15px; 35 | color: $modaal-grey; 36 | background: #fff; 37 | font-family: 'Lato', Arial, Helvetica, sans-serif; 38 | line-height: 1.4; 39 | padding: 0; 40 | -webkit-font-smoothing: antialiased; 41 | -moz-osx-font-smoothing: grayscale; 42 | } 43 | 44 | strong { 45 | font-weight: bold; 46 | } 47 | 48 | h2 { 49 | font-size: 25px; 50 | color: #425863; 51 | margin: 30px 0 5px; 52 | &.highlight { 53 | font-size: 14px; 54 | text-transform: uppercase; 55 | margin: 0 0 80px; 56 | color: $modaal-main; 57 | font-weight: 800; 58 | letter-spacing: 2px; 59 | text-align: center; 60 | } 61 | } 62 | h3.highlight { 63 | font-size: 14px; 64 | text-transform: uppercase; 65 | margin: 60px 0 20px; 66 | color: $modaal-main; 67 | font-weight: 800; 68 | letter-spacing: 2px; 69 | } 70 | a { 71 | color: $modaal-main; 72 | text-decoration: none; 73 | &:focus, 74 | &:hover { 75 | color: darken($modaal-main, 15%); 76 | } 77 | } 78 | 79 | p { 80 | margin: 0 0 10px; 81 | & + p { 82 | margin: 20px 0 0; 83 | } 84 | } 85 | 86 | hr { 87 | border: none; 88 | height: 1px; 89 | width: 100%; 90 | margin: 40px 0; 91 | background: #e0e7ea; 92 | } 93 | .clearboth { 94 | clear: both; 95 | } 96 | 97 | 98 | // 99 | // For hidden content 100 | .hidden { display: none; } 101 | .ui-hidden { 102 | border: 0; 103 | clip: rect(0 0 0 0); 104 | height: 1px; 105 | margin: -1px; 106 | overflow: hidden; 107 | padding: 0; 108 | position: absolute; 109 | width: 1px; 110 | } 111 | 112 | 113 | .container { 114 | width: 100%; 115 | max-width: 1000px; 116 | margin: 0 auto; 117 | padding: 0 40px; 118 | box-sizing: border-box; 119 | } 120 | 121 | 122 | // Buttons 123 | .btn { 124 | display: inline-block; 125 | background: $modaal-main; 126 | border: 3px solid $modaal-main; 127 | color: #fff; 128 | font-weight: 800; 129 | font-size: 13px; 130 | text-transform: uppercase; 131 | letter-spacing: 2px; 132 | padding: 10px 25px; 133 | line-height: 20px; 134 | &:focus, 135 | &:hover { 136 | border-color: $modaal-purple; 137 | background: $modaal-purple; 138 | color: #fff; 139 | span { color: $modaal-purple; } 140 | } 141 | &.btn-small { 142 | font-size: 11px; 143 | padding: 5px 15px; 144 | } 145 | &.btn-download { 146 | padding: 10px 20px 10px 25px; 147 | margin-right: 20px; 148 | span { 149 | position: relative; 150 | right: -20px; 151 | padding: 0 15px; 152 | margin: -10px 0; 153 | background: #fff; 154 | color: $modaal-main; 155 | &:before { 156 | display: block; 157 | content: " "; 158 | position: absolute; 159 | left: 0; 160 | top: -12px; 161 | bottom: -12px; 162 | background: #fff; 163 | width: 100%; 164 | } 165 | strong { 166 | position: relative; 167 | z-index: 1; 168 | } 169 | } 170 | } 171 | + .btn { 172 | margin-left: 20px; 173 | } 174 | } 175 | 176 | .share { 177 | margin: 60px 0 0; 178 | } 179 | .social-share { 180 | display: inline-block; 181 | width: 30px; 182 | height: 30px; 183 | margin: 0 10px; 184 | background: url(../social-share.png) no-repeat 0 0; 185 | background-size: 90px 30px; 186 | border-radius: 100%; 187 | position: relative; 188 | &:before { 189 | content: " "; 190 | position: absolute; 191 | width: 50px; 192 | height: 50px; 193 | border: 2px solid $modaal-grey-light; 194 | transform: translate(-50%, -50%); 195 | position: absolute; 196 | top: 50%; 197 | left: 50%; 198 | opacity: 0; 199 | transition: opacity 0.3s; 200 | border-radius: 100%; 201 | } 202 | &:focus:before, 203 | &:hover:before { 204 | opacity: 1; 205 | } 206 | 207 | 208 | &.share-fb { 209 | background-position: 0 0; 210 | } 211 | &.share-tw { 212 | background-position: -30px 0; 213 | } 214 | &.share-other { 215 | background-position: -60px 0; 216 | } 217 | } 218 | 219 | 220 | // Header 221 | .modaal-header { 222 | text-align: center; 223 | font-size: 20px; 224 | display: block; 225 | width: 100%; 226 | height: 100vh; 227 | position: relative; 228 | h1 { 229 | position: relative; 230 | display: block; 231 | margin: 0 0 70px; 232 | width: 100%; 233 | height: 60%; 234 | &:before { 235 | display: block; 236 | content: " "; 237 | position: absolute; 238 | top: 0; 239 | left: 50%; 240 | height: 100%; 241 | width: 206px; 242 | margin: 0 0 0 -103px; 243 | background: url(../shape-rpt.png) repeat bottom left; 244 | } 245 | } 246 | p { 247 | margin: 0 0 30px; 248 | } 249 | .modaal-logo { 250 | z-index: 1; 251 | display: block; 252 | position: absolute; 253 | top: 50%; 254 | left: 50%; 255 | width: 590px; 256 | height: 176px; 257 | margin: -88px 0 0 -295px; 258 | fill: $modaal-main; 259 | } 260 | } 261 | .version { 262 | position: absolute; 263 | bottom: 30px; 264 | right: 25px; 265 | font-size: 11px; 266 | font-weight: 800; 267 | color: $modaal-grey; 268 | letter-spacing: 2px; 269 | text-transform: uppercase; 270 | opacity: 0.5; 271 | } 272 | 273 | .scroll-trigger { 274 | display: block; 275 | position: absolute; 276 | bottom: 50px; 277 | left: 50%; 278 | width: 30px; 279 | height: 60px; 280 | margin: 0 0 0 -15px; 281 | transition: transform 0.3s; 282 | transform: translateY(0); 283 | &:focus, 284 | &:hover { 285 | transform: translateY(15px); 286 | .scroll-arrow { 287 | background: $modaal-main; 288 | &:before, 289 | &:after { background: $modaal-main; } 290 | } 291 | } 292 | } 293 | .scroll-arrow { 294 | display: block; 295 | height: 100%; 296 | margin: 0 auto; 297 | position: relative; 298 | width: 4px; 299 | border-radius: 4px; 300 | background: $modaal-grey-light; 301 | transition: background-color 0.3s; 302 | &:before, 303 | &:after { 304 | position: absolute; 305 | display: block; 306 | content: " "; 307 | width: 20px; 308 | height: 4px; 309 | border-radius: 4px; 310 | background: $modaal-grey-light; 311 | bottom: 3px; 312 | transition: background-color 0.3s; 313 | } 314 | &:before { 315 | transform: rotate(45deg); 316 | margin: 0 0 0 -14px; 317 | } 318 | &:after { 319 | transform: rotate(-45deg); 320 | margin: 0 0 0 -1px; 321 | } 322 | } 323 | 324 | .modaal-fixed-header { 325 | position: fixed; 326 | top: -70px; 327 | left: 0; 328 | width: 100%; 329 | height: 70px; 330 | box-shadow: 0 0 5px rgba(0,0,0, 0); 331 | background: $modaal-main; 332 | transform: translateY(0); 333 | 334 | -webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); 335 | -moz-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); 336 | transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); 337 | 338 | &.reveal { 339 | box-shadow: 0 0 5px rgba(0,0,0, 0.2); 340 | transform: translateY(70px); 341 | } 342 | 343 | .modaal-logo { 344 | display: block; 345 | float: left; 346 | width: 102px; 347 | height: 30px; 348 | margin: 20px 0 0 30px; 349 | fill: #fff; 350 | } 351 | .btn { 352 | float: right; 353 | margin: 13px 30px 0 0; 354 | border-color: #fff; 355 | background: #fff; 356 | padding: 6px 16px; 357 | font-size: 11px; 358 | color: $modaal-main; 359 | &:focus, 360 | &:hover { 361 | background: transparent; 362 | color: #fff; 363 | } 364 | } 365 | } 366 | 367 | #page-nav { 368 | margin: 0 300px; 369 | text-align: center; 370 | li { 371 | display: inline-block; 372 | padding: 21px 0 0; 373 | } 374 | a { 375 | color: #fff; 376 | padding: 10px 20px; 377 | font-weight: 800; 378 | font-size: 13px; 379 | text-transform: uppercase; 380 | &:focus, 381 | &:hover { 382 | background: #fff; 383 | color: $modaal-main; 384 | } 385 | } 386 | } 387 | 388 | .overview-copy { 389 | text-align: center; 390 | background: $modaal-grey-light2; 391 | font-size: 17px; 392 | line-height: 1.9; 393 | padding: 120px 0; 394 | margin: 0 0 120px; 395 | h2 { 396 | margin: 70px 0 40px; 397 | } 398 | p:first-child { 399 | font-size: 24px; 400 | } 401 | } 402 | 403 | 404 | .overview { 405 | text-align: left; 406 | margin: 0 0 120px; 407 | h2 { 408 | margin: 70px 0 40px; 409 | } 410 | ul { 411 | margin: 0; 412 | li { 413 | text-align: center; 414 | box-sizing: border-box; 415 | margin: 20px 0 0; 416 | padding: 0 20px; 417 | } 418 | } 419 | } 420 | 421 | .examples-wrap { 422 | border-top: 2px solid $modaal-grey-light; 423 | padding: 130px 0 0; 424 | background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 320px); 425 | background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 320px); 426 | background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 320px); 427 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); 428 | } 429 | 430 | // example cols 431 | .modaal-example { 432 | display: block; 433 | margin: 0; 434 | border-top: 1px solid $modaal-grey-light; 435 | padding: 60px 0; 436 | box-sizing: border-box; 437 | &:nth-child(2n+1) { 438 | clear: both; 439 | } 440 | h2 { 441 | margin: 0 0 10px; 442 | font-size: 25px; 443 | } 444 | p + .btn { 445 | margin: 30px 0 0; 446 | } 447 | .btn + p { 448 | margin-top: 40px; 449 | } 450 | pre { 451 | position: relative; 452 | display: block; 453 | padding: 10px 15px; 454 | margin: 20px 0 40px; 455 | background: $modaal-grey-light; 456 | width: 100%; 457 | text-align: left; 458 | font-family: 'Inconsolata', sans-serif; 459 | box-sizing: border-box; 460 | overflow: auto; 461 | span { 462 | color: $modaal-main; 463 | } 464 | strong { 465 | display: block; 466 | position: absolute; 467 | top: 9px; 468 | right: 10px; 469 | line-height: 1; 470 | font-size: 10px; 471 | text-transform: uppercase; 472 | color: $modaal-main; 473 | font-family: 'Lato', Arial, Helvetica, sans-serif; 474 | letter-spacing: 1px; 475 | } 476 | & + pre { 477 | margin-top: -20px; 478 | } 479 | } 480 | &.example-no-brdr { 481 | border: none; 482 | } 483 | } 484 | 485 | .gallery-thumb img { 486 | width: 75px; 487 | } 488 | 489 | .inline-code { 490 | background: $modaal-grey-light; 491 | font-family: 'Inconsolata', sans-serif; 492 | margin: 0 3px; 493 | padding: 3px 5px; 494 | span { 495 | color: $modaal-main; 496 | } 497 | &.start-row { 498 | margin-left: 0; 499 | } 500 | } 501 | 502 | .page-wrap { 503 | margin: 80px auto 0; 504 | padding: 80px 0; 505 | border-top: 1px solid $modaal-grey-light; 506 | text-align: center; 507 | } 508 | 509 | .demo-form { 510 | margin: 30px 0; 511 | input { 512 | margin: 0 10px 0 0; 513 | } 514 | } 515 | 516 | .modaal-container h2 { 517 | margin: 0 0 20px; 518 | padding: 0; 519 | } 520 | 521 | .humaan-project { 522 | display: block; 523 | position: absolute; 524 | bottom: 27px; 525 | left: 25px; 526 | font-size: 11px; 527 | font-weight: 800; 528 | color: $modaal-grey; 529 | letter-spacing: 2px; 530 | text-transform: uppercase; 531 | padding: 2px 0 3px 30px; 532 | background: url(../humaan-head.png) no-repeat 0 0; 533 | background-size: 20px; 534 | &:focus, 535 | &:hover { 536 | color: $modaal-grey; 537 | opacity: 0.7; 538 | } 539 | } 540 | 541 | 542 | // Reponsive: Height 543 | @media only screen and (max-height: 1000px) { 544 | .modaal-header h1 { 545 | height: 50%; 546 | } 547 | .scroll-trigger { 548 | height: 30px; 549 | } 550 | } 551 | @media only screen and (max-height: 768px) { 552 | .modaal-header h1 { 553 | height: 50%; 554 | } 555 | .scroll-trigger { 556 | display: none !important; 557 | } 558 | } 559 | @media only screen and (max-height: 700px) { 560 | .modaal-header { 561 | font-size: 15px; 562 | h1 { 563 | height: 40%; 564 | margin: 0 0 40px; 565 | } 566 | } 567 | .share { 568 | margin: 40px 0 0; 569 | } 570 | } 571 | 572 | 573 | // Reponsive: Width 574 | @media only screen and (max-width: 768px) { 575 | .modaal-header { 576 | .modaal-logo { 577 | width: 430px; 578 | height: 176px; 579 | margin: -88px 0 0 -215px; 580 | } 581 | .btn { 582 | display: block; 583 | margin: 0 auto; 584 | max-width: 254px; 585 | padding: 10px 0; 586 | font-size: 11px; 587 | &.btn-download { 588 | margin: 0 auto 15px; 589 | } 590 | span { 591 | display: none; 592 | } 593 | } 594 | } 595 | .scroll-trigger { 596 | display: none !important; 597 | } 598 | } 599 | @media only screen and (max-width: 500px) { 600 | .overview-copy { 601 | padding: 90px 0; 602 | p:first-child { 603 | font-size: 20px; 604 | } 605 | } 606 | .modaal-header { 607 | .modaal-logo { 608 | width: 280px; 609 | height: 83px; 610 | margin: -41px 0 0 -140px; 611 | } 612 | } 613 | .examples-wrap { 614 | padding: 90px 0 0; 615 | } 616 | h2.highlight { 617 | margin-bottom: 40px; 618 | } 619 | .modaal-example pre { 620 | strong { 621 | position: relative; 622 | margin: 0 0 5px; 623 | right: auto; 624 | top: auto; 625 | } 626 | } 627 | } 628 | -------------------------------------------------------------------------------- /demo/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/favicon.ico -------------------------------------------------------------------------------- /demo/humaan-head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/humaan-head.png -------------------------------------------------------------------------------- /demo/img/modaal-loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/modaal-loading.gif -------------------------------------------------------------------------------- /demo/img/temp/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/temp/gallery-1.jpg -------------------------------------------------------------------------------- /demo/img/temp/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/temp/gallery-2.jpg -------------------------------------------------------------------------------- /demo/img/temp/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/temp/gallery-3.jpg -------------------------------------------------------------------------------- /demo/img/temp/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/temp/gallery-4.jpg -------------------------------------------------------------------------------- /demo/img/temp/gallery-thumb-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/temp/gallery-thumb-1.jpg -------------------------------------------------------------------------------- /demo/img/temp/gallery-thumb-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/temp/gallery-thumb-2.jpg -------------------------------------------------------------------------------- /demo/img/temp/gallery-thumb-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/temp/gallery-thumb-3.jpg -------------------------------------------------------------------------------- /demo/img/temp/gallery-thumb-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/img/temp/gallery-thumb-4.jpg -------------------------------------------------------------------------------- /demo/js/demo.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | // on scroll 4 | $(document).scroll(function() { 5 | var x = $(this).scrollTop(); 6 | var threshold = $('.modaal-header').height() - 100; 7 | var fixedHdr = $('.modaal-fixed-header'); 8 | 9 | if (x >= threshold) { 10 | fixedHdr.addClass('reveal'); 11 | $('.scroll-trigger').fadeOut(150); 12 | } else { 13 | fixedHdr.removeClass('reveal'); 14 | $('.scroll-trigger').fadeIn(150); 15 | } 16 | 17 | $('.modaal-header .modaal-logo').css({ 18 | transform: 'translateY(' + x/3 + 'px)' 19 | }); 20 | $('.modaal-header .modaal-logo').css({ 21 | opacity: 1 - (x/400) 22 | }); 23 | }); 24 | 25 | }); -------------------------------------------------------------------------------- /demo/shape-rpt-retina.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/shape-rpt-retina.png -------------------------------------------------------------------------------- /demo/shape-rpt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/shape-rpt.png -------------------------------------------------------------------------------- /demo/social-share-modaal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/social-share-modaal.png -------------------------------------------------------------------------------- /demo/social-share.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/humaan/Modaal/68a5abc0ab74291becac88e758462ec39539697c/demo/social-share.png -------------------------------------------------------------------------------- /dist/css/modaal.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Modaal - accessible modals - v0.4.4 3 | by Humaan, for all humans. 4 | http://humaan.com 5 | */ 6 | 7 | .modaal-noscroll { 8 | overflow: hidden; 9 | } 10 | 11 | .modaal-accessible-hide { 12 | position: absolute !important; 13 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 14 | clip: rect(1px, 1px, 1px, 1px); 15 | padding: 0 !important; 16 | border: 0 !important; 17 | height: 1px !important; 18 | width: 1px !important; 19 | overflow: hidden; 20 | } 21 | 22 | .modaal-overlay { 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | z-index: 999; 29 | opacity: 0; 30 | } 31 | 32 | .modaal-wrapper { 33 | display: block; 34 | position: fixed; 35 | top: 0; 36 | left: 0; 37 | width: 100%; 38 | height: 100%; 39 | z-index: 9999; 40 | overflow: auto; 41 | opacity: 1; 42 | box-sizing: border-box; 43 | -webkit-overflow-scrolling: touch; 44 | -webkit-transition: all 0.3s ease-in-out; 45 | transition: all 0.3s ease-in-out; 46 | } 47 | 48 | .modaal-wrapper * { 49 | box-sizing: border-box; 50 | -webkit-font-smoothing: antialiased; 51 | -moz-osx-font-smoothing: grayscale; 52 | -webkit-backface-visibility: hidden; 53 | } 54 | 55 | .modaal-wrapper .modaal-close { 56 | border: none; 57 | background: transparent; 58 | padding: 0; 59 | -webkit-appearance: none; 60 | } 61 | 62 | .modaal-wrapper.modaal-start_none { 63 | display: none; 64 | opacity: 1; 65 | } 66 | 67 | .modaal-wrapper.modaal-start_fade { 68 | opacity: 0; 69 | } 70 | 71 | .modaal-wrapper *[tabindex="0"] { 72 | outline: none !important; 73 | } 74 | 75 | .modaal-wrapper.modaal-fullscreen { 76 | overflow: hidden; 77 | } 78 | 79 | .modaal-outer-wrapper { 80 | display: table; 81 | position: relative; 82 | width: 100%; 83 | height: 100%; 84 | } 85 | 86 | .modaal-fullscreen .modaal-outer-wrapper { 87 | display: block; 88 | } 89 | 90 | .modaal-inner-wrapper { 91 | display: table-cell; 92 | width: 100%; 93 | height: 100%; 94 | position: relative; 95 | vertical-align: middle; 96 | text-align: center; 97 | padding: 80px 25px; 98 | } 99 | 100 | .modaal-fullscreen .modaal-inner-wrapper { 101 | padding: 0; 102 | display: block; 103 | vertical-align: top; 104 | } 105 | 106 | .modaal-container { 107 | position: relative; 108 | display: inline-block; 109 | width: 100%; 110 | margin: auto; 111 | text-align: left; 112 | color: #000; 113 | max-width: 1000px; 114 | border-radius: 0px; 115 | background: #fff; 116 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 117 | cursor: auto; 118 | } 119 | 120 | .modaal-container.is_loading { 121 | height: 100px; 122 | width: 100px; 123 | overflow: hidden; 124 | } 125 | 126 | .modaal-fullscreen .modaal-container { 127 | max-width: none; 128 | height: 100%; 129 | overflow: auto; 130 | } 131 | 132 | .modaal-close { 133 | position: fixed; 134 | right: 20px; 135 | top: 20px; 136 | color: #fff; 137 | cursor: pointer; 138 | opacity: 1; 139 | width: 50px; 140 | height: 50px; 141 | background: rgba(0, 0, 0, 0); 142 | border-radius: 100%; 143 | -webkit-transition: all 0.2s ease-in-out; 144 | transition: all 0.2s ease-in-out; 145 | } 146 | 147 | .modaal-close:focus, 148 | .modaal-close:hover { 149 | outline: none; 150 | background: #fff; 151 | } 152 | 153 | .modaal-close:focus:before, 154 | .modaal-close:focus:after, 155 | .modaal-close:hover:before, 156 | .modaal-close:hover:after { 157 | background: #b93d0c; 158 | } 159 | 160 | .modaal-close span { 161 | position: absolute !important; 162 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 163 | clip: rect(1px, 1px, 1px, 1px); 164 | padding: 0 !important; 165 | border: 0 !important; 166 | height: 1px !important; 167 | width: 1px !important; 168 | overflow: hidden; 169 | } 170 | 171 | .modaal-close:before, 172 | .modaal-close:after { 173 | display: block; 174 | content: " "; 175 | position: absolute; 176 | top: 14px; 177 | left: 23px; 178 | width: 4px; 179 | height: 22px; 180 | border-radius: 4px; 181 | background: #fff; 182 | -webkit-transition: background 0.2s ease-in-out; 183 | transition: background 0.2s ease-in-out; 184 | } 185 | 186 | .modaal-close:before { 187 | -webkit-transform: rotate(-45deg); 188 | -ms-transform: rotate(-45deg); 189 | transform: rotate(-45deg); 190 | } 191 | 192 | .modaal-close:after { 193 | -webkit-transform: rotate(45deg); 194 | -ms-transform: rotate(45deg); 195 | transform: rotate(45deg); 196 | } 197 | 198 | .modaal-fullscreen .modaal-close { 199 | background: #afb7bc; 200 | right: 10px; 201 | top: 10px; 202 | } 203 | 204 | .modaal-content-container { 205 | padding: 30px; 206 | } 207 | 208 | .modaal-confirm-wrap { 209 | padding: 30px 0 0; 210 | text-align: center; 211 | font-size: 0; 212 | } 213 | 214 | .modaal-confirm-btn { 215 | font-size: 14px; 216 | display: inline-block; 217 | margin: 0 10px; 218 | vertical-align: middle; 219 | cursor: pointer; 220 | border: none; 221 | background: transparent; 222 | } 223 | 224 | .modaal-confirm-btn.modaal-ok { 225 | padding: 10px 15px; 226 | color: #fff; 227 | background: #555; 228 | border-radius: 3px; 229 | -webkit-transition: background 0.2s ease-in-out; 230 | transition: background 0.2s ease-in-out; 231 | } 232 | 233 | .modaal-confirm-btn.modaal-ok:hover { 234 | background: #2f2f2f; 235 | } 236 | 237 | .modaal-confirm-btn.modaal-cancel { 238 | text-decoration: underline; 239 | } 240 | 241 | .modaal-confirm-btn.modaal-cancel:hover { 242 | text-decoration: none; 243 | color: #2f2f2f; 244 | } 245 | 246 | .modaal-instagram .modaal-container { 247 | width: auto; 248 | background: transparent; 249 | box-shadow: none !important; 250 | } 251 | 252 | .modaal-instagram .modaal-content-container { 253 | padding: 0; 254 | background: transparent; 255 | } 256 | 257 | .modaal-instagram .modaal-content-container > blockquote { 258 | width: 1px !important; 259 | height: 1px !important; 260 | opacity: 0 !important; 261 | } 262 | 263 | .modaal-instagram iframe { 264 | opacity: 0; 265 | margin: -6px !important; 266 | border-radius: 0 !important; 267 | width: 1000px !important; 268 | max-width: 800px !important; 269 | box-shadow: none !important; 270 | -webkit-animation: instaReveal 1s linear forwards; 271 | animation: instaReveal 1s linear forwards; 272 | } 273 | 274 | .modaal-image .modaal-inner-wrapper { 275 | padding-left: 140px; 276 | padding-right: 140px; 277 | } 278 | 279 | .modaal-image .modaal-container { 280 | width: auto; 281 | max-width: 100%; 282 | } 283 | 284 | .modaal-gallery-wrap { 285 | position: relative; 286 | color: #fff; 287 | } 288 | 289 | .modaal-gallery-item { 290 | display: none; 291 | } 292 | 293 | .modaal-gallery-item img { 294 | display: block; 295 | } 296 | 297 | .modaal-gallery-item.is_active { 298 | display: block; 299 | } 300 | 301 | .modaal-gallery-label { 302 | position: absolute; 303 | left: 0; 304 | width: 100%; 305 | margin: 20px 0 0; 306 | font-size: 18px; 307 | text-align: center; 308 | color: #fff; 309 | } 310 | 311 | .modaal-gallery-label:focus { 312 | outline: none; 313 | } 314 | 315 | .modaal-gallery-control { 316 | position: absolute; 317 | top: 50%; 318 | -webkit-transform: translateY(-50%); 319 | -ms-transform: translateY(-50%); 320 | transform: translateY(-50%); 321 | opacity: 1; 322 | cursor: pointer; 323 | color: #fff; 324 | width: 50px; 325 | height: 50px; 326 | background: rgba(0, 0, 0, 0); 327 | border: none; 328 | border-radius: 100%; 329 | -webkit-transition: all 0.2s ease-in-out; 330 | transition: all 0.2s ease-in-out; 331 | } 332 | 333 | .modaal-gallery-control.is_hidden { 334 | opacity: 0; 335 | cursor: default; 336 | } 337 | 338 | .modaal-gallery-control:focus, 339 | .modaal-gallery-control:hover { 340 | outline: none; 341 | background: #fff; 342 | } 343 | 344 | .modaal-gallery-control:focus:before, 345 | .modaal-gallery-control:focus:after, 346 | .modaal-gallery-control:hover:before, 347 | .modaal-gallery-control:hover:after { 348 | background: #afb7bc; 349 | } 350 | 351 | .modaal-gallery-control span { 352 | position: absolute !important; 353 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 354 | clip: rect(1px, 1px, 1px, 1px); 355 | padding: 0 !important; 356 | border: 0 !important; 357 | height: 1px !important; 358 | width: 1px !important; 359 | overflow: hidden; 360 | } 361 | 362 | .modaal-gallery-control:before, 363 | .modaal-gallery-control:after { 364 | display: block; 365 | content: " "; 366 | position: absolute; 367 | top: 16px; 368 | left: 25px; 369 | width: 4px; 370 | height: 18px; 371 | border-radius: 4px; 372 | background: #fff; 373 | -webkit-transition: background 0.2s ease-in-out; 374 | transition: background 0.2s ease-in-out; 375 | } 376 | 377 | .modaal-gallery-control:before { 378 | margin: -5px 0 0; 379 | -webkit-transform: rotate(-45deg); 380 | -ms-transform: rotate(-45deg); 381 | transform: rotate(-45deg); 382 | } 383 | 384 | .modaal-gallery-control:after { 385 | margin: 5px 0 0; 386 | -webkit-transform: rotate(45deg); 387 | -ms-transform: rotate(45deg); 388 | transform: rotate(45deg); 389 | } 390 | 391 | .modaal-gallery-next-inner { 392 | left: 100%; 393 | margin-left: 40px; 394 | } 395 | 396 | .modaal-gallery-next-outer { 397 | right: 45px; 398 | } 399 | 400 | .modaal-gallery-prev:before, 401 | .modaal-gallery-prev:after { 402 | left: 22px; 403 | } 404 | 405 | .modaal-gallery-prev:before { 406 | margin: 5px 0 0; 407 | -webkit-transform: rotate(-45deg); 408 | -ms-transform: rotate(-45deg); 409 | transform: rotate(-45deg); 410 | } 411 | 412 | .modaal-gallery-prev:after { 413 | margin: -5px 0 0; 414 | -webkit-transform: rotate(45deg); 415 | -ms-transform: rotate(45deg); 416 | transform: rotate(45deg); 417 | } 418 | 419 | .modaal-gallery-prev-inner { 420 | right: 100%; 421 | margin-right: 40px; 422 | } 423 | 424 | .modaal-gallery-prev-outer { 425 | left: 45px; 426 | } 427 | 428 | .modaal-video-wrap { 429 | margin: auto 50px; 430 | position: relative; 431 | } 432 | 433 | .modaal-video-container { 434 | position: relative; 435 | padding-bottom: 56.25%; 436 | height: 0; 437 | overflow: hidden; 438 | max-width: 100%; 439 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 440 | background: #000; 441 | max-width: 1300px; 442 | margin-left: auto; 443 | margin-right: auto; 444 | } 445 | 446 | .modaal-video-container iframe, 447 | .modaal-video-container object, 448 | .modaal-video-container embed { 449 | position: absolute; 450 | top: 0; 451 | left: 0; 452 | width: 100%; 453 | height: 100%; 454 | } 455 | 456 | .modaal-iframe .modaal-content { 457 | width: 100%; 458 | height: 100%; 459 | } 460 | 461 | .modaal-iframe-elem { 462 | width: 100%; 463 | height: 100%; 464 | display: block; 465 | } 466 | 467 | .modaal-loading-spinner { 468 | background: none; 469 | position: absolute; 470 | width: 200px; 471 | height: 200px; 472 | top: 50%; 473 | left: 50%; 474 | margin: -100px 0 0 -100px; 475 | -webkit-transform: scale(0.25); 476 | -ms-transform: scale(0.25); 477 | transform: scale(0.25); 478 | } 479 | 480 | .modaal-loading-spinner > div { 481 | width: 24px; 482 | height: 24px; 483 | margin-left: 4px; 484 | margin-top: 4px; 485 | position: absolute; 486 | } 487 | 488 | .modaal-loading-spinner > div > div { 489 | width: 100%; 490 | height: 100%; 491 | border-radius: 15px; 492 | background: #fff; 493 | } 494 | 495 | .modaal-loading-spinner > div:nth-of-type(1) > div { 496 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 497 | animation: modaal-loading-spinner 1s linear infinite; 498 | -webkit-animation-delay: 0s; 499 | animation-delay: 0s; 500 | } 501 | 502 | .modaal-loading-spinner > div:nth-of-type(2) > div, 503 | .modaal-loading-spinner > div:nth-of-type(3) > div { 504 | -ms-animation: modaal-loading-spinner 1s linear infinite; 505 | -moz-animation: modaal-loading-spinner 1s linear infinite; 506 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 507 | -o-animation: modaal-loading-spinner 1s linear infinite; 508 | } 509 | 510 | .modaal-loading-spinner > div:nth-of-type(1) { 511 | -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); 512 | -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); 513 | transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); 514 | } 515 | 516 | .modaal-loading-spinner > div:nth-of-type(2) > div { 517 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 518 | animation: modaal-loading-spinner 1s linear infinite; 519 | -webkit-animation-delay: .12s; 520 | animation-delay: .12s; 521 | } 522 | 523 | .modaal-loading-spinner > div:nth-of-type(2) { 524 | -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); 525 | -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); 526 | transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); 527 | } 528 | 529 | .modaal-loading-spinner > div:nth-of-type(3) > div { 530 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 531 | animation: modaal-loading-spinner 1s linear infinite; 532 | -webkit-animation-delay: .25s; 533 | animation-delay: .25s; 534 | } 535 | 536 | .modaal-loading-spinner > div:nth-of-type(4) > div, 537 | .modaal-loading-spinner > div:nth-of-type(5) > div { 538 | -ms-animation: modaal-loading-spinner 1s linear infinite; 539 | -moz-animation: modaal-loading-spinner 1s linear infinite; 540 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 541 | -o-animation: modaal-loading-spinner 1s linear infinite; 542 | } 543 | 544 | .modaal-loading-spinner > div:nth-of-type(3) { 545 | -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); 546 | -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); 547 | transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); 548 | } 549 | 550 | .modaal-loading-spinner > div:nth-of-type(4) > div { 551 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 552 | animation: modaal-loading-spinner 1s linear infinite; 553 | -webkit-animation-delay: .37s; 554 | animation-delay: .37s; 555 | } 556 | 557 | .modaal-loading-spinner > div:nth-of-type(4) { 558 | -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); 559 | -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); 560 | transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); 561 | } 562 | 563 | .modaal-loading-spinner > div:nth-of-type(5) > div { 564 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 565 | animation: modaal-loading-spinner 1s linear infinite; 566 | -webkit-animation-delay: .5s; 567 | animation-delay: .5s; 568 | } 569 | 570 | .modaal-loading-spinner > div:nth-of-type(6) > div, 571 | .modaal-loading-spinner > div:nth-of-type(7) > div { 572 | -ms-animation: modaal-loading-spinner 1s linear infinite; 573 | -moz-animation: modaal-loading-spinner 1s linear infinite; 574 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 575 | -o-animation: modaal-loading-spinner 1s linear infinite; 576 | } 577 | 578 | .modaal-loading-spinner > div:nth-of-type(5) { 579 | -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); 580 | -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); 581 | transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); 582 | } 583 | 584 | .modaal-loading-spinner > div:nth-of-type(6) > div { 585 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 586 | animation: modaal-loading-spinner 1s linear infinite; 587 | -webkit-animation-delay: .62s; 588 | animation-delay: .62s; 589 | } 590 | 591 | .modaal-loading-spinner > div:nth-of-type(6) { 592 | -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); 593 | -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); 594 | transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); 595 | } 596 | 597 | .modaal-loading-spinner > div:nth-of-type(7) > div { 598 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 599 | animation: modaal-loading-spinner 1s linear infinite; 600 | -webkit-animation-delay: .75s; 601 | animation-delay: .75s; 602 | } 603 | 604 | .modaal-loading-spinner > div:nth-of-type(7) { 605 | -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); 606 | -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); 607 | transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); 608 | } 609 | 610 | .modaal-loading-spinner > div:nth-of-type(8) > div { 611 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 612 | animation: modaal-loading-spinner 1s linear infinite; 613 | -webkit-animation-delay: .87s; 614 | animation-delay: .87s; 615 | } 616 | 617 | .modaal-loading-spinner > div:nth-of-type(8) { 618 | -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); 619 | -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); 620 | transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); 621 | } 622 | 623 | @media only screen and (min-width: 1400px) { 624 | 625 | .modaal-video-container { 626 | padding-bottom: 0; 627 | height: 731px; 628 | } 629 | 630 | } 631 | 632 | @media only screen and (max-width: 1140px) { 633 | 634 | .modaal-image .modaal-inner-wrapper { 635 | padding-left: 25px; 636 | padding-right: 25px; 637 | } 638 | 639 | .modaal-gallery-control { 640 | top: auto; 641 | bottom: 20px; 642 | -webkit-transform: none; 643 | -ms-transform: none; 644 | transform: none; 645 | background: rgba(0, 0, 0, 0.7); 646 | } 647 | 648 | .modaal-gallery-control:before, 649 | .modaal-gallery-control:after { 650 | background: #fff; 651 | } 652 | 653 | .modaal-gallery-next { 654 | left: auto; 655 | right: 20px; 656 | } 657 | 658 | .modaal-gallery-prev { 659 | left: 20px; 660 | right: auto; 661 | } 662 | 663 | } 664 | 665 | @media screen and (max-width: 900px) { 666 | 667 | .modaal-instagram iframe { 668 | width: 500px !important; 669 | } 670 | 671 | } 672 | 673 | @media only screen and (max-width: 600px) { 674 | 675 | .modaal-instagram iframe { 676 | width: 280px !important; 677 | } 678 | 679 | } 680 | 681 | @media screen and (max-height: 1100px) { 682 | 683 | .modaal-instagram iframe { 684 | width: 700px !important; 685 | } 686 | 687 | } 688 | 689 | @media screen and (max-height: 1000px) { 690 | 691 | .modaal-inner-wrapper { 692 | padding-top: 60px; 693 | padding-bottom: 60px; 694 | } 695 | 696 | .modaal-instagram iframe { 697 | width: 600px !important; 698 | } 699 | 700 | } 701 | 702 | @media screen and (max-height: 900px) { 703 | 704 | .modaal-instagram iframe { 705 | width: 500px !important; 706 | } 707 | 708 | .modaal-video-container { 709 | max-width: 900px; 710 | max-height: 510px; 711 | } 712 | 713 | } 714 | 715 | @media only screen and (max-height: 820px) { 716 | 717 | .modaal-gallery-label { 718 | display: none; 719 | } 720 | 721 | } 722 | 723 | @keyframes instaReveal { 724 | 725 | 0% { 726 | opacity: 0; 727 | } 728 | 729 | 100% { 730 | opacity: 1; 731 | } 732 | 733 | } 734 | 735 | @-webkit-keyframes instaReveal { 736 | 737 | 0% { 738 | opacity: 0; 739 | } 740 | 741 | 100% { 742 | opacity: 1; 743 | } 744 | 745 | } 746 | 747 | @-webkit-keyframes modaal-loading-spinner { 748 | 749 | 0% { 750 | opacity: 1; 751 | -ms-transform: scale(1.5); 752 | -webkit-transform: scale(1.5); 753 | transform: scale(1.5); 754 | } 755 | 756 | 100% { 757 | opacity: .1; 758 | -ms-transform: scale(1); 759 | -webkit-transform: scale(1); 760 | transform: scale(1); 761 | } 762 | 763 | } 764 | 765 | @keyframes modaal-loading-spinner { 766 | 767 | 0% { 768 | opacity: 1; 769 | -ms-transform: scale(1.5); 770 | -webkit-transform: scale(1.5); 771 | transform: scale(1.5); 772 | } 773 | 774 | 100% { 775 | opacity: .1; 776 | -ms-transform: scale(1); 777 | -webkit-transform: scale(1); 778 | transform: scale(1); 779 | } 780 | 781 | } 782 | 783 | -------------------------------------------------------------------------------- /dist/css/modaal.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Modaal - accessible modals - v0.4.4 3 | by Humaan, for all humans. 4 | http://humaan.com 5 | */.modaal-noscroll{overflow:hidden}.modaal-accessible-hide{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.modaal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;opacity:0}.modaal-wrapper{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;overflow:auto;opacity:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.modaal-wrapper *{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden}.modaal-wrapper .modaal-close{border:none;background:0 0;padding:0;-webkit-appearance:none}.modaal-wrapper.modaal-start_none{display:none;opacity:1}.modaal-wrapper.modaal-start_fade{opacity:0}.modaal-wrapper [tabindex="0"]{outline:0!important}.modaal-wrapper.modaal-fullscreen{overflow:hidden}.modaal-outer-wrapper{display:table;position:relative;width:100%;height:100%}.modaal-fullscreen .modaal-outer-wrapper{display:block}.modaal-inner-wrapper{display:table-cell;width:100%;height:100%;position:relative;vertical-align:middle;text-align:center;padding:80px 25px}.modaal-fullscreen .modaal-inner-wrapper{padding:0;display:block;vertical-align:top}.modaal-container{position:relative;display:inline-block;width:100%;margin:auto;text-align:left;color:#000;max-width:1000px;border-radius:0;background:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2);cursor:auto}.modaal-container.is_loading{height:100px;width:100px;overflow:hidden}.modaal-fullscreen .modaal-container{max-width:none;height:100%;overflow:auto}.modaal-close{position:fixed;right:20px;top:20px;color:#fff;cursor:pointer;opacity:1;width:50px;height:50px;background:rgba(0,0,0,0);border-radius:100%;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.modaal-close:focus,.modaal-close:hover{outline:0;background:#fff}.modaal-close:focus:after,.modaal-close:focus:before,.modaal-close:hover:after,.modaal-close:hover:before{background:#b93d0c}.modaal-close span{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.modaal-close:after,.modaal-close:before{display:block;content:" ";position:absolute;top:14px;left:23px;width:4px;height:22px;border-radius:4px;background:#fff;-webkit-transition:background .2s ease-in-out;transition:background .2s ease-in-out}.modaal-close:before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.modaal-close:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.modaal-fullscreen .modaal-close{background:#afb7bc;right:10px;top:10px}.modaal-content-container{padding:30px}.modaal-confirm-wrap{padding:30px 0 0;text-align:center;font-size:0}.modaal-confirm-btn{font-size:14px;display:inline-block;margin:0 10px;vertical-align:middle;cursor:pointer;border:none;background:0 0}.modaal-confirm-btn.modaal-ok{padding:10px 15px;color:#fff;background:#555;border-radius:3px;-webkit-transition:background .2s ease-in-out;transition:background .2s ease-in-out}.modaal-confirm-btn.modaal-ok:hover{background:#2f2f2f}.modaal-confirm-btn.modaal-cancel{text-decoration:underline}.modaal-confirm-btn.modaal-cancel:hover{text-decoration:none;color:#2f2f2f}.modaal-instagram .modaal-container{width:auto;background:0 0;box-shadow:none!important}.modaal-instagram .modaal-content-container{padding:0;background:0 0}.modaal-instagram .modaal-content-container>blockquote{width:1px!important;height:1px!important;opacity:0!important}.modaal-instagram iframe{opacity:0;margin:-6px!important;border-radius:0!important;width:1000px!important;max-width:800px!important;box-shadow:none!important;-webkit-animation:instaReveal 1s linear forwards;animation:instaReveal 1s linear forwards}.modaal-image .modaal-inner-wrapper{padding-left:140px;padding-right:140px}.modaal-image .modaal-container{width:auto;max-width:100%}.modaal-gallery-wrap{position:relative;color:#fff}.modaal-gallery-item{display:none}.modaal-gallery-item img{display:block}.modaal-gallery-item.is_active{display:block}.modaal-gallery-label{position:absolute;left:0;width:100%;margin:20px 0 0;font-size:18px;text-align:center;color:#fff}.modaal-gallery-label:focus{outline:0}.modaal-gallery-control{position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);opacity:1;cursor:pointer;color:#fff;width:50px;height:50px;background:rgba(0,0,0,0);border:none;border-radius:100%;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.modaal-gallery-control.is_hidden{opacity:0;cursor:default}.modaal-gallery-control:focus,.modaal-gallery-control:hover{outline:0;background:#fff}.modaal-gallery-control:focus:after,.modaal-gallery-control:focus:before,.modaal-gallery-control:hover:after,.modaal-gallery-control:hover:before{background:#afb7bc}.modaal-gallery-control span{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.modaal-gallery-control:after,.modaal-gallery-control:before{display:block;content:" ";position:absolute;top:16px;left:25px;width:4px;height:18px;border-radius:4px;background:#fff;-webkit-transition:background .2s ease-in-out;transition:background .2s ease-in-out}.modaal-gallery-control:before{margin:-5px 0 0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.modaal-gallery-control:after{margin:5px 0 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.modaal-gallery-next-inner{left:100%;margin-left:40px}.modaal-gallery-next-outer{right:45px}.modaal-gallery-prev:after,.modaal-gallery-prev:before{left:22px}.modaal-gallery-prev:before{margin:5px 0 0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.modaal-gallery-prev:after{margin:-5px 0 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.modaal-gallery-prev-inner{right:100%;margin-right:40px}.modaal-gallery-prev-outer{left:45px}.modaal-video-wrap{margin:auto 50px;position:relative}.modaal-video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;box-shadow:0 0 10px rgba(0,0,0,.3);background:#000;max-width:1300px;margin-left:auto;margin-right:auto}.modaal-video-container embed,.modaal-video-container iframe,.modaal-video-container object{position:absolute;top:0;left:0;width:100%;height:100%}.modaal-iframe .modaal-content{width:100%;height:100%}.modaal-iframe-elem{width:100%;height:100%;display:block}.modaal-loading-spinner{background:0 0;position:absolute;width:200px;height:200px;top:50%;left:50%;margin:-100px 0 0 -100px;-webkit-transform:scale(.25);-ms-transform:scale(.25);transform:scale(.25)}.modaal-loading-spinner>div{width:24px;height:24px;margin-left:4px;margin-top:4px;position:absolute}.modaal-loading-spinner>div>div{width:100%;height:100%;border-radius:15px;background:#fff}.modaal-loading-spinner>div:nth-of-type(1)>div{-webkit-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-webkit-animation-delay:0s;animation-delay:0s}.modaal-loading-spinner>div:nth-of-type(2)>div,.modaal-loading-spinner>div:nth-of-type(3)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(1){-ms-transform:translate(84px,84px) rotate(45deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(45deg) translate(70px,0);transform:translate(84px,84px) rotate(45deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(2)>div{-webkit-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-webkit-animation-delay:.12s;animation-delay:.12s}.modaal-loading-spinner>div:nth-of-type(2){-ms-transform:translate(84px,84px) rotate(90deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(90deg) translate(70px,0);transform:translate(84px,84px) rotate(90deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(3)>div{-webkit-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-webkit-animation-delay:.25s;animation-delay:.25s}.modaal-loading-spinner>div:nth-of-type(4)>div,.modaal-loading-spinner>div:nth-of-type(5)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(3){-ms-transform:translate(84px,84px) rotate(135deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(135deg) translate(70px,0);transform:translate(84px,84px) rotate(135deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(4)>div{-webkit-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-webkit-animation-delay:.37s;animation-delay:.37s}.modaal-loading-spinner>div:nth-of-type(4){-ms-transform:translate(84px,84px) rotate(180deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(180deg) translate(70px,0);transform:translate(84px,84px) rotate(180deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(5)>div{-webkit-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-webkit-animation-delay:.5s;animation-delay:.5s}.modaal-loading-spinner>div:nth-of-type(6)>div,.modaal-loading-spinner>div:nth-of-type(7)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(5){-ms-transform:translate(84px,84px) rotate(225deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(225deg) translate(70px,0);transform:translate(84px,84px) rotate(225deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(6)>div{-webkit-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-webkit-animation-delay:.62s;animation-delay:.62s}.modaal-loading-spinner>div:nth-of-type(6){-ms-transform:translate(84px,84px) rotate(270deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(270deg) translate(70px,0);transform:translate(84px,84px) rotate(270deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(7)>div{-webkit-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-webkit-animation-delay:.75s;animation-delay:.75s}.modaal-loading-spinner>div:nth-of-type(7){-ms-transform:translate(84px,84px) rotate(315deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(315deg) translate(70px,0);transform:translate(84px,84px) rotate(315deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(8)>div{-webkit-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-webkit-animation-delay:.87s;animation-delay:.87s}.modaal-loading-spinner>div:nth-of-type(8){-ms-transform:translate(84px,84px) rotate(360deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(360deg) translate(70px,0);transform:translate(84px,84px) rotate(360deg) translate(70px,0)}@media only screen and (min-width:1400px){.modaal-video-container{padding-bottom:0;height:731px}}@media only screen and (max-width:1140px){.modaal-image .modaal-inner-wrapper{padding-left:25px;padding-right:25px}.modaal-gallery-control{top:auto;bottom:20px;-webkit-transform:none;-ms-transform:none;transform:none;background:rgba(0,0,0,.7)}.modaal-gallery-control:after,.modaal-gallery-control:before{background:#fff}.modaal-gallery-next{left:auto;right:20px}.modaal-gallery-prev{left:20px;right:auto}}@media screen and (max-width:900px){.modaal-instagram iframe{width:500px!important}}@media only screen and (max-width:600px){.modaal-instagram iframe{width:280px!important}}@media screen and (max-height:1100px){.modaal-instagram iframe{width:700px!important}}@media screen and (max-height:1000px){.modaal-inner-wrapper{padding-top:60px;padding-bottom:60px}.modaal-instagram iframe{width:600px!important}}@media screen and (max-height:900px){.modaal-instagram iframe{width:500px!important}.modaal-video-container{max-width:900px;max-height:510px}}@media only screen and (max-height:820px){.modaal-gallery-label{display:none}}@keyframes instaReveal{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes instaReveal{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-webkit-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}}@keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-webkit-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}} -------------------------------------------------------------------------------- /dist/css/modaal.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | Modaal - accessible modals - v0.4.4 3 | by Humaan, for all humans. 4 | http://humaan.com 5 | */ 6 | 7 | // Modaal Variables 8 | // -------------------------------------------------------- 9 | 10 | $modaal-overlay-color: rgba(0,0,0, 0.8); 11 | 12 | $modaal-radius: 0px; //5px 13 | $modaal-main-bg: #fff; 14 | $modaal-main-text: #000; 15 | $modaal-max-width: 1000px; 16 | $modaal-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 17 | $modaal-padding: 30px; 18 | $modaal-hover-color: rgba(0,0,0, 0.7); 19 | $modaal-close-hover-color: #b93d0c; 20 | 21 | $modaal-light: #fff; 22 | $modaal-primary: #555; 23 | $modaal-grey: #afb7bc; 24 | 25 | 26 | // Modaal Mixins 27 | // -------------------------------------------------------- 28 | @mixin modaal-transition($type, $speed: .2s, $ease: ease-in-out) { 29 | transition: $type #{$speed} #{$ease}; 30 | } 31 | @mixin modaal-hidetext() { 32 | position: absolute !important; 33 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 34 | clip: rect(1px, 1px, 1px, 1px); 35 | padding:0 !important; 36 | border:0 !important; 37 | height: 1px !important; 38 | width: 1px !important; 39 | overflow: hidden; 40 | } 41 | 42 | 43 | // Modaal Structure 44 | // -------------------------------------------------------- 45 | .modaal-noscroll { 46 | overflow: hidden; 47 | } 48 | .modaal-accessible-hide { 49 | @include modaal-hidetext; 50 | } 51 | 52 | .modaal-overlay { 53 | position: fixed; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | height: 100%; 58 | z-index: 999; 59 | opacity: 0; 60 | } 61 | .modaal-wrapper { 62 | display: block; 63 | position: fixed; 64 | top: 0; 65 | left: 0; 66 | width: 100%; 67 | height: 100%; 68 | z-index: 9999; 69 | overflow: auto; 70 | opacity: 1; 71 | box-sizing: border-box; 72 | -webkit-overflow-scrolling: touch; 73 | @include modaal-transition(all, 0.3s); 74 | & * { 75 | box-sizing: border-box; 76 | -webkit-font-smoothing: antialiased; 77 | -moz-osx-font-smoothing: grayscale; 78 | -webkit-backface-visibility: hidden; 79 | } 80 | .modaal-close { 81 | border: none; 82 | background: transparent; 83 | padding: 0; 84 | -webkit-appearance: none; 85 | } 86 | 87 | &.modaal-start_none { 88 | display: none; 89 | opacity: 1; 90 | } 91 | &.modaal-start_fade { 92 | opacity: 0; 93 | } 94 | 95 | & *[tabindex="0"] { 96 | outline: none !important; 97 | } 98 | 99 | // is fullscreen 100 | &.modaal-fullscreen { 101 | overflow: hidden; 102 | } 103 | } 104 | .modaal-outer-wrapper { 105 | display: table; 106 | position: relative; 107 | width: 100%; 108 | height: 100%; 109 | .modaal-fullscreen & { 110 | display: block; 111 | } 112 | } 113 | .modaal-inner-wrapper { 114 | display: table-cell; 115 | width: 100%; 116 | height: 100%; 117 | position: relative; 118 | vertical-align: middle; 119 | text-align: center; 120 | padding: 80px 25px; 121 | 122 | // when is fullscreen 123 | .modaal-fullscreen & { 124 | padding: 0; 125 | display: block; 126 | vertical-align: top; 127 | } 128 | } 129 | .modaal-container { 130 | position: relative; 131 | display: inline-block; 132 | width: 100%; 133 | margin: auto; 134 | text-align: left; 135 | color: $modaal-main-text; 136 | max-width: $modaal-max-width; 137 | border-radius: $modaal-radius; 138 | background: $modaal-main-bg; 139 | box-shadow: $modaal-shadow; 140 | cursor: auto; 141 | 142 | // while loading 143 | &.is_loading { 144 | height: 100px; 145 | width: 100px; 146 | overflow: hidden; 147 | } 148 | // when is fullscreen 149 | .modaal-fullscreen & { 150 | max-width: none; 151 | height: 100%; 152 | overflow: auto; 153 | } 154 | } 155 | 156 | .modaal-close { 157 | position: fixed; 158 | right: 20px; 159 | top: 20px; 160 | color: $modaal-light; 161 | cursor: pointer; 162 | opacity: 1; 163 | width: 50px; 164 | height: 50px; 165 | background: rgba(0,0,0, 0); 166 | border-radius: 100%; 167 | @include modaal-transition(all); 168 | &:focus, 169 | &:hover { 170 | outline: none; 171 | background: #fff; 172 | &:before, 173 | &:after { background: $modaal-close-hover-color; } 174 | } 175 | span { 176 | @include modaal-hidetext; 177 | } 178 | &:before, 179 | &:after { 180 | display: block; 181 | content: " "; 182 | position: absolute; 183 | top: 14px; 184 | left: 23px; 185 | width: 4px; 186 | height: 22px; 187 | border-radius: 4px; 188 | background: #fff; 189 | @include modaal-transition(background); 190 | } 191 | &:before { 192 | transform: rotate(-45deg); 193 | } 194 | &:after { 195 | transform: rotate(45deg); 196 | } 197 | .modaal-fullscreen & { 198 | background: $modaal-grey; 199 | right: 10px; 200 | top: 10px; 201 | } 202 | } 203 | 204 | .modaal-content-container { 205 | padding: $modaal-padding; 206 | } 207 | 208 | 209 | // Confirm Modaal 210 | // -------------------------------------------------------- 211 | 212 | .modaal-confirm-wrap { 213 | padding: 30px 0 0; 214 | text-align: center; 215 | font-size: 0; 216 | } 217 | .modaal-confirm-btn { 218 | font-size: 14px; 219 | display: inline-block; 220 | margin: 0 10px; 221 | vertical-align: middle; 222 | cursor: pointer; 223 | border: none; 224 | background: transparent; 225 | 226 | // Ok Button 227 | &.modaal-ok { 228 | padding: 10px 15px; 229 | color: $modaal-light; 230 | background: $modaal-primary; 231 | border-radius: 3px; 232 | @include modaal-transition(background); 233 | &:hover { 234 | background: darken($modaal-primary, 15%); 235 | } 236 | } 237 | &.modaal-cancel { 238 | text-decoration: underline; 239 | &:hover { 240 | text-decoration: none; 241 | color: darken($modaal-primary, 15%); 242 | } 243 | } 244 | } 245 | 246 | 247 | 248 | @keyframes instaReveal { 249 | 0% { opacity: 0; } 250 | 100% { opacity: 1; } 251 | } 252 | @-o-keyframes instaReveal { 253 | 0% { opacity: 0; } 254 | 100% { opacity: 1; } 255 | } 256 | @-moz-keyframes instaReveal { 257 | 0% { opacity: 0; } 258 | 100% { opacity: 1; } 259 | } 260 | @-webkit-keyframes instaReveal { 261 | 0% { opacity: 0; } 262 | 100% { opacity: 1; } 263 | } 264 | @-ms-keyframes instaReveal { 265 | 0% { opacity: 0; } 266 | 100% { opacity: 1; } 267 | } 268 | 269 | // Instagram Photo 270 | // -------------------------------------------------------- 271 | 272 | .modaal-instagram { 273 | .modaal-container { 274 | width: auto; 275 | background: transparent; 276 | box-shadow: none !important; 277 | } 278 | .modaal-content-container { 279 | padding: 0; 280 | background: transparent; 281 | } 282 | .modaal-content-container > blockquote { 283 | width: 1px !important; 284 | height: 1px !important; 285 | opacity: 0 !important; 286 | } 287 | iframe { 288 | opacity: 0; 289 | margin: -6px !important; 290 | border-radius: 0 !important; 291 | width: 1000px !important; 292 | max-width: 800px !important; 293 | box-shadow: none !important; 294 | 295 | animation: instaReveal 1s linear forwards; 296 | } 297 | } 298 | 299 | 300 | 301 | // Gallery 302 | // -------------------------------------------------------- 303 | .modaal-image { 304 | .modaal-inner-wrapper { 305 | padding-left: 140px; 306 | padding-right: 140px; 307 | } 308 | .modaal-container { 309 | width: auto; 310 | max-width: 100%; 311 | } 312 | } 313 | 314 | .modaal-gallery-wrap { 315 | position: relative; 316 | color: $modaal-light; 317 | } 318 | .modaal-gallery-item { 319 | display: none; 320 | img { 321 | display: block; 322 | //width: 100%; 323 | } 324 | &.is_active { 325 | display: block; 326 | } 327 | } 328 | .modaal-gallery-label { 329 | position: absolute; 330 | left: 0; 331 | width: 100%; 332 | margin: 20px 0 0; 333 | font-size: 18px; 334 | text-align: center; 335 | color: #fff; 336 | &:focus { 337 | outline: none; 338 | } 339 | } 340 | .modaal-gallery-control { 341 | position: absolute; 342 | top: 50%; 343 | transform: translateY(-50%); 344 | opacity: 1; 345 | cursor: pointer; 346 | color: $modaal-light; 347 | width: 50px; 348 | height: 50px; 349 | background: rgba(0,0,0, 0); 350 | border: none; 351 | border-radius: 100%; 352 | @include modaal-transition(all); 353 | &.is_hidden { 354 | opacity: 0; 355 | cursor: default; 356 | } 357 | &:focus, 358 | &:hover { 359 | outline: none; 360 | background: #fff; 361 | &:before, 362 | &:after { 363 | background: $modaal-grey; 364 | } 365 | } 366 | span { 367 | @include modaal-hidetext; 368 | } 369 | 370 | &:before, 371 | &:after { 372 | display: block; 373 | content: " "; 374 | position: absolute; 375 | top: 16px; 376 | left: 25px; 377 | width: 4px; 378 | height: 18px; 379 | border-radius: 4px; 380 | background: #fff; 381 | @include modaal-transition(background); 382 | } 383 | &:before { 384 | margin: -5px 0 0; 385 | transform: rotate(-45deg); 386 | } 387 | &:after { 388 | margin: 5px 0 0; 389 | transform: rotate(45deg); 390 | } 391 | } 392 | .modaal-gallery-next { 393 | &-inner { 394 | left: 100%; 395 | margin-left: 40px; 396 | } 397 | &-outer { 398 | right: 45px; 399 | } 400 | } 401 | .modaal-gallery-prev { 402 | &:before, 403 | &:after { left: 22px; } 404 | &:before { 405 | margin: 5px 0 0; 406 | transform: rotate(-45deg); 407 | } 408 | &:after { 409 | margin: -5px 0 0; 410 | transform: rotate(45deg); 411 | } 412 | 413 | &-inner { 414 | right: 100%; 415 | margin-right: 40px; 416 | } 417 | &-outer { 418 | left: 45px; 419 | } 420 | } 421 | 422 | 423 | // Video 424 | // -------------------------------------------------------- 425 | .modaal-video-wrap { 426 | margin: auto 50px; 427 | position: relative; 428 | } 429 | 430 | .modaal-video-container { 431 | position: relative; 432 | padding-bottom: 56.25%; 433 | height: 0; 434 | overflow: hidden; 435 | max-width: 100%; 436 | box-shadow: 0 0 10px rgba(0,0,0, 0.3); 437 | background: #000; 438 | max-width: 1300px; 439 | margin-left: auto; 440 | margin-right: auto; 441 | iframe, 442 | object, 443 | embed { 444 | position: absolute; 445 | top: 0; 446 | left: 0; 447 | width: 100%; 448 | height: 100%; 449 | } 450 | } 451 | 452 | // Modaal iFrame 453 | // -------------------------------------------------------- 454 | .modaal-iframe .modaal-content { 455 | width: 100%; 456 | height: 100%; 457 | } 458 | .modaal-iframe-elem { 459 | width: 100%; 460 | height: 100%; 461 | display: block; 462 | } 463 | 464 | 465 | // Responsive styles 466 | // -------------------------------------------------------- 467 | @media only screen and (min-width: 1400px) { 468 | .modaal-video-container { 469 | padding-bottom: 0; 470 | height: 731px; 471 | } 472 | } 473 | 474 | @media only screen and (max-width: 1140px) { 475 | .modaal-image { 476 | .modaal-inner-wrapper { 477 | padding-left: 25px; 478 | padding-right: 25px; 479 | } 480 | } 481 | .modaal-gallery-control { 482 | top: auto; 483 | bottom: 20px; 484 | transform: none; 485 | background: rgba(0,0,0, 0.7);; 486 | &:before, 487 | &:after { 488 | background: #fff; 489 | } 490 | } 491 | .modaal-gallery-next { 492 | left: auto; 493 | right: 20px; 494 | } 495 | .modaal-gallery-prev { 496 | left: 20px; 497 | right: auto; 498 | } 499 | } 500 | 501 | @media screen and (max-width: 900px) { 502 | .modaal-instagram iframe { 503 | width: 500px !important; 504 | } 505 | } 506 | @media screen and (max-height: 1100px) { 507 | .modaal-instagram iframe { 508 | width: 700px !important; 509 | } 510 | } 511 | @media screen and (max-height: 1000px) { 512 | .modaal-inner-wrapper { 513 | padding-top: 60px; 514 | padding-bottom: 60px; 515 | } 516 | .modaal-instagram iframe { 517 | width: 600px !important; 518 | } 519 | } 520 | @media screen and (max-height: 900px) { 521 | .modaal-instagram iframe { 522 | width: 500px !important; 523 | } 524 | .modaal-video-container { 525 | max-width: 900px; 526 | max-height: 510px; 527 | } 528 | } 529 | 530 | @media only screen and (max-width: 600px) { 531 | .modaal-instagram iframe { 532 | width: 280px !important; 533 | } 534 | } 535 | @media only screen and (max-height: 820px) { 536 | .modaal-gallery-label { 537 | display: none; 538 | } 539 | } 540 | 541 | 542 | 543 | // CSS loading gif 544 | // -------------------------------------------------------- 545 | .modaal-loading-spinner { 546 | background: none; 547 | position: absolute; 548 | width: 200px; 549 | height: 200px; 550 | top: 50%; 551 | left: 50%; 552 | margin: -100px 0 0 -100px; 553 | transform: scale(0.25); 554 | } 555 | @-ms-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-o-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.modaal-loading-spinner>div{width:24px;height:24px;margin-left:4px;margin-top:4px;position:absolute}.modaal-loading-spinner>div>div{width:100%;height:100%;border-radius:15px;background:#fff}.modaal-loading-spinner>div:nth-of-type(1)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:0s;-moz-animation-delay:0s;-webkit-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s}.modaal-loading-spinner>div:nth-of-type(2)>div,.modaal-loading-spinner>div:nth-of-type(3)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(1){-ms-transform:translate(84px,84px) rotate(45deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(45deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(45deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(45deg) translate(70px,0);transform:translate(84px,84px) rotate(45deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(2)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.12s;-moz-animation-delay:.12s;-webkit-animation-delay:.12s;-o-animation-delay:.12s;animation-delay:.12s}.modaal-loading-spinner>div:nth-of-type(2){-ms-transform:translate(84px,84px) rotate(90deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(90deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(90deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(90deg) translate(70px,0);transform:translate(84px,84px) rotate(90deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(3)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.25s;-moz-animation-delay:.25s;-webkit-animation-delay:.25s;-o-animation-delay:.25s;animation-delay:.25s}.modaal-loading-spinner>div:nth-of-type(4)>div,.modaal-loading-spinner>div:nth-of-type(5)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(3){-ms-transform:translate(84px,84px) rotate(135deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(135deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(135deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(135deg) translate(70px,0);transform:translate(84px,84px) rotate(135deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(4)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.37s;-moz-animation-delay:.37s;-webkit-animation-delay:.37s;-o-animation-delay:.37s;animation-delay:.37s}.modaal-loading-spinner>div:nth-of-type(4){-ms-transform:translate(84px,84px) rotate(180deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(180deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(180deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(180deg) translate(70px,0);transform:translate(84px,84px) rotate(180deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(5)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.5s;-moz-animation-delay:.5s;-webkit-animation-delay:.5s;-o-animation-delay:.5s;animation-delay:.5s}.modaal-loading-spinner>div:nth-of-type(6)>div,.modaal-loading-spinner>div:nth-of-type(7)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(5){-ms-transform:translate(84px,84px) rotate(225deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(225deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(225deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(225deg) translate(70px,0);transform:translate(84px,84px) rotate(225deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(6)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.62s;-moz-animation-delay:.62s;-webkit-animation-delay:.62s;-o-animation-delay:.62s;animation-delay:.62s}.modaal-loading-spinner>div:nth-of-type(6){-ms-transform:translate(84px,84px) rotate(270deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(270deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(270deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(270deg) translate(70px,0);transform:translate(84px,84px) rotate(270deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(7)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.75s;-moz-animation-delay:.75s;-webkit-animation-delay:.75s;-o-animation-delay:.75s;animation-delay:.75s}.modaal-loading-spinner>div:nth-of-type(7){-ms-transform:translate(84px,84px) rotate(315deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(315deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(315deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(315deg) translate(70px,0);transform:translate(84px,84px) rotate(315deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(8)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.87s;-moz-animation-delay:.87s;-webkit-animation-delay:.87s;-o-animation-delay:.87s;animation-delay:.87s}.modaal-loading-spinner>div:nth-of-type(8){-ms-transform:translate(84px,84px) rotate(360deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(360deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(360deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(360deg) translate(70px,0);transform:translate(84px,84px) rotate(360deg) translate(70px,0)} 556 | -------------------------------------------------------------------------------- /dist/js/modaal.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | Modaal - accessible modals - v0.4.4 3 | by Humaan, for all humans. 4 | http://humaan.com 5 | */ 6 | !function(a){function t(a){var t={},o=!1;a.attr("data-modaal-type")&&(o=!0,t.type=a.attr("data-modaal-type")),a.attr("data-modaal-content-source")&&(o=!0,t.content_source=a.attr("data-modaal-content-source")),a.attr("data-modaal-animation")&&(o=!0,t.animation=a.attr("data-modaal-animation")),a.attr("data-modaal-animation-speed")&&(o=!0,t.animation_speed=a.attr("data-modaal-animation-speed")),a.attr("data-modaal-after-callback-delay")&&(o=!0,t.after_callback_delay=a.attr("data-modaal-after-callback-delay")),a.attr("data-modaal-is-locked")&&(o=!0,t.is_locked="true"===a.attr("data-modaal-is-locked")),a.attr("data-modaal-hide-close")&&(o=!0,t.hide_close="true"===a.attr("data-modaal-hide-close")),a.attr("data-modaal-background")&&(o=!0,t.background=a.attr("data-modaal-background")),a.attr("data-modaal-overlay-opacity")&&(o=!0,t.overlay_opacity=a.attr("data-modaal-overlay-opacity")),a.attr("data-modaal-overlay-close")&&(o=!0,t.overlay_close="false"!==a.attr("data-modaal-overlay-close")),a.attr("data-modaal-accessible-title")&&(o=!0,t.accessible_title=a.attr("data-modaal-accessible-title")),a.attr("data-modaal-start-open")&&(o=!0,t.start_open="true"===a.attr("data-modaal-start-open")),a.attr("data-modaal-fullscreen")&&(o=!0,t.fullscreen="true"===a.attr("data-modaal-fullscreen")),a.attr("data-modaal-custom-class")&&(o=!0,t.custom_class=a.attr("data-modaal-custom-class")),a.attr("data-modaal-close-text")&&(o=!0,t.close_text=a.attr("data-modaal-close-text")),a.attr("data-modaal-close-aria-label")&&(o=!0,t.close_aria_label=a.attr("data-modaal-close-aria-label")),a.attr("data-modaal-background-scroll")&&(o=!0,t.background_scroll="true"===a.attr("data-modaal-background-scroll")),a.attr("data-modaal-width")&&(o=!0,t.width=parseInt(a.attr("data-modaal-width"))),a.attr("data-modaal-height")&&(o=!0,t.height=parseInt(a.attr("data-modaal-height"))),a.attr("data-modaal-confirm-button-text")&&(o=!0,t.confirm_button_text=a.attr("data-modaal-confirm-button-text")),a.attr("data-modaal-confirm-cancel-button-text")&&(o=!0,t.confirm_cancel_button_text=a.attr("data-modaal-confirm-cancel-button-text")),a.attr("data-modaal-confirm-title")&&(o=!0,t.confirm_title=a.attr("data-modaal-confirm-title")),a.attr("data-modaal-confirm-content")&&(o=!0,t.confirm_content=a.attr("data-modaal-confirm-content")),a.attr("data-modaal-gallery-active-class")&&(o=!0,t.gallery_active_class=a.attr("data-modaal-gallery-active-class")),a.attr("data-modaal-loading-content")&&(o=!0,t.loading_content=a.attr("data-modaal-loading-content")),a.attr("data-modaal-loading-class")&&(o=!0,t.loading_class=a.attr("data-modaal-loading-class")),a.attr("data-modaal-ajax-error-class")&&(o=!0,t.ajax_error_class=a.attr("data-modaal-ajax-error-class")),a.attr("data-modaal-instagram-id")&&(o=!0,t.instagram_id=a.attr("data-modaal-instagram-id")),o&&a.modaal(t)}var o={init:function(t,o){var e=this;if(e.dom=a("body"),e.$elem=a(o),e.options=a.extend({},a.fn.modaal.options,e.$elem.data(),t),e.xhr=null,e.scope={is_open:!1,id:"modaal_"+(new Date).getTime()+Math.random().toString(16).substring(2),source:e.options.content_source?e.options.content_source:e.$elem.attr("href")},e.$elem.attr("data-modaal-scope",e.scope.id),e.private_options={active_class:"is_active"},e.lastFocus=null,e.options.is_locked||"confirm"==e.options.type||e.options.hide_close?e.scope.close_btn="":e.scope.close_btn='","none"===e.options.animation&&(e.options.animation_speed=0,e.options.after_callback_delay=0),a(o).on("click.Modaal",function(a){a.preventDefault(),e.create_modaal(e,a)}),!0===e.options.outer_controls)var i="outer";else var i="inner";e.scope.prev_btn='',e.scope.next_btn='',!0===e.options.start_open&&e.create_modaal(e)},create_modaal:function(a,t){var o,a=this;if(a.lastFocus=a.$elem,!1!==a.options.should_open&&("function"!=typeof a.options.should_open||!1!==a.options.should_open())){switch(a.options.before_open.call(a,t),a.options.type){case"inline":a.create_basic();break;case"ajax":o=a.options.source(a.$elem,a.scope.source),a.fetch_ajax(o);break;case"confirm":a.options.is_locked=!0,a.create_confirm();break;case"image":a.create_image();break;case"iframe":o=a.options.source(a.$elem,a.scope.source),a.create_iframe(o);break;case"video":a.create_video(a.scope.source);break;case"instagram":a.create_instagram()}a.watch_events()}},watch_events:function(){var t=this;t.dom.off("click.Modaal keyup.Modaal keydown.Modaal"),t.dom.on("keydown.Modaal",function(o){var e=o.keyCode,i=o.target;9==e&&t.scope.is_open&&(a.contains(document.getElementById(t.scope.id),i)||a("#"+t.scope.id).find('*[tabindex="0"]').focus())}),t.dom.on("keyup.Modaal",function(o){var e=o.keyCode,i=o.target;return o.shiftKey&&9==o.keyCode&&t.scope.is_open&&(a.contains(document.getElementById(t.scope.id),i)||a("#"+t.scope.id).find(".modaal-close").focus()),!t.options.is_locked&&27==e&&t.scope.is_open?!a(document.activeElement).is("input:not(:checkbox):not(:radio)")&&void t.modaal_close():"image"==t.options.type?(37==e&&t.scope.is_open&&!a("#"+t.scope.id+" .modaal-gallery-prev").hasClass("is_hidden")&&t.gallery_update("prev"),void(39==e&&t.scope.is_open&&!a("#"+t.scope.id+" .modaal-gallery-next").hasClass("is_hidden")&&t.gallery_update("next"))):void 0}),t.dom.on("click.Modaal",function(o){var e=a(o.target);if(!t.options.is_locked&&(t.options.overlay_close&&e.is(".modaal-inner-wrapper")||e.is(".modaal-close")||e.closest(".modaal-close").length))return void t.modaal_close();if(e.is(".modaal-confirm-btn"))return e.is(".modaal-ok")&&t.options.confirm_callback.call(t,t.lastFocus),e.is(".modaal-cancel")&&t.options.confirm_cancel_callback.call(t,t.lastFocus),void t.modaal_close();if(e.is(".modaal-gallery-control")){if(e.hasClass("is_hidden"))return;return e.is(".modaal-gallery-prev")&&t.gallery_update("prev"),void(e.is(".modaal-gallery-next")&&t.gallery_update("next"))}})},build_modal:function(t){var o=this,e="";"instagram"==o.options.type&&(e=" modaal-instagram");var i,l="video"==o.options.type?"modaal-video-wrap":"modaal-content";switch(o.options.animation){case"fade":i=" modaal-start_fade";break;case"slide-down":i=" modaal-start_slidedown";break;default:i=" modaal-start_none"}var n="";o.options.fullscreen&&(n=" modaal-fullscreen"),""===o.options.custom_class&&void 0===o.options.custom_class||(o.options.custom_class=" "+o.options.custom_class);var s="";o.options.width&&o.options.height&&"number"==typeof o.options.width&&"number"==typeof o.options.height?s=' style="max-width:'+o.options.width+"px;height:"+o.options.height+'px;overflow:auto;"':o.options.width&&"number"==typeof o.options.width?s=' style="max-width:'+o.options.width+'px;"':o.options.height&&"number"==typeof o.options.height&&(s=' style="height:'+o.options.height+'px;overflow:auto;"'),("image"==o.options.type||"video"==o.options.type||"instagram"==o.options.type||o.options.fullscreen)&&(s="");var d="";o.is_touch()&&(d=' style="cursor:pointer;"');var r='
";"video"!=o.options.type&&(r+='
"),r+='"+o.scope.close_btn,"video"!=o.options.type&&(r+="
"),r+="
","image"==o.options.type&&!0===o.options.outer_controls&&(r+=o.scope.prev_btn+o.scope.next_btn),r+="
",a("#"+o.scope.id+"_overlay").length<1&&o.dom.append(r),"inline"==o.options.type&&t.appendTo("#"+o.scope.id+" .modaal-content-container"),o.modaal_overlay("show")},create_basic:function(){var t=this,o=a(t.scope.source),e="";o.length?(e=o.contents().detach(),o.empty()):e="Content could not be loaded. Please check the source and try again.",t.build_modal(e)},create_instagram:function(){var t=this,o=t.options.instagram_id,e="",i="Instagram photo couldn't be loaded, please check the embed code and try again.";if(t.build_modal('
'+t.options.loading_content+"
"),""!=o&&null!==o&&void 0!==o){var l="https://api.instagram.com/oembed?url=http://instagr.am/p/"+o+"/";a.ajax({url:l,dataType:"jsonp",cache:!1,success:function(o){t.dom.append('
'+o.html+"
"),t.dom.attr("data-igloaded")?window.instgrm.Embeds.process():t.dom.attr("data-igloaded","true");var e="#"+t.scope.id+" .modaal-content-container";a(e).length>0&&setTimeout(function(){a("#temp-ig").contents().clone().appendTo(e),a("#temp-ig").remove()},1e3)},error:function(){e=i;var o=a("#"+t.scope.id+" .modaal-content-container");o.length>0&&(o.removeClass(t.options.loading_class).addClass(t.options.ajax_error_class),o.html(e))}})}else e=i;return!1},fetch_ajax:function(t){var o=this;null==o.options.accessible_title&&(o.options.accessible_title="Dialog Window"),null!==o.xhr&&(o.xhr.abort(),o.xhr=null),o.build_modal('
'+o.options.loading_content+"
"),o.xhr=a.ajax(t,{success:function(t){var e=a("#"+o.scope.id).find(".modaal-content-container");e.length>0&&(e.removeClass(o.options.loading_class),e.html(t),o.options.ajax_success.call(o,e))},error:function(t){if("abort"!=t.statusText){var e=a("#"+o.scope.id+" .modaal-content-container");e.length>0&&(e.removeClass(o.options.loading_class).addClass(o.options.ajax_error_class),e.html("Content could not be loaded. Please check the source and try again."))}}})},create_confirm:function(){var a,t=this;a='

'+t.options.confirm_title+'

'+t.options.confirm_content+'
",t.build_modal(a)},create_image:function(){var t,o,e=this,i="";if(e.$elem.is("[data-group]")||e.$elem.is("[rel]")){var l=e.$elem.is("[data-group]"),n=l?e.$elem.attr("data-group"):e.$elem.attr("rel"),s=a(l?'[data-group="'+n+'"]':'[rel="'+n+'"]');s.removeAttr("data-gallery-active","is_active"),e.$elem.attr("data-gallery-active","is_active"),o=s.length-1;var d=[];i='
',s.each(function(t,o){var e="",i="",l="",n=!1,s=!1,r=o.getAttribute("data-modaal-desc"),c=o.getAttribute("data-gallery-active");a(o).attr("data-modaal-content-source")?e=a(o).attr("data-modaal-content-source"):a(o).attr("href")?e=a(o).attr("href"):a(o).attr("src")?e=a(o).attr("src"):(e="trigger requires href or data-modaal-content-source attribute",s=!0),""!=r&&null!==r&&void 0!==r?(i=r,l='
Image '+(t+1)+" - "+r.replace(//g,">")+"
"):l='
Image '+(t+1)+"
",c&&(n=!0);var m={url:e,alt:i,rawdesc:r,desc:l,active:n,src_error:s};d.push(m)});for(var r=0;r';i+='
'+p+d[r].desc+"
"}i+="
",1!=e.options.outer_controls&&(i+=e.scope.prev_btn+e.scope.next_btn)}else{var u,_=!1;e.$elem.attr("data-modaal-content-source")?u=e.$elem.attr("data-modaal-content-source"):e.$elem.attr("href")?u=e.$elem.attr("href"):e.$elem.attr("src")?u=e.$elem.attr("src"):(u="trigger requires href or data-modaal-content-source attribute",_=!0);var v="",f="",m="";e.$elem.attr("data-modaal-desc")?(m=e.$elem.attr("data-modaal-desc"),v=e.$elem.attr("data-modaal-desc"),f='
Image - '+v.replace(//g,">")+"
"):m="Image with no description";var p=_?u:' ';i='
'+p+f+"
"}t=i,e.build_modal(t),a(".modaal-gallery-item.is_active").is(".gallery-item-0")&&a(".modaal-gallery-prev").hide(),a(".modaal-gallery-item.is_active").is(".gallery-item-"+o)&&a(".modaal-gallery-next").hide()},gallery_update:function(t){var o=this,e=a("#"+o.scope.id),i=e.find(".modaal-gallery-item"),l=i.length-1;if(0==l)return!1;var n=e.find(".modaal-gallery-prev"),s=e.find(".modaal-gallery-next"),d=0,r=0,c=e.find(".modaal-gallery-item."+o.private_options.active_class),m="next"==t?c.next(".modaal-gallery-item"):c.prev(".modaal-gallery-item");return o.options.before_image_change.call(o,c,m),("prev"!=t||!e.find(".gallery-item-0").hasClass("is_active"))&&(("next"!=t||!e.find(".gallery-item-"+l).hasClass("is_active"))&&void c.stop().animate({opacity:0},250,function(){m.addClass("is_next").css({position:"absolute",display:"block",opacity:0});var t=a(document).width(),i=t>1140?280:50;d=e.find(".modaal-gallery-item.is_next").width(),r=e.find(".modaal-gallery-item.is_next").height();var p=e.find(".modaal-gallery-item.is_next img").prop("naturalWidth"),u=e.find(".modaal-gallery-item.is_next img").prop("naturalHeight");p>t-i?(d=t-i,e.find(".modaal-gallery-item.is_next").css({width:d}),e.find(".modaal-gallery-item.is_next img").css({width:d}),r=e.find(".modaal-gallery-item.is_next").find("img").height()):(d=p,r=u),e.find(".modaal-gallery-item-wrap").stop().animate({width:d,height:r},250,function(){c.removeClass(o.private_options.active_class+" "+o.options.gallery_active_class).removeAttr("style"),c.find("img").removeAttr("style"),m.addClass(o.private_options.active_class+" "+o.options.gallery_active_class).removeClass("is_next").css("position",""),m.stop().animate({opacity:1},250,function(){a(this).removeAttr("style").css({width:"100%"}),a(this).find("img").css("width","100%"),e.find(".modaal-gallery-item-wrap").removeAttr("style"),o.options.after_image_change.call(o,m)}),e.find(".modaal-gallery-item").removeAttr("tabindex"),e.find(".modaal-gallery-item."+o.private_options.active_class).attr("tabindex","0").focus(),e.find(".modaal-gallery-item."+o.private_options.active_class).is(".gallery-item-0")?n.stop().animate({opacity:0},150,function(){a(this).hide()}):n.stop().css({display:"block",opacity:n.css("opacity")}).animate({opacity:1},150),e.find(".modaal-gallery-item."+o.private_options.active_class).is(".gallery-item-"+l)?s.stop().animate({opacity:0},150,function(){a(this).hide()}):s.stop().css({display:"block",opacity:n.css("opacity")}).animate({opacity:1},150)})}))},create_video:function(a){var t,o=this;t='',o.build_modal('
'+t+"
")},create_iframe:function(a){var t,o=this;t=null!==o.options.width||void 0!==o.options.width||null!==o.options.height||void 0!==o.options.height?'':'
Please specify a width and height for your iframe
',o.build_modal(t)},modaal_open:function(){var t=this,o=a("#"+t.scope.id),e=t.options.animation;"none"===e&&(o.removeClass("modaal-start_none"),t.options.after_open.call(t,o)),"fade"===e&&o.removeClass("modaal-start_fade"),"slide-down"===e&&o.removeClass("modaal-start_slide_down");var i=o;a(".modaal-wrapper *[tabindex=0]").removeAttr("tabindex"),i="image"==t.options.type?a("#"+t.scope.id).find(".modaal-gallery-item."+t.private_options.active_class):o.find(".modaal-iframe-elem").length?o.find(".modaal-iframe-elem"):o.find(".modaal-video-wrap").length?o.find(".modaal-video-wrap"):o.find(".modaal-focus"),i.attr("tabindex","0").focus(),"none"!==e&&setTimeout(function(){t.options.after_open.call(t,o)},t.options.after_callback_delay)},modaal_close:function(){var t=this,o=a("#"+t.scope.id);t.options.before_close.call(t,o),null!==t.xhr&&(t.xhr.abort(),t.xhr=null),"none"===t.options.animation&&o.addClass("modaal-start_none"),"fade"===t.options.animation&&o.addClass("modaal-start_fade"),"slide-down"===t.options.animation&&o.addClass("modaal-start_slide_down"),setTimeout(function(){"inline"==t.options.type&&a("#"+t.scope.id+" .modaal-content-container").contents().detach().appendTo(t.scope.source),o.remove(),t.options.after_close.call(t),t.scope.is_open=!1},t.options.after_callback_delay),t.modaal_overlay("hide"),null!=t.lastFocus&&t.lastFocus.focus()},modaal_overlay:function(t){var o=this;"show"==t?(o.scope.is_open=!0,o.options.background_scroll||o.dom.addClass("modaal-noscroll"),a("#"+o.scope.id+"_overlay").length<1&&o.dom.append('
'),a("#"+o.scope.id+"_overlay").css("background",o.options.background).stop().animate({opacity:o.options.overlay_opacity},o.options.animation_speed,function(){o.modaal_open()})):"hide"==t&&a("#"+o.scope.id+"_overlay").stop().animate({opacity:0},o.options.animation_speed,function(){a(this).remove(),o.dom.removeClass("modaal-noscroll")})},is_touch:function(){return"ontouchstart"in window||navigator.maxTouchPoints}},e=[];a.fn.modaal=function(t){return this.each(function(i){var l=a(this).data("modaal");if(l){if("string"==typeof t)switch(t){case"open":l.create_modaal(l);break;case"close":l.modaal_close()}}else{var n=Object.create(o);n.init(t,this),a.data(this,"modaal",n),e.push({element:a(this).attr("class"),options:t})}})},a.fn.modaal.options={type:"inline",content_source:null,animation:"fade",animation_speed:300,after_callback_delay:350,is_locked:!1,hide_close:!1,background:"#000",overlay_opacity:"0.8",overlay_close:!0,accessible_title:"Dialog Window",start_open:!1,fullscreen:!1,custom_class:"",background_scroll:!1,should_open:!0,close_text:"Close",close_aria_label:"Close (Press escape to close)",width:null,height:null,before_open:function(){},after_open:function(){},before_close:function(){},after_close:function(){},source:function(a,t){return t},confirm_button_text:"Confirm",confirm_cancel_button_text:"Cancel",confirm_title:"Confirm Title",confirm_content:"

This is the default confirm dialog content. Replace me through the options

",confirm_callback:function(){},confirm_cancel_callback:function(){},gallery_active_class:"gallery_active_item",outer_controls:!1,before_image_change:function(a,t){},after_image_change:function(a){},loading_content:'',loading_class:"is_loading",ajax_error_class:"modaal-error",ajax_success:function(){},instagram_id:null},a(function(){var o=a(".modaal");o.length&&o.each(function(){t(a(this))});var i=new MutationObserver(function(o){o.forEach(function(o){if(o.addedNodes&&o.addedNodes.length>0){[].some.call(o.addedNodes,function(o){var i=a(o);(i.is("a")||i.is("button"))&&(i.hasClass("modaal")?t(i):e.forEach(function(t){if(t.element==i.attr("class"))return a(i).modaal(t.options),!1}))})}})}),l={subtree:!0,attributes:!0,childList:!0,characterData:!0};setTimeout(function(){i.observe(document.body,l)},500)})}(jQuery,window,document); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | sass = require('gulp-sass'), 3 | autoprefixer = require('gulp-autoprefixer'), 4 | uglify = require('gulp-uglify'), 5 | rename = require('gulp-rename'), 6 | notify = require('gulp-notify'), 7 | del = require('del'), 8 | mmq = require('gulp-merge-media-queries'), 9 | cleanCSS = require('gulp-clean-css'); 10 | 11 | 12 | // Development tasks 13 | // ---------------------------------------------------------------------- 14 | 15 | gulp.task('styles', function() { 16 | gulp.src('source/css/modaal.scss') 17 | .pipe(sass({ 18 | style: 'expanded', 19 | sourcemap: false 20 | }) 21 | .on('error', sass.logError)) 22 | .pipe(autoprefixer({ 23 | browsers: 'last 3 versions, Explorer > 8, android 4' 24 | })) 25 | .pipe(mmq({ 26 | log: true 27 | })) 28 | .pipe(gulp.dest('source/css')) 29 | .pipe(notify({ 30 | message: 'Modaal styles task complete' 31 | })); 32 | }); 33 | 34 | // For demo website only, can be removed 35 | gulp.task('demo-styles', function() { 36 | gulp.src('demo/css/demo.scss') 37 | .pipe(sass({ 38 | style: 'expanded', 39 | sourcemap: false 40 | }) 41 | .on('error', sass.logError)) 42 | .pipe(autoprefixer({ 43 | browsers: ['last 2 version', 'ie 8', 'ie 9'] 44 | })) 45 | .pipe(gulp.dest('demo/css')) 46 | .pipe(notify({ 47 | message: 'Demo styles task complete' 48 | })); 49 | }); 50 | 51 | gulp.task('watch', function() { 52 | gulp.watch('source/css/*.scss', ['styles']); 53 | gulp.watch('demo/css/*.scss', ['demo-styles']); 54 | }); 55 | 56 | 57 | 58 | // Distribute tasks 59 | // ---------------------------------------------------------------------- 60 | 61 | gulp.task('min-modaal', function() { 62 | gulp.src(['source/js/modaal.js']) 63 | .pipe(uglify({ 64 | preserveComments: 'some' 65 | })) 66 | .pipe(rename({ 67 | suffix: '.min', 68 | extname: '.js' 69 | })) 70 | .pipe(gulp.dest('dist/js/')) 71 | .pipe(notify({ 72 | message: 'Successfully uglified Modaal.' 73 | })); 74 | 75 | gulp.src(['source/css/*.css']) 76 | .pipe(cleanCSS({compatibility: 'ie9'})) 77 | .pipe(rename({ 78 | extname : '.min.css' 79 | })) 80 | .pipe(gulp.dest('dist/css/')) 81 | .pipe(notify({ message: 'Min copy created.' })); 82 | }); 83 | 84 | gulp.task('copy-to-dist', function() { 85 | // copy other files to dist folder 86 | gulp.src('source/js/modaal.js') 87 | .pipe(gulp.dest('dist/js/')); 88 | 89 | gulp.src('source/css/modaal.scss') 90 | .pipe(gulp.dest('dist/css/')); 91 | 92 | gulp.src('source/css/modaal.css') 93 | .pipe(gulp.dest('dist/css/')) 94 | .pipe(notify({ 95 | message: 'Moved to dist.' 96 | })); 97 | }); 98 | 99 | // Now run in order 100 | gulp.task('dist', ['min-modaal', 'copy-to-dist']); 101 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Modaal is a WCAG 2.0 Level AA accessible modal plugin 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 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 54 | 55 | 56 | 57 |
58 |

Modaal

66 |

An accessible dialog window plugin for all humans.

67 | Download from Github 68 | View Example 69 |
v0.4.4
70 | A Humaan project 71 | 72 |
73 | 74 | 75 | 76 |
77 | 78 | 79 |
80 | Scroll to content 81 | 82 | 83 |
84 |
85 | 86 |
87 |
88 |

Modaal is a WCAG 2.0 Level AA accessible modal window plugin.

89 | 90 |

Why another modal plugin?

91 |

It's hard to find a plugin with the right mix of quality, flexibility and accessibility. We thought it would be interesting to develop something that would work in a variety of projects, furthering the cause for an accessible web.

92 |
93 |
94 |
95 | 96 |
97 |

Accessibility Features

98 |
    99 |
  • WCAG 2.0 Level AA Support
    • 100 |
  • Saving page focusing state on modal open
    • 101 |
  • Switching focus state to new content on modal open
    • 102 |
  • Switch focus back to original focus state on modal close (eg. button clicked)
    • 103 |
  • Maintained tab scope to modal content
    • 104 |
  • ARIA support and customisation for modal title
    • 105 |
  • Keyboard control for closing an open modal
    • 106 |
  • Keyboard control for gallery next and previous
    • 107 |
  • Default color contrast support optimised for readability
    • 108 |
  • Accessible <button> close element with ARIA attribute
    • 109 |
  • Optimised for assistive technologies and screen readers
    • 110 |
111 | 112 |

Other Features

113 |
    114 |
  • Fully responsive, scaling with browser width.
    • 115 |
  • Modal types include inline content, ajax, image and image gallery, iframe, confirmation and Instagram photo.
    • 116 |
  • Customisable CSS with SASS options
    • 117 |
  • Inline attribute configuration support
    • 118 |
  • Full-screen/viewport mode
    • 119 |
  • Flexible opan and close options and methods
    • 120 |
  • Callback events for before and after open and close
    • 121 |
  • Callback events for before and after image change in gallery.
    • 122 |
123 | 124 |
125 | 126 |
127 |
128 | 129 |
130 |
131 |
132 | 133 |

Modaal Examples

134 | 135 |
136 |

Inline Attribute Configuration

137 |

Modaal has been developed to support common jQuery configuration options, but in an effort to extend functionality and widen it's usage we've developed support for inline data-option-name attribute support.

138 |

To enable this, the Modaal trigger link must have a class of modaal, then you can add attributes to the link as needed like so:

139 | 140 | 
HTML<a href="#inline" data-modaal-type="inline" data-modaal-animation="fade" class="modaal">Show</a>
141 | 142 |

It's important to note, that configuration options that contain an underscore (_) in them need to be replaced with a hyphen (-), and prefixes with data-modaal- in it's respective html attribute. For example, overlay_opacity configuration would read data-modaal-overlay-opacity="0.8".

143 | 144 | Show Inline Modaal 145 |
146 | 147 |
148 |

Inline Content

149 |

Fetches content from an existing element (using an ID) in the page and loads it into the content.

150 | 151 | 
HTML<a href="#inline" class="inline">Show</a>
152 | <div id="inline">
153 |     Inline content goes here...
154 | </div>
155 | 
JS$(".inline").modaal();
156 | 157 |

If you would prefer your trigger element is not an <a href="#">, you can define a `content_source` value like so:

158 | 159 | 
HTML<button class="inline">Show</button>
160 | <div id="inline" style="display:none;">
161 | 	Inline content goes here...
162 | </div>
163 | 
JS$(".inline").modaal({
164 |     content_source: '#inline'
165 | });
166 | 167 | Show Inline Modaal 168 | 182 |
183 | 184 |
185 |

Fullscreen Mode

186 |

Fullscreen mode will open the Modaal window to fill the entire viewport. If the content exceeds the height of the window, the dialog will scroll vertically to allow access to all content.

187 |

Fullscreen mode works best with inline and ajax based modals only. Currently no support for fullscreen images.

188 | 189 | 
JS$('.fullscreen').modaal({
190 |     fullscreen: true
191 | });
192 | 193 | Show Fullscreen Modaal 194 |
195 | 196 |
197 |

AJAX

198 |

Loads content via AJAX into the Modaal window based on the link href attribute.

199 | 200 | 
HTML<a href="content.php" class="modaal-ajax">Show</a>
201 | 
JS$('.modaal-ajax').modaal({
202 |     type: 'ajax'
203 | });
204 |

If you would prefer your ajax trigger element is not an <a href="#">, you can define an ajax supported `content_source` value like so:

205 | 206 | 
HTML<button class="inline">Show</button>
207 | 
JS$(".inline").modaal({
208 |     content_source: '/path/to/file.html'
209 | });
210 | 211 | Show Ajax Modaal 212 |
213 | 214 |
215 |

Single Image Modal

216 |

Opens a single image.
217 | Label below opened image, as well as accessible label can be applied by using data-modaal-desc="My Image Description"

218 | 219 | 
HTML<a href="path/to/image.jpg" class="image" data-modaal-desc="My Description">Show</a>
220 | 
JS$('.image').modaal({
221 |     type: 'image'
222 | });
223 | 224 |

Show Single ImageThumbnail for single image

225 | 226 |

For image (and gallery) instances where a non <a href="#"> is desired, a data-modaal-content-source attribute is required, instead of it being declared as a javascript option. For example:

227 | 228 | 
HTML<button data-modaal-content-source="path/to/image.jpg" class="image">Show</button>
229 |
230 | 231 |
232 |

Image Gallery

233 |

Opens a series of images linked by a data-group="group-name" attribute. Replace group-name with what your gallery group identifier.

234 | 235 | 
HTML<a href="path/to/image-1.jpg" data-group="gallery" class="gallery">Show</a>
236 | <a href="path/to/image-2.jpg" data-group="gallery" class="gallery">Show</a>
237 | <a href="path/to/image-3.jpg" data-group="gallery" class="gallery">Show</a>
238 | 
JS$('.gallery').modaal({
239 |     type: 'image'
240 | });
241 | 242 |

243 | Show Gallery Image 1Thumbnail for Gallery Image 1 244 | Show Gallery Image 4Thumbnail for Gallery Image 4 245 | Show Gallery Image 2Thumbnail for Gallery Image 2 246 | Show Gallery Image 3Thumbnail for Gallery Image 3 247 |

248 | 249 |

For image gallery instances where a non <a href="#"> is desired, a data-modaal-content-source attribute is required, instead of it being declared as a javascript option. For example:

250 | 251 | 
HTML<button data-group="gallery" data-modaal-content-source="path/to/image-1.jpg" class="image">Show</button>
252 | <button data-group="gallery" data-modaal-content-source="path/to/image-2.jpg" class="image">Show</button>
253 |
254 | 255 |
256 |

Video

257 |

Loads in an embedded video as defined in the link href attribute, into an iframe. Currently tested formats include Youtube and Vimeo. Other that support iframe embedding should also work.

258 | 259 | 
HTML<a href="https://player.vimeo.com/video/142216434" class="video">Show</a>
260 | 
JS$('.video').modaal({
261 | 	type: 'video'
262 | });
263 | Show Video Modaal 264 | 265 | 266 |

Video Modaal Tips

267 |

The Modaal video type has been tested thoroughly using both Vimeo and Youtube. For best outcome, please ensure the url format looks like the one of the following below. We transplant this URL into an iframe which then each service provider controls all the necessary play back from there.

268 |

https://www.youtube.com/embed/cBJyo0tgLnw where the ID at the end is your unique video id. This can be found by selecting 'Share' on a youtube video, then clicking on 'Embed'. You'll find this URL within the content presented.

269 |

https://player.vimeo.com/video/109626219 where the ID at the end is your unique video id. This can be found by selecting 'Share' on a vimeo video (commonly seen on the right hand side), and by selecting the content within 'Embed'. You'll find the URL necessary towards the very beginning of that embed code inside src="".

270 |
271 | 272 |
273 |

iframe

274 |

Loads a url as defined in the link href attribute, into an iframe. This requires a set width and height for the Modaal to also be defined.

275 | 276 | 
HTML<a href="http://humaan.com" class="iframe">Show</a>
277 | 
JS$('.iframe').modaal({
278 | 	type: 'iframe',
279 | 	width: 700,
280 | 	height: 500
281 | });
282 | Show iFrame Modaal 283 |
284 | 285 |
286 |

Confirmation Modaal

287 |

Modaal window to prompt the user to Confirm or Cancel a particular action. Content can be pushed through including callback events as necessary. By default once open, it can not be closed until an action has been selected (such as Confirm/Cancel).

288 | 289 | 
HTML<a href="javascript:void(0);" class="confirm">Show</a>
290 | 
JS$('.confirm').modaal({
291 |     type: 'confirm',
292 |     confirm_button_text: 'Confirm',
293 |     confirm_cancel_button_text: 'Cancel',
294 |     confirm_title: 'Confirm Action XYZ',
295 |     confirm_content: '<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>',
296 |     confirm_callback: function() {
297 |         alert('you have confirmed this action');
298 | 	},
299 | 	confirm_cancel_callback: function() {
300 | 		alert('you have cancelled this action');
301 | 	}
302 | });
303 | 304 | Show Confirm Modaal 305 |
306 | 307 |
308 |

Instagram

309 |

Loads an embedded Instagram photo into a Modaal window. In the example below we're using inline data-modaal- attributes to set the type and unique photo ID.

310 | 311 | 
HTML<a href="#ig" class="modaal" data-modaal-type="instagram" data-modaal-instagram-id="BAGj2JqHFV6">Show</a>
312 | 313 | Show Instagram IG Image #1 314 | Show Instagram IG Image #2 315 | 316 |
317 | 318 |
319 |
320 | 321 |
322 |
323 |
324 | 325 |
326 | Download from Github 327 |
328 | 329 | 330 |
331 | 339 | Download from Github 340 |
341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "modaal", 3 | "description": "An accessible dialog window library for all humans.", 4 | "version": "0.4.4", 5 | "repository": "https://github.com/humaan/Modaal", 6 | "license": "MIT", 7 | "main": "dist/js/modaal.js", 8 | "devDependencies": { 9 | "jquery": "1.12.4", 10 | "del": "^2.0.2", 11 | "gulp": "^3.9.1", 12 | "gulp-cache": "^0.4.1", 13 | "gulp-csso": "^3.0.0", 14 | "gulp-merge-media-queries": "^0.2.1", 15 | "gulp-autoprefixer": "^3.1.1", 16 | "gulp-notify": "^2.2.0", 17 | "gulp-rename": "^1.2.2", 18 | "gulp-sass": "^3.2.1", 19 | "gulp-uglify": "^2.1.2", 20 | "gulp-clean-css": "^3.7.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /source/css/modaal.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Modaal - accessible modals - v0.4.4 3 | by Humaan, for all humans. 4 | http://humaan.com 5 | */ 6 | 7 | .modaal-noscroll { 8 | overflow: hidden; 9 | } 10 | 11 | .modaal-accessible-hide { 12 | position: absolute !important; 13 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 14 | clip: rect(1px, 1px, 1px, 1px); 15 | padding: 0 !important; 16 | border: 0 !important; 17 | height: 1px !important; 18 | width: 1px !important; 19 | overflow: hidden; 20 | } 21 | 22 | .modaal-overlay { 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 100%; 28 | z-index: 999; 29 | opacity: 0; 30 | } 31 | 32 | .modaal-wrapper { 33 | display: block; 34 | position: fixed; 35 | top: 0; 36 | left: 0; 37 | width: 100%; 38 | height: 100%; 39 | z-index: 9999; 40 | overflow: auto; 41 | opacity: 1; 42 | box-sizing: border-box; 43 | -webkit-overflow-scrolling: touch; 44 | -webkit-transition: all 0.3s ease-in-out; 45 | transition: all 0.3s ease-in-out; 46 | } 47 | 48 | .modaal-wrapper * { 49 | box-sizing: border-box; 50 | -webkit-font-smoothing: antialiased; 51 | -moz-osx-font-smoothing: grayscale; 52 | -webkit-backface-visibility: hidden; 53 | } 54 | 55 | .modaal-wrapper .modaal-close { 56 | border: none; 57 | background: transparent; 58 | padding: 0; 59 | -webkit-appearance: none; 60 | } 61 | 62 | .modaal-wrapper.modaal-start_none { 63 | display: none; 64 | opacity: 1; 65 | } 66 | 67 | .modaal-wrapper.modaal-start_fade { 68 | opacity: 0; 69 | } 70 | 71 | .modaal-wrapper *[tabindex="0"] { 72 | outline: none !important; 73 | } 74 | 75 | .modaal-wrapper.modaal-fullscreen { 76 | overflow: hidden; 77 | } 78 | 79 | .modaal-outer-wrapper { 80 | display: table; 81 | position: relative; 82 | width: 100%; 83 | height: 100%; 84 | } 85 | 86 | .modaal-fullscreen .modaal-outer-wrapper { 87 | display: block; 88 | } 89 | 90 | .modaal-inner-wrapper { 91 | display: table-cell; 92 | width: 100%; 93 | height: 100%; 94 | position: relative; 95 | vertical-align: middle; 96 | text-align: center; 97 | padding: 80px 25px; 98 | } 99 | 100 | .modaal-fullscreen .modaal-inner-wrapper { 101 | padding: 0; 102 | display: block; 103 | vertical-align: top; 104 | } 105 | 106 | .modaal-container { 107 | position: relative; 108 | display: inline-block; 109 | width: 100%; 110 | margin: auto; 111 | text-align: left; 112 | color: #000; 113 | max-width: 1000px; 114 | border-radius: 0px; 115 | background: #fff; 116 | box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 117 | cursor: auto; 118 | } 119 | 120 | .modaal-container.is_loading { 121 | height: 100px; 122 | width: 100px; 123 | overflow: hidden; 124 | } 125 | 126 | .modaal-fullscreen .modaal-container { 127 | max-width: none; 128 | height: 100%; 129 | overflow: auto; 130 | } 131 | 132 | .modaal-close { 133 | position: fixed; 134 | right: 20px; 135 | top: 20px; 136 | color: #fff; 137 | cursor: pointer; 138 | opacity: 1; 139 | width: 50px; 140 | height: 50px; 141 | background: rgba(0, 0, 0, 0); 142 | border-radius: 100%; 143 | -webkit-transition: all 0.2s ease-in-out; 144 | transition: all 0.2s ease-in-out; 145 | } 146 | 147 | .modaal-close:focus, 148 | .modaal-close:hover { 149 | outline: none; 150 | background: #fff; 151 | } 152 | 153 | .modaal-close:focus:before, 154 | .modaal-close:focus:after, 155 | .modaal-close:hover:before, 156 | .modaal-close:hover:after { 157 | background: #b93d0c; 158 | } 159 | 160 | .modaal-close span { 161 | position: absolute !important; 162 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 163 | clip: rect(1px, 1px, 1px, 1px); 164 | padding: 0 !important; 165 | border: 0 !important; 166 | height: 1px !important; 167 | width: 1px !important; 168 | overflow: hidden; 169 | } 170 | 171 | .modaal-close:before, 172 | .modaal-close:after { 173 | display: block; 174 | content: " "; 175 | position: absolute; 176 | top: 14px; 177 | left: 23px; 178 | width: 4px; 179 | height: 22px; 180 | border-radius: 4px; 181 | background: #fff; 182 | -webkit-transition: background 0.2s ease-in-out; 183 | transition: background 0.2s ease-in-out; 184 | } 185 | 186 | .modaal-close:before { 187 | -webkit-transform: rotate(-45deg); 188 | -ms-transform: rotate(-45deg); 189 | transform: rotate(-45deg); 190 | } 191 | 192 | .modaal-close:after { 193 | -webkit-transform: rotate(45deg); 194 | -ms-transform: rotate(45deg); 195 | transform: rotate(45deg); 196 | } 197 | 198 | .modaal-fullscreen .modaal-close { 199 | background: #afb7bc; 200 | right: 10px; 201 | top: 10px; 202 | } 203 | 204 | .modaal-content-container { 205 | padding: 30px; 206 | } 207 | 208 | .modaal-confirm-wrap { 209 | padding: 30px 0 0; 210 | text-align: center; 211 | font-size: 0; 212 | } 213 | 214 | .modaal-confirm-btn { 215 | font-size: 14px; 216 | display: inline-block; 217 | margin: 0 10px; 218 | vertical-align: middle; 219 | cursor: pointer; 220 | border: none; 221 | background: transparent; 222 | } 223 | 224 | .modaal-confirm-btn.modaal-ok { 225 | padding: 10px 15px; 226 | color: #fff; 227 | background: #555; 228 | border-radius: 3px; 229 | -webkit-transition: background 0.2s ease-in-out; 230 | transition: background 0.2s ease-in-out; 231 | } 232 | 233 | .modaal-confirm-btn.modaal-ok:hover { 234 | background: #2f2f2f; 235 | } 236 | 237 | .modaal-confirm-btn.modaal-cancel { 238 | text-decoration: underline; 239 | } 240 | 241 | .modaal-confirm-btn.modaal-cancel:hover { 242 | text-decoration: none; 243 | color: #2f2f2f; 244 | } 245 | 246 | .modaal-instagram .modaal-container { 247 | width: auto; 248 | background: transparent; 249 | box-shadow: none !important; 250 | } 251 | 252 | .modaal-instagram .modaal-content-container { 253 | padding: 0; 254 | background: transparent; 255 | } 256 | 257 | .modaal-instagram .modaal-content-container > blockquote { 258 | width: 1px !important; 259 | height: 1px !important; 260 | opacity: 0 !important; 261 | } 262 | 263 | .modaal-instagram iframe { 264 | opacity: 0; 265 | margin: -6px !important; 266 | border-radius: 0 !important; 267 | width: 1000px !important; 268 | max-width: 800px !important; 269 | box-shadow: none !important; 270 | -webkit-animation: instaReveal 1s linear forwards; 271 | animation: instaReveal 1s linear forwards; 272 | } 273 | 274 | .modaal-image .modaal-inner-wrapper { 275 | padding-left: 140px; 276 | padding-right: 140px; 277 | } 278 | 279 | .modaal-image .modaal-container { 280 | width: auto; 281 | max-width: 100%; 282 | } 283 | 284 | .modaal-gallery-wrap { 285 | position: relative; 286 | color: #fff; 287 | } 288 | 289 | .modaal-gallery-item { 290 | display: none; 291 | } 292 | 293 | .modaal-gallery-item img { 294 | display: block; 295 | } 296 | 297 | .modaal-gallery-item.is_active { 298 | display: block; 299 | } 300 | 301 | .modaal-gallery-label { 302 | position: absolute; 303 | left: 0; 304 | width: 100%; 305 | margin: 20px 0 0; 306 | font-size: 18px; 307 | text-align: center; 308 | color: #fff; 309 | } 310 | 311 | .modaal-gallery-label:focus { 312 | outline: none; 313 | } 314 | 315 | .modaal-gallery-control { 316 | position: absolute; 317 | top: 50%; 318 | -webkit-transform: translateY(-50%); 319 | -ms-transform: translateY(-50%); 320 | transform: translateY(-50%); 321 | opacity: 1; 322 | cursor: pointer; 323 | color: #fff; 324 | width: 50px; 325 | height: 50px; 326 | background: rgba(0, 0, 0, 0); 327 | border: none; 328 | border-radius: 100%; 329 | -webkit-transition: all 0.2s ease-in-out; 330 | transition: all 0.2s ease-in-out; 331 | } 332 | 333 | .modaal-gallery-control.is_hidden { 334 | opacity: 0; 335 | cursor: default; 336 | } 337 | 338 | .modaal-gallery-control:focus, 339 | .modaal-gallery-control:hover { 340 | outline: none; 341 | background: #fff; 342 | } 343 | 344 | .modaal-gallery-control:focus:before, 345 | .modaal-gallery-control:focus:after, 346 | .modaal-gallery-control:hover:before, 347 | .modaal-gallery-control:hover:after { 348 | background: #afb7bc; 349 | } 350 | 351 | .modaal-gallery-control span { 352 | position: absolute !important; 353 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 354 | clip: rect(1px, 1px, 1px, 1px); 355 | padding: 0 !important; 356 | border: 0 !important; 357 | height: 1px !important; 358 | width: 1px !important; 359 | overflow: hidden; 360 | } 361 | 362 | .modaal-gallery-control:before, 363 | .modaal-gallery-control:after { 364 | display: block; 365 | content: " "; 366 | position: absolute; 367 | top: 16px; 368 | left: 25px; 369 | width: 4px; 370 | height: 18px; 371 | border-radius: 4px; 372 | background: #fff; 373 | -webkit-transition: background 0.2s ease-in-out; 374 | transition: background 0.2s ease-in-out; 375 | } 376 | 377 | .modaal-gallery-control:before { 378 | margin: -5px 0 0; 379 | -webkit-transform: rotate(-45deg); 380 | -ms-transform: rotate(-45deg); 381 | transform: rotate(-45deg); 382 | } 383 | 384 | .modaal-gallery-control:after { 385 | margin: 5px 0 0; 386 | -webkit-transform: rotate(45deg); 387 | -ms-transform: rotate(45deg); 388 | transform: rotate(45deg); 389 | } 390 | 391 | .modaal-gallery-next-inner { 392 | left: 100%; 393 | margin-left: 40px; 394 | } 395 | 396 | .modaal-gallery-next-outer { 397 | right: 45px; 398 | } 399 | 400 | .modaal-gallery-prev:before, 401 | .modaal-gallery-prev:after { 402 | left: 22px; 403 | } 404 | 405 | .modaal-gallery-prev:before { 406 | margin: 5px 0 0; 407 | -webkit-transform: rotate(-45deg); 408 | -ms-transform: rotate(-45deg); 409 | transform: rotate(-45deg); 410 | } 411 | 412 | .modaal-gallery-prev:after { 413 | margin: -5px 0 0; 414 | -webkit-transform: rotate(45deg); 415 | -ms-transform: rotate(45deg); 416 | transform: rotate(45deg); 417 | } 418 | 419 | .modaal-gallery-prev-inner { 420 | right: 100%; 421 | margin-right: 40px; 422 | } 423 | 424 | .modaal-gallery-prev-outer { 425 | left: 45px; 426 | } 427 | 428 | .modaal-video-wrap { 429 | margin: auto 50px; 430 | position: relative; 431 | } 432 | 433 | .modaal-video-container { 434 | position: relative; 435 | padding-bottom: 56.25%; 436 | height: 0; 437 | overflow: hidden; 438 | max-width: 100%; 439 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 440 | background: #000; 441 | max-width: 1300px; 442 | margin-left: auto; 443 | margin-right: auto; 444 | } 445 | 446 | .modaal-video-container iframe, 447 | .modaal-video-container object, 448 | .modaal-video-container embed { 449 | position: absolute; 450 | top: 0; 451 | left: 0; 452 | width: 100%; 453 | height: 100%; 454 | } 455 | 456 | .modaal-iframe .modaal-content { 457 | width: 100%; 458 | height: 100%; 459 | } 460 | 461 | .modaal-iframe-elem { 462 | width: 100%; 463 | height: 100%; 464 | display: block; 465 | } 466 | 467 | .modaal-loading-spinner { 468 | background: none; 469 | position: absolute; 470 | width: 200px; 471 | height: 200px; 472 | top: 50%; 473 | left: 50%; 474 | margin: -100px 0 0 -100px; 475 | -webkit-transform: scale(0.25); 476 | -ms-transform: scale(0.25); 477 | transform: scale(0.25); 478 | } 479 | 480 | .modaal-loading-spinner > div { 481 | width: 24px; 482 | height: 24px; 483 | margin-left: 4px; 484 | margin-top: 4px; 485 | position: absolute; 486 | } 487 | 488 | .modaal-loading-spinner > div > div { 489 | width: 100%; 490 | height: 100%; 491 | border-radius: 15px; 492 | background: #fff; 493 | } 494 | 495 | .modaal-loading-spinner > div:nth-of-type(1) > div { 496 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 497 | animation: modaal-loading-spinner 1s linear infinite; 498 | -webkit-animation-delay: 0s; 499 | animation-delay: 0s; 500 | } 501 | 502 | .modaal-loading-spinner > div:nth-of-type(2) > div, 503 | .modaal-loading-spinner > div:nth-of-type(3) > div { 504 | -ms-animation: modaal-loading-spinner 1s linear infinite; 505 | -moz-animation: modaal-loading-spinner 1s linear infinite; 506 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 507 | -o-animation: modaal-loading-spinner 1s linear infinite; 508 | } 509 | 510 | .modaal-loading-spinner > div:nth-of-type(1) { 511 | -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); 512 | -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); 513 | transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); 514 | } 515 | 516 | .modaal-loading-spinner > div:nth-of-type(2) > div { 517 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 518 | animation: modaal-loading-spinner 1s linear infinite; 519 | -webkit-animation-delay: .12s; 520 | animation-delay: .12s; 521 | } 522 | 523 | .modaal-loading-spinner > div:nth-of-type(2) { 524 | -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); 525 | -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); 526 | transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); 527 | } 528 | 529 | .modaal-loading-spinner > div:nth-of-type(3) > div { 530 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 531 | animation: modaal-loading-spinner 1s linear infinite; 532 | -webkit-animation-delay: .25s; 533 | animation-delay: .25s; 534 | } 535 | 536 | .modaal-loading-spinner > div:nth-of-type(4) > div, 537 | .modaal-loading-spinner > div:nth-of-type(5) > div { 538 | -ms-animation: modaal-loading-spinner 1s linear infinite; 539 | -moz-animation: modaal-loading-spinner 1s linear infinite; 540 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 541 | -o-animation: modaal-loading-spinner 1s linear infinite; 542 | } 543 | 544 | .modaal-loading-spinner > div:nth-of-type(3) { 545 | -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); 546 | -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); 547 | transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); 548 | } 549 | 550 | .modaal-loading-spinner > div:nth-of-type(4) > div { 551 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 552 | animation: modaal-loading-spinner 1s linear infinite; 553 | -webkit-animation-delay: .37s; 554 | animation-delay: .37s; 555 | } 556 | 557 | .modaal-loading-spinner > div:nth-of-type(4) { 558 | -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); 559 | -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); 560 | transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); 561 | } 562 | 563 | .modaal-loading-spinner > div:nth-of-type(5) > div { 564 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 565 | animation: modaal-loading-spinner 1s linear infinite; 566 | -webkit-animation-delay: .5s; 567 | animation-delay: .5s; 568 | } 569 | 570 | .modaal-loading-spinner > div:nth-of-type(6) > div, 571 | .modaal-loading-spinner > div:nth-of-type(7) > div { 572 | -ms-animation: modaal-loading-spinner 1s linear infinite; 573 | -moz-animation: modaal-loading-spinner 1s linear infinite; 574 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 575 | -o-animation: modaal-loading-spinner 1s linear infinite; 576 | } 577 | 578 | .modaal-loading-spinner > div:nth-of-type(5) { 579 | -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); 580 | -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); 581 | transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); 582 | } 583 | 584 | .modaal-loading-spinner > div:nth-of-type(6) > div { 585 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 586 | animation: modaal-loading-spinner 1s linear infinite; 587 | -webkit-animation-delay: .62s; 588 | animation-delay: .62s; 589 | } 590 | 591 | .modaal-loading-spinner > div:nth-of-type(6) { 592 | -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); 593 | -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); 594 | transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); 595 | } 596 | 597 | .modaal-loading-spinner > div:nth-of-type(7) > div { 598 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 599 | animation: modaal-loading-spinner 1s linear infinite; 600 | -webkit-animation-delay: .75s; 601 | animation-delay: .75s; 602 | } 603 | 604 | .modaal-loading-spinner > div:nth-of-type(7) { 605 | -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); 606 | -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); 607 | transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); 608 | } 609 | 610 | .modaal-loading-spinner > div:nth-of-type(8) > div { 611 | -webkit-animation: modaal-loading-spinner 1s linear infinite; 612 | animation: modaal-loading-spinner 1s linear infinite; 613 | -webkit-animation-delay: .87s; 614 | animation-delay: .87s; 615 | } 616 | 617 | .modaal-loading-spinner > div:nth-of-type(8) { 618 | -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); 619 | -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); 620 | transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); 621 | } 622 | 623 | @media only screen and (min-width: 1400px) { 624 | 625 | .modaal-video-container { 626 | padding-bottom: 0; 627 | height: 731px; 628 | } 629 | 630 | } 631 | 632 | @media only screen and (max-width: 1140px) { 633 | 634 | .modaal-image .modaal-inner-wrapper { 635 | padding-left: 25px; 636 | padding-right: 25px; 637 | } 638 | 639 | .modaal-gallery-control { 640 | top: auto; 641 | bottom: 20px; 642 | -webkit-transform: none; 643 | -ms-transform: none; 644 | transform: none; 645 | background: rgba(0, 0, 0, 0.7); 646 | } 647 | 648 | .modaal-gallery-control:before, 649 | .modaal-gallery-control:after { 650 | background: #fff; 651 | } 652 | 653 | .modaal-gallery-next { 654 | left: auto; 655 | right: 20px; 656 | } 657 | 658 | .modaal-gallery-prev { 659 | left: 20px; 660 | right: auto; 661 | } 662 | 663 | } 664 | 665 | @media screen and (max-width: 900px) { 666 | 667 | .modaal-instagram iframe { 668 | width: 500px !important; 669 | } 670 | 671 | } 672 | 673 | @media only screen and (max-width: 600px) { 674 | 675 | .modaal-instagram iframe { 676 | width: 280px !important; 677 | } 678 | 679 | } 680 | 681 | @media screen and (max-height: 1100px) { 682 | 683 | .modaal-instagram iframe { 684 | width: 700px !important; 685 | } 686 | 687 | } 688 | 689 | @media screen and (max-height: 1000px) { 690 | 691 | .modaal-inner-wrapper { 692 | padding-top: 60px; 693 | padding-bottom: 60px; 694 | } 695 | 696 | .modaal-instagram iframe { 697 | width: 600px !important; 698 | } 699 | 700 | } 701 | 702 | @media screen and (max-height: 900px) { 703 | 704 | .modaal-instagram iframe { 705 | width: 500px !important; 706 | } 707 | 708 | .modaal-video-container { 709 | max-width: 900px; 710 | max-height: 510px; 711 | } 712 | 713 | } 714 | 715 | @media only screen and (max-height: 820px) { 716 | 717 | .modaal-gallery-label { 718 | display: none; 719 | } 720 | 721 | } 722 | 723 | @keyframes instaReveal { 724 | 725 | 0% { 726 | opacity: 0; 727 | } 728 | 729 | 100% { 730 | opacity: 1; 731 | } 732 | 733 | } 734 | 735 | @-webkit-keyframes instaReveal { 736 | 737 | 0% { 738 | opacity: 0; 739 | } 740 | 741 | 100% { 742 | opacity: 1; 743 | } 744 | 745 | } 746 | 747 | @-webkit-keyframes modaal-loading-spinner { 748 | 749 | 0% { 750 | opacity: 1; 751 | -ms-transform: scale(1.5); 752 | -webkit-transform: scale(1.5); 753 | transform: scale(1.5); 754 | } 755 | 756 | 100% { 757 | opacity: .1; 758 | -ms-transform: scale(1); 759 | -webkit-transform: scale(1); 760 | transform: scale(1); 761 | } 762 | 763 | } 764 | 765 | @keyframes modaal-loading-spinner { 766 | 767 | 0% { 768 | opacity: 1; 769 | -ms-transform: scale(1.5); 770 | -webkit-transform: scale(1.5); 771 | transform: scale(1.5); 772 | } 773 | 774 | 100% { 775 | opacity: .1; 776 | -ms-transform: scale(1); 777 | -webkit-transform: scale(1); 778 | transform: scale(1); 779 | } 780 | 781 | } 782 | 783 | -------------------------------------------------------------------------------- /source/css/modaal.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | Modaal - accessible modals - v0.4.4 3 | by Humaan, for all humans. 4 | http://humaan.com 5 | */ 6 | 7 | // Modaal Variables 8 | // -------------------------------------------------------- 9 | 10 | $modaal-overlay-color: rgba(0,0,0, 0.8); 11 | 12 | $modaal-radius: 0px; //5px 13 | $modaal-main-bg: #fff; 14 | $modaal-main-text: #000; 15 | $modaal-max-width: 1000px; 16 | $modaal-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 17 | $modaal-padding: 30px; 18 | $modaal-hover-color: rgba(0,0,0, 0.7); 19 | $modaal-close-hover-color: #b93d0c; 20 | 21 | $modaal-light: #fff; 22 | $modaal-primary: #555; 23 | $modaal-grey: #afb7bc; 24 | 25 | 26 | // Modaal Mixins 27 | // -------------------------------------------------------- 28 | @mixin modaal-transition($type, $speed: .2s, $ease: ease-in-out) { 29 | transition: $type #{$speed} #{$ease}; 30 | } 31 | @mixin modaal-hidetext() { 32 | position: absolute !important; 33 | clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ 34 | clip: rect(1px, 1px, 1px, 1px); 35 | padding:0 !important; 36 | border:0 !important; 37 | height: 1px !important; 38 | width: 1px !important; 39 | overflow: hidden; 40 | } 41 | 42 | 43 | // Modaal Structure 44 | // -------------------------------------------------------- 45 | .modaal-noscroll { 46 | overflow: hidden; 47 | } 48 | .modaal-accessible-hide { 49 | @include modaal-hidetext; 50 | } 51 | 52 | .modaal-overlay { 53 | position: fixed; 54 | top: 0; 55 | left: 0; 56 | width: 100%; 57 | height: 100%; 58 | z-index: 999; 59 | opacity: 0; 60 | } 61 | .modaal-wrapper { 62 | display: block; 63 | position: fixed; 64 | top: 0; 65 | left: 0; 66 | width: 100%; 67 | height: 100%; 68 | z-index: 9999; 69 | overflow: auto; 70 | opacity: 1; 71 | box-sizing: border-box; 72 | -webkit-overflow-scrolling: touch; 73 | @include modaal-transition(all, 0.3s); 74 | & * { 75 | box-sizing: border-box; 76 | -webkit-font-smoothing: antialiased; 77 | -moz-osx-font-smoothing: grayscale; 78 | -webkit-backface-visibility: hidden; 79 | } 80 | .modaal-close { 81 | border: none; 82 | background: transparent; 83 | padding: 0; 84 | -webkit-appearance: none; 85 | } 86 | 87 | &.modaal-start_none { 88 | display: none; 89 | opacity: 1; 90 | } 91 | &.modaal-start_fade { 92 | opacity: 0; 93 | } 94 | 95 | & *[tabindex="0"] { 96 | outline: none !important; 97 | } 98 | 99 | // is fullscreen 100 | &.modaal-fullscreen { 101 | overflow: hidden; 102 | } 103 | } 104 | .modaal-outer-wrapper { 105 | display: table; 106 | position: relative; 107 | width: 100%; 108 | height: 100%; 109 | .modaal-fullscreen & { 110 | display: block; 111 | } 112 | } 113 | .modaal-inner-wrapper { 114 | display: table-cell; 115 | width: 100%; 116 | height: 100%; 117 | position: relative; 118 | vertical-align: middle; 119 | text-align: center; 120 | padding: 80px 25px; 121 | 122 | // when is fullscreen 123 | .modaal-fullscreen & { 124 | padding: 0; 125 | display: block; 126 | vertical-align: top; 127 | } 128 | } 129 | .modaal-container { 130 | position: relative; 131 | display: inline-block; 132 | width: 100%; 133 | margin: auto; 134 | text-align: left; 135 | color: $modaal-main-text; 136 | max-width: $modaal-max-width; 137 | border-radius: $modaal-radius; 138 | background: $modaal-main-bg; 139 | box-shadow: $modaal-shadow; 140 | cursor: auto; 141 | 142 | // while loading 143 | &.is_loading { 144 | height: 100px; 145 | width: 100px; 146 | overflow: hidden; 147 | } 148 | // when is fullscreen 149 | .modaal-fullscreen & { 150 | max-width: none; 151 | height: 100%; 152 | overflow: auto; 153 | } 154 | } 155 | 156 | .modaal-close { 157 | position: fixed; 158 | right: 20px; 159 | top: 20px; 160 | color: $modaal-light; 161 | cursor: pointer; 162 | opacity: 1; 163 | width: 50px; 164 | height: 50px; 165 | background: rgba(0,0,0, 0); 166 | border-radius: 100%; 167 | @include modaal-transition(all); 168 | &:focus, 169 | &:hover { 170 | outline: none; 171 | background: #fff; 172 | &:before, 173 | &:after { background: $modaal-close-hover-color; } 174 | } 175 | span { 176 | @include modaal-hidetext; 177 | } 178 | &:before, 179 | &:after { 180 | display: block; 181 | content: " "; 182 | position: absolute; 183 | top: 14px; 184 | left: 23px; 185 | width: 4px; 186 | height: 22px; 187 | border-radius: 4px; 188 | background: #fff; 189 | @include modaal-transition(background); 190 | } 191 | &:before { 192 | transform: rotate(-45deg); 193 | } 194 | &:after { 195 | transform: rotate(45deg); 196 | } 197 | .modaal-fullscreen & { 198 | background: $modaal-grey; 199 | right: 10px; 200 | top: 10px; 201 | } 202 | } 203 | 204 | .modaal-content-container { 205 | padding: $modaal-padding; 206 | } 207 | 208 | 209 | // Confirm Modaal 210 | // -------------------------------------------------------- 211 | 212 | .modaal-confirm-wrap { 213 | padding: 30px 0 0; 214 | text-align: center; 215 | font-size: 0; 216 | } 217 | .modaal-confirm-btn { 218 | font-size: 14px; 219 | display: inline-block; 220 | margin: 0 10px; 221 | vertical-align: middle; 222 | cursor: pointer; 223 | border: none; 224 | background: transparent; 225 | 226 | // Ok Button 227 | &.modaal-ok { 228 | padding: 10px 15px; 229 | color: $modaal-light; 230 | background: $modaal-primary; 231 | border-radius: 3px; 232 | @include modaal-transition(background); 233 | &:hover { 234 | background: darken($modaal-primary, 15%); 235 | } 236 | } 237 | &.modaal-cancel { 238 | text-decoration: underline; 239 | &:hover { 240 | text-decoration: none; 241 | color: darken($modaal-primary, 15%); 242 | } 243 | } 244 | } 245 | 246 | 247 | 248 | @keyframes instaReveal { 249 | 0% { opacity: 0; } 250 | 100% { opacity: 1; } 251 | } 252 | @-o-keyframes instaReveal { 253 | 0% { opacity: 0; } 254 | 100% { opacity: 1; } 255 | } 256 | @-moz-keyframes instaReveal { 257 | 0% { opacity: 0; } 258 | 100% { opacity: 1; } 259 | } 260 | @-webkit-keyframes instaReveal { 261 | 0% { opacity: 0; } 262 | 100% { opacity: 1; } 263 | } 264 | @-ms-keyframes instaReveal { 265 | 0% { opacity: 0; } 266 | 100% { opacity: 1; } 267 | } 268 | 269 | // Instagram Photo 270 | // -------------------------------------------------------- 271 | 272 | .modaal-instagram { 273 | .modaal-container { 274 | width: auto; 275 | background: transparent; 276 | box-shadow: none !important; 277 | } 278 | .modaal-content-container { 279 | padding: 0; 280 | background: transparent; 281 | } 282 | .modaal-content-container > blockquote { 283 | width: 1px !important; 284 | height: 1px !important; 285 | opacity: 0 !important; 286 | } 287 | iframe { 288 | opacity: 0; 289 | margin: -6px !important; 290 | border-radius: 0 !important; 291 | width: 1000px !important; 292 | max-width: 800px !important; 293 | box-shadow: none !important; 294 | 295 | animation: instaReveal 1s linear forwards; 296 | } 297 | } 298 | 299 | 300 | 301 | // Gallery 302 | // -------------------------------------------------------- 303 | .modaal-image { 304 | .modaal-inner-wrapper { 305 | padding-left: 140px; 306 | padding-right: 140px; 307 | } 308 | .modaal-container { 309 | width: auto; 310 | max-width: 100%; 311 | } 312 | } 313 | 314 | .modaal-gallery-wrap { 315 | position: relative; 316 | color: $modaal-light; 317 | } 318 | .modaal-gallery-item { 319 | display: none; 320 | img { 321 | display: block; 322 | //width: 100%; 323 | } 324 | &.is_active { 325 | display: block; 326 | } 327 | } 328 | .modaal-gallery-label { 329 | position: absolute; 330 | left: 0; 331 | width: 100%; 332 | margin: 20px 0 0; 333 | font-size: 18px; 334 | text-align: center; 335 | color: #fff; 336 | &:focus { 337 | outline: none; 338 | } 339 | } 340 | .modaal-gallery-control { 341 | position: absolute; 342 | top: 50%; 343 | transform: translateY(-50%); 344 | opacity: 1; 345 | cursor: pointer; 346 | color: $modaal-light; 347 | width: 50px; 348 | height: 50px; 349 | background: rgba(0,0,0, 0); 350 | border: none; 351 | border-radius: 100%; 352 | @include modaal-transition(all); 353 | &.is_hidden { 354 | opacity: 0; 355 | cursor: default; 356 | } 357 | &:focus, 358 | &:hover { 359 | outline: none; 360 | background: #fff; 361 | &:before, 362 | &:after { 363 | background: $modaal-grey; 364 | } 365 | } 366 | span { 367 | @include modaal-hidetext; 368 | } 369 | 370 | &:before, 371 | &:after { 372 | display: block; 373 | content: " "; 374 | position: absolute; 375 | top: 16px; 376 | left: 25px; 377 | width: 4px; 378 | height: 18px; 379 | border-radius: 4px; 380 | background: #fff; 381 | @include modaal-transition(background); 382 | } 383 | &:before { 384 | margin: -5px 0 0; 385 | transform: rotate(-45deg); 386 | } 387 | &:after { 388 | margin: 5px 0 0; 389 | transform: rotate(45deg); 390 | } 391 | } 392 | .modaal-gallery-next { 393 | &-inner { 394 | left: 100%; 395 | margin-left: 40px; 396 | } 397 | &-outer { 398 | right: 45px; 399 | } 400 | } 401 | .modaal-gallery-prev { 402 | &:before, 403 | &:after { left: 22px; } 404 | &:before { 405 | margin: 5px 0 0; 406 | transform: rotate(-45deg); 407 | } 408 | &:after { 409 | margin: -5px 0 0; 410 | transform: rotate(45deg); 411 | } 412 | 413 | &-inner { 414 | right: 100%; 415 | margin-right: 40px; 416 | } 417 | &-outer { 418 | left: 45px; 419 | } 420 | } 421 | 422 | 423 | // Video 424 | // -------------------------------------------------------- 425 | .modaal-video-wrap { 426 | margin: auto 50px; 427 | position: relative; 428 | } 429 | 430 | .modaal-video-container { 431 | position: relative; 432 | padding-bottom: 56.25%; 433 | height: 0; 434 | overflow: hidden; 435 | max-width: 100%; 436 | box-shadow: 0 0 10px rgba(0,0,0, 0.3); 437 | background: #000; 438 | max-width: 1300px; 439 | margin-left: auto; 440 | margin-right: auto; 441 | iframe, 442 | object, 443 | embed { 444 | position: absolute; 445 | top: 0; 446 | left: 0; 447 | width: 100%; 448 | height: 100%; 449 | } 450 | } 451 | 452 | // Modaal iFrame 453 | // -------------------------------------------------------- 454 | .modaal-iframe .modaal-content { 455 | width: 100%; 456 | height: 100%; 457 | } 458 | .modaal-iframe-elem { 459 | width: 100%; 460 | height: 100%; 461 | display: block; 462 | } 463 | 464 | 465 | // Responsive styles 466 | // -------------------------------------------------------- 467 | @media only screen and (min-width: 1400px) { 468 | .modaal-video-container { 469 | padding-bottom: 0; 470 | height: 731px; 471 | } 472 | } 473 | 474 | @media only screen and (max-width: 1140px) { 475 | .modaal-image { 476 | .modaal-inner-wrapper { 477 | padding-left: 25px; 478 | padding-right: 25px; 479 | } 480 | } 481 | .modaal-gallery-control { 482 | top: auto; 483 | bottom: 20px; 484 | transform: none; 485 | background: rgba(0,0,0, 0.7);; 486 | &:before, 487 | &:after { 488 | background: #fff; 489 | } 490 | } 491 | .modaal-gallery-next { 492 | left: auto; 493 | right: 20px; 494 | } 495 | .modaal-gallery-prev { 496 | left: 20px; 497 | right: auto; 498 | } 499 | } 500 | 501 | @media screen and (max-width: 900px) { 502 | .modaal-instagram iframe { 503 | width: 500px !important; 504 | } 505 | } 506 | @media screen and (max-height: 1100px) { 507 | .modaal-instagram iframe { 508 | width: 700px !important; 509 | } 510 | } 511 | @media screen and (max-height: 1000px) { 512 | .modaal-inner-wrapper { 513 | padding-top: 60px; 514 | padding-bottom: 60px; 515 | } 516 | .modaal-instagram iframe { 517 | width: 600px !important; 518 | } 519 | } 520 | @media screen and (max-height: 900px) { 521 | .modaal-instagram iframe { 522 | width: 500px !important; 523 | } 524 | .modaal-video-container { 525 | max-width: 900px; 526 | max-height: 510px; 527 | } 528 | } 529 | 530 | @media only screen and (max-width: 600px) { 531 | .modaal-instagram iframe { 532 | width: 280px !important; 533 | } 534 | } 535 | @media only screen and (max-height: 820px) { 536 | .modaal-gallery-label { 537 | display: none; 538 | } 539 | } 540 | 541 | 542 | 543 | // CSS loading gif 544 | // -------------------------------------------------------- 545 | .modaal-loading-spinner { 546 | background: none; 547 | position: absolute; 548 | width: 200px; 549 | height: 200px; 550 | top: 50%; 551 | left: 50%; 552 | margin: -100px 0 0 -100px; 553 | transform: scale(0.25); 554 | } 555 | @-ms-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-o-keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes modaal-loading-spinner{0%{opacity:1;-ms-transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}100%{opacity:.1;-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}.modaal-loading-spinner>div{width:24px;height:24px;margin-left:4px;margin-top:4px;position:absolute}.modaal-loading-spinner>div>div{width:100%;height:100%;border-radius:15px;background:#fff}.modaal-loading-spinner>div:nth-of-type(1)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:0s;-moz-animation-delay:0s;-webkit-animation-delay:0s;-o-animation-delay:0s;animation-delay:0s}.modaal-loading-spinner>div:nth-of-type(2)>div,.modaal-loading-spinner>div:nth-of-type(3)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(1){-ms-transform:translate(84px,84px) rotate(45deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(45deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(45deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(45deg) translate(70px,0);transform:translate(84px,84px) rotate(45deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(2)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.12s;-moz-animation-delay:.12s;-webkit-animation-delay:.12s;-o-animation-delay:.12s;animation-delay:.12s}.modaal-loading-spinner>div:nth-of-type(2){-ms-transform:translate(84px,84px) rotate(90deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(90deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(90deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(90deg) translate(70px,0);transform:translate(84px,84px) rotate(90deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(3)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.25s;-moz-animation-delay:.25s;-webkit-animation-delay:.25s;-o-animation-delay:.25s;animation-delay:.25s}.modaal-loading-spinner>div:nth-of-type(4)>div,.modaal-loading-spinner>div:nth-of-type(5)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(3){-ms-transform:translate(84px,84px) rotate(135deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(135deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(135deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(135deg) translate(70px,0);transform:translate(84px,84px) rotate(135deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(4)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.37s;-moz-animation-delay:.37s;-webkit-animation-delay:.37s;-o-animation-delay:.37s;animation-delay:.37s}.modaal-loading-spinner>div:nth-of-type(4){-ms-transform:translate(84px,84px) rotate(180deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(180deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(180deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(180deg) translate(70px,0);transform:translate(84px,84px) rotate(180deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(5)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.5s;-moz-animation-delay:.5s;-webkit-animation-delay:.5s;-o-animation-delay:.5s;animation-delay:.5s}.modaal-loading-spinner>div:nth-of-type(6)>div,.modaal-loading-spinner>div:nth-of-type(7)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite}.modaal-loading-spinner>div:nth-of-type(5){-ms-transform:translate(84px,84px) rotate(225deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(225deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(225deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(225deg) translate(70px,0);transform:translate(84px,84px) rotate(225deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(6)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.62s;-moz-animation-delay:.62s;-webkit-animation-delay:.62s;-o-animation-delay:.62s;animation-delay:.62s}.modaal-loading-spinner>div:nth-of-type(6){-ms-transform:translate(84px,84px) rotate(270deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(270deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(270deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(270deg) translate(70px,0);transform:translate(84px,84px) rotate(270deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(7)>div{animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.75s;-moz-animation-delay:.75s;-webkit-animation-delay:.75s;-o-animation-delay:.75s;animation-delay:.75s}.modaal-loading-spinner>div:nth-of-type(7){-ms-transform:translate(84px,84px) rotate(315deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(315deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(315deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(315deg) translate(70px,0);transform:translate(84px,84px) rotate(315deg) translate(70px,0)}.modaal-loading-spinner>div:nth-of-type(8)>div{-ms-animation:modaal-loading-spinner 1s linear infinite;-moz-animation:modaal-loading-spinner 1s linear infinite;-webkit-animation:modaal-loading-spinner 1s linear infinite;-o-animation:modaal-loading-spinner 1s linear infinite;animation:modaal-loading-spinner 1s linear infinite;-ms-animation-delay:.87s;-moz-animation-delay:.87s;-webkit-animation-delay:.87s;-o-animation-delay:.87s;animation-delay:.87s}.modaal-loading-spinner>div:nth-of-type(8){-ms-transform:translate(84px,84px) rotate(360deg) translate(70px,0);-moz-transform:translate(84px,84px) rotate(360deg) translate(70px,0);-webkit-transform:translate(84px,84px) rotate(360deg) translate(70px,0);-o-transform:translate(84px,84px) rotate(360deg) translate(70px,0);transform:translate(84px,84px) rotate(360deg) translate(70px,0)} 556 | --------------------------------------------------------------------------------