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

twerkin badges

pull/245/head
connors 11 years ago
parent
ecc391a731
commit
7e9110196a
4 changed files with 63 additions and 41 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. 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
Unescape View File

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

13
index.html
Unescape View File

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

50
lib/sass/badges.scss
Unescape View File

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

2
lib/sass/buttons.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save