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

adding media and positioning btns badges and toggle vertically center.

This commit is contained in:
connors 2014-02-09 19:22:27 -08:00
Родитель 19d7e5b0da
Коммит aba66eb313
10 изменённых файлов: 223 добавлений и 149 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

106
components.html
Просмотреть файл

@ -376,20 +376,17 @@ quis nostrud exercitation ullamco.</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> <a class="push-right">
<span class="icon icon-right pull-right"></span>
Item 1 Item 1
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span>
Item 2 Item 2
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span>
Item 3 Item 3
</a> </a>
</li> </li>
@ -399,20 +396,17 @@ quis nostrud exercitation ullamco.</p>
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span>
Item 1 Item 1
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span>
Item 2 Item 2
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span>
Item 3 Item 3
</a> </a>
</li> </li>
@ -426,17 +420,17 @@ quis nostrud exercitation ullamco.</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">Item 1 <span class="badge pull-right">4</span></li> <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
<li class="table-view-cell">Item 2 <span class="badge pull-right">1</span></li> <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
<li class="table-view-cell">Item 3 <span class="badge pull-right">5</span></li> <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell">Item 1 <span class="badge pull-right">4</span></li> <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
<li class="table-view-cell">Item 2 <span class="badge pull-right">1</span></li> <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
<li class="table-view-cell">Item 3 <span class="badge pull-right">5</span></li> <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -448,23 +442,20 @@ quis nostrud exercitation ullamco.</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> <a class="push-right">
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
Item 1 Item 1
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
Item 2 Item 2
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
Item 3 Item 3
</a> </a>
</li> </li>
@ -474,23 +465,20 @@ quis nostrud exercitation ullamco.</p>
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
Item 1 Item 1
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
Item 2 Item 2
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a class="push-right">
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
Item 3 Item 3
</a> </a>
</li> </li>
@ -506,31 +494,28 @@ quis nostrud exercitation ullamco.</p>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
<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
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
</div> </div>
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
<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
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
</div> </div>
</a> </a>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
<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
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
</div> </div>
</a> </a>
</li> </li>
@ -541,8 +526,7 @@ quis nostrud exercitation ullamco.</p>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell media"> <li class="table-view-cell media">
<a> <a>
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
<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
@ -552,8 +536,7 @@ quis nostrud exercitation ullamco.</p>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a> <a>
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
<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
@ -563,8 +546,7 @@ quis nostrud exercitation ullamco.</p>
</li> </li>
<li class="table-view-cell media"> <li class="table-view-cell media">
<a> <a>
<span class="icon icon-right pull-right"></span> <span class="badge">5</span>
<span class="badge pull-right">5</span>
<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
@ -582,19 +564,19 @@ quis nostrud exercitation ullamco.</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">Item 1 <a class="btn pull-right">Button</a></li> <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
<li class="table-view-cell">Item 2 <a class="btn btn-primary pull-right">Button</a></li> <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
<li class="table-view-cell">Item 3 <a class="btn btn-positive pull-right">Button</a></li> <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
<li class="table-view-cell">Item 4 <a class="btn btn-negative pull-right">Button</a></li> <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell">Item 1 <a class="btn pull-right">Button</a></li> <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
<li class="table-view-cell">Item 2 <a class="btn btn-primary pull-right">Button</a></li> <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
<li class="table-view-cell">Item 3 <a class="btn btn-positive pull-right">Button</a></li> <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
<li class="table-view-cell">Item 4 <a class="btn btn-negative pull-right">Button</a></li> <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -607,19 +589,19 @@ quis nostrud exercitation ullamco.</p>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
Item 1 Item 1
<div class="toggle pull-right"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
Item 2 Item 2
<div class="toggle pull-right active"> <div class="toggle active">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
Item 3 Item 3
<div class="toggle pull-right"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
@ -630,19 +612,19 @@ quis nostrud exercitation ullamco.</p>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
Item 1 Item 1
<div class="toggle pull-right"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
Item 2 Item 2
<div class="toggle pull-right active"> <div class="toggle active">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
Item 3 Item 3
<div class="toggle pull-right"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>

6
dist/android-theme.css поставляемый
Просмотреть файл

