Permalink
Browse files

Added licensing + fixed layout quirks + iOS 5.0 support

  • Loading branch information...
1 parent 7c3aec7 commit 4d06ea5b5e84c0e5357509f3b8da8dc6b435f432 @taitems committed Jun 24, 2012
Showing with 25 additions and 11 deletions.
  1. +2 −0 README.md
  2. +12 −8 index.html
  3. +11 −3 ios_inspired/styles.css
View
@@ -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/)
View
@@ -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 -->
View
@@ -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;

0 comments on commit 4d06ea5

Please sign in to comment.