├── .editorconfig ├── .gitignore ├── LICENSE ├── dist ├── spop.css ├── spop.js ├── spop.min.css ├── spop.min.js └── spop.scss ├── gulpfile.js ├── index.html ├── package.json ├── readme.md └── src ├── _normalize.scss ├── _prism.scss ├── _variables.scss ├── favicon.ico ├── index.jade ├── prism.js ├── scripts.js ├── scripts.min.js ├── styles.min.css └── styles.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.{css,scss,js,jade}] 13 | indent_size = 4 14 | 15 | [*.{md,jade}] 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.cache 3 | *.seed 4 | *.log 5 | *.csv 6 | *.dat 7 | *.out 8 | *.pid 9 | *.gz 10 | *.bak 11 | *.tmp 12 | 13 | pids 14 | logs 15 | results 16 | 17 | .sass-cache 18 | *.css.map 19 | 20 | npm-debug.log 21 | node_modules 22 | 23 | # Sublime Text 24 | *.sublime-workspace 25 | *.sublime-project 26 | sftp-config.json 27 | 28 | # Windows image file caches 29 | Thumbs.db 30 | ehthumbs.db 31 | 32 | # Folder config file 33 | Desktop.ini 34 | 35 | # Windows shortcuts 36 | *.lnk 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Sílvio Rosa 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 | 23 | -------------------------------------------------------------------------------- /dist/spop.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /*! 3 | * smallPop 0.1.2 | https://github.com/silvio-r/spop 4 | * Copyright (c) 2015 Sílvio Rosa @silvior_ 5 | * MIT license 6 | */ 7 | .spop-container { 8 | z-index: 2000; 9 | position: fixed; } 10 | .spop-container, 11 | .spop-container *, 12 | .spop-container *:after, 13 | .spop-container *:before { 14 | box-sizing: border-box; } 15 | 16 | .spop--top-left { 17 | top: 0; 18 | left: 0; } 19 | .spop--top-left .spop { 20 | -webkit-transform-origin: 0 0; 21 | -ms-transform-origin: 0 0; 22 | transform-origin: 0 0; } 23 | 24 | .spop--top-center { 25 | top: 0; 26 | left: 50%; 27 | -webkit-transform: translateX(-50%); 28 | -ms-transform: translateX(-50%); 29 | transform: translateX(-50%); } 30 | .spop--top-center .spop { 31 | -webkit-transform-origin: 50% 0; 32 | -ms-transform-origin: 50% 0; 33 | transform-origin: 50% 0; } 34 | 35 | .spop--top-right { 36 | top: 0; 37 | right: 0; } 38 | .spop--top-right .spop { 39 | -webkit-transform-origin: 100% 0; 40 | -ms-transform-origin: 100% 0; 41 | transform-origin: 100% 0; } 42 | 43 | .spop--center { 44 | top: 50%; 45 | left: 50%; 46 | -webkit-transform: translate3d(-50%, -50%, 0); 47 | transform: translate3d(-50%, -50%, 0); } 48 | .spop--center .spop { 49 | -webkit-transform-origin: 50% 0; 50 | -ms-transform-origin: 50% 0; 51 | transform-origin: 50% 0; } 52 | 53 | .spop--bottom-left { 54 | bottom: 0; 55 | left: 0; } 56 | .spop--bottom-left .spop { 57 | -webkit-transform-origin: 0 100%; 58 | -ms-transform-origin: 0 100%; 59 | transform-origin: 0 100%; } 60 | 61 | .spop--bottom-center { 62 | bottom: 0; 63 | left: 50%; 64 | -webkit-transform: translateX(-50%); 65 | -ms-transform: translateX(-50%); 66 | transform: translateX(-50%); } 67 | .spop--bottom-center .spop { 68 | -webkit-transform-origin: 50% 100%; 69 | -ms-transform-origin: 50% 100%; 70 | transform-origin: 50% 100%; } 71 | 72 | .spop--bottom-right { 73 | bottom: 0; 74 | right: 0; } 75 | .spop--bottom-right .spop { 76 | -webkit-transform-origin: 100% 100%; 77 | -ms-transform-origin: 100% 100%; 78 | transform-origin: 100% 100%; } 79 | 80 | @media screen and (max-width: 30em) { 81 | .spop--top-left, 82 | .spop--top-center, 83 | .spop--top-right, 84 | .spop--bottom-left, 85 | .spop--bottom-center, 86 | .spop--bottom-right { 87 | top: auto; 88 | bottom: 0; 89 | left: 0; 90 | right: 0; 91 | margin-left: 0; 92 | -webkit-transform: translateX(0); 93 | -ms-transform: translateX(0); 94 | transform: translateX(0); } 95 | .spop--top-left .spop, 96 | .spop--top-center .spop, 97 | .spop--top-right .spop, 98 | .spop--bottom-left .spop, 99 | .spop--bottom-center .spop, 100 | .spop--bottom-right .spop { 101 | -webkit-transform-origin: 50% 100%; 102 | -ms-transform-origin: 50% 100%; 103 | transform-origin: 50% 100%; } 104 | .spop { 105 | border-bottom: 1px solid rgba(0, 0, 0, 0.15); } } 106 | 107 | .spop { 108 | position: relative; 109 | min-height: 56px; 110 | line-height: 1.25; 111 | font-size: 14px; 112 | -webkit-transform: translateZ(0); 113 | transform: translateZ(0); } 114 | @media screen and (min-width: 30em) { 115 | .spop { 116 | border-radius: 2px; 117 | width: 320px; 118 | margin: 0.7em; } } 119 | 120 | .spop--info, 121 | .spop--error, 122 | .spop--warning, 123 | .spop--success { 124 | color: #fff; 125 | background-color: #454A56; } 126 | 127 | @-webkit-keyframes spopIn { 128 | 0% { 129 | -webkit-transform: scale(0.2, 0.2); 130 | transform: scale(0.2, 0.2); } 131 | 95% { 132 | -webkit-transform: scale(1.1, 1.1); 133 | transform: scale(1.1, 1.1); } 134 | 100% { 135 | -webkit-transform: scale(1, 1); 136 | transform: scale(1, 1); } } 137 | 138 | @keyframes spopIn { 139 | 0% { 140 | -webkit-transform: scale(0.2, 0.2); 141 | transform: scale(0.2, 0.2); } 142 | 95% { 143 | -webkit-transform: scale(1.1, 1.1); 144 | transform: scale(1.1, 1.1); } 145 | 100% { 146 | -webkit-transform: scale(1, 1); 147 | transform: scale(1, 1); } } 148 | 149 | @-webkit-keyframes spopOut { 150 | 0% { 151 | opacity: 1; 152 | -webkit-transform: scale(1, 1); 153 | transform: scale(1, 1); } 154 | 20% { 155 | -webkit-transform: scale(1.1, 1.1); 156 | transform: scale(1.1, 1.1); } 157 | 100% { 158 | opacity: 0; 159 | -webkit-transform: scale(0, 0); 160 | transform: scale(0, 0); } } 161 | 162 | @keyframes spopOut { 163 | 0% { 164 | opacity: 1; 165 | -webkit-transform: scale(1, 1); 166 | transform: scale(1, 1); } 167 | 20% { 168 | -webkit-transform: scale(1.1, 1.1); 169 | transform: scale(1.1, 1.1); } 170 | 100% { 171 | opacity: 0; 172 | -webkit-transform: scale(0, 0); 173 | transform: scale(0, 0); } } 174 | 175 | .spop--out { 176 | -webkit-animation: spopOut 0.4s ease-in-out; 177 | animation: spopOut 0.4s ease-in-out; } 178 | 179 | .spop--in { 180 | -webkit-animation: spopIn 0.4s ease-in-out; 181 | animation: spopIn 0.4s ease-in-out; } 182 | 183 | .spop-body { 184 | padding: 1.4em; } 185 | .spop-body p { 186 | margin: 0; } 187 | .spop-body a { 188 | color: #fff; 189 | text-decoration: underline; } 190 | .spop-body a:hover { 191 | color: rgba(255, 255, 255, 0.8); 192 | text-decoration: none; } 193 | 194 | .spop-title { 195 | margin-top: 0; 196 | margin-bottom: 0.25em; 197 | color: #fff; } 198 | 199 | .spop-close { 200 | position: absolute; 201 | right: 0; 202 | top: 0; 203 | height: 32px; 204 | width: 32px; 205 | padding-top: 7px; 206 | padding-right: 7px; 207 | font-size: 22px; 208 | font-weight: bold; 209 | text-align: right; 210 | line-height: 0.6; 211 | color: #fff; 212 | opacity: 0.5; } 213 | .spop-close:hover { 214 | opacity: 0.7; 215 | cursor: pointer; } 216 | 217 | .spop-icon { 218 | position: absolute; 219 | top: 13px; 220 | left: 16px; 221 | width: 30px; 222 | height: 30px; 223 | border-radius: 50%; 224 | -webkit-animation: spopIn 0.4s 0.4s ease-in-out; 225 | animation: spopIn 0.4s 0.4s ease-in-out; } 226 | .spop-icon:after, 227 | .spop-icon:before { 228 | content: ""; 229 | position: absolute; 230 | display: block; } 231 | .spop-icon + .spop-body { 232 | padding-left: 4.2em; } 233 | 234 | .spop-icon--error, 235 | .spop-icon--info { 236 | border: 2px solid #3a95ed; } 237 | .spop-icon--error:before, 238 | .spop-icon--info:before { 239 | top: 5px; 240 | left: 11px; 241 | width: 4px; 242 | height: 4px; 243 | background-color: #3a95ed; } 244 | .spop-icon--error:after, 245 | .spop-icon--info:after { 246 | top: 12px; 247 | left: 11px; 248 | width: 4px; 249 | height: 9px; 250 | background-color: #3a95ed; } 251 | 252 | .spop-icon--error { 253 | border-color: #ff5656; } 254 | .spop-icon--error:before { 255 | top: 16px; 256 | background-color: #ff5656; } 257 | .spop-icon--error:after { 258 | top: 5px; 259 | background-color: #ff5656; } 260 | 261 | .spop-icon--success { 262 | border: 2px solid #2ecc54; } 263 | .spop-icon--success:before { 264 | top: 7px; 265 | left: 7px; 266 | width: 13px; 267 | height: 8px; 268 | border-bottom: 3px solid #2ecc54; 269 | border-left: 3px solid #2ecc54; 270 | -webkit-transform: rotate(-45deg); 271 | -ms-transform: rotate(-45deg); 272 | transform: rotate(-45deg); } 273 | 274 | .spop-icon--warning { 275 | border: 2px solid #fcd000; } 276 | .spop-icon--warning:before { 277 | top: 7px; 278 | left: 7px; 279 | width: 0; 280 | height: 0; 281 | border-style: solid; 282 | border-color: transparent transparent #fcd000 transparent; 283 | border-width: 0 6px 10px 6px; } 284 | -------------------------------------------------------------------------------- /dist/spop.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * smallPop 0.1.2 | https://github.com/silvio-r/spop 3 | * Copyright (c) 2015 Sílvio Rosa @silvior_ 4 | * MIT license 5 | */ 6 | 7 | ;(function() { 8 | 'use strict'; 9 | 10 | var animationTime = 390; 11 | var options, defaults, container, icon, layout, popStyle, positions, close; 12 | 13 | var SmallPop = function(template, style) { 14 | 15 | this.defaults = { 16 | template : null, 17 | style : 'info', 18 | autoclose : false, 19 | position : 'top-right', 20 | icon : true, 21 | group : false, 22 | onOpen : false, 23 | onClose : false 24 | }; 25 | 26 | defaults = extend(this.defaults, spop.defaults); 27 | 28 | if ( typeof template === 'string' || typeof style === 'string' ) { 29 | options = { template: template, style: style || defaults.style}; 30 | } 31 | else if (typeof template === 'object') { 32 | options = template; 33 | } 34 | else { 35 | console.error('Invalid arguments.'); 36 | return false; 37 | } 38 | 39 | this.opt = extend( defaults, options); 40 | 41 | if ($('spop--' + this.opt.group)) { 42 | 43 | this.remove($('spop--' + this.opt.group)); 44 | } 45 | 46 | this.open(); 47 | }; 48 | 49 | SmallPop.prototype.create = function(template) { 50 | 51 | container = $(this.getPosition('spop--', this.opt.position)); 52 | 53 | icon = (!this.opt.icon) ? '' : ''; 55 | 56 | layout ='
×
' + 57 | icon + 58 | '
' + 59 | template + 60 | '
'; 61 | 62 | if (!container) { 63 | 64 | this.popContainer = document.createElement('div'); 65 | 66 | this.popContainer.setAttribute('class', 'spop-container ' + 67 | this.getPosition('spop--', this.opt.position)); 68 | 69 | this.popContainer.setAttribute('id', this.getPosition('spop--', this.opt.position)); 70 | 71 | document.body.appendChild(this.popContainer); 72 | 73 | container = $(this.getPosition('spop--', this.opt.position)); 74 | } 75 | 76 | this.pop = document.createElement('div'); 77 | 78 | this.pop.setAttribute('class', 'spop spop--out spop--in ' + this.getStyle('spop--', this.opt.style) ); 79 | 80 | if (this.opt.group && typeof this.opt.group === 'string') { 81 | this.pop.setAttribute('id', 'spop--' + this.opt.group); 82 | } 83 | 84 | 85 | this.pop.setAttribute('role', 'alert'); 86 | 87 | this.pop.innerHTML = layout; 88 | 89 | container.appendChild(this.pop); 90 | }; 91 | 92 | SmallPop.prototype.getStyle = function(sufix, arg) { 93 | 94 | popStyle = { 95 | 'success': 'success', 96 | 'error' : 'error', 97 | 'warning': 'warning' 98 | }; 99 | return sufix + (popStyle[arg] || 'info'); 100 | }; 101 | 102 | SmallPop.prototype.getPosition = function(sufix, position) { 103 | 104 | positions = { 105 | 'top-left' : 'top-left', 106 | 'top-center' : 'top-center', 107 | 'top-right' : 'top-right', 108 | 'bottom-left' : 'bottom-left', 109 | 'bottom-center': 'bottom-center', 110 | 'bottom-right' : 'bottom-right' 111 | }; 112 | return sufix + (positions[position] || 'top-right'); 113 | }; 114 | 115 | SmallPop.prototype.open = function() { 116 | 117 | this.create(this.opt.template); 118 | 119 | if (this.opt.onOpen) { this.opt.onOpen();} 120 | 121 | this.close(); 122 | }; 123 | 124 | SmallPop.prototype.close = function () { 125 | 126 | if (this.opt.autoclose && typeof this.opt.autoclose === 'number') { 127 | 128 | this.autocloseTimer = setTimeout( this.remove.bind(this, this.pop), this.opt.autoclose); 129 | } 130 | 131 | this.pop.addEventListener('click', this.addListeners.bind(this) , false); 132 | }; 133 | 134 | SmallPop.prototype.addListeners = function(event) { 135 | 136 | close = event.target.getAttribute('data-spop'); 137 | 138 | if (close === 'close') { 139 | 140 | if (this.autocloseTimer) { clearTimeout(this.autocloseTimer);} 141 | 142 | this.remove(this.pop); 143 | } 144 | }; 145 | 146 | SmallPop.prototype.remove = function(elm) { 147 | 148 | if (this.opt.onClose) { this.opt.onClose();} 149 | 150 | removeClass(elm, 'spop--in'); 151 | 152 | setTimeout( function () { 153 | 154 | if(document.body.contains(elm)) { 155 | elm.parentNode.removeChild(elm); 156 | } 157 | 158 | }, animationTime); 159 | }; 160 | 161 | 162 | // Helpers 163 | 164 | function $(el, con) { 165 | return typeof el === 'string'? (con || document).getElementById(el) : el || null; 166 | } 167 | 168 | function removeClass(el, className) { 169 | if (el.classList) { 170 | el.classList.remove(className); 171 | } 172 | else { 173 | el.className = el.className.replace(new RegExp('(^|\\b)' + 174 | className.split(' ').join('|') + 175 | '(\\b|$)', 'gi'), ' '); 176 | } 177 | } 178 | 179 | function extend(obj, src) { 180 | 181 | for (var key in src) { 182 | if (src.hasOwnProperty(key)) obj[key] = src[key]; 183 | } 184 | 185 | return obj; 186 | } 187 | 188 | window.spop = function (template, style) { 189 | if ( !template || !window.addEventListener ) { return false;} 190 | 191 | return new SmallPop(template, style); 192 | }; 193 | 194 | spop.defaults = {}; 195 | }()); 196 | -------------------------------------------------------------------------------- /dist/spop.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * smallPop 0.1.2 | https://github.com/silvio-r/spop 3 | * Copyright (c) 2015 Sílvio Rosa @silvior_ 4 | * MIT license 5 | */.spop-container{z-index:2000;position:fixed}.spop-container,.spop-container *,.spop-container :after,.spop-container :before{box-sizing:border-box}.spop--top-left{top:0;left:0}.spop--top-left .spop{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.spop--top-center{top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.spop--top-center .spop{-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}.spop--top-right{top:0;right:0}.spop--top-right .spop{-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.spop--center{top:50%;left:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.spop--center .spop{-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0}.spop--bottom-left{bottom:0;left:0}.spop--bottom-left .spop{-webkit-transform-origin:0 100%;-ms-transform-origin:0 100%;transform-origin:0 100%}.spop--bottom-center{bottom:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.spop--bottom-center .spop{-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}.spop--bottom-right{bottom:0;right:0}.spop--bottom-right .spop{-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}@media screen and (max-width:30em){.spop--bottom-center,.spop--bottom-left,.spop--bottom-right,.spop--top-center,.spop--top-left,.spop--top-right{top:auto;bottom:0;left:0;right:0;margin-left:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.spop--bottom-center .spop,.spop--bottom-left .spop,.spop--bottom-right .spop,.spop--top-center .spop,.spop--top-left .spop,.spop--top-right .spop{-webkit-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%}.spop{border-bottom:1px solid rgba(0,0,0,.15)}}.spop{position:relative;min-height:56px;line-height:1.25;font-size:14px;-webkit-transform:translateZ(0);transform:translateZ(0)}@media screen and (min-width:30em){.spop{border-radius:2px;width:320px;margin:.7em}}.spop--error,.spop--info,.spop--success,.spop--warning{color:#fff;background-color:#454A56}@-webkit-keyframes spopIn{0%{-webkit-transform:scale(.2,.2);transform:scale(.2,.2)}95%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}100%{-webkit-transform:scale(1,1);transform:scale(1,1)}}@keyframes spopIn{0%{-webkit-transform:scale(.2,.2);transform:scale(.2,.2)}95%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}100%{-webkit-transform:scale(1,1);transform:scale(1,1)}}@-webkit-keyframes spopOut{0%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}20%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}100%{opacity:0;-webkit-transform:scale(0,0);transform:scale(0,0)}}@keyframes spopOut{0%{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1)}20%{-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1)}100%{opacity:0;-webkit-transform:scale(0,0);transform:scale(0,0)}}.spop--out{-webkit-animation:spopOut .4s ease-in-out;animation:spopOut .4s ease-in-out}.spop--in{-webkit-animation:spopIn .4s ease-in-out;animation:spopIn .4s ease-in-out}.spop-body{padding:1.4em}.spop-body p{margin:0}.spop-body a{color:#fff;text-decoration:underline}.spop-body a:hover{color:rgba(255,255,255,.8);text-decoration:none}.spop-title{margin-top:0;margin-bottom:.25em;color:#fff}.spop-close{position:absolute;right:0;top:0;height:32px;width:32px;padding-top:7px;padding-right:7px;font-size:22px;font-weight:700;text-align:right;line-height:.6;color:#fff;opacity:.5}.spop-close:hover{opacity:.7;cursor:pointer}.spop-icon{position:absolute;top:13px;left:16px;width:30px;height:30px;border-radius:50%;-webkit-animation:spopIn .4s .4s ease-in-out;animation:spopIn .4s .4s ease-in-out}.spop-icon:after,.spop-icon:before{content:"";position:absolute;display:block}.spop-icon+.spop-body{padding-left:4.2em}.spop-icon--error,.spop-icon--info{border:2px solid #3a95ed}.spop-icon--error:before,.spop-icon--info:before{top:5px;left:11px;width:4px;height:4px;background-color:#3a95ed}.spop-icon--error:after,.spop-icon--info:after{top:12px;left:11px;width:4px;height:9px;background-color:#3a95ed}.spop-icon--error{border-color:#ff5656}.spop-icon--error:before{top:16px;background-color:#ff5656}.spop-icon--error:after{top:5px;background-color:#ff5656}.spop-icon--success{border:2px solid #2ecc54}.spop-icon--success:before{top:7px;left:7px;width:13px;height:8px;border-bottom:3px solid #2ecc54;border-left:3px solid #2ecc54;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.spop-icon--warning{border:2px solid #fcd000}.spop-icon--warning:before{top:7px;left:7px;width:0;height:0;border-style:solid;border-color:transparent transparent #fcd000;border-width:0 6px 10px} -------------------------------------------------------------------------------- /dist/spop.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * smallPop 0.1.2 | https://github.com/silvio-r/spop 3 | * Copyright (c) 2015 Sílvio Rosa @silvior_ 4 | * MIT license 5 | */ 6 | !function(){"use strict";function t(t,o){return"string"==typeof t?(o||document).getElementById(t):t||null}function o(t,o){t.classList?t.classList.remove(o):t.className=t.className.replace(new RegExp("(^|\\b)"+o.split(" ").join("|")+"(\\b|$)","gi")," ")}function e(t,o){for(var e in o)o.hasOwnProperty(e)&&(t[e]=o[e]);return t}var s,i,p,n,r,c,l,h,a=390,u=function(o,p){if(this.defaults={template:null,style:"info",autoclose:!1,position:"top-right",icon:!0,group:!1,onOpen:!1,onClose:!1},i=e(this.defaults,spop.defaults),"string"==typeof o||"string"==typeof p)s={template:o,style:p||i.style};else{if("object"!=typeof o)return console.error("Invalid arguments."),!1;s=o}this.opt=e(i,s),t("spop--"+this.opt.group)&&this.remove(t("spop--"+this.opt.group)),this.open()};u.prototype.create=function(o){p=t(this.getPosition("spop--",this.opt.position)),n=this.opt.icon?'':"",r='
×
'+n+'
'+o+"
",p||(this.popContainer=document.createElement("div"),this.popContainer.setAttribute("class","spop-container "+this.getPosition("spop--",this.opt.position)),this.popContainer.setAttribute("id",this.getPosition("spop--",this.opt.position)),document.body.appendChild(this.popContainer),p=t(this.getPosition("spop--",this.opt.position))),this.pop=document.createElement("div"),this.pop.setAttribute("class","spop spop--out spop--in "+this.getStyle("spop--",this.opt.style)),this.opt.group&&"string"==typeof this.opt.group&&this.pop.setAttribute("id","spop--"+this.opt.group),this.pop.setAttribute("role","alert"),this.pop.innerHTML=r,p.appendChild(this.pop)},u.prototype.getStyle=function(t,o){return c={success:"success",error:"error",warning:"warning"},t+(c[o]||"info")},u.prototype.getPosition=function(t,o){return l={"top-left":"top-left","top-center":"top-center","top-right":"top-right","bottom-left":"bottom-left","bottom-center":"bottom-center","bottom-right":"bottom-right"},t+(l[o]||"top-right")},u.prototype.open=function(){this.create(this.opt.template),this.opt.onOpen&&this.opt.onOpen(),this.close()},u.prototype.close=function(){this.opt.autoclose&&"number"==typeof this.opt.autoclose&&(this.autocloseTimer=setTimeout(this.remove.bind(this,this.pop),this.opt.autoclose)),this.pop.addEventListener("click",this.addListeners.bind(this),!1)},u.prototype.addListeners=function(t){h=t.target.getAttribute("data-spop"),"close"===h&&(this.autocloseTimer&&clearTimeout(this.autocloseTimer),this.remove(this.pop))},u.prototype.remove=function(t){this.opt.onClose&&this.opt.onClose(),o(t,"spop--in"),setTimeout(function(){document.body.contains(t)&&t.parentNode.removeChild(t)},a)},window.spop=function(t,o){return t&&window.addEventListener?new u(t,o):!1},spop.defaults={}}(); -------------------------------------------------------------------------------- /dist/spop.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * smallPop 0.1.2 | https://github.com/silvio-r/spop 3 | * Copyright (c) 2015 Sílvio Rosa @silvior_ 4 | * MIT license 5 | */ 6 | 7 | $spop-bg-color: #454A56 !default; 8 | $spop-color: #fff !default; 9 | 10 | $spop-info-bg: $spop-bg-color !default; 11 | $spop-info-color: #3a95ed !default; 12 | 13 | $spop-error-bg: $spop-bg-color !default; 14 | $spop-error-color: #ff5656 !default; 15 | 16 | $spop-success-bg: $spop-bg-color !default; 17 | $spop-success-color: #2ecc54 !default; 18 | 19 | $spop-warning-bg: $spop-bg-color !default; 20 | $spop-warning-color: #fcd000 !default; 21 | 22 | $spop-title-color: #fff !default; 23 | $spop-link-color: $spop-title-color !default; 24 | 25 | $spop-width: 320px !default; 26 | $spop-font-size-base: 14px; 27 | $spop-space: 0.7em !default; 28 | 29 | $spop-animation-duration: 0.4s !default; 30 | 31 | $use-box-shadow: false !default; 32 | $box-shadow: 0 0 6px 2px rgba( #000, 0.25) !default; 33 | 34 | $use-border-radius: true !default; 35 | $border-radius: 2px !default; 36 | 37 | $use-icon: true; 38 | 39 | .spop-container { 40 | z-index: 2000; 41 | position: fixed; 42 | 43 | &, 44 | *, 45 | *:after, 46 | *:before { box-sizing: border-box;} 47 | } 48 | 49 | .spop--top-left { 50 | top: 0; 51 | left: 0; 52 | .spop { transform-origin: 0 0;} 53 | } 54 | .spop--top-center { 55 | top: 0; 56 | left: 50%; 57 | transform: translateX(-50%); 58 | .spop { transform-origin: 50% 0;} 59 | } 60 | .spop--top-right { 61 | top: 0; 62 | right: 0; 63 | .spop { transform-origin: 100% 0;} 64 | } 65 | 66 | 67 | .spop--center { 68 | top: 50%; 69 | left: 50%; 70 | transform: translate3d(-50%, -50%, 0); 71 | .spop { transform-origin: 50% 0;} 72 | } 73 | 74 | 75 | .spop--bottom-left { 76 | bottom: 0; 77 | left: 0; 78 | .spop {transform-origin: 0 100%;} 79 | } 80 | .spop--bottom-center { 81 | bottom: 0; 82 | left: 50%; 83 | transform: translateX(-50%); 84 | .spop { transform-origin: 50% 100%;} 85 | } 86 | .spop--bottom-right { 87 | bottom: 0; 88 | right: 0; 89 | .spop { transform-origin: 100% 100%;} 90 | } 91 | 92 | 93 | @media screen and (max-width:30em) { 94 | .spop--top-left, 95 | .spop--top-center, 96 | .spop--top-right, 97 | .spop--bottom-left, 98 | .spop--bottom-center, 99 | .spop--bottom-right { 100 | top: auto; 101 | bottom: 0; 102 | left: 0; 103 | right: 0; 104 | margin-left: 0; 105 | transform: translateX(0); 106 | .spop { transform-origin: 50% 100%;} 107 | } 108 | 109 | .spop { border-bottom: 1px solid rgba(#000,0.15);} 110 | } 111 | 112 | .spop { 113 | position: relative; 114 | min-height: 56px; 115 | line-height: 1.25; 116 | font-size: $spop-font-size-base; 117 | transform: translateZ(0); 118 | 119 | 120 | @if $use-box-shadow == true { 121 | box-shadow: $box-shadow; 122 | } 123 | 124 | @media screen and (min-width:30em) { 125 | @if $use-border-radius == true { 126 | border-radius: $border-radius; 127 | } 128 | 129 | width: $spop-width; 130 | margin: $spop-space; 131 | } 132 | } 133 | 134 | .spop--info, 135 | .spop--error, 136 | .spop--warning, 137 | .spop--success { color: $spop-color; background-color: $spop-bg-color;} 138 | 139 | @keyframes spopIn { 140 | 0% { transform: scale(0.2,0.2);} 141 | 95% { transform: scale(1.1,1.1);} 142 | 100% { transform: scale(1,1);} 143 | } 144 | @keyframes spopOut { 145 | 0% { opacity: 1; transform: scale(1,1);} 146 | 20% { transform: scale(1.1,1.1);} 147 | 100% { opacity: 0; transform: scale(0,0);} 148 | } 149 | 150 | .spop--out { 151 | animation: spopOut $spop-animation-duration ease-in-out; 152 | } 153 | 154 | .spop--in { 155 | animation: spopIn $spop-animation-duration ease-in-out; 156 | } 157 | 158 | .spop-body { 159 | padding: ($spop-space * 2); 160 | p { margin: 0;} 161 | 162 | a { 163 | color: $spop-link-color; 164 | text-decoration: underline; 165 | 166 | &:hover { 167 | color: rgba($spop-link-color, 0.8); 168 | text-decoration: none; 169 | } 170 | } 171 | } 172 | 173 | .spop-title { 174 | margin-top: 0; 175 | margin-bottom: 0.25em; 176 | color: $spop-title-color; 177 | } 178 | 179 | .spop-close { 180 | position: absolute; 181 | right: 0; 182 | top: 0; 183 | height: 32px; 184 | width: 32px; 185 | padding-top: 7px; 186 | padding-right: 7px; 187 | font-size: 22px; 188 | font-weight: bold; 189 | text-align: right; 190 | line-height: 0.6; 191 | color: $spop-color; 192 | opacity: 0.5; 193 | 194 | &:hover { 195 | opacity: 0.7; 196 | cursor: pointer; 197 | } 198 | } 199 | 200 | @if $use-icon == true { 201 | .spop-icon { 202 | position: absolute; 203 | top: 13px; 204 | left: 16px; 205 | width: 30px; 206 | height: 30px; 207 | border-radius: 50%; 208 | animation: spopIn $spop-animation-duration $spop-animation-duration ease-in-out; 209 | &:after, 210 | &:before { 211 | content:""; 212 | position: absolute; 213 | display: block; 214 | } 215 | 216 | & + .spop-body { padding-left: ($spop-space * 6);} 217 | } 218 | 219 | .spop-icon--error, 220 | .spop-icon--info { 221 | border: 2px solid $spop-info-color; 222 | &:before { 223 | top: 5px; 224 | left: 11px; 225 | width: 4px; 226 | height: 4px; 227 | background-color:$spop-info-color; 228 | } 229 | &:after { 230 | top: 12px; 231 | left: 11px; 232 | width: 4px; 233 | height: 9px; 234 | background-color:$spop-info-color; 235 | } 236 | } 237 | 238 | .spop-icon--error { 239 | border-color: $spop-error-color; 240 | &:before { 241 | top: 16px; 242 | background-color:$spop-error-color; 243 | } 244 | &:after { 245 | top: 5px; 246 | background-color:$spop-error-color; 247 | } 248 | } 249 | 250 | .spop-icon--success { 251 | border: 2px solid $spop-success-color; 252 | &:before { 253 | top: 7px; 254 | left: 7px; 255 | width: 13px; 256 | height: 8px; 257 | border-bottom: 3px solid $spop-success-color; 258 | border-left: 3px solid $spop-success-color; 259 | transform: rotate(-45deg); 260 | } 261 | } 262 | 263 | .spop-icon--warning { 264 | border: 2px solid $spop-warning-color; 265 | &:before { 266 | top: 7px; 267 | left: 7px; 268 | width: 0; 269 | height: 0; 270 | border-style: solid; 271 | border-color: transparent transparent $spop-warning-color transparent; 272 | border-width: 0 6px 10px 6px; 273 | } 274 | } 275 | } 276 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var $ = require('gulp-load-plugins')(); 5 | var pac = require('./package.json'); 6 | 7 | // SPOP 8 | gulp.task('default', function () { 9 | console.log('Be specific !'); 10 | }); 11 | 12 | gulp.task('clean', function () { 13 | return gulp.src([ 14 | './dist/spop.min.js', 15 | './dist/spop.css', 16 | './dist/spop.min.css' 17 | ], { read: false }) 18 | .pipe($.clean()); 19 | }); 20 | 21 | gulp.task('styles', function () { 22 | gulp.src('./dist/spop.scss') 23 | .pipe($.sass().on('error', $.sass.logError)) 24 | .pipe($.autoprefixer('> 1%', 'ie 8')) 25 | .pipe(gulp.dest('./dist/')) 26 | .pipe($.rename({suffix: '.min'})) 27 | .pipe($.cssmin()) 28 | .pipe(gulp.dest('./dist/')) 29 | .pipe($.livereload()); 30 | }); 31 | 32 | gulp.task('scripts', function() { 33 | return gulp.src('./dist/spop.js') 34 | .pipe($.uglify({preserveComments:'some'})) 35 | .pipe($.rename({suffix: '.min'})) 36 | .pipe(gulp.dest('./dist/')) 37 | .pipe($.livereload()); 38 | }); 39 | 40 | gulp.task('watch', [ 'clean', 'styles', 'scripts'], function () { 41 | $.livereload.listen(); 42 | 43 | gulp.watch([ 44 | './dist/spop.min.js', 45 | './dist/spop.min.css' 46 | ]).on('change', $.livereload.changed); 47 | 48 | gulp.watch('./dist/spop.js', ['scripts']); 49 | gulp.watch('./dist/spop.scss', ['styles']); 50 | }); 51 | 52 | 53 | 54 | // DOCS 55 | gulp.task('cleanDocs', function () { 56 | return gulp.src([ 57 | './src/styles.min.css', 58 | './src/scripts.min.js', 59 | './index.html' 60 | ], { read: false }) 61 | .pipe($.clean()); 62 | }); 63 | 64 | gulp.task('stylesDocs', function () { 65 | gulp.src('./src/styles.scss') 66 | .pipe($.sass({sourceComments:true }).on('error', $.sass.logError)) 67 | .pipe($.autoprefixer('> 1%', 'ie 9')) 68 | .pipe($.cssmin()) 69 | .pipe($.rename({suffix: '.min'})) 70 | .pipe(gulp.dest('./src/')) 71 | .pipe($.livereload()); 72 | }); 73 | 74 | gulp.task('scriptsDocs', function() { 75 | return gulp.src('./src/scripts.js') 76 | .pipe($.uglify()) 77 | .pipe($.rename({suffix: '.min'})) 78 | .pipe(gulp.dest('./src/')) 79 | .pipe($.livereload()); 80 | }); 81 | 82 | gulp.task('html', function () { 83 | var LOCALS = { 84 | title: pac.name, 85 | description: pac.description, 86 | version: pac.version 87 | }; 88 | 89 | gulp.src('./src/index.jade') 90 | .pipe($.jade({ 91 | pretty: true, 92 | locals: LOCALS 93 | })) 94 | .pipe(gulp.dest('./')) 95 | .pipe($.livereload()); 96 | }); 97 | 98 | 99 | gulp.task('watchDocs', [ 'cleanDocs', 'stylesDocs', 'scriptsDocs', 'html'], function () { 100 | $.livereload.listen(); 101 | 102 | gulp.watch([ 103 | './*.html', 104 | './src/scripts.min.js', 105 | './src/styles.min.css' 106 | ]).on('change', $.livereload.changed); 107 | 108 | gulp.watch(['./src/index.jade', './package.json'], ['html']); 109 | gulp.watch('./src/scripts.js', ['scriptsDocs']); 110 | gulp.watch('./src/*.scss', ['stylesDocs']); 111 | }); 112 | 113 | 114 | // ALL 115 | gulp.task('watchAll', ['watch', 'watchDocs']); 116 | 117 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SmallPop, small pop up javascript plugin 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 23 |
24 | 25 |
26 |

