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

use .btn

pull/249/head
connors 11 years ago
parent
6088ca23e6
commit
e6709e519c
16 changed files with 313 additions and 350 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. 144
      components.html
  2. 40
      dist/android-theme.css
  3. 34
      dist/ios-theme.css
  4. 40
      dist/ratchet-theme.css
  5. 80
      dist/ratchet.css
  6. 105
      docs-assets/css/docs.css
  7. 22
      examples/app-default/choose-theater.html
  8. 2
      examples/app-default/css/app.css
  9. 4
      index.html
  10. 19
      lib/sass/badges.scss
  11. 38
      lib/sass/buttons.scss
  12. 22
      lib/sass/docs.scss
  13. 10
      lib/sass/table-views.scss
  14. 30
      lib/sass/theme-android.scss
  15. 45
      lib/sass/theme-classic.scss
  16. 26
      lib/sass/theme-ios.scss

144
components.html
Unescape View File

@ -77,10 +77,10 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<a class="button pull-left"> <a class="btn pull-left">
Left Left
</a> </a>
<a class="button pull-right"> <a class="btn pull-right">
Right Right
</a> </a>
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
@ -89,10 +89,10 @@ base_url: "../"
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button pull-left"> <a class="btn pull-left">
Left Left
</a> </a>
<a class="button pull-right"> <a class="btn pull-right">
Right Right
</a> </a>
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
@ -105,10 +105,10 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<a class="button-link pull-left"> <a class="btn btn-link pull-left">
Previous Previous
</a> </a>
<a class="button-link pull-right"> <a class="btn btn-link pull-right">
Next Next
</a> </a>
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
@ -117,10 +117,10 @@ base_url: "../"
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button-link pull-left"> <a class="btn btn-link pull-left">
Previous Previous
</a> </a>
<a class="button-link pull-right"> <a class="btn btn-link pull-right">
Next Next
</a> </a>
<h1 class="title">Title</h1> <h1 class="title">Title</h1>
@ -135,10 +135,10 @@ base_url: "../"
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<header class="bar-nav"> <header class="bar-nav">
<a class="button pull-left"> <a class="btn pull-left">
Left Left
</a> </a>
<a class="button pull-right"> <a class="btn pull-right">
Right Right
</a> </a>
<ul class="segmented-controller"> <ul class="segmented-controller">
@ -157,10 +157,10 @@ base_url: "../"
{% highlight html %} {% highlight html %}
<header class="bar-nav"> <header class="bar-nav">
<a class="button pull-left"> <a class="btn pull-left">
Left Left
</a> </a>
<a class="button pull-right"> <a class="btn pull-right">
Right Right
</a> </a>
<ul class="segmented-controller"> <ul class="segmented-controller">
@ -258,7 +258,7 @@ base_url: "../"
<!-- Block button in standard bar fixed below top bar --> <!-- Block button in standard bar fixed below top bar -->
<div class="bar-standard bar-header-secondary"> <div class="bar-standard bar-header-secondary">
<a class="button-block">Block level button</a> <a class="btn btn-block">Block level button</a>
</div> </div>
</div> </div>
@ -280,7 +280,7 @@ base_url: "../"
<!-- Block button in standard bar fixed below top bar --> <!-- Block button in standard bar fixed below top bar -->
<div class="bar-standard bar-header-secondary"> <div class="bar-standard bar-header-secondary">
<a class="button-block">Block level button</a> <a class="btn btn-block">Block level button</a>
</div> </div>
{% endhighlight %} {% endhighlight %}
@ -446,19 +446,19 @@ base_url: "../"
<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="button">Button</a></li> <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
<li class="table-view-cell">Item 2 <a class="button-primary">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="button-positive">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="button-negative">Button</a></li> <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></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="button">Button</a></li> <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
<li class="table-view-cell">Item 2 <a class="button-primary">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="button-positive">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="button-negative">Button</a></li> <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
@ -550,19 +550,19 @@ base_url: "../"
<p class="component-description">Buttons come in four flavors and should be used for user actions.</p> <p class="component-description">Buttons come in four flavors and should be used for user actions.</p>
<div class="component-example"> <div class="component-example">
<a class="button">Button</a> <a class="btn">Button</a>
<a class="button-primary">Button</a> <a class="btn btn-primary">Button</a>
<a class="button-positive">Button</a> <a class="btn btn-positive">Button</a>
<a class="button-negative">Button</a> <a class="btn btn-negative">Button</a>
<a class="button-link">Button</a> <a class="btn btn-link">Button</a>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="button">Button</a> <a class="btn">Button</a>
<a class="button-primary">Button</a> <a class="btn btn-primary">Button</a>
<a class="button-positive">Button</a> <a class="btn btn-positive">Button</a>
<a class="button-negative">Button</a> <a class="btn btn-negative">Button</a>
<a class="button-link">Button</a> <a class="btn btn-link">Button</a>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -571,22 +571,22 @@ base_url: "../"
<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="button">Badge button <span class="badge">1</span></a> <a class="btn">Badge button <span class="badge">1</span></a>
<a class="button-primary">Badge button <span class="badge-primary">1</span></a> <a class="btn btn-primary">Badge button <span class="badge-primary">1</span></a>
<a class="button-positive">Badge button <span class="badge-positive">1</span></a> <a class="btn btn-positive">Badge button <span class="badge-positive">1</span></a>
<a class="button-negative">Badge button <span class="badge-negative">1</span></a> <a class="btn btn-negative">Badge button <span class="badge-negative">1</span></a>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="button">Badge button <span class="badge">1</span></a> <a class="btn">Badge button <span class="badge">1</span></a>
<a class="button-primary">Badge button <span class="badge-primary">1</span></a> <a class="btn btn-primary">Badge button <span class="badge-primary">1</span></a>
<a class="button-positive">Badge button <span class="badge-positive">1</span></a> <a class="btn btn-positive">Badge button <span class="badge-positive">1</span></a>
<a class="button-negative">Badge button <span class="badge-negative">1</span></a> <a class="btn btn-negative">Badge button <span class="badge-negative">1</span></a>
<a class="button-outlined">Badge button <span class="badge badge-inverted">1</span></a> <a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a>
<a class="button-outlined button-primary">Badge button <span class="badge-primary badge-inverted">1</span></a> <a class="btn btn-outlined btn-primary">Badge button <span class="badge-primary badge-inverted">1</span></a>
<a class="button-outlined button-positive">Badge button <span class="badge-positive badge-inverted">1</span></a> <a class="btn btn-outlined btn-positive">Badge button <span class="badge-positive badge-inverted">1</span></a>
<a class="button-outlined button-negative">Badge button <span class="badge-negative badge-inverted">1</span></a> <a class="btn btn-outlined btn-negative">Badge button <span class="badge-negative badge-inverted">1</span></a>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -595,27 +595,27 @@ base_url: "../"
<h3 class="component-title">Block buttons</h3> <h3 class="component-title">Block buttons</h3>
<div class="component-example"> <div class="component-example">
<a class="button-block">Block button</a> <a class="btn btn-block">Block button</a>
<a class="button-primary button-block">Block button</a> <a class="btn btn-primary btn-block">Block button</a>
<a class="button-positive button-block">Block button</a> <a class="btn btn-positive btn-block">Block button</a>
<a class="button-negative button-block">Block button</a> <a class="btn btn-negative btn-block">Block button</a>
<a class="button-block button-outlined">Block button</a> <a class="btn btn-block btn-outlined">Block button</a>
<a class="button-primary button-block button-outlined">Block button</a> <a class="btn btn-primary btn-block btn-outlined">Block button</a>
<a class="button-positive button-block button-outlined">Block button</a> <a class="btn btn-positive btn-block btn-outlined">Block button</a>
<a class="button-negative button-block button-outlined">Block button</a> <a class="btn btn-negative btn-block btn-outlined">Block button</a>
</div> </div>
{% highlight html %} {% highlight html %}
<a class="button-block">Block button</a> <a class="btn btn-block">Block button</a>
<a class="button-primary button-block">Block button</a> <a class="btn btn-primary btn-block">Block button</a>
<a class="button-positive button-block">Block button</a> <a class="btn btn-positive btn-block">Block button</a>
<a class="button-negative button-block">Block button</a> <a class="btn btn-negative btn-block">Block button</a>
<a class="button-block button-outlined">Block button</a> <a class="btn btn-block btn-outlined">Block button</a>
<a class="button-primary button-block button-outlined">Block button</a> <a class="btn btn-primary btn-block btn-outlined">Block button</a>
<a class="button-positive button-block button-outlined">Block button</a> <a class="btn btn-positive btn-block btn-outlined">Block button</a>
<a class="button-negative button-block button-outlined">Block button</a> <a class="btn btn-negative btn-block btn-outlined">Block button</a>
{% endhighlight %} {% endhighlight %}
</article> </article>
@ -705,7 +705,7 @@ base_url: "../"
<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="button-positive button-block">Choose existing</a> <a class="btn btn-positive btn-block">Choose existing</a>
</form> </form>
</div> </div>
@ -714,7 +714,7 @@ base_url: "../"
<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="button-positive button-block">Choose existing</a> <a class="btn btn-positive btn-block">Choose existing</a>
</form> </form>
{% endhighlight %} {% endhighlight %}
@ -823,10 +823,10 @@ document
<div class="component-example"> <div class="component-example">
<div id="popover" class="popover"> <div id="popover" class="popover">
<header class="bar-nav"> <header class="bar-nav">
<a class="button-link pull-left"> <a class="btn btn-link pull-left">
Left Left
</a> </a>
<a class="button-link pull-right"> <a class="btn btn-link pull-right">
Right Right
</a> </a>
<h3 class="title">Popover title</h3> <h3 class="title">Popover title</h3>
@ -847,10 +847,10 @@ document
{% highlight html %} {% highlight html %}
<div id="popover" class="popover"> <div id="popover" class="popover">
<header class="bar-nav"> <header class="bar-nav">
<a class="button-link pull-left"> <a class="btn btn-link pull-left">
Left Left
</a> </a>
<a class="button-link pull-right"> <a class="btn btn-link pull-right">
Right Right
</a> </a>
<h3 class="title">Popover title</h3> <h3 class="title">Popover title</h3>
@ -885,10 +885,10 @@ document
<h3 class="component-title">Modals</h3> <h3 class="component-title">Modals</h3>
<div class="component-example"> <div class="component-example">
<a href="#myModalexample" class="button">Open modal</a> <a href="#myModalexample" class="btn">Open modal</a>
<div id="myModalexample" class="modal"> <div id="myModalexample" class="modal">
<header class="bar-nav"> <header class="bar-nav">
<a class="button pull-right" href="#myModalexample"> <a class="btn pull-right" href="#myModalexample">
Close Close
</a> </a>
<h1 class="title">Modal</h1> <h1 class="title">Modal</h1>
@ -903,10 +903,10 @@ document
</div> </div>
{% highlight html %} {% highlight html %}
<a href="#myModalexample" class="button">Open modal</a> <a href="#myModalexample" class="btn">Open modal</a>
<div id="myModalexample" class="modal"> <div id="myModalexample" class="modal">
<header class="bar-nav"> <header class="bar-nav">
<a class="button pull-right" href="#myModalexample"> <a class="btn pull-right" href="#myModalexample">
Close Close
</a> </a>
<h1 class="title">Modal</h1> <h1 class="title">Modal</h1>

