Permalink
Browse files

Merge branch 'slide-panel' of https://github.com/jquery/jquery-mobile

…into slide-panel
  • Loading branch information...
2 parents 725031e + cac4fb2 commit 86b650e0d8c8db629ed9a71eb4a126d588d4e87b @Wilto Wilto committed Dec 5, 2012
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -852,20 +852,21 @@ a.ui-link-inherit {
/* HD/"retina" sprite
-----------------------------------------------------------------------------------------------------------*/
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
- only screen and (min--moz-device-pixel-ratio: 1.5),
- only screen and (min-resolution: 240dpi) {
+@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
+ only screen and (min--moz-device-pixel-ratio: 1.3),
+ only screen and (min-resolution: 200dpi) {
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
- .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
+ .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-bars, .ui-icon-edit, .ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-36-white.png);
- -moz-background-size: 776px 18px;
- -o-background-size: 776px 18px;
- -webkit-background-size: 776px 18px;
- background-size: 776px 18px;
+ /* Set the background size 2px larger to avoid rounding errors in chrome */
+ -moz-background-size: 842px 18px;
+ -o-background-size: 842px 18px;
+ -webkit-background-size: 842px 18px;
+ background-size: 842px 18px;
}
.ui-icon-alt {
background-image: url(images/icons-36-black.png);
@@ -930,6 +931,14 @@ a.ui-link-inherit {
.ui-icon-home {
background-position: -576px 50%;
}
+.ui-icon-bars {
+ background-position: -785px 50%;
+
+}.ui-icon-edit {
+ background-position: -824px 50%;
+}
+
+
.ui-icon-search,
.ui-icon-searchfield:after {
background-position: -612px 50%;
@@ -45,6 +45,10 @@ <h2>Icon set</h2>
<p>The following <code> data-icon</code> attributes can be referenced to create the icons shown below:</p>
+ <p><strong>Bars</strong> - data-icon="bars"</p>
+ <a href="index.html" data-role="button" data-icon="bars">My button</a>
+ <p><strong>Edit</strong> - data-icon="edit"</p>
+ <a href="index.html" data-role="button" data-icon="edit">My button</a>
<p><strong>Left arrow</strong> - data-icon="arrow-l"</p>
<a href="index.html" data-role="button" data-icon="arrow-l">My button</a>
<p><strong>Right arrow</strong> - data-icon="arrow-r"</p>
View
@@ -77,31 +77,31 @@
.userform { padding:.8em 1.2em; }
.userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); }
.userform label { display:block; margin-top:1.2em; }
- .switch .ui-slider-switch { width: 7.5em }
+ .switch .ui-slider-switch { width: 6.5em !important }
.ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); }
</style>
<form class="userform">
<h2>Create new user</h2>
<label for="name">Name</label>
- <input type="text" name="name" id="name" value="" data-clear-btn="true">
+ <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
<label for="email">Email</label>
- <input type="email" name="email" id="status" value="" data-clear-btn="true">
+ <input type="email" name="email" id="status" value="" data-clear-btn="true" data-mini="true">
<label for="password">Password:</label>
- <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off">
+ <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
<div class="switch">
<label for="status">Status</label>
- <select name="status" id="slider2" data-role="slider">
+ <select name="status" id="slider2" data-role="slider" data-mini="true">
<option value="off">Inactive</option>
<option value="on">Active</option>
</select>
</div>
<div class="ui-grid-a">
- <div class="ui-block-a"><a href="#" data-rel="close" data-role="button" data-theme="c">Cancel</a></div>
- <div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b">Save</a></div>
+ <div class="ui-block-a"><a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true">Cancel</a></div>
+ <div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b" data-mini="true">Save</a></div>
</div>
<!-- panel content goes here -->
@@ -117,21 +117,21 @@ <h1>Panels</h1>
<h4>Left Panel: Navigation example</h4>
<div data-role="controlgroup" data-type="horizontal">
- <a href="#mypanel" data-role="button" data-inline="true" data-display="reveal" data-position="left" data-dismissible="true">Reveal</a>
+ <a href="#mypanel" data-role="button" data-inline="true" data-display="reveal" data-position="left" data-dismissible="true" data-icon="bars">Reveal</a>
<a href="#mypanel" data-role="button" data-inline="true" data-display="push" data-position="left" data-dismissible="true">Push</a>
<a href="#mypanel" data-role="button" data-inline="true" data-display="overlay" data-position="left" data-dismissible="true">Overlay</a>
</div>
- <h4>Right Panel: Detail panel</h4>
+ <h4>Right Panel: Edit panel</h4>
<div data-role="controlgroup" data-type="horizontal">
- <a href="#mypanel1" data-role="button" data-inline="true" data-display="reveal" data-position="right" data-dismissible="true">Reveal</a>
+ <a href="#mypanel1" data-role="button" data-inline="true" data-display="reveal" data-position="right" data-dismissible="true" data-icon="edit">Reveal</a>
<a href="#mypanel1" data-role="button" data-inline="true" data-display="push" data-position="right" data-dismissible="true">Push</a>
<a href="#mypanel1" data-role="button" data-inline="true" data-display="overlay" data-position="right" data-dismissible="true">Overlay</a>
</div>
<p>Panels can be used for a wide variety of purposes in a site or application. They are designed to be as open-ended as possible to make it easy to create menus, collapsible columns, drawers, inspectors panes and more. These are simply blocks that can sit to the left or right of the page content and appear in various ways when activated with a link.</p>
- <a href="#mypanel" data-rel="panel" data-role="button" data-inline="true">Default panel</a>
+ <a href="#mypanel" data-rel="panel" data-role="button" data-inline="true" data-icon="bars">Default panel</a>
<h2>Basic panel markup</h2>
<p>A panel consists of a container with a <code>data-role=&quot;panel&quot;</code> attribute and a unique <code>ID</code>. This <code>ID</code> will be referenced by the link or button to open and close the panel.</p>

0 comments on commit 86b650e

Please sign in to comment.