twbs
/
ratchet
зеркало из
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

changing push to navigate

This commit is contained in:
connors 2014-03-01 15:18:58 -08:00
Родитель 36313cffd4
Коммит 8c03e7fe52
10 изменённых файлов: 96 добавлений и 96 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
dist/ratchet.css поставляемый
Просмотреть файл

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

2
dist/ratchet.min.css поставляемый
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

68
docs/components.html
Просмотреть файл

@ -21,7 +21,7 @@ title: Components · Ratchet
<div class="container">
<!-- 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">
<!-- In phone examples -->
<div class="device js-device">
@ -382,22 +382,22 @@ title: Components &middot; Ratchet
<article class="component">
<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">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 3
</a>
</li>
@ -407,17 +407,17 @@ title: Components &middot; Ratchet
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
Item 3
</a>
</li>
@ -455,19 +455,19 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 3
</a>
@ -478,19 +478,19 @@ title: Components &middot; Ratchet
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 1
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 2
</a>
</li>
<li class="table-view-cell">
<a class="push-right">
<a class="navigate-right">
<span class="badge">5</span>
Item 3
</a>
@ -507,7 +507,7 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<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">
<div class="media-body">
Item 1
@ -516,7 +516,7 @@ title: Components &middot; Ratchet
</a>
</li>
<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">
<div class="media-body">
Item 1
@ -525,7 +525,7 @@ title: Components &middot; Ratchet
</a>
</li>
<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">
<div class="media-body">
Item 1
@ -539,7 +539,7 @@ title: Components &middot; Ratchet
{% highlight html %}
<ul class="table-view">
<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">
<div class="media-body">
Item 1
@ -548,7 +548,7 @@ title: Components &middot; Ratchet
</a>
</li>
<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">
<div class="media-body">
Item 1
@ -557,7 +557,7 @@ title: Components &middot; Ratchet
</a>
</li>
<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">
<div class="media-body">
Item 1
@ -577,7 +577,7 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-trash"></span>
<div class="media-body">
Item 1
@ -585,7 +585,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-gear"></span>
<div class="media-body">
Item 2
@ -593,7 +593,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 3
@ -606,7 +606,7 @@ title: Components &middot; Ratchet
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-trash"></span>
<div class="media-body">
Item 1
@ -614,7 +614,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-gear"></span>
<div class="media-body">
Item 2
@ -622,7 +622,7 @@ title: Components &middot; Ratchet
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<a class="navigate-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 3
@ -1074,7 +1074,7 @@ document
<h3 class="component-title">Popovers</h3>
{% highlight html %}
<div id="popover" class="popover">
<div id="popover" class="popover">
<header class="bar bar-nav">
<h1 class="title">Popover title</h1>
</header>
@ -1095,7 +1095,7 @@ document
{% highlight html %}
<header class="bar bar-nav">
<a href="#myPopover">
<a href="#myPopover">
<h1 class="title">
Tap title
<span class="icon icon-caret"></span>
@ -1105,7 +1105,7 @@ document
{% endhighlight %}
</article>
<!-- Modals -->
<article class="component" id="modals">
<h3 class="component-title">Modals</h3>
@ -1117,7 +1117,7 @@ document
<a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal mobile</h1>
</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>
</div>
</div>
@ -1129,7 +1129,7 @@ document
<a class="icon icon-close pull-right" href="#myModalexample"></a>
<h1 class="title">Modal</h1>
</header>
<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>
</div>
@ -1225,7 +1225,7 @@ document
<div class="card">
<ul class="table-view">
<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
</a>
</li>
@ -1242,7 +1242,7 @@ document
<div class="card">
<ul class="table-view">
<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
</a>
</li>
@ -1363,7 +1363,7 @@ window.addEventListener('push', myFunction);
{% endhighlight %}
</article>
<!-- Footer -->
{% include footer.html %}
</div>

8
docs/dist/ratchet.css поставляемый
Просмотреть файл

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

2
docs/dist/ratchet.min.css поставляемый
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

28
docs/examples/app-android-notes/index.html
Просмотреть файл

@ -31,79 +31,79 @@
<ul class="table-view">
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
</li>
<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
<p>Lorem ipsum dolor sit amet...</p>
</a>
@ -120,7 +120,7 @@
Settings
</h1>
</header>
<div class="content">
<h5>User settings</h5>

30
docs/examples/app-ios-mail/inbox.html
Просмотреть файл

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

14
docs/examples/app-ios-mail/index.html
Просмотреть файл

@ -17,7 +17,7 @@
<a class="icon icon-refresh pull-right"></a>
<h1 class="title">Mailboxes</h1>
</header>
<div class="bar bar-footer">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<small class="updated-text">Updated just now</small>
@ -27,7 +27,7 @@
<ul class="table-view">
<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>
<div class="media-body">
All inboxes
@ -35,7 +35,7 @@
</a>
</li>
<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>
<div class="media-body">
Personal email
@ -43,7 +43,7 @@
</a>
</li>
<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>
<div class="media-body">
Starred
@ -51,7 +51,7 @@
</a>
</li>
<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>
<div class="media-body">
Trash
@ -63,7 +63,7 @@
<h5 class="content-padded">Other accounts</h5>
<ul class="table-view">
<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>
<div class="media-body">
Misc
@ -84,7 +84,7 @@
</a>
<h1 class="title">New message</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="To:">

24
docs/examples/app-movies/index.html
Просмотреть файл

@ -16,7 +16,7 @@
<a class="icon icon-gear pull-right" href="#settingsModal" ></a>
<h1 class="title">Movie finder</h1>
</header>
<div class="bar bar-standard bar-header-secondary">
<form>
<input type="search" placeholder="Search">
@ -24,7 +24,7 @@
</div>
<div class="content">
<div class="slider">
<div class="slide-group">
<div class="slide">
@ -42,7 +42,7 @@
<ul class="table-view">
<li class="table-view-cell table-view-divider">Recommended movies</li>
<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">
<div class="media-body">
Argo
@ -51,7 +51,7 @@
</a>
</li>
<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">
<div class="media-body">
Skyfall: 007
@ -60,7 +60,7 @@
</a>
</li>
<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">
<div class="media-body">
Wreck-it Ralph
@ -69,7 +69,7 @@
</a>
</li>
<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">
<div class="media-body">
Argo
@ -78,7 +78,7 @@
</a>
</li>
<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">
<div class="media-body">
Skyfall: 007
@ -87,7 +87,7 @@
</a>
</li>
<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">
<div class="media-body">
Wreck-it Ralph
@ -96,7 +96,7 @@
</a>
</li>
<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">
<div class="media-body">
Argo
@ -105,7 +105,7 @@
</a>
</li>
<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">
<div class="media-body">
Skyfall: 007
@ -114,7 +114,7 @@
</a>
</li>
<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">
<div class="media-body">
Wreck-it Ralph
@ -131,7 +131,7 @@
<a class="icon icon-close pull-right" href="#settingsModal"></a>
<h1 class="title">Settings</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="Full name">

8
sass/push.scss
Просмотреть файл

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