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

Fixing the docs up to use new table-view-cell class.

pull/231/head
connors 11 years ago
parent
36607ce59d
commit
ed7de57a11
3 changed files with 90 additions and 83 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. 10
      dist/ratchet.css
  2. 153
      index.html
  3. 10
      lib/sass/table-views.scss

10
dist/ratchet.css vendored
Unescape View File

@ -483,15 +483,17 @@ strong {
} }
.table-view-indented .table-view-cell { .table-view-indented .table-view-cell {
padding-left: 60px; padding-left: 59px;
background-position-x: 60px; background-position-x: 59px;
} }
.table-view-indented .table-view-cell > a:not([class*="button"]) { .table-view-indented .table-view-cell > a:not([class*="button"]) {
margin-left: -60px; margin-left: -59px;
} }
.table-view-indented .table-view-cell > .pull-left, .table-view-indented .table-view-cell > .pull-left,
.table-view-indented .table-view-cell > a:not([class*="button"]) .pull-left { .table-view-indented .table-view-cell > a:not([class*="button"]) .pull-left {
margin-right: 15px; position: absolute;
left: 15px;
z-index: 1;
} }
.popover .table-view { .popover .table-view {

153
index.html
Unescape View File

@ -331,19 +331,19 @@ layout: default
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li>Item 1</li> <li class="table-view-cell">Item 1</li>
<li>Item 2</li> <li class="table-view-cell">Item 2</li>
<li class="table-view-divider">Divider</li> <li class="table-view-cell table-view-divider">Divider</li>
<li>Item 3</li> <li class="table-view-cell">Item 3</li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li>Item 1</li> <li class="table-view-cell">Item 1</li>
<li>Item 2</li> <li class="table-view-cell">Item 2</li>
<li class="table-view-divider">Divider</li> <li class="table-view-cell table-view-divider">Divider</li>
<li>Item 3</li> <li class="table-view-cell">Item 3</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -354,21 +354,24 @@ layout: default
<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> <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="table-view"> <ul class="table-view table-view-indented">
<li> <li class="table-view-cell">
<a> <a>
<span class="icon icon-share pull-left"></span>
Item 1 Item 1
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
<span class="icon icon-share pull-left"></span>
Item 2 Item 2
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
<span class="icon icon-share pull-left"></span>
Item 3 Item 3
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
@ -378,19 +381,19 @@ layout: default
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li> <li class="table-view-cell">
<a> <a>
Item 1 Item 1
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
Item 2 Item 2
<span class="chevron"></span> <span class="chevron"></span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
Item 3 Item 3
<span class="chevron"></span> <span class="chevron"></span>
@ -406,17 +409,17 @@ layout: default
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li>Item 1 <span class="badge">4</span></li> <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
<li>Item 2 <span class="badge">1</span></li> <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
<li>Item 3 <span class="badge">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>Item 1 <span class="badge">4</span></li> <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
<li>Item 2 <span class="badge">1</span></li> <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
<li>Item 3 <span class="badge">5</span></li> <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -427,21 +430,21 @@ layout: default
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li> <li class="table-view-cell">
<a> <a>
Item 1 Item 1
<span class="chevron"></span> <span class="chevron"></span>
<span class="badge">4</span> <span class="badge">4</span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
Item 2 Item 2
<span class="chevron"></span> <span class="chevron"></span>
<span class="badge">1</span> <span class="badge">1</span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
Item 3 Item 3
<span class="chevron"></span> <span class="chevron"></span>
@ -453,21 +456,21 @@ layout: default
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li> <li class="table-view-cell">
<a> <a>
Item 1 Item 1
<span class="chevron"></span> <span class="chevron"></span>
<span class="badge">4</span> <span class="badge">4</span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
Item 2 Item 2
<span class="chevron"></span> <span class="chevron"></span>
<span class="badge">1</span> <span class="badge">1</span>
</a> </a>
</li> </li>
<li> <li class="table-view-cell">
<a> <a>
Item 3 Item 3
<span class="chevron"></span> <span class="chevron"></span>
@ -484,19 +487,19 @@ layout: default
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li>Item 1 <a class="button">Button</a></li> <li class="table-view-cell">Item 1 <a class="button">Button</a></li>
<li>Item 2 <a class="button-primary">Button</a></li> <li class="table-view-cell">Item 2 <a class="button-primary">Button</a></li>
<li>Item 3 <a class="button-positive">Button</a></li> <li class="table-view-cell">Item 3 <a class="button-positive">Button</a></li>
<li>Item 4 <a class="button-negative">Button</a></li> <li class="table-view-cell">Item 4 <a class="button-negative">Button</a></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li>Item 1 <a class="button">Button</a></li> <li class="table-view-cell">Item 1 <a class="button">Button</a></li>
<li>Item 2 <a class="button-primary">Button</a></li> <li class="table-view-cell">Item 2 <a class="button-primary">Button</a></li>
<li>Item 3 <a class="button-positive">Button</a></li> <li class="table-view-cell">Item 3 <a class="button-positive">Button</a></li>
<li>Item 4 <a class="button-negative">Button</a></li> <li class="table-view-cell">Item 4 <a class="button-negative">Button</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -507,19 +510,19 @@ layout: default
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li> <li class="table-view-cell">
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 class="table-view-cell">
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 class="table-view-cell">
Item 3 Item 3
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
@ -530,19 +533,19 @@ layout: default
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li> <li class="table-view-cell">
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 class="table-view-cell">
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 class="table-view-cell">
Item 3 Item 3
<div class="toggle"> <div class="toggle">
<div class="toggle-handle"></div> <div class="toggle-handle"></div>
@ -558,21 +561,21 @@ layout: default
<div class="component-example"> <div class="component-example">
<ul class="table-view inset"> <ul class="table-view inset">
<li>Item 1</li> <li class="table-view-cell">Item 1</li>
<li>Item 2</li> <li class="table-view-cell">Item 2</li>
<li class="table-view-divider">Divider</li> <li class="table-view-cell table-view-divider">Divider</li>
<li>Item 3</li> <li class="table-view-cell">Item 3</li>
<li>Item 4</li> <li class="table-view-cell">Item 4</li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="table-view inset"> <ul class="table-view inset">
<li>Item 1</li> <li class="table-view-cell">Item 1</li>
<li>Item 2</li> <li class="table-view-cell">Item 2</li>
<li class="table-view-divider">Divider</li> <li class="table-view-cell table-view-divider">Divider</li>
<li>Item 3</li> <li class="table-view-cell">Item 3</li>
<li>Item 4</li> <li class="table-view-cell">Item 4</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -670,13 +673,13 @@ layout: default
</li> </li>
</ul> </ul>
<ul class="inset table-view"> <ul class="inset table-view">
<li id="item1mobile" class="segmented-controller-item selected"> <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1 Item 1
</li> </li>
<li id="item2mobile" class="segmented-controller-item"> <li id="item2mobile" class="table-view-cell segmented-controller-item">
Item 2 Item 2
</li> </li>
<li id="item3mobile" class="segmented-controller-item"> <li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3 Item 3
</li> </li>
</ul> </ul>
@ -695,13 +698,13 @@ layout: default
</li> </li>
</ul> </ul>
<ul class="inset table-view"> <ul class="inset table-view">
<li id="item1mobile" class="segmented-controller-item selected"> <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
Item 1 Item 1
</li> </li>
<li id="item2mobile" class="segmented-controller-item"> <li id="item2mobile" class="table-view-cell segmented-controller-item">
Item 2 Item 2
</li> </li>
<li id="item3mobile" class="segmented-controller-item"> <li id="item3mobile" class="table-view-cell segmented-controller-item">
Item 3 Item 3
</li> </li>
</ul> </ul>
@ -877,14 +880,14 @@ document
</a> </a>
</header> </header>
<ul class="table-view"> <ul class="table-view">
<li>Item1</li> <li class="table-view-cell">Item1</li>
<li>Item2</li> <li class="table-view-cell">Item2</li>
<li>Item3</li> <li class="table-view-cell">Item3</li>
<li>Item4</li> <li class="table-view-cell">Item4</li>
<li>Item5</li> <li class="table-view-cell">Item5</li>
<li>Item6</li> <li class="table-view-cell">Item6</li>
<li>Item7</li> <li class="table-view-cell">Item7</li>
<li>Item8</li> <li class="table-view-cell">Item8</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -901,14 +904,14 @@ document
</a> </a>
</header> </header>
<ul class="table-view"> <ul class="table-view">
<li>Item1</li> <li class="table-view-cell">Item1</li>
<li>Item2</li> <li class="table-view-cell">Item2</li>
<li>Item3</li> <li class="table-view-cell">Item3</li>
<li>Item4</li> <li class="table-view-cell">Item4</li>
<li>Item5</li> <li class="table-view-cell">Item5</li>
<li>Item6</li> <li class="table-view-cell">Item6</li>
<li>Item7</li> <li class="table-view-cell">Item7</li>
<li>Item8</li> <li class="table-view-cell">Item8</li>
</ul> </ul>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -1042,7 +1045,7 @@ document
</header> </header>
<div class="content"> <div class="content">
<ul class="table-view"> <ul class="table-view">
<li> <li class="table-view-cell">
<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
</a> </a>
@ -1058,7 +1061,7 @@ document
</header> </header>
<div class="content"> <div class="content">
<ul class="table-view"> <ul class="table-view">
<li> <li class="table-view-cell">
<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
</a> </a>

10
lib/sass/table-views.scss
Unescape View File

@ -121,16 +121,18 @@
// -------------------------------------------------- // --------------------------------------------------
.table-view-indented .table-view-cell { .table-view-indented .table-view-cell {
padding-left: 60px; padding-left: 59px;
background-position-x: 60px; // Make room for your left aligned media/icons. background-position-x: 59px; // Make room for your left aligned media/icons.
> a:not([class*="button"]) { > a:not([class*="button"]) {
margin-left: -60px; margin-left: -59px;
} }
> .pull-left, > .pull-left,
> a:not([class*="button"]) .pull-left { > a:not([class*="button"]) .pull-left {
margin-right: 15px; position: absolute;
left: 15px;
z-index: 1;
} }
} }

Write Preview
Loading…
Cancel
Save