playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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

pull/249/head
connors 11 years ago
parent
d68b71b9f1
commit
bbf1910c4f
10 changed files with 125 additions and 156 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 80
      components.html
  2. 79
      dist/ratchet.css
  3. 14
      lib/sass/badges.scss
  4. 8
      lib/sass/buttons.scss
  5. 29
      lib/sass/chevrons.scss
  6. 1
      lib/sass/ratchet.scss
  7. 19
      lib/sass/ratchicons.scss
  8. 40
      lib/sass/table-views.scss
  9. 9
      lib/sass/toggles.scss
  10. 2
      one.html

80
components.html
Unescape View File

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

79
dist/ratchet.css vendored
Unescape View File

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

14
lib/sass/badges.scss
Unescape View File

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

8
lib/sass/buttons.scss
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

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

19
lib/sass/ratchicons.scss
Unescape View File

@ -55,3 +55,22 @@
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
Unescape View File

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

9
lib/sass/toggles.scss
Unescape View File

@ -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
Unescape View File

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

Write Preview
Loading…
Cancel
Save