Skip to content

Commit

Permalink
Merge pull request #366 from twbs/buttons
Browse files Browse the repository at this point in the history 
Use <button> in the button examples
  • Loading branch information
@connors
connors committed Mar 2, 2014
2 parents c6c7a95 + 46a863b commit 5f6b3e1
Show file tree
Hide file tree
Showing 10 changed files with 133 additions and 125 deletions.
2 changes: 2 additions & 0 deletions dist/ratchet.css
View file
Expand Up @@ -367,6 +367,7 @@ p {
color: #333;
text-align: center;
vertical-align: top;
white-space: nowrap;
cursor: pointer;
background-color: white;
border: 1px solid #ccc;
Expand Down Expand Up @@ -443,6 +444,7 @@ p {

.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;
Expand Down
2 changes: 1 addition & 1 deletion dist/ratchet.min.css
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion docs/assets/css/docs.css
View file
Expand Up @@ -838,7 +838,8 @@ code {
}

#blockButtonsInDevice .btn-block {
margin: 10px;
width: 300px;
margin: 10px auto;
}

#segmentedControlsInDevice .segmented-control {
Expand Down
212 changes: 106 additions & 106 deletions docs/components.html
View file
Expand Up @@ -61,24 +61,24 @@ <h3 class="component-title">Title bar with buttons</h3>

<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 %}
Expand Down Expand Up @@ -113,28 +113,28 @@ <h3 class="component-title">Title bar with link buttons and icons</h3>

<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 %}
Expand All @@ -147,10 +147,10 @@ <h3 class="component-title">Title bar with segmented control</h3>

<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">
Expand All @@ -163,12 +163,12 @@ <h3 class="component-title">Title bar with segmented control</h3>

{% 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>
Expand Down Expand Up @@ -287,7 +287,7 @@ <h3 class="component-title">Standard bars</h3>

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

Expand All @@ -303,12 +303,12 @@ <h3 class="component-title">Standard bars</h3>

<!-- 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 -->
Expand Down Expand Up @@ -639,19 +639,19 @@ <h3 class="component-title">Table view with buttons</h3>

<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 %}

Expand Down Expand Up @@ -744,29 +744,29 @@ <h3 class="component-title">Buttons</h3>
<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>
Expand All @@ -777,49 +777,49 @@ <h3 class="component-title">Buttons with icons</h3>
<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>
Expand All @@ -828,22 +828,22 @@ <h3 class="component-title">Buttons with icons</h3>
<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>
Expand All @@ -852,27 +852,27 @@ <h3 class="component-title">Buttons with badges</h3>
<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>
Expand Down Expand Up @@ -961,7 +961,7 @@ <h3 class="component-title">Forms</h3>
<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>

Expand All @@ -970,7 +970,7 @@ <h3 class="component-title">Forms</h3>
<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 %}

Expand Down

0 comments on commit 5f6b3e1

Please sign in to comment.