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

Changing lists to table views to match the HIG.

pull/214/head
connors 12 years ago
parent
dc5fd7fc22
commit
f920cfc144
5 changed files with 144 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      dist/ratchet.css
  2. 186
      docs/index.html
  3. 2
      lib/sass/popovers.scss
  4. 2
      lib/sass/ratchet.scss
  5. 62
      lib/sass/table-views.scss

56
dist/ratchet.css vendored
Unescape View File

@ -346,34 +346,34 @@ a {
height: 32px; height: 32px;
margin: 0; } margin: 0; }
/* Lists /* Table views
-------------------------------------------------- */ -------------------------------------------------- */
.list { .table-view {
list-style: none; list-style: none;
background-color: #fff; } background-color: #fff; }
.list li { .table-view li {
position: relative; position: relative;
padding: 11px 60px 11px 0; padding: 11px 60px 11px 0;
margin-left: 15px; margin-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); } border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.list li:first-child { .table-view li:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.1); } border-top: 1px solid rgba(0, 0, 0, 0.1); }
.list li:last-child { .table-view li:last-child {
border-bottom: 0; } border-bottom: 0; }
.list li > a:not([class*="button"]) { .table-view li > a:not([class*="button"]) {
position: relative; position: relative;
display: block; display: block;
padding: inherit; padding: inherit;
margin: -11px -60px -11px 0; margin: -11px -60px -11px 0;
color: inherit; } color: inherit; }
/* Inset list /* Inset table view
-------------------------------------------------- */ -------------------------------------------------- */
.list.inset { .table-view.inset {
width: auto; width: auto;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
@ -381,15 +381,15 @@ a {
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; } box-sizing: border-box; }
.list.inset li:first-child { .table-view.inset li:first-child {
border-top-width: 0; } border-top-width: 0; }
.list.inset li:last-child { .table-view.inset li:last-child {
border-bottom-width: 0; } border-bottom-width: 0; }
/* List dividers /* table view dividers
-------------------------------------------------- */ -------------------------------------------------- */
.list .list-divider { .table-view .table-view-divider {
position: relative; position: relative;
top: -1px; top: -1px;
padding-top: 6px; padding-top: 6px;
@ -404,42 +404,42 @@ a {
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); } box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); }
/* Rounding first divider on inset lists and remove border on the top */ /* Rounding first divider on inset lists and remove border on the top */
.list.inset .list-divider:first-child { .table-view.inset .table-view-divider:first-child {
top: 0; top: 0;
border-top-width: 0; border-top-width: 0;
border-radius: 6px 6px 0 0; } border-radius: 6px 6px 0 0; }
/* Rounding last divider on inset lists */ /* Rounding last divider on inset table views */
.list.inset .list-divider:last-child { .table-view.inset .table-view-divider:last-child {
border-radius: 0 0 6px 6px; } border-radius: 0 0 6px 6px; }
/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles) /* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
-------------------------------------------------- */ -------------------------------------------------- */
.list .chevron, .table-view .chevron,
.list [class*="button"], .table-view [class*="button"],
.list [class*="count"], .table-view [class*="count"],
.list .toggle { .table-view .toggle {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 10px; } right: 10px; }
/* Position chevrons/counts vertically centered on the right in list items */ /* Position chevrons/counts vertically centered on the right in table view items */
.list .chevron, .table-view .chevron,
.list [class*="count"] { .table-view [class*="count"] {
margin-top: -10px; margin-top: -10px;
/* Half height of chevron */ } /* Half height of chevron */ }
/* Push count over if there's a sibling chevron */ /* Push count over if there's a sibling chevron */
.list .chevron + [class*="count"] { .table-view .chevron + [class*="count"] {
right: 30px; } right: 30px; }
/* Position buttons vertically centered on the right in list items */ /* Position buttons vertically centered on the right in table view items */
.list [class*="button"] { .table-view [class*="button"] {
left: auto; left: auto;
margin-top: -14px; margin-top: -14px;
/* Half height of button */ } /* Half height of button */ }
.list .toggle { .table-view .toggle {
margin-top: -15px; margin-top: -15px;
/* Half height of toggle */ } /* Half height of toggle */ }
@ -837,7 +837,7 @@ button.button-block {
/* Lists in popovers /* Lists in popovers
-------------------------------------------------- */ -------------------------------------------------- */
.popover .list { .popover .table-view {
width: auto; width: auto;
max-height: 250px; max-height: 250px;
margin-right: 0; margin-right: 0;

186
docs/index.html
Unescape View File

@ -49,7 +49,7 @@
<a data-ignore="push" class="nav-components-link" href="">Components</a> <a data-ignore="push" class="nav-components-link" href="">Components</a>
<ul class="components-list"> <ul class="components-list">
<li><a href="#bars">Bars</a></li> <li><a href="#bars">Bars</a></li>
<li><a href="#lists">Lists</a></li> <li><a href="#table-views">Table views</a></li>
<li><a href="#buttons">Buttons</a></li> <li><a href="#buttons">Buttons</a></li>
<li><a href="#segmentedControllers">Segmented controllers</a></li> <li><a href="#segmentedControllers">Segmented controllers</a></li>
<li><a href="#counts">Counts</a></li> <li><a href="#counts">Counts</a></li>
@ -405,52 +405,52 @@
</article> </article>
<!-- Lists --> <!-- Table views -->
<article class="component" id="lists"> <article class="component" id="table-views">
<h3 class="component-title">Lists</h3> <h3 class="component-title">Table views</h3>
<p class="component-description">Lists can be used for organizing data, showing collections of links or a series of controls.</p> <p class="component-description">Table views can be used for organizing data, showing collections of links or a series of controls.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="list"> <ul class="table-view">
<li>List item 1</li> <li>Item 1</li>
<li>List item 2</li> <li>Item 2</li>
<li class="list-divider">List Divider</li> <li class="table-view-divider">Divider</li>
<li>List item 3</li> <li>Item 3</li>
</ul> </ul>
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt; &lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;List item 1&lt;/li&gt; &lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;List item 2&lt;/li&gt; &lt;li&gt;Item 2&lt;/li&gt;
&lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt; &lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
&lt;li&gt;List item 3&lt;/li&gt; &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">List with chevrons</h3> <h3 class="component-title">Table view with chevrons</h3>
<p class="component-description">Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the list item is linked.</p> <p class="component-description">Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="list"> <ul class="table-view">
<li> <li>
<a> <a>
List item 1 Item 1
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
<li> <li>
<a> <a>
List item 2 Item 2
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
<li> <li>
<a> <a>
List item 3 Item 3
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
@ -458,22 +458,22 @@
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt; &lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#&quot;&gt; &lt;a href=&quot;#&quot;&gt;
List item 1 Item 1
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt; &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#&quot;&gt; &lt;a href=&quot;#&quot;&gt;
List item 2 Item 2
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt; &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#&quot;&gt; &lt;a href=&quot;#&quot;&gt;
List item 3 Item 3
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt; &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
@ -483,48 +483,48 @@
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">List with counts</h3> <h3 class="component-title">Table view with counts</h3>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="list"> <ul class="table-view">
<li>List item 1 <span class="count">4</span></li> <li>Item 1 <span class="count">4</span></li>
<li>List item 2 <span class="count">1</span></li> <li>Item 2 <span class="count">1</span></li>
<li>List item 3 <span class="count">5</span></li> <li>Item 3 <span class="count">5</span></li>
</ul> </ul>
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt; &lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;List item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt; &lt;li&gt;Item 1 &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;List item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt; &lt;li&gt;Item 2 &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;List item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt; &lt;li&gt;Item 3 &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">List with counts and chevrons</h3> <h3 class="component-title">Table view with counts and chevrons</h3>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="list"> <ul class="table-view">
<li> <li>
<a> <a>
List item 1 Item 1
<span class="chevron"></span> <span class="chevron"></span>
<span class="count">4</span> <span class="count">4</span>
</a> </a>
</li> </li>
<li> <li>
<a> <a>
List item 2 Item 2
<span class="chevron"></span> <span class="chevron"></span>
<span class="count">1</span> <span class="count">1</span>
</a> </a>
</li> </li>
<li> <li>
<a> <a>
List item 3 Item 3
<span class="chevron"></span> <span class="chevron"></span>
<span class="count">5</span> <span class="count">5</span>
</a> </a>
@ -533,24 +533,24 @@
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt; &lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#&quot;&gt; &lt;a href=&quot;#&quot;&gt;
List item 1 Item 1
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt; &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;4&lt;/span&gt; &lt;span class=&quot;count&quot;&gt;4&lt;/span&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#&quot;&gt; &lt;a href=&quot;#&quot;&gt;
List item 2 Item 2
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt; &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt; &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;
&lt;/a&gt; &lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;#&quot;&gt; &lt;a href=&quot;#&quot;&gt;
List item 3 Item 3
&lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt; &lt;span class=&quot;chevron&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;count&quot;&gt;5&lt;/span&gt; &lt;span class=&quot;count&quot;&gt;5&lt;/span&gt;
&lt;/a&gt; &lt;/a&gt;
@ -561,47 +561,47 @@
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">List with buttons</h3> <h3 class="component-title">Table view with buttons</h3>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="list"> <ul class="table-view">
<li>List item 1 <a class="button">Button</a></li> <li>Item 1 <a class="button">Button</a></li>
<li>List item 2 <a class="button-main">Button</a></li> <li>Item 2 <a class="button-main">Button</a></li>
<li>List item 3 <a class="button-positive">Button</a></li> <li>Item 3 <a class="button-positive">Button</a></li>
<li>List item 4 <a class="button-negative">Button</a></li> <li>Item 4 <a class="button-negative">Button</a></li>
</ul> </ul>
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt; &lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;List item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Item 1 &lt;a class=&quot;button&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 2 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Item 2 &lt;a class=&quot;button-main&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Item 3 &lt;a class=&quot;button-positive&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;List item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Item 4 &lt;a class=&quot;button-negative&quot;&gt;Button&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">List with toggles</h3> <h3 class="component-title">Table view with toggles</h3>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="list"> <ul class="table-view">
<li> <li>
List item 1 Item 1
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li>
List item 2 Item 2
<div class="toggle active"> <div class="toggle active">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
</li> </li>
<li> <li>
List item 3 Item 3
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
</div> </div>
@ -610,21 +610,21 @@
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;ul class=&quot;list&quot;&gt; &lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt; &lt;li&gt;
List item 1 Item 1
&lt;div class=&quot;toggle&quot;&gt; &lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
List item 2 Item 2
&lt;div class=&quot;toggle active&quot;&gt; &lt;div class=&quot;toggle active&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;li&gt; &lt;li&gt;
List item 3 Item 3
&lt;div class=&quot;toggle&quot;&gt; &lt;div class=&quot;toggle&quot;&gt;
&lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt; &lt;div class=&quot;toggle-handle&quot;&gt;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -635,25 +635,25 @@
</article> </article>
<article class="component"> <article class="component">
<h3 class="component-title">Inset list</h3> <h3 class="component-title">Inset table views</h3>
<div class="component-example"> <div class="component-example">
<ul class="list inset"> <ul class="table-view inset">
<li>List item 1</li> <li>Item 1</li>
<li>List item 2</li> <li>Item 2</li>
<li class="list-divider">List Divider</li> <li class="table-view-divider">Divider</li>
<li>List item 3</li> <li>Item 3</li>
<li>List item 4</li> <li>Item 4</li>
</ul> </ul>
</div> </div>
<pre class="prettyprint"> <pre class="prettyprint">
&lt;ul class=&quot;list inset&quot;&gt; &lt;ul class=&quot;table-view inset&quot;&gt;
&lt;li&gt;List item 1&lt;/li&gt; &lt;li&gt;Item 1&lt;/li&gt;
&lt;li&gt;List item 2&lt;/li&gt; &lt;li&gt;Item 2&lt;/li&gt;
&lt;li class=&quot;list-divider&quot;&gt;List Divider&lt;/li&gt; &lt;li class=&quot;table-view-divider&quot;&gt;Divider&lt;/li&gt;
&lt;li&gt;List item 3&lt;/li&gt; &lt;li&gt;Item 3&lt;/li&gt;
&lt;li&gt;List item 4&lt;/li&gt; &lt;li&gt;Item 4&lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
@ -735,7 +735,7 @@
<a href="#item3mobile">Thing three</a> <a href="#item3mobile">Thing three</a>
</li> </li>
</ul> </ul>
<ul class="inset list"> <ul class="inset table-view">
<li id="item1mobile" class="segmented-controller-item active"> <li id="item1mobile" class="segmented-controller-item active">
Item 1 Item 1
</li> </li>
@ -760,7 +760,7 @@
&lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt; &lt;a href=&quot;#item3&quot;&gt;Thing three&lt;/a&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt; &lt;/ul&gt;
&lt;ul class=&quot;inset list&quot;&gt; &lt;ul class=&quot;inset table-view&quot;&gt;
&lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt; &lt;li id=&quot;item1&quot; class=&quot;segmented-controller-item active&quot;&gt;
Item 1 Item 1
&lt;/li&gt; &lt;/li&gt;
@ -935,7 +935,7 @@ document
Right Right
</a> </a>
</header> </header>
<ul class="list"> <ul class="table-view">
<li>Item1</li> <li>Item1</li>
<li>Item2</li> <li>Item2</li>
<li>Item3</li> <li>Item3</li>
@ -955,7 +955,7 @@ document
Right Right
&lt;/a&gt; &lt;/a&gt;
&lt;/header&gt; &lt;/header&gt;
&lt;ul class=&quot;list&quot;&gt; &lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt;Item1&lt;/li&gt; &lt;li&gt;Item1&lt;/li&gt;
&lt;li&gt;Item2&lt;/li&gt; &lt;li&gt;Item2&lt;/li&gt;
&lt;li&gt;Item3&lt;/li&gt; &lt;li&gt;Item3&lt;/li&gt;
@ -1094,7 +1094,7 @@ document
<h1 class="title">Push</h1> <h1 class="title">Push</h1>
</header> </header>
<div class="content"> <div class="content">
<ul class="list"> <ul class="table-view">
<li> <li>
<a href="two.html" data-transition="slide-in"> <a href="two.html" data-transition="slide-in">
Load new page with push Load new page with push
@ -1110,7 +1110,7 @@ document
&lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt; &lt;h1 class=&quot;title&quot;&gt;Push&lt;/h1&gt;
&lt;/header&gt; &lt;/header&gt;
&lt;div class=&quot;content&quot;&gt; &lt;div class=&quot;content&quot;&gt;
&lt;ul class=&quot;list&quot;&gt; &lt;ul class=&quot;table-view&quot;&gt;
&lt;li&gt; &lt;li&gt;
&lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt; &lt;a href=&quot;two.html&quot; data-transition=&quot;slide-in&quot;&gt;
Go to page 2 Go to page 2
@ -1169,27 +1169,7 @@ window.addEventListener('push', myFunction);
<section class="content-section"> <section class="content-section">
<div class="docs-inner-wrapper"> <div class="docs-inner-wrapper">
<h3>License &amp; credit</h3> <h3>License &amp; credit</h3>
<p>Ratchet is under the the MIT license, meaning you're basically free to use the framework as you please. Ratchet was lovingly crafted by <a data-ignore="push" href="http://www.twitter.com/dhg">Dave Gamache</a>, <a data-ignore="push" href="http://www.twitter.com/connors">Connor Sears</a>, and <a data-ignore="push" href="http://www.twitter.com/fat">Jacob Thornton</a>. </p> <p>Ratchet is under the the MIT license, meaning you're basically free to use the framework as you please. Ratchet was lovingly crafted by <a data-ignore="push" href="http://www.twitter.com/dhg">Dave Gamache</a>, <a data-ignore="push" href="http://www.twitter.com/connors">Connor Sears</a>, and <a data-ignore="push" href="http://www.twitter.com/fat">Jacob Thornton</a>.</p>
<ul class="avatars">
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/dhg">
<img src="https://secure.gravatar.com/avatar/14267e25aa6c7ef4f396afc483d6f238?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
</a>
<a data-ignore="push" href="https://twitter.com/dhg" class="twitter-follow-button" data-show-count="false">Follow @dhg</a>
</li>
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/connors">
<img src="https://secure.gravatar.com/avatar/53d633ae4622de17906338910085275a?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
</a>
<a data-ignore="push" href="https://twitter.com/connors" class="twitter-follow-button" data-show-count="false">Follow @connors</a>
</li>
<li>
<a data-ignore="push" class="avatar" href="http://www.twitter.com/fat">
<img src="https://secure.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8?s=420&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png" alt="">
</a>
<a data-ignore="push" href="https://twitter.com/fat" class="twitter-follow-button" data-show-count="false">Follow @fat</a>
</li>
</ul>
</div> </div>
</section> </section>
</div> </div>

2
lib/sass/popovers.scss
Unescape View File

@ -139,7 +139,7 @@
/* Lists in popovers /* Lists in popovers
-------------------------------------------------- */ -------------------------------------------------- */
.popover .list { .popover .table-view {
width: auto; width: auto;
max-height: 250px; max-height: 250px;
margin-right: 0; margin-right: 0;

2
lib/sass/ratchet.scss
Unescape View File

@ -7,7 +7,7 @@ $chrome-color: rgba(247,247,247,.98);
// Components // Components
@import "bars.scss"; @import "bars.scss";
@import "lists.scss"; @import "table-views.scss";
@import "forms.scss"; @import "forms.scss";
@import "buttons.scss"; @import "buttons.scss";
@import "chevrons.scss"; @import "chevrons.scss";

62
lib/sass/lists.scss → lib/sass/table-views.scss
Unescape View File

@ -1,14 +1,14 @@
/* Lists /* Table views
-------------------------------------------------- */ -------------------------------------------------- */
// Remove usual bullet styles from list // Remove usual bullet styles from table view
.list { .table-view {
list-style: none; list-style: none;
background-color: #fff; background-color: #fff;
} }
// Pad each list item and add dividers // Pad each table view item and add dividers
.list li { .table-view li {
position: relative; position: relative;
padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons
margin-left: 15px; margin-left: 15px;
@ -16,17 +16,17 @@
} }
// Give top border to first list items // Give top border to first list items
.list li:first-child { .table-view li:first-child {
border-top: 1px solid rgba(0, 0, 0, .1); border-top: 1px solid rgba(0, 0, 0, .1);
} }
// Remove the border from the last list item // Remove the border from the last list item
.list li:last-child { .table-view li:last-child {
border-bottom: 0; border-bottom: 0;
} }
// If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) // If a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
.list li > a:not([class*="button"]) { .table-view li > a:not([class*="button"]) {
position: relative; position: relative;
display: block; display: block;
padding: inherit; padding: inherit;
@ -34,10 +34,10 @@
color: inherit; color: inherit;
} }
/* Inset list /* Inset table view
-------------------------------------------------- */ -------------------------------------------------- */
.list.inset { .table-view.inset {
width: auto; width: auto;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
@ -46,19 +46,19 @@
box-sizing: border-box; box-sizing: border-box;
} }
// Remove border from first/last standard list items to avoid double border at top/bottom of lists // Remove border from first/last standard list items to avoid double border at top/bottom of table views
.list.inset li:first-child { .table-view.inset li:first-child {
border-top-width: 0; border-top-width: 0;
} }
.list.inset li:last-child { .table-view.inset li:last-child {
border-bottom-width: 0; border-bottom-width: 0;
} }
/* List dividers /* table view dividers
-------------------------------------------------- */ -------------------------------------------------- */
.list .list-divider { .table-view .table-view-divider {
position: relative; position: relative;
top: -1px; top: -1px;
padding-top: 6px; padding-top: 6px;
@ -74,45 +74,45 @@
} }
/* Rounding first divider on inset lists and remove border on the top */ /* Rounding first divider on inset lists and remove border on the top */
.list.inset .list-divider:first-child { .table-view.inset .table-view-divider:first-child {
top: 0; top: 0;
border-top-width: 0; border-top-width: 0;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} }
/* Rounding last divider on inset lists */ /* Rounding last divider on inset table views */
.list.inset .list-divider:last-child { .table-view.inset .table-view-divider:last-child {
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} }
/* Right-aligned subcontent in lists (chevrons, buttons, counts and toggles) /* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
-------------------------------------------------- */ -------------------------------------------------- */
.list .chevron, .table-view .chevron,
.list [class*="button"], .table-view [class*="button"],
.list [class*="count"], .table-view [class*="count"],
.list .toggle { .table-view .toggle {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 10px; right: 10px;
} }
/* Position chevrons/counts vertically centered on the right in list items */ /* Position chevrons/counts vertically centered on the right in table view items */
.list .chevron, .table-view .chevron,
.list [class*="count"] { .table-view [class*="count"] {
margin-top: -10px; /* Half height of chevron */ margin-top: -10px; /* Half height of chevron */
} }
/* Push count over if there's a sibling chevron */ /* Push count over if there's a sibling chevron */
.list .chevron + [class*="count"] { .table-view .chevron + [class*="count"] {
right: 30px; right: 30px;
} }
/* Position buttons vertically centered on the right in list items */ /* Position buttons vertically centered on the right in table view items */
.list [class*="button"] { .table-view [class*="button"] {
left: auto; left: auto;
margin-top: -14px; /* Half height of button */ margin-top: -14px; /* Half height of button */
} }
.list .toggle { .table-view .toggle {
margin-top: -15px; /* Half height of toggle */ margin-top: -15px; /* Half height of toggle */
} }
Write Preview
Loading…
Cancel
Save