├── .gitignore ├── .npmignore ├── LICENSE.md ├── README.md ├── bower.json ├── demo ├── LICENSE.txt ├── assets │ ├── css │ │ ├── font-awesome.min.css │ │ ├── images │ │ │ ├── overlay.png │ │ │ ├── pattern-size1.svg │ │ │ ├── pattern-size2.svg │ │ │ └── pattern-size3.svg │ │ └── main.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ ├── js │ │ ├── jquery.min.js │ │ ├── jquery.scrolly.min.js │ │ ├── main.js │ │ ├── skel.min.js │ │ └── util.js │ └── sass │ │ ├── base │ │ ├── _page.scss │ │ └── _typography.scss │ │ ├── components │ │ ├── _box.scss │ │ ├── _button.scss │ │ ├── _form.scss │ │ ├── _icon.scss │ │ ├── _image.scss │ │ ├── _list.scss │ │ ├── _section.scss │ │ ├── _spotlight.scss │ │ ├── _table.scss │ │ └── _wrapper.scss │ │ ├── ie8.scss │ │ ├── ie9.scss │ │ ├── layout │ │ ├── _footer.scss │ │ ├── _header.scss │ │ └── _main.scss │ │ ├── libs │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ ├── _skel.scss │ │ └── _vars.scss │ │ └── main.scss ├── images │ ├── bg.jpg │ ├── pic01.jpg │ ├── pic02.jpg │ ├── pic03.jpg │ ├── pic04.jpg │ ├── pic05.jpg │ └── screen.jpg └── index.html ├── gulpfile.js ├── index.html ├── package.json ├── publishing-material ├── documentation-source-files │ ├── MANUAL.html │ ├── highlight.default.min.css │ └── highlight.min.js ├── media-source-files │ ├── accurate-text-off-tr.png │ ├── accurate-text-on-tr.png │ ├── autohide-small.mp4 │ ├── dark-theme.png │ ├── panels.html │ ├── random_grey_variations.png │ ├── style.css │ └── xivmap1.png └── media │ ├── ss1.png │ ├── ss2.png │ ├── ss3.png │ ├── xivmap-accurate-text.png │ ├── xivmap-autohide.gif │ ├── xivmap-demo.gif │ ├── xivmap-demo.mp4 │ ├── xivmap-light-dark-theme.png │ ├── xivmap-preview.jpg │ └── xivmap-thumbnail.png ├── xivmap-docked.css ├── xivmap.css └── xivmap.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /.gh-pages 3 | /dist 4 | /packaged 5 | /node_modules 6 | /bower_components -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /.idea 2 | /.gitignore 3 | /.gh-pages 4 | /dist 5 | /publishing-material 6 | /demo 7 | /index.html 8 | /bower.json 9 | /node_modules 10 | /bower_components 11 | /gulpfile.js 12 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Andrea Stella 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # A minimap for websites, a la Sublime Text 2 | 3 | ![](publishing-material/media/xivmap-demo.gif) 4 | 5 | For a live demo please refer to [this page](http://codecanyon.net/item/xivmap-website-minimap-jquery-vanilla-js/full_screen_preview/13341416). 6 | 7 | Let's jump right in with an example: 8 | 9 | ```html 10 | 11 | 12 | My Website 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

Example header

22 |

Sample content

23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | ## Files 35 | Xivmap is composed of three files: 36 | - `xivmap.js` 37 | - `xivmap.css` 38 | - `xivmap-docked.css` (optional) 39 | 40 | Minified files are also provided, they should be used if you don't have a build process set up 41 | - `xivmap.min.js` 42 | - `xivmap.min.css` 43 | - `xivmap-docked.min.css` (optional) 44 | 45 | To use Xivmap, you need to add four things to your page: the two required files, a container for xivmap to use, and a line of JavaScript to start it up. 46 | 47 | ## CSS Classes 48 | You should add one of the positioning classes to your xivmap container, one animation class is also recommended. 49 | 50 | ###### Positioning classes 51 | `top-right`, `right`, `bottom-right` 52 | `top-left`, `left`, `bottom-left` 53 | 54 | ###### Animation classes 55 | `slide-in`, `fade-in` 56 | 57 | ## jQuery version 58 | Xivmap uses a hybrid model, both the jQuery and vanilla JavaScript versions are available in the same file. If jQuery is detected as being available, Xivmap will add its function to it. 59 | For the examples on this page, simply replace the calls to `xivmap()` with `$('.xvmap').xivmap()` 60 | 61 | 62 | ## Short Instructions 63 | - Include `xivmap.js` as a script tag. 64 | - Include `xivmap.css` as a stylesheet. 65 | - Create a div with the class `xivmap` and one of the positioning classes. 66 | - Tip: add the class `slide-in` or `fade-in` to it in order to add animations. 67 | - Tip: place this div near the end of the `` tag, after all your other content. This will make sure that it remains on top. If you don't do this, you might need to add `z-index` values through CSS. 68 | - inside a ` 80 | 81 | 82 |

Example header

83 |

Sample content

84 | 85 | 86 | ``` 87 | 88 | - Include the required files. Copy the xivmap folder to the same place where your html file is located. 89 | CSS should go inside `` and the JavaScript file should be near the end of the page, before the closing `` tag. 90 | ```html 91 | 92 | 93 | My Website 94 | 95 | 96 | 97 | 98 | 99 |

Example header

100 |

Sample content

101 | 102 | 103 | 104 | ``` 105 | 106 | - Add a container for Xivmap to use, as well as classes for the animation and position on the page. See the Classes section for a complete list of available classes. Make sure the container div comes before the xivmap script. 107 | ```html 108 | 109 | 110 | My Website 111 | 112 | 113 | 114 | 115 | 116 |

Example header

117 |

Sample content

118 |
119 | 120 | 121 | 122 | ``` 123 | 124 | - Add a script that calls the `xivmap()` function to render the minimap. 125 | ```html 126 | 127 | 128 | My Website 129 | 130 | 131 | 132 | 133 | 134 |

Example header

135 |

Sample content

