├── src ├── img │ ├── .gitignore │ ├── blurt.gif │ └── brompt.gif ├── tile.png ├── tile-wide.png ├── apple-touch-icon-precomposed.png ├── sass │ ├── _icons.scss │ ├── _animation.scss │ ├── _variables.scss │ └── blurt.min.scss ├── 404.html ├── index.html ├── css │ └── normalize.css └── js │ └── blurt.js ├── .jshintrc ├── .gitignore ├── bower.json ├── package.json ├── LICENSE ├── README.md ├── Gruntfile.js └── dist ├── css └── blurt.min.css └── js └── blurt.min.js /src/img/.gitignore: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brijeshb42/blurt/HEAD/src/tile.png -------------------------------------------------------------------------------- /src/img/blurt.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brijeshb42/blurt/HEAD/src/img/blurt.gif -------------------------------------------------------------------------------- /src/img/brompt.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brijeshb42/blurt/HEAD/src/img/brompt.gif -------------------------------------------------------------------------------- /src/tile-wide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brijeshb42/blurt/HEAD/src/tile-wide.png -------------------------------------------------------------------------------- /src/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/brijeshb42/blurt/HEAD/src/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "maxerr" : 50, 3 | "browser": true, 4 | "strict": false, 5 | "quotmark": "single", 6 | "white": false, 7 | "globals": { 8 | "console": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .sass-cache/ 3 | .tmp/ 4 | ref/ 5 | _site/ 6 | _layouts/ 7 | Gruntfile.sample.js 8 | src/css/blurt*.css 9 | src/js/blurt.min.js 10 | bower_components/ 11 | *.zip 12 | -------------------------------------------------------------------------------- /src/sass/_icons.scss: -------------------------------------------------------------------------------- 1 | .#{$namespace}-icon{ 2 | width: 80px; 3 | height: 80px; 4 | margin: 0 auto; 5 | border-radius: 50%; 6 | border: 4px solid $color-info; 7 | margin-bottom: 10px; 8 | 9 | div{ 10 | position: absolute; 11 | } 12 | } 13 | 14 | .#{$namespace}-icon-success{ 15 | border-color: $color-success; 16 | 17 | div{ 18 | background-color: $color-success; 19 | height: 5px; 20 | position: relative; 21 | } 22 | 23 | .#{$namespace}-lt{ 24 | width: 21px; 25 | top: 48px; 26 | left: 18px; 27 | transform: rotate(46deg); 28 | } 29 | 30 | .#{$namespace}-rt{ 31 | width: 47px; 32 | top: 35px; 33 | left: 27px; 34 | transform: rotate(-46deg); 35 | } 36 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blurt", 3 | "version": "1.0.2", 4 | "homepage": "http://bitwiser.in/blurt/", 5 | "authors": [ 6 | "brijeshb42" 7 | ], 8 | "description": "A javascript default alert, confirm and prompt replacement.", 9 | "main": [ 10 | "dist/css/blurt.min.css", 11 | "dist/js/blurt.min.js" 12 | ], 13 | "keywords": [ 14 | "alert", 15 | "confirm", 16 | "prompt", 17 | "blurt", 18 | "brompt", 19 | "bunfirm", 20 | "javascript" 21 | ], 22 | "license": "MIT", 23 | "ignore": [ 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests", 28 | ".sass-cache", 29 | "src", 30 | ".gitignore", 31 | "Gruntfile.js", 32 | ".jshintrc", 33 | "package.json", 34 | "bower.json" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blurt", 3 | "version": "1.0.2", 4 | "description": "A javascript default alert, confirm and prompt replacement", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/brijeshb42/blurt.git" 12 | }, 13 | "keywords": [ 14 | "alert", 15 | "confirm", 16 | "prompt", 17 | "blurt", 18 | "brompt", 19 | "bunfirm" 20 | ], 21 | "author": "brijeshb42", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/brijeshb42/blurt/issues" 25 | }, 26 | "homepage": "https://github.com/brijeshb42/blurt", 27 | "devDependencies": { 28 | "grunt": "^0.4.5", 29 | "grunt-contrib-clean": "^0.6.0", 30 | "grunt-contrib-compass": "^1.0.1", 31 | "grunt-contrib-concat": "^0.5.0", 32 | "grunt-contrib-jshint": "^0.10.0", 33 | "grunt-contrib-uglify": "^0.6.0", 34 | "grunt-contrib-watch": "^0.6.1", 35 | "load-grunt-tasks": "^0.6.0" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/sass/_animation.scss: -------------------------------------------------------------------------------- 1 | @mixin keyframes($animation-name) { 2 | @-webkit-keyframes #{$animation-name} { 3 | @content; 4 | } 5 | @-moz-keyframes #{$animation-name} { 6 | @content; 7 | } 8 | @keyframes #{$animation-name} { 9 | @content; 10 | } 11 | } 12 | 13 | @mixin animation($str) { 14 | -webkit-animation: #{$str}; 15 | -moz-animation: #{$str}; 16 | animation: #{$str}; 17 | } 18 | 19 | @include keyframes(fadeInAnim){ 20 | 0% {transform: scale(1 - $dialog-anim-diff);} 21 | 25% {transform: scale(1);} 22 | 75% {transform: scale(1 + $dialog-anim-diff);} 23 | 100% {transform: scale(1);} 24 | } 25 | 26 | @include keyframes(fadeOutAnim){ 27 | 0% {transform: scale(1);} 28 | 10% {transform: scale(1 - $dialog-anim-diff);} 29 | 100% {transform: scale(0.4);} 30 | } 31 | 32 | .#{$namespace}-dialog-anim-show{ 33 | @include animation(fadeInAnim $dialog-anim-duration); 34 | } 35 | 36 | .#{$namespace}-dialog-anim-hide{ 37 | @include animation(fadeOutAnim $dialog-anim-out-duration); 38 | -webkit-animation-timing-function: ease-out; 39 | -o-animation-timing-function: ease-out; 40 | animation-timing-function: ease-out; 41 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Bitwiser.in 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /src/sass/_variables.scss: -------------------------------------------------------------------------------- 1 | $namespace: 'bl'; 2 | 3 | $overlay-opacity : 0.7; 4 | $overlay-zindex : 10000; 5 | $overlay-color : #000000; 6 | 7 | $color-success : #359CFC; 8 | $color-error : #C93232; 9 | $color-default : #B6B6B6; 10 | $color-warning : #F59E2E; 11 | $color-info : #1CD17A; 12 | 13 | $dialog-zindex : 10001; 14 | $dialog-width : 480px; 15 | $dialog-margin-left : -$dialog-width/2; 16 | 17 | $dialog-border : 0px; 18 | $dialog-border-color : #F0F0F0; 19 | $dialog-border-top-color-default : $color-default; 20 | $dialog-border-top-color-success : $color-success; 21 | $dialog-border-top-color-error : $color-error; 22 | $dialog-border-top-width : 8px; 23 | $dialog-font-size : 1.2em; 24 | $dialog-text-color : #535151; 25 | 26 | $dialog-box-shadow-hl : 0px; 27 | $dialog-box-shadow-vl : 2px; 28 | $dialog-box-shadow-blur : 5px; 29 | $dialog-box-shadow-spread : 5px; 30 | $dialog-box-shadow-color : #333; 31 | 32 | $btn-padding : 10px; 33 | $btn-bgcolor : #C2C3C4; 34 | $btn-min-width: 70px; 35 | $btn-align: center; 36 | 37 | $dialog-header-padding : 10px; 38 | $dialog-header-font-size : 2em; 39 | 40 | $dialog-content-padding : 15px; 41 | 42 | $dialog-footer-margin: 10px; 43 | 44 | $dialog-anim-duration : 0.3s; 45 | $dialog-anim-out-duration: 0.2s; 46 | $dialog-anim-diff : 0.2; -------------------------------------------------------------------------------- /src/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found 6 | 7 | 54 | 55 | 56 |

Page Not Found

57 |

Sorry, but the page you were trying to view does not exist.

58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > Checkout a similar project [medium-style-confirm](https://github.com/brijeshb42/medium-style-confirm) having a cleaner interface. 2 | 3 | # Blurt 4 | A javascript default ```alert()``` and ```prompt()``` replacement. 5 | Inspired by [sweetAlert](https://github.com/t4t5/sweetalert) but custom implementation. 6 | 7 | ## [Visit blurt project site](http://bitwiser.in/blurt/) 8 | 9 | ![blurt()](https://raw.github.com/brijeshb42/blurt/master/src/img/blurt.gif) 10 | 11 | # Installation 12 | * Just download the latest zip of [blurt](http://goo.gl/nWQoCQ). 13 | * Or install using ```bower install blurt```. 14 | * And link the ```blurt.min.css``` and ```blurt.min.js``` files in your webpage. 15 | ```html 16 | 17 | 18 | ``` 19 | 20 | * After page load, show the ```blurt``` using: 21 | ```blurt('Your message here.')``` 22 | 23 | ![blurt()](https://raw.github.com/brijeshb42/blurt/master/src/img/brompt.gif) 24 | 25 | * To use ```prompt()``` equivalent, do this: 26 | 27 | ```javascript 28 | brompt('Prompt title', function(val){ 29 | //use the val here 30 | }); 31 | ``` 32 | 33 | # Development 34 | * Clone the project ```git clone https://github.com/brijeshb42/blurt.git```. 35 | * Then ```cd``` into **blurt** directory. 36 | * ```npm install``` installs the **node modules** required during development. 37 | * Runnig ```grunt``` command initialises dev files and watches for changes made to _blurt.js_ and _scss_ files. 38 | * Make your changes to ```src/js/blurt.js``` or ```sass/*.scss```. 39 | * After making changes, ```grunt dist``` creates the final minified *css* and *js* files in dist directory. 40 | * Use the generated *blurt.min.js* and *blurt.min.css* in your web page to use _blurt_ . 41 | 42 | # Issues 43 | Report issues [here](https://github.com/brijeshb42/blurt/issues). 44 | 45 | # Bugs-to-fix 46 | * Uses css animations which may not be supported in old browsers. 47 | 48 | # Todo 49 | * Implement icons for each of the *blurt* types, i.e, success, info, error and warning. 50 | * Implement fadeIn and fadeOut to support older browsers which do not support css animation. 51 | 52 | # License 53 | MIT License 54 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | module.exports = function(grunt){ 3 | 4 | require('load-grunt-tasks')(grunt); 5 | 6 | // Project configuration 7 | grunt.initConfig({ 8 | pkg: grunt.file.readJSON('package.json'), 9 | 10 | opts: { 11 | app: 'src', 12 | dist: 'dist', 13 | tmp: '.tmp' 14 | }, 15 | 16 | jshint: { 17 | options: grunt.file.readJSON('.jshintrc'), 18 | files: ['src/js/<%= pkg.name %>.js'] 19 | }, 20 | 21 | compass: { 22 | dev: { 23 | options: { 24 | sassDir: ['<%= opts.app %>/sass'], 25 | cssDir: ['<%= opts.app %>/css'], 26 | } 27 | }, 28 | dist: { 29 | options: { 30 | sassDir: ['<%= opts.app %>/sass'], 31 | cssDir: ['<%= opts.dist %>/css'], 32 | outputStyle: 'compressed', 33 | noLineComments: true, 34 | environment: 'production' 35 | } 36 | } 37 | }, 38 | 39 | concat: { 40 | options: { 41 | separator: ';' 42 | }, 43 | dev: { 44 | src: ['<%= opts.app %>/js/<%= pkg.name %>.js'], 45 | dest: '<%= opts.tmp %>/js/concat.min.js' 46 | }, 47 | dist: { 48 | src: ['<%= opts.app %>/js/<%= pkg.name %>.js'], 49 | dest: '<%= opts.tmp %>/js/<%= pkg.name %>.min.js' 50 | } 51 | }, 52 | 53 | uglify: { 54 | options: { 55 | banner: '/*!\n'+ 56 | '* @package: <%= pkg.name %>,\n'+ 57 | '* @author: <%= pkg.author %>\n'+ 58 | '* @creationDate: <%= grunt.template.today("dd-mm-yyyy") %>\n'+ 59 | '* @license: <%= pkg.license %>\n*/\n', 60 | mangle: true 61 | }, 62 | dev: { 63 | files: { 64 | '<%= opts.app %>/js/<%= pkg.name %>.min.js': ['<%= opts.app %>/js/<%= pkg.name %>.js'] 65 | } 66 | }, 67 | dist: { 68 | files: { 69 | '<%= opts.dist %>/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] 70 | } 71 | } 72 | }, 73 | 74 | watch: { 75 | js: { 76 | files: ['<%= opts.app %>/js/<%= pkg.name %>.js'], 77 | tasks: ['jshint'], 78 | options: { 79 | reload: true, 80 | }, 81 | }, 82 | css: { 83 | files: [ 84 | '<%= opts.app %>/sass/*.scss', 85 | ], 86 | tasks: ['compass:dev'], 87 | options: { 88 | reload: true, 89 | }, 90 | } 91 | }, 92 | 93 | clean: { 94 | cache: { 95 | src: ['.sass-cache'] 96 | }, 97 | tmp: { 98 | src: ['<%= opts.tmp %>'] 99 | }, 100 | /*dist: { 101 | src: ['<%= opts.dist %>'] 102 | },*/ 103 | dev: { 104 | files: [{ 105 | src: ['<%= opts.app %>/js/<%= pkg.name %>.min.js','<%= opts.app %>/css/<%= pkg.name %>.min.css',] 106 | }] 107 | } 108 | } 109 | }); 110 | 111 | grunt.registerTask('default',['jshint','uglify:dev','compass:dev','watch']); 112 | grunt.registerTask('dist',['clean','concat:dist','uglify:dist','compass:dist']); 113 | 114 | }; -------------------------------------------------------------------------------- /dist/css/blurt.min.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes fadeInAnim{0%{transform:scale(0.8)}25%{transform:scale(1)}75%{transform:scale(1.2)}100%{transform:scale(1)}}@-moz-keyframes fadeInAnim{0%{transform:scale(0.8)}25%{transform:scale(1)}75%{transform:scale(1.2)}100%{transform:scale(1)}}@keyframes fadeInAnim{0%{transform:scale(0.8)}25%{transform:scale(1)}75%{transform:scale(1.2)}100%{transform:scale(1)}}@-webkit-keyframes fadeOutAnim{0%{transform:scale(1)}10%{transform:scale(0.8)}100%{transform:scale(0.4)}}@-moz-keyframes fadeOutAnim{0%{transform:scale(1)}10%{transform:scale(0.8)}100%{transform:scale(0.4)}}@keyframes fadeOutAnim{0%{transform:scale(1)}10%{transform:scale(0.8)}100%{transform:scale(0.4)}}.bl-dialog-anim-show{-webkit-animation:fadeInAnim 0.3s;-moz-animation:fadeInAnim 0.3s;animation:fadeInAnim 0.3s}.bl-dialog-anim-hide{-webkit-animation:fadeOutAnim 0.2s;-moz-animation:fadeOutAnim 0.2s;animation:fadeOutAnim 0.2s;-webkit-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out}.bl-hidden{display:none}.bl-box{color:#535151}.bl-box .bl-overlay{position:fixed;top:0px;right:0px;left:0px;height:100%;width:100%;background-color:#000;opacity:0.7;z-index:10000}.bl-box .bl-hidden{display:none}.bl-box .bl-dialog{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;-moz-box-shadow:0px 2px 5px 5px #333;-webkit-box-shadow:0px 2px 5px 5px #333;box-shadow:0px 2px 5px 5px #333;width:480px;margin-left:-240px;min-height:100px;position:fixed;top:10%;left:50%;z-index:10001;background-color:#fff;opacity:1;text-align:center;border-top:8px solid #B6B6B6}@media all and (max-width: 540px){.bl-box .bl-dialog{width:auto;margin-left:0;margin-right:0;left:15px;right:15px}}.bl-box button{background-color:#C2C3C4;color:white;padding:10px 20px;min-width:70px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;font-weight:bold;border:1px solid transparent;margin-right:2px;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}.bl-box button:hover{background-color:#c7c8c9;color:#535151}.bl-box button:active{background-color:#C2C3C4}.bl-box button:focus{border-color:#000000}.bl-box .bl-default{border-top-color:#B6B6B6}.bl-box .bl-default button{background-color:#B6B6B6;color:#535151}.bl-box .bl-default button:hover{background-color:#bbb}.bl-box .bl-default button:active{background-color:#B6B6B6}.bl-box .bl-default button:focus{color:#535151}.bl-box .bl-success{border-top-color:#359CFC}.bl-box .bl-success button{background-color:#359CFC}.bl-box .bl-success button:hover{background-color:#9acdfd}.bl-box .bl-success button:active{background-color:#359CFC}.bl-box .bl-error{border-top-color:#C93232}.bl-box .bl-error button{background-color:#C93232}.bl-box .bl-error button:hover{background-color:#e08181}.bl-box .bl-error button:active{background-color:#C93232}.bl-box .bl-warning{border-top-color:#F59E2E}.bl-box .bl-warning button{background-color:#F59E2E}.bl-box .bl-warning button:hover{background-color:#facb8f}.bl-box .bl-warning button:active{background-color:#F59E2E}.bl-box .bl-info{border-top-color:#1CD17A}.bl-box .bl-info button{background-color:#1CD17A}.bl-box .bl-info button:hover{background-color:#68ebac}.bl-box .bl-info button:active{background-color:#1CD17A}.bl-transform{transform:translateX(100px)}.bl-header{padding:20px 10px;border-bottom:1px solid #F0F0F0;text-align:center}.bl-header h2{margin:0px;padding:0px;font-size:2em;line-height:1em}@media all and (max-width: 540px){.bl-header{padding:5px}.bl-header h2{font-size:1.6em}}.bl-content{padding:15px 0px;border-bottom:1px solid #F0F0F0}@media all and (max-width: 540px){.bl-content{padding:7.5px}}.bl-content p{margin:0px;font-size:1.2em}.bl-prompt{padding:5px;font-size:1.5em;text-align:center;width:90%;font-family:monospace;font-weight:bold;border:0px}.bl-prompt:focus{outline:none}.bl-footer{margin:10px;text-align:center}@media all and (max-width: 540px){.bl-footer{margin:5px}}.bl-icon{width:80px;height:80px;margin:0 auto;border-radius:50%;border:4px solid #1CD17A;margin-bottom:10px}.bl-icon div{position:absolute}.bl-icon-success{border-color:#359CFC}.bl-icon-success div{background-color:#359CFC;height:5px;position:relative}.bl-icon-success .bl-lt{width:21px;top:48px;left:18px;transform:rotate(46deg)}.bl-icon-success .bl-rt{width:47px;top:35px;left:27px;transform:rotate(-46deg)} 2 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Blurt 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 42 | 43 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis corporis iure, sit. Mollitia dicta aspernatur, autem cumque enim aut debitis vitae, iusto quibusdam iure placeat rem nam saepe, eligendi doloribus. Excepturi nulla cum dolor illo enim vel quae, accusamus amet soluta cumque autem ducimus, vero laudantium iure nam dignissimos rem totam sequi. Facere delectus vero incidunt quaerat, consequatur commodi, dolor maiores atque nulla sed aspernatur veritatis quae quos cumque soluta, tenetur corrupti iusto veniam labore ullam est placeat quibusdam eveniet id. Eaque ratione praesentium quam expedita delectus ab animi atque soluta exercitationem, saepe ad fugiat facere odit qui placeat corporis.

44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, nam ea excepturi cum explicabo quod dignissimos. Nemo, ad numquam consequuntur.

52 | 53 | 54 | 55 | 56 | 57 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /src/sass/blurt.min.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; 2 | @import "compass/css3/border-radius"; 3 | @import "compass/css3/box-shadow"; 4 | @import "compass/css3/transition"; 5 | 6 | @import 'animation'; 7 | 8 | .#{$namespace}-hidden{ 9 | display: none; 10 | } 11 | 12 | .#{$namespace}-box{ 13 | 14 | color: $dialog-text-color; 15 | 16 | .#{$namespace}-overlay{ 17 | 18 | position: fixed; 19 | top: 0px; 20 | right: 0px; 21 | left: 0px; 22 | height: 100%; 23 | width: 100%; 24 | background-color: $overlay-color; 25 | opacity: $overlay-opacity; 26 | z-index: $overlay-zindex; 27 | } 28 | 29 | .#{$namespace}-hidden{ 30 | display: none; 31 | } 32 | 33 | .#{$namespace}-dialog{ 34 | 35 | /* 36 | * preserving sanity 37 | * as said by @cobyism 38 | */ 39 | -webkit-box-sizing: border-box; 40 | -moz-box-sizing: border-box; 41 | box-sizing: border-box; 42 | 43 | @include border-radius($dialog-border); 44 | @include box-shadow( 45 | $dialog-box-shadow-hl 46 | $dialog-box-shadow-vl 47 | $dialog-box-shadow-blur 48 | $dialog-box-shadow-spread 49 | $dialog-box-shadow-color); 50 | 51 | width: $dialog-width; 52 | margin-left: $dialog-margin-left; 53 | min-height: 100px; 54 | position: fixed; 55 | top: 10%; 56 | left: 50%; 57 | z-index: $dialog-zindex; 58 | background-color: #fff; 59 | opacity: 1; 60 | text-align: center; 61 | border-top: $dialog-border-top-width solid $dialog-border-top-color-default; 62 | 63 | //@include animation($dialog-anim-duration ease-in-out slide); 64 | 65 | //@include single-transition(all, 1s, ease-in-out); 66 | 67 | @media all and (max-width: 540px) { 68 | width: auto; 69 | margin-left: 0; 70 | margin-right: 0; 71 | left: 15px; 72 | right: 15px; 73 | } 74 | 75 | } 76 | 77 | button{ 78 | background-color: $btn-bgcolor; 79 | color: white; 80 | padding: $btn-padding $btn-padding*2; 81 | min-width: $btn-min-width; 82 | @include border-radius($dialog-border); 83 | font-weight: bold; 84 | border: 1px solid transparent; 85 | margin-right: 2px; 86 | @include single-transition(all, 0.3s, ease); 87 | 88 | &:hover{ 89 | background-color: lighten($btn-bgcolor, 2%); 90 | color: $dialog-text-color; 91 | } 92 | &:active{ 93 | background-color: $btn-bgcolor; 94 | } 95 | &:focus{ 96 | border-color: #000000; 97 | } 98 | } 99 | 100 | .#{$namespace}-default{ 101 | border-top-color: $color-default; 102 | 103 | button{ 104 | background-color: $color-default; 105 | color: $dialog-text-color; 106 | 107 | &:hover{ 108 | background-color: lighten($color-default, 2%); 109 | } 110 | &:active{ 111 | background-color: $color-default; 112 | } 113 | &:focus{ 114 | color: $dialog-text-color; 115 | } 116 | } 117 | } 118 | 119 | .#{$namespace}-success{ 120 | border-top-color: $color-success; 121 | 122 | button{ 123 | background-color: $color-success; 124 | &:hover{ 125 | background-color: lighten($color-success, 20%); 126 | } 127 | &:active{ 128 | background-color: $color-success; 129 | } 130 | 131 | } 132 | } 133 | 134 | .#{$namespace}-error{ 135 | border-top-color: $color-error; 136 | 137 | button{ 138 | background-color: $color-error; 139 | &:hover{ 140 | background-color: lighten($color-error, 20%); 141 | } 142 | &:active{ 143 | background-color: $color-error; 144 | } 145 | } 146 | } 147 | 148 | .#{$namespace}-warning{ 149 | border-top-color: $color-warning; 150 | 151 | button{ 152 | background-color: $color-warning; 153 | &:hover{ 154 | background-color: lighten($color-warning, 20%); 155 | } 156 | &:active{ 157 | background-color: $color-warning; 158 | } 159 | } 160 | } 161 | 162 | .#{$namespace}-info{ 163 | border-top-color: $color-info; 164 | 165 | button{ 166 | background-color: $color-info; 167 | &:hover{ 168 | background-color: lighten($color-info, 20%); 169 | } 170 | &:active{ 171 | background-color: $color-info; 172 | } 173 | } 174 | } 175 | 176 | } 177 | 178 | .#{$namespace}-transform{ 179 | transform: translateX(100px); 180 | } 181 | 182 | .#{$namespace}-header{ 183 | 184 | padding: $dialog-header-padding*2 $dialog-header-padding; 185 | border-bottom: 1px solid $dialog-border-color; 186 | text-align: center; 187 | 188 | h2{ 189 | margin: 0px; 190 | padding: 0px; 191 | font-size: $dialog-header-font-size; 192 | line-height: $dialog-header-font-size/2; 193 | } 194 | 195 | @media all and (max-width: 540px) { 196 | padding: $dialog-header-padding/2; 197 | h2{ 198 | font-size: $dialog-header-font-size*0.8; 199 | } 200 | } 201 | } 202 | 203 | .#{$namespace}-content{ 204 | padding: $dialog-content-padding 0px; 205 | border-bottom: 1px solid $dialog-border-color; 206 | 207 | @media all and (max-width: 540px) { 208 | padding: $dialog-content-padding/2; 209 | } 210 | 211 | p{ 212 | margin: 0px; 213 | font-size: $dialog-font-size; 214 | } 215 | } 216 | 217 | .#{$namespace}-prompt{ 218 | padding: 5px; 219 | font-size: 1.5em; 220 | text-align: center; 221 | width: 90%; 222 | font-family: monospace; 223 | font-weight: bold; 224 | border: 0px; 225 | 226 | &:focus{ 227 | outline: none; 228 | } 229 | } 230 | 231 | .#{$namespace}-footer{ 232 | margin: $dialog-footer-margin; 233 | text-align: $btn-align; 234 | 235 | @media all and (max-width: 540px) { 236 | margin: $dialog-footer-margin/2; 237 | } 238 | } 239 | 240 | @import 'icons'; -------------------------------------------------------------------------------- /dist/js/blurt.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @package: blurt, 3 | * @author: brijeshb42 4 | * @creationDate: 14-10-2014 5 | * @license: MIT 6 | */ 7 | !function(a,b){function c(a){a.keyCode==m.key.ESC&&g()}function d(a){a?(b.addEventListener("keyup",c),q.addEventListener("click",g),o=!0):o&&(b.removeEventListener("keyup",c),q.removeEventListener("click",g))}function e(){b.body.appendChild(p)}function f(b){var c={title:"Title",text:null,type:"info",okButtonText:"OK",escapable:!1};switch(b.length){case 0:return a.console.error("At least 1 argument expected."),null;case 1:if("string"==typeof b[0])c.title=b[0],c.text=null,c.type=null;else if("object"==typeof b[0]){var d=b[0];c.title=d.title||c.title,c.text=d.text||c.text,c.type=d.type||c.type,c.okButtonText=d.okButtonText||c.okButtonText,c.escapable=d.escapable||c.escapable}break;case 2:if("string"!=typeof b[0]||"string"!=typeof b[1])return a.console.error("Invalid argument type."),null;c.title=b[0],c.text=b[1],c.type="default";break;case 3:if("string"!=typeof b[0]||"string"!=typeof b[1]||"string"!=typeof b[2])return a.console.error("Invalid argument type."),null;c.title=b[0],c.text=b[1],c.type=b[2]}return""===c.text&&(c.text=null),c}function g(){m.util.removeClass(r,"dialog-anim-show"),m.util.addClass(r,"dialog-anim-hide"),setTimeout(function(){m.util.setClass(p,m.cls.box),m.util.hide(p),m.util.setClass(r,m.cls.dialog),y.removeEventListener("click",g)},m.constant.hideInterval)}function h(b){var c={title:"Title",text:"Enter value",type:"info",okButtonText:"OK",cancelButtonText:"Cancel",escapable:!1,onConfirm:null,onCancel:null};switch(b.length){case 0:case 1:if("object"!=typeof b[0])return a.console.error("At least 2 arguments or 1 object expected"),null;var d=b[0];c.title=d.title||c.title,c.text=d.text||c.text,c.type=d.type||c.type,c.okButtonText=d.okButtonText||c.okButtonText,c.cancelButtonText=d.cancelButtonText||c.cancelButtonText,c.escapable=d.escapable||c.escapable,d.onConfirm&&"function"==typeof d.onConfirm&&(c.onConfirm=d.onConfirm),d.onCancel&&"function"==typeof d.onCancel&&(c.onCancel=d.onCancel);break;case 2:return"string"==typeof b[0]&&"function"==typeof b[1]?(c.title=b[0],c.onConfirm=b[1],c):(a.console.error("Required: 1st string, 2nd function."),null);case 3:if("string"!=typeof b[0]||"function"!=typeof b[1]||"function"!=typeof b[2])return a.console.error("Required: 1st string, 2nd function and 3rd function."),null;c.title=b[0],c.onConfirm=b[1],c.onCancel=b[2]}return c}function i(){g(),setTimeout(function(){null!==A.onConfirm&&A.onConfirm(v.value)},m.constant.hideInterval),y.removeEventListener("click",j),v.removeEventListener("keydown",j),z.removeEventListener("click",k)}function j(a){return a.target===v?void(a.keyCode==m.key.ENTER&&i()):void i()}function k(){g(),setTimeout(function(){null!==A.onCancel&&A.onCancel()},m.constant.hideInterval),z.removeEventListener("click",k)}function l(a){d(a.escapable),b.body.appendChild(p)}var m=m||{};m.cls={box:"box",overlay:"overlay",dialog:"dialog",header:"header",content:"content",footer:"footer",btn:"btn","default":"default",error:"error",success:"success",warning:"warning",info:"info",hidden:"hidden",prompt:"prompt"},m.constant={hideInterval:200},m.key={ESC:27,ENTER:13},m.nsp="bl-",m.ns=function(a){return m.nsp+a},m.util={hasClass:function(a,b){var c=a.getAttribute("class");if(null===c)return!1;c=c.split(" ");for(var d=0;d