diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css index 878466797b..b207b31b9a 100644 --- a/dist/ionic-ios7.css +++ b/dist/ionic-ios7.css @@ -1614,17 +1614,21 @@ textarea { .input-group { overflow: hidden; - border-top: 1px solid #cccccc; - border-bottom: 1px solid #cccccc; - background-color: white; } + /* + border-top: $input-border-width solid $input-border-color; + border-bottom: $input-border-width solid $input-border-color; + background-color: $input-bg; + */ } .padded > .input-group, .input-group.inset { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; - border-right: 1px solid #cccccc; - border-left: 1px solid #cccccc; } + /* + border-right: $input-border-width solid $input-border-color; + border-left: $input-border-width solid $input-border-color; + */ } .input-group .input-wrapper + .input-wrapper { border-top: 1px solid #cccccc; } @@ -1924,7 +1928,8 @@ input[type="checkbox"][readonly] { opacity: 0.4; } .button.button-block { display: block; - margin: 10px 0 10px 0; } + margin: 10px 0 10px 0; + width: 100%; } .button.button-default { color: #333333; background-color: white; diff --git a/dist/ionic.css b/dist/ionic.css index 89865910e9..febb0d2b97 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -1614,17 +1614,21 @@ textarea { .input-group { overflow: hidden; - border-top: 1px solid #cccccc; - border-bottom: 1px solid #cccccc; - background-color: white; } + /* + border-top: $input-border-width solid $input-border-color; + border-bottom: $input-border-width solid $input-border-color; + background-color: $input-bg; + */ } .padded > .input-group, .input-group.inset { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; - border-right: 1px solid #cccccc; - border-left: 1px solid #cccccc; } + /* + border-right: $input-border-width solid $input-border-color; + border-left: $input-border-width solid $input-border-color; + */ } .input-group .input-wrapper + .input-wrapper { border-top: 1px solid #cccccc; } @@ -1911,7 +1915,8 @@ input[type="checkbox"][readonly] { opacity: 0.4; } .button.button-block { display: block; - margin: 10px 0 10px 0; } + margin: 10px 0 10px 0; + width: 100%; } .button.button-default { color: #333333; background-color: white; diff --git a/dist/ionic.js b/dist/ionic.js index 794473b949..5281d76a19 100644 --- a/dist/ionic.js +++ b/dist/ionic.js @@ -1666,36 +1666,6 @@ window.ionic = { } }; })(window.ionic); -;(function(ionic) { - - ionic.views.HeaderBar = function(opts) { - this.el = opts.el; - - this._titleEl = this.el.querySelector('.title'); - }; - - ionic.views.NavBar.prototype = { - resizeTitle: function() { - var - e, - j, - i, - title, - titleWidth, - children = this.el.children; - - for(i = 0, j = children.length; i < j; i++) { - e = children[i]; - if(/h\d/.test(e.nodeName.toLowerCase())) { - title = e; - } - } - - titleWidth = title.offsetWidth; - } - }; - -})(ionic); ; (function(ionic) { @@ -1740,27 +1710,29 @@ window.ionic = { }; })(ionic); -; -(function(ionic) { +;(function(ionic) { - ionic.views.SideMenu = function(opts) { + ionic.views.HeaderBar = function(opts) { this.el = opts.el; - this.width = opts.width; - this.isEnabled = opts.isEnabled || true; + + this._titleEl = this.el.querySelector('.title'); }; - ionic.views.SideMenu.prototype = { - getFullWidth: function() { - return this.width; - }, - setIsEnabled: function(isEnabled) { - this.isEnabled = isEnabled; - }, - bringUp: function() { - this.el.style.zIndex = 0; - }, - pushDown: function() { - this.el.style.zIndex = -1; + ionic.views.HeaderBar.prototype = { + resizeTitle: function() { + var e, j, i, + title, + titleWidth, + children = this.el.children; + + for(i = 0, j = children.length; i < j; i++) { + e = children[i]; + if(/h\d/.test(e.nodeName.toLowerCase())) { + title = e; + } + } + + titleWidth = title.offsetWidth; } }; @@ -1967,6 +1939,31 @@ ionic.views.TabBar.prototype = { })(window.ionic); ; +(function(ionic) { + + ionic.views.SideMenu = function(opts) { + this.el = opts.el; + this.width = opts.width; + this.isEnabled = opts.isEnabled || true; + }; + + ionic.views.SideMenu.prototype = { + getFullWidth: function() { + return this.width; + }, + setIsEnabled: function(isEnabled) { + this.isEnabled = isEnabled; + }, + bringUp: function() { + this.el.style.zIndex = 0; + }, + pushDown: function() { + this.el.style.zIndex = -1; + } + }; + +})(ionic); +; (function(ionic) { ionic.views.Toggle = function(opts) { @@ -2413,3 +2410,59 @@ ionic.controllers.TabBarController.prototype = { } })(ionic = window.ionic || {}); +;(function(window, document, ionic) { + + // polyfill use to simulate native "tap" + function inputTapPolyfill(ele, e) { + if(ele.type === "radio" || ele.type === "checkbox") { + ele.checked = !ele.checked; + } else if(ele.type === "submit" || ele.type === "button") { + ele.click(); + } else { + ele.focus(); + } + e.stopPropagation(); + e.preventDefault(); + return false; + } + + function tapPolyfill(e) { + // if the source event wasn't from a touch event then don't use this polyfill + if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return; + + var + e = e.gesture.srcEvent, // evaluate the actual source event, not the created event by gestures.js + ele = e.target; + + while(ele) { + if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) { + return inputTapPolyfill(ele, e); + } else if( ele.tagName === "LABEL" ) { + if(ele.control) { + return inputTapPolyfill(ele.control, e); + } + } else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) { + ele.click(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + ele = ele.parentElement; + } + + // they didn't tap one of the above elements + // if the currently active element is an input, and they tapped outside + // of the current input, then unset its focus (blur) so the keyboard goes away + var activeElement = document.activeElement; + if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) { + activeElement.blur(); + e.stopPropagation(); + e.preventDefault(); + return false; + } + } + + // global tap event listener polyfill for HTML elements that were "tapped" by the user + ionic.on("tap", tapPolyfill, window); + +})(this, document, ionic); diff --git a/dist/ionicIcons.css b/dist/ionicIcons.css index 8ee435357f..9a7a9d3fce 100644 --- a/dist/ionicIcons.css +++ b/dist/ionicIcons.css @@ -1684,17 +1684,21 @@ textarea { .input-group { overflow: hidden; - border-top: 1px solid #cccccc; - border-bottom: 1px solid #cccccc; - background-color: white; } + /* + border-top: $input-border-width solid $input-border-color; + border-bottom: $input-border-width solid $input-border-color; + background-color: $input-bg; + */ } .padded > .input-group, .input-group.inset { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; - border-right: 1px solid #cccccc; - border-left: 1px solid #cccccc; } + /* + border-right: $input-border-width solid $input-border-color; + border-left: $input-border-width solid $input-border-color; + */ } .input-group .input-wrapper + .input-wrapper { border-top: 1px solid #cccccc; } @@ -1981,7 +1985,8 @@ input[type="checkbox"][readonly] { opacity: 0.4; } .button.button-block { display: block; - margin: 10px 0 10px 0; } + margin: 10px 0 10px 0; + width: 100%; } .button.button-default { color: #333333; background-color: white; diff --git a/scss/ionic-ios7/_toggle.scss b/scss/ionic-ios7/_toggle.scss index 0b3502064f..0ea87b72e0 100644 --- a/scss/ionic-ios7/_toggle.scss +++ b/scss/ionic-ios7/_toggle.scss @@ -1,21 +1,3 @@ -$toggle-width: 54px; -$toggle-height: 32px; -$toggle-border-width: 2px; -$toggle-border-radius: 20px; - -$toggle-handle-radius: 20px; - -$toggle-off-bg-color: #fff; -$toggle-off-border-color: #ddd; - -$toggle-on-bg-color: #4bd863; -$toggle-on-border-color: $toggle-on-bg-color; - -$toggle-handle-off-bg-color: #fff; -$toggle-handle-on-bg-color: $toggle-handle-off-bg-color; - -$toggle-transition-duration: .2s; - /* the overall container of the toggle */ .toggle { display: inline-block; @@ -80,4 +62,4 @@ $toggle-transition-duration: .2s; -webkit-transform: none; transition-delay: .05s, 0s; } -} \ No newline at end of file +} diff --git a/scss/ionic-ios7/_variables.scss b/scss/ionic-ios7/_variables.scss new file mode 100644 index 0000000000..98ab62465a --- /dev/null +++ b/scss/ionic-ios7/_variables.scss @@ -0,0 +1,18 @@ +$toggle-width: 54px; +$toggle-height: 32px; +$toggle-border-width: 2px; +$toggle-border-radius: 20px; + +$toggle-handle-radius: 20px; + +$toggle-off-bg-color: #fff; +$toggle-off-border-color: #ddd; + +$toggle-on-bg-color: #4bd863; +$toggle-on-border-color: $toggle-on-bg-color; + +$toggle-handle-off-bg-color: #fff; +$toggle-handle-on-bg-color: $toggle-handle-off-bg-color; + +$toggle-transition-duration: .2s; + diff --git a/scss/ionic-ios7/ionic-ios7.scss b/scss/ionic-ios7/ionic-ios7.scss index c8c29c4a3f..8966bcce27 100644 --- a/scss/ionic-ios7/ionic-ios7.scss +++ b/scss/ionic-ios7/ionic-ios7.scss @@ -4,6 +4,7 @@ // Variables "../ionic/mixins", "../ionic/variables", + "variables", // Base "../ionic/reset",