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

Adding filled counts and fixing counts within buttons.

pull/214/head
connors 11 years ago
parent
70ea3508ce
commit
b9084021ee
3 changed files with 74 additions and 33 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. 28
      dist/ratchet.css
  2. 30
      docs/index.html
  3. 49
      lib/sass/counts.scss

28
dist/ratchet.css vendored
Unescape View File

@ -753,40 +753,52 @@ input[type="button"] {
[class*="count"] {
display: inline-block;
color: #929292;
}
[class*="count"].count-filled {
padding: 4px 9px;
font-size: 12px;
font-weight: bold;
line-height: 13px;
color: #fff;
line-height: 1;
background-color: #929292;
border-radius: 100px;
}
.count-primary {
color: #007aff;
}
.count-primary.count-filled {
background-color: #007aff;
}
.count-positive {
color: #4cd964;
}
.count-positive.count-filled {
background-color: #4cd964;
}
.count-negative {
color: #dd524d;
}
.count-negative.count-filled {
background-color: #dd524d;
}
[class*="button"] [class*="count"] {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
margin-right: -4px;
margin-left: 4px;
background-color: rgba(0, 0, 0, 0.1);
margin: -2px -4px -2px 4px;
}
.button-filled .count-filled,
[class*="button"]:active .count-filled {
background-color: rgba(0, 0, 0, 0.2);
}
.button-block [class*="count"] {
position: absolute;
right: 0;
padding-top: 4px;
padding-bottom: 4px;
margin-right: 10px;
}

30
docs/index.html
Unescape View File

@ -684,17 +684,22 @@
<h3 class="component-title">Buttons with counts</h3>
<div class="component-example">
<a class="button">Count button<span class="count">1</span></a>
<a class="button-primary">Count button<span class="count">1</span></a>
<a class="button-positive">Count button<span class="count">1</span></a>
<a class="button-negative">Count button<span class="count">1</span></a>
<a class="button">Count button<span class="count count-filled">1</span></a>
<a class="button-primary">Count button<span class="count-primary count-filled">1</span></a>
<a class="button-positive">Count button<span class="count-positive count-filled">1</span></a>
<a class="button-negative">Count button<span class="count-negative count-filled">1</span></a>
</div>
<pre class="prettyprint">
&lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-primary&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button&quot;&gt;Count button&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-primary&quot;&gt;Count button&lt;span class=&quot;count-primary count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-positive&quot;&gt;Count button&lt;span class=&quot;count-positive count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-negative&quot;&gt;Count button&lt;span class=&quot;count-negative count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-filled&quot;&gt;Count button&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-filled button-primary&quot;&gt;Count button&lt;span class=&quot;count-primary count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-filled button-positive&quot;&gt;Count button&lt;span class=&quot;count-positive count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
&lt;a class=&quot;button-filled button-negative&quot;&gt;Count button&lt;span class=&quot;count-negative count-filled&quot;&gt;1&lt;/span&gt;&lt;/a&gt;
</pre>
</article>
@ -795,6 +800,10 @@
<span class="count-primary">2</span>
<span class="count-positive">3</span>
<span class="count-negative">4</span>
<span class="count count-filled">1</span>
<span class="count-primary count-filled">2</span>
<span class="count-positive count-filled">3</span>
<span class="count-negative count-filled">4</span>
</div>
<pre class="prettyprint">
@ -802,6 +811,11 @@
&lt;span class=&quot;count-primary&quot;&gt;2&lt;/span&gt;
&lt;span class=&quot;count-positive&quot;&gt;3&lt;/span&gt;
&lt;span class=&quot;count-negative&quot;&gt;4&lt;/span&gt;
&lt;span class=&quot;count count-filled&quot;&gt;1&lt;/span&gt;
&lt;span class=&quot;count-primary count-filled&quot;&gt;2&lt;/span&gt;
&lt;span class=&quot;count-positive count-filled&quot;&gt;3&lt;/span&gt;
&lt;span class=&quot;count-negative count-filled&quot;&gt;4&lt;/span&gt;
</pre>
</article>

49
lib/sass/counts.scss
Unescape View File

@ -4,13 +4,15 @@
[class*="count"] {
display: inline-block;
padding: 4px 9px;
font-size: 12px;
font-weight: bold;
line-height: 13px;
color: #fff;
background-color: $default-color;
border-radius: 100px;
color: $default-color;
&.count-filled {
padding: 4px 9px;
color: #fff;
line-height: 1;
background-color: $default-color;
border-radius: 100px;
}
}
@ -19,39 +21,52 @@
// Main count
.count-primary {
background-color: $primary-color;
color: $primary-color;
&.count-filled {
background-color: $primary-color;
}
}
// Positive count
.count-positive {
background-color: $positive-color;
color: $positive-color;
&.count-filled {
background-color: $positive-color;
}
}
// Negative count
.count-negative {
background-color: $negative-color;
color: $negative-color;
&.count-filled {
background-color: $negative-color;
}
}
// Counts in buttons
// --------------------------------------------------
// Generic styles for all counts within buttons
// Generic styles for all counts within default buttons
[class*="button"] [class*="count"] {
font-size: 12px;
padding-top: 2px;
padding-bottom: 2px;
margin-right: -4px;
margin-left: 4px;
background-color: rgba(0, 0, 0, .1);
margin: -2px -4px -2px 4px;
}
// Styles for filled counts within filled buttons
.button-filled .count-filled,
[class*="button"]:active .count-filled {
background-color: rgba(0,0,0,.2);
}
// Position counts within block level buttons
// Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
// stays at true center of button
.button-block [class*="count"] {
position: absolute;
right: 0;
padding-top: 4px;
padding-bottom: 4px;
margin-right: 10px;
}
Write Preview
Loading…
Cancel
Save