playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

changing push to navigate

pull/362/head
connors 11 years ago
parent
36313cffd4
commit
8c03e7fe52
10 changed files with 96 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      dist/ratchet.css
  2. 2
      dist/ratchet.min.css
  3. 68
      docs/components.html
  4. 8
      docs/dist/ratchet.css
  5. 2
      docs/dist/ratchet.min.css
  6. 28
      docs/examples/app-android-notes/index.html
  7. 30
      docs/examples/app-ios-mail/inbox.html
  8. 14
      docs/examples/app-ios-mail/index.html
  9. 24
      docs/examples/app-movies/index.html
  10. 8
      sass/push.scss

8
dist/ratchet.css vendored
Unescape View File

@ -1204,8 +1204,8 @@ select {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
.push-left:after, .navigate-left:after,
.push-right:after { .navigate-right:after {
position: absolute; position: absolute;
top: 50%; top: 50%;
display: inline-block; display: inline-block;
@ -1220,12 +1220,12 @@ select {
transform: translateY(-50%); transform: translateY(-50%);
} }
.push-left:after { .navigate-left:after {
left: 15px; left: 15px;
content: '\e822'; content: '\e822';
} }
.push-right:after { .navigate-right:after {
right: 15px; right: 15px;
content: '\e826'; content: '\e826';
} }

2
dist/ratchet.min.css vendored
View File

File diff suppressed because one or more lines are too long

68
docs/components.html
Unescape View File

@ -21,7 +21,7 @@ title: Components · Ratchet
<div class="container"> <div class="container">
<!-- Components --> <!-- Components -->
<div class="docs-components column-group"> <div class="docs-components column-group">
<div class="device-column column units-2 lg-units-5 pull-right"> <div class="device-column column units-2 lg-units-5 pull-right">
<!-- In phone examples --> <!-- In phone examples -->
<div class="device js-device"> <div class="device js-device">
@ -382,22 +382,22 @@ title: Components &middot; Ratchet
<article class="component"> <article class="component">
<h3 class="component-title">Table view with chevrons</h3> <h3 class="component-title">Table view with chevrons</h3>
<p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.push-right</code> or <code>.push-left</code> to use a chevron.</p> <p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.navigate-right</code> or <code>.push-left</code> to use a chevron.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
Item 1 Item 1
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
Item 2 Item 2
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
Item 3 Item 3
</a> </a>
</li> </li>
@ -407,17 +407,17 @@ title: Components &middot; Ratchet
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
Item 1 Item 1
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
Item 2 Item 2
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
Item 3 Item 3
</a> </a>
</li> </li>
@ -455,19 +455,19 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
<span class="badge">5</span> <span class="badge">5</span>
Item 1 Item 1
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
<span class="badge">5</span> <span class="badge">5</span>
Item 2 Item 2
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
<span class="badge">5</span> <span class="badge">5</span>
Item 3 Item 3
</a> </a>
@ -478,19 +478,19 @@ title: Components &middot; Ratchet
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
<span class="badge">5</span> <span class="badge">5</span>
Item 1 Item 1
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
<span class="badge">5</span> <span class="badge">5</span>
Item 2 Item 2
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right"> <a class="navigate-right">
<span class="badge">5</span> <span class="badge">5</span>
Item 3 Item 3
</a> </a>
@ -507,7 +507,7 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image"> <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
@ -516,7 +516,7 @@ title: Components &middot; Ratchet
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image"> <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
@ -525,7 +525,7 @@ title: Components &middot; Ratchet
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image"> <img class="media-object pull-left" src="http://placehold.it/42x42" alt="Placeholder image">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
@ -539,7 +539,7 @@ title: Components &middot; Ratchet
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42"> <img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
@ -548,7 +548,7 @@ title: Components &middot; Ratchet
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42"> <img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
@ -557,7 +557,7 @@ title: Components &middot; Ratchet
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<img class="media-object pull-left" src="http://placehold.it/42x42"> <img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body"> <div class="media-body">
Item 1 Item 1
@ -577,7 +577,7 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<span class="media-object pull-left icon icon-trash"></span> <span class="media-object pull-left icon icon-trash"></span>
<div class="media-body"> <div class="media-body">
Item 1 Item 1
@ -585,7 +585,7 @@ title: Components &middot; Ratchet
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<span class="media-object pull-left icon icon-gear"></span> <span class="media-object pull-left icon icon-gear"></span>
<div class="media-body"> <div class="media-body">
Item 2 Item 2
@ -593,7 +593,7 @@ title: Components &middot; Ratchet
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<span class="media-object pull-left icon icon-pages"></span> <span class="media-object pull-left icon icon-pages"></span>
<div class="media-body"> <div class="media-body">
Item 3 Item 3
@ -606,7 +606,7 @@ title: Components &middot; Ratchet
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<span class="media-object pull-left icon icon-trash"></span> <span class="media-object pull-left icon icon-trash"></span>
<div class="media-body"> <div class="media-body">
Item 1 Item 1
@ -614,7 +614,7 @@ title: Components &middot; Ratchet
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<span class="media-object pull-left icon icon-gear"></span> <span class="media-object pull-left icon icon-gear"></span>
<div class="media-body"> <div class="media-body">
Item 2 Item 2
@ -622,7 +622,7 @@ title: Components &middot; Ratchet
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right"> <a class="navigate-right">
<span class="media-object pull-left icon icon-pages"></span> <span class="media-object pull-left icon icon-pages"></span>
<div class="media-body"> <div class="media-body">
Item 3 Item 3
@ -1074,7 +1074,7 @@ document
<h3 class="component-title">Popovers</h3> <h3 class="component-title">Popovers</h3>
{% highlight html %} {% highlight html %}
<div id="popover" class="popover"> <div id="popover" class="popover">
<header class="bar bar-nav"> <header class="bar bar-nav">
<h1 class="title">Popover title</h1> <h1 class="title">Popover title</h1>
</header> </header>
@ -1095,7 +1095,7 @@ document
{% highlight html %} {% highlight html %}
<header class="bar bar-nav"> <header class="bar bar-nav">
<a href="#myPopover"> <a href="#myPopover">
<h1 class="title"> <h1 class="title">
Tap title Tap title
<span class="icon icon-caret"></span> <span class="icon icon-caret"></span>
@ -1105,7 +1105,7 @@ document
{% endhighlight %} {% endhighlight %}
</article> </article>
<!-- Modals --> <!-- Modals -->
<article class="component" id="modals"> <article class="component" id="modals">
<h3 class="component-title">Modals</h3> <h3 class="component-title">Modals</h3>
@ -1117,7 +1117,7 @@ document
<a class="icon icon-close pull-right" href="#myModalexample"></a> <a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal mobile</h1> <h1 class="title">Modal mobile</h1>
</header> </header>
<p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> <p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div> </div>
</div> </div>
@ -1129,7 +1129,7 @@ document
<a class="icon icon-close pull-right" href="#myModalexample"></a> <a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal</h1> <h1 class="title">Modal</h1>
</header> </header>
<div class="content"> <div class="content">
<p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p> <p class="content-padded">The contents of my modal go here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
</div> </div>
@ -1225,7 +1225,7 @@ document
<div class="card"> <div class="card">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="../two.html" data-transition="slide-in"> <a class="navigate-right" href="../two.html" data-transition="slide-in">
Load new page with push Load new page with push
</a> </a>
</li> </li>
@ -1242,7 +1242,7 @@ document
<div class="card"> <div class="card">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="../two.html" data-transition="slide-in"> <a class="navigate-right" href="../two.html" data-transition="slide-in">
Load new page with push Load new page with push
</a> </a>
</li> </li>
@ -1363,7 +1363,7 @@ window.addEventListener('push', myFunction);
{% endhighlight %} {% endhighlight %}
</article> </article>
<!-- Footer --> <!-- Footer -->
{% include footer.html %} {% include footer.html %}
</div> </div>

8
docs/dist/ratchet.css vendored
Unescape View File

@ -1204,8 +1204,8 @@ select {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
.push-left:after, .navigate-left:after,
.push-right:after { .navigate-right:after {
position: absolute; position: absolute;
top: 50%; top: 50%;
display: inline-block; display: inline-block;
@ -1220,12 +1220,12 @@ select {
transform: translateY(-50%); transform: translateY(-50%);
} }
.push-left:after { .navigate-left:after {
left: 15px; left: 15px;
content: '\e822'; content: '\e822';
} }
.push-right:after { .navigate-right:after {
right: 15px; right: 15px;
content: '\e826'; content: '\e826';
} }

2
docs/dist/ratchet.min.css vendored
View File

File diff suppressed because one or more lines are too long

28
docs/examples/app-android-notes/index.html
Unescape View File

@ -31,79 +31,79 @@
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
Note title goes here Note title goes here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
@ -120,7 +120,7 @@
Settings Settings
</h1> </h1>
</header> </header>
<div class="content"> <div class="content">
<h5>User settings</h5> <h5>User settings</h5>

30
docs/examples/app-ios-mail/inbox.html
Unescape View File

@ -23,91 +23,91 @@
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a class="push-right" href="#"> <a class="navigate-right" href="#">
Email subject line here Email subject line here
<p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p>
</a> </a>

14
docs/examples/app-ios-mail/index.html
Unescape View File

@ -17,7 +17,7 @@
<a class="icon icon-refresh pull-right"></a> <a class="icon icon-refresh pull-right"></a>
<h1 class="title">Mailboxes</h1> <h1 class="title">Mailboxes</h1>
</header> </header>
<div class="bar bar-footer"> <div class="bar bar-footer">
<a class="icon icon-compose pull-right" href="#composeModal"></a> <a class="icon icon-compose pull-right" href="#composeModal"></a>
<small class="updated-text">Updated just now</small> <small class="updated-text">Updated just now</small>
@ -27,7 +27,7 @@
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in"> <a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-pages pull-left"></span> <span class="media-object icon icon-pages pull-left"></span>
<div class="media-body"> <div class="media-body">
All inboxes All inboxes
@ -35,7 +35,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in"> <a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-person pull-left"></span> <span class="media-object icon icon-person pull-left"></span>
<div class="media-body"> <div class="media-body">
Personal email Personal email
@ -43,7 +43,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in"> <a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-star-filled pull-left"></span> <span class="media-object icon icon-star-filled pull-left"></span>
<div class="media-body"> <div class="media-body">
Starred Starred
@ -51,7 +51,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in"> <a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-trash pull-left"></span> <span class="media-object icon icon-trash pull-left"></span>
<div class="media-body"> <div class="media-body">
Trash Trash
@ -63,7 +63,7 @@
<h5 class="content-padded">Other accounts</h5> <h5 class="content-padded">Other accounts</h5>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="inbox.html" data-transition="slide-in"> <a class="navigate-right" href="inbox.html" data-transition="slide-in">
<span class="media-object icon icon-more pull-left"></span> <span class="media-object icon icon-more pull-left"></span>
<div class="media-body"> <div class="media-body">
Misc Misc
@ -84,7 +84,7 @@
</a> </a>
<h1 class="title">New message</h1> <h1 class="title">New message</h1>
</header> </header>
<div class="content"> <div class="content">
<form class="input-group"> <form class="input-group">
<input type="text" placeholder="To:"> <input type="text" placeholder="To:">

24
docs/examples/app-movies/index.html
Unescape View File

@ -16,7 +16,7 @@
<a class="icon icon-gear pull-right" href="#settingsModal" ></a> <a class="icon icon-gear pull-right" href="#settingsModal" ></a>
<h1 class="title">Movie finder</h1> <h1 class="title">Movie finder</h1>
</header> </header>
<div class="bar bar-standard bar-header-secondary"> <div class="bar bar-standard bar-header-secondary">
<form> <form>
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
@ -24,7 +24,7 @@
</div> </div>
<div class="content"> <div class="content">
<div class="slider"> <div class="slider">
<div class="slide-group"> <div class="slide-group">
<div class="slide"> <div class="slide">
@ -42,7 +42,7 @@
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li> <li class="table-view-cell table-view-divider">Recommended movies</li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body"> <div class="media-body">
Argo Argo
@ -51,7 +51,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body"> <div class="media-body">
Skyfall: 007 Skyfall: 007
@ -60,7 +60,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body"> <div class="media-body">
Wreck-it Ralph Wreck-it Ralph
@ -69,7 +69,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body"> <div class="media-body">
Argo Argo
@ -78,7 +78,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body"> <div class="media-body">
Skyfall: 007 Skyfall: 007
@ -87,7 +87,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body"> <div class="media-body">
Wreck-it Ralph Wreck-it Ralph
@ -96,7 +96,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Argo's poster">
<div class="media-body"> <div class="media-body">
Argo Argo
@ -105,7 +105,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Skyfall's poster">
<div class="media-body"> <div class="media-body">
Skyfall: 007 Skyfall: 007
@ -114,7 +114,7 @@
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a class="push-right" href="choose-theater.html" data-transition="slide-in"> <a class="navigate-right" href="choose-theater.html" data-transition="slide-in">
<img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster"> <img class="media-object pull-left" src="http://placehold.it/64x64" alt="Placeholder image for Wreck-it Ralph's poster">
<div class="media-body"> <div class="media-body">
Wreck-it Ralph Wreck-it Ralph
@ -131,7 +131,7 @@
<a class="icon icon-close pull-right" href="#settingsModal"></a> <a class="icon icon-close pull-right" href="#settingsModal"></a>
<h1 class="title">Settings</h1> <h1 class="title">Settings</h1>
</header> </header>
<div class="content"> <div class="content">
<form class="input-group"> <form class="input-group">
<input type="text" placeholder="Full name"> <input type="text" placeholder="Full name">

8
sass/push.scss
Unescape View File

@ -34,8 +34,8 @@
} }
// Add chevrons to elements // Add chevrons to elements
.push-left, .navigate-left,
.push-right { .navigate-right {
&:after { &:after {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -49,11 +49,11 @@
@include transform(translateY(-50%)); @include transform(translateY(-50%));
} }
} }
.push-left:after { .navigate-left:after {
left: 15px; left: 15px;
content: '\e822'; content: '\e822';
} }
.push-right:after { .navigate-right:after {
right: 15px; right: 15px;
content: '\e826'; content: '\e826';
} }

Write Preview
Loading…
Cancel
Save