From 49f54ea2a9dda7ad742e4186da0bdf886d5a8101 Mon Sep 17 00:00:00 2001 From: Philippe Assis Date: Thu, 14 Apr 2016 20:45:09 -0300 Subject: [PATCH] bootstrap --- .tags | 112 +++++++++++++++++++++------------- .tags1 | 6 ++ dist/css/custom-alert.css | 2 +- dist/css/custom-alert.css.map | 2 +- dist/css/custom-alert.min.css | 6 ++ dist/js/custom-alert.js | 52 ++++++++++++---- dist/styl/functions.styl | 54 ++++++++-------- dist/styl/structure.styl | 47 +++++++------- dist/styl/variables.styl | 46 ++++++-------- example.html | 2 +- gulpfile.js | 4 +- 11 files changed, 196 insertions(+), 137 deletions(-) create mode 100644 .tags1 create mode 100755 dist/css/custom-alert.min.css diff --git a/.tags b/.tags index 8e4dd96..54527f3 100644 --- a/.tags +++ b/.tags @@ -4,36 +4,6 @@ !_TAG_PROGRAM_NAME Exuberant Ctags // !_TAG_PROGRAM_URL http://ctags.sourceforge.net /official site/ !_TAG_PROGRAM_VERSION 5.9~svn20110310 // -createDiv /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ createDiv: function (attr, name, parent) {$/;" function line:14 -customKit.createDiv /var/www/html/gits/custom-alert/dist/js/customAlert.js /^var customKit = {$/;" method line:13 -mergeObjects /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ mergeObjects: function (obj1, obj2) {$/;" function line:25 -customKit.mergeObjects /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ },$/;" method line:24 -customAlert /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function customAlert(options) {$/;" function line:37 -customAlert.defaultOptions.ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.defaultOptions = {$/;" property line:39 -customAlert.defaultOptions.title /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ 'ok': 'OK',$/;" property line:40 -render /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.render = function (dialog) {$/;" function line:64 -customAlert.render /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.render = function (dialog) {$/;" method line:64 -ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.ok = function () {$/;" function line:74 -customAlert.ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.ok = function () {$/;" method line:74 -customAlert /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function customAlert(options) {$/;" class line:37 -customConfirm /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function customConfirm(options) {$/;" function line:82 -customConfirm.defaultOptions.yes /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.defaultOptions = {$/;" property line:84 -customConfirm.defaultOptions.no /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ 'yes': 'YES',$/;" property line:85 -customConfirm.defaultOptions.title /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ 'no': 'NO',$/;" property line:86 -customConfirm.defaultOptions.return /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ 'title': 'Confirm it:',$/;" property line:87 -callback /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.callback = function (data) {$/;" function line:111 -customConfirm.callback /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.callback = function (data) {$/;" method line:111 -render /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.render = function (dialog, callback) {$/;" function line:115 -customConfirm.render /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.render = function (dialog, callback) {$/;" method line:115 -ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.ok = function () {$/;" function line:126 -customConfirm.ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.ok = function () {$/;" method line:126 -cancel /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.cancel = function () {$/;" function line:138 -customConfirm.cancel /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.cancel = function () {$/;" method line:138 -end /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.end = function () {$/;" function line:148 -customConfirm.end /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.end = function () {$/;" method line:148 -clear /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.clear = function () {$/;" function line:154 -customConfirm.clear /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.clear = function () {$/;" method line:154 -customConfirm /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function customConfirm(options) {$/;" class line:82 * window.customAlert e window.customConfirm devem permanecer com esses nomes /var/www/html/gits/custom-alert/dist/css/customAlert.css /^ * window.customAlert e window.customConfirm devem permanecer com esses nomes,$/;" function line:10 #customAlert-overlay /var/www/html/gits/custom-alert/dist/css/customAlert.css /^#customAlert-overlay {$/;" function line:14 #customConfirm-overlay /var/www/html/gits/custom-alert/dist/css/customAlert.css /^#customConfirm-overlay {$/;" function line:26 @@ -61,17 +31,6 @@ customConfirm /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function #customConfirm .footer /var/www/html/gits/custom-alert/dist/css/customAlert.css /^#customConfirm .footer {$/;" function line:128 #customAlert button /var/www/html/gits/custom-alert/dist/css/customAlert.css /^#customAlert button,$/;" function line:133 #customConfirm button /var/www/html/gits/custom-alert/dist/css/customAlert.css /^#customConfirm button {$/;" function line:134 -html /var/www/html/gits/custom-alert/example.html /^$/;" function line:2 -head /var/www/html/gits/custom-alert/example.html /^$/;" function line:3 -meta /var/www/html/gits/custom-alert/example.html /^ $/;" function line:4 -title /var/www/html/gits/custom-alert/example.html /^ Example Custom Alert<\/title>$/;" function line:5 -link /var/www/html/gits/custom-alert/example.html /^ <link href="dist\/css\/customAlert.css" rel="stylesheet">$/;" function line:6 -body /var/www/html/gits/custom-alert/example.html /^<body>$/;" function line:8 -h /var/www/html/gits/custom-alert/example.html /^<h1>Custom Alert<\/h1>$/;" function line:9 -h /var/www/html/gits/custom-alert/example.html /^<h2>Por: Philippe Assis<\/h2>$/;" function line:11 -a /var/www/html/gits/custom-alert/example.html /^<a href="https:\/\/github.com\/PhilippeAssis\/custom-alert">github.com\/PhilippeAssis\/custom-alert<\/a>$/;" function line:12 -script /var/www/html/gits/custom-alert/example.html /^<script src="dist\/js\/customAlert.js" language="javascript"><\/script>$/;" function line:13 -script /var/www/html/gits/custom-alert/example.html /^<script>$/;" function line:14 Custom Alert /var/www/html/gits/custom-alert/README.md /^#Custom Alert$/;" function line:1 Documentação e exemplos: /var/www/html/gits/custom-alert/README.md /^##Documentação e exemplos:$/;" function line:4 name /var/www/html/gits/custom-alert/bower.json /^ "name": "custom-alert",$/;" function line:2 @@ -82,3 +41,74 @@ main /var/www/html/gits/custom-alert/bower.json /^ "main": "customAlert.js",$/; moduleType /var/www/html/gits/custom-alert/bower.json /^ "moduleType": [],$/;" function line:9 license /var/www/html/gits/custom-alert/bower.json /^ "license": "MIT",$/;" function line:10 ignore /var/www/html/gits/custom-alert/bower.json /^ "ignore": [$/;" function line:11 +createDiv /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ createDiv: function (attr, name, parent) {$/;" function line:14 +customKit.createDiv /var/www/html/gits/custom-alert/dist/js/customAlert.js /^var customKit = {$/;" method line:13 +mergeObjects /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ mergeObjects: function (obj1, obj2) {$/;" function line:25 +customKit.mergeObjects /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ },$/;" method line:24 +customAlert /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function customAlert(options) {$/;" function line:37 +customAlert.defaultOptions.ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.defaultOptions = {$/;" property line:39 +customAlert.defaultOptions.title /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ 'ok': 'OK',$/;" property line:40 +render /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.render = function (dialog) {$/;" function line:64 +customAlert.render /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.render = function (dialog) {$/;" method line:64 +ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.ok = function () {$/;" function line:74 +customAlert.ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.ok = function () {$/;" method line:74 +customAlert /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function customAlert(options) {$/;" class line:37 +customConfirm /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function customConfirm(options) {$/;" function line:82 +customConfirm.defaultOptions.yes /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.defaultOptions = {$/;" property line:84 +customConfirm.defaultOptions.no /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ 'yes': 'YES',$/;" property line:85 +customConfirm.defaultOptions.title /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ 'no': 'NO',$/;" property line:86 +customConfirm.defaultOptions.return /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ 'title': 'Confirm it:',$/;" property line:87 +callback /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.callback = function (data) {$/;" function line:111 +customConfirm.callback /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.callback = function (data) {$/;" method line:111 +render /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.render = function (dialog, callback) {$/;" function line:115 +customConfirm.render /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.render = function (dialog, callback) {$/;" method line:115 +ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.ok = function () {$/;" function line:126 +customConfirm.ok /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.ok = function () {$/;" method line:126 +cancel /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.cancel = function () {$/;" function line:138 +customConfirm.cancel /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.cancel = function () {$/;" method line:138 +end /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.end = function () {$/;" function line:148 +customConfirm.end /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.end = function () {$/;" method line:148 +clear /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.clear = function () {$/;" function line:154 +customConfirm.clear /var/www/html/gits/custom-alert/dist/js/customAlert.js /^ this.clear = function () {$/;" method line:154 +customConfirm /var/www/html/gits/custom-alert/dist/js/customAlert.js /^function customConfirm(options) {$/;" class line:82 +html /var/www/html/gits/custom-alert/example.html /^<html>$/;" function line:2 +head /var/www/html/gits/custom-alert/example.html /^<head>$/;" function line:3 +meta /var/www/html/gits/custom-alert/example.html /^ <meta charset="UTF-8">$/;" function line:4 +title /var/www/html/gits/custom-alert/example.html /^ <title>Example Custom Alert<\/title>$/;" function line:5 +link /var/www/html/gits/custom-alert/example.html /^ <link href="dist\/css\/custom-alert.min.css" rel="stylesheet">$/;" function line:6 +body /var/www/html/gits/custom-alert/example.html /^<body>$/;" function line:8 +h /var/www/html/gits/custom-alert/example.html /^<h1>Custom Alert<\/h1>$/;" function line:9 +h /var/www/html/gits/custom-alert/example.html /^<h2>Por: Philippe Assis<\/h2>$/;" function line:11 +pre /var/www/html/gits/custom-alert/example.html /^<pre>$/;" function line:13 +a /var/www/html/gits/custom-alert/example.html /^<a href="https:\/\/github.com\/PhilippeAssis\/custom-alert">github.com\/PhilippeAssis\/custom-alert<\/a>$/;" function line:22 +script /var/www/html/gits/custom-alert/example.html /^<script src="dist\/js\/custom-alert.js" language="javascript"><\/script>$/;" function line:23 +script /var/www/html/gits/custom-alert/example.html /^<script>$/;" function line:24 +createDiv /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ createDiv: function (attr, parent) {$/;" function line:14 +customKit.createDiv /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^var customKit = {$/;" method line:13 +mergeObjects /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ mergeObjects: function (obj1, obj2) {$/;" function line:29 +customKit.mergeObjects /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ },$/;" method line:28 +customAlert /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^function customAlert(options) {$/;" function line:41 +customAlert.defaultOptions.ok /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.defaultOptions = {$/;" property line:43 +customAlert.defaultOptions.title /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ 'ok': 'OK',$/;" property line:44 +customAlert /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^function customAlert(options) {$/;" class line:41 +render /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.render = function (dialog) {$/;" function line:87 +render /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.render = function (dialog) {$/;" function line:87 +ok /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.ok = function () {$/;" function line:99 +ok /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.ok = function () {$/;" class line:99 +customConfirm /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^function customConfirm(options) {$/;" function line:111 +customConfirm.defaultOptions.yes /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.defaultOptions = {$/;" property line:120 +customConfirm.defaultOptions.no /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ 'yes': 'YES',$/;" property line:121 +customConfirm.defaultOptions.title /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ 'no': 'NO',$/;" property line:122 +customConfirm.defaultOptions.return /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ 'title': 'Confirm it:',$/;" property line:123 +customConfirm /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^function customConfirm(options) {$/;" class line:111 +callback /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.callback = function (data) {$/;" function line:176 +callback /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.callback = function (data) {$/;" function line:176 +render /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.render = function (dialog, callback) {$/;" function line:179 +render /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.render = function (dialog, callback) {$/;" class line:179 +ok /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.ok = function () {$/;" function line:192 +cancel /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.cancel = function () {$/;" function line:212 +cancel /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.cancel = function () {$/;" class line:212 +end /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.end = function () {$/;" function line:229 +end /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.end = function () {$/;" function line:229 +clear /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.clear = function () {$/;" function line:235 +clear /var/www/html/gits/custom-alert/dist/js/custom-alert.js /^ this.clear = function () {$/;" class line:235 diff --git a/.tags1 b/.tags1 new file mode 100644 index 0000000..6eef69e --- /dev/null +++ b/.tags1 @@ -0,0 +1,6 @@ +!_TAG_FILE_FORMAT 2 /extended format; --format=1 will not append ;" to lines/ +!_TAG_FILE_SORTED 0 /0=unsorted, 1=sorted, 2=foldcase/ +!_TAG_PROGRAM_AUTHOR Darren Hiebert /dhiebert@users.sourceforge.net/ +!_TAG_PROGRAM_NAME Exuberant Ctags // +!_TAG_PROGRAM_URL http://ctags.sourceforge.net /official site/ +!_TAG_PROGRAM_VERSION 5.9~svn20110310 // diff --git a/dist/css/custom-alert.css b/dist/css/custom-alert.css index b16e64d..52f3b07 100755 --- a/dist/css/custom-alert.css +++ b/dist/css/custom-alert.css @@ -1,2 +1,2 @@ -#customAlert-overlay,#customConfirm-overlay{display:none;opacity:.5;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10;background:#000}#customAlert{background-color:#fff}#customAlert .customalert_footer button{background-color:#bababa;color:#5e5e5e}#customAlert .customalert_footer button:hover{background-color:#666;color:#e6e6e6}#customConfirm{background-color:#fff}#customConfirm .customalert_footer button.customalert_confirm{margin-right:10px;background-color:#68bb74;color:#edf7ef}#customConfirm .customalert_footer button.customalert_confirm:hover{background-color:#3f8d4b;color:#dcefdf}#customConfirm .customalert_footer button.customalert_cancel{background-color:#e2614b;color:#fbece9}#customConfirm .customalert_footer button.customalert_cancel:hover{background-color:#b0321c;color:#f8d8d3}#customAlert,#customConfirm{font-family:arial,helvetica;border-radius:5px;width:550px;font-size:1em;display:none;position:fixed;max-width:100vw;max-height:100vh;z-index:1000;top:5%;left:50%;padding:10px;box-shadow:0 0 10px 0 rgba(0,0,0,.3);-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.3);margin-left:-275px}@media (min-width:321px){#customAlert,#customConfirm{top:25%}}@media (max-width:550px){#customAlert,#customConfirm{margin-left:-50vw}}#customAlert .customalert_header,#customConfirm .customalert_header{background:#fff;color:#232323;text-align:center;font-size:.75em}#customAlert .customalert_body,#customConfirm .customalert_body{padding:10px;color:#232323;font-size:1.2em;background:#fff;text-align:center}#customAlert .customalert_footer,#customConfirm .customalert_footer{background:#fff;text-align:center}#customAlert .customalert_footer button,#customConfirm .customalert_footer button{width:100px;margin-top:5px;margin-bottom:5px;padding:5px;word-wrap:break-word;font-family:arial,helvetica;border:none} +#customAlert-overlay,#customConfirm-overlay{display:none;opacity:.5;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10;background:#000}.customalert{background-color:#fff;font-family:arial;border-radius:5px;width:550px;font-size:1em;display:none;position:fixed;max-width:100vw;max-height:100vh;z-index:1000;top:5%;left:50%;padding:10px;box-shadow:0 0 10px 0 rgba(0,0,0,.3);-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.3);margin-left:-275px}@media (min-width:321px){.customalert{top:25%}}@media (max-width:550px){.customalert{margin-left:-50vw}}.customalert .customalert_header{background:#fff;color:#232323;text-align:center;font-size:.75em}.customalert .customalert_body{padding:10px;color:#232323;font-size:1.2em}.customalert .customalert_body,.customalert .customalert_footer{background:#fff;text-align:center}.customalert.customalert_confirm .customalert_footer button.customalert_confirm{margin-right:10px} /*# sourceMappingURL=custom-alert.css.map */ diff --git a/dist/css/custom-alert.css.map b/dist/css/custom-alert.css.map index c6cf730..48bf065 100644 --- a/dist/css/custom-alert.css.map +++ b/dist/css/custom-alert.css.map @@ -1 +1 @@ -{"version":3,"sources":["structure.styl","functions.styl","custom-alert.css"],"names":[],"mappings":"AAGA,4CCwBE,aAAA,AACA,WAAA,AACA,eAAA,AACA,MAAA,AACA,OAAA,AACA,YAAA,AACA,aAAA,AACA,WAAA,AACA,eAAA,CCdD,AFfD,aACE,qBAAA,CEiBD,AFfG,wCCiEF,yBAAA,AACA,aAAA,CC/CD,ADyCC,8CACE,sBAAA,AACA,aAAA,CCvCH,AFpBD,eACE,qBAAA,CEsBD,AFnBK,8DACE,kBAAA,ACyDN,yBAAA,AACA,aAAA,CCnCD,AD6BC,oEACE,yBAAA,AACA,aAAA,CC3BH,AFvBO,6DCqDN,yBAAA,AACA,aAAA,CC3BD,ADqBC,mEACE,yBAAA,AACA,aAAA,CCnBH,AF5BD,4BCjBE,4BAAA,AACA,kBAAA,AACA,YAAA,AACA,cAAA,AACA,aAAA,AACA,eAAA,AACA,gBAAA,AACA,iBAAA,AACA,aAAA,AACA,OAAA,AAGA,SAAA,AACA,aAAA,AAlBA,qCAAA,AACA,6CAAA,AA6DA,kBAAA,CCMD,ADrDyB,yBAAA,4BACtB,OAAA,CCyDD,CACF,ADXsB,yBAAA,4BACnB,iBAAA,CCeD,CACF,AD3CC,oEACE,gBAAA,AACA,cAAA,AACA,kBAAA,AACA,eAAA,CC8CH,AD7CC,gEACE,aAAA,AACA,cAAA,AACA,gBAAA,AACA,gBAAA,AACA,iBAAA,CCgDH,AD/CC,oEACE,gBAAA,AACA,iBAAA,CCkDH,AF1EK,kFC2BJ,YAAA,AACA,eAAA,AACA,kBAAA,AACA,YAAA,AACA,qBAAA,AACA,4BAAA,AACA,WAAA,CCmDD","file":"custom-alert.css","sourcesContent":["#customAlert-overlay\n baseOverlay(backgroundOverlay)\n\n#customConfirm-overlay\n baseOverlay(backgroundConfirmOverlay)\n\n#customAlert\n background-color background\n .customalert_footer\n button\n buttonsColors(colorButton, backgroundButton)\n\n#customConfirm\n background-color backgroundConfirm\n .customalert_footer\n button\n &.customalert_confirm\n margin-right 10px\n if disable-bootstrap\n buttonsColors(colorButtonTrue, backgroundButtonTrue)\n if disable-bootstrap\n &.customalert_cancel\n buttonsColors(colorButtonFalse, backgroundButtonFalse)\n\n#customAlert, #customConfirm\n baseAlert()\n if disable-bootstrap\n .customalert_footer\n button\n buttonStyle()\n","//Shadow function\nboxShadow(x, y, blur, spread, color)\n box-shadow: x y blur spread color\n -webkit-box-shadow: x y blur spread color\n\n//Default alert\nbaseAlert()\n font-family fontFamily\n border-radius borderRadius\n width width\n font-size fontSize\n display none\n position fixed\n max-width 100vw\n max-height 100vh\n z-index 10 * 100\n top 5%\n @media (min-width: 321px)\n top 25%\n left 50%\n padding 10px\n boxShadow(0, 0, 10px, 0, rgba(0, 0, 0, 0.3))\n marginLeft(width)\n baseContent(backgroundHeader, backgroundBody, backgroundFooter)\n\n//Default Overlay\nbaseOverlay(backg)\n display none\n opacity 0.5\n position fixed\n top 0px\n left 0px\n width 100vw\n height 100vh\n z-index 10\n background backg\n\n//Default Content \"header,body,footer'\nbaseContent(header, body, footer)\n .customalert_header\n background header\n color #232323\n text-align center\n font-size 0.75em\n .customalert_body\n padding 10px\n color #232323\n font-size 1.2em\n background body\n text-align center\n .customalert_footer\n background footer\n text-align center\n\nbuttonStyle()\n width 100px\n margin-top 5px\n margin-bottom 5px\n padding 5px\n word-wrap break-word\n font-family fontFamily\n border none\n\nmarginLeft(wd)\n margin-left (wd / 2) * -1;\n @media (max-width: wd)\n margin-left (100vw / 2) * -1;\n\nhoverButton(color)\n &:hover\n background-color lightness(color, 40%)\n color lightness(color, 90%)\n\nbuttonsColors(color, bgcolor)\n background-color bgcolor\n color color\n hoverButton(color)\n","#customAlert-overlay {\n display: none;\n opacity: 0.5;\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: 10;\n background: #000;\n}\n#customConfirm-overlay {\n display: none;\n opacity: 0.5;\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: 10;\n background: #000;\n}\n#customAlert {\n background-color: #fff;\n}\n#customAlert .customalert_footer button {\n background-color: #bababa;\n color: #5e5e5e;\n}\n#customAlert .customalert_footer button:hover {\n background-color: #666;\n color: #e6e6e6;\n}\n#customConfirm {\n background-color: #fff;\n}\n#customConfirm .customalert_footer button.customalert_confirm {\n margin-right: 10px;\n background-color: #68bb74;\n color: #edf7ef;\n}\n#customConfirm .customalert_footer button.customalert_confirm:hover {\n background-color: #3f8d4b;\n color: #dcefdf;\n}\n#customConfirm .customalert_footer button.customalert_cancel {\n background-color: #e2614b;\n color: #fbece9;\n}\n#customConfirm .customalert_footer button.customalert_cancel:hover {\n background-color: #b0321c;\n color: #f8d8d3;\n}\n#customAlert,\n#customConfirm {\n font-family: arial, helvetica;\n border-radius: 5px;\n width: 550px;\n font-size: 1em;\n display: none;\n position: fixed;\n max-width: 100vw;\n max-height: 100vh;\n z-index: 1000;\n top: 5%;\n left: 50%;\n padding: 10px;\n box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);\n -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);\n margin-left: -275px;\n}\n@media (min-width: 321px) {\n #customAlert,\n #customConfirm {\n top: 25%;\n }\n}\n@media (max-width: 550px) {\n #customAlert,\n #customConfirm {\n margin-left: -50vw;\n }\n}\n#customAlert .customalert_header,\n#customConfirm .customalert_header {\n background: #fff;\n color: #232323;\n text-align: center;\n font-size: 0.75em;\n}\n#customAlert .customalert_body,\n#customConfirm .customalert_body {\n padding: 10px;\n color: #232323;\n font-size: 1.2em;\n background: #fff;\n text-align: center;\n}\n#customAlert .customalert_footer,\n#customConfirm .customalert_footer {\n background: #fff;\n text-align: center;\n}\n#customAlert .customalert_footer button,\n#customConfirm .customalert_footer button {\n width: 100px;\n margin-top: 5px;\n margin-bottom: 5px;\n padding: 5px;\n word-wrap: break-word;\n font-family: arial, helvetica;\n border: none;\n}\n"],"sourceRoot":"/source/"} \ No newline at end of file +{"version":3,"sources":["structure.styl","functions.styl","custom-alert.css"],"names":[],"mappings":"AAAA,4CC2BE,aAAA,AACA,WAAA,AACA,eAAA,AACA,MAAA,AACA,OAAA,AACA,YAAA,AACA,aAAA,AACA,WAAA,AACA,eAAA,CCxBD,AFRD,aACE,sBAAA,ACGA,kBAAA,AACA,kBAAA,AACA,YAAA,AACA,cAAA,AACA,aAAA,AACA,eAAA,AACA,gBAAA,AACA,iBAAA,AACA,aAAA,AACA,OAAA,AAGA,SAAA,AACA,aAAA,AAlBA,qCAAA,AACA,6CAAA,AA6DA,kBAAA,CCnCD,ADZyB,yBAAA,aACtB,OAAA,CCeD,CACF,AD+BuB,yBAAA,aACpB,iBAAA,CC5BD,CACF,ADAC,iCACE,gBAAA,AACA,cAAA,AACA,kBAAA,AACA,eAAA,CCEH,ADDC,+BACE,aAAA,AACA,cAAA,AACA,eAAA,CCKH,ADFC,gEAFE,gBAAA,AACA,iBAAA,CCOH,AFpCO,gFACE,iBAAA,CEsCT","file":"custom-alert.css","sourcesContent":["#customAlert-overlay, #customConfirm-overlay\n baseOverlay($backgroundOverlay)\n\n.customalert\n background-color $background\n baseAlert(fontFamily, $borderRadius, $fontSize, $width, $backgroundHeader, $backgroundBody, $backgroundFooter)\n if $disable-bootstrap\n .customalert_footer\n button\n buttonStyle()\n\n if $disable-bootstrap\n &.customalert_alert\n .customalert_footer\n button\n $buttonsColors($alertColorButton, $alertBackgroundButton)\n\n &.customalert_confirm\n .customalert_footer\n button\n &.customalert_confirm\n margin-right 10px\n if $disable-bootstrap\n buttonsColors($confirmColorButtonTrue, $confirmBackgroundButtonTrue)\n if $disable-bootstrap\n &.customalert_cancel\n buttonsColors($confirmColorButtonFalse, $confirmBackgroundButtonFalse)\n","//Shadow function\nboxShadow($x, $y, $blur, $spread, $color)\n box-shadow: $x $y $blur $spread $color\n -webkit-box-shadow: $x $y $blur $spread $color\n\n//Default alert\nbaseAlert(fontFamily, $borderRadius, $fontSize, $width, $backgroundHeader, $backgroundBody, $backgroundFooter)\n font-family $fontFamily\n border-radius $borderRadius\n width $width\n font-size $fontSize\n display none\n position fixed\n max-width 100vw\n max-height 100vh\n z-index 10 * 100\n top 5%\n @media (min-width: 321px)\n top 25%\n left 50%\n padding 10px\n boxShadow(0, 0, 10px, 0, rgba(0, 0, 0, 0.3))\n marginLeft($width)\n baseContent($backgroundHeader, $backgroundBody, $backgroundFooter)\n\n//Default Overlay\nbaseOverlay($backg)\n display none\n opacity 0.5\n position fixed\n top 0px\n left 0px\n width 100vw\n height 100vh\n z-index 10\n background $backg\n\n//Default Content \"header,body,footer'\nbaseContent($header, $body, $footer)\n .customalert_header\n background $header\n color #232323\n text-align center\n font-size 0.75em\n .customalert_body\n padding 10px\n color #232323\n font-size 1.2em\n background $body\n text-align center\n .customalert_footer\n background $footer\n text-align center\n\nbuttonStyle()\n width 100px\n margin-top 5px\n margin-bottom 5px\n padding 5px\n word-wrap break-word\n font-family $fontFamily\n border none\n\nmarginLeft($wd)\n margin-left ($wd / 2) * -1;\n @media (max-width: $wd)\n margin-left (100vw / 2) * -1;\n\nhoverButton($color)\n &:hover\n background-color lightness($color, 40%)\n color lightness($color, 90%)\n\nbuttonsColors($color, $bgcolor)\n background-color $bgcolor\n color $color\n hoverButton($color)\n","#customAlert-overlay,\n#customConfirm-overlay {\n display: none;\n opacity: 0.5;\n position: fixed;\n top: 0px;\n left: 0px;\n width: 100vw;\n height: 100vh;\n z-index: 10;\n background: #000;\n}\n.customalert {\n background-color: #fff;\n font-family: arial;\n border-radius: 5px;\n width: 550px;\n font-size: 1em;\n display: none;\n position: fixed;\n max-width: 100vw;\n max-height: 100vh;\n z-index: 1000;\n top: 5%;\n left: 50%;\n padding: 10px;\n box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);\n -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);\n margin-left: -275px;\n}\n@media (min-width: 321px) {\n .customalert {\n top: 25%;\n }\n}\n@media (max-width: 550px) {\n .customalert {\n margin-left: -50vw;\n }\n}\n.customalert .customalert_header {\n background: #fff;\n color: #232323;\n text-align: center;\n font-size: 0.75em;\n}\n.customalert .customalert_body {\n padding: 10px;\n color: #232323;\n font-size: 1.2em;\n background: #fff;\n text-align: center;\n}\n.customalert .customalert_footer {\n background: #fff;\n text-align: center;\n}\n.customalert.customalert_confirm .customalert_footer button.customalert_confirm {\n margin-right: 10px;\n}\n"],"sourceRoot":"/source/"} \ No newline at end of file diff --git a/dist/css/custom-alert.min.css b/dist/css/custom-alert.min.css new file mode 100755 index 0000000..b64b0b5 --- /dev/null +++ b/dist/css/custom-alert.min.css @@ -0,0 +1,6 @@ +#customAlert-overlay,#customConfirm-overlay{display:none;opacity:.5;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10;background:#000} +.customalert{background-color:#fff;font-family:arial;border-radius:5px;width:550px;font-size:1em;display:none;position:fixed;max-width:100vw;max-height:100vh;z-index:1000;top:5%;left:50%;padding:10px;box-shadow:0 0 10px 0 rgba(0,0,0,.3);-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,.3);margin-left:-275px} +@media(min-width:321px){.customalert{top:25%}}@media(max-width:550px){.customalert{margin-left:-50vw} +}.customalert .customalert_header{background:#fff;color:#232323;text-align:center;font-size:.75em} +.customalert .customalert_body{padding:10px;color:#232323;font-size:1.2em}.customalert .customalert_body,.customalert .customalert_footer{background:#fff;text-align:center} +.customalert.customalert_confirm .customalert_footer button.customalert_confirm{margin-right:10px} \ No newline at end of file diff --git a/dist/js/custom-alert.js b/dist/js/custom-alert.js index 5aca595..6c3b018 100755 --- a/dist/js/custom-alert.js +++ b/dist/js/custom-alert.js @@ -11,9 +11,13 @@ * a não ser que você saiba o que esta fazendo. */ var customKit = { - createDiv: function (attr, name, parent) { + createDiv: function (attr, parent) { var div = document.createElement("div"); - div.setAttribute(attr, name); + + for(var key in attr){ + div.setAttribute(key, attr[key]); + } + if (parent) { var parent = document.getElementById(parent) parent.appendChild(div); @@ -47,11 +51,23 @@ function customAlert(options) { this.options = this.defaultOptions; if (document.getElementById("customAlert") == null) { - customKit.createDiv("id", "customAlert-overlay"); - customKit.createDiv("id", "customAlert"); - customKit.createDiv("class", "customalert_header", "customAlert"); - customKit.createDiv("class", "customalert_body", "customAlert"); - customKit.createDiv("class", "customalert_footer", "customAlert"); + customKit.createDiv({ + "id": "customAlert-overlay", + "class": 'customalert_overlay' + }); + customKit.createDiv({ + "id": "customAlert", + "class": 'customalert customalert_alert' + }); + customKit.createDiv({ + "class": "customalert_header", + }, "customAlert"); + customKit.createDiv({ + "class": "customalert_body" + }, "customAlert"); + customKit.createDiv({ + "class": "customalert_footer" + }, "customAlert"); //Os nomes podem ser alterados, window.alert e window.Alert, ao seu gosto! window.alert = window.Alert = function (dialog, options, callback) { @@ -114,11 +130,23 @@ function customConfirm(options) { this.options = this.defaultOptions; if (document.getElementById("customConfirm") == null) { - customKit.createDiv("id", "customConfirm-overlay"); - customKit.createDiv("id", "customConfirm"); - customKit.createDiv("class", "customalert_header", "customConfirm"); - customKit.createDiv("class", "customalert_body", "customConfirm"); - customKit.createDiv("class", "customalert_footer", "customConfirm"); + customKit.createDiv({ + "id": "customConfirm-overlay", + "class": 'customalert_overlay' + }); + customKit.createDiv({ + "id": "customConfirm", + "class": 'customalert customalert_confirm' + }); + customKit.createDiv({ + "class": "customalert_header", + }, "customConfirm"); + customKit.createDiv({ + "class": "customalert_body" + }, "customConfirm"); + customKit.createDiv({ + "class": "customalert_footer" + }, "customConfirm"); //Os nomes podem ser alterados, window.confirm e window.Confirm, ao seu gosto! window.confirm = window.Confirm = function (dialog, callback, options) { diff --git a/dist/styl/functions.styl b/dist/styl/functions.styl index dd198d9..4665dd4 100644 --- a/dist/styl/functions.styl +++ b/dist/styl/functions.styl @@ -1,14 +1,14 @@ //Shadow function -boxShadow(x, y, blur, spread, color) - box-shadow: x y blur spread color - -webkit-box-shadow: x y blur spread color +boxShadow($x, $y, $blur, $spread, $color) + box-shadow: $x $y $blur $spread $color + -webkit-box-shadow: $x $y $blur $spread $color //Default alert -baseAlert() - font-family fontFamily - border-radius borderRadius - width width - font-size fontSize +baseAlert(fontFamily, $borderRadius, $fontSize, $width, $backgroundHeader, $backgroundBody, $backgroundFooter) + font-family $fontFamily + border-radius $borderRadius + width $width + font-size $fontSize display none position fixed max-width 100vw @@ -20,11 +20,11 @@ baseAlert() left 50% padding 10px boxShadow(0, 0, 10px, 0, rgba(0, 0, 0, 0.3)) - marginLeft(width) - baseContent(backgroundHeader, backgroundBody, backgroundFooter) + marginLeft($width) + baseContent($backgroundHeader, $backgroundBody, $backgroundFooter) //Default Overlay -baseOverlay(backg) +baseOverlay($backg) display none opacity 0.5 position fixed @@ -33,12 +33,12 @@ baseOverlay(backg) width 100vw height 100vh z-index 10 - background backg + background $backg //Default Content "header,body,footer' -baseContent(header, body, footer) +baseContent($header, $body, $footer) .customalert_header - background header + background $header color #232323 text-align center font-size 0.75em @@ -46,10 +46,10 @@ baseContent(header, body, footer) padding 10px color #232323 font-size 1.2em - background body + background $body text-align center .customalert_footer - background footer + background $footer text-align center buttonStyle() @@ -58,20 +58,20 @@ buttonStyle() margin-bottom 5px padding 5px word-wrap break-word - font-family fontFamily + font-family $fontFamily border none -marginLeft(wd) - margin-left (wd / 2) * -1; - @media (max-width: wd) +marginLeft($wd) + margin-left ($wd / 2) * -1; + @media (max-width: $wd) margin-left (100vw / 2) * -1; -hoverButton(color) +hoverButton($color) &:hover - background-color lightness(color, 40%) - color lightness(color, 90%) + background-color lightness($color, 40%) + color lightness($color, 90%) -buttonsColors(color, bgcolor) - background-color bgcolor - color color - hoverButton(color) +buttonsColors($color, $bgcolor) + background-color $bgcolor + color $color + hoverButton($color) diff --git a/dist/styl/structure.styl b/dist/styl/structure.styl index 3587fbc..b90bd20 100644 --- a/dist/styl/structure.styl +++ b/dist/styl/structure.styl @@ -1,30 +1,27 @@ -#customAlert-overlay - baseOverlay(backgroundOverlay) +#customAlert-overlay, #customConfirm-overlay + baseOverlay($backgroundOverlay) -#customConfirm-overlay - baseOverlay(backgroundConfirmOverlay) - -#customAlert - background-color background - .customalert_footer - button - buttonsColors(colorButton, backgroundButton) +.customalert + background-color $background + baseAlert(fontFamily, $borderRadius, $fontSize, $width, $backgroundHeader, $backgroundBody, $backgroundFooter) + if $disable-bootstrap + .customalert_footer + button + buttonStyle() -#customConfirm - background-color backgroundConfirm - .customalert_footer - button - &.customalert_confirm - margin-right 10px - if disable-bootstrap - buttonsColors(colorButtonTrue, backgroundButtonTrue) - if disable-bootstrap - &.customalert_cancel - buttonsColors(colorButtonFalse, backgroundButtonFalse) + if $disable-bootstrap + &.customalert_alert + .customalert_footer + button + $buttonsColors($alertColorButton, $alertBackgroundButton) -#customAlert, #customConfirm - baseAlert() - if disable-bootstrap + &.customalert_confirm .customalert_footer button - buttonStyle() + &.customalert_confirm + margin-right 10px + if $disable-bootstrap + buttonsColors($confirmColorButtonTrue, $confirmBackgroundButtonTrue) + if $disable-bootstrap + &.customalert_cancel + buttonsColors($confirmColorButtonFalse, $confirmBackgroundButtonFalse) diff --git a/dist/styl/variables.styl b/dist/styl/variables.styl index 574b825..a592081 100644 --- a/dist/styl/variables.styl +++ b/dist/styl/variables.styl @@ -1,27 +1,19 @@ -fontFamily = arial, helvetica - -backgroundOverlay = #000000 - -background = #FFFFFF -width = 550px -borderRadius = 5px - -backgroundHeader = background -backgroundBody = backgroundHeader -backgroundFooter = backgroundHeader - -backgroundButton = #bababa -colorButton = #5E5E5E - -fontSize = 1em - -//CONFIG CONFIRM -backgroundConfirmOverlay = backgroundOverlay -backgroundConfirm = background - -backgroundButtonTrue = #68bb74 -backgroundButtonFalse = #E2614B -colorButtonTrue = lightness(backgroundButtonTrue, 95%) -colorButtonFalse = lightness(backgroundButtonFalse, 95%) - -disable-bootstrap = true +$disable-bootstrap = true +$fontFamily = arial +$backgroundOverlay = #000000 +$width = 550px +$borderRadius = 5px +$fontSize = 1em +$background = #FFFFFF +$backgroundHeader = #FFFFFF +$backgroundBody = #FFFFFF +$backgroundFooter = #FFFFFF + + +$alertBackgroundButton = #bababa +$alertColorButton = #5E5E5E + +$confirmBackgroundButtonTrue = #68bb74 +$confirmBackgroundButtonFalse = #E2614B +$confirmColorButtonTrue = lightness($confirmBackgroundButtonTrue, 95%) +$confirmColorButtonFalse = lightness($confirmBackgroundButtonFalse, 95%) diff --git a/example.html b/example.html index beddfa3..be89d35 100755 --- a/example.html +++ b/example.html @@ -20,7 +20,7 @@ <h2>Por: Philippe Assis</h2> </pre> <a href="/PhilippeAssis/custom-alert">github.com/PhilippeAssis/custom-alert</a> -<script src="dist/js/custom-alert.min.js" language="javascript"></script> +<script src="dist/js/custom-alert.js" language="javascript"></script> <script> confirm('Isso é um exemplo?', function (data) { if (data) diff --git a/gulpfile.js b/gulpfile.js index 031af69..fba0a7c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -21,6 +21,6 @@ elixir.extend("minifycss", function(path, savePath) { elixir(function(mix) { mix.stylus("./dist/styl/custom-alert.styl", "./dist/css/custom-alert.css"); - // mix.copy("./dist/css/custom-alert.css", "./dist/css/custom-alert.min.css") - // mix.minifycss("./dist/css/custom-alert.min.css", "./dist/css/"); + mix.copy("./dist/css/custom-alert.css", "./dist/css/custom-alert.min.css") + mix.minifycss("./dist/css/custom-alert.min.css", "./dist/css/"); });