@ -289,10 +289,6 @@ a:active {
background-color: transparent; background-color: transparent;
} }
.table-view .btn {
margin-top: -4px;
}
select, select,
textarea, textarea,
input[type="text"], input[type="text"],
@ -427,6 +423,7 @@ textarea,
border-radius: 0; border-radius: 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
.popover:before { .popover:before {
@ -476,6 +473,7 @@ textarea,
background-color: #33b5e5; background-color: #33b5e5;
border-color: #33b5e5; border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0);
} }
.toggle.active:before { .toggle.active:before {

18
dist/ios-theme.css поставляемый
Просмотреть файл

@ -24,10 +24,13 @@ a:active {
color: #929292; color: #929292;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, 0.98);
-webkit-transition: all; -webkit-transition: all;
-moz-transition: all;
transition: all; transition: all;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
transition-timing-function: linear; transition-timing-function: linear;
} }
.btn:active, .btn.active { .btn:active, .btn.active {
@ -265,6 +268,7 @@ textarea,
.segmented-control li { .segmented-control li {
border-color: #929292; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
transition: background-color 0.1s linear; transition: background-color 0.1s linear;
} }
.segmented-control li:active { .segmented-control li:active {
@ -337,6 +341,7 @@ textarea,
.popover { .popover {
border-radius: 12px; border-radius: 12px;
-webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
.popover:before { .popover:before {
@ -358,10 +363,12 @@ textarea,
.modal { .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
} }
.modal.active { .modal.active {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
} }
@ -371,8 +378,10 @@ textarea,
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-property: box-shadow, border; -webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border;
transition-property: box-shadow, border; transition-property: box-shadow, border;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
@ -380,6 +389,7 @@ textarea,
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width;
} }
.toggle:before { .toggle:before {
@ -393,11 +403,13 @@ textarea,
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(17px, 0, 0);
-ms-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0);
} }
.toggle.active:active .toggle-handle, .toggle.active:active .toggle-handle,
.toggle.active .toggle-handle:active { .toggle.active .toggle-handle:active {
-webkit-transform: translate3d(10px, 0, 0) !important; -webkit-transform: translate3d(10px, 0, 0) !important;
-ms-transform: translate3d(10px, 0, 0) !important;
transform: translate3d(10px, 0, 0) !important; transform: translate3d(10px, 0, 0) !important;
} }
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
@ -406,24 +418,30 @@ textarea,
.content.fade { .content.fade {
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.content.slide { .content.slide {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
} }
.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) { .content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay; -webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay;
animation-name: fadeOverlay; animation-name: fadeOverlay;
-webkit-animation-duration: 0.4s; -webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s; animation-duration: 0.4s;
} }
.content.slide.right:not([class*="sliding-in"]) { .content.slide.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse; -webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse; animation-direction: reverse;
} }
.content.slide.left { .content.slide.left {
-webkit-transform: translate3d(-20%, 0, 0); -webkit-transform: translate3d(-20%, 0, 0);
-ms-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);
} }

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

@ -361,6 +361,7 @@ p {
background-color: #428bca; background-color: #428bca;
} }
.btn-primary:active, .btn-primary.active { .btn-primary:active, .btn-primary.active {
color: #fff;
border: 1px solid #3071a9; border: 1px solid #3071a9;
background-color: #3071a9; background-color: #3071a9;
} }
@ -371,6 +372,7 @@ p {
background-color: #5cb85c; background-color: #5cb85c;
} }
.btn-positive:active, .btn-positive.active { .btn-positive:active, .btn-positive.active {
color: #fff;
border: 1px solid #449d44; border: 1px solid #449d44;
background-color: #449d44; background-color: #449d44;
} }
@ -381,6 +383,7 @@ p {
background-color: #d9534f; background-color: #d9534f;
} }
.btn-negative:active, .btn-negative.active { .btn-negative:active, .btn-negative.active {
color: #fff;
border: 1px solid #c9302c; border: 1px solid #c9302c;
background-color: #c9302c; background-color: #c9302c;
} }
@ -685,7 +688,7 @@ input[type="button"] {
.table-view .table-view-cell { .table-view .table-view-cell {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 11px 15px; padding: 11px 65px 11px 15px;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
} }
.table-view .table-view-cell:last-child { .table-view .table-view-cell:last-child {
@ -696,7 +699,7 @@ input[type="button"] {
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: inherit; padding: inherit;
margin: -11px -15px; margin: -11px -65px -11px -15px;
color: inherit; color: inherit;
} }
.table-view .table-view-cell > a:not(.btn):active { .table-view .table-view-cell > a:not(.btn):active {
@ -738,37 +741,37 @@ input[type="button"] {
margin-left: 10px; margin-left: 10px;
} }
.table-view .btn { .table-view-cell > .btn,
margin-top: -1px; .table-view-cell > .badge,
.table-view-cell > .toggle,
.table-view-cell > a > .btn,
.table-view-cell > a > .badge,
.table-view-cell > a > .toggle {
position: absolute;
top: 50%;
right: 15px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
} }
.table-view-cell .push-left > .btn,
.table-view .badge { .table-view-cell .push-left > .badge,
margin-top: 2px; .table-view-cell .push-left > .toggle,
} .table-view-cell .push-right > .btn,
.table-view .badge.pull-left { .table-view-cell .push-right > .badge,
margin-right: 5px; .table-view-cell .push-right > .toggle,
} .table-view-cell > a .push-left > .btn,
.table-view .badge.pull-right { .table-view-cell > a .push-left > .badge,
margin-left: 5px; .table-view-cell > a .push-left > .toggle,
} .table-view-cell > a .push-right > .btn,
.table-view-cell > a .push-right > .badge,
.table-view .toggle { .table-view-cell > a .push-right > .toggle {
margin-top: -4px; right: 35px;
} }
.table-view .icon { .table-view .icon {
margin-top: 3px;
font-size: inherit; font-size: inherit;
} }
.table-view .icon.icon-left, .table-view .icon.icon-right {
color: #bbb;
}
.table-view .icon.pull-left {
margin-right: 5px;
}
.table-view .icon.pull-right {
margin-left: 5px;
}
input, input,
textarea, textarea,
@ -996,6 +999,7 @@ select {
opacity: 0; opacity: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, -15px, 0); -webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);
} }
.popover:before { .popover:before {
@ -1013,6 +1017,7 @@ select {
.popover.visible { .popover.visible {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.popover .bar ~ .table-view { .popover .bar ~ .table-view {
@ -1058,16 +1063,20 @@ select {
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
-webkit-transform: translate3d(0, 100%, 0); -webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.25s, opacity 0.25s; -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
-moz-transition: -webkit-transform 0.25s, opacity 0.25s;
transition: -webkit-transform 0.25s, opacity 0.25s; transition: -webkit-transform 0.25s, opacity 0.25s;
} }
.modal.active { .modal.active {
opacity: 1; opacity: 1;
height: 100%; height: 100%;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.25s; -webkit-transition: -webkit-transform 0.25s;
-moz-transition: -webkit-transform 0.25s;
transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s;
} }
@ -1086,6 +1095,7 @@ select {
font-size: 0; font-size: 0;
white-space: nowrap; white-space: nowrap;
-webkit-transition: all 0 linear; -webkit-transition: all 0 linear;
-moz-transition: all 0 linear;
transition: all 0 linear; transition: all 0 linear;
} }
.slider .slide-group .slide { .slider .slide-group .slide {
@ -1107,8 +1117,10 @@ select {
border: 2px solid #ddd; border: 2px solid #ddd;
border-radius: 20px; border-radius: 20px;
-webkit-transition-property: background-color, border; -webkit-transition-property: background-color, border;
-moz-transition-property: background-color, border;
transition-property: background-color, border; transition-property: background-color, border;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.toggle .toggle-handle { .toggle .toggle-handle {
@ -1122,8 +1134,10 @@ select {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 100px; border-radius: 100px;
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.toggle:before { .toggle:before {
@ -1142,6 +1156,7 @@ select {
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #5cb85c; border-color: #5cb85c;
-webkit-transform: translate3d(44px, 0, 0); -webkit-transform: translate3d(44px, 0, 0);
-ms-transform: translate3d(44px, 0, 0);
transform: translate3d(44px, 0, 0); transform: translate3d(44px, 0, 0);
} }
.toggle.active:before { .toggle.active:before {
@ -1164,21 +1179,52 @@ select {
.content.slide { .content.slide {
z-index: 2; z-index: 2;
-webkit-transition: -webkit-transform 0.4s; -webkit-transition: -webkit-transform 0.4s;
-moz-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.content.slide.left { .content.slide.left {
z-index: 1; z-index: 1;
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
.content.slide.right { .content.slide.right {
z-index: 3; z-index: 3;
-webkit-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
.push-left:after,
.push-right:after {
position: absolute;
top: 50%;
display: inline-block;
color: #bbb;
font-family: Ratchicons;
font-size: inherit;
text-decoration: none;
line-height: 1;
cursor: default;
-webkit-font-smoothing: antialiased;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.push-left:after {
left: 15px;
content: '\e803';
}
.push-right:after {
right: 15px;
content: '\e800';
}
@font-face { @font-face {
font-family: Ratchicons; font-family: Ratchicons;
src: url("ratchicons/ratchicons.eot"); src: url("ratchicons/ratchicons.eot");

28
docs-assets/css/docs.css
Просмотреть файл

@ -39,6 +39,7 @@ body {
color: #fff; color: #fff;
opacity: .4; opacity: .4;
-webkit-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
} }
.docs-nav .icon:hover, .docs-nav .icon:hover,
@ -71,6 +72,7 @@ body {
color: #00d1fe; color: #00d1fe;
border-color: #00d1fe; border-color: #00d1fe;
-webkit-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear; transition: all 0.2s linear;
} }
.docs-header-content .btn:hover { .docs-header-content .btn:hover {
@ -293,6 +295,7 @@ body {
padding-bottom: 8px; padding-bottom: 8px;
background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%); background-image: linear-gradient(45deg, #317ca6 0%, #254456 100%);
-webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear; -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
-moz-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
transition: padding-top 0.2s linear, padding-bottom 0.2s linear; transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
} }
.platform-toggle .segmented-control { .platform-toggle .segmented-control {
@ -522,6 +525,7 @@ hr {
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-transition: background-image 0.1s linear; -webkit-transition: background-image 0.1s linear;
-moz-transition: background-image 0.1s linear;
transition: background-image 0.1s linear; transition: background-image 0.1s linear;
} }
.device:after { .device:after {
@ -571,6 +575,7 @@ hr {
padding-right: 0; padding-right: 0;
opacity: .3; opacity: .3;
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.component.active { .component.active {
@ -806,10 +811,13 @@ hr {
color: #929292; color: #929292;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, 0.98);
-webkit-transition: all; -webkit-transition: all;
-moz-transition: all;
transition: all; transition: all;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
transition-timing-function: linear; transition-timing-function: linear;
} }
.platform-ios .btn:active, .platform-ios .btn.active { .platform-ios .btn:active, .platform-ios .btn.active {
@ -1021,6 +1029,7 @@ hr {
.platform-ios .segmented-control li { .platform-ios .segmented-control li {
border-color: #929292; border-color: #929292;
-webkit-transition: background-color 0.1s linear; -webkit-transition: background-color 0.1s linear;
-moz-transition: background-color 0.1s linear;
transition: background-color 0.1s linear; transition: background-color 0.1s linear;
} }
.platform-ios .segmented-control li:active { .platform-ios .segmented-control li:active {
@ -1089,6 +1098,7 @@ hr {
.platform-ios .popover { .platform-ios .popover {
border-radius: 12px; border-radius: 12px;
-webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
.platform-ios .popover:before { .platform-ios .popover:before {
@ -1106,10 +1116,12 @@ hr {
} }
.platform-ios .modal { .platform-ios .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
} }
.platform-ios .modal.active { .platform-ios .modal.active {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
} }
.platform-ios .toggle { .platform-ios .toggle {
@ -1118,8 +1130,10 @@ hr {
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
box-shadow: inset 0 0 0 0 #e1e1e1; box-shadow: inset 0 0 0 0 #e1e1e1;
-webkit-transition-property: box-shadow, border; -webkit-transition-property: box-shadow, border;
-moz-transition-property: box-shadow, border;
transition-property: box-shadow, border; transition-property: box-shadow, border;
-webkit-transition-duration: 0.2s; -webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.platform-ios .toggle .toggle-handle { .platform-ios .toggle .toggle-handle {
@ -1127,6 +1141,7 @@ hr {
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-webkit-transition-property: -webkit-transform, border, width; -webkit-transition-property: -webkit-transform, border, width;
-moz-transition-property: -webkit-transform, border, width;
transition-property: -webkit-transform, border, width; transition-property: -webkit-transform, border, width;
} }
.platform-ios .toggle:before { .platform-ios .toggle:before {
@ -1140,11 +1155,13 @@ hr {
} }
.platform-ios .toggle.active .toggle-handle { .platform-ios .toggle.active .toggle-handle {
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(17px, 0, 0);
-ms-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); transform: translate3d(17px, 0, 0);
} }
.platform-ios .toggle.active:active .toggle-handle, .platform-ios .toggle.active:active .toggle-handle,
.platform-ios .toggle.active .toggle-handle:active { .platform-ios .toggle.active .toggle-handle:active {
-webkit-transform: translate3d(10px, 0, 0) !important; -webkit-transform: translate3d(10px, 0, 0) !important;
-ms-transform: translate3d(10px, 0, 0) !important;
transform: translate3d(10px, 0, 0) !important; transform: translate3d(10px, 0, 0) !important;
} }
.platform-ios .toggle.active .toggle-handle { .platform-ios .toggle.active .toggle-handle {
@ -1152,24 +1169,30 @@ hr {
} }
.platform-ios .content.fade { .platform-ios .content.fade {
-webkit-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
} }
.platform-ios .content.slide { .platform-ios .content.slide {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-moz-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
} }
.platform-ios .content.slide.sliding-in, .platform-ios .content.slide.right:not([class*="sliding-in"]) { .platform-ios .content.slide.sliding-in, .platform-ios .content.slide.right:not([class*="sliding-in"]) {
-webkit-animation-name: fadeOverlay; -webkit-animation-name: fadeOverlay;
-moz-animation-name: fadeOverlay;
animation-name: fadeOverlay; animation-name: fadeOverlay;
-webkit-animation-duration: 0.4s; -webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s; animation-duration: 0.4s;
} }
.platform-ios .content.slide.right:not([class*="sliding-in"]) { .platform-ios .content.slide.right:not([class*="sliding-in"]) {
-webkit-animation-direction: reverse; -webkit-animation-direction: reverse;
-moz-animation-direction: reverse;
animation-direction: reverse; animation-direction: reverse;
} }
.platform-ios .content.slide.left { .platform-ios .content.slide.left {
-webkit-transform: translate3d(-20%, 0, 0); -webkit-transform: translate3d(-20%, 0, 0);
-ms-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);
} }
.platform-ios .device { .platform-ios .device {
@ -1433,9 +1456,6 @@ hr {
border-bottom: 2px solid #a9a9a9; border-bottom: 2px solid #a9a9a9;
background-color: transparent; background-color: transparent;
} }
.platform-android .table-view .btn {
margin-top: -4px;
}
.platform-android select, .platform-android select,
.platform-android textarea, .platform-android textarea,
.platform-android input[type="text"], .platform-android input[type="text"],
@ -1558,6 +1578,7 @@ hr {
border-radius: 0; border-radius: 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
.platform-android .popover:before { .platform-android .popover:before {
@ -1604,6 +1625,7 @@ hr {
background-color: #33b5e5; background-color: #33b5e5;
border-color: #33b5e5; border-color: #33b5e5;
-webkit-transform: translate3d(50px, 0, 0); -webkit-transform: translate3d(50px, 0, 0);
-ms-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0);
} }
.platform-android .toggle.active:before { .platform-android .toggle.active:before {

5
lib/sass/buttons.scss
Просмотреть файл

@ -44,6 +44,7 @@
&:active, &:active,
&.active { &.active {
color: #fff;
border: 1px solid darken($primary-color, 10%); border: 1px solid darken($primary-color, 10%);
background-color: darken($primary-color, 10%); background-color: darken($primary-color, 10%);
} }
@ -56,7 +57,8 @@
background-color: $positive-color; background-color: $positive-color;
&:active, &:active,
&.active{ &.active {
color: #fff;
border: 1px solid darken($positive-color, 10%); border: 1px solid darken($positive-color, 10%);
background-color: darken($positive-color, 10%); background-color: darken($positive-color, 10%);
} }
@ -70,6 +72,7 @@
&:active, &:active,
&.active { &.active {
color: #fff;
border: 1px solid darken($negative-color, 10%); border: 1px solid darken($negative-color, 10%);
background-color: darken($negative-color, 10%); background-color: darken($negative-color, 10%);
} }

14
lib/sass/mixins.scss
Просмотреть файл

@ -12,12 +12,6 @@
box-orient: $orient; box-orient: $orient;
} }
//Box flex
@mixin box-flex($flex) {
-webkit-box-flex: $flex;
box-flex: $flex;
}
// Box shadow // Box shadow
@mixin box-shadow($shadow...) { @mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow; -webkit-box-shadow: $shadow;
@ -41,6 +35,7 @@
// -------------------------------------------------- // --------------------------------------------------
@mixin transform($transform) { @mixin transform($transform) {
-webkit-transform: $transform; -webkit-transform: $transform;
-ms-transform: $transform;
transform: $transform; transform: $transform;
} }
@ -49,18 +44,22 @@
// -------------------------------------------------- // --------------------------------------------------
@mixin transition($transition...) { @mixin transition($transition...) {
-webkit-transition: $transition; -webkit-transition: $transition;
-moz-transition: $transition;
transition: $transition; transition: $transition;
} }
@mixin transition-property($property...) { @mixin transition-property($property...) {
-webkit-transition-property: $property; -webkit-transition-property: $property;
-moz-transition-property: $property;
transition-property: $property; transition-property: $property;
} }
@mixin transition-duration($duration...) { @mixin transition-duration($duration...) {
-webkit-transition-duration: $duration; -webkit-transition-duration: $duration;
-moz-transition-duration: $duration;
transition-duration: $duration; transition-duration: $duration;
} }
@mixin transition-timing-function($function...) { @mixin transition-timing-function($function...) {
-webkit-transition-timing-function: $function; -webkit-transition-timing-function: $function;
-moz-transition-timing-function: $function;
transition-timing-function: $function; transition-timing-function: $function;
} }
@ -69,14 +68,17 @@
// -------------------------------------------------- // --------------------------------------------------
@mixin animation-name($name) { @mixin animation-name($name) {
-webkit-animation-name: $name; -webkit-animation-name: $name;
-moz-animation-name: $name;
animation-name: $name; animation-name: $name;
} }
@mixin animation-duration($duration) { @mixin animation-duration($duration) {
-webkit-animation-duration: $duration; -webkit-animation-duration: $duration;
-moz-animation-duration: $duration;
animation-duration: $duration; animation-duration: $duration;
} }
@mixin animation-direction($direction) { @mixin animation-direction($direction) {
-webkit-animation-direction: $direction; -webkit-animation-direction: $direction;
-moz-animation-direction: $direction;
animation-direction: $direction; animation-direction: $direction;
} }

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

@ -30,3 +30,29 @@
} }
} }
} }
// Add chevrons to elements
.push-left,
.push-right {
&:after {
position: absolute;
top: 50%;
display: inline-block;
color: #bbb;
font-family: Ratchicons;
font-size: inherit;
text-decoration: none;
line-height: 1;
cursor: default;
-webkit-font-smoothing: antialiased;
@include transform(translateY(-50%));
}
}
.push-left:after {
left: 15px;
content: '\e803';
}
.push-right:after {
right: 15px;
content: '\e800';
}

63
lib/sass/table-views.scss
Просмотреть файл

@ -12,7 +12,7 @@
.table-view-cell { .table-view-cell {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
padding: 11px 15px; padding: 11px 65px 11px 15px;
border-bottom: $border-default; border-bottom: $border-default;
// Remove the border from the last table view item // Remove the border from the last table view item
@ -25,7 +25,7 @@
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: inherit; padding: inherit;
margin: -11px -15px; // Make the entire list item tappable. margin: -11px -65px -11px -15px; // Make the entire list item tappable.
color: inherit; color: inherit;
&:active { &:active {
@ -83,50 +83,33 @@
} }
} }
// Table-views with buttons
// Table-views with buttons, badges and toggles
// -------------------------------------------------- // --------------------------------------------------
.table-view-cell,
.table-view .btn { .table-view-cell > a {
margin-top: -1px; // Center the btn inside the cell > .btn,
} > .badge,
> .toggle {
position: absolute;
// Table-views with badges top: 50%;
// -------------------------------------------------- right: 15px;
.table-view .badge { @include transform(translateY(-50%));
margin-top: 2px;
&.pull-left {
margin-right: 5px;
} }
&.pull-right {
margin-left: 5px; // If the cell has a chevron, give some more room.
.push-left,
.push-right {
> .btn,
> .badge,
> .toggle {
right: 35px;
}
} }
} }
// Table-views with toggles
// --------------------------------------------------
.table-view .toggle {
margin-top: -4px; // Center the toggle inside the cell
}
// Table-views with Ratchicons // Table-views with Ratchicons
// -------------------------------------------------- // --------------------------------------------------
.table-view .icon { .table-view .icon {
margin-top: 3px; font-size: inherit
font-size: inherit;
&.icon-left,
&.icon-right {
color: #bbb;
}
&.pull-left {
margin-right: 5px;
}
&.pull-right {
margin-left: 5px;
}
} }

6
lib/sass/theme-android.scss
Просмотреть файл

@ -420,12 +420,6 @@ a {
} }
} }
// Table-views with buttons
// --------------------------------------------------
.table-view .btn {
margin-top: -4px; // Center the btn inside the cell
}
// Forms // Forms
// -------------------------------------------------- // --------------------------------------------------