From 753de582adec8705013ef33fd57708e1a5a380bb Mon Sep 17 00:00:00 2001 From: Wes Ketchum Date: Fri, 14 Aug 2015 16:53:29 -0400 Subject: [PATCH] make vex-close a button to help with accessibility --- coffee/vex.coffee | 2 +- css/vex-theme-bottom-right-corner.css | 67 +++++----------------- css/vex-theme-default.css | 57 +++++-------------- css/vex-theme-flat-attack.css | 43 +++++--------- css/vex-theme-os.css | 62 ++++++--------------- css/vex-theme-plain.css | 42 +++++--------- css/vex-theme-top.css | 74 ++++++++----------------- css/vex-theme-wireframe.css | 45 ++++++--------- css/vex.css | 23 +------- js/vex.combined.min.js | 2 +- js/vex.js | 2 +- js/vex.min.js | 2 +- sass/vex-theme-bottom-right-corner.sass | 28 ++++------ sass/vex-theme-default.sass | 28 ++++------ sass/vex-theme-flat-attack.sass | 26 +++------ sass/vex-theme-os.sass | 31 +++++------ sass/vex-theme-plain.sass | 27 ++++----- sass/vex-theme-top.sass | 28 ++++------ sass/vex-theme-wireframe.sass | 28 ++++------ sass/vex.sass | 4 -- 20 files changed, 196 insertions(+), 425 deletions(-) diff --git a/coffee/vex.coffee b/coffee/vex.coffee index 526846a..cd5a8ec 100644 --- a/coffee/vex.coffee +++ b/coffee/vex.coffee @@ -87,7 +87,7 @@ vexFactory = ($) -> # Close button if options.showCloseButton - options.$closeButton = $('
') + options.$closeButton = $('') .addClass(vex.baseClassNames.close) .addClass(options.closeClassName) .css(options.closeCSS) diff --git a/css/vex-theme-bottom-right-corner.css b/css/vex-theme-bottom-right-corner.css index 8d9da28..265117d 100644 --- a/css/vex-theme-bottom-right-corner.css +++ b/css/vex-theme-bottom-right-corner.css @@ -6,7 +6,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -14,7 +13,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 0; } - 2% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -22,7 +20,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -39,7 +36,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -47,7 +43,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 0; } - 2% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -55,7 +50,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -72,7 +66,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -80,7 +73,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 0; } - 2% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -88,7 +80,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -105,7 +96,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -113,7 +103,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 0; } - 2% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -121,7 +110,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -138,7 +126,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -146,7 +133,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 0; } - 2% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -154,7 +140,6 @@ -ms-transform: translateY(800px); -o-transform: translateY(800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -170,7 +155,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -185,7 +169,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -200,7 +183,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -215,7 +197,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -230,7 +211,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(800px); -webkit-transform: translateY(800px); @@ -243,12 +223,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -259,12 +237,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -275,12 +251,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -291,12 +265,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -307,12 +279,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -361,31 +331,24 @@ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; + background-color: #f0f0f0; + border: none; position: absolute; top: 0; right: 0; - cursor: pointer; } - .vex.vex-theme-bottom-right-corner .vex-close:before { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - position: absolute; - content: "\00D7"; - font-size: 26px; - font-weight: normal; - line-height: 31px; - height: 30px; - width: 30px; - text-align: center; - top: 3px; - right: 3px; - color: #bbb; - background: transparent; } - .vex.vex-theme-bottom-right-corner .vex-close:hover:before, .vex.vex-theme-bottom-right-corner .vex-close:active:before { + cursor: pointer; + font-size: 26px; + height: 30px; + width: 30px; + font-weight: normal; + text-align: center; + color: #bbb; + font-family: Arial, sans-serif; } + .vex.vex-theme-bottom-right-corner .vex-close:hover, .vex.vex-theme-bottom-right-corner .vex-close:active { color: #777; background: #e0e0e0; } .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-message { - margin-bottom: 0.5em; } + margin-bottom: .5em; } .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="week"] { @@ -421,8 +384,8 @@ margin: 0 0 0 0.5em; font-family: inherit; text-transform: uppercase; - letter-spacing: 0.1em; - font-size: 0.8em; + letter-spacing: .1em; + font-size: .8em; line-height: 1em; padding: 0.75em 2em; } .vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-last { @@ -458,7 +421,7 @@ -webkit-border-radius: 100%; border-radius: 100%; background: #f0f0f0; - border: 0.2em solid transparent; + border: .2em solid transparent; border-top-color: #bbb; top: -1.1em; bottom: auto; } diff --git a/css/vex-theme-default.css b/css/vex-theme-default.css index 989d261..c96076b 100644 --- a/css/vex-theme-default.css +++ b/css/vex-theme-default.css @@ -6,7 +6,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -23,7 +22,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -40,7 +38,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -57,7 +54,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -74,7 +70,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -91,7 +86,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -108,7 +102,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -125,7 +118,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -142,7 +134,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -159,7 +150,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -173,12 +163,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -189,12 +177,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -205,12 +191,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -221,12 +205,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -237,12 +219,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -285,31 +265,24 @@ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; + background-color: #f0f0f0; + border: none; position: absolute; top: 0; right: 0; - cursor: pointer; } - .vex.vex-theme-default .vex-close:before { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - position: absolute; - content: "\00D7"; - font-size: 26px; - font-weight: normal; - line-height: 31px; - height: 30px; - width: 30px; - text-align: center; - top: 3px; - right: 3px; - color: #bbb; - background: transparent; } - .vex.vex-theme-default .vex-close:hover:before, .vex.vex-theme-default .vex-close:active:before { + cursor: pointer; + font-size: 26px; + height: 30px; + width: 30px; + font-weight: normal; + text-align: center; + color: #bbb; + font-family: Arial, sans-serif; } + .vex.vex-theme-default .vex-close:hover, .vex.vex-theme-default .vex-close:active { color: #777; background: #e0e0e0; } .vex.vex-theme-default .vex-dialog-form .vex-dialog-message { - margin-bottom: 0.5em; } + margin-bottom: .5em; } .vex.vex-theme-default .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"] { @@ -345,8 +318,8 @@ margin: 0 0 0 0.5em; font-family: inherit; text-transform: uppercase; - letter-spacing: 0.1em; - font-size: 0.8em; + letter-spacing: .1em; + font-size: .8em; line-height: 1em; padding: 0.75em 2em; } .vex.vex-theme-default .vex-dialog-button.vex-last { @@ -382,7 +355,7 @@ -webkit-border-radius: 100%; border-radius: 100%; background: #f0f0f0; - border: 0.2em solid transparent; + border: .2em solid transparent; border-top-color: #bbb; top: -1.1em; bottom: auto; } diff --git a/css/vex-theme-flat-attack.css b/css/vex-theme-flat-attack.css index b733343..5d39899 100644 --- a/css/vex-theme-flat-attack.css +++ b/css/vex-theme-flat-attack.css @@ -6,7 +6,6 @@ -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); } - 100% { opacity: 1; transform: rotateY(0deg); @@ -23,7 +22,6 @@ -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); } - 100% { opacity: 1; transform: rotateY(0deg); @@ -40,7 +38,6 @@ -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); } - 100% { opacity: 1; transform: rotateY(0deg); @@ -57,7 +54,6 @@ -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); } - 100% { opacity: 1; transform: rotateY(0deg); @@ -74,7 +70,6 @@ -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); } - 100% { opacity: 1; transform: rotateY(0deg); @@ -91,7 +86,6 @@ -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } - 100% { opacity: 0; transform: rotateY(90deg); @@ -108,7 +102,6 @@ -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } - 100% { opacity: 0; transform: rotateY(90deg); @@ -125,7 +118,6 @@ -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } - 100% { opacity: 0; transform: rotateY(90deg); @@ -142,7 +134,6 @@ -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } - 100% { opacity: 0; transform: rotateY(90deg); @@ -159,7 +150,6 @@ -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } - 100% { opacity: 0; transform: rotateY(90deg); @@ -209,30 +199,23 @@ .vex.vex-theme-flat-attack .vex-content h1, .vex.vex-theme-flat-attack .vex-content h2, .vex.vex-theme-flat-attack .vex-content h3, .vex.vex-theme-flat-attack .vex-content h4, .vex.vex-theme-flat-attack .vex-content h5, .vex.vex-theme-flat-attack .vex-content h6, .vex.vex-theme-flat-attack .vex-content p, .vex.vex-theme-flat-attack .vex-content ul, .vex.vex-theme-flat-attack .vex-content li { color: inherit; } .vex.vex-theme-flat-attack .vex-close { + background: #666; + border: none; position: absolute; top: 0; right: 0; - cursor: pointer; } - .vex.vex-theme-flat-attack .vex-close:before { - font-family: "Helvetica Neue", sans-serif; - font-weight: 100; - line-height: 1px; - padding-top: 0.5em; - display: block; - font-size: 2em; - text-indent: 1px; - overflow: hidden; - height: 1.25em; - width: 1.25em; - text-align: center; - top: 0; - right: 0; - color: #fff; - background: #666; } + cursor: pointer; + font-size: 2em; + height: 1.25em; + width: 1.25em; + font-weight: 100; + text-align: center; + color: #fff; + font-family: "Helvetica Neue", sans-serif; } .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-message { - margin-bottom: 0.5em; } + margin-bottom: .5em; } .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input { - margin-bottom: 0.5em; } + margin-bottom: .5em; } .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="week"] { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -272,7 +255,7 @@ font-size: 1.13em; text-transform: uppercase; font-weight: 200; - letter-spacing: 0.1em; + letter-spacing: .1em; line-height: 1em; font-family: inherit; } .vex.vex-theme-flat-attack .vex-dialog-button.vex-last { diff --git a/css/vex-theme-os.css b/css/vex-theme-os.css index e4bdf9e..4ced5bf 100644 --- a/css/vex-theme-os.css +++ b/css/vex-theme-os.css @@ -6,7 +6,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -23,7 +22,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -40,7 +38,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -57,7 +54,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -74,7 +70,6 @@ -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); } - 100% { opacity: 1; transform: translateY(0); @@ -91,7 +86,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -108,7 +102,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -125,7 +118,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -142,7 +134,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -159,7 +150,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { opacity: 0; transform: translateY(-40px); @@ -173,12 +163,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -189,12 +177,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -205,12 +191,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -221,12 +205,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -237,12 +219,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -286,34 +266,28 @@ .vex.vex-theme-os .vex-content h1, .vex.vex-theme-os .vex-content h2, .vex.vex-theme-os .vex-content h3, .vex.vex-theme-os .vex-content h4, .vex.vex-theme-os .vex-content h5, .vex.vex-theme-os .vex-content h6, .vex.vex-theme-os .vex-content p, .vex.vex-theme-os .vex-content ul, .vex.vex-theme-os .vex-content li { color: inherit; } .vex.vex-theme-os .vex-close { - -moz-border-radius: 0 5px 0 0; - -webkit-border-radius: 0 5px 0 0; - border-radius: 0 5px 0 0; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + background-color: #f0f0f0; + border: none; position: absolute; top: 0; right: 0; - cursor: pointer; } - .vex.vex-theme-os .vex-close:before { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - position: absolute; - content: "\00D7"; - font-size: 26px; - font-weight: normal; - line-height: 31px; - height: 30px; - width: 30px; - text-align: center; - top: 3px; - right: 3px; - color: #bbb; - background: transparent; } - .vex.vex-theme-os .vex-close:hover:before, .vex.vex-theme-os .vex-close:active:before { + cursor: pointer; + font-size: 26px; + height: 30px; + width: 30px; + font-weight: normal; + text-align: center; + color: #bbb; + font-family: Arial, sans-serif; + margin-top: 1px; } + .vex.vex-theme-os .vex-close:hover, .vex.vex-theme-os .vex-close:active { color: #777; background: #e0e0e0; } .vex.vex-theme-os .vex-dialog-form .vex-dialog-message { - margin-bottom: 0.5em; } + margin-bottom: .5em; } .vex.vex-theme-os .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-os .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="week"] { @@ -349,8 +323,8 @@ margin: 0 0 0 0.5em; font-family: inherit; text-transform: uppercase; - letter-spacing: 0.1em; - font-size: 0.8em; + letter-spacing: .1em; + font-size: .8em; line-height: 1em; padding: 0.75em 2em; } .vex.vex-theme-os .vex-dialog-button.vex-last { diff --git a/css/vex-theme-plain.css b/css/vex-theme-plain.css index 33a2f5b..f8fc8a3 100644 --- a/css/vex-theme-plain.css +++ b/css/vex-theme-plain.css @@ -3,12 +3,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -19,12 +17,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -35,12 +31,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -51,12 +45,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -67,12 +59,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -95,28 +85,24 @@ .vex.vex-theme-plain .vex-content h1, .vex.vex-theme-plain .vex-content h2, .vex.vex-theme-plain .vex-content h3, .vex.vex-theme-plain .vex-content h4, .vex.vex-theme-plain .vex-content h5, .vex.vex-theme-plain .vex-content h6, .vex.vex-theme-plain .vex-content p, .vex.vex-theme-plain .vex-content ul, .vex.vex-theme-plain .vex-content li { color: inherit; } .vex.vex-theme-plain .vex-close { + background-color: white; + border: none; position: absolute; top: 0; right: 0; - cursor: pointer; } - .vex.vex-theme-plain .vex-close:before { - position: absolute; - content: "\00D7"; - font-size: 26px; - font-weight: normal; - line-height: 31px; - height: 30px; - width: 30px; - text-align: center; - top: 3px; - right: 3px; - color: #bbb; - background: transparent; } - .vex.vex-theme-plain .vex-close:hover:before, .vex.vex-theme-plain .vex-close:active:before { + cursor: pointer; + font-size: 26px; + height: 30px; + width: 30px; + font-weight: normal; + text-align: center; + color: #bbb; + font-family: Arial, sans-serif; } + .vex.vex-theme-plain .vex-close:hover, .vex.vex-theme-plain .vex-close:active { color: #777; background: #e0e0e0; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-message { - margin-bottom: 0.5em; } + margin-bottom: .5em; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="week"] { @@ -149,8 +135,8 @@ margin: 0 0 0 0.5em; font-family: inherit; text-transform: uppercase; - letter-spacing: 0.1em; - font-size: 0.8em; + letter-spacing: .1em; + font-size: .8em; line-height: 1em; padding: 0.75em 2em; } .vex.vex-theme-plain .vex-dialog-button.vex-last { diff --git a/css/vex-theme-top.css b/css/vex-theme-top.css index f551918..91e9ac8 100644 --- a/css/vex-theme-top.css +++ b/css/vex-theme-top.css @@ -6,7 +6,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -14,7 +13,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 0; } - 2% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -22,7 +20,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -39,7 +36,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -47,7 +43,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 0; } - 2% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -55,7 +50,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -72,7 +66,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -80,7 +73,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 0; } - 2% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -88,7 +80,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -105,7 +96,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -113,7 +103,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 0; } - 2% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -121,7 +110,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -138,7 +126,6 @@ -ms-transform: translateY(0); -o-transform: translateY(0); opacity: 0; } - 1% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -146,7 +133,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 0; } - 2% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -154,7 +140,6 @@ -ms-transform: translateY(-800px); -o-transform: translateY(-800px); opacity: 1; } - 100% { transform: translateY(0); -webkit-transform: translateY(0); @@ -170,7 +155,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -185,7 +169,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -200,7 +183,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -215,7 +197,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -230,7 +211,6 @@ -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } - 100% { transform: translateY(-800px); -webkit-transform: translateY(-800px); @@ -243,12 +223,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -259,12 +237,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -275,12 +251,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -291,12 +265,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -307,12 +279,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -325,6 +295,7 @@ -ms-animation: vex-dropout 0.5s; -o-animation: vex-dropout 0.5s; -webkit-backface-visibility: hidden; } + .vex.vex-theme-top .vex-content { animation: vex-dropin 0.5s; -webkit-animation: vex-dropin 0.5s; @@ -332,6 +303,7 @@ -ms-animation: vex-dropin 0.5s; -o-animation: vex-dropin 0.5s; -webkit-backface-visibility: hidden; } + .vex.vex-theme-top .vex-content { -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; @@ -348,35 +320,31 @@ line-height: 1.5em; } .vex.vex-theme-top .vex-content h1, .vex.vex-theme-top .vex-content h2, .vex.vex-theme-top .vex-content h3, .vex.vex-theme-top .vex-content h4, .vex.vex-theme-top .vex-content h5, .vex.vex-theme-top .vex-content h6, .vex.vex-theme-top .vex-content p, .vex.vex-theme-top .vex-content ul, .vex.vex-theme-top .vex-content li { color: inherit; } + .vex.vex-theme-top .vex-close { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; + background-color: #f0f0f0; + border: none; position: absolute; top: 0; right: 0; - cursor: pointer; } - .vex.vex-theme-top .vex-close:before { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - position: absolute; - content: "\00D7"; - font-size: 26px; - font-weight: normal; - line-height: 31px; - height: 30px; - width: 30px; - text-align: center; - top: 3px; - right: 3px; - color: #bbb; - background: transparent; } - .vex.vex-theme-top .vex-close:hover:before, .vex.vex-theme-top .vex-close:active:before { + cursor: pointer; + font-size: 26px; + height: 30px; + width: 30px; + font-weight: normal; + text-align: center; + color: #bbb; + font-family: Arial, sans-serif; } + .vex.vex-theme-top .vex-close:hover, .vex.vex-theme-top .vex-close:active { color: #777; background: #e0e0e0; } + .vex.vex-theme-top .vex-dialog-form .vex-dialog-message { - margin-bottom: 0.5em; } + margin-bottom: .5em; } + .vex.vex-theme-top .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-top .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="week"] { @@ -397,12 +365,14 @@ -webkit-box-shadow: inset 0 0 0 2px #8dbdf1; box-shadow: inset 0 0 0 2px #8dbdf1; outline: none; } + .vex.vex-theme-top .vex-dialog-form .vex-dialog-buttons { *zoom: 1; } .vex.vex-theme-top .vex-dialog-form .vex-dialog-buttons:after { content: ""; display: table; clear: both; } + .vex.vex-theme-top .vex-dialog-button { -moz-border-radius: 3px; -webkit-border-radius: 3px; @@ -412,8 +382,8 @@ margin: 0 0 0 0.5em; font-family: inherit; text-transform: uppercase; - letter-spacing: 0.1em; - font-size: 0.8em; + letter-spacing: .1em; + font-size: .8em; line-height: 1em; padding: 0.75em 2em; } .vex.vex-theme-top .vex-dialog-button.vex-last { @@ -449,7 +419,7 @@ -webkit-border-radius: 100%; border-radius: 100%; background: #f0f0f0; - border: 0.2em solid transparent; + border: .2em solid transparent; border-top-color: #bbb; top: -1.1em; bottom: auto; } diff --git a/css/vex-theme-wireframe.css b/css/vex-theme-wireframe.css index ff80062..8451246 100644 --- a/css/vex-theme-wireframe.css +++ b/css/vex-theme-wireframe.css @@ -3,12 +3,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -19,12 +17,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -35,12 +31,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -51,12 +45,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -67,12 +59,10 @@ -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; box-shadow: inset 0 0 0 300px transparent; } - 70% { -moz-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); -webkit-box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 300px rgba(255, 255, 255, 0.25); } - 100% { -moz-box-shadow: inset 0 0 0 300px transparent; -webkit-box-shadow: inset 0 0 0 300px transparent; @@ -98,26 +88,23 @@ .vex.vex-theme-wireframe .vex-content h1, .vex.vex-theme-wireframe .vex-content h2, .vex.vex-theme-wireframe .vex-content h3, .vex.vex-theme-wireframe .vex-content h4, .vex.vex-theme-wireframe .vex-content h5, .vex.vex-theme-wireframe .vex-content h6, .vex.vex-theme-wireframe .vex-content p, .vex.vex-theme-wireframe .vex-content ul, .vex.vex-theme-wireframe .vex-content li { color: inherit; } .vex.vex-theme-wireframe .vex-close { + background-color: white; + border: none; position: absolute; - top: 0; - right: 0; - cursor: pointer; } - .vex.vex-theme-wireframe .vex-close:before { - position: absolute; - content: "\00D7"; - font-size: 40px; - font-weight: normal; - line-height: 80px; - height: 80px; - width: 80px; - text-align: center; - top: 3px; - right: 3px; - color: #000; } - .vex.vex-theme-wireframe .vex-close:hover:before, .vex.vex-theme-wireframe .vex-close:active:before { + top: 3px; + right: 3px; + cursor: pointer; + font-size: 40px; + height: 80px; + width: 80px; + font-weight: normal; + text-align: center; + color: #000; + font-family: "Helvetica Neue", sans-serif; } + .vex.vex-theme-wireframe .vex-close:hover, .vex.vex-theme-wireframe .vex-close:active { color: #000; } .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-message { - margin-bottom: 0.5em; } + margin-bottom: .5em; } .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input textarea, .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="date"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="datetime-local"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="email"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="month"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="number"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="password"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="search"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="tel"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="text"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="time"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="url"], .vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="week"] { @@ -148,8 +135,8 @@ margin: 0 0 0 0.5em; font-family: inherit; text-transform: uppercase; - letter-spacing: 0.1em; - font-size: 0.8em; + letter-spacing: .1em; + font-size: .8em; line-height: 1em; padding: 0.75em 2em; } .vex.vex-theme-wireframe .vex-dialog-button.vex-last { diff --git a/css/vex.css b/css/vex.css index f391221..a4179bb 100644 --- a/css/vex.css +++ b/css/vex.css @@ -1,70 +1,60 @@ @keyframes vex-fadein { 0% { opacity: 0; } - 100% { opacity: 1; } } @-webkit-keyframes vex-fadein { 0% { opacity: 0; } - 100% { opacity: 1; } } @-moz-keyframes vex-fadein { 0% { opacity: 0; } - 100% { opacity: 1; } } @-ms-keyframes vex-fadein { 0% { opacity: 0; } - 100% { opacity: 1; } } @-o-keyframes vex-fadein { 0% { opacity: 0; } - 100% { opacity: 1; } } @keyframes vex-fadeout { 0% { opacity: 1; } - 100% { opacity: 0; } } @-webkit-keyframes vex-fadeout { 0% { opacity: 1; } - 100% { opacity: 0; } } @-moz-keyframes vex-fadeout { 0% { opacity: 1; } - 100% { opacity: 0; } } @-ms-keyframes vex-fadeout { 0% { opacity: 1; } - 100% { opacity: 0; } } @-o-keyframes vex-fadeout { 0% { opacity: 1; } - 100% { opacity: 0; } } @@ -75,7 +65,6 @@ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } - 100% { transform: rotate(359deg); -webkit-transform: rotate(359deg); @@ -90,7 +79,6 @@ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } - 100% { transform: rotate(359deg); -webkit-transform: rotate(359deg); @@ -105,7 +93,6 @@ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } - 100% { transform: rotate(359deg); -webkit-transform: rotate(359deg); @@ -120,7 +107,6 @@ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } - 100% { transform: rotate(359deg); -webkit-transform: rotate(359deg); @@ -135,7 +121,6 @@ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } - 100% { transform: rotate(359deg); -webkit-transform: rotate(359deg); @@ -168,9 +153,7 @@ .vex-overlay { background: #000; filter: alpha(opacity=40); - /* IE 5–7 */ - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; - /* IE 8 */ } + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; } .vex-overlay { animation: vex-fadein 0.5s; @@ -209,10 +192,6 @@ -o-animation: vex-fadeout 0.5s; -webkit-backface-visibility: hidden; } -.vex-close:before { - font-family: Arial, sans-serif; - content: "\00D7"; } - .vex-dialog-form { margin: 0; } diff --git a/js/vex.combined.min.js b/js/vex.combined.min.js index 1cb97ca..d76c635 100644 --- a/js/vex.combined.min.js +++ b/js/vex.combined.min.js @@ -1,2 +1,2 @@ /*! vex.js, vex.dialog.js 2.3.2 */ -(function(){var a;a=function(a){var b,c;return b=!1,a(function(){var d;return d=(document.body||document.documentElement).style,b=void 0!==d.animation||void 0!==d.WebkitAnimation||void 0!==d.MozAnimation||void 0!==d.MsAnimation||void 0!==d.OAnimation,a(window).bind("keyup.vex",function(a){return 27===a.keyCode?c.closeByEscape():void 0})}),c={globalID:1,animationEndEvent:"animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend",baseClassNames:{vex:"vex",content:"vex-content",overlay:"vex-overlay",close:"vex-close",closing:"vex-closing",open:"vex-open"},defaultOptions:{content:"",showCloseButton:!0,escapeButtonCloses:!0,overlayClosesOnClick:!0,appendLocation:"body",className:"",css:{},overlayClassName:"",overlayCSS:{},contentClassName:"",contentCSS:{},closeClassName:"",closeCSS:{}},open:function(b){return b=a.extend({},c.defaultOptions,b),b.id=c.globalID,c.globalID+=1,b.$vex=a("
").addClass(c.baseClassNames.vex).addClass(b.className).css(b.css).data({vex:b}),b.$vexOverlay=a("
").addClass(c.baseClassNames.overlay).addClass(b.overlayClassName).css(b.overlayCSS).data({vex:b}),b.overlayClosesOnClick&&b.$vexOverlay.bind("click.vex",function(b){return b.target===this?c.close(a(this).data().vex.id):void 0}),b.$vex.append(b.$vexOverlay),b.$vexContent=a("
").addClass(c.baseClassNames.content).addClass(b.contentClassName).css(b.contentCSS).append(b.content).data({vex:b}),b.$vex.append(b.$vexContent),b.showCloseButton&&(b.$closeButton=a("
").addClass(c.baseClassNames.close).addClass(b.closeClassName).css(b.closeCSS).data({vex:b}).bind("click.vex",function(){return c.close(a(this).data().vex.id)}),b.$vexContent.append(b.$closeButton)),a(b.appendLocation).append(b.$vex),c.setupBodyClassName(b.$vex),b.afterOpen&&b.afterOpen(b.$vexContent,b),setTimeout(function(){return b.$vexContent.trigger("vexOpen",b)},0),b.$vexContent},getSelectorFromBaseClass:function(a){return"."+a.split(" ").join(".")},getAllVexes:function(){return a("."+c.baseClassNames.vex+':not(".'+c.baseClassNames.closing+'") '+c.getSelectorFromBaseClass(c.baseClassNames.content))},getVexByID:function(b){return c.getAllVexes().filter(function(){return a(this).data().vex.id===b})},close:function(a){var b;if(!a){if(b=c.getAllVexes().last(),!b.length)return!1;a=b.data().vex.id}return c.closeByID(a)},closeAll:function(){var b;return b=c.getAllVexes().map(function(){return a(this).data().vex.id}).toArray(),(null!=b?b.length:void 0)?(a.each(b.reverse(),function(a,b){return c.closeByID(b)}),!0):!1},closeByID:function(d){var e,f,g,h,i;return f=c.getVexByID(d),f.length?(e=f.data().vex.$vex,i=a.extend({},f.data().vex),g=function(){return i.beforeClose?i.beforeClose(f,i):void 0},h=function(){return f.trigger("vexClose",i),e.remove(),a("body").trigger("vexAfterClose",i),i.afterClose?i.afterClose(f,i):void 0},b?g()!==!1&&e.unbind(c.animationEndEvent).bind(c.animationEndEvent,function(){return h()}).addClass(c.baseClassNames.closing):g()!==!1&&h(),!0):void 0},closeByEscape:function(){var b,d,e;return e=c.getAllVexes().map(function(){return a(this).data().vex.id}).toArray(),(null!=e?e.length:void 0)?(d=Math.max.apply(Math,e),b=c.getVexByID(d),b.data().vex.escapeButtonCloses!==!0?!1:c.closeByID(d)):!1},setupBodyClassName:function(b){return a("body").bind("vexOpen.vex",function(){return a("body").addClass(c.baseClassNames.open)}).bind("vexAfterClose.vex",function(){return c.getAllVexes().length?void 0:a("body").removeClass(c.baseClassNames.open)})},hideLoading:function(){return a(".vex-loading-spinner").remove()},showLoading:function(){return c.hideLoading(),a("body").append('')}}},"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):window.vex=a(jQuery)}).call(this),function(){var a;a=function(a,b){var c,d;return null==b?a.error("Vex is required to use vex.dialog"):(c=function(b){var c;return c={},a.each(b.serializeArray(),function(){return c[this.name]?(c[this.name].push||(c[this.name]=[c[this.name]]),c[this.name].push(this.value||"")):c[this.name]=this.value||""}),c},d={},d.buttons={YES:{text:"OK",type:"submit",className:"vex-dialog-button-primary"},NO:{text:"Cancel",type:"button",className:"vex-dialog-button-secondary",click:function(a,c){return a.data().vex.value=!1,b.close(a.data().vex.id)}}},d.defaultOptions={callback:function(a){},afterOpen:function(){},message:"Message",input:'',value:!1,buttons:[d.buttons.YES,d.buttons.NO],showCloseButton:!1,onSubmit:function(e){var f,g;return f=a(this),g=f.parent(),e.preventDefault(),e.stopPropagation(),g.data().vex.value=d.getFormValueOnSubmit(c(f)),b.close(g.data().vex.id)},focusFirstInput:!0},d.defaultAlertOptions={message:"Alert",buttons:[d.buttons.YES]},d.defaultConfirmOptions={message:"Confirm"},d.open=function(c){var e,f;return c=a.extend({},b.defaultOptions,d.defaultOptions,c),c.content=d.buildDialogForm(c),f=c.beforeClose,c.beforeClose=function(a,b){return c.callback(b.value),"function"==typeof f?f(a,b):void 0},e=b.open(c),c.focusFirstInput&&e.find('button[type="submit"], button[type="button"], input[type="submit"], input[type="button"], textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]').first().focus(),e},d.alert=function(b){return"string"==typeof b&&(b={message:b}),b=a.extend({},d.defaultAlertOptions,b),d.open(b)},d.confirm=function(b){return"string"==typeof b?a.error("dialog.confirm(options) requires options.callback."):(b=a.extend({},d.defaultConfirmOptions,b),d.open(b))},d.prompt=function(b){var c;return"string"==typeof b?a.error("dialog.prompt(options) requires options.callback."):(c={message:'",input:''},b=a.extend({},c,b),d.open(b))},d.buildDialogForm=function(b){var c,e,f;return c=a('
'),f=a('
'),e=a('
'),c.append(f.append(b.message)).append(e.append(b.input)).append(d.buttonsToDOM(b.buttons)).bind("submit.vex",b.onSubmit),c},d.getFormValueOnSubmit=function(a){return a.vex||""===a.vex?"_vex-empty-value"===a.vex?!0:a.vex:a},d.buttonsToDOM=function(c){var d;return d=a('
'),a.each(c,function(e,f){var g;return g=a('').text(f.text).addClass(f.className+" vex-dialog-button "+(0===e?"vex-first ":"")+(e===c.length-1?"vex-last ":"")).bind("click.vex",function(c){return f.click?f.click(a(this).parents(b.getSelectorFromBaseClass(b.baseClassNames.content)),c):void 0}),g.appendTo(d)}),d},d)},"function"==typeof define&&define.amd?define(["jquery","vex"],a):"object"==typeof exports?module.exports=a(require("jquery"),require("./vex.js")):window.vex.dialog=a(window.jQuery,window.vex)}.call(this); \ No newline at end of file +(function(){var a;a=function(a){var b,c;return b=!1,a(function(){var d;return d=(document.body||document.documentElement).style,b=void 0!==d.animation||void 0!==d.WebkitAnimation||void 0!==d.MozAnimation||void 0!==d.MsAnimation||void 0!==d.OAnimation,a(window).bind("keyup.vex",function(a){return 27===a.keyCode?c.closeByEscape():void 0})}),c={globalID:1,animationEndEvent:"animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend",baseClassNames:{vex:"vex",content:"vex-content",overlay:"vex-overlay",close:"vex-close",closing:"vex-closing",open:"vex-open"},defaultOptions:{content:"",showCloseButton:!0,escapeButtonCloses:!0,overlayClosesOnClick:!0,appendLocation:"body",className:"",css:{},overlayClassName:"",overlayCSS:{},contentClassName:"",contentCSS:{},closeClassName:"",closeCSS:{}},open:function(b){return b=a.extend({},c.defaultOptions,b),b.id=c.globalID,c.globalID+=1,b.$vex=a("
").addClass(c.baseClassNames.vex).addClass(b.className).css(b.css).data({vex:b}),b.$vexOverlay=a("
").addClass(c.baseClassNames.overlay).addClass(b.overlayClassName).css(b.overlayCSS).data({vex:b}),b.overlayClosesOnClick&&b.$vexOverlay.bind("click.vex",function(b){return b.target===this?c.close(a(this).data().vex.id):void 0}),b.$vex.append(b.$vexOverlay),b.$vexContent=a("
").addClass(c.baseClassNames.content).addClass(b.contentClassName).css(b.contentCSS).append(b.content).data({vex:b}),b.$vex.append(b.$vexContent),b.showCloseButton&&(b.$closeButton=a('').addClass(c.baseClassNames.close).addClass(b.closeClassName).css(b.closeCSS).data({vex:b}).bind("click.vex",function(){return c.close(a(this).data().vex.id)}),b.$vexContent.append(b.$closeButton)),a(b.appendLocation).append(b.$vex),c.setupBodyClassName(b.$vex),b.afterOpen&&b.afterOpen(b.$vexContent,b),setTimeout(function(){return b.$vexContent.trigger("vexOpen",b)},0),b.$vexContent},getSelectorFromBaseClass:function(a){return"."+a.split(" ").join(".")},getAllVexes:function(){return a("."+c.baseClassNames.vex+':not(".'+c.baseClassNames.closing+'") '+c.getSelectorFromBaseClass(c.baseClassNames.content))},getVexByID:function(b){return c.getAllVexes().filter(function(){return a(this).data().vex.id===b})},close:function(a){var b;if(!a){if(b=c.getAllVexes().last(),!b.length)return!1;a=b.data().vex.id}return c.closeByID(a)},closeAll:function(){var b;return b=c.getAllVexes().map(function(){return a(this).data().vex.id}).toArray(),(null!=b?b.length:void 0)?(a.each(b.reverse(),function(a,b){return c.closeByID(b)}),!0):!1},closeByID:function(d){var e,f,g,h,i;return f=c.getVexByID(d),f.length?(e=f.data().vex.$vex,i=a.extend({},f.data().vex),g=function(){return i.beforeClose?i.beforeClose(f,i):void 0},h=function(){return f.trigger("vexClose",i),e.remove(),a("body").trigger("vexAfterClose",i),i.afterClose?i.afterClose(f,i):void 0},b?g()!==!1&&e.unbind(c.animationEndEvent).bind(c.animationEndEvent,function(){return h()}).addClass(c.baseClassNames.closing):g()!==!1&&h(),!0):void 0},closeByEscape:function(){var b,d,e;return e=c.getAllVexes().map(function(){return a(this).data().vex.id}).toArray(),(null!=e?e.length:void 0)?(d=Math.max.apply(Math,e),b=c.getVexByID(d),b.data().vex.escapeButtonCloses!==!0?!1:c.closeByID(d)):!1},setupBodyClassName:function(b){return a("body").bind("vexOpen.vex",function(){return a("body").addClass(c.baseClassNames.open)}).bind("vexAfterClose.vex",function(){return c.getAllVexes().length?void 0:a("body").removeClass(c.baseClassNames.open)})},hideLoading:function(){return a(".vex-loading-spinner").remove()},showLoading:function(){return c.hideLoading(),a("body").append('')}}},"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):window.vex=a(jQuery)}).call(this),function(){var a;a=function(a,b){var c,d;return null==b?a.error("Vex is required to use vex.dialog"):(c=function(b){var c;return c={},a.each(b.serializeArray(),function(){return c[this.name]?(c[this.name].push||(c[this.name]=[c[this.name]]),c[this.name].push(this.value||"")):c[this.name]=this.value||""}),c},d={},d.buttons={YES:{text:"OK",type:"submit",className:"vex-dialog-button-primary"},NO:{text:"Cancel",type:"button",className:"vex-dialog-button-secondary",click:function(a,c){return a.data().vex.value=!1,b.close(a.data().vex.id)}}},d.defaultOptions={callback:function(a){},afterOpen:function(){},message:"Message",input:'',value:!1,buttons:[d.buttons.YES,d.buttons.NO],showCloseButton:!1,onSubmit:function(e){var f,g;return f=a(this),g=f.parent(),e.preventDefault(),e.stopPropagation(),g.data().vex.value=d.getFormValueOnSubmit(c(f)),b.close(g.data().vex.id)},focusFirstInput:!0},d.defaultAlertOptions={message:"Alert",buttons:[d.buttons.YES]},d.defaultConfirmOptions={message:"Confirm"},d.open=function(c){var e,f;return c=a.extend({},b.defaultOptions,d.defaultOptions,c),c.content=d.buildDialogForm(c),f=c.beforeClose,c.beforeClose=function(a,b){return c.callback(b.value),"function"==typeof f?f(a,b):void 0},e=b.open(c),c.focusFirstInput&&e.find('button[type="submit"], button[type="button"], input[type="submit"], input[type="button"], textarea, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]').first().focus(),e},d.alert=function(b){return"string"==typeof b&&(b={message:b}),b=a.extend({},d.defaultAlertOptions,b),d.open(b)},d.confirm=function(b){return"string"==typeof b?a.error("dialog.confirm(options) requires options.callback."):(b=a.extend({},d.defaultConfirmOptions,b),d.open(b))},d.prompt=function(b){var c;return"string"==typeof b?a.error("dialog.prompt(options) requires options.callback."):(c={message:'",input:''},b=a.extend({},c,b),d.open(b))},d.buildDialogForm=function(b){var c,e,f;return c=a(''),f=a('
'),e=a('
'),c.append(f.append(b.message)).append(e.append(b.input)).append(d.buttonsToDOM(b.buttons)).bind("submit.vex",b.onSubmit),c},d.getFormValueOnSubmit=function(a){return a.vex||""===a.vex?"_vex-empty-value"===a.vex?!0:a.vex:a},d.buttonsToDOM=function(c){var d;return d=a('
'),a.each(c,function(e,f){var g;return g=a('').text(f.text).addClass(f.className+" vex-dialog-button "+(0===e?"vex-first ":"")+(e===c.length-1?"vex-last ":"")).bind("click.vex",function(c){return f.click?f.click(a(this).parents(b.getSelectorFromBaseClass(b.baseClassNames.content)),c):void 0}),g.appendTo(d)}),d},d)},"function"==typeof define&&define.amd?define(["jquery","vex"],a):"object"==typeof exports?module.exports=a(require("jquery"),require("./vex.js")):window.vex.dialog=a(window.jQuery,window.vex)}.call(this); \ No newline at end of file diff --git a/js/vex.js b/js/vex.js index 43268ad..b84272c 100644 --- a/js/vex.js +++ b/js/vex.js @@ -64,7 +64,7 @@ }); options.$vex.append(options.$vexContent); if (options.showCloseButton) { - options.$closeButton = $('
').addClass(vex.baseClassNames.close).addClass(options.closeClassName).css(options.closeCSS).data({ + options.$closeButton = $('').addClass(vex.baseClassNames.close).addClass(options.closeClassName).css(options.closeCSS).data({ vex: options }).bind('click.vex', function() { return vex.close($(this).data().vex.id); diff --git a/js/vex.min.js b/js/vex.min.js index fa67bd8..9ddf756 100644 --- a/js/vex.min.js +++ b/js/vex.min.js @@ -1,2 +1,2 @@ /*! vex.js 2.3.2 */ -(function(){var a;a=function(a){var b,c;return b=!1,a(function(){var d;return d=(document.body||document.documentElement).style,b=void 0!==d.animation||void 0!==d.WebkitAnimation||void 0!==d.MozAnimation||void 0!==d.MsAnimation||void 0!==d.OAnimation,a(window).bind("keyup.vex",function(a){return 27===a.keyCode?c.closeByEscape():void 0})}),c={globalID:1,animationEndEvent:"animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend",baseClassNames:{vex:"vex",content:"vex-content",overlay:"vex-overlay",close:"vex-close",closing:"vex-closing",open:"vex-open"},defaultOptions:{content:"",showCloseButton:!0,escapeButtonCloses:!0,overlayClosesOnClick:!0,appendLocation:"body",className:"",css:{},overlayClassName:"",overlayCSS:{},contentClassName:"",contentCSS:{},closeClassName:"",closeCSS:{}},open:function(b){return b=a.extend({},c.defaultOptions,b),b.id=c.globalID,c.globalID+=1,b.$vex=a("
").addClass(c.baseClassNames.vex).addClass(b.className).css(b.css).data({vex:b}),b.$vexOverlay=a("
").addClass(c.baseClassNames.overlay).addClass(b.overlayClassName).css(b.overlayCSS).data({vex:b}),b.overlayClosesOnClick&&b.$vexOverlay.bind("click.vex",function(b){return b.target===this?c.close(a(this).data().vex.id):void 0}),b.$vex.append(b.$vexOverlay),b.$vexContent=a("
").addClass(c.baseClassNames.content).addClass(b.contentClassName).css(b.contentCSS).append(b.content).data({vex:b}),b.$vex.append(b.$vexContent),b.showCloseButton&&(b.$closeButton=a("
").addClass(c.baseClassNames.close).addClass(b.closeClassName).css(b.closeCSS).data({vex:b}).bind("click.vex",function(){return c.close(a(this).data().vex.id)}),b.$vexContent.append(b.$closeButton)),a(b.appendLocation).append(b.$vex),c.setupBodyClassName(b.$vex),b.afterOpen&&b.afterOpen(b.$vexContent,b),setTimeout(function(){return b.$vexContent.trigger("vexOpen",b)},0),b.$vexContent},getSelectorFromBaseClass:function(a){return"."+a.split(" ").join(".")},getAllVexes:function(){return a("."+c.baseClassNames.vex+':not(".'+c.baseClassNames.closing+'") '+c.getSelectorFromBaseClass(c.baseClassNames.content))},getVexByID:function(b){return c.getAllVexes().filter(function(){return a(this).data().vex.id===b})},close:function(a){var b;if(!a){if(b=c.getAllVexes().last(),!b.length)return!1;a=b.data().vex.id}return c.closeByID(a)},closeAll:function(){var b;return b=c.getAllVexes().map(function(){return a(this).data().vex.id}).toArray(),(null!=b?b.length:void 0)?(a.each(b.reverse(),function(a,b){return c.closeByID(b)}),!0):!1},closeByID:function(d){var e,f,g,h,i;return f=c.getVexByID(d),f.length?(e=f.data().vex.$vex,i=a.extend({},f.data().vex),g=function(){return i.beforeClose?i.beforeClose(f,i):void 0},h=function(){return f.trigger("vexClose",i),e.remove(),a("body").trigger("vexAfterClose",i),i.afterClose?i.afterClose(f,i):void 0},b?g()!==!1&&e.unbind(c.animationEndEvent).bind(c.animationEndEvent,function(){return h()}).addClass(c.baseClassNames.closing):g()!==!1&&h(),!0):void 0},closeByEscape:function(){var b,d,e;return e=c.getAllVexes().map(function(){return a(this).data().vex.id}).toArray(),(null!=e?e.length:void 0)?(d=Math.max.apply(Math,e),b=c.getVexByID(d),b.data().vex.escapeButtonCloses!==!0?!1:c.closeByID(d)):!1},setupBodyClassName:function(b){return a("body").bind("vexOpen.vex",function(){return a("body").addClass(c.baseClassNames.open)}).bind("vexAfterClose.vex",function(){return c.getAllVexes().length?void 0:a("body").removeClass(c.baseClassNames.open)})},hideLoading:function(){return a(".vex-loading-spinner").remove()},showLoading:function(){return c.hideLoading(),a("body").append('')}}},"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):window.vex=a(jQuery)}).call(this); \ No newline at end of file +(function(){var a;a=function(a){var b,c;return b=!1,a(function(){var d;return d=(document.body||document.documentElement).style,b=void 0!==d.animation||void 0!==d.WebkitAnimation||void 0!==d.MozAnimation||void 0!==d.MsAnimation||void 0!==d.OAnimation,a(window).bind("keyup.vex",function(a){return 27===a.keyCode?c.closeByEscape():void 0})}),c={globalID:1,animationEndEvent:"animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend",baseClassNames:{vex:"vex",content:"vex-content",overlay:"vex-overlay",close:"vex-close",closing:"vex-closing",open:"vex-open"},defaultOptions:{content:"",showCloseButton:!0,escapeButtonCloses:!0,overlayClosesOnClick:!0,appendLocation:"body",className:"",css:{},overlayClassName:"",overlayCSS:{},contentClassName:"",contentCSS:{},closeClassName:"",closeCSS:{}},open:function(b){return b=a.extend({},c.defaultOptions,b),b.id=c.globalID,c.globalID+=1,b.$vex=a("
").addClass(c.baseClassNames.vex).addClass(b.className).css(b.css).data({vex:b}),b.$vexOverlay=a("
").addClass(c.baseClassNames.overlay).addClass(b.overlayClassName).css(b.overlayCSS).data({vex:b}),b.overlayClosesOnClick&&b.$vexOverlay.bind("click.vex",function(b){return b.target===this?c.close(a(this).data().vex.id):void 0}),b.$vex.append(b.$vexOverlay),b.$vexContent=a("
").addClass(c.baseClassNames.content).addClass(b.contentClassName).css(b.contentCSS).append(b.content).data({vex:b}),b.$vex.append(b.$vexContent),b.showCloseButton&&(b.$closeButton=a('').addClass(c.baseClassNames.close).addClass(b.closeClassName).css(b.closeCSS).data({vex:b}).bind("click.vex",function(){return c.close(a(this).data().vex.id)}),b.$vexContent.append(b.$closeButton)),a(b.appendLocation).append(b.$vex),c.setupBodyClassName(b.$vex),b.afterOpen&&b.afterOpen(b.$vexContent,b),setTimeout(function(){return b.$vexContent.trigger("vexOpen",b)},0),b.$vexContent},getSelectorFromBaseClass:function(a){return"."+a.split(" ").join(".")},getAllVexes:function(){return a("."+c.baseClassNames.vex+':not(".'+c.baseClassNames.closing+'") '+c.getSelectorFromBaseClass(c.baseClassNames.content))},getVexByID:function(b){return c.getAllVexes().filter(function(){return a(this).data().vex.id===b})},close:function(a){var b;if(!a){if(b=c.getAllVexes().last(),!b.length)return!1;a=b.data().vex.id}return c.closeByID(a)},closeAll:function(){var b;return b=c.getAllVexes().map(function(){return a(this).data().vex.id}).toArray(),(null!=b?b.length:void 0)?(a.each(b.reverse(),function(a,b){return c.closeByID(b)}),!0):!1},closeByID:function(d){var e,f,g,h,i;return f=c.getVexByID(d),f.length?(e=f.data().vex.$vex,i=a.extend({},f.data().vex),g=function(){return i.beforeClose?i.beforeClose(f,i):void 0},h=function(){return f.trigger("vexClose",i),e.remove(),a("body").trigger("vexAfterClose",i),i.afterClose?i.afterClose(f,i):void 0},b?g()!==!1&&e.unbind(c.animationEndEvent).bind(c.animationEndEvent,function(){return h()}).addClass(c.baseClassNames.closing):g()!==!1&&h(),!0):void 0},closeByEscape:function(){var b,d,e;return e=c.getAllVexes().map(function(){return a(this).data().vex.id}).toArray(),(null!=e?e.length:void 0)?(d=Math.max.apply(Math,e),b=c.getVexByID(d),b.data().vex.escapeButtonCloses!==!0?!1:c.closeByID(d)):!1},setupBodyClassName:function(b){return a("body").bind("vexOpen.vex",function(){return a("body").addClass(c.baseClassNames.open)}).bind("vexAfterClose.vex",function(){return c.getAllVexes().length?void 0:a("body").removeClass(c.baseClassNames.open)})},hideLoading:function(){return a(".vex-loading-spinner").remove()},showLoading:function(){return c.hideLoading(),a("body").append('')}}},"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):window.vex=a(jQuery)}).call(this); \ No newline at end of file diff --git a/sass/vex-theme-bottom-right-corner.sass b/sass/vex-theme-bottom-right-corner.sass index 454e1ef..8f3a17f 100644 --- a/sass/vex-theme-bottom-right-corner.sass +++ b/sass/vex-theme-bottom-right-corner.sass @@ -42,27 +42,21 @@ $blue: #3288e6 .vex-close +border-radius(5px) + background-color: #f0f0f0 + border: none position: absolute top: 0 right: 0 cursor: pointer - - &:before - +border-radius(3px) - position: absolute - content: "\00D7" - font-size: 26px - font-weight: normal - line-height: 31px - height: 30px - width: 30px - text-align: center - top: 3px - right: 3px - color: #bbb - background: transparent - - &:hover:before, &:active:before + font-size: 26px + height: 30px + width: 30px + font-weight: normal + text-align: center + color: #bbb + font-family: Arial, sans-serif + + &:hover, &:active color: #777 background: #e0e0e0 diff --git a/sass/vex-theme-default.sass b/sass/vex-theme-default.sass index 5d059bb..225c049 100644 --- a/sass/vex-theme-default.sass +++ b/sass/vex-theme-default.sass @@ -35,27 +35,21 @@ $blue: #3288e6 .vex-close +border-radius(5px) + background-color: #f0f0f0 + border: none position: absolute top: 0 right: 0 cursor: pointer - - &:before - +border-radius(3px) - position: absolute - content: "\00D7" - font-size: 26px - font-weight: normal - line-height: 31px - height: 30px - width: 30px - text-align: center - top: 3px - right: 3px - color: #bbb - background: transparent - - &:hover:before, &:active:before + font-size: 26px + height: 30px + width: 30px + font-weight: normal + text-align: center + color: #bbb + font-family: Arial, sans-serif + + &:hover, &:active color: #777 background: #e0e0e0 diff --git a/sass/vex-theme-flat-attack.sass b/sass/vex-theme-flat-attack.sass index 9560ec8..6848f65 100644 --- a/sass/vex-theme-flat-attack.sass +++ b/sass/vex-theme-flat-attack.sass @@ -55,27 +55,19 @@ $blue: #477FA5 color: inherit .vex-close + background: #666 + border: none position: absolute top: 0 right: 0 cursor: pointer - - &:before - font-family: "Helvetica Neue", sans-serif - font-weight: 100 - line-height: 1px - padding-top: .5em - display: block - font-size: 2em - text-indent: 1px - overflow: hidden - height: 1.25em - width: 1.25em - text-align: center - top: 0 - right: 0 - color: #fff - background: #666 + font-size: 2em + height: 1.25em + width: 1.25em + font-weight: 100 + text-align: center + color: #fff + font-family: "Helvetica Neue", sans-serif .vex-dialog-form diff --git a/sass/vex-theme-os.sass b/sass/vex-theme-os.sass index bdbdfbd..5b40e50 100644 --- a/sass/vex-theme-os.sass +++ b/sass/vex-theme-os.sass @@ -36,28 +36,23 @@ $blue: #3288e6 color: inherit .vex-close - +border-radius(0 5px 0 0) + +border-radius(5px) + background-color: #f0f0f0 + border: none position: absolute top: 0 right: 0 cursor: pointer - - &:before - +border-radius(3px) - position: absolute - content: "\00D7" - font-size: 26px - font-weight: normal - line-height: 31px - height: 30px - width: 30px - text-align: center - top: 3px - right: 3px - color: #bbb - background: transparent - - &:hover:before, &:active:before + font-size: 26px + height: 30px + width: 30px + font-weight: normal + text-align: center + color: #bbb + font-family: Arial, sans-serif + margin-top: 1px + + &:hover, &:active color: #777 background: #e0e0e0 diff --git a/sass/vex-theme-plain.sass b/sass/vex-theme-plain.sass index 40e72ee..f17b802 100644 --- a/sass/vex-theme-plain.sass +++ b/sass/vex-theme-plain.sass @@ -25,26 +25,21 @@ $blue: #3288e6 color: inherit .vex-close + background-color: white + border: none position: absolute top: 0 right: 0 cursor: pointer - - &:before - position: absolute - content: "\00D7" - font-size: 26px - font-weight: normal - line-height: 31px - height: 30px - width: 30px - text-align: center - top: 3px - right: 3px - color: #bbb - background: transparent - - &:hover:before, &:active:before + font-size: 26px + height: 30px + width: 30px + font-weight: normal + text-align: center + color: #bbb + font-family: Arial, sans-serif + + &:hover, &:active color: #777 background: #e0e0e0 diff --git a/sass/vex-theme-top.sass b/sass/vex-theme-top.sass index 9a296ff..c880a74 100644 --- a/sass/vex-theme-top.sass +++ b/sass/vex-theme-top.sass @@ -33,27 +33,21 @@ $blue: #3288e6 .vex-close +border-radius(5px) + background-color: #f0f0f0 + border: none position: absolute top: 0 right: 0 cursor: pointer - - &:before - +border-radius(3px) - position: absolute - content: "\00D7" - font-size: 26px - font-weight: normal - line-height: 31px - height: 30px - width: 30px - text-align: center - top: 3px - right: 3px - color: #bbb - background: transparent - - &:hover:before, &:active:before + font-size: 26px + height: 30px + width: 30px + font-weight: normal + text-align: center + color: #bbb + font-family: Arial, sans-serif + + &:hover, &:active color: #777 background: #e0e0e0 diff --git a/sass/vex-theme-wireframe.sass b/sass/vex-theme-wireframe.sass index 4430d73..f306d5b 100644 --- a/sass/vex-theme-wireframe.sass +++ b/sass/vex-theme-wireframe.sass @@ -27,25 +27,21 @@ color: inherit .vex-close + background-color: white + border: none position: absolute - top: 0 - right: 0 + top: 3px + right: 3px cursor: pointer + font-size: 40px + height: 80px + width: 80px + font-weight: normal + text-align: center + color: #000 + font-family: "Helvetica Neue", sans-serif - &:before - position: absolute - content: "\00D7" - font-size: 40px - font-weight: normal - line-height: 80px - height: 80px - width: 80px - text-align: center - top: 3px - right: 3px - color: #000 - - &:hover:before, &:active:before + &:hover, &:active color: #000 .vex-dialog-form diff --git a/sass/vex.sass b/sass/vex.sass index a4a5711..88f05c4 100644 --- a/sass/vex.sass +++ b/sass/vex.sass @@ -51,10 +51,6 @@ .vex.vex-closing & +vex-animation(vex-fadeout .5s) -.vex-close:before - font-family: Arial, sans-serif - content: "\00D7" - .vex-dialog-form margin: 0 // Browser reset