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 поставляемый
Просмотреть файл

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

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

@ -382,22 +382,22 @@ title: Components · 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
@ -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>

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 поставляемый
Просмотреть файл

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

26
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>

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>

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

@ -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

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

@ -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

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';
}