40
dist/android-theme.css vendored
Unescape View File

@ -122,90 +122,90 @@ textarea,
background-image: none; background-image: none;
} }
[class*="button"] { .btn {
border: 1px solid #565656; border: 1px solid #565656;
color: white; color: white;
background-color: #111111; background-color: #111111;
border-radius: 3px; border-radius: 3px;
} }
[class*="button"]:active, [class*="button"].active { .btn:active, .btn.active {
color: #fff; color: #fff;
background-color: white; background-color: white;
} }
[class*="bar-"] [class*="button"] { [class*="bar-"] .btn {
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
[class*="bar-"] .button-link { [class*="bar-"] .btn-link {
padding: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
line-height: 50px; line-height: 50px;
} }
[class*="bar-"] .button-link:active, [class*="bar-"] .button-link.active { [class*="bar-"] .btn-link:active, [class*="bar-"] .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
} }
.button-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #33b5e5; border: 1px solid #33b5e5;
background-color: #33b5e5; background-color: #33b5e5;
} }
.button-primary:active, .button-primary.active { .btn-primary:active, .btn-primary.active {
border: 1px solid #1a9bcb; border: 1px solid #1a9bcb;
background-color: #1a9bcb; background-color: #1a9bcb;
} }
.button-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #81c700; border: 1px solid #81c700;
background-color: #81c700; background-color: #81c700;
} }
.button-positive:active, .button-positive.active { .btn-positive:active, .btn-positive.active {
border: 1px solid #609400; border: 1px solid #609400;
background-color: #609400; background-color: #609400;
} }
.button-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #f20754; border: 1px solid #f20754;
background-color: #f20754; background-color: #f20754;
} }
.button-negative:active, .button-negative.active { .btn-negative:active, .btn-negative.active {
border: 1px solid #c00643; border: 1px solid #c00643;
background-color: #c00643; background-color: #c00643;
} }
.button-outlined { .btn-outlined {
background-color: transparent; background-color: transparent;
} }
.button-outlined.button-primary { .btn-outlined.btn-primary {
color: #33b5e5; color: #33b5e5;
} }
.button-outlined.button-positive { .btn-outlined.btn-positive {
color: #81c700; color: #81c700;
} }
.button-outlined.button-negative { .btn-outlined.btn-negative {
color: #f20754; color: #f20754;
} }
.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active { .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff; color: #fff;
} }
.button-link { .btn-link {
color: #33b5e5; color: #33b5e5;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.button-link:active, .button-link.active { .btn-link:active, .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
background-color: transparent; background-color: transparent;
} }
.bar-nav .button-link { .bar-nav .btn-link {
color: #33b5e5; color: #33b5e5;
} }
.bar-nav .button-link:active { .bar-nav .btn-link:active {
color: #33b5e5; color: #33b5e5;
opacity: .6; opacity: .6;
} }

