Merge pull request #35 from picturepan2/hotfix/badge-on-tabs

Hotfix/badge on tabs
picturepan2 · May 4, 2016 · e0b8c04 · e0b8c04
2 parents 85669b2 + 8599d4a
commit e0b8c04
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 75 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",

diff --git a/dist/spectre.css b/dist/spectre.css
@@ -1117,6 +1117,7 @@ textarea.form-input {
   padding: 0;
   position: absolute;
   top: .5rem;
+  transition: all .15s ease;
   vertical-align: top;
   width: 1.4rem;
 }
@@ -1133,6 +1134,7 @@ textarea.form-input {
   border-radius: .2rem;
 }
 .form-checkbox input:checked + .form-icon::after {
+  background-clip: padding-box;
   border: .2rem solid #fff;
   border-left-width: 0;
   border-top-width: 0;
@@ -1171,6 +1173,7 @@ textarea.form-input {
 }
 .form-switch .form-icon {
   background: #c5c5c5;
+  background-clip: padding-box;
   border: .1rem solid #c5c5c5;
   border-radius: .9rem;
   display: inline-block;
@@ -1401,17 +1404,18 @@ textarea.form-input {
 .badge {
   position: relative;
 }
-.badge::after {
+.badge[data-badge]::after {
   background: #5764c6;
+  background-clip: padding-box;
   border: .1rem solid #fff;
   border-radius: 1rem;
   color: #fff;
   content: attr(data-badge);
   display: inline-block;
-  font-size: 1.2rem;
-  height: 2rem;
-  line-height: 1.4rem;
-  min-width: 2rem;
+  font-size: 1.1rem;
+  height: 1.8rem;
+  line-height: 1.2rem;
+  min-width: 1.8rem;
   padding: .2rem .5rem;
   text-align: center;
   -webkit-transform: translate(-.2rem, -.8rem);
@@ -1765,6 +1769,13 @@ textarea.form-input {
   flex: 1 0 auto;
   text-align: center;
 }
+.tab.tab-block .tab-item .badge[data-badge]::after {
+  position: absolute;
+  right: 1.5rem;
+  top: .5rem;
+  -webkit-transform: translate(50%, -.8rem);
+  transform: translate(50%, -.8rem);
+}
 .pagination {
   display: inline-block;
   padding: 1.2rem;

diff --git a/dist/spectre.min.css b/dist/spectre.min.css
diff --git a/index.html b/index.html
@@ -1660,6 +1660,70 @@ <h6>Korean</h6>
         &lt;<span class="tag">/a</span>&gt;
     &lt;<span class="tag">/li</span>&gt;
 &lt;<span class="tag">/ul</span>&gt;
+</pre>
+            <div class="columns">
+                <div class="column">
+                    <ul class="tab">
+                        <li class="tab-item active">
+                            <a href="#tabs" class="badge" data-badge="9">
+                                Music
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Playlists
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Radio
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Connect
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="column">
+                    <ul class="tab tab-block">
+                        <li class="tab-item active">
+                            <a href="#tabs" class="badge" data-badge="9">
+                                Music
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Playlists
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Radio
+                            </a>
+                        </li>
+                        <li class="tab-item">
+                            <a href="#tabs">
+                                Connect
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <section class="notes">
+                <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
+            </section>
+
+            <!-- tabs with badges example -->
+<pre class="code lang-html">
+&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
+    &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
+        &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;9&quot;</span>&gt;
+            Music
+        &lt;<span class="tag">/a</span>&gt;
+    &lt;<span class="tag">/li</span>&gt;
+&lt;<span class="tag">/ul</span>&gt;
 </pre>
 
             <header id="pagination" class="text-center"><h5>pagination</h5></header>
@@ -2197,7 +2261,7 @@ <h6 class="card-meta">Software and hardware</h6>
     <footer class="bg-grey">
         <section id="copyright" class="grid-footer grid-960">
             <p>
-                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.17
+                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.18
             </p>
             <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
         </section>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "homepage": "http://picturepan2.github.io/spectre",
   "author": "Yan Zhu <picturepan2@hotmail.com>",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",

diff --git a/src/badges.less b/src/badges.less
@@ -2,17 +2,18 @@
 .badge {
   position: relative;
 
-  &::after {
+  &[data-badge]::after {
     background: @core-color;
+    background-clip: padding-box;
     border: .1rem solid #fff;
     border-radius: 1rem;
     color: @core-text-color;
     content: attr(data-badge);
     display: inline-block;
-    font-size: 1.2rem;
-    height: 2rem;
-    line-height: 1.4rem;
-    min-width: 2rem;
+    font-size: 1.1rem;
+    height: 1.8rem;
+    line-height: 1.2rem;
+    min-width: 1.8rem;
     padding: .2rem .5rem;
     text-align: center;
     transform: translate(-.2rem, -.8rem);