remove chevron.scss and just use icons now. \o/
This commit is contained in:
Родитель
d68b71b9f1
Коммит
bbf1910c4f
|
@ -341,20 +341,20 @@ quis nostrud exercitation ullamco.</p>
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
Item 1
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
Item 2
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
Item 3
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -364,20 +364,20 @@ quis nostrud exercitation ullamco.</p>
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
Item 1
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
Item 2
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
Item 3
|
||||
<span class="chevron"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -390,17 +390,17 @@ quis nostrud exercitation ullamco.</p>
|
|||
|
||||
<div class="component-example component-example-fullbleed">
|
||||
<ul class="table-view">
|
||||
<li class="table-view-cell">Item 1 <span class="badge">4</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">5</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 pull-right">1</span></li>
|
||||
<li class="table-view-cell">Item 3 <span class="badge pull-right">5</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<ul class="table-view">
|
||||
<li class="table-view-cell">Item 1 <span class="badge">4</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">5</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 pull-right">1</span></li>
|
||||
<li class="table-view-cell">Item 3 <span class="badge pull-right">5</span></li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
|
@ -413,23 +413,23 @@ quis nostrud exercitation ullamco.</p>
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
<span class="badge pull-right">5</span>
|
||||
Item 1
|
||||
<span class="chevron"></span>
|
||||
<span class="badge">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
<span class="badge pull-right">5</span>
|
||||
Item 2
|
||||
<span class="chevron"></span>
|
||||
<span class="badge">1</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
<span class="badge pull-right">5</span>
|
||||
Item 3
|
||||
<span class="chevron"></span>
|
||||
<span class="badge">5</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -439,23 +439,23 @@ quis nostrud exercitation ullamco.</p>
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
<span class="badge pull-right">5</span>
|
||||
Item 1
|
||||
<span class="chevron"></span>
|
||||
<span class="badge">4</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
<span class="badge pull-right">5</span>
|
||||
Item 2
|
||||
<span class="chevron"></span>
|
||||
<span class="badge">1</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
<a>
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
<span class="badge pull-right">5</span>
|
||||
Item 3
|
||||
<span class="chevron"></span>
|
||||
<span class="badge">5</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -468,19 +468,19 @@ quis nostrud exercitation ullamco.</p>
|
|||
|
||||
<div class="component-example component-example-fullbleed">
|
||||
<ul class="table-view">
|
||||
<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">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">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 pull-right">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 pull-right">Button</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<ul class="table-view">
|
||||
<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">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">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 pull-right">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 pull-right">Button</a></li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
|
@ -493,19 +493,19 @@ quis nostrud exercitation ullamco.</p>
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
Item 1
|
||||
<div class="toggle">
|
||||
<div class="toggle pull-right">
|
||||
<div class="toggle-handle"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
Item 2
|
||||
<div class="toggle active">
|
||||
<div class="toggle pull-right active">
|
||||
<div class="toggle-handle"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
Item 3
|
||||
<div class="toggle">
|
||||
<div class="toggle pull-right">
|
||||
<div class="toggle-handle"></div>
|
||||
</div>
|
||||
</li>
|
||||
|
@ -516,19 +516,19 @@ quis nostrud exercitation ullamco.</p>
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
Item 1
|
||||
<div class="toggle">
|
||||
<div class="toggle pull-right">
|
||||
<div class="toggle-handle"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
Item 2
|
||||
<div class="toggle active">
|
||||
<div class="toggle pull-right active">
|
||||
<div class="toggle-handle"></div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="table-view-cell">
|
||||
Item 3
|
||||
<div class="toggle">
|
||||
<div class="toggle pull-right">
|
||||
<div class="toggle-handle"></div>
|
||||
</div>
|
||||
</li>
|
||||
|
@ -1043,9 +1043,9 @@ document
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
<a href="{{ page.base_url }}two.html" data-transition="slide-in">
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
Load new page with push
|
||||
</a>
|
||||
<span class="chevron"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
@ -1061,9 +1061,9 @@ document
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
<a href="{{ page.base_url }}two.html" data-transition="slide-in">
|
||||
<span class="icon icon-right pull-right"></span>
|
||||
Load new page with push
|
||||
</a>
|
||||
<span class="chevron"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -423,7 +423,7 @@ p {
|
|||
}
|
||||
.table-view .table-view-cell {
|
||||
position: relative;
|
||||
padding: 11px 60px 12px 15px;
|
||||
padding: 11px 15px 12px 15px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
.table-view .table-view-cell:last-child {
|
||||
|
@ -433,7 +433,7 @@ p {
|
|||
position: relative;
|
||||
display: block;
|
||||
padding: inherit;
|
||||
margin: -11px -60px -12px -15px;
|
||||
margin: -11px -15px -12px -15px;
|
||||
color: inherit;
|
||||
}
|
||||
.table-view .table-view-cell > a:not(.btn):active {
|
||||
|
@ -461,30 +461,6 @@ p {
|
|||
.table-view .table-view-divider:last-child {
|
||||
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 {
|
||||
padding-left: 59px;
|
||||
|
@ -771,27 +747,8 @@ input[type="button"] {
|
|||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
display: block;
|
||||
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);
|
||||
.table-view .btn {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
|
@ -857,6 +814,16 @@ input[type="button"] {
|
|||
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 {
|
||||
position: relative;
|
||||
display: table;
|
||||
|
@ -1115,6 +1082,10 @@ input[type="button"] {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.table-view .toggle {
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.content.fade {
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
|
@ -1242,3 +1213,17 @@ input[type="button"] {
|
|||
font-size: 24px;
|
||||
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;
|
||||
}
|
||||
|
|
|
@ -83,3 +83,17 @@
|
|||
right: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// Ratchicons in table-views
|
||||
.table-view {
|
||||
.badge {
|
||||
margin-top: 2px;
|
||||
|
||||
&.pull-left {
|
||||
margin-right: 5px;
|
||||
}
|
||||
&.pull-right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -198,3 +198,11 @@ input[type="button"] {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons in table-views
|
||||
// --------------------------------------------------
|
||||
.table-view {
|
||||
.btn {
|
||||
margin-top: -1px; // Center the btn inside the cell
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
|
@ -15,7 +15,6 @@
|
|||
@import "table-views.scss";
|
||||
@import "forms.scss";
|
||||
@import "buttons.scss";
|
||||
@import "chevrons.scss";
|
||||
@import "badges.scss";
|
||||
@import "segmented-controls.scss";
|
||||
@import "popovers.scss";
|
||||
|
|
|
@ -54,4 +54,23 @@
|
|||
font-size: 24px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -11,7 +11,7 @@
|
|||
// Pad each table view item and add dividers
|
||||
.table-view-cell {
|
||||
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;
|
||||
|
||||
// Remove the border from the last table view item
|
||||
|
@ -23,7 +23,7 @@
|
|||
position: relative;
|
||||
display: block;
|
||||
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;
|
||||
|
||||
&:active {
|
||||
|
@ -61,42 +61,6 @@
|
|||
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
|
||||
|
|
|
@ -58,3 +58,12 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggles in table-views
|
||||
// --------------------------------------------------
|
||||
.table-view {
|
||||
.toggle {
|
||||
margin-top: -4px; // Center the toggle inside the cell
|
||||
}
|
||||
}
|
||||
|
|
2
one.html
2
one.html
|
@ -30,9 +30,9 @@
|
|||
<ul class="table-view">
|
||||
<li class="table-view-cell">
|
||||
<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
|
||||
</a>
|
||||
<span class="chevron"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
Загрузка…
Ссылка в новой задаче