34
dist/ios-theme.css vendored
Unescape View File

@ -136,7 +136,7 @@ textarea,
background-image: none; background-image: none;
} }
[class*="button"] { .btn {
border: 1px solid #929292; border: 1px solid #929292;
color: #929292; color: #929292;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, 0.98);
@ -147,71 +147,71 @@ textarea,
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
transition-timing-function: linear; transition-timing-function: linear;
} }
[class*="button"]:active, [class*="button"].active { .btn:active, .btn.active {
color: #fff; color: #fff;
background-color: #929292; background-color: #929292;
} }
.button-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #007aff; border: 1px solid #007aff;
background-color: #007aff; background-color: #007aff;
} }
.button-primary:active, .button-primary.active { .btn-primary:active, .btn-primary.active {
border: 1px solid #0062cc; border: 1px solid #0062cc;
background-color: #0062cc; background-color: #0062cc;
} }
.button-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #4cd964; border: 1px solid #4cd964;
background-color: #4cd964; background-color: #4cd964;
} }
.button-positive:active, .button-positive.active { .btn-positive:active, .btn-positive.active {
border: 1px solid #2ac845; border: 1px solid #2ac845;
background-color: #2ac845; background-color: #2ac845;
} }
.button-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #dd524d; border: 1px solid #dd524d;
background-color: #dd524d; background-color: #dd524d;
} }
.button-negative:active, .button-negative.active { .btn-negative:active, .btn-negative.active {
border: 1px solid #cf2d28; border: 1px solid #cf2d28;
background-color: #cf2d28; background-color: #cf2d28;
} }
.button-outlined { .btn-outlined {
background-color: transparent; background-color: transparent;
} }
.button-outlined.button-primary { .btn-outlined.btn-primary {
color: #007aff; color: #007aff;
} }
.button-outlined.button-positive { .btn-outlined.btn-positive {
color: #4cd964; color: #4cd964;
} }
.button-outlined.button-negative { .btn-outlined.btn-negative {
color: #dd524d; color: #dd524d;
} }
.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active { .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff; color: #fff;
} }
.button-link { .btn-link {
color: #007aff; color: #007aff;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.button-link:active, .button-link.active { .btn-link:active, .btn-link.active {
color: #0062cc; color: #0062cc;
background-color: transparent; background-color: transparent;
} }
.bar-nav .button-link { .bar-nav .btn-link {
color: #007aff; color: #007aff;
} }
.bar-nav .button-link:active { .bar-nav .btn-link:active {
color: #007aff; color: #007aff;
opacity: .6; opacity: .6;
} }

40
dist/ratchet-theme.css vendored
Unescape View File

