Added licensing + fixed layout quirks + iOS 5.0 support

taitems · Jun 24, 2012 · 4d06ea5 · 4d06ea5
1 parent 7c3aec7
commit 4d06ea5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
 iOS-Inspired Theme for jQuery Mobile
 ======
 
+Distributed under the [MIT License](http://en.wikipedia.org/wiki/MIT_License).
+
 [View Demo](http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/)
diff --git a/index.html b/index.html
@@ -8,24 +8,28 @@
 	<link rel="stylesheet"  href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 	<link rel="stylesheet" href="ios_inspired/styles.css" />
 	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
-	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
 	<script>
 		// all dialog buttons should close their parent dialog
 		$(".ui-dialog button").live("click", function() {		
 			$("[data-role='dialog']").dialog("close");		
 		});
+		$(document).on("mobileinit", function(){
+		  $.mobile.defaultPageTransition = "slide";
+		});
 	</script>
+	<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
 	<style>
 		#footerTabs {
 			background: #FFF -webkit-radial-gradient(circle, #FFF, #dee2e4);
 		}
 	</style>
+
 </head> 
 <body> 
 
 <div data-role="page"> 
 
-	<div data-role="header"> 
+	<div data-role="header" data-position="fixed"> 
 		<h1>Page Header</h1>
 	</div><!-- /header --> 
 
@@ -52,7 +56,7 @@ <h1>Page Header</h1>
 
 <div data-role="page" id="formElements">
 
-	<div data-role="header">
+	<div data-role="header" data-position="fixed">
 		<h1>Form Elements</h1>
 		<a href="#" data-rel="back" data-theme="a">Back</a>
 	</div><!-- /header --> 
@@ -115,7 +119,7 @@ <h1>Form Elements</h1>
 
 <div data-role="page" id="listViews">
 
-	<div data-role="header">
+	<div data-role="header" data-position="fixed">
 		<h1>List Example</h1>
 		<a href="#" data-rel="back" data-theme="a">Back</a>
 	</div><!-- /header --> 
@@ -156,7 +160,7 @@ <h1>List Example</h1>
 
 <div data-role="page" id="headers"> 
 
-	<div data-role="header">
+	<div data-role="header" data-position="fixed">
 		<h1>Headers</h1>
 		<a href="#" data-rel="back" data-theme="a">Back</a>
 		</a>
@@ -188,7 +192,7 @@ <h1>Black Bar</h1>
 
 <div data-role="page" id="headerButtons"> 
 
-	<div data-role="header">
+	<div data-role="header" data-position="fixed">
 		<h1>Header Buttons</h1>
 		<a href="#" data-rel="back" data-theme="a">Back</a>
 	</div><!-- /header --> 
@@ -278,7 +282,7 @@ <h1>Page Title</h1>
 
 <div data-role="page" id="dialogs">
 
-	<div data-role="header">
+	<div data-role="header" data-position="fixed">
 		<h1>Dialogs</h1>
 		<a href="#" data-rel="back" data-theme="a">Back</a>
 	</div><!-- /header --> 
@@ -297,7 +301,7 @@ <h1>Dialogs</h1>
 
 <div data-role="page" id="footerTabs" data-theme="b">
 
-	<div data-role="header">
+	<div data-role="header" data-position="fixed">
 		<h1>Footer Tabs</h1>
 		<a href="#" data-rel="back">Back</a>
 	</div><!-- /header --> 

diff --git a/ios_inspired/styles.css b/ios_inspired/styles.css
@@ -13,8 +13,11 @@
 
 /* === HEADER BARS - DEFAULT AND BLACK === */
 .ui-header {
-	border-top: 1px solid #000;
-	border-bottom: 1px solid transparent !important;
+	border: 0 none;
+	padding: 1px 0;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 		-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset;
 		-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset;
 		box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.6) inset;
@@ -498,6 +501,7 @@ input.ui-input-text, .ui-input-search {
 /* === CUSTOM HEADER BUTTONS === */
 .ui-header .ui-btn {
 	border-color: #375074;
+	top: 6px;
 		-webkit-border-radius: 5px;
 		-moz-border-radius: 5px;
 		border-radius: 5px;
@@ -532,6 +536,10 @@ input.ui-input-text, .ui-input-search {
 			background: linear-gradient(top,  #6a6a6a 0%,#313131 49%,#000000 50%,#000000 100%); /* W3C */
 			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6a6a', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
 }
+.ui-header .ui-btn-up-b .ui-btn-text, .ui-header .ui-btn-hover-b .ui-btn-text {
+	color: #FFF;
+	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
+}
 .ui-header .ui-btn-up-c, .ui-header .ui-btn-hover-c  {
 	border-color: #451c1b;
 		-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.36), 0 1px 0 rgba(0,0,0,0.25) inset !important;
@@ -600,7 +608,7 @@ input.ui-input-text, .ui-input-search {
 	font-size: 10px;
 	text-shadow: 0 none;
 }
-.ui-footer .ui-icon {
+.ui-footer .ui-icon-custom.ui-icon {
 	width: 32px;
 	height: 32px;
 	margin-left: -16px;