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
Unified 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; color: #333;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
white-space: nowrap;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -443,6 +444,7 @@ p {
.btn-block { .btn-block {
display: block; display: block;
width: 100%;
padding: 15px 0; padding: 15px 0;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; 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 { #blockButtonsInDevice .btn-block {
margin: 10px; width: 300px;
margin: 10px auto;
} }
#segmentedControlsInDevice .segmented-control { #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"> <div class="component-example component-example-fullbleed">
<header class="bar bar-nav"> <header class="bar bar-nav">
<a class="btn pull-left"> <button class="btn pull-left">
Left Left
</a> </button>
<a class="btn pull-right"> <button class="btn pull-right">
Right Right
</a> </button>
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar bar-nav"> <header class="bar bar-nav">
<a class="btn pull-left"> <button class="btn pull-left">
Left Left
</a> </button>
<a class="btn pull-right"> <button class="btn pull-right">
Right Right
</a> </button>
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -113,28 +113,28 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar bar-nav"> <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> <span class="icon icon-left-nav"></span>
Left Left
</a> </button>
<a class="btn btn-link btn-nav pull-right"> <button class="btn btn-link btn-nav pull-right">
Right Right
<span class="icon icon-right-nav"></span> <span class="icon icon-right-nav"></span>
</a> </button>
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
</div> </div>
{% highlight html %} {% highlight html %}
<header class="bar bar-nav"> <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> <span class="icon icon-left-nav"></span>
Left Left
</a> </button>
<a class="btn btn-link btn-nav pull-right"> <button class="btn btn-link btn-nav pull-right">
Right Right
<span class="icon icon-right-nav"></span> <span class="icon icon-right-nav"></span>
</a> </button>
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
</header> </header>
{% endhighlight %} {% endhighlight %}
@ -147,10 +147,10 @@ title: Components &middot; Ratchet
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar bar-nav"> <header class="bar bar-nav">
<a class="btn pull-left"> <button class="btn pull-left">
Left Left
</a> </button>
<a class="btn pull-right"> <button class="btn pull-right">
Right Right
</a> </a>
<div class="segmented-control"> <div class="segmented-control">
@ -163,12 +163,12 @@ title: Components &middot; Ratchet
{% highlight html %} {% highlight html %}
<header class="bar bar-nav"> <header class="bar bar-nav">
<a class="btn pull-left"> <button class="btn pull-left">
Left Left
</a> </a>
<a class="btn pull-right"> <button class="btn pull-right">
Right Right
</a> </button>
<div class="segmented-control"> <div class="segmented-control">
<a class="control-item active">One</a> <a class="control-item active">One</a>
<a class="control-item">Two</a> <a class="control-item">Two</a>
@ -287,7 +287,7 @@ title: Components &middot; Ratchet
<!-- Block button in standard bar fixed below top bar --> <!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary"> <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>
</div> </div>
@ -303,12 +303,12 @@ title: Components &middot; Ratchet
<!-- Block button in standard bar fixed below top bar --> <!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary"> <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>
<!-- Block button in standard bar fixed above the footer --> <!-- Block button in standard bar fixed above the footer -->
<div class="bar bar-standard bar-footer-secondary"> <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> </div>
<!-- Icons in standard bar fixed to the bottom of the screen --> <!-- 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"> <div class="component-example component-example-fullbleed">
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell">Item 1 <a class="btn">Button</a></li> <li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
<li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li> <li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
<li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li> <li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
<li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li> <li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
</ul> </ul>
</div> </div>
{% highlight html %} {% highlight html %}
<ul class="table-view"> <ul class="table-view">
<li class="table-view-cell">Item 1 <a class="btn">Button</a></li> <li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
<li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li> <li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
<li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li> <li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
<li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li> <li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
</ul> </ul>
{% endhighlight %} {% 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> <p class="component-description">Buttons come in many flavors and should be used for user actions.</p>
<div class="component-example"> <div class="component-example">
<a class="btn">Button</a> <button class="btn">Button</button>
<a class="btn btn-primary">Button</a> <button class="btn btn-primary">Button</button>
<a class="btn btn-positive">Button</a> <button class="btn btn-positive">Button</button>
<a class="btn btn-negative">Button</a> <button class="btn btn-negative">Button</button>
<a class="btn btn-link">Button</a> <button class="btn btn-link">Button</button>
<a class="btn btn-outlined">Button</a> <button class="btn btn-outlined">Button</a>
<a class="btn btn-primary btn-outlined">Button</a> <button class="btn btn-primary btn-outlined">Button</button>
<a class="btn btn-positive btn-outlined">Button</a> <button class="btn btn-positive btn-outlined">Button</button>
<a class="btn btn-negative btn-outlined">Button</a> <button class="btn btn-negative btn-outlined">Button</button>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="btn">Button</a> <button class="btn">Button</button>
<a class="btn btn-primary">Button</a> <button class="btn btn-primary">Button</button>
<a class="btn btn-positive">Button</a> <button class="btn btn-positive">Button</button>
<a class="btn btn-negative">Button</a> <button class="btn btn-negative">Button</button>
<a class="btn btn-link">Button</a> <button class="btn btn-link">Button</button>
<a class="btn btn-outlined">Button</a> <button class="btn btn-outlined">Button</a>
<a class="btn btn-primary btn-outlined">Button</a> <button class="btn btn-primary btn-outlined">Button</button>
<a class="btn btn-positive btn-outlined">Button</a> <button class="btn btn-positive btn-outlined">Button</button>
<a class="btn btn-negative btn-outlined">Button</a> <button class="btn btn-negative btn-outlined">Button</button>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -777,49 +777,49 @@ title: Components &middot; Ratchet
<p class="component-description">Ratchicons work inside buttons too.</p> <p class="component-description">Ratchicons work inside buttons too.</p>
<div class="component-example"> <div class="component-example">
<a class="btn"> <button class="btn">
<span class="icon icon-search"></span> <span class="icon icon-search"></span>
Button Button
</a> </button>
<a class="btn btn-primary"> <button class="btn btn-primary">
<span class="icon icon-search"></span> <span class="icon icon-search"></span>
Button Button
</a> </button>
<a class="btn btn-positive"> <button class="btn btn-positive">
<span class="icon icon-search"></span> <span class="icon icon-search"></span>
Button Button
</a> </button>
<a class="btn btn-negative"> <button class="btn btn-negative">
<span class="icon icon-search"></span> <span class="icon icon-search"></span>
Button Button
</a> </button>
<a class="btn btn-link"> <button class="btn btn-link">
<span class="icon icon-left"></span> <span class="icon icon-left"></span>
Button Button
</a> </button>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="btn"> <button class="btn">
<span class="icon icon-search"></span> <span class="icon icon-search"></span>
Button Button
</a> </button>
<a class="btn btn-primary"> <button class="btn btn-primary">
<span class="icon icon-search"></span> <span class="icon icon-search"></span>
Button Button
</a> </button>
<a class="btn btn-positive"> <button class="btn btn-positive">
<span class="icon icon-search"></span> <span class="icon icon-search"></span>
Button Button
</a> </button>
<a class="btn btn-negative"> <button class="btn btn-negative">
<span class="icon icon-search"></span> <span class="icon icon-search"></span>
Button Button
</a> </button>
<a class="btn btn-link"> <button class="btn btn-link">
<span class="icon icon-left"></span> <span class="icon icon-left"></span>
Button Button
</a> </button>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -828,22 +828,22 @@ title: Components &middot; Ratchet
<h3 class="component-title">Buttons with badges</h3> <h3 class="component-title">Buttons with badges</h3>
<div class="component-example"> <div class="component-example">
<a class="btn">Badge button <span class="badge">1</span></a> <button class="btn">Badge button <span class="badge">1</span></button>
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a> <button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a> <button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a> <button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="btn">Badge button <span class="badge">1</span></a> <button class="btn">Badge button <span class="badge">1</span></button>
<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a> <button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a> <button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a> <button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
<a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a> <button class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></button>
<a class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></a> <button class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></button>
<a class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></a> <button class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></button>
<a class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></a> <button class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></button>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -852,27 +852,27 @@ title: Components &middot; Ratchet
<h3 class="component-title">Block buttons</h3> <h3 class="component-title">Block buttons</h3>
<div class="component-example"> <div class="component-example">
<a class="btn btn-block">Block button</a> <button class="btn btn-block">Block button</button>
<a class="btn btn-primary btn-block">Block button</a> <button class="btn btn-primary btn-block">Block button</button>
<a class="btn btn-positive btn-block">Block button</a> <button class="btn btn-positive btn-block">Block button</button>
<a class="btn btn-negative btn-block">Block button</a> <button class="btn btn-negative btn-block">Block button</button>
<a class="btn btn-block btn-outlined">Block button</a> <button class="btn btn-block btn-outlined">Block button</button>
<a class="btn btn-primary btn-block btn-outlined">Block button</a> <button class="btn btn-primary btn-block btn-outlined">Block button</button>
<a class="btn btn-positive btn-block btn-outlined">Block button</a> <button class="btn btn-positive btn-block btn-outlined">Block button</button>
<a class="btn btn-negative btn-block btn-outlined">Block button</a> <button class="btn btn-negative btn-block btn-outlined">Block button</button>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="btn btn-block">Block button</a> <button class="btn btn-block">Block button</button>
<a class="btn btn-primary btn-block">Block button</a> <button class="btn btn-primary btn-block">Block button</button>
<a class="btn btn-positive btn-block">Block button</a> <button class="btn btn-positive btn-block">Block button</button>
<a class="btn btn-negative btn-block">Block button</a> <button class="btn btn-negative btn-block">Block button</button>
<a class="btn btn-block btn-outlined">Block button</a> <button class="btn btn-block btn-outlined">Block button</button>
<a class="btn btn-primary btn-block btn-outlined">Block button</a> <button class="btn btn-primary btn-block btn-outlined">Block button</button>
<a class="btn btn-positive btn-block btn-outlined">Block button</a> <button class="btn btn-positive btn-block btn-outlined">Block button</button>
<a class="btn btn-negative btn-block btn-outlined">Block button</a> <button class="btn btn-negative btn-block btn-outlined">Block button</button>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -961,7 +961,7 @@ title: Components &middot; Ratchet
<input type="text" placeholder="Full name"> <input type="text" placeholder="Full name">
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
<textarea rows="5"></textarea> <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> </form>
</div> </div>
@ -970,7 +970,7 @@ title: Components &middot; Ratchet
<input type="text" placeholder="Full name"> <input type="text" placeholder="Full name">
<input type="search" placeholder="Search"> <input type="search" placeholder="Search">
<textarea rows="5"></textarea> <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> </form>
{% endhighlight %} {% endhighlight %}

2
docs/dist/ratchet.css vendored
Unescape View File

@ -367,6 +367,7 @@ p {
color: #333; color: #333;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
white-space: nowrap;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -443,6 +444,7 @@ p {
.btn-block { .btn-block {
display: block; display: block;
width: 100%;
padding: 15px 0; padding: 15px 0;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; 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> </div>
</li> </li>
</ul> </ul>
<div class="container"> <div class="content-padded">
<a class="btn btn-positive btn-block">Save settings</a> <button class="btn btn-positive btn-block">Save settings</button>
</div> </div>
</div> </div>
</div> </div>

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

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

2
sass/buttons.scss
Unescape View File

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

25
sass/docs.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save