diff --git a/Gruntfile.js b/Gruntfile.js index c7d8a48..fe77069 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -61,6 +61,17 @@ module.exports = function (grunt) { src: '*.sass', ext: '.css' } + }, + + postcss: { + options: { + processors: [ + require('autoprefixer')({ cascade: false }) + ] + }, + dist: { + src: 'dist/css/*.css' + } } }) @@ -68,6 +79,7 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-uglify') grunt.loadNpmTasks('grunt-contrib-compass') grunt.loadNpmTasks('grunt-sass') + grunt.loadNpmTasks('grunt-postcss') - grunt.registerTask('default', ['browserify', 'uglify', 'sass']) + grunt.registerTask('default', ['browserify', 'uglify', 'sass', 'postcss']) } diff --git a/dist/css/vex-theme-bottom-right-corner.css b/dist/css/vex-theme-bottom-right-corner.css index 32ecdc4..b5563fd 100644 --- a/dist/css/vex-theme-bottom-right-corner.css +++ b/dist/css/vex-theme-bottom-right-corner.css @@ -1,291 +1,69 @@ -@keyframes vex-slideup { - 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 0; } - 1% { - transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); - opacity: 0; } - 2% { - transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); - opacity: 1; } - 100% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 1; } } - @-webkit-keyframes vex-slideup { 0% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 0; } - 1% { - transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); - opacity: 0; } - 2% { - transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); - opacity: 1; } - 100% { transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 1; } } - -@-moz-keyframes vex-slideup { - 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); opacity: 0; } 1% { - transform: translateY(800px); -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); - opacity: 0; } - 2% { transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); - opacity: 1; } - 100% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 1; } } - -@-ms-keyframes vex-slideup { - 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 0; } - 1% { - transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); opacity: 0; } 2% { - transform: translateY(800px); -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); + transform: translateY(800px); opacity: 1; } 100% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); + transform: translateY(0); opacity: 1; } } -@-o-keyframes vex-slideup { +@keyframes vex-slideup { 0% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); + transform: translateY(0); opacity: 0; } 1% { - transform: translateY(800px); -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); + transform: translateY(800px); opacity: 0; } 2% { - transform: translateY(800px); -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); + transform: translateY(800px); opacity: 1; } 100% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 1; } } - -@keyframes vex-slidedown { - 0% { transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); } } + opacity: 1; } } @-webkit-keyframes vex-slidedown { 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); } } - -@-moz-keyframes vex-slidedown { - 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - transform: translateY(800px); - -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); } } - -@-ms-keyframes vex-slidedown { - 0% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } + transform: translateY(0); } 100% { - transform: translateY(800px); -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); } } + transform: translateY(800px); } } -@-o-keyframes vex-slidedown { +@keyframes vex-slidedown { 0% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } + transform: translateY(0); } 100% { - transform: translateY(800px); -webkit-transform: translateY(800px); - -moz-transform: translateY(800px); - -ms-transform: translateY(800px); - -o-transform: translateY(800px); } } - -@keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } + transform: translateY(800px); } } @-webkit-keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } -@-moz-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-ms-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-o-keyframes vex-pulse { +@keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } .vex.vex-theme-bottom-right-corner { @@ -296,22 +74,12 @@ .vex.vex-theme-bottom-right-corner .vex-overlay { display: none; } .vex.vex-theme-bottom-right-corner.vex-closing .vex-content { - animation: vex-slidedown 0.5s forwards; - -webkit-animation: vex-slidedown 0.5s forwards; - -moz-animation: vex-slidedown 0.5s forwards; - -ms-animation: vex-slidedown 0.5s forwards; - -o-animation: vex-slidedown 0.5s forwards; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-slidedown .5s forwards; + animation: vex-slidedown .5s forwards; } .vex.vex-theme-bottom-right-corner .vex-content { - animation: vex-slideup 0.5s; - -webkit-animation: vex-slideup 0.5s; - -moz-animation: vex-slideup 0.5s; - -ms-animation: vex-slideup 0.5s; - -o-animation: vex-slideup 0.5s; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-slideup .5s; + animation: vex-slideup .5s; } .vex.vex-theme-bottom-right-corner .vex-content { - -moz-border-radius: 5px 0 0 0; - -webkit-border-radius: 5px 0 0 0; border-radius: 5px 0 0 0; font-family: "Helvetica Neue", sans-serif; background: #f0f0f0; @@ -328,16 +96,12 @@ .vex.vex-theme-bottom-right-corner .vex-content h1, .vex.vex-theme-bottom-right-corner .vex-content h2, .vex.vex-theme-bottom-right-corner .vex-content h3, .vex.vex-theme-bottom-right-corner .vex-content h4, .vex.vex-theme-bottom-right-corner .vex-content h5, .vex.vex-theme-bottom-right-corner .vex-content h6, .vex.vex-theme-bottom-right-corner .vex-content p, .vex.vex-theme-bottom-right-corner .vex-content ul, .vex.vex-theme-bottom-right-corner .vex-content li { color: inherit; } .vex.vex-theme-bottom-right-corner .vex-close { - -moz-border-radius: 5px; - -webkit-border-radius: 5px; border-radius: 5px; 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"; @@ -359,8 +123,6 @@ .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 select, .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"] { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; background: #fff; width: 100%; @@ -372,8 +134,6 @@ min-height: 2.5em; margin: 0 0 .25em; } .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px #8dbdf1; - -webkit-box-shadow: inset 0 0 0 2px #8dbdf1; box-shadow: inset 0 0 0 2px #8dbdf1; outline: none; } .vex.vex-theme-bottom-right-corner .vex-dialog-form .vex-dialog-buttons { @@ -383,8 +143,6 @@ display: table; clear: both; } .vex.vex-theme-bottom-right-corner .vex-dialog-button { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; border: 0; float: right; @@ -398,21 +156,13 @@ .vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-last { margin-left: 0; } .vex.vex-theme-bottom-right-corner .vex-dialog-button:focus { - animation: vex-pulse 1.1s infinite; -webkit-animation: vex-pulse 1.1s infinite; - -moz-animation: vex-pulse 1.1s infinite; - -ms-animation: vex-pulse 1.1s infinite; - -o-animation: vex-pulse 1.1s infinite; - -webkit-backface-visibility: hidden; + animation: vex-pulse 1.1s infinite; outline: none; } @media (max-width: 568px) { .vex.vex-theme-bottom-right-corner .vex-dialog-button:focus { - animation: none; -webkit-animation: none; - -moz-animation: none; - -ms-animation: none; - -o-animation: none; - -webkit-backface-visibility: hidden; } } + animation: none; } } .vex.vex-theme-bottom-right-corner .vex-dialog-button.vex-dialog-button-primary { background: #3288e6; color: #fff; } @@ -421,11 +171,7 @@ color: #777; } .vex-loading-spinner.vex-theme-bottom-right-corner { - -moz-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); - -moz-border-radius: 100%; - -webkit-border-radius: 100%; border-radius: 100%; background: #f0f0f0; border: .2em solid transparent; diff --git a/dist/css/vex-theme-default.css b/dist/css/vex-theme-default.css index 31bbdce..c1b4bdd 100644 --- a/dist/css/vex-theme-default.css +++ b/dist/css/vex-theme-default.css @@ -1,253 +1,69 @@ -@keyframes vex-flyin { - 0% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } - 100% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } - @-webkit-keyframes vex-flyin { 0% { opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } - 100% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } - -@-moz-keyframes vex-flyin { - 0% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } - 100% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } - -@-ms-keyframes vex-flyin { - 0% { - opacity: 0; - transform: translateY(-40px); -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } + transform: translateY(-40px); } 100% { opacity: 1; - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } + transform: translateY(0); } } -@-o-keyframes vex-flyin { +@keyframes vex-flyin { 0% { opacity: 0; - transform: translateY(-40px); -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } + transform: translateY(-40px); } 100% { opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } - -@keyframes vex-flyout { - 0% { - opacity: 1; - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } + transform: translateY(0); } } @-webkit-keyframes vex-flyout { 0% { opacity: 1; - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } + transform: translateY(0); } 100% { opacity: 0; - transform: translateY(-40px); -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } + transform: translateY(-40px); } } -@-moz-keyframes vex-flyout { - 0% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } - -@-ms-keyframes vex-flyout { - 0% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } - -@-o-keyframes vex-flyout { +@keyframes vex-flyout { 0% { opacity: 1; - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } + transform: translateY(0); } 100% { opacity: 0; - transform: translateY(-40px); -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } - -@keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } + transform: translateY(-40px); } } @-webkit-keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } -@-moz-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-ms-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-o-keyframes vex-pulse { +@keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } .vex.vex-theme-default { padding-top: 160px; padding-bottom: 160px; } .vex.vex-theme-default.vex-closing .vex-content { - animation: vex-flyout 0.5s forwards; - -webkit-animation: vex-flyout 0.5s forwards; - -moz-animation: vex-flyout 0.5s forwards; - -ms-animation: vex-flyout 0.5s forwards; - -o-animation: vex-flyout 0.5s forwards; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-flyout .5s forwards; + animation: vex-flyout .5s forwards; } .vex.vex-theme-default .vex-content { - animation: vex-flyin 0.5s; - -webkit-animation: vex-flyin 0.5s; - -moz-animation: vex-flyin 0.5s; - -ms-animation: vex-flyin 0.5s; - -o-animation: vex-flyin 0.5s; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-flyin .5s; + animation: vex-flyin .5s; } .vex.vex-theme-default .vex-content { - -moz-border-radius: 5px; - -webkit-border-radius: 5px; border-radius: 5px; font-family: "Helvetica Neue", sans-serif; background: #f0f0f0; @@ -262,16 +78,12 @@ .vex.vex-theme-default .vex-content h1, .vex.vex-theme-default .vex-content h2, .vex.vex-theme-default .vex-content h3, .vex.vex-theme-default .vex-content h4, .vex.vex-theme-default .vex-content h5, .vex.vex-theme-default .vex-content h6, .vex.vex-theme-default .vex-content p, .vex.vex-theme-default .vex-content ul, .vex.vex-theme-default .vex-content li { color: inherit; } .vex.vex-theme-default .vex-close { - -moz-border-radius: 5px; - -webkit-border-radius: 5px; border-radius: 5px; 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"; @@ -293,8 +105,6 @@ .vex.vex-theme-default .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-default .vex-dialog-form .vex-dialog-input select, .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"] { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; background: #fff; width: 100%; @@ -306,8 +116,6 @@ min-height: 2.5em; margin: 0 0 .25em; } .vex.vex-theme-default .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-default .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px #8dbdf1; - -webkit-box-shadow: inset 0 0 0 2px #8dbdf1; box-shadow: inset 0 0 0 2px #8dbdf1; outline: none; } .vex.vex-theme-default .vex-dialog-form .vex-dialog-buttons { @@ -317,8 +125,6 @@ display: table; clear: both; } .vex.vex-theme-default .vex-dialog-button { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; border: 0; float: right; @@ -332,21 +138,13 @@ .vex.vex-theme-default .vex-dialog-button.vex-last { margin-left: 0; } .vex.vex-theme-default .vex-dialog-button:focus { - animation: vex-pulse 1.1s infinite; -webkit-animation: vex-pulse 1.1s infinite; - -moz-animation: vex-pulse 1.1s infinite; - -ms-animation: vex-pulse 1.1s infinite; - -o-animation: vex-pulse 1.1s infinite; - -webkit-backface-visibility: hidden; + animation: vex-pulse 1.1s infinite; outline: none; } @media (max-width: 568px) { .vex.vex-theme-default .vex-dialog-button:focus { - animation: none; -webkit-animation: none; - -moz-animation: none; - -ms-animation: none; - -o-animation: none; - -webkit-backface-visibility: hidden; } } + animation: none; } } .vex.vex-theme-default .vex-dialog-button.vex-dialog-button-primary { background: #3288e6; color: #fff; } @@ -355,11 +153,7 @@ color: #777; } .vex-loading-spinner.vex-theme-default { - -moz-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); - -moz-border-radius: 100%; - -webkit-border-radius: 100%; border-radius: 100%; background: #f0f0f0; border: .2em solid transparent; diff --git a/dist/css/vex-theme-flat-attack.css b/dist/css/vex-theme-flat-attack.css index 91e49c1..ca776dd 100644 --- a/dist/css/vex-theme-flat-attack.css +++ b/dist/css/vex-theme-flat-attack.css @@ -1,190 +1,59 @@ -@keyframes vex-flipin-horizontal { - 0% { - opacity: 0; - transform: rotateY(-90deg); - -webkit-transform: rotateY(-90deg); - -moz-transform: rotateY(-90deg); - -ms-transform: rotateY(-90deg); - -o-transform: rotateY(-90deg); } - 100% { - opacity: 1; - transform: rotateY(0deg); - -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } } - @-webkit-keyframes vex-flipin-horizontal { 0% { opacity: 0; - transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); - -moz-transform: rotateY(-90deg); - -ms-transform: rotateY(-90deg); - -o-transform: rotateY(-90deg); } + transform: rotateY(-90deg); } 100% { opacity: 1; - transform: rotateY(0deg); -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } } + transform: rotateY(0deg); } } -@-moz-keyframes vex-flipin-horizontal { - 0% { - opacity: 0; - transform: rotateY(-90deg); - -webkit-transform: rotateY(-90deg); - -moz-transform: rotateY(-90deg); - -ms-transform: rotateY(-90deg); - -o-transform: rotateY(-90deg); } - 100% { - opacity: 1; - transform: rotateY(0deg); - -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } } - -@-ms-keyframes vex-flipin-horizontal { - 0% { - opacity: 0; - transform: rotateY(-90deg); - -webkit-transform: rotateY(-90deg); - -moz-transform: rotateY(-90deg); - -ms-transform: rotateY(-90deg); - -o-transform: rotateY(-90deg); } - 100% { - opacity: 1; - transform: rotateY(0deg); - -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } } - -@-o-keyframes vex-flipin-horizontal { +@keyframes vex-flipin-horizontal { 0% { opacity: 0; - transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); - -moz-transform: rotateY(-90deg); - -ms-transform: rotateY(-90deg); - -o-transform: rotateY(-90deg); } + transform: rotateY(-90deg); } 100% { opacity: 1; - transform: rotateY(0deg); -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } } - -@keyframes vex-flipout-horizontal { - 0% { - opacity: 1; - transform: rotateY(0deg); - -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } - 100% { - opacity: 0; - transform: rotateY(90deg); - -webkit-transform: rotateY(90deg); - -moz-transform: rotateY(90deg); - -ms-transform: rotateY(90deg); - -o-transform: rotateY(90deg); } } + transform: rotateY(0deg); } } @-webkit-keyframes vex-flipout-horizontal { 0% { opacity: 1; - transform: rotateY(0deg); -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } + transform: rotateY(0deg); } 100% { opacity: 0; - transform: rotateY(90deg); -webkit-transform: rotateY(90deg); - -moz-transform: rotateY(90deg); - -ms-transform: rotateY(90deg); - -o-transform: rotateY(90deg); } } + transform: rotateY(90deg); } } -@-moz-keyframes vex-flipout-horizontal { - 0% { - opacity: 1; - transform: rotateY(0deg); - -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } - 100% { - opacity: 0; - transform: rotateY(90deg); - -webkit-transform: rotateY(90deg); - -moz-transform: rotateY(90deg); - -ms-transform: rotateY(90deg); - -o-transform: rotateY(90deg); } } - -@-ms-keyframes vex-flipout-horizontal { - 0% { - opacity: 1; - transform: rotateY(0deg); - -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } - 100% { - opacity: 0; - transform: rotateY(90deg); - -webkit-transform: rotateY(90deg); - -moz-transform: rotateY(90deg); - -ms-transform: rotateY(90deg); - -o-transform: rotateY(90deg); } } - -@-o-keyframes vex-flipout-horizontal { +@keyframes vex-flipout-horizontal { 0% { opacity: 1; - transform: rotateY(0deg); -webkit-transform: rotateY(0deg); - -moz-transform: rotateY(0deg); - -ms-transform: rotateY(0deg); - -o-transform: rotateY(0deg); } + transform: rotateY(0deg); } 100% { opacity: 0; - transform: rotateY(90deg); -webkit-transform: rotateY(90deg); - -moz-transform: rotateY(90deg); - -ms-transform: rotateY(90deg); - -o-transform: rotateY(90deg); } } + transform: rotateY(90deg); } } .vex.vex-theme-flat-attack { - -moz-perspective: 1300px; -webkit-perspective: 1300px; perspective: 1300px; - -moz-perspective-origin: 50% 150px; -webkit-perspective-origin: 50% 150px; perspective-origin: 50% 150px; padding-top: 100px; padding-bottom: 100px; font-size: 1.5em; } .vex.vex-theme-flat-attack.vex-closing .vex-content { - animation: vex-flipout-horizontal 0.5s forwards; - -webkit-animation: vex-flipout-horizontal 0.5s forwards; - -moz-animation: vex-flipout-horizontal 0.5s forwards; - -ms-animation: vex-flipout-horizontal 0.5s forwards; - -o-animation: vex-flipout-horizontal 0.5s forwards; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-flipout-horizontal .5s forwards; + animation: vex-flipout-horizontal .5s forwards; } .vex.vex-theme-flat-attack .vex-content { -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; transform-style: preserve-3d; - animation: vex-flipin-horizontal 0.5s; - -webkit-animation: vex-flipin-horizontal 0.5s; - -moz-animation: vex-flipin-horizontal 0.5s; - -ms-animation: vex-flipin-horizontal 0.5s; - -o-animation: vex-flipin-horizontal 0.5s; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-flipin-horizontal .5s; + animation: vex-flipin-horizontal .5s; } .vex.vex-theme-flat-attack .vex-content { font-family: "Helvetica Neue", sans-serif; font-weight: 200; @@ -224,8 +93,6 @@ .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input { 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; border-radius: 3px; background: #f0f0f0; width: 100%; @@ -237,8 +104,6 @@ min-height: 2.5em; margin: 0 0 .25em; } .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px #666; - -webkit-box-shadow: inset 0 0 0 2px #666; box-shadow: inset 0 0 0 2px #666; outline: none; } .vex.vex-theme-flat-attack .vex-dialog-form .vex-dialog-buttons { @@ -252,8 +117,6 @@ display: table; clear: both; } .vex.vex-theme-flat-attack .vex-dialog-button { - -moz-border-radius: 0; - -webkit-border-radius: 0; border-radius: 0; border: 0; margin: 0; @@ -273,15 +136,11 @@ background: #666; color: #fff; } .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-primary:focus { - -moz-box-shadow: inset 0 3px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: inset 0 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 3px rgba(0, 0, 0, 0.2); } .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary { background: #fff; color: #ccc; } .vex.vex-theme-flat-attack .vex-dialog-button.vex-dialog-button-secondary:focus { - -moz-box-shadow: inset 0 3px #aaa; - -webkit-box-shadow: inset 0 3px #aaa; box-shadow: inset 0 3px #aaa; background: #eee; color: #777; } @@ -290,32 +149,24 @@ .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-close:before { background: #ff7ea7; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px #ff7ea7; - -webkit-box-shadow: inset 0 0 0 2px #ff7ea7; box-shadow: inset 0 0 0 2px #ff7ea7; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-pink .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary { background: #ff7ea7; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-close:before { background: #ce4a55; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px #ce4a55; - -webkit-box-shadow: inset 0 0 0 2px #ce4a55; box-shadow: inset 0 0 0 2px #ce4a55; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-red .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary { background: #ce4a55; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-close:before { background: #34b989; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px #34b989; - -webkit-box-shadow: inset 0 0 0 2px #34b989; box-shadow: inset 0 0 0 2px #34b989; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-green .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary { background: #34b989; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-close:before { background: #477FA5; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px #477FA5; - -webkit-box-shadow: inset 0 0 0 2px #477FA5; box-shadow: inset 0 0 0 2px #477FA5; } .vex.vex-theme-flat-attack.vex-theme-flat-attack-blue .vex-dialog-form .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary { background: #477FA5; } diff --git a/dist/css/vex-theme-os.css b/dist/css/vex-theme-os.css index 91310f2..3e1d210 100644 --- a/dist/css/vex-theme-os.css +++ b/dist/css/vex-theme-os.css @@ -1,256 +1,70 @@ -@keyframes vex-flyin { - 0% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } - 100% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } - @-webkit-keyframes vex-flyin { 0% { opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } - 100% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } - -@-moz-keyframes vex-flyin { - 0% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } - 100% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } - -@-ms-keyframes vex-flyin { - 0% { - opacity: 0; - transform: translateY(-40px); -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } + transform: translateY(-40px); } 100% { opacity: 1; - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } + transform: translateY(0); } } -@-o-keyframes vex-flyin { +@keyframes vex-flyin { 0% { opacity: 0; - transform: translateY(-40px); -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } + transform: translateY(-40px); } 100% { opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } } - -@keyframes vex-flyout { - 0% { - opacity: 1; - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } + transform: translateY(0); } } @-webkit-keyframes vex-flyout { 0% { opacity: 1; - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } + transform: translateY(0); } 100% { opacity: 0; - transform: translateY(-40px); -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } + transform: translateY(-40px); } } -@-moz-keyframes vex-flyout { - 0% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } - -@-ms-keyframes vex-flyout { - 0% { - opacity: 1; - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - opacity: 0; - transform: translateY(-40px); - -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } - -@-o-keyframes vex-flyout { +@keyframes vex-flyout { 0% { opacity: 1; - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } + transform: translateY(0); } 100% { opacity: 0; - transform: translateY(-40px); -webkit-transform: translateY(-40px); - -moz-transform: translateY(-40px); - -ms-transform: translateY(-40px); - -o-transform: translateY(-40px); } } - -@keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } + transform: translateY(-40px); } } @-webkit-keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } -@-moz-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-ms-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-o-keyframes vex-pulse { +@keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } .vex.vex-theme-os { padding-top: 160px; padding-bottom: 160px; } .vex.vex-theme-os.vex-closing .vex-content { - animation: vex-flyout 0.5s forwards; - -webkit-animation: vex-flyout 0.5s forwards; - -moz-animation: vex-flyout 0.5s forwards; - -ms-animation: vex-flyout 0.5s forwards; - -o-animation: vex-flyout 0.5s forwards; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-flyout .5s forwards; + animation: vex-flyout .5s forwards; } .vex.vex-theme-os .vex-content { - animation: vex-flyin 0.5s; - -webkit-animation: vex-flyin 0.5s; - -moz-animation: vex-flyin 0.5s; - -ms-animation: vex-flyin 0.5s; - -o-animation: vex-flyin 0.5s; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-flyin .5s; + animation: vex-flyin .5s; } .vex.vex-theme-os .vex-content { - -moz-border-radius: 5px; - -webkit-border-radius: 5px; border-radius: 5px; - -moz-box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, 0.08); - -webkit-box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, 0.08); font-family: "Helvetica Neue", sans-serif; border-top: 20px solid #bbb; @@ -266,16 +80,12 @@ .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; 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"; @@ -297,8 +107,6 @@ .vex.vex-theme-os .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-os .vex-dialog-form .vex-dialog-input select, .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"] { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; background: #fff; width: 100%; @@ -310,8 +118,6 @@ min-height: 2.5em; margin: 0 0 .25em; } .vex.vex-theme-os .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-os .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 1px #3288e6; - -webkit-box-shadow: inset 0 0 0 1px #3288e6; box-shadow: inset 0 0 0 1px #3288e6; outline: none; } .vex.vex-theme-os .vex-dialog-form .vex-dialog-buttons { @@ -321,8 +127,6 @@ display: table; clear: both; } .vex.vex-theme-os .vex-dialog-button { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; border: 0; float: right; @@ -336,21 +140,13 @@ .vex.vex-theme-os .vex-dialog-button.vex-last { margin-left: 0; } .vex.vex-theme-os .vex-dialog-button:focus { - animation: vex-pulse 1.1s infinite; -webkit-animation: vex-pulse 1.1s infinite; - -moz-animation: vex-pulse 1.1s infinite; - -ms-animation: vex-pulse 1.1s infinite; - -o-animation: vex-pulse 1.1s infinite; - -webkit-backface-visibility: hidden; + animation: vex-pulse 1.1s infinite; outline: none; } @media (max-width: 568px) { .vex.vex-theme-os .vex-dialog-button:focus { - animation: none; -webkit-animation: none; - -moz-animation: none; - -ms-animation: none; - -o-animation: none; - -webkit-backface-visibility: hidden; } } + animation: none; } } .vex.vex-theme-os .vex-dialog-button.vex-dialog-button-primary { background: #3288e6; color: #fff; } @@ -359,11 +155,7 @@ color: #777; } .vex-loading-spinner.vex-theme-os { - -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0.5em rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0.5em rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0.5em rgba(0, 0, 0, 0.2); - -moz-border-radius: 100%; - -webkit-border-radius: 100%; border-radius: 100%; background: rgba(255, 255, 255, 0.2); width: 0; diff --git a/dist/css/vex-theme-plain.css b/dist/css/vex-theme-plain.css index 17dd617..cf06329 100644 --- a/dist/css/vex-theme-plain.css +++ b/dist/css/vex-theme-plain.css @@ -1,71 +1,17 @@ -@keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - @-webkit-keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } -@-moz-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-ms-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-o-keyframes vex-pulse { +@keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } .vex.vex-theme-plain { @@ -120,8 +66,6 @@ min-height: 2.5em; margin: 0 0 .25em; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-plain .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); outline: none; } .vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons { @@ -131,8 +75,6 @@ display: table; clear: both; } .vex.vex-theme-plain .vex-dialog-button { - -moz-border-radius: 0; - -webkit-border-radius: 0; border-radius: 0; border: 0; float: right; @@ -146,21 +88,13 @@ .vex.vex-theme-plain .vex-dialog-button.vex-last { margin-left: 0; } .vex.vex-theme-plain .vex-dialog-button:focus { - animation: vex-pulse 1.1s infinite; -webkit-animation: vex-pulse 1.1s infinite; - -moz-animation: vex-pulse 1.1s infinite; - -ms-animation: vex-pulse 1.1s infinite; - -o-animation: vex-pulse 1.1s infinite; - -webkit-backface-visibility: hidden; + animation: vex-pulse 1.1s infinite; outline: none; } @media (max-width: 568px) { .vex.vex-theme-plain .vex-dialog-button:focus { - animation: none; -webkit-animation: none; - -moz-animation: none; - -ms-animation: none; - -o-animation: none; - -webkit-backface-visibility: hidden; } } + animation: none; } } .vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-primary { background: #3288e6; color: #fff; } diff --git a/dist/css/vex-theme-top.css b/dist/css/vex-theme-top.css index a5c7cbb..68f15ec 100644 --- a/dist/css/vex-theme-top.css +++ b/dist/css/vex-theme-top.css @@ -1,312 +1,80 @@ -@keyframes vex-dropin { - 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 0; } - 1% { - transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); - opacity: 0; } - 2% { - transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); - opacity: 1; } - 100% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 1; } } - @-webkit-keyframes vex-dropin { 0% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 0; } - 1% { - transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); - opacity: 0; } - 2% { - transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); - opacity: 1; } - 100% { transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 1; } } - -@-moz-keyframes vex-dropin { - 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); opacity: 0; } 1% { - transform: translateY(-800px); -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); - opacity: 0; } - 2% { transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); - opacity: 1; } - 100% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 1; } } - -@-ms-keyframes vex-dropin { - 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 0; } - 1% { - transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); opacity: 0; } 2% { - transform: translateY(-800px); -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); + transform: translateY(-800px); opacity: 1; } 100% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); + transform: translateY(0); opacity: 1; } } -@-o-keyframes vex-dropin { +@keyframes vex-dropin { 0% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); + transform: translateY(0); opacity: 0; } 1% { - transform: translateY(-800px); -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); + transform: translateY(-800px); opacity: 0; } 2% { - transform: translateY(-800px); -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); + transform: translateY(-800px); opacity: 1; } 100% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); - opacity: 1; } } - -@keyframes vex-dropout { - 0% { transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); } } + opacity: 1; } } @-webkit-keyframes vex-dropout { 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); } } - -@-moz-keyframes vex-dropout { - 0% { - transform: translateY(0); - -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } - 100% { - transform: translateY(-800px); - -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); } } - -@-ms-keyframes vex-dropout { - 0% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } + transform: translateY(0); } 100% { - transform: translateY(-800px); -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); } } + transform: translateY(-800px); } } -@-o-keyframes vex-dropout { +@keyframes vex-dropout { 0% { - transform: translateY(0); -webkit-transform: translateY(0); - -moz-transform: translateY(0); - -ms-transform: translateY(0); - -o-transform: translateY(0); } + transform: translateY(0); } 100% { - transform: translateY(-800px); -webkit-transform: translateY(-800px); - -moz-transform: translateY(-800px); - -ms-transform: translateY(-800px); - -o-transform: translateY(-800px); } } - -@keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } + transform: translateY(-800px); } } @-webkit-keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } -@-moz-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-ms-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-o-keyframes vex-pulse { +@keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } .vex.vex-theme-top.vex-closing .vex-content { - animation: vex-dropout 0.5s forwards; - -webkit-animation: vex-dropout 0.5s forwards; - -moz-animation: vex-dropout 0.5s forwards; - -ms-animation: vex-dropout 0.5s forwards; - -o-animation: vex-dropout 0.5s forwards; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-dropout .5s forwards; + animation: vex-dropout .5s forwards; } .vex.vex-theme-top .vex-content { - animation: vex-dropin 0.5s; - -webkit-animation: vex-dropin 0.5s; - -moz-animation: vex-dropin 0.5s; - -ms-animation: vex-dropin 0.5s; - -o-animation: vex-dropin 0.5s; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-dropin .5s; + animation: vex-dropin .5s; } .vex.vex-theme-top .vex-content { - -moz-border-radius: 0 0 5px 5px; - -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; font-family: "Helvetica Neue", sans-serif; background: #f0f0f0; @@ -322,16 +90,12 @@ color: inherit; } .vex.vex-theme-top .vex-close { - -moz-border-radius: 5px; - -webkit-border-radius: 5px; border-radius: 5px; 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"; @@ -355,8 +119,6 @@ .vex.vex-theme-top .vex-dialog-form .vex-dialog-input { margin-bottom: 1em; } .vex.vex-theme-top .vex-dialog-form .vex-dialog-input select, .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"] { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; background: #fff; width: 100%; @@ -368,8 +130,6 @@ min-height: 2.5em; margin: 0 0 .25em; } .vex.vex-theme-top .vex-dialog-form .vex-dialog-input select:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input textarea:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="date"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="datetime-local"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="email"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="month"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="number"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="password"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="search"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="tel"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="text"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="time"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="url"]:focus, .vex.vex-theme-top .vex-dialog-form .vex-dialog-input input[type="week"]:focus { - -moz-box-shadow: inset 0 0 0 2px #8dbdf1; - -webkit-box-shadow: inset 0 0 0 2px #8dbdf1; box-shadow: inset 0 0 0 2px #8dbdf1; outline: none; } @@ -381,8 +141,6 @@ clear: both; } .vex.vex-theme-top .vex-dialog-button { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; border: 0; float: right; @@ -396,21 +154,13 @@ .vex.vex-theme-top .vex-dialog-button.vex-last { margin-left: 0; } .vex.vex-theme-top .vex-dialog-button:focus { - animation: vex-pulse 1.1s infinite; -webkit-animation: vex-pulse 1.1s infinite; - -moz-animation: vex-pulse 1.1s infinite; - -ms-animation: vex-pulse 1.1s infinite; - -o-animation: vex-pulse 1.1s infinite; - -webkit-backface-visibility: hidden; + animation: vex-pulse 1.1s infinite; outline: none; } @media (max-width: 568px) { .vex.vex-theme-top .vex-dialog-button:focus { - animation: none; -webkit-animation: none; - -moz-animation: none; - -ms-animation: none; - -o-animation: none; - -webkit-backface-visibility: hidden; } } + animation: none; } } .vex.vex-theme-top .vex-dialog-button.vex-dialog-button-primary { background: #3288e6; color: #fff; } @@ -419,11 +169,7 @@ color: #777; } .vex-loading-spinner.vex-theme-top { - -moz-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3); - -moz-border-radius: 100%; - -webkit-border-radius: 100%; border-radius: 100%; background: #f0f0f0; border: .2em solid transparent; diff --git a/dist/css/vex-theme-wireframe.css b/dist/css/vex-theme-wireframe.css index d3ba9c6..4f1d426 100644 --- a/dist/css/vex-theme-wireframe.css +++ b/dist/css/vex-theme-wireframe.css @@ -1,71 +1,17 @@ -@keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - @-webkit-keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } -@-moz-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-ms-keyframes vex-pulse { - 0% { - -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; - box-shadow: inset 0 0 0 300px transparent; } } - -@-o-keyframes vex-pulse { +@keyframes vex-pulse { 0% { - -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; box-shadow: inset 0 0 0 300px transparent; } } .vex.vex-theme-wireframe { @@ -130,8 +76,6 @@ display: table; clear: both; } .vex.vex-theme-wireframe .vex-dialog-button { - -moz-border-radius: 0; - -webkit-border-radius: 0; border-radius: 0; border: 0; float: right; @@ -145,21 +89,13 @@ .vex.vex-theme-wireframe .vex-dialog-button.vex-last { margin-left: 0; } .vex.vex-theme-wireframe .vex-dialog-button:focus { - animation: vex-pulse 1.1s infinite; -webkit-animation: vex-pulse 1.1s infinite; - -moz-animation: vex-pulse 1.1s infinite; - -ms-animation: vex-pulse 1.1s infinite; - -o-animation: vex-pulse 1.1s infinite; - -webkit-backface-visibility: hidden; + animation: vex-pulse 1.1s infinite; outline: none; } @media (max-width: 568px) { .vex.vex-theme-wireframe .vex-dialog-button:focus { - animation: none; -webkit-animation: none; - -moz-animation: none; - -ms-animation: none; - -o-animation: none; - -webkit-backface-visibility: hidden; } } + animation: none; } } .vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-primary { background: #000; color: #fff; diff --git a/dist/css/vex.css b/dist/css/vex.css index eae7786..809da92 100644 --- a/dist/css/vex.css +++ b/dist/css/vex.css @@ -1,136 +1,45 @@ -@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 { +@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 { +@keyframes vex-fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } -@keyframes vex-rotation { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); } - 100% { - transform: rotate(359deg); - -webkit-transform: rotate(359deg); - -moz-transform: rotate(359deg); - -ms-transform: rotate(359deg); - -o-transform: rotate(359deg); } } - @-webkit-keyframes vex-rotation { 0% { - transform: rotate(0deg); -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); } + transform: rotate(0deg); } 100% { - transform: rotate(359deg); -webkit-transform: rotate(359deg); - -moz-transform: rotate(359deg); - -ms-transform: rotate(359deg); - -o-transform: rotate(359deg); } } + transform: rotate(359deg); } } -@-moz-keyframes vex-rotation { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); } - 100% { - transform: rotate(359deg); - -webkit-transform: rotate(359deg); - -moz-transform: rotate(359deg); - -ms-transform: rotate(359deg); - -o-transform: rotate(359deg); } } - -@-ms-keyframes vex-rotation { - 0% { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); } - 100% { - transform: rotate(359deg); - -webkit-transform: rotate(359deg); - -moz-transform: rotate(359deg); - -ms-transform: rotate(359deg); - -o-transform: rotate(359deg); } } - -@-o-keyframes vex-rotation { +@keyframes vex-rotation { 0% { - transform: rotate(0deg); -webkit-transform: rotate(0deg); - -moz-transform: rotate(0deg); - -ms-transform: rotate(0deg); - -o-transform: rotate(0deg); } + transform: rotate(0deg); } 100% { - transform: rotate(359deg); -webkit-transform: rotate(359deg); - -moz-transform: rotate(359deg); - -ms-transform: rotate(359deg); - -o-transform: rotate(359deg); } } + transform: rotate(359deg); } } .vex, .vex *, .vex *:before, .vex *:after { -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; box-sizing: border-box; } .vex { @@ -151,17 +60,8 @@ overflow: scroll; } .vex-overlay { - background: #000; - filter: alpha(opacity=40); - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; } - -.vex-overlay { - animation: vex-fadein 0.5s; - -webkit-animation: vex-fadein 0.5s; - -moz-animation: vex-fadein 0.5s; - -ms-animation: vex-fadein 0.5s; - -o-animation: vex-fadein 0.5s; - -webkit-backface-visibility: hidden; + -webkit-animation: vex-fadein .5s; + animation: vex-fadein .5s; position: fixed; z-index: 1111; background: rgba(0, 0, 0, 0.4); @@ -171,29 +71,17 @@ left: 0; } .vex-overlay.vex-closing { - animation: vex-fadeout 0.5s forwards; - -webkit-animation: vex-fadeout 0.5s forwards; - -moz-animation: vex-fadeout 0.5s forwards; - -ms-animation: vex-fadeout 0.5s forwards; - -o-animation: vex-fadeout 0.5s forwards; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-fadeout .5s forwards; + animation: vex-fadeout .5s forwards; } .vex-content { - animation: vex-fadein 0.5s; - -webkit-animation: vex-fadein 0.5s; - -moz-animation: vex-fadein 0.5s; - -ms-animation: vex-fadein 0.5s; - -o-animation: vex-fadein 0.5s; - -webkit-backface-visibility: hidden; + -webkit-animation: vex-fadein .5s; + animation: vex-fadein .5s; background: #fff; } .vex.vex-closing .vex-content { - animation: vex-fadeout 0.5s forwards; - -webkit-animation: vex-fadeout 0.5s forwards; - -moz-animation: vex-fadeout 0.5s forwards; - -ms-animation: vex-fadeout 0.5s forwards; - -o-animation: vex-fadeout 0.5s forwards; - -webkit-backface-visibility: hidden; } + -webkit-animation: vex-fadeout .5s forwards; + animation: vex-fadeout .5s forwards; } .vex-close:before { font-family: Arial, sans-serif; @@ -204,20 +92,15 @@ .vex-dialog-button { text-rendering: optimizeLegibility; - -moz-appearance: none; -webkit-appearance: none; + -moz-appearance: none; + appearance: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .vex-loading-spinner { - animation: vex-rotation 0.7s linear infinite; - -webkit-animation: vex-rotation 0.7s linear infinite; - -moz-animation: vex-rotation 0.7s linear infinite; - -ms-animation: vex-rotation 0.7s linear infinite; - -o-animation: vex-rotation 0.7s linear infinite; - -webkit-backface-visibility: hidden; - -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1); - -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1); + -webkit-animation: vex-rotation .7s linear infinite; + animation: vex-rotation .7s linear infinite; box-shadow: 0 0 1em rgba(0, 0, 0, 0.1); position: fixed; z-index: 1112; diff --git a/package.json b/package.json index a3d64fa..9fa8751 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,12 @@ "vex-dialog": "1.0.7" }, "devDependencies": { + "autoprefixer": "^7.1.3", "grunt": "1.0.1", "grunt-browserify": "5.0.0", "grunt-contrib-compass": "1.1.1", "grunt-contrib-uglify": "1.0.1", + "grunt-postcss": "^0.8.0", "grunt-sass": "1.2.0", "standard": "7.1.2" }, @@ -36,5 +38,13 @@ "ignore": [ "/dist" ] - } + }, + "browserslist": [ + "IE 9", + "Edge 13", + "Firefox 21", + "Chrome 23", + "Safari 6", + "Opera 15" + ] } diff --git a/sass/_keyframes.sass b/sass/_keyframes.sass index 8e029c2..18bf714 100644 --- a/sass/_keyframes.sass +++ b/sass/_keyframes.sass @@ -3,14 +3,14 @@ // Overlay/content animations =keyframes-vex-fadein - +vex-keyframes("vex-fadein") + @keyframes vex-fadein 0% opacity: 0 100% opacity: 1 =keyframes-vex-fadeout - +vex-keyframes("vex-fadeout") + @keyframes vex-fadeout 0% opacity: 1 100% @@ -19,25 +19,25 @@ // Content animations =keyframes-vex-flyin - +vex-keyframes("vex-flyin") + @keyframes vex-flyin 0% opacity: 0 - +vex-transform(translateY(-40px)) + transform: translateY(-40px) 100% opacity: 1 - +vex-transform(translateY(0)) + transform: translateY(0) =keyframes-vex-flyout - +vex-keyframes("vex-flyout") + @keyframes vex-flyout 0% opacity: 1 - +vex-transform(translateY(0)) + transform: translateY(0) 100% opacity: 0 - +vex-transform(translateY(-40px)) + transform: translateY(-40px) =keyframes-vex-dropin - +vex-keyframes("vex-dropin") + @keyframes vex-dropin // We start at 0 first and, while hidden // move to -800px, where the animation // really begins. This was necessary because @@ -47,29 +47,29 @@ // above the page. // https://github.com/HubSpot/vex/issues/21 0% - +vex-transform(translateY(0)) + transform: translateY(0) opacity: 0 1% - +vex-transform(translateY(-800px)) + transform: translateY(-800px) opacity: 0 // Real animation begins here 2% - +vex-transform(translateY(-800px)) + transform: translateY(-800px) opacity: 1 100% - +vex-transform(translateY(0)) + transform: translateY(0) opacity: 1 =keyframes-vex-dropout - +vex-keyframes("vex-dropout") + @keyframes vex-dropout 0% - +vex-transform(translateY(0)) + transform: translateY(0) 100% - +vex-transform(translateY(-800px)) + transform: translateY(-800px) =keyframes-vex-slideup - +vex-keyframes("vex-slideup") + @keyframes vex-slideup // We start at 0 first and, while hidden // move to -800px, where the animation // really begins. This was necessary because @@ -79,61 +79,61 @@ // above the page. // https://github.com/HubSpot/vex/issues/21 0% - +vex-transform(translateY(0)) + transform: translateY(0) opacity: 0 1% - +vex-transform(translateY(800px)) + transform: translateY(800px) opacity: 0 // Real animation begins here 2% - +vex-transform(translateY(800px)) + transform: translateY(800px) opacity: 1 100% - +vex-transform(translateY(0)) + transform: translateY(0) opacity: 1 =keyframes-vex-slidedown - +vex-keyframes("vex-slidedown") + @keyframes vex-slidedown 0% - +vex-transform(translateY(0)) + transform: translateY(0) 100% - +vex-transform(translateY(800px)) + transform: translateY(800px) =keyframes-vex-flipin-horizontal - +vex-keyframes("vex-flipin-horizontal") + @keyframes vex-flipin-horizontal 0% opacity: 0 - +vex-transform(rotateY(-90deg)) + transform: rotateY(-90deg) 100% opacity: 1 - +vex-transform(rotateY(0deg)) + transform: rotateY(0deg) =keyframes-vex-flipout-horizontal - +vex-keyframes("vex-flipout-horizontal") + @keyframes vex-flipout-horizontal 0% opacity: 1 - +vex-transform(rotateY(0deg)) + transform: rotateY(0deg) 100% opacity: 0 - +vex-transform(rotateY(90deg)) + transform: rotateY(90deg) // Spinner animations =keyframes-vex-rotation - +vex-keyframes("vex-rotation") + @keyframes vex-rotation 0% - +vex-transform(rotate(0deg)) + transform: rotate(0deg) 100% - +vex-transform(rotate(359deg)) + transform: rotate(359deg) // Button animations =keyframes-vex-pulse - +vex-keyframes("vex-pulse") + @keyframes vex-pulse 0% - +box-shadow(inset 0 0 0 300px transparent) + box-shadow: inset 0 0 0 300px transparent 70% - +box-shadow(inset 0 0 0 300px rgba(255, 255, 255, .25)) + box-shadow: inset 0 0 0 300px rgba(255, 255, 255, .25) 100% - +box-shadow(inset 0 0 0 300px transparent) + box-shadow: inset 0 0 0 300px transparent diff --git a/sass/_mixins.sass b/sass/_mixins.sass index 8b03cf9..7c7bff5 100644 --- a/sass/_mixins.sass +++ b/sass/_mixins.sass @@ -1,35 +1,3 @@ -=vex-keyframes($name) - @keyframes #{$name} - @content - @-webkit-keyframes #{$name} - @content - @-moz-keyframes #{$name} - @content - @-ms-keyframes #{$name} - @content - @-o-keyframes #{$name} - @content - -=vex-animation($animation) - animation: $animation - -webkit-animation: $animation - -moz-animation: $animation - -ms-animation: $animation - -o-animation: $animation - -webkit-backface-visibility: hidden - -=vex-transform($transform) - transform: $transform - -webkit-transform: $transform - -moz-transform: $transform - -ms-transform: $transform - -o-transform: $transform - -=vex-preserve-3d - -webkit-transform-style: preserve-3d - -moz-transform-style: preserve-3d - transform-style: preserve-3d - // copied from Compass (https://github.com/Compass/compass) on the 21st of January 2015: $prefix-context: null @@ -38,42 +6,6 @@ $critical-usage-threshold: 0.01 !default $default-has-layout-approach: zoom !default $has-layout-support-threshold: $critical-usage-threshold !default -// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/_support.scss -=box-sizing($box-model) - -moz-box-sizing: $box-model - -webkit-box-sizing: $box-model - box-sizing: $box-model - -// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_box-shadow.scss -=box-shadow($shadow...) - -moz-box-shadow: $shadow - -webkit-box-shadow: $shadow - box-shadow: $shadow - -// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_border-radius.scss -=border-radius($radius) - -moz-border-radius: $radius - -webkit-border-radius: $radius - border-radius: $radius - -// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_transform.scss -=perspective($p) - -moz-perspective: $p - -webkit-perspective: $p - perspective: $p - -// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_transform.scss -=perspective-origin($origin: 50%) - -moz-perspective-origin: $origin - -webkit-perspective-origin: $origin - perspective-origin: $origin - -// full mixin: https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/_support.scss -=appearance($appearance) - $appearance: unquote($appearance) - -moz-appearance: $appearance - -webkit-appearance: $appearance - =has-layout($approach: $default-has-layout-approach) @if support-legacy-browser("ie", "7", $threshold: $has-layout-support-threshold) @if $approach == zoom diff --git a/sass/vex-theme-bottom-right-corner.sass b/sass/vex-theme-bottom-right-corner.sass index 94d2eb8..95e22ea 100644 --- a/sass/vex-theme-bottom-right-corner.sass +++ b/sass/vex-theme-bottom-right-corner.sass @@ -17,13 +17,13 @@ $blue: #3288e6 display: none &.vex-closing .vex-content - +vex-animation(vex-slidedown .5s forwards) + animation: vex-slidedown .5s forwards .vex-content - +vex-animation(vex-slideup .5s) + animation: vex-slideup .5s .vex-content - +border-radius(5px 0 0 0) + border-radius: 5px 0 0 0 font-family: "Helvetica Neue", sans-serif background: #f0f0f0 color: #444 @@ -41,14 +41,14 @@ $blue: #3288e6 color: inherit .vex-close - +border-radius(5px) + border-radius: 5px position: absolute top: 0 right: 0 cursor: pointer &:before - +border-radius(3px) + border-radius: 3px position: absolute content: "\00D7" font-size: 26px @@ -75,7 +75,7 @@ $blue: #3288e6 margin-bottom: 1em select, 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"] - +border-radius(3px) + border-radius: 3px background: #fff width: 100% padding: .25em .67em @@ -87,14 +87,14 @@ $blue: #3288e6 margin: 0 0 .25em &:focus - +box-shadow(inset 0 0 0 2px lighten($blue, 20%)) + box-shadow: inset 0 0 0 2px lighten($blue, 20%) outline: none .vex-dialog-buttons +pie-clearfix() .vex-dialog-button - +border-radius(3px) + border-radius: 3px border: 0 float: right margin: 0 0 0 .5em @@ -109,13 +109,13 @@ $blue: #3288e6 margin-left: 0 &:focus - +vex-animation(vex-pulse 1.1s infinite) + animation: vex-pulse 1.1s infinite outline: none // vex-pulse uses -webkit-filter which // doesn't play so nice in mobile webkit @media (max-width: 568px) - +vex-animation(none) + animation: none &.vex-dialog-button-primary background: $blue @@ -126,8 +126,8 @@ $blue: #3288e6 color: #777 .vex-loading-spinner.vex-theme-bottom-right-corner - +box-shadow(0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3)) - +border-radius(100%) + box-shadow: 0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3) + border-radius: 100% background: #f0f0f0 border: .2em solid transparent border-top-color: #bbb diff --git a/sass/vex-theme-default.sass b/sass/vex-theme-default.sass index 41d6e5d..76ea443 100644 --- a/sass/vex-theme-default.sass +++ b/sass/vex-theme-default.sass @@ -12,13 +12,13 @@ $blue: #3288e6 padding-bottom: 160px &.vex-closing .vex-content - +vex-animation(vex-flyout .5s forwards) + animation: vex-flyout .5s forwards .vex-content - +vex-animation(vex-flyin .5s) + animation: vex-flyin .5s .vex-content - +border-radius(5px) + border-radius: 5px font-family: "Helvetica Neue", sans-serif background: #f0f0f0 color: #444 @@ -34,14 +34,14 @@ $blue: #3288e6 color: inherit .vex-close - +border-radius(5px) + border-radius: 5px position: absolute top: 0 right: 0 cursor: pointer &:before - +border-radius(3px) + border-radius: 3px position: absolute content: "\00D7" font-size: 26px @@ -68,7 +68,7 @@ $blue: #3288e6 margin-bottom: 1em select, 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"] - +border-radius(3px) + border-radius: 3px background: #fff width: 100% padding: .25em .67em @@ -80,14 +80,14 @@ $blue: #3288e6 margin: 0 0 .25em &:focus - +box-shadow(inset 0 0 0 2px lighten($blue, 20%)) + box-shadow: inset 0 0 0 2px lighten($blue, 20%) outline: none .vex-dialog-buttons +pie-clearfix() .vex-dialog-button - +border-radius(3px) + border-radius: 3px border: 0 float: right margin: 0 0 0 .5em @@ -102,13 +102,13 @@ $blue: #3288e6 margin-left: 0 &:focus - +vex-animation(vex-pulse 1.1s infinite) + animation: vex-pulse 1.1s infinite outline: none // vex-pulse uses -webkit-filter which // doesn't play so nice in mobile webkit @media (max-width: 568px) - +vex-animation(none) + animation: none &.vex-dialog-button-primary background: $blue @@ -119,8 +119,8 @@ $blue: #3288e6 color: #777 .vex-loading-spinner.vex-theme-default - +box-shadow(0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3)) - +border-radius(100%) + box-shadow: 0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3) + border-radius: 100% background: #f0f0f0 border: .2em solid transparent border-top-color: #bbb diff --git a/sass/vex-theme-flat-attack.sass b/sass/vex-theme-flat-attack.sass index 3adda0d..6dfd7c8 100644 --- a/sass/vex-theme-flat-attack.sass +++ b/sass/vex-theme-flat-attack.sass @@ -20,24 +20,24 @@ $blue: #477FA5 select, 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"] &:focus - +box-shadow(inset 0 0 0 2px $color) + box-shadow: inset 0 0 0 2px $color .vex-dialog-buttons .vex-dialog-button.vex-dialog-button-primary background: $color .vex.vex-theme-flat-attack - +perspective(1300px) - +perspective-origin(50% 150px) + perspective: 1300px + perspective-origin: 50% 150px padding-top: 100px padding-bottom: 100px font-size: 1.5em &.vex-closing .vex-content - +vex-animation(vex-flipout-horizontal .5s forwards) + animation: vex-flipout-horizontal .5s forwards .vex-content - +vex-preserve-3d - +vex-animation(vex-flipin-horizontal .5s) + transform-style: preserve-3d + animation: vex-flipin-horizontal .5s .vex-content font-family: "Helvetica Neue", sans-serif @@ -86,7 +86,7 @@ $blue: #477FA5 margin-bottom: .5em 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"] - +border-radius(3px) + border-radius: 3px background: #f0f0f0 width: 100% padding: .25em .67em @@ -98,7 +98,7 @@ $blue: #477FA5 margin: 0 0 .25em &:focus - +box-shadow(inset 0 0 0 2px #666) + box-shadow: inset 0 0 0 2px #666 outline: none .vex-dialog-buttons @@ -109,7 +109,7 @@ $blue: #477FA5 margin-right: -2em .vex-dialog-button - +border-radius(0) + border-radius: 0 border: 0 margin: 0 float: right @@ -132,14 +132,14 @@ $blue: #477FA5 color: #fff &:focus - +box-shadow(inset 0 3px rgba(0, 0, 0, .2)) + box-shadow: inset 0 3px rgba(0, 0, 0, .2) &.vex-dialog-button-secondary background: #fff color: #ccc &:focus - +box-shadow(inset 0 3px #aaa) + box-shadow: inset 0 3px #aaa background: #eee color: #777 diff --git a/sass/vex-theme-os.sass b/sass/vex-theme-os.sass index 1dfb176..a992c2f 100644 --- a/sass/vex-theme-os.sass +++ b/sass/vex-theme-os.sass @@ -12,14 +12,14 @@ $blue: #3288e6 padding-bottom: 160px &.vex-closing .vex-content - +vex-animation(vex-flyout .5s forwards) + animation: vex-flyout .5s forwards .vex-content - +vex-animation(vex-flyin .5s) + animation: vex-flyin .5s .vex-content - +border-radius(5px) - +box-shadow(inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, .08)) + border-radius: 5px + box-shadow: inset 0 1px #a6a6a6, 0 0 0 1px rgba(0, 0, 0, .08) font-family: "Helvetica Neue", sans-serif border-top: 20px solid #bbb background: #f0f0f0 @@ -36,14 +36,14 @@ $blue: #3288e6 color: inherit .vex-close - +border-radius(0 5px 0 0) + border-radius: 0 5px 0 0 position: absolute top: 0 right: 0 cursor: pointer &:before - +border-radius(3px) + border-radius: 3px position: absolute content: "\00D7" font-size: 26px @@ -70,7 +70,7 @@ $blue: #3288e6 margin-bottom: 1em select, 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"] - +border-radius(3px) + border-radius: 3px background: #fff width: 100% padding: .25em .67em @@ -82,14 +82,14 @@ $blue: #3288e6 margin: 0 0 .25em &:focus - +box-shadow(inset 0 0 0 1px $blue) + box-shadow: inset 0 0 0 1px $blue outline: none .vex-dialog-buttons +pie-clearfix() .vex-dialog-button - +border-radius(3px) + border-radius: 3px border: 0 float: right margin: 0 0 0 .5em @@ -104,13 +104,13 @@ $blue: #3288e6 margin-left: 0 &:focus - +vex-animation(vex-pulse 1.1s infinite) + animation: vex-pulse 1.1s infinite outline: none // vex-pulse uses -webkit-filter which // doesn't play so nice in mobile webkit @media (max-width: 568px) - +vex-animation(none) + animation: none &.vex-dialog-button-primary background: $blue @@ -121,8 +121,8 @@ $blue: #3288e6 color: #777 .vex-loading-spinner.vex-theme-os - +box-shadow(0 0 0 1px rgba(0, 0, 0, .2), 0 0 .5em rgba(0, 0, 0, .2)) - +border-radius(100%) + box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 .5em rgba(0, 0, 0, .2) + border-radius: 100% background: rgba(255, 255, 255, .2) width: 0 height: 0 diff --git a/sass/vex-theme-plain.sass b/sass/vex-theme-plain.sass index 19e6e55..ff0d34b 100644 --- a/sass/vex-theme-plain.sass +++ b/sass/vex-theme-plain.sass @@ -68,14 +68,14 @@ $blue: #3288e6 margin: 0 0 .25em &:focus - +box-shadow(inset 0 0 0 2px rgba(0, 0, 0, .2)) + box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2) outline: none .vex-dialog-buttons +pie-clearfix() .vex-dialog-button - +border-radius(0) + border-radius: 0 border: 0 float: right margin: 0 0 0 .5em @@ -90,13 +90,13 @@ $blue: #3288e6 margin-left: 0 &:focus - +vex-animation(vex-pulse 1.1s infinite) + animation: vex-pulse 1.1s infinite outline: none // vex-pulse uses -webkit-filter which // doesn't play so nice in mobile webkit @media (max-width: 568px) - +vex-animation(none) + animation: none &.vex-dialog-button-primary background: $blue diff --git a/sass/vex-theme-top.sass b/sass/vex-theme-top.sass index 19ef532..f22298c 100644 --- a/sass/vex-theme-top.sass +++ b/sass/vex-theme-top.sass @@ -10,13 +10,13 @@ $blue: #3288e6 .vex.vex-theme-top &.vex-closing .vex-content - +vex-animation(vex-dropout .5s forwards) + animation: vex-dropout .5s forwards .vex-content - +vex-animation(vex-dropin .5s) + animation: vex-dropin .5s .vex-content - +border-radius(0 0 5px 5px) + border-radius: 0 0 5px 5px font-family: "Helvetica Neue", sans-serif background: #f0f0f0 color: #444 @@ -32,14 +32,14 @@ $blue: #3288e6 color: inherit .vex-close - +border-radius(5px) + border-radius: 5px position: absolute top: 0 right: 0 cursor: pointer &:before - +border-radius(3px) + border-radius: 3px position: absolute content: "\00D7" font-size: 26px @@ -66,7 +66,7 @@ $blue: #3288e6 margin-bottom: 1em select, 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"] - +border-radius(3px) + border-radius: 3px background: #fff width: 100% padding: .25em .67em @@ -78,14 +78,14 @@ $blue: #3288e6 margin: 0 0 .25em &:focus - +box-shadow(inset 0 0 0 2px lighten($blue, 20%)) + box-shadow: inset 0 0 0 2px lighten($blue, 20%) outline: none .vex-dialog-buttons +pie-clearfix() .vex-dialog-button - +border-radius(3px) + border-radius: 3px border: 0 float: right margin: 0 0 0 .5em @@ -100,13 +100,13 @@ $blue: #3288e6 margin-left: 0 &:focus - +vex-animation(vex-pulse 1.1s infinite) + animation: vex-pulse 1.1s infinite outline: none // vex-pulse uses -webkit-filter which // doesn't play so nice in mobile webkit @media (max-width: 568px) - +vex-animation(none) + animation: none &.vex-dialog-button-primary background: $blue @@ -117,8 +117,8 @@ $blue: #3288e6 color: #777 .vex-loading-spinner.vex-theme-top - +box-shadow(0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3)) - +border-radius(100%) + box-shadow: 0 0 0 .5em #f0f0f0, 0 0 1px .5em rgba(0, 0, 0, 0.3) + border-radius: 100% background: #f0f0f0 border: .2em solid transparent border-top-color: #bbb diff --git a/sass/vex-theme-wireframe.sass b/sass/vex-theme-wireframe.sass index df8a998..cc48b50 100644 --- a/sass/vex-theme-wireframe.sass +++ b/sass/vex-theme-wireframe.sass @@ -75,7 +75,7 @@ +pie-clearfix() .vex-dialog-button - +border-radius(0) + border-radius: 0 border: 0 float: right margin: 0 0 0 .5em @@ -90,13 +90,13 @@ margin-left: 0 &:focus - +vex-animation(vex-pulse 1.1s infinite) + animation: vex-pulse 1.1s infinite outline: none // vex-pulse uses -webkit-filter which // doesn't play so nice in mobile webkit @media (max-width: 568px) - +vex-animation(none) + animation: none &.vex-dialog-button-primary background: #000 diff --git a/sass/vex.sass b/sass/vex.sass index b0109be..9216e3c 100644 --- a/sass/vex.sass +++ b/sass/vex.sass @@ -7,7 +7,7 @@ +keyframes-vex-rotation .vex, .vex *, .vex *:before, .vex *:after - +box-sizing(border-box) + box-sizing: border-box .vex position: fixed @@ -26,14 +26,8 @@ height: 50px overflow: scroll -// IE .vex-overlay - background: #000 - filter: alpha(opacity=40) /* IE 5–7 */ - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" /* IE 8 */ - -.vex-overlay - +vex-animation(vex-fadein .5s) + animation: vex-fadein .5s position: fixed z-index: 1111 background: rgba(0, 0, 0, .4) @@ -43,14 +37,14 @@ left: 0 .vex-overlay.vex-closing - +vex-animation(vex-fadeout .5s forwards) + animation: vex-fadeout .5s forwards .vex-content - +vex-animation(vex-fadein .5s) + animation: vex-fadein .5s background: #fff .vex.vex-closing .vex-content - +vex-animation(vex-fadeout .5s forwards) + animation: vex-fadeout .5s forwards .vex-close:before font-family: Arial, sans-serif @@ -61,13 +55,13 @@ .vex-dialog-button text-rendering: optimizeLegibility - +appearance(none) + appearance: none cursor: pointer -webkit-tap-highlight-color: transparent .vex-loading-spinner - +vex-animation(vex-rotation .7s linear infinite) - +box-shadow(0 0 1em rgba(0, 0, 0, 0.1)) + animation: vex-rotation .7s linear infinite + box-shadow: 0 0 1em rgba(0, 0, 0, 0.1) position: fixed z-index: 1112 margin: auto