@ -41,57 +41,51 @@
color: white; color: white;
} }
[class*="button"] { .btn {
color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.3);
border-color: rgba(0, 0, 0, 0.3); border-color: rgba(0, 0, 0, 0.3);
} }
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { .btn:active, .btn.active, .btn.btn-filled {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.button-primary { .btn-primary {
color: #1eb0e9; color: #1eb0e9;
border-color: #1eb0e9; border-color: #1eb0e9;
} }
.button-primary:active, .button-primary.active, .button-primary.button-filled { .btn-primary:active, .btn-primary.active, .btn-primary.btn-filled {
background-color: #1eb0e9; background-color: #1eb0e9;
} }
.button-positive { .btn-positive {
color: #34ba15; color: #34ba15;
border-color: #34ba15; border-color: #34ba15;
} }
.button-positive:active, .button-positive.active, .button-positive.button-filled { .btn-positive:active, .btn-positive.active, .btn-positive.btn-filled {
background-color: #34ba15; background-color: #34ba15;
} }
.button-negative { .btn-negative {
color: #e71e1e; color: #e71e1e;
border-color: #e71e1e; border-color: #e71e1e;
} }
.button-negative:active, .button-negative.active, .button-negative.button-filled { .btn-negative:active, .btn-negative.active, .btn-negative.btn-filled {
background-color: #e71e1e; background-color: #e71e1e;
} }
.bar-title [class*="button"] { .bar-title .btn {
color: #fff; color: #fff;
} }
.bar-title .button:active, .bar-title .btn:active,
.bar-title .button.active, .bar-title .btn.active,
.bar-title .button-prev:active, .bar-title .btn-prev:active,
.bar-title .button-prev.active, .bar-title .btn-prev.active,
.bar-title .button-next:active, .bar-title .btn-next:active,
.bar-title .button-next.active, .bar-title .btn-next.active,
.bar-title .button-primary:active, .bar-title .btn-primary:active,
.bar-title .button-primary.active { .bar-title .btn-primary.active {
color: #fff; color: #fff;
} }
.bar-title .button-prev:before,
.bar-title .button-prev:after,
.bar-title .button-next:before,
.bar-title .button-next:after {
background-color: #fff;
}
.segmented-controller { .segmented-controller {
border-color: #1eb0e9; border-color: #1eb0e9;

80
dist/ratchet.css vendored
Unescape View File

@ -405,14 +405,14 @@ strong {
.table-view .table-view-cell:last-child { .table-view .table-view-cell:last-child {
border-bottom: 0; border-bottom: 0;
} }
.table-view .table-view-cell > a:not([class*="button"]) { .table-view .table-view-cell > a:not(.btn) {
position: relative; position: relative;
display: block; display: block;
padding: inherit; padding: inherit;
margin: -11px -60px -12px -15px; margin: -11px -60px -12px -15px;
color: inherit; color: inherit;
} }
.table-view .table-view-cell > a:not([class*="button"]):active { .table-view .table-view-cell > a:not(.btn):active {
background-color: #eee; background-color: #eee;
} }
.table-view .table-view-cell p { .table-view .table-view-cell p {
@ -438,7 +438,7 @@ strong {
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} }
.table-view .chevron, .table-view .chevron,
.table-view [class*="button"], .table-view .btn,
.table-view [class*="badge"], .table-view [class*="badge"],
.table-view .toggle { .table-view .toggle {
position: absolute; position: absolute;
@ -454,7 +454,7 @@ strong {
.table-view .chevron + [class*="badge"] { .table-view .chevron + [class*="badge"] {
right: 30px; right: 30px;
} }
.table-view [class*="button"] { .table-view .btn {
left: auto; left: auto;
margin-top: -12px; margin-top: -12px;
} }
@ -466,11 +466,11 @@ strong {
padding-left: 59px; padding-left: 59px;
background-position-x: 59px; background-position-x: 59px;
} }
.table-view-indented .table-view-cell > a:not([class*="button"]) { .table-view-indented .table-view-cell > a:not(.btn) {
margin-left: -59px; margin-left: -59px;
} }
.table-view-indented .table-view-cell > .pull-left, .table-view-indented .table-view-cell > .pull-left,
.table-view-indented .table-view-cell > a:not([class*="button"]) .pull-left { .table-view-indented .table-view-cell > a:not(.btn) .pull-left {
position: absolute; position: absolute;
left: 15px; left: 15px;
z-index: 1; z-index: 1;
@ -607,7 +607,7 @@ select {
margin: 6px 0; margin: 6px 0;
} }
[class*="button"] { .btn {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 5px 8px; padding: 5px 8px;
@ -623,72 +623,72 @@ select {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
} }
[class*="button"]:active, [class*="button"].active { .btn:active, .btn.active {
background-color: #ccc; background-color: #ccc;
} }
[class*="button"]:disabled, [class*="button"].disabled { .btn:disabled, .btn.disabled {
opacity: .6; opacity: .6;
} }
.button-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid #428bca; border: 1px solid #428bca;
background-color: #428bca; background-color: #428bca;
} }
.button-primary:active, .button-primary.active { .btn-primary:active, .btn-primary.active {
border: 1px solid #3071a9; border: 1px solid #3071a9;
background-color: #3071a9; background-color: #3071a9;
} }
.button-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid #5cb85c; border: 1px solid #5cb85c;
background-color: #5cb85c; background-color: #5cb85c;
} }
.button-positive:active, .button-positive.active { .btn-positive:active, .btn-positive.active {
border: 1px solid #449d44; border: 1px solid #449d44;
background-color: #449d44; background-color: #449d44;
} }
.button-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid #d9534f; border: 1px solid #d9534f;
background-color: #d9534f; background-color: #d9534f;
} }
.button-negative:active, .button-negative.active { .btn-negative:active, .btn-negative.active {
border: 1px solid #c9302c; border: 1px solid #c9302c;
background-color: #c9302c; background-color: #c9302c;
} }
.button-outlined { .btn-outlined {
background-color: transparent; background-color: transparent;
} }
.button-outlined.button-primary { .btn-outlined.btn-primary {
color: #428bca; color: #428bca;
} }
.button-outlined.button-positive { .btn-outlined.btn-positive {
color: #5cb85c; color: #5cb85c;
} }
.button-outlined.button-negative { .btn-outlined.btn-negative {
color: #d9534f; color: #d9534f;
} }
.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active { .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff; color: #fff;
} }
.button-link { .btn-link {
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
color: #428bca; color: #428bca;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.button-link:active, .button-link.active { .btn-link:active, .btn-link.active {
color: #3071a9; color: #3071a9;
background-color: transparent; background-color: transparent;
} }
.button-block { .btn-block {
display: block; display: block;
padding: 15px 0; padding: 15px 0;
margin-bottom: 10px; margin-bottom: 10px;
@ -701,20 +701,20 @@ input[type="button"] {
width: 100%; width: 100%;
} }
.bar-nav [class*="button"] { .bar-nav .btn {
position: relative; position: relative;
z-index: 10; z-index: 10;
padding: 6px 12px; padding: 6px 12px;
margin-top: 8px; margin-top: 8px;
font-weight: 400; font-weight: 400;
} }
.bar-nav [class*="button"].pull-right { .bar-nav .btn.pull-right {
margin-left: 10px; margin-left: 10px;
} }
.bar-nav [class*="button"].pull-left { .bar-nav .btn.pull-left {
margin-right: 10px; margin-right: 10px;
} }
.bar-nav .button-link { .bar-nav .btn-link {
padding: 0; padding: 0;
margin-top: 0; margin-top: 0;
font-size: 16px; font-size: 16px;
@ -723,27 +723,27 @@ input[type="button"] {
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.bar-nav .button-link:active, .bar-nav .button-link.active { .bar-nav .btn-link:active, .bar-nav .btn-link.active {
color: #3071a9; color: #3071a9;
} }
[class*="bar"] .button-block { [class*="bar"] .btn-block {
padding: 7px 0; padding: 7px 0;
margin-top: 4px; margin-top: 4px;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 16px; font-size: 16px;
} }
.popover .button-block { .popover .btn-block {
margin-bottom: 5px; margin-bottom: 5px;
} }
.popover .button-block:last-child { .popover .btn-block:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.popover .bar-nav .button-link.pull-left { .popover .bar-nav .btn-link.pull-left {
margin-left: 5px; margin-left: 5px;
} }
.popover .bar-nav .button-link.pull-right { .popover .bar-nav .btn-link.pull-right {
margin-right: 5px; margin-right: 5px;
} }
@ -808,7 +808,7 @@ input[type="button"] {
color: #d9534f; color: #d9534f;
} }
[class*="button"] [class*="badge"] { .btn [class*="badge"] {
font-size: 12px; font-size: 12px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
@ -816,18 +816,18 @@ input[type="button"] {
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
} }
[class*="button"] .badge-inverted, .btn .badge-inverted,
[class*="button"]:active .badge-inverted { .btn:active .badge-inverted {
background-color: transparent; background-color: transparent;
} }
.button-primary:active .badge-inverted, .btn-primary:active .badge-inverted,
.button-positive:active .badge-inverted, .btn-positive:active .badge-inverted,
.button-negative:active .badge-inverted { .btn-negative:active .badge-inverted {
color: #fff; color: #fff;
} }
.button-block [class*="badge"] { .btn-block [class*="badge"] {
position: absolute; position: absolute;
right: 0; right: 0;
margin-right: 10px; margin-right: 10px;

105
docs-assets/css/docs.css
Unescape View File

@ -63,7 +63,7 @@ body {
.docs-header-content { .docs-header-content {
padding: 50px 10px; padding: 50px 10px;
} }
.docs-header-content .button { .docs-header-content .btn {
display: block; display: block;
padding: 15px 30px 16px; padding: 15px 30px 16px;
margin: 0 10px 10px; margin: 0 10px 10px;
@ -73,26 +73,26 @@ body {
-webkit-transition: all 0.2s linear; -webkit-transition: all 0.2s linear;
transition: all 0.2s linear; transition: all 0.2s linear;
} }
.docs-header-content .button:hover { .docs-header-content .btn:hover {
color: #63e3ff; color: #63e3ff;
border-color: #63e3ff; border-color: #63e3ff;
} }
.docs-header-content .button:active { .docs-header-content .btn:active {
opacity: .5; opacity: .5;
background-color: transparent; background-color: transparent;
} }
.docs-header-content .button-primary { .docs-header-content .btn-primary {
margin-bottom: 0; margin-bottom: 0;
color: #fff; color: #fff;
border-color: #00d1fe; border-color: #00d1fe;
background-color: #00d1fe; background-color: #00d1fe;
} }
.docs-header-content .button-primary:hover { .docs-header-content .btn-primary:hover {
color: #fff; color: #fff;
border-color: #63e3ff; border-color: #63e3ff;
background-color: #63e3ff; background-color: #63e3ff;
} }
.docs-header-content .button-primary:active { .docs-header-content .btn-primary:active {
background-color: #63e3ff; background-color: #63e3ff;
} }
@ -182,13 +182,6 @@ body {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.social [class*="button"] {
padding: 0;
border: 0;
}
.social iframe {
background-color: transparent;
}
.social .twitter-follow-button { .social .twitter-follow-button {
margin-top: 5px; margin-top: 5px;
} }
@ -388,14 +381,14 @@ body {
word-wrap: normal; word-wrap: normal;
} }
#buttonsInDevice [class*="button"], #buttonsInDevice .btn,
#buttonsBadgesInDevice [class*="button"] { #buttonsBadgesInDevice .btn {
margin-top: 10px; margin-top: 10px;
margin-right: 100px; margin-right: 100px;
margin-left: 10px; margin-left: 10px;
} }
#blockButtonsInDevice .button-block { #blockButtonsInDevice .btn-block {
margin: 10px; margin: 10px;
} }
@ -437,7 +430,7 @@ body {
content: ''; content: '';
} }
#modalsInDevice #iwindow > .button { #modalsInDevice #iwindow > .btn {
margin: 10px; margin: 10px;
} }
#modalsInDevice .card p { #modalsInDevice .card p {
@ -495,11 +488,11 @@ hr {
line-height: 60px; line-height: 60px;
} }
.docs-header-content .button { .docs-header-content .btn {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
} }
.docs-header-content .button-primary { .docs-header-content .btn-primary {
margin-left: 10px; margin-left: 10px;
} }
@ -921,7 +914,7 @@ hr {
.platform-ios .input-row label + input { .platform-ios .input-row label + input {
background-image: none; background-image: none;
} }
.platform-ios [class*="button"] { .platform-ios .btn {
border: 1px solid #929292; border: 1px solid #929292;
color: #929292; color: #929292;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, 0.98);
@ -932,65 +925,65 @@ hr {
-webkit-transition-timing-function: linear; -webkit-transition-timing-function: linear;
transition-timing-function: linear; transition-timing-function: linear;
} }
.platform-ios [class*="button"]:active, .platform-ios [class*="button"].active { .platform-ios .btn:active, .platform-ios .btn.active {
color: #fff; color: #fff;
background-color: #929292; background-color: #929292;
} }
.platform-ios .button-primary { .platform-ios .btn-primary {
color: #fff; color: #fff;
border: 1px solid #007aff; border: 1px solid #007aff;
background-color: #007aff; background-color: #007aff;
} }
.platform-ios .button-primary:active, .platform-ios .button-primary.active { .platform-ios .btn-primary:active, .platform-ios .btn-primary.active {
border: 1px solid #0062cc; border: 1px solid #0062cc;
background-color: #0062cc; background-color: #0062cc;
} }
.platform-ios .button-positive { .platform-ios .btn-positive {
color: #fff; color: #fff;
border: 1px solid #4cd964; border: 1px solid #4cd964;
background-color: #4cd964; background-color: #4cd964;
} }
.platform-ios .button-positive:active, .platform-ios .button-positive.active { .platform-ios .btn-positive:active, .platform-ios .btn-positive.active {
border: 1px solid #2ac845; border: 1px solid #2ac845;
background-color: #2ac845; background-color: #2ac845;
} }
.platform-ios .button-negative { .platform-ios .btn-negative {
color: #fff; color: #fff;
border: 1px solid #dd524d; border: 1px solid #dd524d;
background-color: #dd524d; background-color: #dd524d;
} }
.platform-ios .button-negative:active, .platform-ios .button-negative.active { .platform-ios .btn-negative:active, .platform-ios .btn-negative.active {
border: 1px solid #cf2d28; border: 1px solid #cf2d28;
background-color: #cf2d28; background-color: #cf2d28;
} }
.platform-ios .button-outlined { .platform-ios .btn-outlined {
background-color: transparent; background-color: transparent;
} }
.platform-ios .button-outlined.button-primary { .platform-ios .btn-outlined.btn-primary {
color: #007aff; color: #007aff;
} }
.platform-ios .button-outlined.button-positive { .platform-ios .btn-outlined.btn-positive {
color: #4cd964; color: #4cd964;
} }
.platform-ios .button-outlined.button-negative { .platform-ios .btn-outlined.btn-negative {
color: #dd524d; color: #dd524d;
} }
.platform-ios .button-outlined.button-primary:active, .platform-ios .button-outlined.button-positive:active, .platform-ios .button-outlined.button-negative:active { .platform-ios .btn-outlined.btn-primary:active, .platform-ios .btn-outlined.btn-positive:active, .platform-ios .btn-outlined.btn-negative:active {
color: #fff; color: #fff;
} }
.platform-ios .button-link { .platform-ios .btn-link {
color: #007aff; color: #007aff;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.platform-ios .button-link:active, .platform-ios .button-link.active { .platform-ios .btn-link:active, .platform-ios .btn-link.active {
color: #0062cc; color: #0062cc;
background-color: transparent; background-color: transparent;
} }
.platform-ios .bar-nav .button-link { .platform-ios .bar-nav .btn-link {
color: #007aff; color: #007aff;
} }
.platform-ios .bar-nav .button-link:active { .platform-ios .bar-nav .btn-link:active {
color: #007aff; color: #007aff;
opacity: .6; opacity: .6;
} }
@ -1275,83 +1268,83 @@ hr {
.platform-android .input-row label + input { .platform-android .input-row label + input {
background-image: none; background-image: none;
} }
.platform-android [class*="button"] { .platform-android .btn {
border: 1px solid #565656; border: 1px solid #565656;
color: white; color: white;
background-color: #111111; background-color: #111111;
border-radius: 3px; border-radius: 3px;
} }
.platform-android [class*="button"]:active, .platform-android [class*="button"].active { .platform-android .btn:active, .platform-android .btn.active {
color: #fff; color: #fff;
background-color: white; background-color: white;
} }
.platform-android [class*="bar-"] [class*="button"] { .platform-android [class*="bar-"] .btn {
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
.platform-android [class*="bar-"] .button-link { .platform-android [class*="bar-"] .btn-link {
padding: 0; padding: 0;
color: #33b5e5; color: #33b5e5;
line-height: 50px; line-height: 50px;
} }
.platform-android [class*="bar-"] .button-link:active, .platform-android [class*="bar-"] .button-link.active { .platform-android [class*="bar-"] .btn-link:active, .platform-android [class*="bar-"] .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
} }
.platform-android .button-primary { .platform-android .btn-primary {
color: #fff; color: #fff;
border: 1px solid #33b5e5; border: 1px solid #33b5e5;
background-color: #33b5e5; background-color: #33b5e5;
} }
.platform-android .button-primary:active, .platform-android .button-primary.active { .platform-android .btn-primary:active, .platform-android .btn-primary.active {
border: 1px solid #1a9bcb; border: 1px solid #1a9bcb;
background-color: #1a9bcb; background-color: #1a9bcb;
} }
.platform-android .button-positive { .platform-android .btn-positive {
color: #fff; color: #fff;
border: 1px solid #81c700; border: 1px solid #81c700;
background-color: #81c700; background-color: #81c700;
} }
.platform-android .button-positive:active, .platform-android .button-positive.active { .platform-android .btn-positive:active, .platform-android .btn-positive.active {
border: 1px solid #609400; border: 1px solid #609400;
background-color: #609400; background-color: #609400;
} }
.platform-android .button-negative { .platform-android .btn-negative {
color: #fff; color: #fff;
border: 1px solid #f20754; border: 1px solid #f20754;
background-color: #f20754; background-color: #f20754;
} }
.platform-android .button-negative:active, .platform-android .button-negative.active { .platform-android .btn-negative:active, .platform-android .btn-negative.active {
border: 1px solid #c00643; border: 1px solid #c00643;
background-color: #c00643; background-color: #c00643;
} }
.platform-android .button-outlined { .platform-android .btn-outlined {
background-color: transparent; background-color: transparent;
} }
.platform-android .button-outlined.button-primary { .platform-android .btn-outlined.btn-primary {
color: #33b5e5; color: #33b5e5;
} }
.platform-android .button-outlined.button-positive { .platform-android .btn-outlined.btn-positive {
color: #81c700; color: #81c700;
} }
.platform-android .button-outlined.button-negative { .platform-android .btn-outlined.btn-negative {
color: #f20754; color: #f20754;
} }
.platform-android .button-outlined.button-primary:active, .platform-android .button-outlined.button-positive:active, .platform-android .button-outlined.button-negative:active { .platform-android .btn-outlined.btn-primary:active, .platform-android .btn-outlined.btn-positive:active, .platform-android .btn-outlined.btn-negative:active {
color: #fff; color: #fff;
} }
.platform-android .button-link { .platform-android .btn-link {
color: #33b5e5; color: #33b5e5;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.platform-android .button-link:active, .platform-android .button-link.active { .platform-android .btn-link:active, .platform-android .btn-link.active {
color: #1a9bcb; color: #1a9bcb;
background-color: transparent; background-color: transparent;
} }
.platform-android .bar-nav .button-link { .platform-android .bar-nav .btn-link {
color: #33b5e5; color: #33b5e5;
} }
.platform-android .bar-nav .button-link:active { .platform-android .bar-nav .btn-link:active {
color: #33b5e5; color: #33b5e5;
opacity: .6; opacity: .6;
} }

22
examples/app-default/choose-theater.html
Unescape View File

@ -19,7 +19,7 @@
<body> <body>
<header class="bar-nav"> <header class="bar-nav">
<a class="button pull-left" href="index.html" data-transition="slide-out"> <a class="btn pull-left" href="index.html" data-transition="slide-out">
Back Back
</a> </a>
<h1 class="title">Argo</h1> <h1 class="title">Argo</h1>
@ -52,52 +52,52 @@
<li class="table-view-cell"> <li class="table-view-cell">
<strong>Metreon 16</strong> <strong>Metreon 16</strong>
<p>1.3 miles away</p> <p>1.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>AMC 5</strong> <strong>AMC 5</strong>
<p>3.5 miles away</p> <p>3.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>Regal 42</strong> <strong>Regal 42</strong>
<p>7.3 miles away</p> <p>7.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>Shorline theater</strong> <strong>Shorline theater</strong>
<p>12.5 miles away</p> <p>12.5 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>AMC 16</strong> <strong>AMC 16</strong>
<p>12.2 miles away</p> <p>12.2 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>BW3 16</strong> <strong>BW3 16</strong>
<p>13.4 miles away</p> <p>13.4 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>MC Hammer 16</strong> <strong>MC Hammer 16</strong>
<p>14.1 miles away</p> <p>14.1 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>AMC 3</strong> <strong>AMC 3</strong>
<p>14.3 miles away</p> <p>14.3 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>AMC 2</strong> <strong>AMC 2</strong>
<p>14.7 miles away</p> <p>14.7 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
<li class="table-view-cell"> <li class="table-view-cell">
<strong>AMC 10</strong> <strong>AMC 10</strong>
<p>15 miles away</p> <p>15 miles away</p>
<a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a> <a class="btn btn-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
</li> </li>
</ul> </ul>
</div> </div>

2
examples/app-default/css/app.css
Unescape View File

@ -11,6 +11,6 @@
padding: 10px 0; padding: 10px 0;
} }
.form-wrapper [class*="button"] { .form-wrapper .btn {
margin: 0 10px; margin: 0 10px;
} }

4
index.html
Unescape View File

@ -17,8 +17,8 @@ base_url: "./"
<div class="docs-header-content"> <div class="docs-header-content">
<p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p> <p class="docs-subtitle">Build mobile apps with simple HTML, CSS, and JS components.</p>
<a data-ignore="push" href="/components" class="button button-outlined">View the docs</a> <a data-ignore="push" href="/components" class="btn btn-outlined">View the docs</a>
<a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="button button-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a> <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
</div> </div>
</div> </div>

19
lib/sass/badges.scss
Unescape View File

@ -56,7 +56,7 @@
// -------------------------------------------------- // --------------------------------------------------
// Generic styles for all badges within default buttons // Generic styles for all badges within default buttons
[class*="button"] [class*="badge"] { .btn [class*="badge"] {
font-size: 12px; font-size: 12px;
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
@ -65,26 +65,21 @@
} }
// Styles for filled badges within filled buttons // Styles for filled badges within filled buttons
[class*="button"] .badge-inverted, .btn .badge-inverted,
[class*="button"]:active .badge-inverted { .btn:active .badge-inverted {
background-color: transparent; background-color: transparent;
} }
.button-primary:active .badge-inverted, .btn-primary:active .badge-inverted,
.button-positive:active .badge-inverted, .btn-positive:active .badge-inverted,
.button-negative:active .badge-inverted { .btn-negative:active .badge-inverted {
color: #fff; color: #fff;
} }
// Position badges within block level buttons // Position badges within block level buttons
// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always // Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
// stays at true center of button // stays at true center of button
.button-block [class*="badge"] { .btn-block [class*="badge"] {
position: absolute; position: absolute;
right: 0; right: 0;
margin-right: 10px; margin-right: 10px;
} }
// Badges in table-views
// --------------------------------------------------

38
lib/sass/buttons.scss
Unescape View File

@ -2,7 +2,7 @@
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
[class*="button"] { .btn {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: 5px 8px; padding: 5px 8px;
@ -36,7 +36,7 @@
// -------------------------------------------------- // --------------------------------------------------
// Primary button (Default color is blue) // Primary button (Default color is blue)
.button-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid $primary-color; border: 1px solid $primary-color;
background-color: $primary-color; background-color: $primary-color;
@ -49,7 +49,7 @@
} }
// Positive button (Default color is green) // Positive button (Default color is green)
.button-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid $positive-color; border: 1px solid $positive-color;
background-color: $positive-color; background-color: $positive-color;
@ -62,7 +62,7 @@
} }
// Negative button (Default color is red) // Negative button (Default color is red)
.button-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid $negative-color; border: 1px solid $negative-color;
background-color: $negative-color; background-color: $negative-color;
@ -75,28 +75,28 @@
} }
// Outlined buttons // Outlined buttons
.button-outlined { .btn-outlined {
background-color: transparent; background-color: transparent;
&.button-primary { &.btn-primary {
color: $primary-color; color: $primary-color;
} }
&.button-positive { &.btn-positive {
color: $positive-color; color: $positive-color;
} }
&.button-negative { &.btn-negative {
color: $negative-color; color: $negative-color;
} }
// Active states // Active states
&.button-primary:active, &.btn-primary:active,
&.button-positive:active, &.btn-positive:active,
&.button-negative:active { &.btn-negative:active {
color: #fff; color: #fff;
} }
} }
// Link button (Buttons that look like links) // Link button (Buttons that look like links)
.button-link { .btn-link {
padding-top: 6px; padding-top: 6px;
padding-bottom: 6px; padding-bottom: 6px;
color: $primary-color; color: $primary-color;
@ -111,7 +111,7 @@
} }
// Block level buttons (full width buttons) // Block level buttons (full width buttons)
.button-block { .btn-block {
display: block; display: block;
padding: 15px 0; padding: 15px 0;
margin-bottom: 10px; margin-bottom: 10px;
@ -131,7 +131,7 @@ input[type="button"] {
.bar-nav { .bar-nav {
// Generic style for all buttons in .bar-title // Generic style for all buttons in .bar-title
[class*="button"] { .btn {
position: relative; position: relative;
z-index: 10; // Position the buttons on top of .title z-index: 10; // Position the buttons on top of .title
padding: 6px 12px; padding: 6px 12px;
@ -147,7 +147,7 @@ input[type="button"] {
} }
// Link button (Buttons that look like links) // Link button (Buttons that look like links)
.button-link { .btn-link {
padding: 0; padding: 0;
margin-top: 0; margin-top: 0;
font-size: 16px; font-size: 16px;
@ -168,7 +168,7 @@ input[type="button"] {
// -------------------------------------------------- // --------------------------------------------------
// Add proper padding // Add proper padding
[class*="bar"] .button-block { [class*="bar"] .btn-block {
padding: 7px 0; padding: 7px 0;
margin-top: 4px; margin-top: 4px;
margin-bottom: 5px; margin-bottom: 5px;
@ -181,16 +181,16 @@ input[type="button"] {
// Positioning and giving darker border to look sharp against dark popover // Positioning and giving darker border to look sharp against dark popover
.popover { .popover {
.button-block { .btn-block {
margin-bottom: 5px; margin-bottom: 5px;
} }
// Remove extra margin on bottom of last button // Remove extra margin on bottom of last button
.button-block:last-child { .btn-block:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
// Line the button text up with content's text // Line the button text up with content's text
.bar-nav .button-link { .bar-nav .btn-link {
&.pull-left { &.pull-left {
margin-left: 5px; margin-left: 5px;
} }

22
lib/sass/docs.scss
Unescape View File

@ -59,7 +59,7 @@ body {
.docs-header-content { .docs-header-content {
padding: 50px 10px; padding: 50px 10px;
.button { .btn {
display: block; display: block;
padding: 15px 30px 16px; padding: 15px 30px 16px;
margin: 0 10px 10px; margin: 0 10px 10px;
@ -77,7 +77,7 @@ body {
background-color: transparent; background-color: transparent;
} }
} }
.button-primary { .btn-primary {
margin-bottom: 0; margin-bottom: 0;
color: #fff; color: #fff;
border-color: #00d1fe; border-color: #00d1fe;
@ -185,14 +185,6 @@ body {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
[class*="button"] {
padding: 0;
border: 0;
}
// Remove after button class changes.
iframe {
background-color: transparent;
}
.twitter-follow-button { .twitter-follow-button {
margin-top: 5px; margin-top: 5px;
} }
@ -407,13 +399,13 @@ body {
// Buttons // Buttons
#buttonsInDevice, #buttonsInDevice,
#buttonsBadgesInDevice { #buttonsBadgesInDevice {
[class*="button"] { .btn {
margin-top: 10px; margin-top: 10px;
margin-right: 100px; margin-right: 100px;
margin-left: 10px; margin-left: 10px;
} }
} }
#blockButtonsInDevice .button-block { #blockButtonsInDevice .btn-block {
margin: 10px; margin: 10px;
} }
@ -468,7 +460,7 @@ body {
// Modals // Modals
#modalsInDevice { #modalsInDevice {
#iwindow > .button { #iwindow > .btn {
margin: 10px; margin: 10px;
} }
.card p { .card p {
@ -533,11 +525,11 @@ hr {
line-height: 60px; line-height: 60px;
} }
.docs-header-content { .docs-header-content {
.button { .btn {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
} }
.button-primary { .btn-primary {
margin-left: 10px; margin-left: 10px;
} }
} }

10
lib/sass/table-views.scss
Unescape View File

@ -19,7 +19,7 @@
border-bottom: 0; border-bottom: 0;
} }
// If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though) // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
> a:not([class*="button"]) { > a:not(.btn) {
position: relative; position: relative;
display: block; display: block;
padding: inherit; padding: inherit;
@ -67,7 +67,7 @@
// ------------------------------------------------------------------------------- // -------------------------------------------------------------------------------
.chevron, .chevron,
[class*="button"], .btn,
[class*="badge"], [class*="badge"],
.toggle { .toggle {
position: absolute; position: absolute;
@ -89,7 +89,7 @@
} }
// Position buttons vertically centered on the right in table view items // Position buttons vertically centered on the right in table view items
[class*="button"] { .btn {
left: auto; left: auto;
margin-top: -12px; // Half height of button margin-top: -12px; // Half height of button
} }
@ -106,12 +106,12 @@
padding-left: 59px; padding-left: 59px;
background-position-x: 59px; // Make room for your left aligned media/icons. background-position-x: 59px; // Make room for your left aligned media/icons.
> a:not([class*="button"]) { > a:not(.btn) {
margin-left: -59px; margin-left: -59px;
} }
> .pull-left, > .pull-left,
> a:not([class*="button"]) .pull-left { > a:not(.btn) .pull-left {
position: absolute; position: absolute;
left: 15px; left: 15px;
z-index: 1; z-index: 1;

30
lib/sass/theme-android.scss
Unescape View File

@ -175,7 +175,7 @@ textarea,
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
[class*="button"] { .btn {
border: $border-default; border: $border-default;
color: $default-color; color: $default-color;
background-color: $chrome-color; background-color: $chrome-color;
@ -189,11 +189,11 @@ textarea,
} }
} }
[class*="bar-"] { [class*="bar-"] {
[class*="button"] { .btn {
padding-top: 9px; padding-top: 9px;
padding-bottom: 9px; padding-bottom: 9px;
} }
.button-link { .btn-link {
padding: 0; padding: 0;
color: $primary-color; color: $primary-color;
line-height: $bar-base-height; line-height: $bar-base-height;
@ -210,7 +210,7 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
// Primary button (Default color is blue) // Primary button (Default color is blue)
.button-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid $primary-color; border: 1px solid $primary-color;
background-color: $primary-color; background-color: $primary-color;
@ -223,7 +223,7 @@ textarea,
} }
// Positive button (Default color is green) // Positive button (Default color is green)
.button-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid $positive-color; border: 1px solid $positive-color;
background-color: $positive-color; background-color: $positive-color;
@ -236,7 +236,7 @@ textarea,
} }
// Negative button (Default color is red) // Negative button (Default color is red)
.button-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid $negative-color; border: 1px solid $negative-color;
background-color: $negative-color; background-color: $negative-color;
@ -249,28 +249,28 @@ textarea,
} }
// Outlined buttons // Outlined buttons
.button-outlined { .btn-outlined {
background-color: transparent; background-color: transparent;
&.button-primary { &.btn-primary {
color: $primary-color; color: $primary-color;
} }
&.button-positive { &.btn-positive {
color: $positive-color; color: $positive-color;
} }
&.button-negative { &.btn-negative {
color: $negative-color; color: $negative-color;
} }
// Active states // Active states
&.button-primary:active, &.btn-primary:active,
&.button-positive:active, &.btn-positive:active,
&.button-negative:active { &.btn-negative:active {
color: #fff; color: #fff;
} }
} }
// Link button (Buttons that look like links) // Link button (Buttons that look like links)
.button-link { .btn-link {
color: $primary-color; color: $primary-color;
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -286,7 +286,7 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
.bar-nav { .bar-nav {
.button-link { .btn-link {
color: $primary-color; color: $primary-color;
&:active { &:active {

45
lib/sass/theme-classic.scss
Unescape View File

@ -54,49 +54,49 @@ $negative-color: #e71e1e;
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
[class*="button"] { .btn {
color: $default-color; color: $default-color;
border-color: $default-color; border-color: $default-color;
&:active, &:active,
&.active, &.active,
&.button-filled { &.btn-filled {
background-color: $default-color; background-color: $default-color;
} }
} }
// Primary button (Default color is blue) // Primary button (Default color is blue)
.button-primary { .btn-primary {
color: $primary-color; color: $primary-color;
border-color: $primary-color; border-color: $primary-color;
&:active, &:active,
&.active, &.active,
&.button-filled { &.btn-filled {
background-color: $primary-color; background-color: $primary-color;
} }
} }
// Positive button (Default color is green) // Positive button (Default color is green)
.button-positive { .btn-positive {
color: $positive-color; color: $positive-color;
border-color: $positive-color; border-color: $positive-color;
&:active, &:active,
&.active, &.active,
&.button-filled { &.btn-filled {
background-color: $positive-color; background-color: $positive-color;
} }
} }
// Negative button (Default color is red) // Negative button (Default color is red)
.button-negative { .btn-negative {
color: $negative-color; color: $negative-color;
border-color: $negative-color; border-color: $negative-color;
&:active, &:active,
&.active, &.active,
&.button-filled { &.btn-filled {
background-color: $negative-color; background-color: $negative-color;
} }
} }
@ -104,32 +104,21 @@ $negative-color: #e71e1e;
.bar-title { .bar-title {
// Generic style for all buttons in .bar-title // Generic style for all buttons in .bar-title
[class*="button"] { .btn {
color: #fff; color: #fff;
} }
// Override standard button active states // Override standard button active states
.button:active, .btn:active,
.button.active, .btn.active,
.button-prev:active, .btn-prev:active,
.button-prev.active, .btn-prev.active,
.button-next:active, .btn-next:active,
.button-next.active, .btn-next.active,
.button-primary:active, .btn-primary:active,
.button-primary.active { .btn-primary.active {
color: #fff; color: #fff;
} }
// Directional buttons in nav bars
// --------------------------------------------------
.button-prev:before,
.button-prev:after,
.button-next:before,
.button-next:after {
background-color: #fff;
}
} }

26
lib/sass/theme-ios.scss
Unescape View File

@ -188,7 +188,7 @@ textarea,
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
[class*="button"] { .btn {
border: 1px solid $default-color; border: 1px solid $default-color;
color: $default-color; color: $default-color;
background-color: $chrome-color; background-color: $chrome-color;
@ -209,7 +209,7 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
// Primary button (Default color is blue) // Primary button (Default color is blue)
.button-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid $primary-color; border: 1px solid $primary-color;
background-color: $primary-color; background-color: $primary-color;
@ -222,7 +222,7 @@ textarea,
} }
// Positive button (Default color is green) // Positive button (Default color is green)
.button-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid $positive-color; border: 1px solid $positive-color;
background-color: $positive-color; background-color: $positive-color;
@ -235,7 +235,7 @@ textarea,
} }
// Negative button (Default color is red) // Negative button (Default color is red)
.button-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid $negative-color; border: 1px solid $negative-color;
background-color: $negative-color; background-color: $negative-color;
@ -248,28 +248,28 @@ textarea,
} }
// Outlined buttons // Outlined buttons
.button-outlined { .btn-outlined {
background-color: transparent; background-color: transparent;
&.button-primary { &.btn-primary {
color: $primary-color; color: $primary-color;
} }
&.button-positive { &.btn-positive {
color: $positive-color; color: $positive-color;
} }
&.button-negative { &.btn-negative {
color: $negative-color; color: $negative-color;
} }
// Active states // Active states
&.button-primary:active, &.btn-primary:active,
&.button-positive:active, &.btn-positive:active,
&.button-negative:active { &.btn-negative:active {
color: #fff; color: #fff;
} }
} }
// Link button (Buttons that look like links) // Link button (Buttons that look like links)
.button-link { .btn-link {
color: $primary-color; color: $primary-color;
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -285,7 +285,7 @@ textarea,
// -------------------------------------------------- // --------------------------------------------------
.bar-nav { .bar-nav {
.button-link { .btn-link {
color: $primary-color; color: $primary-color;
&:active { &:active {

Write Preview
Loading…
Cancel
Save