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

adding more media examples

pull/253/head
connors 11 years ago
parent
747f542fb9
commit
74a8e54e75
4 changed files with 72 additions and 18 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. 79
      components.html
  2. 4
      dist/ratchet.css
  3. 6
      lib/sass/table-views.scss
  4. 1
      lib/sass/theme-ios.scss

79
components.html
Unescape View File

@ -347,7 +347,7 @@ quis nostrud exercitation ullamco.</p>
<article class="component">
<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 item is linked.</p>
<p class="component-description">Chevrons should be used to indicate that the item is linked.</p>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
@ -464,7 +464,7 @@ quis nostrud exercitation ullamco.</p>
</article>
<article class="component">
<h3 class="component-title">Table view with media</h3>
<h3 class="component-title">Table view with media (images)</h3>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
@ -473,7 +473,7 @@ quis nostrud exercitation ullamco.</p>
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
@ -482,7 +482,7 @@ quis nostrud exercitation ullamco.</p>
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
@ -491,7 +491,7 @@ quis nostrud exercitation ullamco.</p>
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
@ -505,7 +505,7 @@ quis nostrud exercitation ullamco.</p>
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
@ -514,7 +514,7 @@ quis nostrud exercitation ullamco.</p>
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
@ -523,7 +523,70 @@ quis nostrud exercitation ullamco.</p>
<img class="media-object pull-left" src="http://placehold.it/42x42">
<div class="media-body">
Item 1
<p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
</div>
</a>
</li>
</ul>
{% endhighlight %}
</article>
<article class="component">
<h3 class="component-title">Table view with media (icons)</h3>
<div class="component-example component-example-fullbleed">
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 1
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 2
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 3
</div>
</a>
</li>
</ul>
</div>
{% highlight html %}
<ul class="table-view">
<li class="table-view-cell media">
<a class="push-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 1
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 2
</div>
</a>
</li>
<li class="table-view-cell media">
<a class="push-right">
<span class="media-object pull-left icon icon-pages"></span>
<div class="media-body">
Item 3
</div>
</a>
</li>

4
dist/ratchet.css vendored
Unescape View File

@ -771,10 +771,6 @@ input[type="button"] {
right: 35px;
}
.table-view .icon {
font-size: inherit;
}
input,
textarea,
button,

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

@ -107,9 +107,3 @@
}
}
}
// Table-views with Ratchicons
// --------------------------------------------------
.table-view .icon {
font-size: inherit
}

1
lib/sass/theme-ios.scss
Unescape View File

@ -46,6 +46,7 @@ a {
background-color: #efeff4;
}
// Typography
// --------------------------------------------------

Write Preview
Loading…
Cancel
Save