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

Merge pull request #366 from twbs/buttons 

Use <button> in the button examples
pull/367/head
Connor Sears 11 years ago
parent
c6c7a958e0 46a863b5ce
commit
5f6b3e1956
10 changed files with 133 additions and 125 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. 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
Unescape View File

@ -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
View File

File diff suppressed because one or more lines are too long

3
docs/assets/css/docs.css
Unescape View File

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

212
docs/components.html
Unescape View File

@ -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
Unescape View File

@ -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
View File

File diff suppressed because one or more lines are too long

4
docs/examples/app-android-notes/index.html
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save