Merge pull request #63 from Wisembly/icons-modifiers

Icons modifiers
Wisembly · Jun 10, 2015 · 5d97c92 · 5d97c92
2 parents 25dff55 + e26340a
commit 5d97c92
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 10 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "tapestry",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "homepage": "https://github.com/Wisembly/tapestry",
   "description": "Wisembly - UI Elements",
   "keywords": [

diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/fonts/icons.eot b/dist/fonts/icons.eot
diff --git a/dist/fonts/icons.svg b/dist/fonts/icons.svg
diff --git a/dist/fonts/icons.ttf b/dist/fonts/icons.ttf
diff --git a/dist/fonts/icons.woff b/dist/fonts/icons.woff
diff --git a/src/scss/components/icons/_base.scss b/src/scss/components/icons/_base.scss
@@ -30,6 +30,14 @@
   font-size: $base-fz * .8;
 }
 
+.Icon--l {
+  font-size: $fz--l;
+}
+
+.Icon--xl {
+  font-size: $fz--xl;
+}
+
 
 %Icon--actionItem {
   content: "\e001";

diff --git a/src/scss/components/icons/icons.md b/src/scss/components/icons/icons.md
@@ -6,6 +6,14 @@
 <i class="Icon Icon--wisembly"></i>
 ```
 
+## Sizes
+
+```html
+<i class="Icon Icon--like Icon--s"></i>
+<i class="Icon Icon--like Icon--l"></i>
+<i class="Icon Icon--like Icon--xl"></i>
+```
+
 ## List
 ```esc
 
@@ -990,4 +998,4 @@
   </div>
 </div>
 
-```
+```
diff --git a/src/scss/components/icons/templates/_base.scss.tpl b/src/scss/components/icons/templates/_base.scss.tpl
@@ -30,6 +30,14 @@
   font-size: $base-fz * .8;
 }
 
+.<%= className %>--l {
+  font-size: $fz--l;
+}
+
+.<%= className %>--xl {
+  font-size: $fz--xl;
+}
+
 <% _.each(glyphs, function(glyph) { %>
 %<%= className %>--<%= glyph.name %> {
   content: "\<%= glyph.codepoint.toString(16) %>";

diff --git a/src/scss/components/icons/templates/_icons.md.tpl b/src/scss/components/icons/templates/_icons.md.tpl
@@ -6,6 +6,14 @@
 <i class="Icon Icon--wisembly"></i>
 ```
 
+## Sizes
+
+```html
+<i class="Icon Icon--like Icon--s"></i>
+<i class="Icon Icon--like Icon--l"></i>
+<i class="Icon Icon--like Icon--xl"></i>
+```
+
 ## List
 ```esc
 <% _.each(glyphs, function (glyph) { %>
@@ -18,4 +26,5 @@
   </div>
 </div>
 <% }); %>
-```
+```
+