mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
Moved toggle vars to a vars file for ios7
This commit is contained in:
17
dist/ionic-ios7.css
vendored
17
dist/ionic-ios7.css
vendored
@ -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
17
dist/ionic.css
vendored
@ -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
147
dist/ionic.js
vendored
@ -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
17
dist/ionicIcons.css
vendored
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
@ -80,4 +62,4 @@ $toggle-transition-duration: .2s;
|
|||||||
-webkit-transform: none;
|
-webkit-transform: none;
|
||||||
transition-delay: .05s, 0s;
|
transition-delay: .05s, 0s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
18
scss/ionic-ios7/_variables.scss
Normal file
18
scss/ionic-ios7/_variables.scss
Normal 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;
|
||||||
|
|
||||||
@ -4,6 +4,7 @@
|
|||||||
// Variables
|
// Variables
|
||||||
"../ionic/mixins",
|
"../ionic/mixins",
|
||||||
"../ionic/variables",
|
"../ionic/variables",
|
||||||
|
"variables",
|
||||||
|
|
||||||
// Base
|
// Base
|
||||||
"../ionic/reset",
|
"../ionic/reset",
|
||||||
|
|||||||
Reference in New Issue
Block a user