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

remove chevron.scss and just use icons now. \o/

This commit is contained in:
connors 2014-02-01 16:34:58 -08:00
Родитель d68b71b9f1
Коммит bbf1910c4f
10 изменённых файлов: 125 добавлений и 156 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@ -341,20 +341,20 @@ quis nostrud exercitation ullamco.</p>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
Item 1 Item 1
<span class="chevron"></span>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
Item 2 Item 2
<span class="chevron"></span>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
Item 3 Item 3
<span class="chevron"></span>
</a> </a>
</li> </li>
</ul> </ul>
@ -364,20 +364,20 @@ quis nostrud exercitation ullamco.</p>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
Item 1 Item 1
<span class="chevron"></span>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
Item 2 Item 2
<span class="chevron"></span>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
Item 3 Item 3
<span class="chevron"></span>
</a> </a>
</li> </li>
</ul> </ul>
@ -390,17 +390,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">4</span></li> <li class="table-view-cell">Item 1 <span class="badge pull-right">4</span></li>
<li class="table-view-cell">Item 2 <span class="badge">1</span></li> <li class="table-view-cell">Item 2 <span class="badge pull-right">1</span></li>
<li class="table-view-cell">Item 3 <span class="badge">5</span></li> <li class="table-view-cell">Item 3 <span class="badge pull-right">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">4</span></li> <li class="table-view-cell">Item 1 <span class="badge pull-right">4</span></li>
<li class="table-view-cell">Item 2 <span class="badge">1</span></li> <li class="table-view-cell">Item 2 <span class="badge pull-right">1</span></li>
<li class="table-view-cell">Item 3 <span class="badge">5</span></li> <li class="table-view-cell">Item 3 <span class="badge pull-right">5</span></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -413,23 +413,23 @@ quis nostrud exercitation ullamco.</p>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
Item 1 Item 1
<span class="chevron"></span>
<span class="badge">4</span>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
Item 2 Item 2
<span class="chevron"></span>
<span class="badge">1</span>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
Item 3 Item 3
<span class="chevron"></span>
<span class="badge">5</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -439,23 +439,23 @@ quis nostrud exercitation ullamco.</p>
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
Item 1 Item 1
<span class="chevron"></span>
<span class="badge">4</span>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
Item 2 Item 2
<span class="chevron"></span>
<span class="badge">1</span>
</a> </a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<a> <a>
<span class="icon icon-right pull-right"></span>
<span class="badge pull-right">5</span>
Item 3 Item 3
<span class="chevron"></span>
<span class="badge">5</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -468,19 +468,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">Button</a></li> <li class="table-view-cell">Item 1 <a class="btn 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 2 <a class="btn btn-primary 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 3 <a class="btn btn-positive pull-right">Button</a></li>
<li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li> <li class="table-view-cell">Item 4 <a class="btn btn-negative pull-right">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">Button</a></li> <li class="table-view-cell">Item 1 <a class="btn 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 2 <a class="btn btn-primary 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 3 <a class="btn btn-positive pull-right">Button</a></li>
<li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li> <li class="table-view-cell">Item 4 <a class="btn btn-negative pull-right">Button</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -493,19 +493,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"> <div class="toggle pull-right">
<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 active"> <div class="toggle pull-right 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"> <div class="toggle pull-right">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
@ -516,19 +516,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"> <div class="toggle pull-right">
<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 active"> <div class="toggle pull-right 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"> <div class="toggle pull-right">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
@ -1043,9 +1043,9 @@ document
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a href="{{ page.base_url }}two.html" data-transition="slide-in"> <a href="{{ page.base_url }}two.html" data-transition="slide-in">
<span class="icon icon-right pull-right"></span>
Load new page with push Load new page with push
</a> </a>
<span class="chevron"></span>
</li> </li>
</ul> </ul>
</div> </div>
@ -1061,9 +1061,9 @@ document
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a href="{{ page.base_url }}two.html" data-transition="slide-in"> <a href="{{ page.base_url }}two.html" data-transition="slide-in">
<span class="icon icon-right pull-right"></span>
Load new page with push Load new page with push
</a> </a>
<span class="chevron"></span>
</li> </li>
</ul> </ul>
</div> </div>

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

