Browse Source

Merge pull request #366 from twbs/buttons

Use <button> in the button examples
pull/367/head
Connor Sears 11 years ago
parent
commit
5f6b3e1956
  1. 2
      dist/ratchet.css
  2. 2
      dist/ratchet.min.css
  3. 3
      docs/assets/css/docs.css
  4. 212
      docs/components.html
  5. 2
      docs/dist/ratchet.css
  6. 2
      docs/dist/ratchet.min.css
  7. 4
      docs/examples/app-android-notes/index.html
  8. 4
      docs/examples/app-movies/index.html
  9. 2
      sass/buttons.scss
  10. 25
      sass/docs.scss

2
dist/ratchet.css vendored

@ -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;
@ -443,6 +444,7 @@ p {
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;

2
dist/ratchet.min.css vendored

File diff suppressed because one or more lines are too long

3
docs/assets/css/docs.css

@ -838,7 +838,8 @@ code {
}
#blockButtonsInDevice .btn-block {
margin: 10px;
width: 300px;
margin: 10px auto;
}
#segmentedControlsInDevice .segmented-control {

212
docs/components.html

@ -61,24 +61,24 @@ 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>
</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 %}

2
docs/dist/ratchet.css vendored

@ -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;
@ -443,6 +444,7 @@ p {
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;

2
docs/dist/ratchet.min.css vendored

File diff suppressed because one or more lines are too long

4
docs/examples/app-android-notes/index.html

@ -152,8 +152,8 @@
</div>
</li>
</ul>
<div class="container">
<a class="btn btn-positive btn-block">Save settings</a>
<div class="content-padded">
<button class="btn btn-positive btn-block">Save settings</button>
</div>
</div>
</div>

4
docs/examples/app-movies/index.html

@ -161,8 +161,8 @@
</div>
</li>
</ul>
<div class="container">
<a class="btn btn-positive btn-block content-padded">Save settings</a>
<div class="content-padded">
<button class="btn btn-positive btn-block">Save settings</button>
</div>
</div>
</div><!-- /.modal -->

2
sass/buttons.scss

@ -13,6 +13,7 @@
color: #333;
text-align: center;
vertical-align: top;
white-space: nowrap;
cursor: pointer;
background-color: $chrome-color;
border: 1px solid #ccc;
@ -117,6 +118,7 @@
// Block level buttons (full width buttons)
.btn-block {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 10px;
font-size: 18px;

25
sass/docs.scss

@ -98,8 +98,8 @@ body {
@include transform(translateX(-50%));
// Use a thinner weight on retina
@media
(-webkit-min-device-pixel-ratio: 2),
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
font-weight: 100;
}
@ -133,10 +133,10 @@ body {
display: block;
padding: 20px 15px;
font-size: 22px;
// Use a thinner weight on retina
@media
(-webkit-min-device-pixel-ratio: 2),
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
font-weight: 100;
}
@ -393,8 +393,8 @@ body {
font-weight: 300;
// Use a thinner weight on retina
@media
(-webkit-min-device-pixel-ratio: 2),
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
font-weight: 100;
}
@ -440,14 +440,14 @@ body {
color: #777;
// Use a thinner weight on retina
@media
(-webkit-min-device-pixel-ratio: 2),
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
font-weight: 100;
}
}
// Desktop: Section headings
// Desktop: Section headings
@media screen and (min-width: 768px) {
.section-heading {
margin-top: 50px;
@ -859,7 +859,8 @@ code {
}
}
#blockButtonsInDevice .btn-block {
margin: 10px;
width: 300px;
margin: 10px auto;
}
//Segmented Control
@ -1143,7 +1144,7 @@ hr {
.device {
background-position-x: -395px;
.device-content {
background-color: #efeff4;
}

Loading…
Cancel
Save