Browse Source

twerkin badges

pull/245/head
connors 11 years ago
parent
commit
7e9110196a
  1. 39
      dist/ratchet.css
  2. 13
      index.html
  3. 50
      lib/sass/badges.scss
  4. 2
      lib/sass/buttons.scss

39
dist/ratchet.css vendored

@ -777,50 +777,59 @@ input[type="button"] {
[class*="badge"] {
display: inline-block;
color: #333;
}
[class*="badge"].badge-filled {
padding: 2px 9px;
font-size: 13px;
line-height: 1;
color: #333;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 100px;
}
[class*="badge"].badge-inverted {
padding: 0;
background-color: transparent;
}
.badge-primary {
color: #428bca;
}
.badge-primary.badge-filled {
color: #fff;
background-color: #428bca;
}
.badge-primary.badge-inverted {
color: #428bca;
}
.badge-positive {
color: #5cb85c;
}
.badge-positive.badge-filled {
color: #fff;
background-color: #5cb85c;
}
.badge-positive.badge-inverted {
color: #5cb85c;
}
.badge-negative {
color: #d9534f;
}
.badge-negative.badge-filled {
color: #fff;
background-color: #d9534f;
}
.badge-negative.badge-inverted {
color: #d9534f;
}
[class*="button"] [class*="badge"] {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0, 0, 0, 0.15);
}
.button-filled .badge-filled,
[class*="button"]:active .badge-filled {
background-color: rgba(0, 0, 0, 0.15);
[class*="button"] .badge-inverted,
[class*="button"]:active .badge-inverted {
background-color: transparent;
}
.button-primary:active .badge-inverted,
.button-positive:active .badge-inverted,
.button-negative:active .badge-inverted {
color: #fff;
}
.button-block [class*="badge"] {

13
index.html

@ -621,10 +621,10 @@ layout: default
<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">1</span></a>
<a class="button-outlined button-primary">Badge button<span class="badge-primary">1</span></a>
<a class="button-outlined button-positive">Badge button<span class="badge-positive">1</span></a>
<a class="button-outlined 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>
{% endhighlight %}
</article>
@ -733,6 +733,11 @@ layout: default
<span class="badge-primary">2</span>
<span class="badge-positive">3</span>
<span class="badge-negative">4</span>
<span class="badge badge-inverted">1</span>
<span class="badge-primary badge-inverted">2</span>
<span class="badge-positive badge-inverted">3</span>
<span class="badge-negative badge-inverted">4</span>
{% endhighlight %}

50
lib/sass/badges.scss

@ -4,14 +4,16 @@
[class*="badge"] {
display: inline-block;
padding: 2px 9px;
font-size: 13px;
line-height: 1;
color: #333;
background-color: rgba(0,0,0,.15);
border-radius: 100px;
&.badge-filled {
padding: 2px 9px;
font-size: 13px;
line-height: 1;
background-color: rgba(0,0,0,.15);
border-radius: 100px;
&.badge-inverted {
padding: 0;
background-color: transparent;
}
}
@ -21,31 +23,31 @@
// Main badge
.badge-primary {
color: $primary-color;
color: #fff;
background-color: $primary-color;
&.badge-filled {
color: #fff;
background-color: $primary-color;
&.badge-inverted {
color: $primary-color;
}
}
// Positive badge
.badge-positive {
color: $positive-color;
color: #fff;
background-color: $positive-color;
&.badge-filled {
color: #fff;
background-color: $positive-color;
&.badge-inverted {
color: $positive-color;
}
}
// Negative badge
.badge-negative {
color: $negative-color;
color: #fff;
background-color: $negative-color;
&.badge-filled {
color: #fff;
background-color: $negative-color;
&.badge-inverted {
color: $negative-color;
}
}
@ -59,12 +61,18 @@
padding-top: 2px;
padding-bottom: 2px;
margin: -2px -4px -2px 4px;
background-color: rgba(0,0,0,.15);
}
// Styles for filled badges within filled buttons
.button-filled .badge-filled,
[class*="button"]:active .badge-filled {
background-color: rgba(0,0,0,.15);
[class*="button"] .badge-inverted,
[class*="button"]:active .badge-inverted {
background-color: transparent;
}
.button-primary:active .badge-inverted,
.button-positive:active .badge-inverted,
.button-negative:active .badge-inverted {
color: #fff;
}
// Position badges within block level buttons

2
lib/sass/buttons.scss

@ -74,7 +74,7 @@
}
}
// Outline buttons
// Outlined buttons
.button-outlined {
background-color: transparent;

Loading…
Cancel
Save