@ -423,7 +423,7 @@ p {
} }
.table-view .table-view-cell { .table-view .table-view-cell {
position: relative; position: relative;
padding: 11px 60px 12px 15px; padding: 11px 15px 12px 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 {
@ -433,7 +433,7 @@ p {
position: relative; position: relative;
display: block; display: block;
padding: inherit; padding: inherit;
margin: -11px -60px -12px -15px; margin: -11px -15px -12px -15px;
color: inherit; color: inherit;
} }
.table-view .table-view-cell > a:not(.btn):active { .table-view .table-view-cell > a:not(.btn):active {
@ -461,30 +461,6 @@ p {
.table-view .table-view-divider:last-child { .table-view .table-view-divider:last-child {
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} }
.table-view .chevron,
.table-view .btn,
.table-view .badge,
.table-view .toggle {
position: absolute;
top: 50%;
right: 10px;
}
.table-view .chevron {
margin-top: -10px;
}
.table-view .badge {
margin-top: -9px;
}
.table-view .chevron + .badge {
right: 30px;
}
.table-view .btn {
left: auto;
margin-top: -12px;
}
.table-view .toggle {
margin-top: -15px;
}
.table-view-indented .table-view-cell { .table-view-indented .table-view-cell {
padding-left: 59px; padding-left: 59px;
@ -771,27 +747,8 @@ input[type="button"] {
margin-right: 5px; margin-right: 5px;
} }
.chevron { .table-view .btn {
display: block; margin-top: -1px;
height: 20px;
}
.chevron:before, .chevron:after {
position: relative;
display: block;
width: 10px;
height: 3px;
background-color: #c7c7cc;
content: '';
}
.chevron:before {
top: 6px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.chevron:after {
top: 8px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
} }
.badge { .badge {
@ -857,6 +814,16 @@ input[type="button"] {
margin-right: 10px; margin-right: 10px;
} }
.table-view .badge {
margin-top: 2px;
}
.table-view .badge.pull-left {
margin-right: 5px;
}
.table-view .badge.pull-right {
margin-left: 5px;
}
.segmented-control { .segmented-control {
position: relative; position: relative;
display: table; display: table;
@ -1115,6 +1082,10 @@ input[type="button"] {
display: none; display: none;
} }
.table-view .toggle {
margin-top: -4px;
}
.content.fade { .content.fade {
left: 0; left: 0;
opacity: 0; opacity: 0;
@ -1242,3 +1213,17 @@ input[type="button"] {
font-size: 24px; font-size: 24px;
margin-top: 11px; margin-top: 11px;
} }
.table-view .icon {
margin-top: 3px;
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;
}

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

@ -83,3 +83,17 @@
right: 0; right: 0;
margin-right: 10px; margin-right: 10px;
} }
// Ratchicons in table-views
.table-view {
.badge {
margin-top: 2px;
&.pull-left {
margin-right: 5px;
}
&.pull-right {
margin-left: 5px;
}
}
}

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

@ -198,3 +198,11 @@ input[type="button"] {
} }
} }
} }
// Buttons in table-views
// --------------------------------------------------
.table-view {
.btn {
margin-top: -1px; // Center the btn inside the cell
}
}

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

@ -1,29 +0,0 @@
//
// Chevrons
// --------------------------------------------------
.chevron {
display: block;
height: 20px;
// Base styles for both halves of the chevron
&:before,
&:after {
position: relative;
display: block;
width: 10px;
height: 3px;
background-color: #c7c7cc;
content: '';
}
// Position and rotate respective halves of the chevron
&:before {
top: 6px;
@include transform(rotate(45deg));
}
&:after {
top: 8px;
@include transform(rotate(-45deg));
}
}

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

@ -15,7 +15,6 @@
@import "table-views.scss"; @import "table-views.scss";
@import "forms.scss"; @import "forms.scss";
@import "buttons.scss"; @import "buttons.scss";
@import "chevrons.scss";
@import "badges.scss"; @import "badges.scss";
@import "segmented-controls.scss"; @import "segmented-controls.scss";
@import "popovers.scss"; @import "popovers.scss";

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

@ -54,4 +54,23 @@
font-size: 24px; font-size: 24px;
margin-top: 11px; margin-top: 11px;
} }
}
// Ratchicons in table-views
.table-view {
.icon {
margin-top: 3px;
font-size: inherit;
&.icon-left,
&.icon-right {
color: #bbb;
}
&.pull-left {
margin-right: 5px;
}
&.pull-right {
margin-left: 5px;
}
}
} }

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

@ -11,7 +11,7 @@
// Pad each table view item and add dividers // Pad each table view item and add dividers
.table-view-cell { .table-view-cell {
position: relative; position: relative;
padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider. padding: 11px 15px 12px 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
@ -23,7 +23,7 @@
position: relative; position: relative;
display: block; display: block;
padding: inherit; padding: inherit;
margin: -11px -60px -12px -15px; // Make the entire list item tappable. margin: -11px -15px -12px -15px; // Make the entire list item tappable.
color: inherit; color: inherit;
&:active { &:active {
@ -61,42 +61,6 @@
border-radius: 0 0 $border-radius $border-radius; border-radius: 0 0 $border-radius $border-radius;
} }
} }
// Right-aligned subcontent in table views (chevrons, buttons, badges and toggles)
// -------------------------------------------------------------------------------
.chevron,
.btn,
.badge,
.toggle {
position: absolute;
top: 50%;
right: 10px;
}
// Position chevrons/badges vertically centered on the right in table view items
.chevron {
margin-top: -10px; // Half height of chevron
}
.badge {
margin-top: -9px; // Aligned just right
}
// Push badge over if there's a sibling chevron
.chevron + .badge {
right: 30px;
}
// Position buttons vertically centered on the right in table view items
.btn {
left: auto;
margin-top: -12px; // Half height of button
}
.toggle {
margin-top: -15px; // Half height of toggle
}
} }
// Indented table views // Indented table views

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

@ -58,3 +58,12 @@
display: none; display: none;
} }
} }
// Toggles in table-views
// --------------------------------------------------
.table-view {
.toggle {
margin-top: -4px; // Center the toggle inside the cell
}
}

2
one.html
Просмотреть файл

@ -30,9 +30,9 @@
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell"> <li class="table-view-cell">
<a href="two.html" data-transition="slide-in" data-selector=".iphone-content"> <a href="two.html" data-transition="slide-in" data-selector=".iphone-content">
<span class="icon icon-right pull-right"></span>
Load new page with push Load new page with push
</a> </a>
<span class="chevron"></span>
</li> </li>
</ul> </ul>
</div> </div>