136 |
137 | 138 | 139 | 140 | 141 | ``` 142 | 143 | ## Using Docked Mode 144 | Advanced users, feel free to use your own solution. `xivmap-docked.css` is just one example of the way you can customize the look and feel of your minimap. 145 | 146 | 1. Include `xivmap-docked.css` 147 | 2. Add `xivmap-docked-left` or `xivmap-docked-right` to the `` 148 | 3. Create a wrapper around the xivmap container, using the `xivmap-docked-wrapper` class: 149 | ```html 150 |
151 |
152 |
153 | ``` 154 | 155 | ## Enabling Autohide 156 | Autohide makes it so the minimap only shows when hovered or while scrolling, great for minimalist designs. 157 | 158 | Change your `xivmap()` function call to enable autohide: 159 | ```javascript 160 | xivmap({autohide: true}); 161 | ``` 162 | 163 | ## Disabling Accurate Text 164 | Accurate text is a feature that represents text boxes like headings and paragraphs with the true size of the text they contain, instead of the entire box. It is enabled by default. 165 | 166 | Turning off accurate text results in a more stylized look which may benefit some minimalist designs. 167 | 168 | ```javascript 169 | xivmap({accurateText: false}); 170 | ``` 171 | 172 | ## All Options 173 | Below are the options you may pass to the xivmap function, along with their default values 174 | 175 | ```javascript 176 | xivmap({ 177 | // Element that will hold the minimap DOM 178 | minimap: document.querySelector('.xivmap'), 179 | 180 | // CSS selectors for elements that will appear on the minimap 181 | selectors: xivmap.selectors(), 182 | 183 | // Where to look for the selectors 184 | context: document.body, 185 | 186 | // Additional elements that will appear in the minimap, even if outside of context 187 | elements: [], 188 | 189 | // Use text nodes instead of elements, makes text more detailed 190 | accurateText: true, 191 | 192 | // When accurateText is on, use text nodes for these types of tags 193 | accurateTextTags: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P'], 194 | 195 | // Whether to show elements with opacity: 0 196 | renderNoOpacity: false, 197 | 198 | // Only shows the minimap when hovering or scrolling 199 | autohide: false, 200 | 201 | // When autohide is on, hide the minimap after this many milliseconds 202 | autohideDelay: 1500, 203 | 204 | // A function used for pixel rounding 205 | roundingFn: Math.round 206 | 207 | // Refresh itself on the window's load event so that images are included properly. 208 | refreshOnLoad: true 209 | }); 210 | ``` 211 | 212 | ## Custom styling 213 | Please look at the `xivmap.css` file, it is fully documented and explains how to modify the way xivmap looks. 214 | 215 | Quick example to modify the color of anchor tags on the minimap: 216 | Note: tag names must be capitalized, as per the JavaScript DOM api. 217 | ```css 218 | .xivmap [data-tag="A"] { 219 | background-color: green; 220 | } 221 | ``` 222 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xivmap", 3 | "description": "Minimap for websites, a la Sublime Text. Available as jQuery or Vanilla JS.", 4 | "keywords": [ 5 | "minimap" 6 | ], 7 | "authors": [ 8 | { 9 | "name": "Andrea Stella", 10 | "email": "adr.stella@gmail.com", 11 | "homepage": "http://mccxiv.me" 12 | } 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/mccxiv/xivmap.git" 17 | }, 18 | "ignore": [ 19 | "/.idea", 20 | "/.gitignore", 21 | "/.npmignore", 22 | "/.gh-pages", 23 | "/dist", 24 | "/publishing-material", 25 | "/index.html", 26 | "/demo", 27 | "/packaged", 28 | "/package.json", 29 | "/node_modules", 30 | "/gulpfile.js" 31 | ], 32 | "private": true, 33 | "devDependencies": { 34 | "remarkable": "~1.6.0", 35 | "bootswatch": "thomaspark/bootswatch#~3.3.5+4", 36 | "he": "~0.5.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /demo/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Note: the license below applies only to the files used for the demo page, not to Xivmap itself. 2 | ---------------------------------------------------------------------------------------------- 3 | 4 | Creative Commons Attribution 3.0 Unported 5 | http://creativecommons.org/licenses/by/3.0/ 6 | 7 | License 8 | 9 | THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED. 10 | 11 | BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND CONDITIONS. 12 | 13 | 1. Definitions 14 | 15 | 1. "Adaptation" means a work based upon the Work, or upon the Work and other pre-existing works, such as a translation, adaptation, derivative work, arrangement of music or other alterations of a literary or artistic work, or phonogram or performance and includes cinematographic adaptations or any other form in which the Work may be recast, transformed, or adapted including in any form recognizably derived from the original, except that a work that constitutes a Collection will not be considered an Adaptation for the purpose of this License. For the avoidance of doubt, where the Work is a musical work, performance or phonogram, the synchronization of the Work in timed-relation with a moving image ("synching") will be considered an Adaptation for the purpose of this License. 16 | 2. "Collection" means a collection of literary or artistic works, such as encyclopedias and anthologies, or performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section 1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual creations, in which the Work is included in its entirety in unmodified form along with one or more other contributions, each constituting separate and independent works in themselves, which together are assembled into a collective whole. A work that constitutes a Collection will not be considered an Adaptation (as defined above) for the purposes of this License. 17 | 3. "Distribute" means to make available to the public the original and copies of the Work or Adaptation, as appropriate, through sale or other transfer of ownership. 18 | 4. "Licensor" means the individual, individuals, entity or entities that offer(s) the Work under the terms of this License. 19 | 5. "Original Author" means, in the case of a literary or artistic work, the individual, individuals, entity or entities who created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the case of a performance the actors, singers, musicians, dancers, and other persons who act, sing, deliver, declaim, play in, interpret or otherwise perform literary or artistic works or expressions of folklore; (ii) in the case of a phonogram the producer being the person or legal entity who first fixes the sounds of a performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits the broadcast. 20 | 6. "Work" means the literary and/or artistic work offered under the terms of this License including without limitation any production in the literary, scientific and artistic domain, whatever may be the mode or form of its expression including digital form, such as a book, pamphlet and other writing; a lecture, address, sermon or other work of the same nature; a dramatic or dramatico-musical work; a choreographic work or entertainment in dumb show; a musical composition with or without words; a cinematographic work to which are assimilated works expressed by a process analogous to cinematography; a work of drawing, painting, architecture, sculpture, engraving or lithography; a photographic work to which are assimilated works expressed by a process analogous to photography; a work of applied art; an illustration, map, plan, sketch or three-dimensional work relative to geography, topography, architecture or science; a performance; a broadcast; a phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed by a variety or circus performer to the extent it is not otherwise considered a literary or artistic work. 21 | 7. "You" means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation. 22 | 8. "Publicly Perform" means to perform public recitations of the Work and to communicate to the public those public recitations, by any means or process, including by wire or wireless means or public digital performances; to make available to the public Works in such a way that members of the public may access these Works from a place and at a place individually chosen by them; to perform the Work to the public by any means or process and the communication to the public of the performances of the Work, including by public digital performance; to broadcast and rebroadcast the Work by any means including signs, sounds or images. 23 | 9. "Reproduce" means to make copies of the Work by any means including without limitation by sound or visual recordings and the right of fixation and reproducing fixations of the Work, including storage of a protected performance or phonogram in digital form or other electronic medium. 24 | 25 | 2. Fair Dealing Rights. Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or rights arising from limitations or exceptions that are provided for in connection with the copyright protection under copyright law or other applicable laws. 26 | 27 | 3. License Grant. Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below: 28 | 29 | 1. to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce the Work as incorporated in the Collections; 30 | 2. to create and Reproduce Adaptations provided that any such Adaptation, including any translation in any medium, takes reasonable steps to clearly label, demarcate or otherwise identify that changes were made to the original Work. For example, a translation could be marked "The original work was translated from English to Spanish," or a modification could indicate "The original work has been modified."; 31 | 3. to Distribute and Publicly Perform the Work including as incorporated in Collections; and, 32 | 4. to Distribute and Publicly Perform Adaptations. 33 | 5. 34 | 35 | For the avoidance of doubt: 36 | 1. Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme cannot be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; 37 | 2. Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme can be waived, the Licensor waives the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; and, 38 | 3. Voluntary License Schemes. The Licensor waives the right to collect royalties, whether individually or, in the event that the Licensor is a member of a collecting society that administers voluntary licensing schemes, via that society, from any exercise by You of the rights granted under this License. 39 | 40 | The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. Subject to Section 8(f), all rights not expressly granted by Licensor are hereby reserved. 41 | 42 | 4. Restrictions. The license granted in Section 3 above is expressly made subject to and limited by the following restrictions: 43 | 44 | 1. You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a copy of, or the Uniform Resource Identifier (URI) for, this License with every copy of the Work You Distribute or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of this License or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the License. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties with every copy of the Work You Distribute or Publicly Perform. When You Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the Work that restrict the ability of a recipient of the Work from You to exercise the rights granted to that recipient under the terms of the License. This Section 4(a) applies to the Work as incorporated in a Collection, but this does not require the Collection apart from the Work itself to be made subject to the terms of this License. If You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the Collection any credit as required by Section 4(b), as requested. If You create an Adaptation, upon notice from any Licensor You must, to the extent practicable, remove from the Adaptation any credit as required by Section 4(b), as requested. 45 | 2. If You Distribute, or Publicly Perform the Work or any Adaptations or Collections, You must, unless a request has been made pursuant to Section 4(a), keep intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor institute, publishing entity, journal) for attribution ("Attribution Parties") in Licensor's copyright notice, terms of service or by other reasonable means, the name of such party or parties; (ii) the title of the Work if supplied; (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and (iv) , consistent with Section 3(b), in the case of an Adaptation, a credit identifying the use of the Work in the Adaptation (e.g., "French translation of the Work by Original Author," or "Screenplay based on original Work by Original Author"). The credit required by this Section 4 (b) may be implemented in any reasonable manner; provided, however, that in the case of a Adaptation or Collection, at a minimum such credit will appear, if a credit for all contributing authors of the Adaptation or Collection appears, then as part of these credits and in a manner at least as prominent as the credits for the other contributing authors. For the avoidance of doubt, You may only use the credit required by this Section for the purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original Author, Licensor and/or Attribution Parties, as appropriate, of You or Your use of the Work, without the separate, express prior written permission of the Original Author, Licensor and/or Attribution Parties. 46 | 3. Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law, if You Reproduce, Distribute or Publicly Perform the Work either by itself or as part of any Adaptations or Collections, You must not distort, mutilate, modify or take other derogatory action in relation to the Work which would be prejudicial to the Original Author's honor or reputation. Licensor agrees that in those jurisdictions (e.g. Japan), in which any exercise of the right granted in Section 3(b) of this License (the right to make Adaptations) would be deemed to be a distortion, mutilation, modification or other derogatory action prejudicial to the Original Author's honor and reputation, the Licensor will waive or not assert, as appropriate, this Section, to the fullest extent permitted by the applicable national law, to enable You to reasonably exercise Your right under Section 3(b) of this License (right to make Adaptations) but not otherwise. 47 | 48 | 5. Representations, Warranties and Disclaimer 49 | 50 | UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU. 51 | 52 | 6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 53 | 54 | 7. Termination 55 | 56 | 1. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Adaptations or Collections from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License. 57 | 2. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above. 58 | 59 | 8. Miscellaneous 60 | 61 | 1. Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License. 62 | 2. Each time You Distribute or Publicly Perform an Adaptation, Licensor offers to the recipient a license to the original Work on the same terms and conditions as the license granted to You under this License. 63 | 3. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable. 64 | 4. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent. 65 | 5. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You. 66 | 6. The rights granted under, and the subject matter referenced, in this License were drafted utilizing the terminology of the Berne Convention for the Protection of Literary and Artistic Works (as amended on September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July 24, 1971). These rights and subject matter take effect in the relevant jurisdiction in which the License terms are sought to be enforced according to the corresponding provisions of the implementation of those treaty provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law includes additional rights not granted under this License, such additional rights are deemed to be included in the License; this License is not intended to restrict the license of any rights under applicable law. 67 | -------------------------------------------------------------------------------- /demo/assets/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.4.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"} 5 | -------------------------------------------------------------------------------- /demo/assets/css/images/overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/assets/css/images/overlay.png -------------------------------------------------------------------------------- /demo/assets/css/images/pattern-size1.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/assets/css/images/pattern-size2.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/assets/css/images/pattern-size3.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /demo/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /demo/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /demo/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /demo/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /demo/assets/js/jquery.scrolly.min.js: -------------------------------------------------------------------------------- 1 | /* jquery.scrolly v1.0.0-dev | (c) n33 | n33.co @n33co | MIT */ 2 | (function(e){function u(s,o){var u,a,f;if((u=e(s))[t]==0)return n;a=u[i]()[r];switch(o.anchor){case"middle":f=a-(e(window).height()-u.outerHeight())/2;break;default:case r:f=Math.max(a,0)}return typeof o[i]=="function"?f-=o[i]():f-=o[i],f}var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);e.fn.scrolly=function(i){var o,a,f,l,c=e(this);if(this[t]==0)return c;if(this[t]>1){for(o=0;o=i)return-1;for(0>a&&(a=i-Math.abs(a)),n=a;i>n;n++)if(this[n]===t)return n;return-1},Array.isArray?t.isArray=function(t){return Array.isArray(t)}:t.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)},Object.keys?t.iterate=function(t,e){if(!t)return[];var n,i=Object.keys(t);for(n=0;i[n]&&e(i[n],t[i[n]])!==!1;n++);}:t.iterate=function(t,e){if(!t)return[];var n;for(n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(n,t[n])===!1)break},window.matchMedia?t.matchesMedia=function(t){return""==t?!0:window.matchMedia(t).matches}:window.styleMedia||window.media?t.matchesMedia=function(t){if(""==t)return!0;var e=window.styleMedia||window.media;return e.matchMedium(t||"all")}:window.getComputedStyle?t.matchesMedia=function(t){if(""==t)return!0;var e=document.createElement("style"),n=document.getElementsByTagName("script")[0],i=null;e.type="text/css",e.id="matchmediajs-test",n.parentNode.insertBefore(e,n),i="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle;var a="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=a:e.textContent=a,"1px"===i.width}:t.matchesMedia=function(t){if(""==t)return!0;var e,n,i,a,r={"min-width":null,"max-width":null},o=!1;for(i=t.split(/\s+and\s+/),e=0;er["max-width"]||null!==r["min-height"]&&cr["max-height"]?!1:!0},navigator.userAgent.match(/MSIE ([0-9]+)/)&&RegExp.$1<9&&(t.newStyle=function(t){var e=document.createElement("span");return e.innerHTML=' ",e})},initVars:function(){var e,n,i,a=navigator.userAgent;e="other",n=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(RegExp.$1),!1):void 0}),t.vars.browser=e,t.vars.browserVersion=n,e="other",n=0,i=[["ios",/([0-9_]+) like Mac OS X/,function(t){return t.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(t){return 0}],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(t){return t.replace("_",".").replace("_","")}],["wp",/Windows Phone ([0-9\.]+)/,null],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(i[2]?i[2](RegExp.$1):RegExp.$1),!1):void 0}),t.vars.os=e,t.vars.osVersion=n,t.vars.IEVersion="ie"==t.vars.browser?t.vars.browserVersion:99,t.vars.touch="wp"==t.vars.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),t.vars.mobile="wp"==t.vars.os||"android"==t.vars.os||"ios"==t.vars.os||"bb"==t.vars.os}};return t.init(),t}();!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.skel=e()}(this,function(){return skel}); 3 | -------------------------------------------------------------------------------- /demo/assets/js/util.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | /** 4 | * Generate an indented list of links from a nav. Meant for use with panel(). 5 | * @return {jQuery} jQuery object. 6 | */ 7 | $.fn.navList = function() { 8 | 9 | var $this = $(this); 10 | $a = $this.find('a'), 11 | b = []; 12 | 13 | $a.each(function() { 14 | 15 | var $this = $(this), 16 | indent = Math.max(0, $this.parents('li').length - 1), 17 | href = $this.attr('href'), 18 | target = $this.attr('target'); 19 | 20 | b.push( 21 | '' + 26 | '' + 27 | $this.text() + 28 | '' 29 | ); 30 | 31 | }); 32 | 33 | return b.join(''); 34 | 35 | }; 36 | 37 | /** 38 | * Panel-ify an element. 39 | * @param {object} userConfig User config. 40 | * @return {jQuery} jQuery object. 41 | */ 42 | $.fn.panel = function(userConfig) { 43 | 44 | // No elements? 45 | if (this.length == 0) 46 | return $this; 47 | 48 | // Multiple elements? 49 | if (this.length > 1) { 50 | 51 | for (var i=0; i < this.length; i++) 52 | $(this[i]).panel(userConfig); 53 | 54 | return $this; 55 | 56 | } 57 | 58 | // Vars. 59 | var $this = $(this), 60 | $body = $('body'), 61 | $window = $(window), 62 | id = $this.attr('id'), 63 | config; 64 | 65 | // Config. 66 | config = $.extend({ 67 | 68 | // Delay. 69 | delay: 0, 70 | 71 | // Hide panel on link click. 72 | hideOnClick: false, 73 | 74 | // Hide panel on escape keypress. 75 | hideOnEscape: false, 76 | 77 | // Hide panel on swipe. 78 | hideOnSwipe: false, 79 | 80 | // Reset scroll position on hide. 81 | resetScroll: false, 82 | 83 | // Reset forms on hide. 84 | resetForms: false, 85 | 86 | // Side of viewport the panel will appear. 87 | side: null, 88 | 89 | // Target element for "class". 90 | target: $this, 91 | 92 | // Class to toggle. 93 | visibleClass: 'visible' 94 | 95 | }, userConfig); 96 | 97 | // Expand "target" if it's not a jQuery object already. 98 | if (typeof config.target != 'jQuery') 99 | config.target = $(config.target); 100 | 101 | // Panel. 102 | 103 | // Methods. 104 | $this._hide = function(event) { 105 | 106 | // Already hidden? Bail. 107 | if (!config.target.hasClass(config.visibleClass)) 108 | return; 109 | 110 | // If an event was provided, cancel it. 111 | if (event) { 112 | 113 | event.preventDefault(); 114 | event.stopPropagation(); 115 | 116 | } 117 | 118 | // Hide. 119 | config.target.removeClass(config.visibleClass); 120 | 121 | // Post-hide stuff. 122 | window.setTimeout(function() { 123 | 124 | // Reset scroll position. 125 | if (config.resetScroll) 126 | $this.scrollTop(0); 127 | 128 | // Reset forms. 129 | if (config.resetForms) 130 | $this.find('form').each(function() { 131 | this.reset(); 132 | }); 133 | 134 | }, config.delay); 135 | 136 | }; 137 | 138 | // Vendor fixes. 139 | $this 140 | .css('-ms-overflow-style', '-ms-autohiding-scrollbar') 141 | .css('-webkit-overflow-scrolling', 'touch'); 142 | 143 | // Hide on click. 144 | if (config.hideOnClick) { 145 | 146 | $this.find('a') 147 | .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); 148 | 149 | $this 150 | .on('click', 'a', function(event) { 151 | 152 | var $a = $(this), 153 | href = $a.attr('href'), 154 | target = $a.attr('target'); 155 | 156 | if (!href || href == '#' || href == '' || href == '#' + id) 157 | return; 158 | 159 | // Cancel original event. 160 | event.preventDefault(); 161 | event.stopPropagation(); 162 | 163 | // Hide panel. 164 | $this._hide(); 165 | 166 | // Redirect to href. 167 | window.setTimeout(function() { 168 | 169 | if (target == '_blank') 170 | window.open(href); 171 | else 172 | window.location.href = href; 173 | 174 | }, config.delay + 10); 175 | 176 | }); 177 | 178 | } 179 | 180 | // Event: Touch stuff. 181 | $this.on('touchstart', function(event) { 182 | 183 | $this.touchPosX = event.originalEvent.touches[0].pageX; 184 | $this.touchPosY = event.originalEvent.touches[0].pageY; 185 | 186 | }) 187 | 188 | $this.on('touchmove', function(event) { 189 | 190 | if ($this.touchPosX === null 191 | || $this.touchPosY === null) 192 | return; 193 | 194 | var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, 195 | diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, 196 | th = $this.outerHeight(), 197 | ts = ($this.get(0).scrollHeight - $this.scrollTop()); 198 | 199 | // Hide on swipe? 200 | if (config.hideOnSwipe) { 201 | 202 | var result = false, 203 | boundary = 20, 204 | delta = 50; 205 | 206 | switch (config.side) { 207 | 208 | case 'left': 209 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); 210 | break; 211 | 212 | case 'right': 213 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); 214 | break; 215 | 216 | case 'top': 217 | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); 218 | break; 219 | 220 | case 'bottom': 221 | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); 222 | break; 223 | 224 | default: 225 | break; 226 | 227 | } 228 | 229 | if (result) { 230 | 231 | $this.touchPosX = null; 232 | $this.touchPosY = null; 233 | $this._hide(); 234 | 235 | return false; 236 | 237 | } 238 | 239 | } 240 | 241 | // Prevent vertical scrolling past the top or bottom. 242 | if (($this.scrollTop() < 0 && diffY < 0) 243 | || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { 244 | 245 | event.preventDefault(); 246 | event.stopPropagation(); 247 | 248 | } 249 | 250 | }); 251 | 252 | // Event: Prevent certain events inside the panel from bubbling. 253 | $this.on('click touchend touchstart touchmove', function(event) { 254 | event.stopPropagation(); 255 | }); 256 | 257 | // Event: Hide panel if a child anchor tag pointing to its ID is clicked. 258 | $this.on('click', 'a[href="#' + id + '"]', function(event) { 259 | 260 | event.preventDefault(); 261 | event.stopPropagation(); 262 | 263 | config.target.removeClass(config.visibleClass); 264 | 265 | }); 266 | 267 | // Body. 268 | 269 | // Event: Hide panel on body click/tap. 270 | $body.on('click touchend', function(event) { 271 | $this._hide(event); 272 | }); 273 | 274 | // Event: Toggle. 275 | $body.on('click', 'a[href="#' + id + '"]', function(event) { 276 | 277 | event.preventDefault(); 278 | event.stopPropagation(); 279 | 280 | config.target.toggleClass(config.visibleClass); 281 | 282 | }); 283 | 284 | // Window. 285 | 286 | // Event: Hide on ESC. 287 | if (config.hideOnEscape) 288 | $window.on('keydown', function(event) { 289 | 290 | if (event.keyCode == 27) 291 | $this._hide(event); 292 | 293 | }); 294 | 295 | return $this; 296 | 297 | }; 298 | 299 | /** 300 | * Apply "placeholder" attribute polyfill to one or more forms. 301 | * @return {jQuery} jQuery object. 302 | */ 303 | $.fn.placeholder = function() { 304 | 305 | // Browser natively supports placeholders? Bail. 306 | if (typeof (document.createElement('input')).placeholder != 'undefined') 307 | return $(this); 308 | 309 | // No elements? 310 | if (this.length == 0) 311 | return $this; 312 | 313 | // Multiple elements? 314 | if (this.length > 1) { 315 | 316 | for (var i=0; i < this.length; i++) 317 | $(this[i]).placeholder(); 318 | 319 | return $this; 320 | 321 | } 322 | 323 | // Vars. 324 | var $this = $(this); 325 | 326 | // Text, TextArea. 327 | $this.find('input[type=text],textarea') 328 | .each(function() { 329 | 330 | var i = $(this); 331 | 332 | if (i.val() == '' 333 | || i.val() == i.attr('placeholder')) 334 | i 335 | .addClass('polyfill-placeholder') 336 | .val(i.attr('placeholder')); 337 | 338 | }) 339 | .on('blur', function() { 340 | 341 | var i = $(this); 342 | 343 | if (i.attr('name').match(/-polyfill-field$/)) 344 | return; 345 | 346 | if (i.val() == '') 347 | i 348 | .addClass('polyfill-placeholder') 349 | .val(i.attr('placeholder')); 350 | 351 | }) 352 | .on('focus', function() { 353 | 354 | var i = $(this); 355 | 356 | if (i.attr('name').match(/-polyfill-field$/)) 357 | return; 358 | 359 | if (i.val() == i.attr('placeholder')) 360 | i 361 | .removeClass('polyfill-placeholder') 362 | .val(''); 363 | 364 | }); 365 | 366 | // Password. 367 | $this.find('input[type=password]') 368 | .each(function() { 369 | 370 | var i = $(this); 371 | var x = $( 372 | $('
') 373 | .append(i.clone()) 374 | .remove() 375 | .html() 376 | .replace(/type="password"/i, 'type="text"') 377 | .replace(/type=password/i, 'type=text') 378 | ); 379 | 380 | if (i.attr('id') != '') 381 | x.attr('id', i.attr('id') + '-polyfill-field'); 382 | 383 | if (i.attr('name') != '') 384 | x.attr('name', i.attr('name') + '-polyfill-field'); 385 | 386 | x.addClass('polyfill-placeholder') 387 | .val(x.attr('placeholder')).insertAfter(i); 388 | 389 | if (i.val() == '') 390 | i.hide(); 391 | else 392 | x.hide(); 393 | 394 | i 395 | .on('blur', function(event) { 396 | 397 | event.preventDefault(); 398 | 399 | var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); 400 | 401 | if (i.val() == '') { 402 | 403 | i.hide(); 404 | x.show(); 405 | 406 | } 407 | 408 | }); 409 | 410 | x 411 | .on('focus', function(event) { 412 | 413 | event.preventDefault(); 414 | 415 | var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); 416 | 417 | x.hide(); 418 | 419 | i 420 | .show() 421 | .focus(); 422 | 423 | }) 424 | .on('keypress', function(event) { 425 | 426 | event.preventDefault(); 427 | x.val(''); 428 | 429 | }); 430 | 431 | }); 432 | 433 | // Events. 434 | $this 435 | .on('submit', function() { 436 | 437 | $this.find('input[type=text],input[type=password],textarea') 438 | .each(function(event) { 439 | 440 | var i = $(this); 441 | 442 | if (i.attr('name').match(/-polyfill-field$/)) 443 | i.attr('name', ''); 444 | 445 | if (i.val() == i.attr('placeholder')) { 446 | 447 | i.removeClass('polyfill-placeholder'); 448 | i.val(''); 449 | 450 | } 451 | 452 | }); 453 | 454 | }) 455 | .on('reset', function(event) { 456 | 457 | event.preventDefault(); 458 | 459 | $this.find('select') 460 | .val($('option:first').val()); 461 | 462 | $this.find('input,textarea') 463 | .each(function() { 464 | 465 | var i = $(this), 466 | x; 467 | 468 | i.removeClass('polyfill-placeholder'); 469 | 470 | switch (this.type) { 471 | 472 | case 'submit': 473 | case 'reset': 474 | break; 475 | 476 | case 'password': 477 | i.val(i.attr('defaultValue')); 478 | 479 | x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); 480 | 481 | if (i.val() == '') { 482 | i.hide(); 483 | x.show(); 484 | } 485 | else { 486 | i.show(); 487 | x.hide(); 488 | } 489 | 490 | break; 491 | 492 | case 'checkbox': 493 | case 'radio': 494 | i.attr('checked', i.attr('defaultValue')); 495 | break; 496 | 497 | case 'text': 498 | case 'textarea': 499 | i.val(i.attr('defaultValue')); 500 | 501 | if (i.val() == '') { 502 | i.addClass('polyfill-placeholder'); 503 | i.val(i.attr('placeholder')); 504 | } 505 | 506 | break; 507 | 508 | default: 509 | i.val(i.attr('defaultValue')); 510 | break; 511 | 512 | } 513 | }); 514 | 515 | }); 516 | 517 | return $this; 518 | 519 | }; 520 | 521 | /** 522 | * Moves elements to/from the first positions of their respective parents. 523 | * @param {jQuery} $elements Elements (or selector) to move. 524 | * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. 525 | */ 526 | $.prioritize = function($elements, condition) { 527 | 528 | var key = '__prioritize'; 529 | 530 | // Expand $elements if it's not already a jQuery object. 531 | if (typeof $elements != 'jQuery') 532 | $elements = $($elements); 533 | 534 | // Step through elements. 535 | $elements.each(function() { 536 | 537 | var $e = $(this), $p, 538 | $parent = $e.parent(); 539 | 540 | // No parent? Bail. 541 | if ($parent.length == 0) 542 | return; 543 | 544 | // Not moved? Move it. 545 | if (!$e.data(key)) { 546 | 547 | // Condition is false? Bail. 548 | if (!condition) 549 | return; 550 | 551 | // Get placeholder (which will serve as our point of reference for when this element needs to move back). 552 | $p = $e.prev(); 553 | 554 | // Couldn't find anything? Means this element's already at the top, so bail. 555 | if ($p.length == 0) 556 | return; 557 | 558 | // Move element to top of parent. 559 | $e.prependTo($parent); 560 | 561 | // Mark element as moved. 562 | $e.data(key, $p); 563 | 564 | } 565 | 566 | // Moved already? 567 | else { 568 | 569 | // Condition is true? Bail. 570 | if (condition) 571 | return; 572 | 573 | $p = $e.data(key); 574 | 575 | // Move element back to its original location (using our placeholder). 576 | $e.insertAfter($p); 577 | 578 | // Unmark element as moved. 579 | $e.removeData(key); 580 | 581 | } 582 | 583 | }); 584 | 585 | }; 586 | 587 | })(jQuery); -------------------------------------------------------------------------------- /demo/assets/sass/base/_page.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Basic */ 12 | 13 | // MSIE: Required for IEMobile. 14 | @-ms-viewport { 15 | width: device-width; 16 | } 17 | 18 | // MSIE: Prevents scrollbar from overlapping content. 19 | body { 20 | -ms-overflow-style: scrollbar; 21 | } 22 | 23 | // Ensures page width is always >=320px. 24 | @include breakpoint(xxsmall) { 25 | html, body { 26 | min-width: 320px; 27 | } 28 | } 29 | 30 | body { 31 | background: _palette(bg); 32 | 33 | // Prevents animation/transition "flicker" on page load. 34 | // Automatically added/removed by js/main.js. 35 | &.is-loading { 36 | *, *:before, *:after { 37 | @include vendor('animation', 'none !important'); 38 | @include vendor('transition', 'none !important'); 39 | } 40 | } 41 | 42 | } -------------------------------------------------------------------------------- /demo/assets/sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Type */ 12 | 13 | html, body { 14 | background: _palette(bg-alt); 15 | } 16 | 17 | body { 18 | color: _palette(fg); 19 | } 20 | 21 | html, input, select, textarea { 22 | font-size: 16pt; 23 | 24 | // XLarge. 25 | @include breakpoint(xlarge) { 26 | font-size: 13pt; 27 | } 28 | 29 | // Large. 30 | @include breakpoint(large) { 31 | font-size: 12pt; 32 | } 33 | 34 | // XXSmall. 35 | @include breakpoint(xxsmall) { 36 | font-size: 11pt; 37 | } 38 | 39 | } 40 | 41 | body, input, select, textarea { 42 | font-family: _font(family); 43 | font-weight: _font(weight); 44 | line-height: 1.5em; 45 | letter-spacing: -0.015em; 46 | } 47 | 48 | a { 49 | @include vendor('transition', ('color #{_duration(transition)} ease-in-out', 'border-bottom-color #{_duration(transition)} ease-in-out')); 50 | text-decoration: none; 51 | border-bottom: dotted 1px; 52 | 53 | &:hover { 54 | border-bottom-color: transparent !important; 55 | } 56 | } 57 | 58 | strong, b { 59 | font-weight: _font(weight-bold); 60 | } 61 | 62 | em, i { 63 | font-style: italic; 64 | } 65 | 66 | p { 67 | margin: 0 0 _size(element-margin) 0; 68 | } 69 | 70 | h1, h2, h3, h4, h5, h6 { 71 | font-weight: _font(weight); 72 | line-height: 1em; 73 | margin: 0 0 (_size(element-margin) * 0.5) 0; 74 | letter-spacing: -0.0125em; 75 | 76 | a { 77 | color: inherit; 78 | text-decoration: none; 79 | border-bottom: none; 80 | } 81 | 82 | // Medium. 83 | @include breakpoint(medium) { 84 | br { 85 | display: none; 86 | } 87 | } 88 | 89 | } 90 | 91 | h2 { 92 | font-size: 1.75em; 93 | line-height: 1.5em; 94 | } 95 | 96 | h3 { 97 | font-size: 1.5em; 98 | line-height: 1.5em; 99 | } 100 | 101 | h4 { 102 | font-size: 1.1em; 103 | line-height: 1.5em; 104 | } 105 | 106 | h5 { 107 | font-size: 0.9em; 108 | line-height: 1.5em; 109 | } 110 | 111 | h6 { 112 | font-size: 0.7em; 113 | line-height: 1.5em; 114 | } 115 | 116 | // Small. 117 | @include breakpoint(small) { 118 | h2 { 119 | font-size: 1.25em; 120 | } 121 | 122 | h3 { 123 | font-size: 1.2em; 124 | } 125 | 126 | h4 { 127 | font-size: 1em; 128 | } 129 | } 130 | 131 | sub { 132 | font-size: 0.8em; 133 | position: relative; 134 | top: 0.5em; 135 | } 136 | 137 | sup { 138 | font-size: 0.8em; 139 | position: relative; 140 | top: -0.5em; 141 | } 142 | 143 | blockquote { 144 | border-left-style: solid; 145 | border-left-width: (_size(border-width) * 4); 146 | font-style: italic; 147 | margin: 0 0 _size(element-margin) 0; 148 | padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); 149 | } 150 | 151 | code { 152 | border-radius: _size(border-radius); 153 | border-style: solid; 154 | border-width: _size(border-width); 155 | font-family: _font(family-fixed); 156 | font-size: 0.9em; 157 | margin: 0 0.25em; 158 | padding: 0.25em 0.65em; 159 | } 160 | 161 | pre { 162 | -webkit-overflow-scrolling: touch; 163 | font-family: _font(family-fixed); 164 | font-size: 0.9em; 165 | margin: 0 0 _size(element-margin) 0; 166 | 167 | code { 168 | display: block; 169 | line-height: 1.75em; 170 | padding: 1em 1.5em; 171 | overflow-x: auto; 172 | } 173 | } 174 | 175 | hr { 176 | border: 0; 177 | border-bottom-style: solid; 178 | border-bottom-width: _size(border-width); 179 | margin: _size(element-margin) 0; 180 | 181 | &.major { 182 | margin: (_size(element-margin) * 1.5) 0; 183 | } 184 | } 185 | 186 | .align-left { 187 | text-align: left; 188 | } 189 | 190 | .align-center { 191 | text-align: center; 192 | } 193 | 194 | .align-right { 195 | text-align: right; 196 | } 197 | 198 | @mixin color-typography($p: null) { 199 | @if $p != null { 200 | background-color: _palette($p, bg); 201 | color: _palette($p, fg); 202 | } 203 | 204 | input, select, textarea { 205 | color: _palette($p, fg); 206 | } 207 | 208 | a { 209 | color: inherit; 210 | border-bottom-color: _palette($p, border2); 211 | 212 | @if _palette($p, invert) == true { 213 | color: _palette($p, fg-bold); 214 | } 215 | @else { 216 | &:hover { 217 | color: _palette(accent1, bg); 218 | } 219 | } 220 | } 221 | 222 | strong, b { 223 | color: _palette($p, fg-bold); 224 | } 225 | 226 | h1, h2, h3, h4, h5, h6 { 227 | color: _palette($p, fg-bold); 228 | } 229 | 230 | blockquote { 231 | border-left-color: _palette($p, border); 232 | } 233 | 234 | code { 235 | background: _palette($p, border-bg); 236 | border-color: _palette($p, border); 237 | } 238 | 239 | hr { 240 | border-bottom-color: _palette($p, border); 241 | } 242 | } 243 | 244 | @include color-typography; -------------------------------------------------------------------------------- /demo/assets/sass/components/_box.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Box */ 12 | 13 | .box { 14 | border-radius: _size(border-radius); 15 | border: solid _size(border-width) _palette(border); 16 | margin-bottom: _size(element-margin); 17 | padding: 1.5em; 18 | 19 | > :last-child, 20 | > :last-child > :last-child, 21 | > :last-child > :last-child > :last-child { 22 | margin-bottom: 0; 23 | } 24 | 25 | &.alt { 26 | border: 0; 27 | border-radius: 0; 28 | padding: 0; 29 | } 30 | } -------------------------------------------------------------------------------- /demo/assets/sass/components/_button.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Button */ 12 | 13 | input[type="submit"], 14 | input[type="reset"], 15 | input[type="button"], 16 | button, 17 | .button { 18 | @include vendor('appearance', 'none'); 19 | @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); 20 | border-radius: _size(border-radius); 21 | border: 0; 22 | cursor: pointer; 23 | display: inline-block; 24 | font-weight: _font(weight-bold); 25 | height: 2.85em; 26 | line-height: 2.95em; 27 | padding: 0 1.75em; 28 | text-align: center; 29 | text-decoration: none; 30 | white-space: nowrap; 31 | 32 | &.icon { 33 | padding-left: 1.35em; 34 | 35 | &:before { 36 | margin-right: 0.5em; 37 | } 38 | } 39 | 40 | &.fit { 41 | display: block; 42 | margin: 0 0 (_size(element-margin) * 0.5) 0; 43 | width: 100%; 44 | } 45 | 46 | &.small { 47 | font-size: 0.8em; 48 | } 49 | 50 | &.big { 51 | font-size: 1.35em; 52 | } 53 | 54 | &.disabled, 55 | &:disabled { 56 | @include vendor('pointer-events', 'none'); 57 | cursor: default; 58 | opacity: 0.25; 59 | } 60 | 61 | // XSmall. 62 | @include breakpoint(xsmall) { 63 | 64 | // Portrait. 65 | @include orientation(portrait) { 66 | padding: 0; 67 | } 68 | 69 | } 70 | 71 | } 72 | 73 | @mixin color-button($p: null) { 74 | input[type="submit"], 75 | input[type="reset"], 76 | input[type="button"], 77 | button, 78 | .button { 79 | background-color: transparent; 80 | color: _palette($p, fg-bold) !important; 81 | box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette($p, border); 82 | 83 | &:hover { 84 | background-color: _palette($p, border-bg); 85 | } 86 | 87 | &:active { 88 | background-color: _palette($p, border2-bg); 89 | } 90 | 91 | &.special { 92 | box-shadow: none; 93 | 94 | @if _palette($p, invert) == true { 95 | background-color: _palette($p, fg-bold); 96 | color: _palette($p, bg) !important; 97 | 98 | &:hover { 99 | } 100 | 101 | &:active { 102 | } 103 | } 104 | @else { 105 | background-color: _palette(accent1, bg); 106 | color: _palette(accent1, fg-bold) !important; 107 | 108 | &:hover { 109 | background-color: lighten(_palette(accent1, bg), 5); 110 | } 111 | 112 | &:active { 113 | background-color: darken(_palette(accent1, bg), 5); 114 | } 115 | } 116 | } 117 | } 118 | } 119 | 120 | @include color-button; -------------------------------------------------------------------------------- /demo/assets/sass/components/_form.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Form */ 12 | 13 | form { 14 | margin: 0 0 _size(element-margin) 0; 15 | } 16 | 17 | label { 18 | display: block; 19 | font-size: 0.9em; 20 | font-weight: _font(weight-bold); 21 | margin: 0 0 (_size(element-margin) * 0.5) 0; 22 | } 23 | 24 | input[type="text"], 25 | input[type="password"], 26 | input[type="email"], 27 | select, 28 | textarea { 29 | @include vendor('appearance', 'none'); 30 | border-radius: _size(border-radius); 31 | border: none; 32 | border-style: solid; 33 | border-width: _size(border-width); 34 | color: inherit; 35 | display: block; 36 | outline: 0; 37 | padding: 0 1em; 38 | text-decoration: none; 39 | width: 100%; 40 | 41 | &:invalid { 42 | box-shadow: none; 43 | } 44 | } 45 | 46 | .select-wrapper { 47 | @include icon; 48 | display: block; 49 | position: relative; 50 | 51 | &:before { 52 | content: '\f078'; 53 | display: block; 54 | height: _size(element-height); 55 | line-height: _size(element-height); 56 | pointer-events: none; 57 | position: absolute; 58 | right: 0; 59 | text-align: center; 60 | top: 0; 61 | width: _size(element-height); 62 | } 63 | 64 | select::-ms-expand { 65 | display: none; 66 | } 67 | } 68 | 69 | input[type="text"], 70 | input[type="password"], 71 | input[type="email"], 72 | select { 73 | height: _size(element-height); 74 | } 75 | 76 | textarea { 77 | padding: 0.75em 1em; 78 | } 79 | 80 | input[type="checkbox"], 81 | input[type="radio"], { 82 | @include vendor('appearance', 'none'); 83 | display: block; 84 | float: left; 85 | margin-right: -2em; 86 | opacity: 0; 87 | width: 1em; 88 | z-index: -1; 89 | 90 | & + label { 91 | @include icon; 92 | cursor: pointer; 93 | display: inline-block; 94 | font-size: 1em; 95 | font-weight: _font(weight); 96 | padding-left: (_size(element-height) * 0.6) + 0.75em; 97 | padding-right: 0.75em; 98 | position: relative; 99 | 100 | &:before { 101 | border-radius: _size(border-radius); 102 | border-style: solid; 103 | border-width: _size(border-width); 104 | content: ''; 105 | display: inline-block; 106 | height: (_size(element-height) * 0.6); 107 | left: 0; 108 | line-height: (_size(element-height) * 0.575); 109 | position: absolute; 110 | text-align: center; 111 | top: 0; 112 | width: (_size(element-height) * 0.6); 113 | } 114 | } 115 | 116 | &:checked + label { 117 | &:before { 118 | content: '\f00c'; 119 | } 120 | } 121 | } 122 | 123 | input[type="checkbox"] { 124 | & + label { 125 | &:before { 126 | border-radius: _size(border-radius); 127 | } 128 | } 129 | } 130 | 131 | input[type="radio"] { 132 | & + label { 133 | &:before { 134 | border-radius: 100%; 135 | } 136 | } 137 | } 138 | 139 | ::-webkit-input-placeholder { 140 | opacity: 1.0; 141 | } 142 | 143 | :-moz-placeholder { 144 | opacity: 1.0; 145 | } 146 | 147 | ::-moz-placeholder { 148 | opacity: 1.0; 149 | } 150 | 151 | :-ms-input-placeholder { 152 | opacity: 1.0; 153 | } 154 | 155 | .formerize-placeholder { 156 | opacity: 1.0; 157 | } 158 | 159 | @mixin color-form($p: null) { 160 | 161 | label { 162 | color: _palette($p, fg-bold); 163 | } 164 | 165 | input[type="text"], 166 | input[type="password"], 167 | input[type="email"], 168 | select, 169 | textarea { 170 | color: inherit; 171 | background-color: _palette($p, border-bg); 172 | border-color: _palette($p, border); 173 | 174 | &:focus { 175 | @if _palette($p, invert) == true { 176 | border-color: _palette($p, fg-bold); 177 | box-shadow: 0 0 0 _size(border-width) _palette($p, fg-bold); 178 | } 179 | @else { 180 | border-color: _palette(accent1, bg); 181 | box-shadow: 0 0 0 _size(border-width) _palette(accent1, bg); 182 | } 183 | } 184 | } 185 | 186 | .select-wrapper:before { 187 | color: _palette($p, border); 188 | } 189 | 190 | input[type="checkbox"], 191 | input[type="radio"], { 192 | 193 | & + label { 194 | color: _palette($p, fg); 195 | 196 | &:before { 197 | background-color: _palette($p, border-bg); 198 | border-color: _palette($p, border); 199 | } 200 | } 201 | 202 | &:checked + label { 203 | &:before { 204 | @if _palette($p, invert) == true { 205 | background-color: _palette($p, fg-bold); 206 | border-color: _palette($p, fg-bold); 207 | color: _palette($p, bg); 208 | } 209 | @else { 210 | background-color: _palette(accent1, bg); 211 | border-color: _palette(accent1, bg); 212 | color: _palette(accent1, fg-bold); 213 | } 214 | } 215 | } 216 | 217 | &:focus + label { 218 | &:before { 219 | @if _palette($p, invert) == true { 220 | border-color: _palette($p, fg-bold); 221 | box-shadow: 0 0 0 _size(border-width) _palette($p, fg-bold); 222 | } 223 | @else { 224 | border-color: _palette(accent1, bg); 225 | box-shadow: 0 0 0 _size(border-width) _palette(accent1, bg); 226 | } 227 | } 228 | } 229 | } 230 | 231 | ::-webkit-input-placeholder { 232 | color: _palette($p, fg-light) !important; 233 | } 234 | 235 | :-moz-placeholder { 236 | color: _palette($p, fg-light) !important; 237 | } 238 | 239 | ::-moz-placeholder { 240 | color: _palette($p, fg-light) !important; 241 | } 242 | 243 | :-ms-input-placeholder { 244 | color: _palette($p, fg-light) !important; 245 | } 246 | 247 | .formerize-placeholder { 248 | color: _palette($p, fg-light) !important; 249 | } 250 | } 251 | 252 | @include color-form; -------------------------------------------------------------------------------- /demo/assets/sass/components/_icon.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Icon */ 12 | 13 | .icon { 14 | @include icon; 15 | border-bottom: none; 16 | position: relative; 17 | 18 | > .label { 19 | display: none; 20 | } 21 | } 22 | 23 | @mixin color-icon($p: null) { 24 | .icon { 25 | color: _palette($p, fg-light); 26 | } 27 | } 28 | 29 | @include color-icon; -------------------------------------------------------------------------------- /demo/assets/sass/components/_image.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Image */ 12 | 13 | .image { 14 | border-radius: _size(border-radius); 15 | border: 0; 16 | display: inline-block; 17 | position: relative; 18 | overflow: hidden; 19 | 20 | img { 21 | border-radius: _size(border-radius); 22 | display: block; 23 | } 24 | 25 | &.left, 26 | &.right { 27 | max-width: 40%; 28 | 29 | img { 30 | width: 100%; 31 | } 32 | } 33 | 34 | &.left { 35 | float: left; 36 | margin: 0 1.5em 1em 0; 37 | top: 0.25em; 38 | } 39 | 40 | &.right { 41 | float: right; 42 | margin: 0 0 1em 1.5em; 43 | top: 0.25em; 44 | } 45 | 46 | &.fit { 47 | display: block; 48 | margin: 0 0 _size(element-margin) 0; 49 | width: 100%; 50 | 51 | img { 52 | width: 100%; 53 | } 54 | } 55 | 56 | &.main { 57 | display: block; 58 | margin: 0 0 (_size(element-margin) * 1.5) 0; 59 | width: 100%; 60 | 61 | img { 62 | width: 100%; 63 | } 64 | } 65 | 66 | &.phone { 67 | box-shadow: none; 68 | border-radius: 0; 69 | margin: 0 0 (_size(element-margin) * 1.5) 0; 70 | width: 13em; 71 | 72 | img { 73 | border-radius: 0; 74 | display: block; 75 | position: relative; 76 | width: 100%; 77 | } 78 | 79 | .inner, &:before, &:after { 80 | display: block; 81 | border: solid (_size(border-width) * 2) _palette(accent1, border); 82 | } 83 | 84 | .inner { 85 | position: relative; 86 | 87 | &:before, &:after { 88 | content: ''; 89 | position: absolute; 90 | left: 50%; 91 | } 92 | 93 | &:before { 94 | top: -1.375em; 95 | margin-left: -1em; 96 | width: 2em; 97 | height: 0.25em; 98 | border-radius: 0.5em; 99 | background: _palette(accent1, border); 100 | } 101 | 102 | &:after { 103 | bottom: -2.75em; 104 | margin-left: -1em; 105 | width: 2em; 106 | height: 2em; 107 | border-radius: 100%; 108 | border: solid (_size(border-width) * 2) _palette(accent1, border); 109 | } 110 | } 111 | 112 | &:before, &:after { 113 | content: ''; 114 | } 115 | 116 | &:before { 117 | height: 2.5em; 118 | border-radius: 1em 1em 0 0; 119 | border-bottom: 0; 120 | } 121 | 122 | &:after { 123 | height: 3.5em; 124 | border-radius: 0 0 1em 1em; 125 | border-top: 0; 126 | } 127 | } 128 | } 129 | 130 | @mixin color-image($p: null) { 131 | .image { 132 | box-shadow: 0 0 0 4px _palette($p, bg), 0 0 0 5px _palette($p, border); 133 | 134 | &.phone { 135 | box-shadow: none; 136 | 137 | .inner, &:before, &:after { 138 | border-color: _palette($p, border); 139 | } 140 | 141 | .inner { 142 | &:before { 143 | background: _palette($p, border); 144 | } 145 | 146 | &:after { 147 | border-color: _palette($p, border); 148 | } 149 | } 150 | } 151 | } 152 | } 153 | 154 | @include color-image; -------------------------------------------------------------------------------- /demo/assets/sass/components/_list.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* List */ 12 | 13 | ol { 14 | list-style: decimal; 15 | margin: 0 0 _size(element-margin) 0; 16 | padding-left: 1.25em; 17 | 18 | li { 19 | padding-left: 0.25em; 20 | } 21 | } 22 | 23 | ul { 24 | list-style: disc; 25 | margin: 0 0 _size(element-margin) 0; 26 | padding-left: 1em; 27 | 28 | li { 29 | padding-left: 0.5em; 30 | } 31 | 32 | &.alt { 33 | list-style: none; 34 | padding-left: 0; 35 | 36 | li { 37 | border-top-style: solid; 38 | border-top-width: _size(border-width); 39 | padding: 0.5em 0; 40 | 41 | &:first-child { 42 | border-top: 0; 43 | padding-top: 0; 44 | } 45 | } 46 | } 47 | 48 | &.icons { 49 | cursor: default; 50 | list-style: none; 51 | padding-left: 0; 52 | 53 | li { 54 | display: inline-block; 55 | padding: 0 1.5em 0 0; 56 | 57 | &:last-child { 58 | padding-right: 0 !important; 59 | } 60 | 61 | .icon { 62 | &:before { 63 | font-size: 1.75rem; 64 | } 65 | } 66 | } 67 | 68 | &.major { 69 | li { 70 | padding: 0 2.5em 0 0; 71 | 72 | .icon { 73 | &:before { 74 | font-size: 2.75rem; 75 | } 76 | } 77 | } 78 | 79 | // Small. 80 | @include breakpoint(small) { 81 | li { 82 | padding: 0 1.25em 0 0; 83 | 84 | .icon { 85 | &:before { 86 | font-size: 1.75rem; 87 | } 88 | } 89 | } 90 | } 91 | 92 | } 93 | 94 | &.labeled { 95 | li { 96 | margin: 1em 0; 97 | padding: 0 2em 0 0; 98 | 99 | .icon { 100 | &:before { 101 | vertical-align: middle; 102 | font-size: 2.25rem; 103 | margin-right: 0.5em; 104 | } 105 | 106 | .label { 107 | display: inline-block; 108 | vertical-align: middle; 109 | color: _palette(fg); 110 | } 111 | } 112 | } 113 | 114 | // Small. 115 | @include breakpoint(small) { 116 | 117 | // Portrait. 118 | @include orientation(portrait) { 119 | text-align: left; 120 | margin-right: auto; 121 | margin-left: auto; 122 | display: inline-block; 123 | white-space: nowrap; 124 | 125 | li { 126 | display: block; 127 | padding: 0; 128 | margin: 1.5em 0 0 0; 129 | 130 | .icon { 131 | &:before { 132 | width: 1.5em; 133 | display: block; 134 | float: left; 135 | margin-right: 0; 136 | } 137 | 138 | &:after { 139 | content: ''; 140 | display: block; 141 | clear: both; 142 | } 143 | } 144 | 145 | &:first-child { 146 | margin-top: 0; 147 | } 148 | } 149 | } 150 | 151 | } 152 | 153 | } 154 | } 155 | 156 | &.actions { 157 | cursor: default; 158 | list-style: none; 159 | padding-left: 0; 160 | 161 | li { 162 | display: inline-block; 163 | padding: 0 (_size(element-margin) * 0.5) 0 0; 164 | vertical-align: middle; 165 | 166 | &:last-child { 167 | padding-right: 0; 168 | } 169 | } 170 | 171 | &.small { 172 | li { 173 | padding: 0 (_size(element-margin) * 0.25) 0 0; 174 | } 175 | } 176 | 177 | &.vertical { 178 | li { 179 | display: block; 180 | padding: (_size(element-margin) * 0.5) 0 0 0; 181 | 182 | &:first-child { 183 | padding-top: 0; 184 | } 185 | 186 | > * { 187 | margin-bottom: 0; 188 | } 189 | } 190 | 191 | &.small { 192 | li { 193 | padding: (_size(element-margin) * 0.25) 0 0 0; 194 | 195 | &:first-child { 196 | padding-top: 0; 197 | } 198 | } 199 | } 200 | } 201 | 202 | &.fit { 203 | display: table; 204 | margin-left: (_size(element-margin) * -0.5); 205 | padding: 0; 206 | table-layout: fixed; 207 | width: calc(100% + #{(_size(element-margin) * 0.5)}); 208 | 209 | li { 210 | display: table-cell; 211 | padding: 0 0 0 (_size(element-margin) * 0.5); 212 | 213 | > * { 214 | margin-bottom: 0; 215 | } 216 | } 217 | 218 | &.small { 219 | margin-left: (_size(element-margin) * -0.25); 220 | width: calc(100% + #{(_size(element-margin) * 0.25)}); 221 | 222 | li { 223 | padding: 0 0 0 (_size(element-margin) * 0.25); 224 | } 225 | } 226 | } 227 | 228 | // XSmall. 229 | @include breakpoint(xsmall) { 230 | 231 | // Portrait. 232 | @include orientation(portrait) { 233 | margin: 0 0 _size(element-margin) 0; 234 | 235 | li { 236 | padding: (_size(element-margin) * 0.5) 0 0 0; 237 | display: block; 238 | text-align: center; 239 | width: 100%; 240 | 241 | &:first-child { 242 | padding-top: 0; 243 | } 244 | 245 | > * { 246 | width: 100%; 247 | margin: 0 !important; 248 | 249 | &.icon { 250 | &:before { 251 | margin-left: -2em; 252 | } 253 | } 254 | } 255 | } 256 | 257 | &.small { 258 | li { 259 | padding: (_size(element-margin) * 0.25) 0 0 0; 260 | 261 | &:first-child { 262 | padding-top: 0; 263 | } 264 | } 265 | } 266 | } 267 | 268 | } 269 | 270 | } 271 | } 272 | 273 | dl { 274 | margin: 0 0 _size(element-margin) 0; 275 | 276 | dt { 277 | display: block; 278 | font-weight: _font(weight-bold); 279 | margin: 0 0 (_size(element-margin) * 0.5) 0; 280 | } 281 | 282 | dd { 283 | margin-left: _size(element-margin); 284 | } 285 | } 286 | 287 | @mixin color-list($p: null) { 288 | ul { 289 | &.alt { 290 | > li { 291 | border-top-color: _palette($p, border); 292 | } 293 | } 294 | } 295 | } 296 | 297 | @include color-list; -------------------------------------------------------------------------------- /demo/assets/sass/components/_section.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Section/Article */ 12 | 13 | section, article { 14 | &.special { 15 | text-align: center; 16 | } 17 | } 18 | 19 | header { 20 | p { 21 | position: relative; 22 | margin: 0 0 (_size(element-margin) * 0.75) 0; 23 | 24 | // Small. 25 | @include breakpoint(small) { 26 | br { 27 | display: none; 28 | } 29 | } 30 | 31 | } 32 | 33 | h2 + p { 34 | font-size: 1.25em; 35 | margin-top: (_size(element-margin) * -0.25); 36 | line-height: 1.5em; 37 | } 38 | 39 | h3 + p { 40 | font-size: 1.1em; 41 | margin-top: (_size(element-margin) * -0.125); 42 | line-height: 1.5em; 43 | } 44 | 45 | h4 + p, 46 | h5 + p, 47 | h6 + p { 48 | font-size: 0.9em; 49 | margin-top: (_size(element-margin) * -0.3); 50 | line-height: 1.5em; 51 | } 52 | 53 | &.major { 54 | margin: 0 0 (_size(element-margin) * 1.25) 0; 55 | text-align: center; 56 | 57 | &:after { 58 | content: ''; 59 | border-bottom: solid (_size(border-width) * 2) _palette(border); 60 | display: block; 61 | width: 4em; 62 | margin: _size(element-margin) auto 0 auto; 63 | } 64 | 65 | // Small. 66 | @include breakpoint(small) { 67 | margin: 0 0 _size(element-margin) 0; 68 | 69 | p { 70 | font-size: 1em; 71 | } 72 | } 73 | 74 | } 75 | } -------------------------------------------------------------------------------- /demo/assets/sass/components/_spotlight.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Spotlight */ 12 | 13 | .spotlight { 14 | @include vendor('display', 'flex'); 15 | @include vendor('align-items', 'center'); 16 | margin: 0 0 _size(element-margin) 0; 17 | 18 | .image { 19 | width: 30%; 20 | border-radius: 100%; 21 | margin: 0 (_size(element-margin) * 1.5) 0 0; 22 | display: block; 23 | 24 | img { 25 | display: block; 26 | border-radius: 100%; 27 | width: 100%; 28 | } 29 | } 30 | 31 | .content { 32 | width: 70%; 33 | 34 | > :last-child { 35 | margin-bottom: 0; 36 | } 37 | } 38 | 39 | &:nth-child(2n) { 40 | @include vendor('flex-direction', 'row-reverse'); 41 | 42 | .image { 43 | margin: 0 0 0 (_size(element-margin) * 1.5); 44 | } 45 | 46 | .content { 47 | text-align: right; 48 | } 49 | } 50 | 51 | // Small. 52 | @include breakpoint(small) { 53 | 54 | // Landscape. 55 | @include orientation(landscape) { 56 | .image { 57 | margin: 0 _size(element-margin) 0 0; 58 | } 59 | 60 | &:nth-child(2n) { 61 | .image { 62 | margin: 0 0 0 _size(element-margin); 63 | } 64 | } 65 | } 66 | 67 | // Portrait. 68 | @include orientation(portrait) { 69 | @include vendor('flex-direction', 'column !important'); 70 | 71 | .image { 72 | width: 100%; 73 | max-width: 60%; 74 | margin: 0 0 _size(element-margin) 0 !important; 75 | } 76 | 77 | .content { 78 | width: 100%; 79 | text-align: center !important; 80 | } 81 | } 82 | 83 | } 84 | 85 | } -------------------------------------------------------------------------------- /demo/assets/sass/components/_table.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Table */ 12 | 13 | .table-wrapper { 14 | -webkit-overflow-scrolling: touch; 15 | overflow-x: auto; 16 | } 17 | 18 | table { 19 | margin: 0 0 _size(element-margin) 0; 20 | width: 100%; 21 | 22 | tbody { 23 | tr { 24 | border-style: solid; 25 | border-width: _size(border-width); 26 | border-left: 0; 27 | border-right: 0; 28 | } 29 | } 30 | 31 | td { 32 | padding: 0.75em 0.75em; 33 | } 34 | 35 | th { 36 | font-size: 0.9em; 37 | font-weight: _font(weight-bold); 38 | padding: 0 0.75em 0.75em 0.75em; 39 | text-align: left; 40 | } 41 | 42 | thead { 43 | border-bottom-style: solid; 44 | border-bottom-width: (_size(border-width) * 2); 45 | } 46 | 47 | tfoot { 48 | border-top-style: solid; 49 | border-top-width: (_size(border-width) * 2); 50 | } 51 | 52 | &.alt { 53 | border-collapse: separate; 54 | 55 | tbody { 56 | tr { 57 | td { 58 | border-style: solid; 59 | border-width: _size(border-width); 60 | border-left-width: 0; 61 | border-top-width: 0; 62 | 63 | &:first-child { 64 | border-left-width: _size(border-width); 65 | } 66 | } 67 | 68 | &:first-child { 69 | td { 70 | border-top-width: _size(border-width); 71 | } 72 | } 73 | } 74 | } 75 | 76 | thead { 77 | border-bottom: 0; 78 | } 79 | 80 | tfoot { 81 | border-top: 0; 82 | } 83 | } 84 | } 85 | 86 | @mixin color-table($p: null) { 87 | table { 88 | 89 | tbody { 90 | tr { 91 | border-color: _palette($p, border); 92 | 93 | &:nth-child(2n + 1) { 94 | background-color: _palette($p, border-bg); 95 | } 96 | } 97 | } 98 | 99 | th { 100 | color: _palette($p, fg-bold); 101 | } 102 | 103 | thead { 104 | border-bottom-color: _palette($p, border); 105 | } 106 | 107 | tfoot { 108 | border-top-color: _palette($p, border); 109 | } 110 | 111 | &.alt { 112 | 113 | tbody { 114 | tr { 115 | td { 116 | border-color: _palette($p, border); 117 | } 118 | } 119 | } 120 | } 121 | } 122 | } 123 | 124 | @include color-table; -------------------------------------------------------------------------------- /demo/assets/sass/components/_wrapper.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Wrapper */ 12 | 13 | .wrapper { 14 | @include padding(4.5em, 0); 15 | background-color: _palette(bg); 16 | border-bottom: solid (_size(border-width) * 2) lighten(_palette(border), 3); 17 | 18 | > .inner { 19 | margin-left: auto; 20 | margin-right: auto; 21 | width: 50em; 22 | 23 | &.alt { 24 | > * { 25 | border-top: solid (_size(border-width) * 2) lighten(_palette(border), 3); 26 | margin-bottom: 0; 27 | margin-top: 3em; 28 | padding-top: 3em; 29 | 30 | &:first-child { 31 | border-top: 0; 32 | margin-top: 0; 33 | padding-top: 0; 34 | } 35 | } 36 | } 37 | } 38 | 39 | &.style1 { 40 | @include color(accent1); 41 | } 42 | 43 | &.style2 { 44 | @include color(accent2); 45 | } 46 | 47 | &.style3 { 48 | @include color(accent3); 49 | } 50 | 51 | // Medium. 52 | @include breakpoint(medium) { 53 | @include padding(4em, 4em); 54 | 55 | > .inner { 56 | width: 100%; 57 | } 58 | } 59 | 60 | // Small. 61 | @include breakpoint(small) { 62 | 63 | // Landscape. 64 | @include orientation(landscape) { 65 | @include padding(3em, 3em); 66 | } 67 | 68 | // Portrait. 69 | @include orientation(portrait) { 70 | @include padding(3em, 1.5em); 71 | } 72 | 73 | } 74 | 75 | // XSmall. 76 | @include breakpoint(xsmall) { 77 | 78 | // Landscape. 79 | @include orientation(landscape) { 80 | @include padding(2em, 1.5em); 81 | } 82 | 83 | // Portrait. 84 | @include orientation(portrait) { 85 | @include padding(2em, 1em); 86 | } 87 | 88 | } 89 | 90 | } -------------------------------------------------------------------------------- /demo/assets/sass/ie8.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/skel'; 5 | 6 | /* 7 | Fractal by HTML5 UP 8 | html5up.net | @n33co 9 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 10 | */ 11 | 12 | /* Button */ 13 | 14 | input[type="submit"], 15 | input[type="reset"], 16 | input[type="button"], 17 | button, 18 | .button { 19 | position: relative; 20 | -ms-behavior: url('assets/js/ie/PIE.htc'); 21 | border: solid (_size(border-width) * 2) _palette(border) !important; 22 | 23 | &:hover { 24 | border: solid (_size(border-width) * 2) _palette(border) !important; 25 | } 26 | 27 | &.special { 28 | border: none !important; 29 | 30 | &:hover { 31 | border: none !important; 32 | } 33 | } 34 | } 35 | 36 | /* Image */ 37 | 38 | .image { 39 | -ms-behavior: url('assets/js/ie/PIE.htc'); 40 | 41 | img { 42 | position: relative; 43 | -ms-behavior: url('assets/js/ie/PIE.htc'); 44 | } 45 | 46 | &.phone { 47 | &:before, &:after { 48 | display: none; 49 | } 50 | 51 | .inner { 52 | &:before, &:after { 53 | display: none; 54 | } 55 | } 56 | } 57 | } 58 | 59 | /* List */ 60 | 61 | ul { 62 | &.icons { 63 | li { 64 | padding: 0 0 0 1.5em; 65 | 66 | &:first-child { 67 | padding-left: 0 !important; 68 | } 69 | 70 | .icon { 71 | &:before { 72 | font-size: 24px; 73 | } 74 | } 75 | } 76 | 77 | &.major { 78 | li { 79 | padding: 0 0 0 2.5em; 80 | 81 | .icon { 82 | &:before { 83 | font-size: 48px; 84 | } 85 | } 86 | } 87 | } 88 | } 89 | } 90 | 91 | /* Header */ 92 | 93 | #header { 94 | min-height: 0; 95 | 96 | .image { 97 | margin: 0 0 (_size(element-margin)) 0; 98 | } 99 | } -------------------------------------------------------------------------------- /demo/assets/sass/ie9.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/skel'; 5 | 6 | /* 7 | Fractal by HTML5 UP 8 | html5up.net | @n33co 9 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 10 | */ 11 | 12 | /* Spotlight */ 13 | 14 | .spotlight { 15 | .image { 16 | width: 25%; 17 | display: inline-block; 18 | vertical-align: middle; 19 | } 20 | 21 | .content { 22 | width: 65%; 23 | display: inline-block; 24 | vertical-align: middle; 25 | } 26 | 27 | &:after { 28 | content: ''; 29 | display: block; 30 | clear: both; 31 | } 32 | 33 | &:nth-child(2n) { 34 | .image { 35 | margin: 0 (_size(element-margin) * 1.5) 0 0; 36 | } 37 | 38 | .content { 39 | text-align: left; 40 | } 41 | } 42 | } 43 | 44 | /* Header */ 45 | 46 | #header { 47 | height: auto; 48 | text-align: center; 49 | 50 | .content { 51 | display: inline-block; 52 | vertical-align: middle; 53 | } 54 | 55 | .image { 56 | display: inline-block; 57 | vertical-align: middle; 58 | } 59 | } -------------------------------------------------------------------------------- /demo/assets/sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Footer */ 12 | 13 | #footer { 14 | @include color-typography(accent3); 15 | @include padding(4.5em, 0); 16 | color: _palette(accent3, fg-light); 17 | text-align: center; 18 | 19 | a { 20 | color: inherit; 21 | } 22 | 23 | .copyright { 24 | font-size: 0.8em; 25 | } 26 | 27 | // Medium. 28 | @include breakpoint(medium) { 29 | @include padding(4em, 4em); 30 | } 31 | 32 | // Small. 33 | @include breakpoint(small) { 34 | 35 | // Landscape. 36 | @include orientation(landscape) { 37 | @include padding(3em, 3em); 38 | } 39 | 40 | // Portrait. 41 | @include orientation(portrait) { 42 | @include padding(3em, 1.5em); 43 | } 44 | 45 | } 46 | 47 | } -------------------------------------------------------------------------------- /demo/assets/sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Header */ 12 | 13 | #header { 14 | @include color(accent1); 15 | @include padding(4.5em, 0); 16 | @include vendor('align-items', 'center'); 17 | @include vendor('display', 'flex'); 18 | @include vendor('justify-content', 'center'); 19 | background-image: url('images/overlay.png'), url('images/pattern-size1.svg'); 20 | background-position: top left, center center; 21 | background-attachment: fixed, fixed; 22 | background-size: auto, cover; 23 | height: 100vh; 24 | min-height: 35em; 25 | 26 | h1 { 27 | font-size: 3.25em; 28 | font-weight: _font(weight-bold); 29 | margin-bottom: _size(element-margin) * 0.25; 30 | } 31 | 32 | p { 33 | font-size: 1.5em; 34 | line-height: 1.35em; 35 | 36 | br { 37 | display: inline; 38 | } 39 | } 40 | 41 | .content { 42 | @include vendor('transition', ('opacity 0.5s ease', 'transform 1s ease')); 43 | @include vendor('transform', 'translateX(0)'); 44 | opacity: 1; 45 | text-align: right; 46 | margin: (_size(element-margin) * -1.75) (_size(element-margin) * 2) 0 0; 47 | 48 | > :last-child { 49 | margin-bottom: 0; 50 | } 51 | } 52 | 53 | .image { 54 | @include vendor('transition', ('opacity 1s ease', 'transform 1s ease')); 55 | @include vendor('transform', 'translateY(0)'); 56 | opacity: 1; 57 | 58 | img { 59 | @include vendor('transition', 'opacity 0.75s ease'); 60 | @include vendor('transition-delay', '0.75s'); 61 | opacity: 1; 62 | } 63 | } 64 | 65 | // Large. 66 | @include breakpoint(large) { 67 | background-image: url('images/overlay.png'), url('images/pattern-size2.svg'); 68 | } 69 | 70 | // Medium. 71 | @include breakpoint(medium) { 72 | height: auto; 73 | min-height: 0; 74 | 75 | .content { 76 | margin: (_size(element-margin) * -1) (_size(element-margin) * 2) 0 0; 77 | } 78 | 79 | // Portrait. 80 | @include orientation(portrait) { 81 | @include padding(6em, 3em); 82 | @include vendor('flex-direction', 'column-reverse'); 83 | 84 | .content { 85 | display: block; 86 | width: 100%; 87 | text-align: center; 88 | margin: 0 0 _size(element-margin) 0; 89 | } 90 | 91 | .image { 92 | overflow: hidden; 93 | } 94 | } 95 | 96 | } 97 | 98 | // Small. 99 | @include breakpoint(small) { 100 | background-image: url('images/overlay.png'), url('images/pattern-size3.svg'); 101 | 102 | h1 { 103 | font-size: 2em; 104 | } 105 | 106 | p { 107 | font-size: 1em; 108 | line-height: inherit; 109 | } 110 | 111 | // Landscape. 112 | @include orientation(landscape) { 113 | @include padding(2em, 2em); 114 | 115 | .content { 116 | margin: 0 _size(element-margin) _size(element-margin) 0; 117 | } 118 | 119 | .image { 120 | font-size: 0.8em; 121 | width: 15em; 122 | max-width: 20vw; 123 | 124 | .inner, &:before, &:after { 125 | font-size: 0.8em; 126 | } 127 | } 128 | } 129 | 130 | // Portrait. 131 | @include orientation(portrait) { 132 | @include padding(3em, 1.5em); 133 | 134 | .image { 135 | font-size: 0.6em; 136 | max-width: 60vw; 137 | } 138 | } 139 | 140 | } 141 | 142 | // XSmall. 143 | @include breakpoint(xsmall) { 144 | 145 | // Landscape. 146 | @include orientation(landscape) { 147 | @include padding(2em, 1.5em); 148 | 149 | .image { 150 | font-size: 0.7em; 151 | } 152 | 153 | .actions { 154 | font-size: 0.8em; 155 | } 156 | } 157 | 158 | // Portrait. 159 | @include orientation(portrait) { 160 | @include padding(2em, 1em); 161 | } 162 | 163 | } 164 | 165 | // Mobile. 166 | body.is-mobile & { 167 | background-attachment: scroll, scroll; 168 | } 169 | 170 | // Loading. 171 | body.is-loading & { 172 | .content { 173 | @include vendor('transform', 'translateX(2em)'); 174 | opacity: 0; 175 | } 176 | 177 | .image { 178 | @include vendor('transform', 'translateY(4em)'); 179 | opacity: 0; 180 | 181 | img { 182 | opacity: 0; 183 | } 184 | } 185 | 186 | // Medium. 187 | @include breakpoint(medium) { 188 | 189 | // Portrait. 190 | @include orientation(portrait) { 191 | .content { 192 | @include vendor('transform', 'none'); 193 | opacity: 1; 194 | } 195 | 196 | .image { 197 | @include vendor('transform', 'translateY(2em)'); 198 | } 199 | } 200 | 201 | } 202 | 203 | } 204 | 205 | } -------------------------------------------------------------------------------- /demo/assets/sass/layout/_main.scss: -------------------------------------------------------------------------------- 1 | @import '../libs/vars'; 2 | @import '../libs/functions'; 3 | @import '../libs/mixins'; 4 | 5 | /// 6 | /// Fractal by HTML5 UP 7 | /// html5up.net | @n33co 8 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 9 | /// 10 | 11 | /* Main */ 12 | 13 | #main { 14 | @include padding(4em, 0); 15 | 16 | // Small. 17 | @include breakpoint(small) { 18 | @include padding(3em, 0); 19 | } 20 | 21 | } -------------------------------------------------------------------------------- /demo/assets/sass/libs/_functions.scss: -------------------------------------------------------------------------------- 1 | /// Gets a duration value. 2 | /// @param {string} $keys Key(s). 3 | /// @return {string} Value. 4 | @function _duration($keys...) { 5 | @return val($duration, $keys...); 6 | } 7 | 8 | /// Gets a font value. 9 | /// @param {string} $keys Key(s). 10 | /// @return {string} Value. 11 | @function _font($keys...) { 12 | @return val($font, $keys...); 13 | } 14 | 15 | /// Gets a misc value. 16 | /// @param {string} $keys Key(s). 17 | /// @return {string} Value. 18 | @function _misc($keys...) { 19 | @return val($misc, $keys...); 20 | } 21 | 22 | /// Gets a palette value. 23 | /// @param {string} $keys Key(s). 24 | /// @return {string} Value. 25 | @function _palette($keys...) { 26 | @return val($palette, $keys...); 27 | } 28 | 29 | /// Gets a size value. 30 | /// @param {string} $keys Key(s). 31 | /// @return {string} Value. 32 | @function _size($keys...) { 33 | @return val($size, $keys...); 34 | } -------------------------------------------------------------------------------- /demo/assets/sass/libs/_mixins.scss: -------------------------------------------------------------------------------- 1 | /// Makes an element's :before pseudoelement a FontAwesome icon. 2 | /// @param {string} $content Optional content value to use. 3 | @mixin icon($content: false) { 4 | 5 | text-decoration: none; 6 | 7 | &:before { 8 | 9 | @if $content { 10 | content: $content; 11 | } 12 | 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-font-smoothing: antialiased; 15 | font-family: FontAwesome; 16 | font-style: normal; 17 | font-weight: normal; 18 | text-transform: none !important; 19 | 20 | } 21 | 22 | } 23 | 24 | /// Applies padding to an element, taking the current element-margin value into account. 25 | /// @param {mixed} $tb Top/bottom padding. 26 | /// @param {mixed} $lr Left/right padding. 27 | /// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) 28 | /// @param {bool} $important If true, adds !important. 29 | @mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { 30 | 31 | @if $important { 32 | $important: '!important'; 33 | } 34 | 35 | padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max(0.1em, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; 36 | 37 | } -------------------------------------------------------------------------------- /demo/assets/sass/libs/_skel.scss: -------------------------------------------------------------------------------- 1 | // skel.scss v3.0.0 | (c) n33 | skel.io | MIT licensed */ 2 | 3 | // Vars. 4 | 5 | /// Breakpoints. 6 | /// @var {list} 7 | $breakpoints: () !global; 8 | 9 | /// Vendor prefixes. 10 | /// @var {list} 11 | $vendor-prefixes: ( 12 | '-moz-', 13 | '-webkit-', 14 | '-ms-', 15 | '' 16 | ); 17 | 18 | /// Properties that should be vendorized. 19 | /// @var {list} 20 | $vendor-properties: ( 21 | 'align-content', 22 | 'align-items', 23 | 'align-self', 24 | 'animation', 25 | 'animation-delay', 26 | 'animation-direction', 27 | 'animation-duration', 28 | 'animation-fill-mode', 29 | 'animation-iteration-count', 30 | 'animation-name', 31 | 'animation-play-state', 32 | 'animation-timing-function', 33 | 'appearance', 34 | 'backface-visibility', 35 | 'box-sizing', 36 | 'filter', 37 | 'flex', 38 | 'flex-basis', 39 | 'flex-direction', 40 | 'flex-flow', 41 | 'flex-grow', 42 | 'flex-shrink', 43 | 'flex-wrap', 44 | 'justify-content', 45 | 'order', 46 | 'perspective', 47 | 'pointer-events', 48 | 'transform', 49 | 'transform-origin', 50 | 'transform-style', 51 | 'transition', 52 | 'transition-delay', 53 | 'transition-duration', 54 | 'transition-property', 55 | 'transition-timing-function' 56 | ); 57 | 58 | /// Values that should be vendorized. 59 | /// @var {list} 60 | $vendor-values: ( 61 | 'filter', 62 | 'flex', 63 | 'linear-gradient', 64 | 'radial-gradient', 65 | 'transform' 66 | ); 67 | 68 | // Functions. 69 | 70 | /// Removes a specific item from a list. 71 | /// @author Hugo Giraudel 72 | /// @param {list} $list List. 73 | /// @param {integer} $index Index. 74 | /// @return {list} Updated list. 75 | @function remove-nth($list, $index) { 76 | 77 | $result: null; 78 | 79 | @if type-of($index) != number { 80 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; 81 | } 82 | @else if $index == 0 { 83 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; 84 | } 85 | @else if abs($index) > length($list) { 86 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; 87 | } 88 | @else { 89 | 90 | $result: (); 91 | $index: if($index < 0, length($list) + $index + 1, $index); 92 | 93 | @for $i from 1 through length($list) { 94 | 95 | @if $i != $index { 96 | $result: append($result, nth($list, $i)); 97 | } 98 | 99 | } 100 | 101 | } 102 | 103 | @return $result; 104 | 105 | } 106 | 107 | /// Replaces a substring within another string. 108 | /// @author Hugo Giraudel 109 | /// @param {string} $string String. 110 | /// @param {string} $search Substring. 111 | /// @param {string} $replace Replacement. 112 | /// @return {string} Updated string. 113 | @function str-replace($string, $search, $replace: '') { 114 | 115 | $index: str-index($string, $search); 116 | 117 | @if $index { 118 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 119 | } 120 | 121 | @return $string; 122 | 123 | } 124 | 125 | /// Replaces a substring within each string in a list. 126 | /// @param {list} $strings List of strings. 127 | /// @param {string} $search Substring. 128 | /// @param {string} $replace Replacement. 129 | /// @return {list} Updated list of strings. 130 | @function str-replace-all($strings, $search, $replace: '') { 131 | 132 | @each $string in $strings { 133 | $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); 134 | } 135 | 136 | @return $strings; 137 | 138 | } 139 | 140 | /// Gets a value from a map. 141 | /// @author Hugo Giraudel 142 | /// @param {map} $map Map. 143 | /// @param {string} $keys Key(s). 144 | /// @return {string} Value. 145 | @function val($map, $keys...) { 146 | 147 | @if nth($keys, 1) == null { 148 | $keys: remove-nth($keys, 1); 149 | } 150 | 151 | @each $key in $keys { 152 | $map: map-get($map, $key); 153 | } 154 | 155 | @return $map; 156 | 157 | } 158 | 159 | // Mixins. 160 | 161 | /// Sets the global box model. 162 | /// @param {string} $model Model (default is content). 163 | @mixin boxModel($model: 'content') { 164 | 165 | $x: $model + '-box'; 166 | 167 | *, *:before, *:after { 168 | -moz-box-sizing: #{$x}; 169 | -webkit-box-sizing: #{$x}; 170 | box-sizing: #{$x}; 171 | } 172 | 173 | } 174 | 175 | /// Wraps @content in a @media block using a given breakpoint. 176 | /// @param {string} $breakpoint Breakpoint. 177 | /// @param {map} $queries Additional queries. 178 | @mixin breakpoint($breakpoint: null, $queries: null) { 179 | 180 | $query: 'screen'; 181 | 182 | // Breakpoint. 183 | @if $breakpoint and map-has-key($breakpoints, $breakpoint) { 184 | $query: $query + ' and ' + map-get($breakpoints, $breakpoint); 185 | } 186 | 187 | // Queries. 188 | @if $queries { 189 | @each $k, $v in $queries { 190 | $query: $query + ' and (' + $k + ':' + $v + ')'; 191 | } 192 | } 193 | 194 | @media #{$query} { 195 | @content; 196 | } 197 | 198 | } 199 | 200 | /// Wraps @content in a @media block targeting a specific orientation. 201 | /// @param {string} $orientation Orientation. 202 | @mixin orientation($orientation) { 203 | @media screen and (orientation: #{$orientation}) { 204 | @content; 205 | } 206 | } 207 | 208 | /// Utility mixin for containers. 209 | /// @param {mixed} $width Width. 210 | @mixin containers($width) { 211 | 212 | // Locked? 213 | $lock: false; 214 | 215 | @if length($width) == 2 { 216 | $width: nth($width, 1); 217 | $lock: true; 218 | } 219 | 220 | // Modifiers. 221 | .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; } 222 | .container.\37 5\25 { width: $width * 0.75; } 223 | .container.\35 0\25 { width: $width * 0.5; } 224 | .container.\32 5\25 { width: $width * 0.25; } 225 | 226 | // Main class. 227 | .container { 228 | @if $lock { 229 | width: $width !important; 230 | } 231 | @else { 232 | width: $width; 233 | } 234 | } 235 | 236 | } 237 | 238 | /// Utility mixin for grid. 239 | /// @param {list} $gutters Column and row gutters (default is 40px). 240 | /// @param {string} $breakpointName Optional breakpoint name. 241 | @mixin grid($gutters: 40px, $breakpointName: null) { 242 | 243 | // Gutters. 244 | @include grid-gutters($gutters); 245 | @include grid-gutters($gutters, \32 00\25, 2); 246 | @include grid-gutters($gutters, \31 50\25, 1.5); 247 | @include grid-gutters($gutters, \35 0\25, 0.5); 248 | @include grid-gutters($gutters, \32 5\25, 0.25); 249 | 250 | // Cells. 251 | $x: ''; 252 | 253 | @if $breakpointName { 254 | $x: '\\28' + $breakpointName + '\\29'; 255 | } 256 | 257 | .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; } 258 | .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; } 259 | .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; } 260 | .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; } 261 | .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; } 262 | .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; } 263 | .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; } 264 | .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; } 265 | .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; } 266 | .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; } 267 | .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; } 268 | .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; } 269 | 270 | .\31 2u\24#{$x} + *, 271 | .\31 1u\24#{$x} + *, 272 | .\31 0u\24#{$x} + *, 273 | .\39 u\24#{$x} + *, 274 | .\38 u\24#{$x} + *, 275 | .\37 u\24#{$x} + *, 276 | .\36 u\24#{$x} + *, 277 | .\35 u\24#{$x} + *, 278 | .\34 u\24#{$x} + *, 279 | .\33 u\24#{$x} + *, 280 | .\32 u\24#{$x} + *, 281 | .\31 u\24#{$x} + * { 282 | clear: left; 283 | } 284 | 285 | .\-11u#{$x} { margin-left: 91.6666666667% } 286 | .\-10u#{$x} { margin-left: 83.3333333333% } 287 | .\-9u#{$x} { margin-left: 75% } 288 | .\-8u#{$x} { margin-left: 66.6666666667% } 289 | .\-7u#{$x} { margin-left: 58.3333333333% } 290 | .\-6u#{$x} { margin-left: 50% } 291 | .\-5u#{$x} { margin-left: 41.6666666667% } 292 | .\-4u#{$x} { margin-left: 33.3333333333% } 293 | .\-3u#{$x} { margin-left: 25% } 294 | .\-2u#{$x} { margin-left: 16.6666666667% } 295 | .\-1u#{$x} { margin-left: 8.3333333333% } 296 | 297 | } 298 | 299 | /// Utility mixin for grid. 300 | /// @param {list} $gutters Gutters. 301 | /// @param {string} $class Optional class name. 302 | /// @param {integer} $multiplier Multiplier (default is 1). 303 | @mixin grid-gutters($gutters, $class: null, $multiplier: 1) { 304 | 305 | // Expand gutters if it's not a list. 306 | @if length($gutters) == 1 { 307 | $gutters: ($gutters, 0); 308 | } 309 | 310 | // Get column and row gutter values. 311 | $c: nth($gutters, 1); 312 | $r: nth($gutters, 2); 313 | 314 | // Get class (if provided). 315 | $x: ''; 316 | 317 | @if $class { 318 | $x: '.' + $class; 319 | } 320 | 321 | // Default. 322 | .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); } 323 | .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } 324 | 325 | // Uniform. 326 | .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); } 327 | .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } 328 | 329 | } 330 | 331 | /// Wraps @content in vendorized keyframe blocks. 332 | /// @param {string} $name Name. 333 | @mixin keyframes($name) { 334 | 335 | @-moz-keyframes #{$name} { @content; } 336 | @-webkit-keyframes #{$name} { @content; } 337 | @-ms-keyframes #{$name} { @content; } 338 | @keyframes #{$name} { @content; } 339 | 340 | } 341 | 342 | /// 343 | /// Sets breakpoints. 344 | /// @param {map} $x Breakpoints. 345 | /// 346 | @mixin skel-breakpoints($x: ()) { 347 | $breakpoints: $x !global; 348 | } 349 | 350 | /// 351 | /// Initializes layout module. 352 | /// @param {map} config Config. 353 | /// 354 | @mixin skel-layout($config: ()) { 355 | 356 | // Config. 357 | $configPerBreakpoint: (); 358 | 359 | $z: map-get($config, 'breakpoints'); 360 | 361 | @if $z { 362 | $configPerBreakpoint: $z; 363 | } 364 | 365 | // Reset. 366 | $x: map-get($config, 'reset'); 367 | 368 | @if $x { 369 | 370 | /* Reset */ 371 | 372 | @include reset($x); 373 | 374 | } 375 | 376 | // Box model. 377 | $x: map-get($config, 'boxModel'); 378 | 379 | @if $x { 380 | 381 | /* Box Model */ 382 | 383 | @include boxModel($x); 384 | 385 | } 386 | 387 | // Containers. 388 | $containers: map-get($config, 'containers'); 389 | 390 | @if $containers { 391 | 392 | /* Containers */ 393 | 394 | .container { 395 | margin-left: auto; 396 | margin-right: auto; 397 | } 398 | 399 | // Use default is $containers is just "true". 400 | @if $containers == true { 401 | $containers: 960px; 402 | } 403 | 404 | // Apply base. 405 | @include containers($containers); 406 | 407 | // Apply per-breakpoint. 408 | @each $name in map-keys($breakpoints) { 409 | 410 | // Get/use breakpoint setting if it exists. 411 | $x: map-get($configPerBreakpoint, $name); 412 | 413 | // Per-breakpoint config exists? 414 | @if $x { 415 | $y: map-get($x, 'containers'); 416 | 417 | // Setting exists? Use it. 418 | @if $y { 419 | $containers: $y; 420 | } 421 | 422 | } 423 | 424 | // Create @media block. 425 | @media screen and #{map-get($breakpoints, $name)} { 426 | @include containers($containers); 427 | } 428 | 429 | } 430 | 431 | } 432 | 433 | // Grid. 434 | $grid: map-get($config, 'grid'); 435 | 436 | @if $grid { 437 | 438 | /* Grid */ 439 | 440 | // Use defaults if $grid is just "true". 441 | @if $grid == true { 442 | $grid: (); 443 | } 444 | 445 | // Sub-setting: Gutters. 446 | $grid-gutters: 40px; 447 | $x: map-get($grid, 'gutters'); 448 | 449 | @if $x { 450 | $grid-gutters: $x; 451 | } 452 | 453 | // Rows. 454 | .row { 455 | border-bottom: solid 1px transparent; 456 | -moz-box-sizing: border-box; 457 | -webkit-box-sizing: border-box; 458 | box-sizing: border-box; 459 | } 460 | 461 | .row > * { 462 | float: left; 463 | -moz-box-sizing: border-box; 464 | -webkit-box-sizing: border-box; 465 | box-sizing: border-box; 466 | } 467 | 468 | .row:after, .row:before { 469 | content: ''; 470 | display: block; 471 | clear: both; 472 | height: 0; 473 | } 474 | 475 | .row.uniform > * > :first-child { 476 | margin-top: 0; 477 | } 478 | 479 | .row.uniform > * > :last-child { 480 | margin-bottom: 0; 481 | } 482 | 483 | // Gutters (0%). 484 | @include grid-gutters($grid-gutters, \30 \25, 0); 485 | 486 | // Apply base. 487 | @include grid($grid-gutters); 488 | 489 | // Apply per-breakpoint. 490 | @each $name in map-keys($breakpoints) { 491 | 492 | // Get/use breakpoint setting if it exists. 493 | $x: map-get($configPerBreakpoint, $name); 494 | 495 | // Per-breakpoint config exists? 496 | @if $x { 497 | $y: map-get($x, 'grid'); 498 | 499 | // Setting exists? 500 | @if $y { 501 | 502 | // Sub-setting: Gutters. 503 | $x: map-get($y, 'gutters'); 504 | 505 | @if $x { 506 | $grid-gutters: $x; 507 | } 508 | 509 | } 510 | 511 | } 512 | 513 | // Create @media block. 514 | @media screen and #{map-get($breakpoints, $name)} { 515 | @include grid($grid-gutters, $name); 516 | } 517 | 518 | } 519 | 520 | } 521 | 522 | } 523 | 524 | /// Resets browser styles. 525 | /// @param {string} $mode Mode (default is 'normalize'). 526 | @mixin reset($mode: 'normalize') { 527 | 528 | @if $mode == 'normalize' { 529 | 530 | // normalize.css v3.0.2 | MIT License | git.io/normalize 531 | html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} 532 | 533 | } 534 | @else if $mode == 'full' { 535 | 536 | // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain) 537 | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} 538 | 539 | } 540 | 541 | } 542 | 543 | /// Vendorizes a declaration's property and/or value(s). 544 | /// @param {string} $property Property. 545 | /// @param {mixed} $value String/list of value(s). 546 | @mixin vendor($property, $value) { 547 | 548 | // Determine if property should expand. 549 | $expandProperty: index($vendor-properties, $property); 550 | 551 | // Determine if value should expand (and if so, add '-prefix-' placeholder). 552 | $expandValue: false; 553 | 554 | @each $x in $value { 555 | @each $y in $vendor-values { 556 | @if $y == str-slice($x, 1, str-length($y)) { 557 | 558 | $value: set-nth($value, index($value, $x), '-prefix-' + $x); 559 | $expandValue: true; 560 | 561 | } 562 | } 563 | } 564 | 565 | // Expand property? 566 | @if $expandProperty { 567 | @each $vendor in $vendor-prefixes { 568 | #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 569 | } 570 | } 571 | 572 | // Expand just the value? 573 | @elseif $expandValue { 574 | @each $vendor in $vendor-prefixes { 575 | #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 576 | } 577 | } 578 | 579 | // Neither? Treat them as a normal declaration. 580 | @else { 581 | #{$property}: #{$value}; 582 | } 583 | 584 | } -------------------------------------------------------------------------------- /demo/assets/sass/libs/_vars.scss: -------------------------------------------------------------------------------- 1 | // Misc. 2 | $misc: ( 3 | ); 4 | 5 | // Duration. 6 | $duration: ( 7 | transition: 0.2s 8 | ); 9 | 10 | // Size. 11 | $size: ( 12 | border-radius: 6px, 13 | border-width: 1px, 14 | element-height: 2.75em, 15 | element-margin: 2em 16 | ); 17 | 18 | // Font. 19 | $font: ( 20 | family: (Arial, Helvetica, sans-serif), 21 | family-fixed: ('Courier New', monospace), 22 | weight: normal, 23 | weight-bold: bold 24 | ); 25 | 26 | // Palette. 27 | $palette: ( 28 | bg: #ffffff, 29 | fg: #999999, 30 | fg-bold: #828282, 31 | fg-light: #e0e0e0, 32 | border: #e6e6e6, 33 | border-bg: rgba(144,144,144,0.075), 34 | border2: #d6d6d6, 35 | border2-bg: rgba(144,144,144,0.15), 36 | 37 | accent1: ( 38 | bg: #4696e5, 39 | fg: mix(#4696e5, #ffffff, 25%), 40 | fg-bold: #ffffff, 41 | fg-light: mix(#4696e5, #ffffff, 40%), 42 | border: rgba(255,255,255,0.25), 43 | border-bg: rgba(255,255,255,0.075), 44 | border2: rgba(255,255,255,0.5), 45 | border2-bg: rgba(255,255,255,0.2), 46 | invert: true 47 | ), 48 | 49 | accent2: ( 50 | bg: #fbfbfb, 51 | fg: #999999, 52 | fg-bold: #828282, 53 | fg-light: #e0e0e0, 54 | border: #e6e6e6, 55 | border-bg: rgba(144,144,144,0.075), 56 | border2: #d6d6d6, 57 | border2-bg: rgba(144,144,144,0.15), 58 | invert: false 59 | ), 60 | 61 | accent3: ( 62 | bg: #f7f7f7, 63 | fg: #999999, 64 | fg-bold: #828282, 65 | fg-light: #b0b0b0, 66 | border: #d6d6d6, 67 | border-bg: rgba(144,144,144,0.075), 68 | border2: #c6c6c6, 69 | border2-bg: rgba(144,144,144,0.15), 70 | invert: false 71 | ) 72 | ); -------------------------------------------------------------------------------- /demo/assets/sass/main.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/skel'; 5 | @import 'font-awesome.min.css'; 6 | 7 | /* 8 | Fractal by HTML5 UP 9 | html5up.net | @n33co 10 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 11 | */ 12 | 13 | @include skel-breakpoints(( 14 | xlarge: '(max-width: 1680px)', 15 | large: '(max-width: 1280px)', 16 | medium: '(max-width: 980px)', 17 | small: '(max-width: 736px)', 18 | xsmall: '(max-width: 480px)', 19 | xxsmall: '(max-width: 360px)' 20 | )); 21 | 22 | @include skel-layout(( 23 | reset: 'full', 24 | boxModel: 'border', 25 | grid: (gutters: 1.5em) 26 | )); 27 | 28 | @mixin color($p: null) { 29 | @include color-button($p); 30 | @include color-form($p); 31 | @include color-icon($p); 32 | @include color-image($p); 33 | @include color-list($p); 34 | @include color-table($p); 35 | @include color-typography($p); 36 | } 37 | 38 | // Base. 39 | 40 | @import 'base/page'; 41 | @import 'base/typography'; 42 | 43 | // Component. 44 | 45 | @import 'components/box'; 46 | @import 'components/button'; 47 | @import 'components/form'; 48 | @import 'components/icon'; 49 | @import 'components/image'; 50 | @import 'components/list'; 51 | @import 'components/section'; 52 | @import 'components/spotlight'; 53 | @import 'components/table'; 54 | @import 'components/wrapper'; 55 | 56 | // Layout. 57 | 58 | @import 'layout/header'; 59 | @import 'layout/main'; 60 | @import 'layout/footer'; -------------------------------------------------------------------------------- /demo/images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/images/bg.jpg -------------------------------------------------------------------------------- /demo/images/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/images/pic01.jpg -------------------------------------------------------------------------------- /demo/images/pic02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/images/pic02.jpg -------------------------------------------------------------------------------- /demo/images/pic03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/images/pic03.jpg -------------------------------------------------------------------------------- /demo/images/pic04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/images/pic04.jpg -------------------------------------------------------------------------------- /demo/images/pic05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/images/pic05.jpg -------------------------------------------------------------------------------- /demo/images/screen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/demo/images/screen.jpg -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var del = require('del'); 3 | var zip = require('gulp-zip'); 4 | var gulp = require('gulp'); 5 | var escape = require('escape-html'); 6 | var useref = require('gulp-useref'); 7 | var uglify = require('gulp-uglify'); 8 | var rename = require('gulp-rename'); 9 | var gulpif = require('gulp-if'); 10 | var concat = require('gulp-concat'); 11 | var minifyCss = require('gulp-minify-css'); 12 | var replace = require('gulp-replace'); 13 | var runSequence = require('run-sequence'); 14 | 15 | // ================================================================== 16 | // For publishing a downloadable version including documentation 17 | // ================================================================== 18 | gulp.task('make-dist', function(cb) { 19 | runSequence( 20 | 'clean', 21 | 'make-package', 22 | 'make-standalone-demo', 23 | 'clean-folders', 24 | cb 25 | ); 26 | }); 27 | 28 | gulp.task('make-package', function(cb) { 29 | runSequence(['copy-xivmap', 'copy-docs', 'copy-ty-note'], ['minify-js', 'minify-css', 'minify-docked-css'], 'zip-package', cb) 30 | }); 31 | 32 | gulp.task('make-standalone-demo', function(cb) { 33 | runSequence(['copy-standalone-demo', 'copy-xivmap-standalone-demo'], 'fix-standalone-demo-references', 'zip-standalone-demo', cb); 34 | }); 35 | 36 | 37 | gulp.task('copy-standalone-demo', function() { 38 | return gulp.src('demo/**') 39 | .pipe(gulp.dest('dist/standalone-demo/')); 40 | }); 41 | 42 | gulp.task('copy-xivmap-standalone-demo', function() { 43 | gulp.src('dist/xivmap/xivmap/**') 44 | .pipe(gulp.dest('dist/standalone-demo/xivmap/')) 45 | }); 46 | 47 | gulp.task('fix-standalone-demo-references', function() { 48 | return gulp.src('dist/standalone-demo/index.html') 49 | .pipe(replace('href="../xivmap.css"', 'href="xivmap/xivmap.min.css"')) 50 | .pipe(replace('href="../xivmap-docked.css"', 'href="xivmap/xivmap-docked.min.css"')) 51 | .pipe(replace('src="../xivmap.js"', 'src="xivmap/xivmap.min.js"')) 52 | .pipe(gulp.dest('dist/standalone-demo/')); 53 | }); 54 | 55 | gulp.task('clean', function() { 56 | return del('dist/'); 57 | }); 58 | 59 | gulp.task('copy-xivmap', function() { 60 | return gulp.src(['xivmap.js', 'xivmap.css', 'xivmap-docked.css']) 61 | .pipe(gulp.dest('dist/xivmap/xivmap/')); 62 | }); 63 | 64 | gulp.task('copy-docs', function() { 65 | var readme = escape(fs.readFileSync('README.md', {encoding: 'utf8'})); 66 | readme = readme.replace('![](publishing-material/media/xivmap-demo.gif)', ''); 67 | readme = readme.split('# License')[0]; 68 | var assets = useref.assets({noconcat: true}); 69 | return gulp.src('publishing-material/documentation-source-files/MANUAL.html') 70 | .pipe(replace('{{markdown}}', readme)) 71 | .pipe(assets) 72 | .pipe(gulpif('*.js', concat('assets/docs.min.js'))) 73 | .pipe(gulpif('*.js', uglify({output: {max_line_len: 200}}))) 74 | .pipe(gulpif('*.css', concat('assets/docs.min.css'))) 75 | .pipe(gulpif('*.css', minifyCss())) 76 | .pipe(assets.restore()) 77 | .pipe(useref()) 78 | .pipe(gulp.dest('dist/xivmap/documentation')); 79 | }); 80 | 81 | gulp.task('copy-ty-note', function() { 82 | return gulp.src('publishing-material/thank-you-note/thanks.html') 83 | .pipe(gulp.dest('dist/xivmap/')); 84 | }); 85 | 86 | gulp.task('minify-js', function() { 87 | return gulp.src('dist/xivmap/xivmap/xivmap.js') 88 | .pipe(rename('xivmap.min.js')) 89 | .pipe(uglify()) 90 | .pipe(gulp.dest('dist/xivmap/xivmap/')); 91 | }); 92 | 93 | gulp.task('minify-css', function() { 94 | gulp.src('dist/xivmap/xivmap/xivmap.css') 95 | .pipe(rename('xivmap.min.css')) 96 | .pipe(minifyCss()) 97 | .pipe(gulp.dest('dist/xivmap/xivmap/')); 98 | }); 99 | 100 | gulp.task('minify-docked-css', function() { 101 | return gulp.src('dist/xivmap/xivmap/xivmap-docked.css') 102 | .pipe(rename('xivmap-docked.min.css')) 103 | .pipe(minifyCss()) 104 | .pipe(gulp.dest('dist/xivmap/xivmap/')); 105 | }); 106 | 107 | gulp.task('zip-package', function () { 108 | return gulp.src(['dist/**', '!dist/standalone-demo', '!dist/standalone-demo/**', '!dist/standalone-demo.zip']) 109 | .pipe(zip('xivmap.zip')) 110 | .pipe(gulp.dest('dist/')); 111 | }); 112 | 113 | gulp.task('zip-standalone-demo', function () { 114 | return gulp.src('dist/standalone-demo/**/*') 115 | .pipe(zip('standalone-demo.zip')) 116 | .pipe(gulp.dest('dist/')); 117 | }); 118 | 119 | gulp.task('clean-folders', function() { 120 | return del(['dist/standalone-demo', 'dist/xivmap']); 121 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Minimap for websites. Both as a jQuery plugin and vanilla JS. 6 | 40 | 41 | 42 |

Xivmap is a minimap for websites, a la Sublime Text

43 | 44 | 45 |
46 | Live demo, click me! 47 | Github | download & instructions 48 |
49 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "xivmap", 4 | "version": "1.1.1", 5 | "description": "Minimap for websites, a la Sublime Text. Available as jQuery or Vanilla JS.", 6 | "author": "Andrea Stella (http://mccxiv.me)", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/mccxiv/xivmap.git" 10 | }, 11 | "keywords": [ 12 | "minimap", 13 | "jquery", 14 | "jquery-plugin", 15 | "ecosystem:jquery" 16 | ], 17 | "devDependencies": { 18 | "del": "^2.0.2", 19 | "escape-html": "^1.0.3", 20 | "gh-pages": "^0.4.0", 21 | "gulp": "^3.9.0", 22 | "gulp-concat": "^2.6.0", 23 | "gulp-if": "^2.0.0", 24 | "gulp-minify-css": "^1.2.1", 25 | "gulp-rename": "^1.2.2", 26 | "gulp-replace": "^0.5.4", 27 | "gulp-uglify": "^1.4.2", 28 | "gulp-useref": "^1.3.0", 29 | "gulp-zip": "^3.0.2", 30 | "run-sequence": "^1.1.4" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /publishing-material/documentation-source-files/MANUAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Xivmap Documentation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /publishing-material/documentation-source-files/highlight.default.min.css: -------------------------------------------------------------------------------- 1 | .hljs{display:block;overflow-x:auto;padding:0.5em;background:#f0f0f0;-webkit-text-size-adjust:none}.hljs,.hljs-subst,.hljs-tag .hljs-title,.nginx .hljs-title{color:black}.hljs-string,.hljs-title,.hljs-constant,.hljs-parent,.hljs-tag .hljs-value,.hljs-rule .hljs-value,.hljs-preprocessor,.hljs-pragma,.hljs-name,.haml .hljs-symbol,.ruby .hljs-symbol,.ruby .hljs-symbol .hljs-string,.hljs-template_tag,.django .hljs-variable,.smalltalk .hljs-class,.hljs-addition,.hljs-flow,.hljs-stream,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.apache .hljs-cbracket,.tex .hljs-command,.tex .hljs-special,.erlang_repl .hljs-function_or_atom,.asciidoc .hljs-header,.markdown .hljs-header,.coffeescript .hljs-attribute,.tp .hljs-variable{color:#800}.smartquote,.hljs-comment,.hljs-annotation,.diff .hljs-header,.hljs-chunk,.asciidoc .hljs-blockquote,.markdown .hljs-blockquote{color:#888}.hljs-number,.hljs-date,.hljs-regexp,.hljs-literal,.hljs-hexcolor,.smalltalk .hljs-symbol,.smalltalk .hljs-char,.go .hljs-constant,.hljs-change,.lasso .hljs-variable,.makefile .hljs-variable,.asciidoc .hljs-bullet,.markdown .hljs-bullet,.asciidoc .hljs-link_url,.markdown .hljs-link_url{color:#080}.hljs-label,.ruby .hljs-string,.hljs-decorator,.hljs-filter .hljs-argument,.hljs-localvars,.hljs-array,.hljs-attr_selector,.hljs-important,.hljs-pseudo,.hljs-pi,.haml .hljs-bullet,.hljs-doctype,.hljs-deletion,.hljs-envvar,.hljs-shebang,.apache .hljs-sqbracket,.nginx .hljs-built_in,.tex .hljs-formula,.erlang_repl .hljs-reserved,.hljs-prompt,.asciidoc .hljs-link_label,.markdown .hljs-link_label,.vhdl .hljs-attribute,.clojure .hljs-attribute,.asciidoc .hljs-attribute,.lasso .hljs-attribute,.coffeescript .hljs-property,.hljs-phony{color:#88f}.hljs-keyword,.hljs-id,.hljs-title,.hljs-built_in,.css .hljs-tag,.hljs-doctag,.smalltalk .hljs-class,.hljs-winutils,.bash .hljs-variable,.pf .hljs-variable,.apache .hljs-tag,.hljs-type,.hljs-typename,.tex .hljs-command,.asciidoc .hljs-strong,.markdown .hljs-strong,.hljs-request,.hljs-status,.tp .hljs-data,.tp .hljs-io{font-weight:bold}.asciidoc .hljs-emphasis,.markdown .hljs-emphasis,.tp .hljs-units{font-style:italic}.nginx .hljs-built_in{font-weight:normal}.coffeescript .javascript,.javascript .xml,.lasso .markup,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:0.5} -------------------------------------------------------------------------------- /publishing-material/media-source-files/accurate-text-off-tr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media-source-files/accurate-text-off-tr.png -------------------------------------------------------------------------------- /publishing-material/media-source-files/accurate-text-on-tr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media-source-files/accurate-text-on-tr.png -------------------------------------------------------------------------------- /publishing-material/media-source-files/autohide-small.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media-source-files/autohide-small.mp4 -------------------------------------------------------------------------------- /publishing-material/media-source-files/dark-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media-source-files/dark-theme.png -------------------------------------------------------------------------------- /publishing-material/media-source-files/panels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Marketing stuff 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |

Minimap

17 |
18 | 19 |
20 |
21 |
22 | ▼ 23 |
24 |
25 | 26 |
27 |
28 |
29 |
30 |

Xivmap

31 | 32 |

flat, minimalistic minimap.

33 | 34 |
35 |
- accurate. uses text nodes instead of elements
36 |
- only when needed with autohide
37 |
- both jquery & vanilla
38 |
- easy to style css
39 |
40 | 41 |
42 | 43 | 44 |
45 | 46 |
47 |
48 |
49 | ▼ 50 |
51 |
52 | 53 |
54 |
55 |
56 | ▼ 57 |
58 |
59 | 60 |
61 |

accurate text mode shows the true position and size of text,
as opposed to the element's rectangle.

62 | 63 | 64 |
On
65 |
Off
66 |
67 | 68 |
69 |
70 |
71 | ▼ 72 |
73 |
74 | 75 |
76 |
77 |
78 | ▼ 79 |
80 |
81 | 82 |
83 | 84 |

with autohide enabled
Xivmap gets out of the way until it's needed.

85 |
86 | 87 |
88 |
89 |
90 | ▼ 91 |
92 |
93 | 94 |
95 |
96 |
97 | ▼ 98 |
99 |
100 | 101 |
102 | 103 |

104 | works with both light and dark themes.
105 | no configuration needed. 106 |

107 |
108 | 109 |
110 |
111 |
112 | ▼ 113 |
114 |
115 | 116 | 117 | -------------------------------------------------------------------------------- /publishing-material/media-source-files/random_grey_variations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media-source-files/random_grey_variations.png -------------------------------------------------------------------------------- /publishing-material/media-source-files/style.css: -------------------------------------------------------------------------------- 1 | /*font-family: 'Rancho', cursive; 2 | 3 | font-family: 'Caveat', cursive; 4 | 5 | font-family: 'Poiret One', cursive; 6 | 7 | font-family: 'Josefin Sans', sans-serif;*/ 8 | 9 | body{ 10 | text-align: center; 11 | padding-bottom: 200px; 12 | } 13 | 14 | body > div { 15 | margin-left: auto; 16 | margin-right: auto; 17 | overflow: hidden; 18 | /* border: 1px solid rgb(255, 1, 1); */ 19 | /* margin-top: 200px; */ 20 | /* border-bottom: 1px solid gray; */ 21 | } 22 | 23 | .image-preview { 24 | position: relative; 25 | width: 590px; 26 | height: 300px; 27 | font-family: 'Josefin Sans', sans-serif; 28 | color: #FFFFFF; 29 | text-shadow: 0px -1px 0px #303030; 30 | } 31 | 32 | .image-preview .left { 33 | width: 61%; 34 | position: absolute; 35 | margin-top: 14px; 36 | text-align: left; 37 | padding-left: 57px; 38 | transform: rotate(10deg); 39 | /* color: white; */ 40 | } 41 | 42 | .image-preview h1 { 43 | font-family: 'Caveat', cursive; 44 | font-size: 51px; 45 | /* transform: rotate(-14deg); */ 46 | } 47 | 48 | .image-preview h2 { 49 | 50 | font-size: 20px; 51 | 52 | margin-top: -33px; 53 | } 54 | 55 | .image-preview .bg1 { 56 | /* background-color: #424242; */ 57 | background-color: #63B2EF; 58 | position: absolute; 59 | height: 135%; 60 | width: 100%; 61 | top: -85px; 62 | z-index: -2; 63 | left: -280px; 64 | transform: rotate(10deg); 65 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 66 | } 67 | 68 | .image-preview .bg2 { 69 | background-color: #424242; 70 | position: absolute; 71 | background-image: url(random_grey_variations.png); 72 | height: 135%; 73 | width: 110%; 74 | top: 135px; 75 | /* color: white; */ 76 | border-radius: 6px; 77 | z-index: -2; 78 | left: -280px; 79 | transform: rotate(10deg); 80 | box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 81 | } 82 | 83 | .image-preview img { 84 | 85 | position: absolute; 86 | 87 | top: -110px; 88 | 89 | right: 15px; 90 | } 91 | 92 | .image-preview .list { 93 | 94 | /* background-color: #424242; */ 95 | 96 | color: #C7C7C7; 97 | 98 | margin-top: 37px; 99 | 100 | color: #F0F7FF; 101 | } 102 | 103 | .thumbnail { 104 | position: relative; 105 | width: 80px; 106 | height: 80px; 107 | } 108 | 109 | .thumbnail * { 110 | position: absolute; 111 | top: 0; 112 | left: 0; 113 | } 114 | 115 | .thumbnail h1 { 116 | padding: 30px; 117 | background-image: url(random_grey_variations.png); 118 | font-family: 'Josefin Sans', sans-serif; 119 | color: white; 120 | transform: rotate(9deg); 121 | font-size: 15px; 122 | top: 44px; 123 | left: -22px; 124 | padding-top: 2px; 125 | box-shadow: 0 0px 5px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23); 126 | } 127 | 128 | .thumbnail img { 129 | 130 | top: -142px; 131 | 132 | width: 60px; 133 | 134 | left: 18px; 135 | } 136 | 137 | .thumbnail i { 138 | 139 | color: #F16529; 140 | } 141 | 142 | .thumbnail .fa-html5 { 143 | 144 | left: 9px; 145 | 146 | top: 12px; 147 | 148 | font-size: 28px; 149 | 150 | text-shadow: 0px 1px 0px rgba(93, 93, 93, 0.29); 151 | } 152 | 153 | .thumbnail .fa-css3 { 154 | 155 | top: 21px; 156 | 157 | left: 10px; 158 | 159 | display: none; 160 | 161 | } 162 | 163 | .description { 164 | padding: 9px; 165 | background-image: url(random_grey_variations.png); 166 | font-family: 'Josefin Sans', sans-serif; 167 | color: white; 168 | font-size: 18px; 169 | box-shadow: 0 0px 5px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23); 170 | left: 0; 171 | text-align: left; 172 | padding-left: 90px; 173 | width: 100%; 174 | } 175 | 176 | .accurate-text { 177 | position: relative; 178 | width: 616px; 179 | height: 286px; 180 | font-family: 'Josefin Sans', sans-serif; 181 | } 182 | 183 | .accurate-text * { 184 | position: absolute; 185 | } 186 | 187 | .accurate-text .on { 188 | left: 150px; 189 | z-index: -1; 190 | } 191 | 192 | .accurate-text .off { 193 | right: 150px; 194 | z-index: -1; 195 | } 196 | 197 | .accurate-text .on-txt, 198 | .accurate-text .off-txt { 199 | font-family: 'Josefin Sans', sans-serif; 200 | background-color: #63B2EF; 201 | color: #EEEEEF; 202 | padding: 5px; 203 | border-radius: 3px; 204 | } 205 | 206 | .accurate-text .on-txt { 207 | 208 | top: 160px; 209 | 210 | left: 236px; 211 | } 212 | 213 | .accurate-text .off-txt { 214 | 215 | top: 160px; 216 | 217 | left: 463px; 218 | } 219 | 220 | /*.accurate-text .description { 221 | padding: 30px; 222 | background-image: url(random_grey_variations.png); 223 | font-family: 'Josefin Sans', sans-serif; 224 | color: white; 225 | font-size: 18px; 226 | box-shadow: 0 0px 5px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23); 227 | /!* border-radius: 10px; *!/ 228 | right: 0; 229 | margin-left: 104px; 230 | border-top-left-radius: 20px; 231 | background-color: #63B2EF; 232 | border-bottom-left-radius: 20px; 233 | }*/ 234 | 235 | .autohide { 236 | position: relative; 237 | width: 616px; 238 | height: 423px; 239 | font-family: 'Josefin Sans', sans-serif; 240 | } 241 | 242 | .autohide * { 243 | position: absolute; 244 | right: 0; 245 | } 246 | 247 | /*.autohide .description { 248 | padding: 9px; 249 | background-image: url(random_grey_variations.png); 250 | font-family: 'Josefin Sans', sans-serif; 251 | color: white; 252 | font-size: 18px; 253 | box-shadow: 0 0px 5px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23); 254 | text-align: left; 255 | padding-left: 90px; 256 | left: 0; 257 | }*/ 258 | 259 | .dark { 260 | position: relative; 261 | width: 616px; 262 | height: 423px; 263 | font-family: 'Josefin Sans', sans-serif; 264 | } 265 | 266 | .dark * { 267 | position: absolute; 268 | right: 0; 269 | } 270 | 271 | /*.dark .description { 272 | padding: 9px; 273 | background-image: url(random_grey_variations.png); 274 | font-family: 'Josefin Sans', sans-serif; 275 | color: white; 276 | font-size: 18px; 277 | box-shadow: 0 0px 5px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23); 278 | left: 0; 279 | text-align: left; 280 | padding-left: 90px; 281 | }*/ 282 | 283 | .spacer { 284 | width: 616px; 285 | height: 20px; 286 | border: 1px solid red; 287 | border-top: none; 288 | } 289 | 290 | .or-spacer { 291 | /* margin-top: 28px; */ 292 | margin-left: 8px; 293 | width: 600px; 294 | position:relative; 295 | } 296 | .or-spacer .mask { 297 | overflow:hidden; 298 | height:20px; 299 | } 300 | .or-spacer .mask:after { 301 | content:''; 302 | display:block; 303 | margin:-25px auto 0; 304 | width:100%; 305 | height:25px; 306 | border-radius: 165px / 12px; 307 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.64); 308 | } 309 | .or-spacer span { 310 | width:50px; 311 | height:50px; 312 | position:absolute; 313 | bottom:100%; 314 | margin-bottom:-25px; 315 | left:50%; 316 | margin-left:-25px; 317 | border-radius:100%; 318 | box-shadow:0 2px 4px #999; 319 | background:white; 320 | display: none; 321 | } 322 | .or-spacer span i { 323 | position:absolute; 324 | top:4px; 325 | bottom:4px; 326 | left:4px; 327 | right:4px; 328 | border-radius:100%; 329 | border:1px dashed #aaa; 330 | text-align:center; 331 | line-height:40px; 332 | font-style:normal; 333 | color:#999; 334 | } 335 | 336 | .spacer-up { 337 | transform: rotate(180deg); 338 | } -------------------------------------------------------------------------------- /publishing-material/media-source-files/xivmap1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media-source-files/xivmap1.png -------------------------------------------------------------------------------- /publishing-material/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/ss1.png -------------------------------------------------------------------------------- /publishing-material/media/ss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/ss2.png -------------------------------------------------------------------------------- /publishing-material/media/ss3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/ss3.png -------------------------------------------------------------------------------- /publishing-material/media/xivmap-accurate-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/xivmap-accurate-text.png -------------------------------------------------------------------------------- /publishing-material/media/xivmap-autohide.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/xivmap-autohide.gif -------------------------------------------------------------------------------- /publishing-material/media/xivmap-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/xivmap-demo.gif -------------------------------------------------------------------------------- /publishing-material/media/xivmap-demo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/xivmap-demo.mp4 -------------------------------------------------------------------------------- /publishing-material/media/xivmap-light-dark-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/xivmap-light-dark-theme.png -------------------------------------------------------------------------------- /publishing-material/media/xivmap-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/xivmap-preview.jpg -------------------------------------------------------------------------------- /publishing-material/media/xivmap-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mccxiv/xivmap/0274837d8699b82b34de8177e30fe16d3c4f7425/publishing-material/media/xivmap-thumbnail.png -------------------------------------------------------------------------------- /xivmap-docked.css: -------------------------------------------------------------------------------- 1 | /* 2 | DOCKED MODE ===================================================== 3 | 4 | Apply these classes and containers to have xivmap use the 5 | alternate style. The alternate style features a "docked" area 6 | on the side of the page dedicated exclusively to the minimap. 7 | */ 8 | 9 | /* Apply one of these classes on the body tag */ 10 | .xivmap-docked-left {margin-left: 110px;} 11 | .xivmap-docked-right {margin-right: 110px;} 12 | 13 | /* Apply this class to a div that wraps .xivmap */ 14 | .xivmap-docked-wrapper { 15 | top: 0; 16 | width: 110px; 17 | height: 100vh; 18 | position: fixed; 19 | background-color: #F0F0F0; 20 | } 21 | 22 | .xivmap-docked-left .xivmap-docked-wrapper {left: 0;} 23 | .xivmap-docked-right .xivmap-docked-wrapper {right: 0;} 24 | 25 | @media (max-width: 1400px) { 26 | .xivmap-docked-wrapper {width: 90px;} 27 | .xivmap-docked-left {margin-left: 90px;} 28 | .xivmap-docked-right {margin-right: 90px;} 29 | } 30 | 31 | @media (max-width: 1100px) { 32 | .xivmap-docked-wrapper {width: 70px;} 33 | .xivmap-docked-left {margin-left: 70px;} 34 | .xivmap-docked-right {margin-right: 70px;} 35 | } 36 | 37 | @media (max-width: 950px) { 38 | .xivmap-docked-wrapper {width: 45px;} 39 | .xivmap-docked-left {margin-left: 45px;} 40 | .xivmap-docked-right {margin-right: 45px;} 41 | } 42 | 43 | @media (max-width: 850px) { 44 | .xivmap-docked-wrapper {display: none;} 45 | .xivmap-docked-left {margin-left: unset;} 46 | .xivmap-docked-right {margin-right: unset;} 47 | } 48 | -------------------------------------------------------------------------------- /xivmap.css: -------------------------------------------------------------------------------- 1 | /* 2 | COLORS ========================================================== 3 | 4 | Xivmap creates absolutely positioned divs to represent DOM elements. 5 | 6 | These divs have a data-tag attribute that corresponds to the original 7 | element they represent. This allows for easy CSS styling. 8 | 9 | By default, the elements are grouped into 3 colors of different 10 | intensity, but feel free to modify and regroup them as necessary. 11 | 12 | The tags *must* be uppercase, as that's how they are returned 13 | by the DOM api. 14 | 15 | Tip: don't modify this file directly, rather overwrite the rules 16 | in your own CSS. This way you can download future updated versions of 17 | xivmap without having to re-edit the styles. 18 | */ 19 | 20 | /* These are the darkest, most prominent items on the minimap */ 21 | .xivmap [data-tag="A"], 22 | .xivmap [data-tag="H1"], 23 | .xivmap [data-tag="H2"], 24 | .xivmap [data-tag="H3"], 25 | .xivmap [data-tag="H4"], 26 | .xivmap [data-tag="H5"], 27 | .xivmap [data-tag="H6"], 28 | .xivmap [data-tag="INPUT"], 29 | .xivmap [data-tag="BUTTON"], 30 | .xivmap [data-tag="LABEL"] { 31 | background-color: #808080; 32 | } 33 | 34 | /* These items have medium darkness*/ 35 | .xivmap [data-tag="Q"], 36 | .xivmap [data-tag="IMG"], 37 | .xivmap [data-tag="MAP"], 38 | .xivmap [data-tag="OBJECT"], 39 | .xivmap [data-tag="AUDIO"], 40 | .xivmap [data-tag="VIDEO"], 41 | .xivmap [data-tag="IFRAME"], 42 | .xivmap [data-tag="CODE"], 43 | .xivmap [data-tag="TEXTAREA"], 44 | .xivmap [data-tag="BLOCKQUOTE"], 45 | .xivmap [data-tag="ADDRESS"] { 46 | background-color: #b9b9b9; 47 | } 48 | 49 | /* These items are the lightest */ 50 | 51 | /* NOTE: DIV are not included by default! Either pass in a custom 52 | array of selectors or pass in the element itself or add 53 | the .include-in-xivmap class to an element */ 54 | .xivmap [data-tag="DIV"], 55 | .xivmap [data-tag="LI"], 56 | .xivmap [data-tag="TR"], 57 | .xivmap [data-tag="P"], 58 | .xivmap [data-tag="PRE"] { 59 | background-color: #c7c7c7; 60 | } 61 | 62 | 63 | /* 64 | STRUCTURE ======================================================= 65 | 66 | The styles that follow deal with with structure and behavior. 67 | Modify with care. 68 | */ 69 | 70 | .xivmap { 71 | /* Default position and size */ 72 | top: 0; 73 | right: 0; 74 | width: 70px; 75 | margin: 20px; 76 | position: fixed; 77 | 78 | /* used by the autohide option */ 79 | transition: opacity 250ms ease-out; 80 | 81 | /* Prevent accidental text selection while dragging */ 82 | -moz-user-select: -moz-none; 83 | -webkit-user-select: none; 84 | -ms-user-select: none; 85 | user-select: none; 86 | 87 | /* Show the hand icon to indicate that the viewport can be dragged */ 88 | cursor: move; /* IE doesn't support grab, this is a suitable replacement */ 89 | cursor: -webkit-grab; 90 | cursor: -moz-grab; 91 | cursor: grab; 92 | } 93 | 94 | /* Used when autohide is enabled */ 95 | .xivmap.xivmap-hidden { 96 | opacity: 0; 97 | } 98 | 99 | /* Show the grabbing hand when holding down click */ 100 | .xivmap:active { 101 | cursor: move; /* IE doesn't support grabbing, this is a suitable replacement */ 102 | cursor: -webkit-grabbing; 103 | cursor: -moz-grabbing; 104 | cursor: grabbing; 105 | } 106 | 107 | /* This is the rectangle that indicates your position on the page 108 | Its height will be set via JavaScript, based on window height */ 109 | .xivmap .xivmap-viewport { 110 | margin-left: -10px; 111 | border-radius: 2px; 112 | width: calc(100% + 20px); 113 | transition: margin-top 150ms ease-out; 114 | background-color: rgba(0, 0, 0, 0.09); 115 | border: 1px solid rgba(255, 255, 255, .25); 116 | } 117 | 118 | /* Temporarily applied when calling .refresh() to prevent the viewport 119 | indicator from needlessly animating */ 120 | .xivmap.xivmap-no-transition .xivmap-viewport{ 121 | transition: none !important; 122 | } 123 | 124 | /* This makes the viewport box more visible on dark websites */ 125 | .xivmap .xivmap-viewport > div { 126 | width: 100%; 127 | height: 100%; 128 | border-radius: 2px; 129 | background-color: rgba(255, 255, 255, 0.1); 130 | } 131 | 132 | /* 133 | POSITIONING ===================================================== 134 | 135 | These classes are used to place the minimap in the correct corner or side. 136 | Modifying them should not be necessary: use margin instead of top/left/right/bottom. 137 | */ 138 | .xivmap.top-left { 139 | top: 0; 140 | left: 0; 141 | right: auto; 142 | } 143 | 144 | .xivmap.top-right { 145 | top: 0; 146 | right: 0; 147 | } 148 | 149 | .xivmap.bottom-right { 150 | right: 0; 151 | bottom: 0; 152 | top: auto; 153 | } 154 | 155 | .xivmap.bottom-left { 156 | left: 0; 157 | bottom: 0; 158 | top: auto; 159 | right: auto; 160 | } 161 | 162 | .xivmap.left, 163 | .xivmap.right { 164 | top: 0; 165 | bottom: 0; 166 | /* These margins are necessary for correct positioning, 167 | Do not overwrite them */ 168 | margin-top: auto !important; 169 | margin-bottom: auto !important; 170 | } 171 | 172 | .xivmap.left { 173 | left: 0; 174 | right: auto; 175 | } 176 | 177 | .xivmap.right { 178 | right: 0; 179 | } 180 | 181 | /* 182 | ANIMATIONS ====================================================== 183 | 184 | Xivmap comes with slide-in and fade-in animations 185 | Simply apply one of the two classes to the minimap element, 186 | the correct animation will run once the minimap is loaded. 187 | 188 | You may also apply your own animations, such as those from 189 | Animate.css found at https://daneden.github.io/animate.css/ 190 | 191 | Default animations available by adding one of these classes: 192 | .fade-in 193 | .slide-in 194 | */ 195 | @keyframes xivmap-fade-in { 196 | from {opacity: 0;} 197 | to {opacity: 1;} 198 | } 199 | 200 | 201 | @keyframes xivmap-fade-in-left { 202 | from { 203 | opacity: 0; 204 | -webkit-transform: translate3d(-100%, 0, 0); 205 | transform: translate3d(-100%, 0, 0); 206 | } 207 | to { 208 | opacity: 1; 209 | -webkit-transform: none; 210 | transform: none; 211 | } 212 | } 213 | 214 | @keyframes xivmap-fade-in-right { 215 | from { 216 | opacity: 0; 217 | -webkit-transform: translate3d(100%, 0, 0); 218 | transform: translate3d(100%, 0, 0); 219 | } 220 | to { 221 | opacity: 1; 222 | -webkit-transform: none; 223 | transform: none; 224 | } 225 | } 226 | 227 | .xivmap.fade-in { 228 | animation-delay: 500ms; 229 | animation-duration: 350ms; 230 | animation-fill-mode: backwards; 231 | animation-name: xivmap-fade-in; 232 | } 233 | 234 | .xivmap.slide-in.left, 235 | .xivmap.slide-in.top-left, 236 | .xivmap.slide-in.bottom-left { 237 | animation-delay: 500ms; 238 | animation-duration: 350ms; 239 | animation-fill-mode: backwards; 240 | animation-name: xivmap-fade-in-left; 241 | } 242 | 243 | .xivmap.slide-in.right, 244 | .xivmap.slide-in.top-right, 245 | .xivmap.slide-in.bottom-right { 246 | animation-delay: 500ms; 247 | animation-duration: 350ms; 248 | animation-fill-mode: backwards; 249 | animation-name: xivmap-fade-in-right; 250 | } 251 | 252 | /* 253 | UTILITY ========================================================= 254 | */ 255 | 256 | 257 | /* 258 | RESPONSIVE ====================================================== 259 | 260 | By default, smaller screens have a smaller minimaps, and tiny 261 | screens under 850px don't display a minimap at all. 262 | 263 | For more information see the "CSS width" and "CSS height" 264 | columns on this website http://mydevice.io/devices/ 265 | 266 | 850px minimum means that by default, Xivmap shows up on most tablets in 267 | landscape mode but not in portrait mode. It does not show up on any phone. 268 | */ 269 | @media (max-width: 1400px) { 270 | .xivmap {width: 50px;} 271 | } 272 | 273 | @media (max-width: 1100px) { 274 | .xivmap {width: 30px;} 275 | } 276 | 277 | @media (max-width: 950px) { 278 | .xivmap { 279 | width: 15px; 280 | margin: 10px; 281 | } 282 | 283 | .xivmap .xivmap-viewport { 284 | margin-left: -5px; 285 | width: calc(100% + 10px); 286 | } 287 | } 288 | 289 | @media (max-width: 850px) { 290 | .xivmap {display: none;} 291 | } -------------------------------------------------------------------------------- /xivmap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Creates a minimap by populating the `config.minimap` element with generated HTML. 3 | * Attaches event listeners to track viewport location and window resizing. 4 | * 5 | * @param {object} [config] 6 | * @param {string | HTMLElement} [config.minimap] Element that will hold the minimap DOM, '.xivmap' by default. 7 | * @param {string | string[]} [config.selectors] Selectors for elements that will appear in the minimap. 8 | * @param {string | HTMLElement} [config.context] Where to look for the selectors, defaults to document body. 9 | * @param {HTMLElement[] | NodeList} [config.elements] Elements that will appear in the minimap, in addition to selectors. 10 | * @param {boolean} [config.accurateText = true] Use text nodes instead of elements, makes text more detailed on the minimap. 11 | * @param {boolean} [config.accurateTextTags] Use text nodes for these types of tags, defaults to P and H1-H6. 12 | * @param {boolean} [config.renderNoOpacity = false] Whether to show elements with opacity: 0 13 | * @param {boolean} [config.autohide = false] Only shows the minimap when hovering or scrolling. 14 | * @param {boolean} [config.autohideDelay = 1500] Hide the minimap after this many milliseconds, when autohide is enabled. 15 | * @param {boolean} [config.roundingFn = Math.round] The rounding function used to calculate pixel positions. 16 | * @param {boolean} [config.refreshOnLoad = true] By default, xivmap will refresh itself upon hearing the window's load event, change to disable. 17 | * @returns {{refresh: function, destroy: function}} Methods to force a re-render and to clean up listeners. 18 | */ 19 | function xivmap(config) { 20 | 21 | // ======================================================= 22 | // Variables 23 | // ======================================================= 24 | 25 | // Prevent undefined errors if no argument is passed 26 | config = config || {}; 27 | 28 | // Prevent the render function from being called too often, 29 | // such as during window resize operations. 30 | var debouncedRender = debounce(render, 350); 31 | 32 | // Need a variable to keep track of timeouts when using autohide 33 | var autohideScrollTimer = null; 34 | 35 | // The main config object 36 | var o = { 37 | minimap: toEl(config.minimap) || document.querySelector('.xivmap'), 38 | selectors: config.selectors || xivmap.selectors(), 39 | context: toEl(config.context) || document.body, 40 | elements: toEl(config.elements) || [], 41 | accurateText: config.hasOwnProperty('accurateText')? config.accurateText : true, 42 | accurateTextTags: config.accurateTextTags || xivmap.accurateTextTags(), 43 | renderNoOpacity: config.hasOwnProperty('renderNoOpacity')? config.renderNoOpacity : false, 44 | autohide: config.hasOwnProperty('autohide')? config.autohide : false, 45 | autohideDelay: config.hasOwnProperty('autohideDelay')? config.autohideDelay : 1500, 46 | roundingFn: config.roundingFn || Math.round, 47 | refreshOnLoad: config.hasOwnProperty('refreshOnLoad')? config.refreshOnLoad : true 48 | }; 49 | 50 | 51 | // ======================================================= 52 | // Code execution 53 | // ======================================================= 54 | 55 | if (!o.minimap) throw Error('Xivmap could not find a suitable container, please add a div with the "xivmap" class'); 56 | 57 | render(); 58 | attachListeners(); 59 | if (o.refreshOnLoad) refreshOnPageLoad(); 60 | if (o.autohide) autohideOnLoad(); 61 | 62 | return { 63 | refresh: refresh, 64 | destroy: destroy 65 | }; 66 | 67 | 68 | // ======================================================= 69 | // Core functions 70 | // ======================================================= 71 | 72 | function render() { 73 | updateDom(); 74 | resizeViewport(); 75 | updateViewport(); 76 | } 77 | 78 | function refresh() { 79 | disableTransitions(); 80 | render(); 81 | 82 | // Using a timeout because otherwise the browser can condense these 83 | // statements into one operation (so adding and removing a class would 84 | // be the same as if it was never added in the first place). 85 | setTimeout(enableTransitions, 0); 86 | } 87 | 88 | function attachListeners() { 89 | window.addEventListener('scroll', updateViewport); 90 | window.addEventListener('resize', debouncedRender); 91 | o.minimap.addEventListener('mousedown', beginDragTracking); 92 | 93 | if (o.autohide) { 94 | window.addEventListener('scroll', showMomentarily); 95 | o.minimap.addEventListener('mousemove', showMomentarily); 96 | } 97 | } 98 | 99 | function detachListeners() { 100 | window.removeEventListener('scroll', updateViewport); 101 | window.removeEventListener('resize', debouncedRender); 102 | o.minimap.removeEventListener('mousedown', beginDragTracking); 103 | } 104 | 105 | /** 106 | * Puts together the representation of each element 107 | * into the minimap element. 108 | */ 109 | function updateDom() { 110 | var ratio = o.minimap.offsetWidth / document.body.offsetWidth; 111 | var elements = uniq(mergeElementLists(o.context.querySelectorAll(o.selectors), o.elements)); 112 | o.minimap.style.height = document.body.offsetHeight * ratio + 'px'; 113 | var viewport = '
'; 114 | var html = ''; 115 | for (var i = 0; i < elements.length; i++) { 116 | var el = elements[i]; 117 | // Exclude fixed elements and invisible elements from the minimap 118 | if (!isElementFixed(el) && isElementVisible(el, {opacity: o.renderNoOpacity})) { 119 | if (o.accurateText && contains(o.accurateTextTags, el.tagName)) { 120 | html += makeAccurateRectangle(el, ratio); 121 | } 122 | else html += makeRectangle(el, ratio); 123 | } 124 | } 125 | html += viewport; 126 | o.minimap.innerHTML = html; 127 | } 128 | 129 | /** 130 | * If the window's load event hasn't happened yet, then 131 | * refresh the minimap once it does. 132 | */ 133 | function refreshOnPageLoad() { 134 | if (document.readyState !== 'complete') { 135 | once(window, 'load', refresh); 136 | } 137 | } 138 | 139 | /** 140 | * When autohide is enabled, do not hide the minimap right away. 141 | * Give it a chance to play entry animations first. 142 | */ 143 | function autohideOnLoad() { 144 | setTimeout(function() { 145 | if (!autohideScrollTimer) o.minimap.classList.add('xivmap-hidden'); 146 | }, o.autohideDelay); 147 | } 148 | 149 | /** 150 | * Recalculates the size of the viewport indicator. 151 | * Should probably be used when resizing the window. 152 | */ 153 | function resizeViewport() { 154 | var ratio = o.minimap.offsetWidth / document.body.offsetWidth; 155 | var viewport = o.minimap.querySelector('.xivmap-viewport'); 156 | viewport.style.height = window.innerHeight * ratio + 'px'; 157 | } 158 | 159 | /** 160 | * Updates the position of the viewport indicator. 161 | * Should probably be used when scrolling. 162 | */ 163 | function updateViewport() { 164 | var topDistance = window.pageYOffset; 165 | var ratio = o.minimap.offsetWidth / document.body.offsetWidth; 166 | var viewport = o.minimap.querySelector('.xivmap-viewport'); 167 | viewport.style['margin-top'] = topDistance * ratio + 'px'; 168 | } 169 | 170 | /** 171 | * Show the minimap for a few moments, according to autohideDelay, and 172 | * then hide it. Used by various methods when autohide is enabled. 173 | */ 174 | function showMomentarily() { 175 | o.minimap.classList.remove('xivmap-hidden'); 176 | if (autohideScrollTimer) clearTimeout(autohideScrollTimer); 177 | autohideScrollTimer = setTimeout(function() { 178 | o.minimap.classList.add('xivmap-hidden'); 179 | }, o.autohideDelay); 180 | } 181 | 182 | /** 183 | * Takes care of updating the window scroll position as the 184 | * user drags along the minimap. 185 | * 186 | * @param {MouseEvent} e 187 | */ 188 | function beginDragTracking(e) { 189 | updateScrollPosition(e); 190 | o.minimap.addEventListener('mousemove', updateScrollPosition); 191 | once(window, 'mouseup', function() { 192 | o.minimap.removeEventListener('mousemove', updateScrollPosition); 193 | }); 194 | } 195 | 196 | /** 197 | * Scrolls the page or element according to the current 198 | * cursor location in the minimap. 199 | * 200 | * @param {MouseEvent} e 201 | */ 202 | function updateScrollPosition(e) { 203 | var ratio = o.minimap.offsetWidth / document.body.offsetWidth; 204 | var distance = mouseDistanceFromTopOfTarget(e); 205 | var viewport = o.minimap.querySelector('.xivmap-viewport'); 206 | var centeredDistance = distance - viewport.offsetHeight / 2; 207 | window.scrollTo(0, centeredDistance / ratio); 208 | } 209 | 210 | function disableTransitions() { 211 | o.minimap.classList.add('xivmap-no-transition'); 212 | } 213 | 214 | function enableTransitions() { 215 | o.minimap.classList.remove('xivmap-no-transition'); 216 | } 217 | 218 | /** 219 | * Clean up after itself 220 | */ 221 | function destroy() { 222 | detachListeners(); 223 | o.minimap.innerHTML = ''; 224 | } 225 | 226 | // ======================================================= 227 | // Helper functions 228 | // ======================================================= 229 | 230 | /** 231 | * Combines NodeList and Element arrays 232 | * 233 | * @param {... (HTMLElement[] | NodeList)} 234 | * @returns {HTMLElement[]} 235 | */ 236 | function mergeElementLists() { 237 | var elements = []; 238 | for (var i = 0; i < arguments.length; i++) { 239 | for (var j = 0; j < arguments[i].length; j++) { 240 | elements.push(arguments[i][j]); 241 | } 242 | } 243 | return elements; 244 | } 245 | 246 | /** 247 | * Returns a new array with duplicates removed 248 | * 249 | * @param {[]} a 250 | * @returns {[]} 251 | */ 252 | function uniq(a) { 253 | return a.filter(function(value, index, self) { 254 | return self.indexOf(value) === index; 255 | }); 256 | } 257 | 258 | /** 259 | * Returns an absolutely positioned representation of an element, 260 | * ready to be used by xivmap. 261 | * 262 | * @param {HTMLElement | ClientRect} element 263 | * @param {number} ratio Decimal ratio of viewport size to minimap size 264 | * @param {HTMLElement} [originalElement] In cases where a ClientRect is passed as first argument 265 | * @returns {string} The representation of the element, as an HTML string 266 | */ 267 | function makeRectangle(element, ratio, originalElement) { 268 | var rectangle = element instanceof HTMLElement? position(element) : element; 269 | if (!rectangle.width || !rectangle.height) return ''; 270 | var style = 'style="' + 271 | 'position: absolute; ' + 272 | 'top: ' + r(rectangle.top * ratio) + 'px; ' + 273 | 'left: ' + r(rectangle.left * ratio) + 'px; ' + 274 | 'width: ' + r(rectangle.width * ratio) + 'px; ' + 275 | 'height: ' + r(rectangle.height * ratio) + 'px;"'; 276 | var tag = 'data-tag="' + (element.tagName || originalElement.tagName) + '"'; 277 | return '
'; 278 | 279 | function r(number) { 280 | return o.roundingFn(number); 281 | } 282 | } 283 | 284 | /** 285 | * Wrapper for makeRectangle, but potentially using text nodes 286 | * 287 | * @param {HTMLElement} element 288 | * @param {number} ratio 289 | * @returns {string} 290 | */ 291 | function makeAccurateRectangle(element, ratio) { 292 | var html = ''; 293 | var range = document.createRange(); 294 | range.selectNodeContents(element); 295 | var rects = range.getClientRects(); 296 | if (rects.length) { 297 | for (var i = 0; i < rects.length; i++) { 298 | var rect = clientRectAbsolutePosition(rects[i]); 299 | html += makeRectangle(rect, ratio, element); 300 | } 301 | return html; 302 | } 303 | return makeRectangle(element, ratio); 304 | } 305 | 306 | /** 307 | * Returns true if item is in array 308 | * 309 | * @param {[]} array 310 | * @param item 311 | * @returns {boolean} 312 | */ 313 | function contains(array, item) { 314 | return array.indexOf(item) > -1; 315 | } 316 | 317 | /** 318 | * Converts a client rectangle to one with positions 319 | * calculated from the top of the document 320 | * 321 | * @param clientRect 322 | * @returns {{top: number, left: number, width: number, height: number}} 323 | */ 324 | function clientRectAbsolutePosition(clientRect) { 325 | return { 326 | top: clientRect.top + window.pageYOffset, 327 | left: clientRect.left + window.pageXOffset, 328 | width: clientRect.width, 329 | height: clientRect.height 330 | } 331 | } 332 | 333 | /** 334 | * Convert selector to element, if necessary 335 | * 336 | * @param {string | HTMLElement | string[] | HTMLElement[] | jQuery | NodeList} selector 337 | * @returns {HTMLElement | HTMLElement[]} 338 | */ 339 | function toEl(selector) { 340 | if (!selector || !selector.length) return singleToElement(selector); 341 | else return Array.prototype.map.call(selector, singleToElement); 342 | 343 | function singleToElement(sel) { 344 | if (typeof sel === 'string') return document.querySelector(sel); 345 | if (sel && sel.get === 'function') return sel.get(0); 346 | return sel; 347 | } 348 | } 349 | 350 | /** 351 | * Given a MouseEvent, returns the distance from the top of the clicked element 352 | * 353 | * @param {MouseEvent} e 354 | * @returns {number} 355 | */ 356 | function mouseDistanceFromTopOfTarget(e) { 357 | return e.pageY - position(e.currentTarget).top; 358 | } 359 | 360 | /** 361 | * Returns true if an element or any of its ancestors has its CSS 362 | * position set to fixed. 363 | * 364 | * @param {HTMLElement} element 365 | * @returns {boolean} 366 | */ 367 | function isElementFixed(element) { 368 | while (element) { 369 | var styles = getComputedStyle(element); 370 | if (styles.getPropertyValue('position') === 'fixed') return true; 371 | element = element.parentElement; 372 | } 373 | return false; 374 | } 375 | 376 | /** 377 | * Calculates if an element is visible or would be visible to humans 378 | * if they scrolled to it. 379 | * 380 | * @param {HTMLElement} element 381 | * @param {object} [exceptions] 382 | * @param {boolean} [exceptions.display = false] Return true for elements with or inside of display: none? 383 | * @param {boolean} [exceptions.visibility = false] Return true for elements with or inside of visibility: hidden? 384 | * @param {boolean} [exceptions.opacity = false] Return true for elements with or inside of opacity: 0? 385 | * @returns {boolean} 386 | */ 387 | function isElementVisible(element, exceptions) { 388 | exceptions = exceptions || {}; 389 | var currentElement = element; 390 | while(currentElement) { 391 | var styles = getComputedStyle(currentElement); 392 | if (styles.getPropertyValue('overflow') !== 'visible' && !isInside(element, currentElement)) return false; 393 | if (!exceptions.display && styles.getPropertyValue('display') === 'none') return false; 394 | if (!exceptions.visibility && styles.getPropertyValue('visibility') === 'hidden') return false; 395 | if (!exceptions.opacity && styles.getPropertyValue('opacity') === '0') return false; 396 | currentElement = currentElement.parentElement; 397 | } 398 | return true; 399 | } 400 | 401 | /** 402 | * Returns true if element's center point is inside the box 403 | * created by host's four corners. 404 | * 405 | * @param {HTMLElement} element 406 | * @param {HTMLElement} host 407 | * @returns {boolean} 408 | */ 409 | function isInside(element, host) { 410 | var elRect = element.getBoundingClientRect(); 411 | var hostRect = host.getBoundingClientRect(); 412 | 413 | var elCenter = {x: 0, y: 0}; 414 | elCenter.y = (elRect.bottom - elRect.top) / 2 + elRect.top; 415 | elCenter.x = (elRect.right - elRect.left) / 2 + elRect.left; 416 | 417 | return !!( 418 | hostRect.left <= elCenter.x 419 | && elCenter.x <= hostRect.right 420 | && hostRect.top <= elCenter.y 421 | && elCenter.y <= hostRect.bottom 422 | ); 423 | } 424 | 425 | /** 426 | * Get position relative to the root element 427 | * position(el) 428 | * 429 | * Get position relative to ancestor 430 | * position(el, ancestor) 431 | * 432 | * @param {HTMLElement} element 433 | * @param {HTMLElement} [ancestor] 434 | * @returns {{left: number, top: number, width: number, height: number}} 435 | */ 436 | function position(element, ancestor) { 437 | var pos = {left: 0, top: 0, width: 0, height: 0}; 438 | if (ancestor) { 439 | var thisPos = position(element); 440 | var ancestorPos = position(ancestor); 441 | pos.left = thisPos.left - ancestorPos.left; 442 | pos.top = thisPos.top - ancestorPos.top; 443 | pos.width = thisPos.width; 444 | pos.height = thisPos.height; 445 | } 446 | else { 447 | var rect = element.getBoundingClientRect(); 448 | pos.top = rect.top + window.pageYOffset; 449 | pos.left = rect.left + window.pageXOffset; 450 | pos.width = rect.width; 451 | pos.height = rect.height; 452 | } 453 | return pos; 454 | } 455 | 456 | /** 457 | * Debounce function taken from Underscore: 458 | * http://underscorejs.org/docs/underscore.html 459 | * 460 | * Modified _.now to Date.now 461 | */ 462 | function debounce(func, wait, immediate) { 463 | var timeout, args, context, timestamp, result; 464 | var later = function() { 465 | var last = Date.now() - timestamp; 466 | if (last < wait && last >= 0) timeout = setTimeout(later, wait - last); 467 | else { 468 | timeout = null; 469 | if (!immediate) { 470 | result = func.apply(context, args); 471 | if (!timeout) context = args = null; 472 | } 473 | } 474 | }; 475 | return function() { 476 | context = this; 477 | args = arguments; 478 | timestamp = Date.now(); 479 | var callNow = immediate && !timeout; 480 | if (!timeout) timeout = setTimeout(later, wait); 481 | if (callNow) { 482 | result = func.apply(context, args); 483 | context = args = null; 484 | } 485 | return result; 486 | }; 487 | } 488 | 489 | /** 490 | * Registers an event on 'node' and removes it once it fires 491 | * 492 | * @param {EventTarget | object} node 493 | * @param {string} type 494 | * @param {function} callback 495 | */ 496 | function once(node, type, callback) { 497 | node.addEventListener(type, handler); 498 | function handler() { 499 | node.removeEventListener(type, handler); 500 | callback.apply(this, arguments); 501 | } 502 | } 503 | } 504 | 505 | /** 506 | * Returns a list of the default selectors used to create the minimap in 507 | * cases where no selectors are provided via the configuration object. 508 | * 509 | * @returns {string[]} 510 | */ 511 | xivmap.selectors = function() { 512 | return [ 513 | 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'input', 'button', 'label', 514 | 'q', 'img', 'map', 'object', 'audio', 'video', 'iframe', 'textarea', 'code', 515 | 'li', 'tr', 'form', 'blockquote', 'address', 516 | 'p', 'pre', '.include-in-xivmap' 517 | ]; 518 | }; 519 | 520 | /** 521 | * Returns a list of tags for which to use text nodes instead of the 522 | * element. Using text nodes means more accurate boxes based on text length. 523 | * 524 | * @returns {string[]} 525 | */ 526 | xivmap.accurateTextTags = function() { 527 | return ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'TEXTAREA', 'CODE']; 528 | }; 529 | 530 | /** 531 | * If jQuery is available, add xivmap as a plugin 532 | */ 533 | if (typeof jQuery === 'function') { 534 | jQuery.fn.xivmap = function(config) { 535 | config = config || {}; 536 | config.minimap = config.minimap || this.get(0); 537 | return xivmap(config); 538 | }; 539 | 540 | jQuery.fn.xivmap.selectors = xivmap.selectors; 541 | jQuery.fn.xivmap.accurateTextTags = xivmap.accurateTextTags; 542 | } --------------------------------------------------------------------------------