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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      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

146
components.html
Unescape View File

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

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

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

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

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

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

@ -41,57 +41,51 @@
color: white;
}
[class*="button"] {
.btn {
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);
}
.button-primary {
.btn-primary {
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;
}
.button-positive {
.btn-positive {
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;
}
.button-negative {
.btn-negative {
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;
}
.bar-title [class*="button"] {
.bar-title .btn {
color: #fff;
}
.bar-title .button:active,
.bar-title .button.active,
.bar-title .button-prev:active,
.bar-title .button-prev.active,
.bar-title .button-next:active,
.bar-title .button-next.active,
.bar-title .button-primary:active,
.bar-title .button-primary.active {
.bar-title .btn:active,
.bar-title .btn.active,
.bar-title .btn-prev:active,
.bar-title .btn-prev.active,
.bar-title .btn-next:active,
.bar-title .btn-next.active,
.bar-title .btn-primary:active,
.bar-title .btn-primary.active {
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 {
border-color: #1eb0e9;

80
dist/ratchet.css vendored
Unescape View File

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

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

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

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

@ -19,7 +19,7 @@
<body>
<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
</a>
<h1 class="title">Argo</h1>
@ -52,52 +52,52 @@
<li class="table-view-cell">
<strong>Metreon 16</strong>
<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 class="table-view-cell">
<strong>AMC 5</strong>
<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 class="table-view-cell">
<strong>Regal 42</strong>
<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 class="table-view-cell">
<strong>Shorline theater</strong>
<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 class="table-view-cell">
<strong>AMC 16</strong>
<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 class="table-view-cell">
<strong>BW3 16</strong>
<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 class="table-view-cell">
<strong>MC Hammer 16</strong>
<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 class="table-view-cell">
<strong>AMC 3</strong>
<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 class="table-view-cell">
<strong>AMC 2</strong>
<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 class="table-view-cell">
<strong>AMC 10</strong>
<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>
</ul>
</div>

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

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

4
index.html
Unescape View File

@ -17,8 +17,8 @@ base_url: "./"
<div class="docs-header-content">
<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="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="/components" class="btn btn-outlined">View the docs</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>

19
lib/sass/badges.scss
Unescape View File

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

38
lib/sass/buttons.scss
Unescape View File

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

22
lib/sass/docs.scss
Unescape View File

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

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

@ -19,7 +19,7 @@
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)
> a:not([class*="button"]) {
> a:not(.btn) {
position: relative;
display: block;
padding: inherit;
@ -67,7 +67,7 @@
// -------------------------------------------------------------------------------
.chevron,
[class*="button"],
.btn,
[class*="badge"],
.toggle {
position: absolute;
@ -89,7 +89,7 @@
}
// Position buttons vertically centered on the right in table view items
[class*="button"] {
.btn {
left: auto;
margin-top: -12px; // Half height of button
}
@ -106,12 +106,12 @@
padding-left: 59px;
background-position-x: 59px; // Make room for your left aligned media/icons.
> a:not([class*="button"]) {
> a:not(.btn) {
margin-left: -59px;
}
> .pull-left,
> a:not([class*="button"]) .pull-left {
> a:not(.btn) .pull-left {
position: absolute;
left: 15px;
z-index: 1;

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

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

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

@ -54,49 +54,49 @@ $negative-color: #e71e1e;
// Buttons
// --------------------------------------------------
[class*="button"] {
.btn {
color: $default-color;
border-color: $default-color;
&:active,
&.active,
&.button-filled {
&.btn-filled {
background-color: $default-color;
}
}
// Primary button (Default color is blue)
.button-primary {
.btn-primary {
color: $primary-color;
border-color: $primary-color;
&:active,
&.active,
&.button-filled {
&.btn-filled {
background-color: $primary-color;
}
}
// Positive button (Default color is green)
.button-positive {
.btn-positive {
color: $positive-color;
border-color: $positive-color;
&:active,
&.active,
&.button-filled {
&.btn-filled {
background-color: $positive-color;
}
}
// Negative button (Default color is red)
.button-negative {
.btn-negative {
color: $negative-color;
border-color: $negative-color;
&:active,
&.active,
&.button-filled {
&.btn-filled {
background-color: $negative-color;
}
}
@ -104,32 +104,21 @@ $negative-color: #e71e1e;
.bar-title {
// Generic style for all buttons in .bar-title
[class*="button"] {
.btn {
color: #fff;
}
// Override standard button active states
.button:active,
.button.active,
.button-prev:active,
.button-prev.active,
.button-next:active,
.button-next.active,
.button-primary:active,
.button-primary.active {
.btn:active,
.btn.active,
.btn-prev:active,
.btn-prev.active,
.btn-next:active,
.btn-next.active,
.btn-primary:active,
.btn-primary.active {
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
// --------------------------------------------------
[class*="button"] {
.btn {
border: 1px solid $default-color;
color: $default-color;
background-color: $chrome-color;
@ -209,7 +209,7 @@ textarea,
// --------------------------------------------------
// Primary button (Default color is blue)
.button-primary {
.btn-primary {
color: #fff;
border: 1px solid $primary-color;
background-color: $primary-color;
@ -222,7 +222,7 @@ textarea,
}
// Positive button (Default color is green)
.button-positive {
.btn-positive {
color: #fff;
border: 1px solid $positive-color;
background-color: $positive-color;
@ -235,7 +235,7 @@ textarea,
}
// Negative button (Default color is red)
.button-negative {
.btn-negative {
color: #fff;
border: 1px solid $negative-color;
background-color: $negative-color;
@ -248,28 +248,28 @@ textarea,
}
// Outlined buttons
.button-outlined {
.btn-outlined {
background-color: transparent;
&.button-primary {
&.btn-primary {
color: $primary-color;
}
&.button-positive {
&.btn-positive {
color: $positive-color;
}
&.button-negative {
&.btn-negative {
color: $negative-color;
}
// Active states
&.button-primary:active,
&.button-positive:active,
&.button-negative:active {
&.btn-primary:active,
&.btn-positive:active,
&.btn-negative:active {
color: #fff;
}
}
// Link button (Buttons that look like links)
.button-link {
.btn-link {
color: $primary-color;
background-color: transparent;
border: none;
@ -285,7 +285,7 @@ textarea,
// --------------------------------------------------
.bar-nav {
.button-link {
.btn-link {
color: $primary-color;
&:active {

Write Preview
Loading…
Cancel
Save