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

updating all button examples to use the button element.

pull/366/head
connors 11 years ago
parent
c6c7a958e0
commit
19666f6e93
1 changed files with 106 additions and 106 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. 212
      docs/components.html

212
docs/components.html
Unescape View File

@ -61,24 +61,24 @@ title: Components · Ratchet
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<a class="btn pull-left">
<button class="btn pull-left">
Left
</a>
<a class="btn pull-right">
</button>
<button class="btn pull-right">
Right
</a>
</button>
<h1 class="title">Title</h1>
</header>
</div>
{% highlight html %}
<header class="bar bar-nav">
<a class="btn pull-left">
<button class="btn pull-left">
Left
</a>
<a class="btn pull-right">
</button>
<button class="btn pull-right">
Right
</a>
</button>
<h1 class="title">Title</h1>
</header>
{% endhighlight %}
@ -113,28 +113,28 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left">
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav"></span>
Left
</a>
<a class="btn btn-link btn-nav pull-right">
</button>
<button class="btn btn-link btn-nav pull-right">
Right
<span class="icon icon-right-nav"></span>
</a>
</button>
<h1 class="title">Title</h1>
</header>
</div>
{% highlight html %}
<header class="bar bar-nav">
<a class="btn btn-link btn-nav pull-left">
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav"></span>
Left
</a>
<a class="btn btn-link btn-nav pull-right">
</button>
<button class="btn btn-link btn-nav pull-right">
Right
<span class="icon icon-right-nav"></span>
</a>
</button>
<h1 class="title">Title</h1>
</header>
{% endhighlight %}
@ -147,10 +147,10 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed">
<header class="bar bar-nav">
<a class="btn pull-left">
<button class="btn pull-left">
Left
</a>
<a class="btn pull-right">
</button>
<button class="btn pull-right">
Right
</a>
<div class="segmented-control">
@ -163,12 +163,12 @@ title: Components &middot; Ratchet
{% highlight html %}
<header class="bar bar-nav">
<a class="btn pull-left">
<button class="btn pull-left">
Left
</a>
<a class="btn pull-right">
<button class="btn pull-right">
Right
</a>
</button>
<div class="segmented-control">
<a class="control-item active">One</a>
<a class="control-item">Two</a>
@ -287,7 +287,7 @@ title: Components &middot; Ratchet
<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary">
<a class="btn btn-block">Block level button</a>
<button class="btn btn-block">Block level button</button>
</div>
</div>
@ -303,12 +303,12 @@ title: Components &middot; Ratchet
<!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary">
<a class="btn btn-block">Block level button</a>
<button class="btn btn-block">Block level button</button>
</div>
<!-- Block button in standard bar fixed above the footer -->
<div class="bar bar-standard bar-footer-secondary">
<a class="btn btn-block">Block level button</a>
<button class="btn btn-block">Block level button</button>
</div>
<!-- Icons in standard bar fixed to the bottom of the screen -->
@ -639,19 +639,19 @@ title: Components &middot; Ratchet
<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 <button class="btn">Button</button></li>
<li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
<li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
<li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></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 <button class="btn">Button</button></li>
<li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
<li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
<li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
</ul>
{% endhighlight %}
@ -744,29 +744,29 @@ title: Components &middot; Ratchet
<p class="component-description">Buttons come in many flavors and should be used for user actions.</p>
<div class="component-example">
<a class="btn">Button</a>
<a class="btn btn-primary">Button</a>
<a class="btn btn-positive">Button</a>
<a class="btn btn-negative">Button</a>
<a class="btn btn-link">Button</a>
<a class="btn btn-outlined">Button</a>
<a class="btn btn-primary btn-outlined">Button</a>
<a class="btn btn-positive btn-outlined">Button</a>
<a class="btn btn-negative btn-outlined">Button</a>
<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-positive">Button</button>
<button class="btn btn-negative">Button</button>
<button class="btn btn-link">Button</button>
<button class="btn btn-outlined">Button</a>
<button class="btn btn-primary btn-outlined">Button</button>
<button class="btn btn-positive btn-outlined">Button</button>
<button class="btn btn-negative btn-outlined">Button</button>
</div>
{% highlight html %}
<a class="btn">Button</a>
<a class="btn btn-primary">Button</a>
<a class="btn btn-positive">Button</a>
<a class="btn btn-negative">Button</a>
<a class="btn btn-link">Button</a>
<a class="btn btn-outlined">Button</a>
<a class="btn btn-primary btn-outlined">Button</a>
<a class="btn btn-positive btn-outlined">Button</a>
<a class="btn btn-negative btn-outlined">Button</a>
<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-positive">Button</button>
<button class="btn btn-negative">Button</button>
<button class="btn btn-link">Button</button>
<button class="btn btn-outlined">Button</a>
<button class="btn btn-primary btn-outlined">Button</button>
<button class="btn btn-positive btn-outlined">Button</button>
<button class="btn btn-negative btn-outlined">Button</button>
{% endhighlight %}
</article>
@ -777,49 +777,49 @@ title: Components &middot; Ratchet
<p class="component-description">Ratchicons work inside buttons too.</p>
<div class="component-example">
<a class="btn">
<button class="btn">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-primary">
</button>
<button class="btn btn-primary">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-positive">
</button>
<button class="btn btn-positive">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-negative">
</button>
<button class="btn btn-negative">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-link">
</button>
<button class="btn btn-link">
<span class="icon icon-left"></span>
Button
</a>
</button>
</div>
{% highlight html %}
<a class="btn">
<button class="btn">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-primary">
</button>
<button class="btn btn-primary">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-positive">
</button>
<button class="btn btn-positive">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-negative">
</button>
<button class="btn btn-negative">
<span class="icon icon-search"></span>
Button
</a>
<a class="btn btn-link">
</button>
<button class="btn btn-link">
<span class="icon icon-left"></span>
Button
</a>
</button>
{% endhighlight %}
</article>
@ -828,22 +828,22 @@ title: Components &middot; Ratchet
<h3 class="component-title">Buttons with badges</h3>
<div class="component-example">
<a class="btn">Badge button <span class="badge">1</span></a>
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
<button class="btn">Badge button <span class="badge">1</span></button>
<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
</div>
{% highlight html %}
<a class="btn">Badge button <span class="badge">1</span></a>
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
<a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a>
<a class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></a>
<a class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></a>
<a class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></a>
<button class="btn">Badge button <span class="badge">1</span></button>
<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
<button class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></button>
<button class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></button>
<button class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></button>
<button class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></button>
{% endhighlight %}
</article>
@ -852,27 +852,27 @@ title: Components &middot; Ratchet
<h3 class="component-title">Block buttons</h3>
<div class="component-example">
<a class="btn btn-block">Block button</a>
<a class="btn btn-primary btn-block">Block button</a>
<a class="btn btn-positive btn-block">Block button</a>
<a class="btn btn-negative btn-block">Block button</a>
<a class="btn btn-block btn-outlined">Block button</a>
<a class="btn btn-primary btn-block btn-outlined">Block button</a>
<a class="btn btn-positive btn-block btn-outlined">Block button</a>
<a class="btn btn-negative btn-block btn-outlined">Block button</a>
<button class="btn btn-block">Block button</button>
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-positive btn-block">Block button</button>
<button class="btn btn-negative btn-block">Block button</button>
<button class="btn btn-block btn-outlined">Block button</button>
<button class="btn btn-primary btn-block btn-outlined">Block button</button>
<button class="btn btn-positive btn-block btn-outlined">Block button</button>
<button class="btn btn-negative btn-block btn-outlined">Block button</button>
</div>
{% highlight html %}
<a class="btn btn-block">Block button</a>
<a class="btn btn-primary btn-block">Block button</a>
<a class="btn btn-positive btn-block">Block button</a>
<a class="btn btn-negative btn-block">Block button</a>
<a class="btn btn-block btn-outlined">Block button</a>
<a class="btn btn-primary btn-block btn-outlined">Block button</a>
<a class="btn btn-positive btn-block btn-outlined">Block button</a>
<a class="btn btn-negative btn-block btn-outlined">Block button</a>
<button class="btn btn-block">Block button</button>
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-positive btn-block">Block button</button>
<button class="btn btn-negative btn-block">Block button</button>
<button class="btn btn-block btn-outlined">Block button</button>
<button class="btn btn-primary btn-block btn-outlined">Block button</button>
<button class="btn btn-positive btn-block btn-outlined">Block button</button>
<button class="btn btn-negative btn-block btn-outlined">Block button</button>
{% endhighlight %}
</article>
@ -961,7 +961,7 @@ title: Components &middot; Ratchet
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="btn btn-positive btn-block">Choose existing</a>
<button class="btn btn-positive btn-block">Choose existing</button>
</form>
</div>
@ -970,7 +970,7 @@ title: Components &middot; Ratchet
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search">
<textarea rows="5"></textarea>
<a class="btn btn-positive btn-block">Choose existing</a>
<button class="btn btn-positive btn-block">Choose existing</button>
</form>
{% endhighlight %}

Write Preview
Loading…
Cancel
Save