Moved toggle vars to a vars file for ios7

This commit is contained in:
Max Lynch
2013-09-27 16:01:00 -05:00
parent 2abb446b8f
commit 7d96f77c53
7 changed files with 153 additions and 84 deletions

17
dist/ionic-ios7.css vendored
View File

@ -1614,17 +1614,21 @@ textarea {
.input-group { .input-group {
overflow: hidden; overflow: hidden;
border-top: 1px solid #cccccc; /*
border-bottom: 1px solid #cccccc; border-top: $input-border-width solid $input-border-color;
background-color: white; } border-bottom: $input-border-width solid $input-border-color;
background-color: $input-bg;
*/ }
.padded > .input-group, .padded > .input-group,
.input-group.inset { .input-group.inset {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
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 { .input-group .input-wrapper + .input-wrapper {
border-top: 1px solid #cccccc; } border-top: 1px solid #cccccc; }
@ -1924,7 +1928,8 @@ input[type="checkbox"][readonly] {
opacity: 0.4; } opacity: 0.4; }
.button.button-block { .button.button-block {
display: block; display: block;
margin: 10px 0 10px 0; } margin: 10px 0 10px 0;
width: 100%; }
.button.button-default { .button.button-default {
color: #333333; color: #333333;
background-color: white; background-color: white;

17
dist/ionic.css vendored
View File

@ -1614,17 +1614,21 @@ textarea {
.input-group { .input-group {
overflow: hidden; overflow: hidden;
border-top: 1px solid #cccccc; /*
border-bottom: 1px solid #cccccc; border-top: $input-border-width solid $input-border-color;
background-color: white; } border-bottom: $input-border-width solid $input-border-color;
background-color: $input-bg;
*/ }
.padded > .input-group, .padded > .input-group,
.input-group.inset { .input-group.inset {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
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 { .input-group .input-wrapper + .input-wrapper {
border-top: 1px solid #cccccc; } border-top: 1px solid #cccccc; }
@ -1911,7 +1915,8 @@ input[type="checkbox"][readonly] {
opacity: 0.4; } opacity: 0.4; }
.button.button-block { .button.button-block {
display: block; display: block;
margin: 10px 0 10px 0; } margin: 10px 0 10px 0;
width: 100%; }
.button.button-default { .button.button-default {
color: #333333; color: #333333;
background-color: white; background-color: white;

147
dist/ionic.js vendored
View File

@ -1666,36 +1666,6 @@ window.ionic = {
} }
}; };
})(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) { (function(ionic) {
@ -1740,27 +1710,29 @@ window.ionic = {
}; };
})(ionic); })(ionic);
; ;(function(ionic) {
(function(ionic) {
ionic.views.SideMenu = function(opts) { ionic.views.HeaderBar = function(opts) {
this.el = opts.el; this.el = opts.el;
this.width = opts.width;
this.isEnabled = opts.isEnabled || true; this._titleEl = this.el.querySelector('.title');
}; };
ionic.views.SideMenu.prototype = { ionic.views.HeaderBar.prototype = {
getFullWidth: function() { resizeTitle: function() {
return this.width; var e, j, i,
}, title,
setIsEnabled: function(isEnabled) { titleWidth,
this.isEnabled = isEnabled; children = this.el.children;
},
bringUp: function() { for(i = 0, j = children.length; i < j; i++) {
this.el.style.zIndex = 0; e = children[i];
}, if(/h\d/.test(e.nodeName.toLowerCase())) {
pushDown: function() { title = e;
this.el.style.zIndex = -1; }
}
titleWidth = title.offsetWidth;
} }
}; };
@ -1967,6 +1939,31 @@ ionic.views.TabBar.prototype = {
})(window.ionic); })(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) { (function(ionic) {
ionic.views.Toggle = function(opts) { ionic.views.Toggle = function(opts) {
@ -2413,3 +2410,59 @@ ionic.controllers.TabBarController.prototype = {
} }
})(ionic = window.ionic || {}); })(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);

17
dist/ionicIcons.css vendored
View File

@ -1684,17 +1684,21 @@ textarea {
.input-group { .input-group {
overflow: hidden; overflow: hidden;
border-top: 1px solid #cccccc; /*
border-bottom: 1px solid #cccccc; border-top: $input-border-width solid $input-border-color;
background-color: white; } border-bottom: $input-border-width solid $input-border-color;
background-color: $input-bg;
*/ }
.padded > .input-group, .padded > .input-group,
.input-group.inset { .input-group.inset {
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
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 { .input-group .input-wrapper + .input-wrapper {
border-top: 1px solid #cccccc; } border-top: 1px solid #cccccc; }
@ -1981,7 +1985,8 @@ input[type="checkbox"][readonly] {
opacity: 0.4; } opacity: 0.4; }
.button.button-block { .button.button-block {
display: block; display: block;
margin: 10px 0 10px 0; } margin: 10px 0 10px 0;
width: 100%; }
.button.button-default { .button.button-default {
color: #333333; color: #333333;
background-color: white; background-color: white;

View File

@ -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 */ /* the overall container of the toggle */
.toggle { .toggle {
display: inline-block; display: inline-block;

View File

@ -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;

View File

@ -4,6 +4,7 @@
// Variables // Variables
"../ionic/mixins", "../ionic/mixins",
"../ionic/variables", "../ionic/variables",
"variables",
// Base // Base
"../ionic/reset", "../ionic/reset",