SmallPop

27 |

A lightweight small pop up widget with no dependencies,
create notifications easily with this javascript plugin.

Download 0.1.3View code 28 |
29 |
30 |
31 |
32 |

Basic

33 |
34 |

Tip: to remove all SmallPop's click the title.

35 |

Include spop.js and spop.css in your page,

36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |

and call it:

Default popSuccess popWarning popError pop 44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |

Position

53 |
54 |

SmallPox has six differents positions:

55 |
Top leftTop centerTop right
56 |
Bottom leftBottom centerBottom right
57 |

In mobile (max-width:30em), all go down.

58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |

Autoclose

67 |
68 |

Autoclose, to... close... automatically... Woohoo never done before

Autoclose 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |

Groups

78 |
79 |

There can only be one SmallPop from each group

GroupNo groupGroup 80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |

Callbacks

89 |
90 |

Do what you need onOpen and onClose

Callbacks 91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |

Event

100 |
101 |

In your template you can call the close event, just add data-spop="close"

Launch 102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |

Change Defaults

111 |
112 |

Change the default options of all SmallPop's

Changed all defaultsRestore defaults 113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |

Options

123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | 138 |
Go top 139 | 140 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "SmallPop", 3 | "version": "0.1.3", 4 | "description": "A lightweight small pop up widget with no dependencies", 5 | "author": "Sílvio Rosa", 6 | "main": "./dist/spop.js", 7 | "homepage": "http://silvio-r.github.io/spop/", 8 | "repository": "https://github.com/silvio-r/spop", 9 | "bugs": { 10 | "url": "https://github.com/silvio-r/spop/issues" 11 | }, 12 | "license": "MIT", 13 | "keywords": [ 14 | "smalpop", 15 | "spop", 16 | "spop.js", 17 | "pop up", 18 | "alert", 19 | "toast", 20 | "notification", 21 | "toast notification", 22 | "javascript plugin" 23 | ], 24 | "devDependencies": { 25 | "gulp": "3.9.0", 26 | "gulp-rename": "1.2.2", 27 | "gulp-load-plugins": "1.0.0-rc.1", 28 | "gulp-uglify": "1.2.0", 29 | "gulp-clean": "0.3.1", 30 | "gulp-cssmin": "0.1.7", 31 | "gulp-autoprefixer": "2.3.1", 32 | "gulp-sass": "2.0.1", 33 | "gulp-livereload": "2.1.1", 34 | "gulp-jade": "1.1.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # SmallPop 2 | 3 | A lightweight small pop up widget with no dependencies, create notifications easily with this javascript plugin.
Playground in [Codepen](http://codepen.io/silvio-r/pen/jWmWXy). 4 | 5 | ## Basic 6 | 7 | Include spop.js and spop.css in your page. 8 | 9 | ```html 10 | 11 | 12 | 13 | ``` 14 | 15 | and call it: 16 | 17 | ```javascript 18 | spop('Default SmallPop'); 19 | 20 | spop('

Success

I´m a success SmallPop', 'success'); 21 | 22 | spop('Warning pop', 'warning'); 23 | 24 | spop('Error Here!', 'error'); 25 | ``` 26 | 27 | 28 | ## Position 29 | 30 | SmallPox has six differents positions: top-left, top-center, top-right, bottom-left, bottom-center and bottom-right 31 | 32 | ```javascript 33 | // top left example 34 | spop({ 35 | template: 'Position top left', 36 | position : 'top-left', 37 | style: 'success' 38 | }); 39 | ``` 40 | 41 | In *mobile* (max-width:30em), all go down. 42 | 43 | 44 | ## Autoclose 45 | 46 | Autoclose, to... close... automatically... 47 | 48 | ```javascript 49 | spop({ 50 | template: '3 seconds autoclose', 51 | autoclose: 3000 52 | }); 53 | ``` 54 | 55 | 56 | ## Groups 57 | 58 | There can only be one SmallPop visible from each group. 59 | 60 | ```javascript 61 | spop({ 62 | template: 'All fields are required!', 63 | group: 'submit-satus', 64 | style: 'error' 65 | }); 66 | 67 | spop({ 68 | template: 'Your information has been submitted', 69 | group: 'submit-satus', 70 | style: 'success' 71 | autoclose: 2000 72 | }); 73 | ``` 74 | 75 | ## Callbacks 76 | 77 | Do what you need onOpen and onClose 78 | 79 | ```javascript 80 | spop({ 81 | template: 'Please, close me.', 82 | onOpen: function () { 83 | document.body.style.background = "#fff"; 84 | }, 85 | onClose: function() { 86 | document.body.style.background = ""; 87 | spop({ 88 | template: 'Thank you!', 89 | style: 'success', 90 | autoclose: 2000 91 | }); 92 | } 93 | }); 94 | ``` 95 | 96 | 97 | ## Event 98 | 99 | In your template you can call the close event, just add data-spop="close". 100 | 101 | ```javascript 102 | spop('Got to defaults'); 103 | ``` 104 | 105 | 106 | ## Options 107 | 108 | ```javascript 109 | spop({ 110 | template : null,// string required. Without it nothing happens! 111 | style : 'info',// success, warning or error 112 | autoclose : false,// miliseconds 113 | position : 'top-right',// top-left top-center bottom-left bottom-center bottom-right 114 | icon : true,// or false 115 | group : false,// string, add a id reference 116 | onOpen : function() { }, 117 | onClose : function() { } 118 | }); 119 | ``` 120 | 121 | 122 | ### Browser support 123 | Chrome, Firefox, IE 11-10-9 (9 no animations), Android Browser, Chrome for Android, Safari, iOS Safari 124 | 125 | ### License 126 | 127 | MIT License 128 | 129 | ---- 130 | 131 | Created by Sílvio Rosa • Follow me on [twitter](https://twitter.com/silvior_) for updates. 132 | -------------------------------------------------------------------------------- /src/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /src/_prism.scss: -------------------------------------------------------------------------------- 1 | /*! http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+scss */ 2 | /** 3 | * okaidia theme for JavaScript, CSS and HTML 4 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/ 5 | * @author ocodia 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: #f8f8f2; 11 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 12 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 13 | direction: ltr; 14 | text-align: left; 15 | // white-space: pre; 16 | white-space: pre-wrap; 17 | word-spacing: normal; 18 | word-wrap: normal; 19 | word-break: normal; 20 | line-height: 1.5; 21 | 22 | -moz-tab-size: 4; 23 | -o-tab-size: 4; 24 | tab-size: 4; 25 | 26 | -webkit-hyphens: none; 27 | -moz-hyphens: none; 28 | -ms-hyphens: none; 29 | hyphens: none; 30 | } 31 | 32 | // Code blocks 33 | pre[class*="language-"] { 34 | padding: 1em; 35 | margin: 0; 36 | overflow: auto; 37 | border-radius: 0; 38 | border: none; 39 | // margin-left: -30px; 40 | // margin-right: -30px; 41 | 42 | // @media (min-width: 768px) { 43 | // margin-left: 0; 44 | // border-top-left-radius: 3px; 45 | // border-bottom-left-radius: 3px; 46 | 47 | // &.pre-full { 48 | // margin-left: -30px; 49 | // border-radius: 0; 50 | // } 51 | // } 52 | } 53 | 54 | // :not(pre) > code[class*="language-"], 55 | // pre[class*="language-"] { 56 | // background: #272822; 57 | // } 58 | 59 | // Inline code 60 | :not(pre) > code[class*="language-"] { 61 | padding: .1em; 62 | // border-radius: .3em; 63 | } 64 | 65 | .token.comment, 66 | .token.prolog, 67 | .token.doctype, 68 | .token.cdata { 69 | color: slategray; 70 | } 71 | 72 | .token.punctuation { 73 | color: #f8f8f2; 74 | } 75 | 76 | .namespace { 77 | opacity: .7; 78 | } 79 | 80 | .token.property, 81 | .token.tag, 82 | .token.constant, 83 | .token.symbol, 84 | .token.deleted { 85 | color: #f92672; 86 | } 87 | 88 | .token.boolean, 89 | .token.number { 90 | color: #ae81ff; 91 | } 92 | 93 | .token.selector, 94 | .token.attr-name, 95 | .token.string, 96 | .token.char, 97 | .token.builtin, 98 | .token.inserted { 99 | color: #a6e22e; 100 | } 101 | 102 | .token.operator, 103 | .token.entity, 104 | .token.url, 105 | .language-css .token.string, 106 | .style .token.string, 107 | .token.variable { 108 | color: #f8f8f2; 109 | } 110 | 111 | .token.atrule, 112 | .token.attr-value, 113 | .token.function { 114 | color: #e6db74; 115 | } 116 | 117 | .token.keyword { 118 | color: #66d9ef; 119 | } 120 | 121 | .token.regex, 122 | .token.important { 123 | color: #fd971f; 124 | } 125 | 126 | .token.important, 127 | .token.bold { 128 | font-weight: bold; 129 | } 130 | .token.italic { 131 | font-style: italic; 132 | } 133 | 134 | .token.entity { 135 | cursor: help; 136 | } 137 | 138 | -------------------------------------------------------------------------------- /src/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | $gray-dark: #555; 4 | $gray: #ddd; 5 | $gray-light: #eee; 6 | $gray-lighter: #f7f7f7; 7 | 8 | $color: #454A56; 9 | $color-light: #5c83b0; 10 | $content-bg: #f7f7f7; 11 | 12 | $gutter: 2rem; 13 | 14 | $h1: 2.5rem; 15 | $h2: 1.8rem; 16 | $h3: 1.3rem; 17 | $h4: 1.15rem; 18 | 19 | $lh: 1.47em; 20 | 21 | @mixin mediaBP() { 22 | @media (min-width: 57.88em) { 23 | @content; 24 | } 25 | } 26 | 27 | @mixin mediaXS() { 28 | @media (min-width: 30em) { 29 | @content; 30 | } 31 | } 32 | 33 | @mixin clearfix() { 34 | &:after { 35 | content: " "; 36 | display: block; 37 | clear: both; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/silvio-r/spop/5684749948c9a6204e13c93540f4fb35572a676b/src/favicon.ico -------------------------------------------------------------------------------- /src/index.jade: -------------------------------------------------------------------------------- 1 | 2 | html(lang="en") 3 | head 4 | meta(charset="utf-8") 5 | title #{locals.title}, small pop up javascript plugin 6 | meta(name="description" content="#{locals.description}, create notifications easily with this javascript plugin") 7 | meta(name="viewport" content="width=device-width, initial-scale=1") 8 | link(href="http://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet") 9 | link(href="dist/spop.min.css" rel="stylesheet") 10 | link(href="src/styles.min.css" rel="stylesheet") 11 | link(href="src/favicon.ico" rel="icon") 12 | 13 | script(async src="https://www.googletagmanager.com/gtag/js?id=G-N8DGG9J61Z") 14 | script. 15 | window.dataLayer = window.dataLayer || []; 16 | function gtag(){dataLayer.push(arguments);} 17 | gtag('js', new Date()); 18 | gtag('config', 'G-N8DGG9J61Z'); 19 | 20 | body#body 21 | .container 22 | nav.menu 23 | a(href="#demo-basic") Basic 24 | a(href="#demo-position") Position 25 | a(href="#demo-autoclose") Autoclose 26 | a(href="#demo-groups") Groups 27 | a(href="#demo-callbacks") Callbacks 28 | a(href="#demo-event") Event 29 | a(href="#demo-defaults") Defaults 30 | a(href="#demo-options") Options 31 | 32 | header.header 33 | h1.header-title #{locals.title} 34 | p.header-text.h3 35 | | #{locals.description}, 36 | br 37 | | create notifications easily with this javascript plugin. 38 | a.btn(href='https://github.com/silvio-r/spop/archive/#{locals.version}.zip') Download #{locals.version} 39 | a.btn(href='https://github.com/silvio-r/spop') View code 40 | 41 | section#demo-basic.section 42 | .text-main 43 | .titles 44 | h2.title Basic 45 | 46 | p Tip: to remove all SmallPop's click the title. 47 | 48 | p Include spop.js and spop.css in your page, 49 | 50 | .text-code 51 | pre 52 | code.language-markup#code-markup 53 | 54 | section.section 55 | .text-main 56 | p and call it: 57 | a.btn.btn-block#btn-default-pop Default pop 58 | a.btn.btn-block#btn-success-pop Success pop 59 | a.btn.btn-block#btn-warning-pop Warning pop 60 | a.btn.btn-block#btn-error-pop Error pop 61 | 62 | .text-code 63 | pre 64 | code.language-javascript#code-basic 65 | 66 | section.section#demo-position 67 | .text-main 68 | .titles 69 | h2.title Position 70 | 71 | p SmallPox has six differents positions: 72 | 73 | .btn-group 74 | a.btn#btn-top-left Top left 75 | a.btn#btn-top-center Top center 76 | a.btn#btn-top-right Top right 77 | 78 | .btn-group 79 | a.btn#btn-bottom-left Bottom left 80 | a.btn#btn-bottom-center Bottom center 81 | a.btn#btn-bottom-right Bottom right 82 | 83 | p In mobile (max-width:30em), all go down. 84 | 85 | .text-code 86 | pre 87 | code.language-javascript#code-position 88 | 89 | section.section#demo-autoclose 90 | .text-main 91 | .titles 92 | h2.title Autoclose 93 | 94 | p Autoclose, to... close... automatically... Woohoo never done before 95 | a.btn.btn-block#btn-autoclose-pop Autoclose 96 | 97 | .text-code 98 | pre 99 | code.language-javascript#code-autoclose-pop 100 | 101 | section.section#demo-groups 102 | .text-main 103 | .titles 104 | h2.title Groups 105 | 106 | p There can only be one SmallPop from each group 107 | a.btn.btn-block#btn-groups-1 Group 108 | a.btn.btn-block#btn-groups No group 109 | a.btn.btn-block#btn-groups-2 Group 110 | 111 | .text-code 112 | pre 113 | code.language-javascript#code-groups 114 | 115 | section.section#demo-callbacks 116 | .text-main 117 | .titles 118 | h2.title Callbacks 119 | 120 | p Do what you need onOpen and onClose 121 | a.btn.btn-block#btn-callbacks Callbacks 122 | 123 | .text-code 124 | pre 125 | code.language-javascript#code-callbacks 126 | 127 | section.section#demo-event 128 | .text-main 129 | .titles 130 | h2.title Event 131 | 132 | p In your template you can call the close event, just add data-spop="close" 133 | a.btn.btn-block#btn-event Launch 134 | 135 | .text-code 136 | pre 137 | code.language-javascript#code-event 138 | 139 | section.section#demo-defaults 140 | .text-main 141 | .titles 142 | h2.title Change Defaults 143 | 144 | p Change the default options of all SmallPop's 145 | a.btn.btn-block#btn-defaults Changed all defaults 146 | a.btn.btn-block#btn-defaults-reset Restore defaults 147 | 148 | .text-code 149 | pre 150 | code.language-javascript#code-defaults 151 | 152 | section.section-full#demo-options 153 | .section 154 | .text-main-full 155 | .titles 156 | h2.title Options 157 | .text-code 158 | 159 | .text-code-full 160 | pre 161 | code.language-javascript#code-options 162 | 163 | 164 | 165 | footer.footer 166 | p 167 | span.h3 Browser support: 168 | br 169 | | Chrome, Firefox, IE 11-10-9 (9 no animations), 170 | | Android Browser, Chrome for Android, Safari, iOS Safari 171 | 172 | p.footer-menu 173 | a(href="https://github.com/silvio-r/spop/archive/#{locals.version}.zip") Download 174 | a(href="https://github.com/silvio-r/spop") Code 175 | a(href="https://github.com/silvio-r/spop/issues") Issues/Bugs 176 | a(href="http://codepen.io/silvio-r/pen/jWmWXy") Codepen playground 177 | 178 | 179 | p 180 | small Created by Sílvio Rosa • Follow me on 181 | a(href="https://twitter.com/silvior_") twitter 182 | | for updates. 183 | 184 | a.btn.btn-go-top(href="#body") Go top 185 | 186 | script(src="src/prism.js") 187 | script(src="dist/spop.min.js") 188 | script(src="src/scripts.min.js") 189 | -------------------------------------------------------------------------------- /src/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+scss */ 2 | self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(d instanceof a)){u.lastIndex=0;var m=u.exec(d);if(m){c&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var s="";for(var o in i.attributes)s+=o+'="'+(i.attributes[o]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+s+">"+i.content+""},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[^\s>\/]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/=|>|"/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{punctuation:/[;:]/}},url:/url\((?:(["'])(\\\n|\\?.)*?\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/,string:/("|')(\\\n|\\?.)*?\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,punctuation:/[\{\};:]/,"function":/[-a-z0-9]+(?=\()/i},Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/i,inside:{tag:{pattern:/|<\/style>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css},alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));; 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/("|')(\\\n|\\?.)*?\1/,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":{pattern:/[a-z0-9_]+\(/i,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/,ignore:/&(lt|gt|amp);/i,punctuation:/[{}[\];(),.:]/};; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/(?!\d)[a-z0-9_$]+(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\`|\\?[^`])*`/,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/i,inside:{tag:{pattern:/|<\/script>/i,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript},alias:"language-javascript"}});; 7 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/i,url:/([-a-z]+-)*url(?=\()/i,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/m}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","function",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/i,"boolean":/\b(true|false)\b/,"null":/\b(null)\b/,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|%)\s+/});; 8 | -------------------------------------------------------------------------------- /src/scripts.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * smallPop Docs 3 | */ 4 | 5 | (function () { 6 | 'use strict'; 7 | 8 | var docs = {}; 9 | 10 | docs.basic = (function() { 11 | 12 | $('code-markup').innerHTML = '' + 13 | '<link href="spop.css" rel="stylesheet">\n' + 14 | '<!-- Even better, SamallPop is made with scss,\n' + 15 | ' @import to your style.scss -->\n' + 16 | '<script src="spop.js"></script>'; 17 | 18 | $('btn-default-pop').addEventListener('click', function() { 19 | spop('Default SmallPop'); 20 | }, false); 21 | 22 | $('btn-success-pop').addEventListener('click', function() { 23 | spop('

Success

Iˈm a success SmallPop', 'success'); 24 | }, false); 25 | 26 | $('btn-warning-pop').addEventListener('click', function() { 27 | spop('Warning SmallPop', 'warning'); 28 | }, false); 29 | 30 | $('btn-error-pop').addEventListener('click', function() { 31 | spop('Error Here!', 'error'); 32 | }, false); 33 | 34 | $('code-basic').innerHTML = "" + 35 | "spop('Default SmallPop');\n" + 36 | "\n" + 37 | "spop('<h4 class=\"spop-title\">Success</h4>Iˈm a success SmallPop', 'success');\n" + 38 | "\n" + 39 | "spop('Warning SmallPop', 'warning');\n" + 40 | "\n" + 41 | "spop('<strong>Error Here!</strong>', 'error');"; 42 | }()); 43 | 44 | docs.position = (function() { 45 | $('btn-top-left').addEventListener('click', function() { 46 | spop({ 47 | template: 'Position top left', 48 | position : 'top-left', 49 | style: 'success' 50 | }); 51 | }, false); 52 | 53 | $('code-position').innerHTML = "" + 54 | "// top left example\n" + 55 | "spop({\n" + 56 | " template: 'Position top left',\n" + 57 | " position : 'top-left',\n" + 58 | " style: 'success'\n" + 59 | "});'"; 60 | 61 | $('btn-top-center').addEventListener('click', function() { 62 | spop({ 63 | template: 'Position top center', 64 | position : 'top-center' 65 | }); 66 | }, false); 67 | 68 | $('btn-top-right').addEventListener('click', function() { 69 | spop({ 70 | template: 'Position top right', 71 | position : 'top-right' 72 | }); 73 | }, false); 74 | 75 | $('btn-bottom-left').addEventListener('click', function() { 76 | spop({ 77 | template: 'Position bottom left', 78 | position : 'bottom-left', 79 | style: 'error' 80 | }); 81 | }, false); 82 | 83 | $('btn-bottom-center').addEventListener('click', function() { 84 | spop({ 85 | template: 'Position bottom center', 86 | position : 'bottom-center' 87 | }); 88 | }, false); 89 | 90 | $('btn-bottom-right').addEventListener('click', function() { 91 | spop({ 92 | template: 'Position bottom right', 93 | position : 'bottom-right' 94 | }); 95 | }, false); 96 | }()); 97 | 98 | docs.autoclose = (function() { 99 | $('btn-autoclose-pop').addEventListener('click', function() { 100 | spop({ 101 | template: '3 seconds autoclose', 102 | autoclose: 3000 103 | }); 104 | }, false); 105 | 106 | $('code-autoclose-pop').innerHTML = "" + 107 | "spop({\n" + 108 | " template: '3 seconds autoclose',\n" + 109 | " autoclose: 3000\n" + 110 | "});"; 111 | }()); 112 | 113 | docs.groups = (function() { 114 | $('btn-groups-1').addEventListener('click', function() { 115 | spop({ 116 | template: 'All fields are required!', 117 | group: 'submit-satus', 118 | style: 'error' 119 | }); 120 | }, false); 121 | 122 | $('btn-groups').addEventListener('click', function() { 123 | spop('Nothing here...'); 124 | }, false); 125 | 126 | $('btn-groups-2').addEventListener('click', function() { 127 | spop({ 128 | template: 'Your information has been submitted.', 129 | group: 'submit-satus', 130 | style: 'success', 131 | autoclose: 2000, 132 | }); 133 | }, false); 134 | 135 | $('code-groups').innerHTML = "" + 136 | "spop({\n" + 137 | " template: 'All fields are required!',\n" + 138 | " group: 'submit-satus',\n" + 139 | " style: 'error'\n" + 140 | "});\n" + 141 | "\n" + 142 | "spop('Nothing here...');\n" + 143 | "\n" + 144 | "spop({\n" + 145 | " template: 'Your information has been submitted',\n" + 146 | " group: 'submit-satus',\n" + 147 | " style: 'success'\n" + 148 | " autoclose: 2000\n" + 149 | "});"; 150 | }()); 151 | 152 | docs.callbacks = (function() { 153 | $('btn-callbacks').addEventListener('click', function() { 154 | spop({ 155 | template: 'Please, close me.', 156 | style:'warning', 157 | onOpen: function () { 158 | document.body.style.background = "#fff"; 159 | }, 160 | onClose: function() { 161 | document.body.style.background = ""; 162 | spop({ 163 | template: 'Thank you!', 164 | style: 'success', 165 | autoclose: 2000 166 | }); 167 | } 168 | }); 169 | }, false); 170 | 171 | $('code-callbacks').innerHTML = "" + 172 | "spop({\n" + 173 | " template: 'Please, close me.',\n" + 174 | " style:'warning',\n" + 175 | " onOpen: function () {\n" + 176 | " document.body.style.background = \"#fff\";\n" + 177 | " },\n" + 178 | " onClose: function() {\n" + 179 | " document.body.style.background = \"\";\n" + 180 | " spop({\n" + 181 | " template: 'Thank you!',\n" + 182 | " style: 'success',\n" + 183 | " autoclose: 2000\n" + 184 | " });\n" + 185 | " }\n" + 186 | "});\n"; 187 | }()); 188 | 189 | docs.events = (function() { 190 | $('btn-event').addEventListener('click', function() { 191 | spop('Got to defaults'); 192 | }, false); 193 | 194 | $('code-event').innerHTML = "" + 195 | "spop('Got to <a href=\"#demo-defaults\" data-spop=\"close\">defaults</a>');"; 196 | }()); 197 | 198 | docs.defaults = (function() { 199 | 200 | $('btn-defaults').addEventListener('click', function() { 201 | 202 | spop.defaults = { 203 | style:'error', 204 | autoclose: 5000, 205 | position: 'top-left' 206 | }; 207 | 208 | spop('Defaults changed! See the others examples.'); 209 | }, false); 210 | 211 | $('btn-defaults-reset').addEventListener('click', function() { 212 | 213 | spop.defaults = {}; 214 | 215 | spop('Defauls restored'); 216 | }, false); 217 | 218 | $('code-defaults').innerHTML = "" + 219 | "spop.defaults = {\n" + 220 | " style : 'error',\n" + 221 | " autoclose : 5000,\n" + 222 | " position : 'top-left'\n" + 223 | "};\n\n" + 224 | "spop('Defaults changed! See the others examples.');\n"; 225 | }()); 226 | 227 | docs.options = (function() { 228 | $('code-options').innerHTML = "" + 229 | "spop({\n" + 230 | " template : null,// string required. Without it nothing happens!\n"+ 231 | " style : 'info',// error or success\n"+ 232 | " autoclose : false,// miliseconds\n"+ 233 | " position : 'top-right',// top-left top-center bottom-left bottom-center bottom-right\n"+ 234 | " icon : true,// or false\n"+ 235 | " group : false,// string, add a id reference \n"+ 236 | " onOpen : function() { },\n"+ 237 | " onClose : function() { }\n" + 238 | "});"; 239 | }()); 240 | 241 | 242 | docs.removeAllPops = (function() { 243 | var title = $$('.title'); 244 | var pops; 245 | var popsC; 246 | 247 | var removePops = function() { 248 | pops = $$('.spop'); 249 | popsC = $$('.spop-container'); 250 | 251 | 252 | forAll(pops, function(elm) { 253 | removeClass(elm, 'spop--in'); 254 | }); 255 | 256 | setTimeout(function () { 257 | forAll(popsC, function(elm) { 258 | elm.parentNode.removeChild(elm); 259 | }); 260 | }, 300); 261 | }; 262 | 263 | forAll(title, function(elm) { 264 | elm.addEventListener('click', removePops, false); 265 | }); 266 | }()); 267 | 268 | 269 | // helpers 270 | function $(el, con) { 271 | return typeof el === 'string'? (con || document).getElementById(el) : el || null; 272 | } 273 | 274 | function $$(el, con) { 275 | return typeof el === 'string'? (con || document).querySelectorAll(el) : el || null; 276 | } 277 | 278 | function forAll(arr, fn) { 279 | for (var i = 0; i < arr.length; i++) { 280 | fn.call( i, arr[i]); 281 | } 282 | } 283 | 284 | function removeClass(el, className) { 285 | if (el.classList) { 286 | el.classList.remove(className); 287 | } 288 | else { 289 | el.className = el.className.replace(new RegExp('(^|\\b)' + 290 | className.split(' ').join('|') + 291 | '(\\b|$)', 'gi'), ' '); 292 | } 293 | } 294 | 295 | }()); 296 | -------------------------------------------------------------------------------- /src/scripts.min.js: -------------------------------------------------------------------------------- 1 | !function(){"use strict";function t(t,e){return"string"==typeof t?(e||document).getElementById(t):t||null}function e(t,e){return"string"==typeof t?(e||document).querySelectorAll(t):t||null}function n(t,e){for(var n=0;nSuccessIˈm a success SmallPop',"success")},!1),t("btn-warning-pop").addEventListener("click",function(){spop("Warning SmallPop","warning")},!1),t("btn-error-pop").addEventListener("click",function(){spop("Error Here!","error")},!1),t("code-basic").innerHTML="spop('Default SmallPop');\n\nspop('<h4 class=\"spop-title\">Success</h4>Iˈm a success SmallPop', 'success');\n\nspop('Warning SmallPop', 'warning');\n\nspop('<strong>Error Here!</strong>', 'error');"}(),s.position=function(){t("btn-top-left").addEventListener("click",function(){spop({template:"Position top left",position:"top-left",style:"success"})},!1),t("code-position").innerHTML="// top left example\nspop({\n template: 'Position top left',\n position : 'top-left',\n style: 'success'\n});'",t("btn-top-center").addEventListener("click",function(){spop({template:"Position top center",position:"top-center"})},!1),t("btn-top-right").addEventListener("click",function(){spop({template:"Position top right",position:"top-right"})},!1),t("btn-bottom-left").addEventListener("click",function(){spop({template:"Position bottom left",position:"bottom-left",style:"error"})},!1),t("btn-bottom-center").addEventListener("click",function(){spop({template:"Position bottom center",position:"bottom-center"})},!1),t("btn-bottom-right").addEventListener("click",function(){spop({template:"Position bottom right",position:"bottom-right"})},!1)}(),s.autoclose=function(){t("btn-autoclose-pop").addEventListener("click",function(){spop({template:"3 seconds autoclose",autoclose:3e3})},!1),t("code-autoclose-pop").innerHTML="spop({\n template: '3 seconds autoclose',\n autoclose: 3000\n});"}(),s.groups=function(){t("btn-groups-1").addEventListener("click",function(){spop({template:"All fields are required!",group:"submit-satus",style:"error"})},!1),t("btn-groups").addEventListener("click",function(){spop("Nothing here...")},!1),t("btn-groups-2").addEventListener("click",function(){spop({template:"Your information has been submitted.",group:"submit-satus",style:"success",autoclose:2e3})},!1),t("code-groups").innerHTML="spop({\n template: 'All fields are required!',\n group: 'submit-satus',\n style: 'error'\n});\n\nspop('Nothing here...');\n\nspop({\n template: 'Your information has been submitted',\n group: 'submit-satus',\n style: 'success'\n autoclose: 2000\n});"}(),s.callbacks=function(){t("btn-callbacks").addEventListener("click",function(){spop({template:"Please, close me.",style:"warning",onOpen:function(){document.body.style.background="#fff"},onClose:function(){document.body.style.background="",spop({template:"Thank you!",style:"success",autoclose:2e3})}})},!1),t("code-callbacks").innerHTML="spop({\n template: 'Please, close me.',\n style:'warning',\n onOpen: function () {\n document.body.style.background = \"#fff\";\n },\n onClose: function() {\n document.body.style.background = \"\";\n spop({\n template: 'Thank you!',\n style: 'success',\n autoclose: 2000\n });\n }\n});\n"}(),s.events=function(){t("btn-event").addEventListener("click",function(){spop('Got to defaults')},!1),t("code-event").innerHTML='spop(\'Got to <a href="#demo-defaults" data-spop="close">defaults</a>\');'}(),s.defaults=function(){t("btn-defaults").addEventListener("click",function(){spop.defaults={style:"error",autoclose:5e3,position:"top-left"},spop("Defaults changed! See the others examples.")},!1),t("btn-defaults-reset").addEventListener("click",function(){spop.defaults={},spop("Defauls restored")},!1),t("code-defaults").innerHTML="spop.defaults = {\n style : 'error',\n autoclose : 5000,\n position : 'top-left'\n};\n\nspop('Defaults changed! See the others examples.');\n"}(),s.options=function(){t("code-options").innerHTML="spop({\n template : null,// string required. Without it nothing happens!\n style : 'info',// error or success\n autoclose : false,// miliseconds\n position : 'top-right',// top-left top-center bottom-left bottom-center bottom-right\n icon : true,// or false\n group : false,// string, add a id reference \n onOpen : function() { },\n onClose : function() { }\n});"}(),s.removeAllPops=function(){var t,s,i=e(".title"),p=function(){t=e(".spop"),s=e(".spop-container"),n(t,function(t){o(t,"spop--in")}),setTimeout(function(){n(s,function(t){t.parentNode.removeChild(t)})},300)};n(i,function(t){t.addEventListener("click",p,!1)})}()}(); -------------------------------------------------------------------------------- /src/styles.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";/*! 2 | * smallPop Docs 3 | *//*! normalize.css v3.0.2 | MIT License | git.io/normalize */img,legend{border:0}legend,td,th{padding:0}.menu a,a,a:hover{text-decoration:none}.container,.header-title,sub,sup{position:relative}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}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:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre,textarea{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;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}table{border-collapse:collapse;border-spacing:0}/*! http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+scss */code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre-wrap;word-spacing:normal;word-wrap:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.btn,.footer,.header,.menu{text-align:center}pre[class*=language-]{padding:1em;margin:0;overflow:auto;border-radius:0;border:none}:not(pre)>code[class*=language-]{padding:.1em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}*,:after,:before{box-sizing:border-box}body{margin:0;font-family:Roboto,sans-serif;background-color:#ddd;font-size:100%;line-height:1.47;min-width:320px}.container{max-width:56em;padding-left:1rem;padding-right:1rem;margin:0 auto}.h1,.h2,.h3,h1,h2,h3{margin-top:0;font-weight:300;color:#555;line-height:1.1}.h3,.h4,h3,h4{font-weight:400}.h1,h1{font-size:2.5rem}.h2,h2{font-size:1.8rem}.h3,h3{font-size:1.3rem}.h4,h4{font-size:1.15rem}p{margin:0 0 .7rem}a{background-color:transparent;color:#5c83b0}.menu,.menu ul{background-color:#f7f7f7}a:hover{color:#3d5b7e}strong{font-weight:500}.header-text,.menu a{font-weight:400}.menu{border-bottom:1px solid #eee;padding-bottom:8px}.menu a{display:inline-block;padding:12px 6px 8px;color:#5c83b0;font-size:17px}.menu a:focus,.menu a:hover{color:#454A56}.menu ul{display:list-item;margin:0;list-style-type:none}.header{padding:2rem;background-color:#eee}@-webkit-keyframes icon{0,100%{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(0,0);transform:scale(0,0)}}@keyframes icon{0,100%{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(0,0);transform:scale(0,0)}}.header-title{padding-top:20px;display:inline-block}.header-title:before{top:5px;right:-5px;width:58px;height:12px;background-color:#454A56;transform:scale(1,1);transition:transform .3s ease-in-out;-webkit-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.header-title:after,.header-title:before{-webkit-transition:-webkit-transform .3s ease-in-out;content:"";position:absolute;display:block;-webkit-transform:scale(1,1);-ms-transform:scale(1,1)}.header-title:after{top:8px;right:44px;width:6px;height:6px;border-radius:50%;background-color:#2ECC54;transform:scale(1,1);transition:transform .3s ease-in-out;-webkit-transform-origin:58px 0;-ms-transform-origin:58px 0;transform-origin:58px 0}.header-title:hover:after,.header-title:hover:before{-webkit-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0)}.btn{display:inline-block;vertical-align:middle;padding:6px 12px;margin:2px;color:#fff;background-color:#5c83b0;border-radius:3px;-webkit-transition:background-color .3s ease-in-out;transition:background-color .3s ease-in-out;cursor:pointer}.btn:focus,.btn:hover{color:#fff;background-color:#476a92}@media (min-width:57.88em){.btn-block{width:100%}}.btn-go-top{position:fixed;bottom:12px;right:12px;padding:3px 9px;background-color:#d7d7d7;color:#555;font-size:12px}.btn-group{margin-bottom:4px}@media (min-width:30em) and (min-width:57.88em){.btn-group .btn{padding-left:0;padding-right:0}}@media (min-width:30em){.btn-group:after{content:" ";display:block;clear:both}.btn-group .btn{float:left;width:33.33%;font-size:.88rem;margin-left:0;margin-right:0;border-radius:0}.btn-group .btn:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.btn-group .btn:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}}.section,.section-full{width:100%;background-color:#f7f7f7}.text-main,.text-main-full{padding:1rem}@media (min-width:30em){.text-main,.text-main-full{padding:1rem 2rem}}.text-code,.text-code-full{background-color:#272822}.text-code pre,.text-code-full pre{font-size:.8em}@media (min-width:57.88em){.section{display:table;table-layout:fixed}.text-code,.text-main{display:table-cell;width:50%;vertical-align:top}.text-code{padding-top:3rem;position:relative;overflow:hidden}.text-code:before{content:" //----------------------------------------------------------------------------------------------";position:absolute;top:1.75rem;display:block;width:100%;color:#708090;white-space:pre;font-family:monospace}}.titles .title:before,.titles:before{content:""}.titles{position:relative;padding-top:6px}.titles:before{position:absolute;display:block;width:100%;height:3px;top:22px;background-color:#ddd}.titles .title{position:relative;display:inline-block;padding-right:12px;margin-bottom:6px;z-index:10;background-color:#f7f7f7;cursor:pointer}.titles .title:before{background-size:20px 20px;position:absolute;width:20px;height:20px;bottom:4px;right:-15px;opacity:0;-webkit-transform:scale3D(0,0,0);-ms-transform:scale3D(0,0,0);transform:scale3D(0,0,0);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background-color:#f7f7f7;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI0NDgiIGhlaWdodD0iNDQ4IiB2aWV3Qm94PSIwIDAgNDQ4IDQ0OCI+PGcgaWQ9Imljb21vb24taWdub3JlIj4KPC9nPgo8cGF0aCBmaWxsPSIjZGI1NjU2IiBkPSJNMzI4IDIyMy4yNXEwLTQwLjI1LTIxLjc1LTczLjc1bC0xODguNSAxODguMjVxMzQuMjUgMjIuMjUgNzQuMjUgMjIuMjUgMjcuNzUgMCA1Mi44NzUtMTAuODc1dDQzLjM3NS0yOS4xMjUgMjktNDMuNjI1IDEwLjc1LTUzLjEyNXpNNzguMjUgMjk4bDE4OC43NS0xODguNXEtMzMuNzUtMjIuNzUtNzUtMjIuNzUtMzcgMC02OC4yNSAxOC4yNXQtNDkuNSA0OS43NS0xOC4yNSA2OC41cTAgNDAuNSAyMi4yNSA3NC43NXpNMzg0IDIyMy4yNXEwIDM5LjI1LTE1LjI1IDc1dC00MC44NzUgNjEuNS02MS4yNSA0MS03NC42MjUgMTUuMjUtNzQuNjI1LTE1LjI1LTYxLjI1LTQxLTQwLjg3NS02MS41LTE1LjI1LTc1IDE1LjI1LTc0Ljg3NSA0MC44NzUtNjEuMzc1IDYxLjI1LTQxIDc0LjYyNS0xNS4yNSA3NC42MjUgMTUuMjUgNjEuMjUgNDEgNDAuODc1IDYxLjM3NSAxNS4yNSA3NC44NzV6Ij48L3BhdGg+Cjwvc3ZnPgo=)}.titles .title:hover:before{opacity:1;-webkit-transform:scale3D(1,1,1);-ms-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}.footer{padding:20px;background-color:#eee}.footer a{font-weight:500}.footer-menu a+a:before{content:" • "} -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * smallPop Docs 3 | */ 4 | @import "normalize"; 5 | @import "prism"; 6 | @import "variables"; 7 | 8 | *,*:before, *:after { box-sizing: border-box} 9 | 10 | body { 11 | font-family: 'Roboto', sans-serif; 12 | background-color: $gray; 13 | font-size: 100%; 14 | line-height: 1.47; 15 | min-width: 320px; 16 | } 17 | 18 | .container { 19 | position: relative; 20 | max-width: 56em; 21 | padding-left: $gutter/2; 22 | padding-right: $gutter/2; 23 | margin: 0 auto; 24 | } 25 | 26 | h1, h2, h3, .h1, .h2, .h3 { 27 | margin-top: 0; 28 | font-weight: 300; 29 | color: $gray-dark; 30 | line-height: 1.1; 31 | } 32 | 33 | h1, .h1 { font-size: $h1;} 34 | h2, .h2 { font-size: $h2;} 35 | h3, .h3 { font-size: $h3;font-weight: 400;} 36 | h4, .h4 { font-size: $h4;font-weight: 400;} 37 | 38 | p { 39 | margin: 0; 40 | margin-bottom: 0.7rem; 41 | } 42 | 43 | a { 44 | color: $color-light; 45 | text-decoration: none; 46 | 47 | &:hover { 48 | text-decoration: none; 49 | color: darken($color-light,16%); 50 | } 51 | } 52 | 53 | strong { font-weight: 500;} 54 | 55 | .menu { 56 | text-align: center; 57 | background-color: $gray-lighter; 58 | border-bottom: 1px solid $gray-light; 59 | padding-bottom: 8px; 60 | 61 | a { 62 | display: inline-block; 63 | padding: 12px 6px 8px 6px; 64 | color: $color-light; 65 | font-weight: 400; 66 | font-size: 17px; 67 | text-decoration: none; 68 | 69 | &:hover, 70 | &:focus { 71 | color: $color; 72 | } 73 | } 74 | 75 | ul { 76 | display: list-item; 77 | margin: 0; 78 | background-color: $gray-lighter; 79 | list-style-type: none; 80 | li { 81 | 82 | } 83 | 84 | } 85 | } 86 | 87 | .header { 88 | padding: $gutter; 89 | text-align: center; 90 | background-color: $gray-light; 91 | } 92 | 93 | @keyframes icon { 94 | 0 { transform: scale(1,1)} 95 | 50% { transform: scale(0,0)} 96 | 100% { transform: scale(1,1)} 97 | } 98 | 99 | .header-title { 100 | padding-top: 20px; 101 | display: inline-block; 102 | position: relative; 103 | 104 | &:before { 105 | content: ""; 106 | position: absolute; 107 | top: 5px; 108 | right: -5px; 109 | display: block; 110 | width: 58px; 111 | height: 12px; 112 | background-color: $color; 113 | transform: scale(1,1); 114 | transition: transform 0.3s ease-in-out; 115 | transform-origin: 100% 0; 116 | } 117 | 118 | &:after { 119 | content: ""; 120 | position: absolute; 121 | top: 8px; 122 | right: 44px; 123 | display: block; 124 | width: 6px; 125 | height: 6px; 126 | border-radius: 50%; 127 | background-color: #2ECC54; 128 | transform: scale(1,1); 129 | transition: transform 0.3s ease-in-out; 130 | transform-origin: 58px 0; 131 | } 132 | 133 | &:hover:after, 134 | &:hover:before, { 135 | transform: scale(0,0); 136 | } 137 | } 138 | 139 | .header-text { font-weight: 400;} 140 | 141 | .btn { 142 | display: inline-block; 143 | vertical-align: middle; 144 | padding: 6px 12px; 145 | margin: 2px; 146 | color: #fff; 147 | background-color: $color-light; 148 | border-radius: 3px; 149 | transition: background-color 0.3s ease-in-out; 150 | cursor: pointer; 151 | text-align: center; 152 | 153 | 154 | &:hover, 155 | &:focus { 156 | color: #fff; 157 | background-color: darken($color-light,10%); 158 | } 159 | } 160 | 161 | @include mediaBP() { 162 | .btn-block { width: 100%; } 163 | } 164 | 165 | .btn-go-top { 166 | position: fixed; 167 | bottom: 12px; 168 | right: 12px; 169 | padding: 3px 9px; 170 | background-color: #d7d7d7; 171 | color: $gray-dark; 172 | font-size: 12px; 173 | } 174 | 175 | 176 | .btn-group { 177 | margin-bottom: 4px; 178 | 179 | @include mediaXS() { 180 | @include clearfix; 181 | .btn { 182 | float: left; 183 | width: 33.33%; 184 | font-size: 0.88rem; 185 | margin-left: 0; 186 | margin-right: 0; 187 | border-radius: 0; 188 | 189 | @include mediaBP() { 190 | padding-left: 0; 191 | padding-right: 0; 192 | } 193 | 194 | 195 | &:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px;} 196 | &:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px;} 197 | } 198 | } 199 | } 200 | 201 | .section, 202 | .section-full { 203 | width: 100%; 204 | background-color: $gray-lighter; 205 | } 206 | 207 | .text-main, 208 | .text-main-full { 209 | padding: $gutter/2; 210 | 211 | @include mediaXS() {padding: $gutter/2 $gutter;}; 212 | } 213 | 214 | .text-code, 215 | .text-code-full { 216 | background-color: #272822; 217 | pre { font-size: 0.8em;} 218 | } 219 | 220 | 221 | @include mediaBP() { 222 | 223 | .section { 224 | display: table; 225 | table-layout: fixed 226 | } 227 | 228 | .text-main, 229 | .text-code { 230 | display: table-cell; 231 | width: 50%; 232 | vertical-align: top; 233 | } 234 | 235 | .text-code { 236 | padding-top: 3rem; 237 | position: relative; 238 | overflow: hidden; 239 | &:before { 240 | content:" //----------------------------------------------------------------------------------------------"; 241 | position: absolute; 242 | top: 1.75rem; 243 | display: block; 244 | width: 100%; 245 | color: #708090; 246 | white-space: pre; 247 | font-family: monospace; 248 | } 249 | } 250 | } 251 | 252 | .titles { 253 | position: relative; 254 | padding-top: 6px; 255 | &:before { 256 | content:""; 257 | position: absolute; 258 | display: block; 259 | width: 100%; 260 | height: 3px; 261 | top: 22px; 262 | background-color: $gray; 263 | } 264 | 265 | .title { 266 | position: relative; 267 | display: inline-block; 268 | padding-right: 12px; 269 | margin-bottom: 6px; 270 | z-index: 10; 271 | background-color: $gray-lighter; 272 | cursor: pointer; 273 | &:before { 274 | content:""; 275 | background-size: 20px 20px; 276 | position: absolute; 277 | width: 20px; 278 | height: 20px; 279 | bottom: 4px; 280 | right: -15px; 281 | opacity: 0; 282 | transform: scale3D(0,0,0); 283 | transition: all 0.3s ease-in-out; 284 | background-color: $gray-lighter; 285 | background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSI0NDgiIGhlaWdodD0iNDQ4IiB2aWV3Qm94PSIwIDAgNDQ4IDQ0OCI+PGcgaWQ9Imljb21vb24taWdub3JlIj4KPC9nPgo8cGF0aCBmaWxsPSIjZGI1NjU2IiBkPSJNMzI4IDIyMy4yNXEwLTQwLjI1LTIxLjc1LTczLjc1bC0xODguNSAxODguMjVxMzQuMjUgMjIuMjUgNzQuMjUgMjIuMjUgMjcuNzUgMCA1Mi44NzUtMTAuODc1dDQzLjM3NS0yOS4xMjUgMjktNDMuNjI1IDEwLjc1LTUzLjEyNXpNNzguMjUgMjk4bDE4OC43NS0xODguNXEtMzMuNzUtMjIuNzUtNzUtMjIuNzUtMzcgMC02OC4yNSAxOC4yNXQtNDkuNSA0OS43NS0xOC4yNSA2OC41cTAgNDAuNSAyMi4yNSA3NC43NXpNMzg0IDIyMy4yNXEwIDM5LjI1LTE1LjI1IDc1dC00MC44NzUgNjEuNS02MS4yNSA0MS03NC42MjUgMTUuMjUtNzQuNjI1LTE1LjI1LTYxLjI1LTQxLTQwLjg3NS02MS41LTE1LjI1LTc1IDE1LjI1LTc0Ljg3NSA0MC44NzUtNjEuMzc1IDYxLjI1LTQxIDc0LjYyNS0xNS4yNSA3NC42MjUgMTUuMjUgNjEuMjUgNDEgNDAuODc1IDYxLjM3NSAxNS4yNSA3NC44NzV6Ij48L3BhdGg+Cjwvc3ZnPgo=); 286 | } 287 | 288 | &:hover:before { 289 | opacity: 1; 290 | transform: scale3D(1,1,1); 291 | } 292 | } 293 | } 294 | 295 | .footer { 296 | padding: 20px; 297 | text-align: center; 298 | background-color: $gray-light; 299 | 300 | a { font-weight: 500;} 301 | } 302 | 303 | .footer-menu { 304 | a + a:before { content:" • "} 305 | } 306 | --------------------------------------------------------------------------------