days work on messages, icons, segments

Former-commit-id: 0a49f91e68
Former-commit-id: 8817fff778

build/minified/collections/message.min.css

@@ -1 +1 @@
-.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message p{opacity:.85;margin:1em 0}.ui.message :first-child{margin-top:0}.ui.message :last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#75C9E9;background-color:#E9F9FF;color:#1D6582}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#EEFFE9;color:#119000;border-color:#2FCB05}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#AF9801}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#AD0000;border-color:#B06C6C}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2px}
+.ui.message{position:relative;min-height:18px;margin:1em 0;height:auto;background-color:rgba(0,0,0,.04);padding:1em;line-height:1.33;color:rgba(0,0,0,.6);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.ui.message .header{font-size:1.33em;font-weight:700}.ui.message p{opacity:.85;margin:1em 0}.ui.message :first-child{margin-top:0}.ui.message :last-child{margin-bottom:0}.ui.message ul.list{opacity:.85;list-style-position:inside;margin:.2em 0;padding:0}.ui.message ul.list li{position:relative;list-style-type:none;font-style:italic;margin:0 0 0 1em;padding:0}.ui.message ul.list li:before{position:absolute;content:'\2022';top:-.05em;left:-.8em;height:100%;vertical-align:baseline;opacity:.5}.ui.message ul.list li:first-child{margin-top:0}.ui.message>.icon.close{cursor:pointer;position:absolute;top:1em;right:.5em;opacity:.7;-webkit-transition:opacity .1s linear;-moz-transition:opacity .1s linear;-o-transition:opacity .1s linear;-ms-transition:opacity .1s linear;transition:opacity .1s linear}.ui.message>.icon.close:hover{opacity:1}.ui.message.visible,.ui.header.visible{display:block!important}.ui.message.hidden,.ui.header.hidden{display:none}.ui.compact.message{display:inline-block}.ui.attached.message{margin-bottom:0;-webkit-border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.bottom.attached.message{margin-top:0;-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px;-webkit-box-shadow:0 0 0 1px #DDD;-moz-box-shadow:0 0 0 1px #DDD;box-shadow:0 0 0 1px #DDD}.ui.icon.message>.icon{display:table-cell;vertical-align:middle;font-size:3.8em;padding-right:.4em;opacity:.2}.ui.icon.message>.content{display:table-cell;vertical-align:middle}.ui.inverted.message{background-color:rgba(255,255,255,.05);color:rgba(255,255,255,.95)}.ui.black.message{background-color:#333;color:rgba(255,255,255,.95)}.ui.blue.message,.ui.info.message{border-color:#75C9E9;background-color:#E9F9FF;color:#1D6582}.ui.green.message,.ui.success.message,.ui.positive.message{background-color:#EEFFE9;color:#119000;border-color:#2FCB05}.ui.yellow.message,.ui.warning.message{background-color:#F6F3D5;border-color:#CBB105;color:#AF9801}.ui.red.message,.ui.error.message,.ui.negative.message{background-color:#F1D7D7;color:#AD0000;border-color:#B06C6C}.ui.small.message{font-size:.875em}.ui.message{font-size:1em}.ui.large.message{font-size:1.125em}.ui.huge.message{font-size:1.5em}.ui.massive.message{font-size:2em}

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-5e96d167df16b96a5a743404cb9f9046d13c8074
+18baf2216d41d73d40c246a400fabcba27d2cdc0

build/uncompressed/collections/message.css

@@ -214,5 +214,5 @@
   font-size: 1.5em;
 }
 .ui.massive.message {
-  font-size: 2px;
+  font-size: 2em;
 }

build/uncompressed/elements/icons.css

@@ -20,18 +20,17 @@
   font-style: normal;
 }
 i.icon {
-  font-family: 'Icons';
   display: inline-block;
+  opacity: 0.75;
+  margin: 0em 0.25em 0em 0em;
   width: 1em;
   height: 1em;
-  margin: 0em 0.25em 0em 0em;
+  font-family: 'Icons';
   font-style: normal;
   line-height: 1;
   font-weight: normal;
   text-decoration: inherit;
   text-align: center;
-  vertical-align: baseline;
-  opacity: 0.75;
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
@@ -42,10 +41,6 @@ i.icon.circle.attention:before {
   content: '\2757';
 }
 /* '❗' */
-i.icon.circle.cancel:before {
-  content: '\2716';
-}
-/* '✖' */
 i.icon.circle.help:before {
   content: '\e704';
 }
@@ -54,7 +49,7 @@ i.icon.circle.info:before {
   content: '\e705';
 }
 /* '' */
-i.icon.circle.plus:before {
+i.icon.add:before {
   content: '\2795';
 }
 /* '➕' */
@@ -166,7 +161,7 @@ i.icon.lock:before {
   content: '🔒';
 }
 /* '\1f512' */
-i.icon.lock.open:before {
+i.icon.unlock:before {
   content: '🔓';
 }
 /* '\1f513' */
@@ -182,15 +177,19 @@ i.icon.layout.list:before {
   content: '\e80b';
 }
 /* '' */
+i.icon.heart.empty:before {
+  content: '\2661';
+}
+/* '♡' */
+i.icon.heart:before {
+  content: '\2665';
+}
+/* '♥' */
 i.icon.asterisk:before {
   content: '\2731';
 }
 /* '✱' */
-i.icon.at:before {
-  content: '\40';
-}
-/* '@' */
-i.icon.attach:before {
+i.icon.attachment:before {
   content: '📎';
 }
 /* '\1f4ce' */
@@ -198,7 +197,7 @@ i.icon.attention:before {
   content: '\26a0';
 }
 /* '⚠' */
-i.icon.award:before {
+i.icon.trophy:before {
   content: '🏉';
 }
 /* '\1f3c9' */
@@ -206,11 +205,7 @@ i.icon.barcode:before {
   content: '\e792';
 }
 /* '' */
-i.icon.basket:before {
-  content: '\e73d';
-}
-/* '' */
-i.icon.basket:before {
+i.icon.cart:before {
   content: '\e813';
 }
 /* '' */
@@ -231,17 +226,17 @@ i.icon.calendar:before {
 }
 /* '\1f4c5' */
 i.icon.cancel:before {
+  content: '\2716';
+}
+/* '✖' */
+i.icon.close:before {
   content: '\e80d';
 }
 /* '' */
-i.icon.cancel:before {
-  content: '\2715';
-}
-/* '✕' */
-i.icon.rewind:before {
-  content: '\27f2';
+i.icon.color:before {
+  content: '\e794';
 }
-/* '⟲' */
+/* '' */
 i.icon.chat:before {
   content: '\e720';
 }
@@ -250,7 +245,7 @@ i.icon.check:before {
   content: '\2611';
 }
 /* '☑' */
-i.icon.clock:before {
+i.icon.time:before {
   content: '🕔';
 }
 /* '\1f554' */
@@ -262,6 +257,10 @@ i.icon.code:before {
   content: '\e714';
 }
 /* '' */
+i.icon.email:before {
+  content: '\40';
+}
+/* '@' */
 i.icon.setting:before {
   content: '\26ef';
 }
@@ -274,6 +273,10 @@ i.icon.comment:before {
   content: '\e802';
 }
 /* '' */
+i.icon.clockwise.counter:before {
+  content: '\27f2';
+}
+/* '⟲' */
 i.icon.clockwise:before {
   content: '\27f3';
 }
@@ -294,7 +297,7 @@ i.icon.dollar:before {
   content: '💵';
 }
 /* '\1f4b5' */
-i.icon.easel:before {
+i.icon.paint:before {
   content: '\e7b5';
 }
 /* '' */
@@ -310,11 +313,11 @@ i.icon.export:before {
   content: '\e715';
 }
 /* '' */
-i.icon.eye:before {
+i.icon.hide:before {
   content: '\e80f';
 }
 /* '' */
-i.icon.hidden.eye:before {
+i.icon.unhide:before {
   content: '\e70b';
 }
 /* '' */
@@ -334,7 +337,7 @@ i.icon.flag:before {
   content: '\2691';
 }
 /* '⚑' */
-i.icon.flash:before {
+i.icon.lightning:before {
   content: '\26a1';
 }
 /* '⚡' */
@@ -366,39 +369,27 @@ i.icon.headphones:before {
   content: '🎧';
 }
 /* '\1f3a7' */
-i.icon.heart-empty:before {
-  content: '\2661';
-}
-/* '♡' */
-i.icon.heart:before {
-  content: '\2665';
-}
-/* '♥' */
 i.icon.question:before {
   content: '\2753';
 }
 /* '❓' */
-i.icon.home-alt:before {
-  content: '\e80e';
-}
-/* '' */
 i.icon.home:before {
   content: '\2302';
 }
 /* '⌂' */
-i.icon.i-letter:before {
+i.icon.i:before {
   content: '\2139';
 }
 /* 'ℹ' */
-i.icon.lamp:before {
+i.icon.idea:before {
   content: '💡';
 }
 /* '\1f4a1' */
-i.icon.link:before {
+i.icon.link.open:before {
   content: '🔗';
 }
 /* '\1f517' */
-i.icon.list:before {
+i.icon.content:before {
   content: '\e782';
 }
 /* '' */
@@ -430,11 +421,11 @@ i.icon.pause:before {
   content: '\e808';
 }
 /* '' */
-i.icon.pictures:before {
+i.icon.photos:before {
   content: '\e812';
 }
 /* '' */
-i.icon.picture:before {
+i.icon.photo:before {
   content: '🌄';
 }
 /* '\1f304' */
@@ -466,7 +457,7 @@ i.icon.shuffle:before {
   content: '\e803';
 }
 /* '' */
-i.icon.stop:before {
+i.icon.square:before {
   content: '\e807';
 }
 /* '' */
@@ -482,35 +473,23 @@ i.icon.terminal:before {
   content: '\e7ac';
 }
 /* '' */
-i.icon.thumbs-down:before {
+i.icon.thumbs.down:before {
   content: '👎';
 }
 /* '\1f44e' */
-i.icon.thumbs-up:before {
+i.icon.thumbs.up:before {
   content: '👍';
 }
 /* '\1f44d' */
-i.icon.tint:before {
-  content: '\e794';
-}
-/* '' */
 i.icon.to-end:before {
-  content: '\e762';
-}
-/* '' */
-i.icon.to-end-alt:before {
   content: '\e806';
 }
 /* '' */
 i.icon.to-start:before {
-  content: '\e763';
-}
-/* '' */
-i.icon.to-start-alt:before {
   content: '\e805';
 }
 /* '' */
-i.icon.top-list:before {
+i.icon.top.list:before {
   content: '🏆';
 }
 /* '\1f3c6' */
@@ -518,15 +497,15 @@ i.icon.trash:before {
   content: '\e729';
 }
 /* '' */
-i.icon.twitter-bird:before {
+i.icon.twitter:before {
   content: '\f303';
 }
 /* '' */
-i.icon.upload-cloud:before {
+i.icon.upload:before {
   content: '\e711';
 }
 /* '' */
-i.icon.user-add:before {
+i.icon.user.add:before {
   content: '\e700';
 }
 /* '' */
@@ -534,7 +513,7 @@ i.icon.user:before {
   content: '👤';
 }
 /* '\1f464' */
-i.icon.users-alt:before {
+i.icon.community:before {
   content: '\e814';
 }
 /* '' */
@@ -542,15 +521,15 @@ i.icon.users:before {
   content: '👥';
 }
 /* '\1f465' */
-i.icon.vcard:before {
+i.icon.id:before {
   content: '\e722';
 }
 /* '' */
-i.icon.zoom-in:before {
+i.icon.zoom.in:before {
   content: '\e750';
 }
 /* '' */
-i.icon.zoom-out:before {
+i.icon.zoom.out:before {
   content: '\e751';
 }
 /* '' */
@@ -583,17 +562,13 @@ i.icon.right-dir {
   width: 1em;
   margin: 0em 0em 0em 0.1em;
 }
-i.icon.clock {
+i.icon.time {
   margin-top: -0.05em;
 }
 /*--------------
      Aliases
 ---------------*/
 /* aliases for convenience */
-i.icon.close:before {
-  content: '\e80d';
-}
-/* '' */
 i.icon.help:before {
   content: '\e704';
 }
@@ -606,6 +581,26 @@ i.icon.error:before {
   content: '\e80d';
 }
 /* '' */
+i.icon.dislike:before {
+  content: '\2661';
+}
+/* '♡' */
+i.icon.like:before {
+  content: '\2665';
+}
+/* '♥' */
+i.icon.eye:before {
+  content: '\e80f';
+}
+/* '' */
+i.icon.eye.hidden:before {
+  content: '\e70b';
+}
+/* '' */
+i.icon.date:before {
+  content: '📅';
+}
+/* '\1f4c5' */
 /*******************************
              States
 *******************************/
@@ -615,8 +610,10 @@ i.icon.disabled {
 /*******************************
            Variations
 *******************************/
-i.strong.icon {
+i.emphasized.icon {
   opacity: 1;
+  padding: 0.5em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 }
 /*-------------------
       Inverted 
@@ -624,6 +621,7 @@ i.strong.icon {
 i.inverted.icon {
   background-color: #222222;
   color: #FFFFFF;
+  padding: 0.5em;
 }
 /*-------------------
        Colors
@@ -673,3 +671,26 @@ i.inverted.teal.icon {
   background-color: #00B5AD !important;
   color: #FFFFFF !important;
 }
+/*-------------------
+        Sizes 
+--------------------*/
+i.small.icon {
+  font-size: 0.875em;
+  vertical-align: top;
+}
+i.icon {
+  font-size: 1em;
+  vertical-align: baseline;
+}
+i.large.icon {
+  font-size: 1.5em;
+  vertical-align: middle;
+}
+i.huge.icon {
+  font-size: 2em;
+  vertical-align: middle;
+}
+i.massive.icon {
+  font-size: 4em;
+  vertical-align: middle;
+}

node/src/documents/collections/message.html

@@ -216,6 +216,23 @@ type   : 'UI Collection'
     </div>
   </div>
   
+  <div class="example">
+    <h4>Sizes</h4>
+    <p>A text block can have different sizes</p>
+    <div class="ui small message">
+      This is a very small message.
+    </div>
+    <div class="ui large message">
+      This is large
+    </div>
+    <div class="ui huge message">
+      This is huge
+    </div>
+    <div class="ui massive message">
+      This is massive
+    </div>
+  </div>
+  
   </div>
   
 </div>

node/src/documents/elements/icon.html

@@ -17,175 +17,246 @@ type   : 'UI Element'
     <div class="ui vertical pointing menu">
       <a class="active item">Standard</a>
       <a class="item">States</a>
-      <a class="item">Variations</a> 
+      <a class="item">Variations</a>
     </div>
   </div>
-  
+
   <h2>Standard</h2>
 
-    
-    <h4>Icon Set</h4>    
-    <div class="ui ignored info message">
-      Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup whenn sitting alongside text.
+
+    <h4>Icon Set</h4>
+    <p>Icon sets contain an arbitrary set of icons that represent concepts a website might reference</p>
+    <div class="ui ignored warning message">
+      Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text.
+    </div>
+
+  <div class="icon example">
+    <h4>Content</h4>
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon attachment"></i> Attachment</div>
+      <div class="column"><i class="icon barcode"></i> Barcode</div>
+      <div class="column"><i class="icon bookmark"></i> Bookmark</div>
+      <div class="column"><i class="icon cart"></i> Cart</div>
+      <div class="column"><i class="icon chart"></i> Chart</div>
+      <div class="column"><i class="icon bar chart"></i> Bar chart</div>
+      <div class="column"><i class="icon pie chart"></i> Pie chart</div>
+      <div class="column"><i class="icon date"></i> Date</div>
+      <div class="column"><i class="icon doc"></i> Doc</div>
+      <div class="column"><i class="icon docs"></i> Docs</div>
+      <div class="column"><i class="icon email"></i> Email</div>
+      <div class="column"><i class="icon folder"></i> Folder</div>
+      <div class="column"><i class="icon open folder"></i> Open folder</div>
+      <div class="column"><i class="icon home"></i> Home</div>
+      <div class="column"><i class="icon mail"></i> Mail</div>
+      <div class="column"><i class="icon photo"></i> Photo</div>
+      <div class="column"><i class="icon photos"></i> Photos</div>
+      <div class="column"><i class="icon search"></i> Search</div>
+      <div class="column"><i class="icon setting"></i> Setting</div>
+      <div class="column"><i class="icon settings"></i> Settings</div>
+      <div class="column"><i class="icon tag"></i> Tag</div>
+      <div class="column"><i class="icon tags"></i> Tags</div>
+      <div class="column"><i class="icon time"></i> Time</div>
+      <div class="column"><i class="icon top list"></i> Top list</div>
+      <div class="column"><i class="icon trash"></i> Trash</div>
+      <div class="column"><i class="icon community"></i> Community</div>
+      <div class="column"><i class="icon user"></i> User</div>
+      <div class="column"><i class="icon users"></i> Users</div>
+      <div class="column"><i class="icon chat"></i> Chat</div>
+    </div>
+  </div>
+  <div class="icon example">
+    <h4>Special Content</h4>
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon trophy"></i> Trophy</div>
+      <div class="column"><i class="icon cloud"></i> Cloud</div>
+      <div class="column"><i class="icon flight"></i> Flight</div>
+      <div class="column"><i class="icon gift"></i> Gift</div>
+      <div class="column"><i class="icon dollar"></i> Dollar</div>
+      <div class="column"><i class="icon lab"></i> Lab</div>
+      <div class="column"><i class="icon rss"></i> RSS</div>
     </div>
+  </div>
   
   <div class="another icon example">
+    <h4>User Actions</h4>
     <div class="ui eight column grid">
-      <div class="column"><i class="icon home"></i> home</div>
-      <div class="column"><i class="icon asterisk"></i> asterisk</div>
-      <div class="column"><i class="icon at"></i> at</div>
-      <div class="column"><i class="icon attach"></i> attach</div>
-      <div class="column"><i class="icon attention circle"></i> attention circle</div>
-      <div class="column"><i class="icon attention"></i> attention</div>
-      <div class="column"><i class="icon award"></i> award</div>
-      <div class="column"><i class="icon barcode"></i> barcode</div>
-      <div class="column"><i class="icon basket"></i> basket</div>
-      <div class="column"><i class="icon block"></i> block</div>
-      <div class="column"><i class="icon book"></i> book</div>
-      <div class="column"><i class="icon bookmark"></i> bookmark</div>
-      <div class="column"><i class="icon calendar"></i> calendar</div>
-      <div class="column"><i class="icon cancel"></i> cancel</div>
-      <div class="column"><i class="icon cancel circle"></i> cancel circle</div>
-      <div class="column"><i class="icon cancel"></i> cancel</div>
-      <div class="column"><i class="icon rewind"></i> rewind</div>
-      <div class="column"><i class="icon bar chart"></i> bar chart</div>
-      <div class="column"><i class="icon pie chart"></i> pie chart</div>
-      <div class="column"><i class="icon chart"></i> chart</div>
-      <div class="column"><i class="icon chat"></i> chat</div>
-      <div class="column"><i class="icon check"></i> check</div>
-      <div class="column"><i class="icon clock"></i> clock</div>
-      <div class="column"><i class="icon cloud"></i> cloud</div>
+      <div class="column"><i class="icon add user"></i> Add User</div>
+      <div class="column"><i class="icon block"></i> Block</div>
+      <div class="column"><i class="icon hide"></i> Hide</div>
+      <div class="column"><i class="icon unhide"></i> Unhide</div>
+      <div class="column"><i class="icon lock"></i> Lock</div>
+      <div class="column"><i class="icon unlock"></i> Unlock</div>
+      <div class="column"><i class="icon flag"></i> Flag</div>
+      <div class="column"><i class="icon cancel"></i> Cancel</div>
+      <div class="column"><i class="icon close"></i> Close</div>
+      <div class="column"><i class="icon close"></i> Delete</div>
+      <div class="column"><i class="icon check"></i> Check</div>
+      <div class="column"><i class="icon edit"></i> Edit</div>
+      <div class="column"><i class="icon open link"></i> Open Link</div>
+      <div class="column"><i class="icon export"></i> Export</div>
+      <div class="column"><i class="icon forward"></i> Forward</div>
+      <div class="column"><i class="icon upload"></i> Upload</div>
+      <div class="column"><i class="icon like"></i> Like</div>
+      <div class="column"><i class="icon dislike"></i> Dislike</div>
+      <div class="column"><i class="icon pin"></i> Pin</div>
+      <div class="column"><i class="icon star"></i> Star</div>
+      <div class="column"><i class="icon empty star"></i> Empty Star</div>
+      <div class="column"><i class="icon half star"></i> Half Star</div>
+      <div class="column"><i class="icon print"></i> Print</div>
+      <div class="column"><i class="icon comment"></i> Comment</div>
     </div>
   </div>
+  
   <div class="another icon example">
+    <h4>View</h4>
     <div class="ui eight column grid">
-      <div class="column"><i class="icon setting"></i> setting</div>
-      <div class="column"><i class="icon settings"></i> settings</div>
-      <div class="column"><i class="icon comment"></i> comment</div>
-      <div class="column"><i class="icon clockwise"></i> clockwise</div>
-      <div class="column"><i class="icon direction"></i> direction</div>
-      <div class="column"><i class="icon doc"></i> doc</div>
-      <div class="column"><i class="icon docs"></i> docs</div>
-      <div class="column"><i class="icon dollar"></i> dollar</div>
-      <div class="column"><i class="icon down triangle"></i> down triangle</div>
-      <div class="column"><i class="icon down arrow"></i> down arrow</div>
-      <div class="column"><i class="icon down"></i> down arrow</div>
-      <div class="column"><i class="icon easel"></i> easel</div>
-      <div class="column"><i class="icon edit"></i> edit</div>
-      <div class="column"><i class="icon eject"></i> eject</div>
-      <div class="column"><i class="icon export"></i> export</div>
-      <div class="column"><i class="icon eye"></i> eye</div>
-      <div class="column"><i class="icon hidden eye"></i> hidden eye</div>
-      <div class="column"><i class="icon facebook"></i> facebook</div>
-      <div class="column"><i class="icon fast-forward"></i> fast-fw</div>
-      <div class="column"><i class="icon fire"></i> fire</div>
-      <div class="column"><i class="icon flag"></i> flag</div>
-      <div class="column"><i class="icon flash"></i> flash</div>
-      <div class="column"><i class="icon flight"></i> flight</div>
-      <div class="column"><i class="icon folder"></i> folder</div>
+      <div class="column"><i class="icon content"></i> Content</div>
+      <div class="column"><i class="icon grid layout"></i> Grid Layout</div>
+      <div class="column"><i class="icon block layout"></i> Block Layout</div>
+      <div class="column"><i class="icon list layout"></i> List Layout</div>>
+      <div class="column"><i class="icon resize full"></i> Resize Full</div>
+      <div class="column"><i class="icon resize horizontal"></i> Resize Horizontal</div>
+      <div class="column"><i class="icon resize small"></i> Resize Small</div>
+      <div class="column"><i class="icon resize vertical"></i> Resize Vertical</div>
+      <div class="column"><i class="icon zoom in"></i> Zoom in</div>
+      <div class="column"><i class="icon zoom out"></i> Zoom out</div>
     </div>
   </div>
   <div class="another icon example">
+    <h4>Media Actions</h4>
     <div class="ui eight column grid">
-      <div class="column"><i class="icon open folder"></i> open folder</div>
-      <div class="column"><i class="icon forward"></i> forward</div>
-      <div class="column"><i class="icon gift"></i> gift</div>
-      <div class="column"><i class="icon github"></i> github</div>
-      <div class="column"><i class="icon globe"></i> globe</div>
-      <div class="column"><i class="icon globe"></i> globe-alt</div>
-      <div class="column"><i class="icon desk globe"></i> desk globe</div>
-      <div class="column"><i class="icon headphones"></i> headphones</div>
-      <div class="column"><i class="icon empty heart"></i> empty heart</div>
-      <div class="column"><i class="icon heart"></i> heart</div>
-      <div class="column"><i class="icon help circle"></i> help circle</div>
-      <div class="column"><i class="icon help"></i> help</div>
-      <div class="column"><i class="icon home-alt"></i> home-alt</div>
-      <div class="column"><i class="icon home"></i> home</div>
-      <div class="column"><i class="icon info circle"></i> info circle</div>
-      <div class="column"><i class="icon info"></i> info</div>
-      <div class="column"><i class="icon lab"></i> lab</div>
-      <div class="column"><i class="icon lamp"></i> lamp</div>
-      <div class="column"><i class="icon left triangle"></i> left triangle</div>
-      <div class="column"><i class="icon left arrow"></i> left open</div>
-      <div class="column"><i class="icon left"></i> left</div>
-      <div class="column"><i class="icon link"></i> link</div>
-      <div class="column"><i class="icon list"></i> list</div>
-      <div class="column"><i class="icon location"></i> location</div>
-      <div class="column"><i class="icon open lock"></i> open lock</div>
-      <div class="column"><i class="icon lock"></i> lock</div>
-      <div class="column"><i class="icon mail"></i> mail</div>
-      <div class="column"><i class="icon mic"></i> mic</div>
-      <div class="column"><i class="icon minus"></i> minus</div>
-      <div class="column"><i class="icon money"></i> money</div>
-      <div class="column"><i class="icon off"></i> off</div>
+      <div class="column"><i class="icon eject"></i> Eject</div>
+      <div class="column"><i class="icon fast-forward"></i> Fast-forward</div>
+      <div class="column"><i class="icon pause"></i> Pause</div>
+      <div class="column"><i class="icon play"></i> Play</div>
+      <div class="column"><i class="icon to-end"></i> To-start</div>
+      <div class="column"><i class="icon to-start"></i> To-end</div>
+      <div class="column"><i class="icon forward"></i> Forward</div>
+      <div class="column"><i class="icon shuffle"></i> Shuffle</div>
+      <div class="column"><i class="icon clockwise"></i> Clockwise</div>
+      <div class="column"><i class="icon counter clockwise"></i> Counter clockwise</div>
     </div>
   </div>
   <div class="another icon example">
+    <h4>Objects</h4>
     <div class="ui eight column grid">
-      <div class="column"><i class="icon pause"></i> pause</div>
-      <div class="column"><i class="icon picture"></i> picture</div>
-      <div class="column"><i class="icon pictures"></i> pictures</div>
-      <div class="column"><i class="icon pin"></i> pin</div>
-      <div class="column"><i class="icon play-alt"></i> play-alt</div>
-      <div class="column"><i class="icon plus circle"></i> plus circle</div>
-      <div class="column"><i class="icon plus"></i> plus</div>
-      <div class="column"><i class="icon print"></i> print</div>
-      <div class="column"><i class="icon resize full"></i> resize full</div>
-      <div class="column"><i class="icon resize horizontal"></i> resize horizontal</div>
-      <div class="column"><i class="icon resize small"></i> resize small</div>
-      <div class="column"><i class="icon resize vertical"></i> resize vertical</div>
-      <div class="column"><i class="icon right"></i> right</div>
-      <div class="column"><i class="icon right triangle"></i> right triangle</div>
-      <div class="column"><i class="icon right arrow"></i> right arrow</div>
-      <div class="column"><i class="icon rss"></i> rss</div>
-      <div class="column"><i class="icon search"></i> search</div>
-      <div class="column"><i class="icon shuffle-alt"></i> shuffle-alt</div>
-      <div class="column"><i class="icon star"></i> star</div>
-      <div class="column"><i class="icon empty star"></i> empty star</div>
-      <div class="column"><i class="icon half star"></i> half star</div>
-      <div class="column"><i class="icon stop"></i> stop-alt</div>
-      <div class="column"><i class="icon tag"></i> tag-alt</div>
-      <div class="column"><i class="icon tags"></i> tags</div>
-      <div class="column"><i class="icon terminal"></i> terminal</div>
-      <div class="column"><i class="icon grid layout"></i> grid layout</div>
-      <div class="column"><i class="icon block layout"></i> block layout</div>
-      <div class="column"><i class="icon list layout"></i> list layout</div>
-      <div class="column"><i class="icon thumbs-down"></i> thumbs-down</div>
-      <div class="column"><i class="icon thumbs-up"></i> thumbs-up</div>
-      <div class="column"><i class="icon tint"></i> tint</div>
-      <div class="column"><i class="icon to-end-alt"></i> to-end-alt</div>
+      <div class="column"><i class="icon book"></i> Book</div>
+      <div class="column"><i class="icon calendar"></i> Calendar</div>
+      <div class="column"><i class="icon color"></i> Color</div>
+      <div class="column"><i class="icon desk globe"></i> Desk globe</div>
+      <div class="column"><i class="icon fire"></i> Fire</div>
+      <div class="column"><i class="icon globe"></i> Globe</div>
+      <div class="column"><i class="icon headphones"></i> Headphones</div>
+      <div class="column"><i class="icon id"></i> Id</div>
+      <div class="column"><i class="icon idea"></i> Idea</div>
+      <div class="column"><i class="icon lightning"></i> Lightning</div>
+      <div class="column"><i class="icon money"></i> Money</div>
+      <div class="column"><i class="icon paint"></i> Paint</div>
     </div>
   </div>
+  
+  
   <div class="another icon example">
+    <h4>Indications</h4>
     <div class="ui eight column grid">
-      <div class="column"><i class="icon to-start-alt"></i> to-start-alt</div>
-      <div class="column"><i class="icon to-start-alt"></i> to-start-alt</div>
-      <div class="column"><i class="icon top-list"></i> top-list</div>
-      <div class="column"><i class="icon trash"></i> trash</div>
-      <div class="column"><i class="icon twitter-bird"></i> twitter-bird</div>
-      <div class="column"><i class="icon up"></i> up</div>
-      <div class="column"><i class="icon up triangle"></i> up triangle</div>
-      <div class="column"><i class="icon up arrow"></i> up arrow</div>
-      <div class="column"><i class="icon upload-cloud"></i> upload-cloud</div>
-      <div class="column"><i class="icon user-add"></i> user-add</div>
-      <div class="column"><i class="icon user"></i> user</div>
-      <div class="column"><i class="icon users-alt"></i> users-alt</div>
-      <div class="column"><i class="icon users"></i> users</div>
-      <div class="column"><i class="icon vcard"></i> vcard</div>
-      <div class="column"><i class="icon zoom-in"></i> zoom-in</div>
-      <div class="column"><i class="icon zoom-out"></i> zoom-out</div>
+      <div class="column"><i class="icon cancel circle"></i> Cancel circle</div>
+      <div class="column"><i class="icon asterisk"></i> Asterisk</div>
+      <div class="column"><i class="icon attention circle"></i> Attention circle</div>
+      <div class="column"><i class="icon attention"></i> Attention</div>
+      <div class="column"><i class="icon empty heart"></i> Empty heart</div>
+      <div class="column"><i class="icon heart"></i> Heart</div>
+      <div class="column"><i class="icon thumbs down"></i> Thumbs down</div>
+      <div class="column"><i class="icon thumbs up"></i> Thumbs up</div>
+      <div class="column"><i class="icon terminal"></i> Terminal</div>
+      <div class="column"><i class="icon direction"></i> Direction</div>
+      
+      <div class="column"><i class="icon location"></i> Location</div>
+      <div class="column"><i class="icon help"></i> Help</div>
+      <div class="column"><i class="icon info"></i> Info</div>
+      <div class="column"><i class="icon mic"></i> Mic</div>
+      <div class="column"><i class="icon off"></i> Off</div>
+      
+      <div class="column"><i class="icon add"></i> Add</div>
     </div>
   </div>
   
-  <h2>States</h2>
+  <div class="another icon example">
+    <h4>Symbols</h4>
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon left arrow"></i> Left open</div>
+      <div class="column"><i class="icon left triangle"></i> Left triangle</div>
+      <div class="column"><i class="icon left"></i> Left</div>
+      <div class="column"><i class="icon right"></i> Right</div>
+      <div class="column"><i class="icon right triangle"></i> Right triangle</div>
+      <div class="column"><i class="icon right arrow"></i> Right arrow</div>
+      <div class="column"><i class="icon up"></i> Up</div>
+      <div class="column"><i class="icon up triangle"></i> Up triangle</div>
+      <div class="column"><i class="icon up arrow"></i> Up arrow</div>
+      <div class="column"><i class="icon down arrow"></i> Down arrow</div>
+      <div class="column"><i class="icon down triangle"></i> Down triangle</div>
+      <div class="column"><i class="icon down"></i> Down arrow</div>
+      <div class="column"><i class="icon square"></i> Square</div>
+      <div class="column"><i class="icon minus"></i> Minus</div>
+      <div class="column"><i class="icon plus"></i> Plus</div>
+    </div>
+  </div>
   
+  <div class="another icon example">
+    <h4>Social</h4>
+    <div class="ui eight column grid">
+      <div class="column"><i class="icon facebook"></i> Facebook</div>
+      <div class="column"><i class="icon twitter"></i> Twitter</div>
+      <div class="column"><i class="icon github"></i> Github</div>
+    </div>
+  </div>
+
+  <h2>States</h2>
+
   <div class="example">
     <h4>Disabled</h4>
-    <p>A icon can show that it is disabled</p>
+    <p>An icon can show that it is disabled</p>
     <i class="disabled users icon"></i>
   </div>
-  
+
   <h2>Variations</h2>
   
+  <div class="example">
+    <h4>Size</h4>
+    <p>An icon can vary in size</p>
+    <i class="small users icon"></i>
+    <i class="users icon"></i>
+    <i class="large users icon"></i>
+    <i class="huge users icon"></i>
+    <i class="massive users icon"></i>
+    
+  </div>
+  <div class="example">
+    <h4>Emphasized</h4>
+    <p>An icon can be formatted to show emphasis</p>
+    <i class="emphasized users icon"></i>
+  </div>
+  
+  <div class="example">
+    <h4>Colors</h4>
+    <p>An icon can be formatted with different colors</p>
+    <i class="black users icon"></i>
+    <i class="blue user icon"></i>
+    <i class="red community icon"></i>
+    <i class="green add user icon"></i>
+    <i class="purple chat icon"></i>
+    <i class="teal comment icon"></i>
+  </div>
   
+  <div class="example">
+    <h4>Inverted</h4>
+    <p>an icon can have its colors inverted for contrast</p>
+    <i class="inverted black users icon"></i>
+    <i class="inverted blue user icon"></i>
+    <i class="inverted red community icon"></i>
+    <i class="inverted green add user icon"></i>
+    <i class="inverted purple chat icon"></i>
+    <i class="inverted teal comment icon"></i>
+  </div>
+
+
 </div>

node/src/files/components/semantic/collections/message.css

@@ -214,5 +214,5 @@
   font-size: 1.5em;
 }
 .ui.massive.message {
-  font-size: 2px;
+  font-size: 2em;
 }

node/src/files/components/semantic/elements/icons.css

@@ -20,18 +20,17 @@
   font-style: normal;
 }
 i.icon {
-  font-family: 'Icons';
   display: inline-block;
+  opacity: 0.75;
+  margin: 0em 0.25em 0em 0em;
   width: 1em;
   height: 1em;
-  margin: 0em 0.25em 0em 0em;
+  font-family: 'Icons';
   font-style: normal;
   line-height: 1;
   font-weight: normal;
   text-decoration: inherit;
   text-align: center;
-  vertical-align: baseline;
-  opacity: 0.75;
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
@@ -42,10 +41,6 @@ i.icon.circle.attention:before {
   content: '\2757';
 }
 /* '❗' */
-i.icon.circle.cancel:before {
-  content: '\2716';
-}
-/* '✖' */
 i.icon.circle.help:before {
   content: '\e704';
 }
@@ -54,7 +49,7 @@ i.icon.circle.info:before {
   content: '\e705';
 }
 /* '' */
-i.icon.circle.plus:before {
+i.icon.add:before {
   content: '\2795';
 }
 /* '➕' */
@@ -166,7 +161,7 @@ i.icon.lock:before {
   content: '🔒';
 }
 /* '\1f512' */
-i.icon.lock.open:before {
+i.icon.unlock:before {
   content: '🔓';
 }
 /* '\1f513' */
@@ -182,15 +177,19 @@ i.icon.layout.list:before {
   content: '\e80b';
 }
 /* '' */
+i.icon.heart.empty:before {
+  content: '\2661';
+}
+/* '♡' */
+i.icon.heart:before {
+  content: '\2665';
+}
+/* '♥' */
 i.icon.asterisk:before {
   content: '\2731';
 }
 /* '✱' */
-i.icon.at:before {
-  content: '\40';
-}
-/* '@' */
-i.icon.attach:before {
+i.icon.attachment:before {
   content: '📎';
 }
 /* '\1f4ce' */
@@ -198,7 +197,7 @@ i.icon.attention:before {
   content: '\26a0';
 }
 /* '⚠' */
-i.icon.award:before {
+i.icon.trophy:before {
   content: '🏉';
 }
 /* '\1f3c9' */
@@ -206,11 +205,7 @@ i.icon.barcode:before {
   content: '\e792';
 }
 /* '' */
-i.icon.basket:before {
-  content: '\e73d';
-}
-/* '' */
-i.icon.basket:before {
+i.icon.cart:before {
   content: '\e813';
 }
 /* '' */
@@ -231,17 +226,17 @@ i.icon.calendar:before {
 }
 /* '\1f4c5' */
 i.icon.cancel:before {
+  content: '\2716';
+}
+/* '✖' */
+i.icon.close:before {
   content: '\e80d';
 }
 /* '' */
-i.icon.cancel:before {
-  content: '\2715';
-}
-/* '✕' */
-i.icon.rewind:before {
-  content: '\27f2';
+i.icon.color:before {
+  content: '\e794';
 }
-/* '⟲' */
+/* '' */
 i.icon.chat:before {
   content: '\e720';
 }
@@ -250,7 +245,7 @@ i.icon.check:before {
   content: '\2611';
 }
 /* '☑' */
-i.icon.clock:before {
+i.icon.time:before {
   content: '🕔';
 }
 /* '\1f554' */
@@ -262,6 +257,10 @@ i.icon.code:before {
   content: '\e714';
 }
 /* '' */
+i.icon.email:before {
+  content: '\40';
+}
+/* '@' */
 i.icon.setting:before {
   content: '\26ef';
 }
@@ -274,6 +273,10 @@ i.icon.comment:before {
   content: '\e802';
 }
 /* '' */
+i.icon.clockwise.counter:before {
+  content: '\27f2';
+}
+/* '⟲' */
 i.icon.clockwise:before {
   content: '\27f3';
 }
@@ -294,7 +297,7 @@ i.icon.dollar:before {
   content: '💵';
 }
 /* '\1f4b5' */
-i.icon.easel:before {
+i.icon.paint:before {
   content: '\e7b5';
 }
 /* '' */
@@ -310,11 +313,11 @@ i.icon.export:before {
   content: '\e715';
 }
 /* '' */
-i.icon.eye:before {
+i.icon.hide:before {
   content: '\e80f';
 }
 /* '' */
-i.icon.hidden.eye:before {
+i.icon.unhide:before {
   content: '\e70b';
 }
 /* '' */
@@ -334,7 +337,7 @@ i.icon.flag:before {
   content: '\2691';
 }
 /* '⚑' */
-i.icon.flash:before {
+i.icon.lightning:before {
   content: '\26a1';
 }
 /* '⚡' */
@@ -366,39 +369,27 @@ i.icon.headphones:before {
   content: '🎧';
 }
 /* '\1f3a7' */
-i.icon.heart-empty:before {
-  content: '\2661';
-}
-/* '♡' */
-i.icon.heart:before {
-  content: '\2665';
-}
-/* '♥' */
 i.icon.question:before {
   content: '\2753';
 }
 /* '❓' */
-i.icon.home-alt:before {
-  content: '\e80e';
-}
-/* '' */
 i.icon.home:before {
   content: '\2302';
 }
 /* '⌂' */
-i.icon.i-letter:before {
+i.icon.i:before {
   content: '\2139';
 }
 /* 'ℹ' */
-i.icon.lamp:before {
+i.icon.idea:before {
   content: '💡';
 }
 /* '\1f4a1' */
-i.icon.link:before {
+i.icon.link.open:before {
   content: '🔗';
 }
 /* '\1f517' */
-i.icon.list:before {
+i.icon.content:before {
   content: '\e782';
 }
 /* '' */
@@ -430,11 +421,11 @@ i.icon.pause:before {
   content: '\e808';
 }
 /* '' */
-i.icon.pictures:before {
+i.icon.photos:before {
   content: '\e812';
 }
 /* '' */
-i.icon.picture:before {
+i.icon.photo:before {
   content: '🌄';
 }
 /* '\1f304' */
@@ -466,7 +457,7 @@ i.icon.shuffle:before {
   content: '\e803';
 }
 /* '' */
-i.icon.stop:before {
+i.icon.square:before {
   content: '\e807';
 }
 /* '' */
@@ -482,35 +473,23 @@ i.icon.terminal:before {
   content: '\e7ac';
 }
 /* '' */
-i.icon.thumbs-down:before {
+i.icon.thumbs.down:before {
   content: '👎';
 }
 /* '\1f44e' */
-i.icon.thumbs-up:before {
+i.icon.thumbs.up:before {
   content: '👍';
 }
 /* '\1f44d' */
-i.icon.tint:before {
-  content: '\e794';
-}
-/* '' */
 i.icon.to-end:before {
-  content: '\e762';
-}
-/* '' */
-i.icon.to-end-alt:before {
   content: '\e806';
 }
 /* '' */
 i.icon.to-start:before {
-  content: '\e763';
-}
-/* '' */
-i.icon.to-start-alt:before {
   content: '\e805';
 }
 /* '' */
-i.icon.top-list:before {
+i.icon.top.list:before {
   content: '🏆';
 }
 /* '\1f3c6' */
@@ -518,15 +497,15 @@ i.icon.trash:before {
   content: '\e729';
 }
 /* '' */
-i.icon.twitter-bird:before {
+i.icon.twitter:before {
   content: '\f303';
 }
 /* '' */
-i.icon.upload-cloud:before {
+i.icon.upload:before {
   content: '\e711';
 }
 /* '' */
-i.icon.user-add:before {
+i.icon.user.add:before {
   content: '\e700';
 }
 /* '' */
@@ -534,7 +513,7 @@ i.icon.user:before {
   content: '👤';
 }
 /* '\1f464' */
-i.icon.users-alt:before {
+i.icon.community:before {
   content: '\e814';
 }
 /* '' */
@@ -542,15 +521,15 @@ i.icon.users:before {
   content: '👥';
 }
 /* '\1f465' */
-i.icon.vcard:before {
+i.icon.id:before {
   content: '\e722';
 }
 /* '' */
-i.icon.zoom-in:before {
+i.icon.zoom.in:before {
   content: '\e750';
 }
 /* '' */
-i.icon.zoom-out:before {
+i.icon.zoom.out:before {
   content: '\e751';
 }
 /* '' */
@@ -583,17 +562,13 @@ i.icon.right-dir {
   width: 1em;
   margin: 0em 0em 0em 0.1em;
 }
-i.icon.clock {
+i.icon.time {
   margin-top: -0.05em;
 }
 /*--------------
      Aliases
 ---------------*/
 /* aliases for convenience */
-i.icon.close:before {
-  content: '\e80d';
-}
-/* '' */
 i.icon.help:before {
   content: '\e704';
 }
@@ -606,6 +581,26 @@ i.icon.error:before {
   content: '\e80d';
 }
 /* '' */
+i.icon.dislike:before {
+  content: '\2661';
+}
+/* '♡' */
+i.icon.like:before {
+  content: '\2665';
+}
+/* '♥' */
+i.icon.eye:before {
+  content: '\e80f';
+}
+/* '' */
+i.icon.eye.hidden:before {
+  content: '\e70b';
+}
+/* '' */
+i.icon.date:before {
+  content: '📅';
+}
+/* '\1f4c5' */
 /*******************************
              States
 *******************************/
@@ -615,8 +610,10 @@ i.icon.disabled {
 /*******************************
            Variations
 *******************************/
-i.strong.icon {
+i.emphasized.icon {
   opacity: 1;
+  padding: 0.5em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 }
 /*-------------------
       Inverted 
@@ -624,6 +621,7 @@ i.strong.icon {
 i.inverted.icon {
   background-color: #222222;
   color: #FFFFFF;
+  padding: 0.5em;
 }
 /*-------------------
        Colors
@@ -673,3 +671,26 @@ i.inverted.teal.icon {
   background-color: #00B5AD !important;
   color: #FFFFFF !important;
 }
+/*-------------------
+        Sizes 
+--------------------*/
+i.small.icon {
+  font-size: 0.875em;
+  vertical-align: top;
+}
+i.icon {
+  font-size: 1em;
+  vertical-align: baseline;
+}
+i.large.icon {
+  font-size: 1.5em;
+  vertical-align: middle;
+}
+i.huge.icon {
+  font-size: 2em;
+  vertical-align: middle;
+}
+i.massive.icon {
+  font-size: 4em;
+  vertical-align: middle;
+}

node/src/files/stylesheets/semantic.css

@@ -433,6 +433,20 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   position: relative;
 }
 
+#example .icon.example {
+  border-top: none;
+}
+#example .icon.example h3,
+#example .icon.example h4 {
+  margin: 0.5em 0em 2em;
+}
+#example .icon.example i.code {
+  top: 30px;
+}
+
+#example .icon.example .grid {
+  text-align: left;
+}
 #example .icon.example .grid .column {
   opacity: 0.8;
   margin-bottom: 4%;
@@ -489,15 +503,9 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   color: #009FDA;
 }
 #example .another.icon.example {
-  margin-top: -15px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
-  padding-top: 50px;
-}
-#example .another.icon.example i.code {
-  top: 15px;
 }
 
-
 #example .another.example {
   border-top: none;
 }
@@ -750,8 +758,8 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   top: 0px;
 }
 #example .example {
-  margin: 16px 0px;
-  padding: 16px 0px;
+  margin: 1em 0em;
+  padding: 1em 0em;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   clear: both;
   position: relative;

node/src/layouts/default.html.eco

@@ -108,9 +108,9 @@
       </div>
       <div class="icon previous link<%= if pageNumber is 1 then " disabled" %> item">
         <% if pageNumber > 1 and pageCollection[pageNumber - 2]?: %>
-        <a href="<%= pageCollection[pageNumber - 2].url %>"><i class="icon left-open"></i></a>
+        <a href="<%= pageCollection[pageNumber - 2].url %>"><i class="left arrow icon"></i></a>
         <% else: %>
-        <i class="icon left-open"></i>
+        <i class="left arrow icon"></i>
         <% end %>
       </div>
       <div class="section dropdown item">
@@ -125,9 +125,9 @@
       </div>
       <div class="icon next <%= if pageNumber is pageCount then "disabled " %>link item">
         <% if pageNumber isnt pageCount and pageCollection[pageNumber]?: %>
-        <a href="<%= pageCollection[pageNumber].url %>"><i class="icon right-open"></i></a>
+        <a href="<%= pageCollection[pageNumber].url %>"><i class="right arrow icon"></i></a>
         <% else: %>
-        <i class="icon right-open"></i>
+        <i class="right arrow icon"></i>
         <% end %>
       </div>
       <div class="right menu">

src/collections/message.less

@@ -270,5 +270,5 @@
   font-size: 1.5em;
 }
 .ui.massive.message {
-  font-size: 2px;
+  font-size: 2em;
 }

src/elements/icons.less

@@ -29,23 +29,21 @@
 }
 
 i.icon {
-  font-family: 'Icons';
   display: inline-block;
+  opacity: 0.75;
+
+  margin: 0em 0.25em 0em 0em;
 
   width: 1em;
   height: 1em;
 
-  margin: 0em 0.25em 0em 0em;
-
+  font-family: 'Icons';
   font-style: normal;
   line-height: 1;
   font-weight: normal;
   text-decoration: inherit;
   text-align: center;
 
-  vertical-align: baseline;
-
-  opacity: 0.75;
   speak: none;
   
   -webkit-font-smoothing: antialiased;
@@ -58,10 +56,9 @@ i.icon {
 
 
 i.icon.circle.attention:before { content: '\2757'; } /* '❗' */
-i.icon.circle.cancel:before { content: '\2716'; } /* '✖' */
 i.icon.circle.help:before { content: '\e704'; } /* '' */
 i.icon.circle.info:before { content: '\e705'; } /* '' */
-i.icon.circle.plus:before { content: '\2795'; } /* '➕' */
+i.icon.add:before { content: '\2795'; } /* '➕' */
 
 i.icon.chart:before { content: '📈'; } /* '\1f4c8' */
 i.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */
@@ -99,52 +96,55 @@ i.icon.star.empty:before { content: '\e800'; } /* '' */
 i.icon.star.half:before { content: '\e701'; } /* '' */
 
 i.icon.lock:before { content: '🔒'; } /* '\1f512' */
-i.icon.lock.open:before { content: '🔓'; } /* '\1f513' */
+i.icon.unlock:before { content: '🔓'; } /* '\1f513' */
 
 i.icon.layout.grid:before { content: '\e80c'; } /* '' */
 i.icon.layout.block:before { content: '\e708'; } /* '' */
 i.icon.layout.list:before { content: '\e80b'; } /* '' */
 
+i.icon.heart.empty:before { content: '\2661'; } /* '♡' */
+i.icon.heart:before { content: '\2665'; } /* '♥' */
+
 
 i.icon.asterisk:before { content: '\2731'; } /* '✱' */
-i.icon.at:before { content: '\40'; } /* '@' */
-i.icon.attach:before { content: '📎'; } /* '\1f4ce' */
+i.icon.attachment:before { content: '📎'; } /* '\1f4ce' */
 i.icon.attention:before { content: '\26a0'; } /* '⚠' */
-i.icon.award:before { content: '🏉'; } /* '\1f3c9' */
+i.icon.trophy:before { content: '🏉'; } /* '\1f3c9' */
 i.icon.barcode:before { content: '\e792'; } /* '' */
-i.icon.basket:before { content: '\e73d'; } /* '' */
-i.icon.basket:before { content: '\e813'; } /* '' */
+i.icon.cart:before { content: '\e813'; } /* '' */
 i.icon.block:before { content: '🚫'; } /* '\1f6ab' */
 i.icon.book:before { content: '📖'; } /* '\1f4d6' */
 i.icon.bookmark:before { content: '🔖'; } /* '\1f516' */
 i.icon.calendar:before { content: '📅'; } /* '\1f4c5' */
-i.icon.cancel:before { content: '\e80d'; } /* '' */
-i.icon.cancel:before { content: '\2715'; } /* '✕' */
-i.icon.rewind:before { content: '\27f2'; } /* '⟲' */
+i.icon.cancel:before { content: '\2716'; } /* '✖' */
+i.icon.close:before { content: '\e80d'; } /* '' */
+i.icon.color:before { content: '\e794'; } /* '' */
 i.icon.chat:before { content: '\e720'; } /* '' */
 i.icon.check:before { content: '\2611'; } /* '☑' */
-i.icon.clock:before { content: '🕔'; } /* '\1f554' */
+i.icon.time:before { content: '🕔'; } /* '\1f554' */
 i.icon.cloud:before { content: '\2601'; } /* '☁' */
 i.icon.code:before { content: '\e714'; } /* '' */
+i.icon.email:before { content: '\40'; } /* '@' */
 i.icon.setting:before { content: '\26ef'; } /* '⛯' */
 i.icon.settings:before { content: '\2699'; } /* '⚙' */
 i.icon.comment:before { content: '\e802'; } /* '' */
+i.icon.clockwise.counter:before { content: '\27f2'; } /* '⟲' */
 i.icon.clockwise:before { content: '\27f3'; } /* '⟳' */
 i.icon.direction:before { content: '\27a2'; } /* '➢' */
 i.icon.doc:before { content: '📄'; } /* '\1f4c4' */
 i.icon.docs:before { content: '\e736'; } /* '' */
 i.icon.dollar:before { content: '💵'; } /* '\1f4b5' */
-i.icon.easel:before { content: '\e7b5'; } /* '' */
+i.icon.paint:before { content: '\e7b5'; } /* '' */
 i.icon.edit:before { content: '\270d'; } /* '✍' */
 i.icon.eject:before { content: '\2ecf'; } /* '⻏' */
 i.icon.export:before { content: '\e715'; } /* '' */
-i.icon.eye:before { content: '\e80f'; } /* '' */
-i.icon.hidden.eye:before { content: '\e70b'; } /* '' */
+i.icon.hide:before { content: '\e80f'; } /* '' */
+i.icon.unhide:before { content: '\e70b'; } /* '' */
 i.icon.facebook:before { content: '\f301'; } /* '' */
 i.icon.fast-forward:before { content: '\e804'; } /* '' */
 i.icon.fire:before { content: '🔥'; } /* '\1f525' */
 i.icon.flag:before { content: '\2691'; } /* '⚑' */
-i.icon.flash:before { content: '\26a1'; } /* '⚡' */
+i.icon.lightning:before { content: '\26a1'; } /* '⚡' */
 i.icon.lab:before { content: '\68'; } /* 'h' */
 i.icon.flight:before { content: '\2708'; } /* '✈' */
 i.icon.forward:before { content: '\27a6'; } /* '➦' */
@@ -152,15 +152,12 @@ i.icon.gift:before { content: '🎁'; } /* '\1f381' */
 i.icon.github:before { content: '\f308'; } /* '' */
 i.icon.globe:before { content: '\e817'; } /* '' */
 i.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */
-i.icon.heart-empty:before { content: '\2661'; } /* '♡' */
-i.icon.heart:before { content: '\2665'; } /* '♥' */
 i.icon.question:before { content: '\2753'; } /* '❓' */
-i.icon.home-alt:before { content: '\e80e'; } /* '' */
 i.icon.home:before { content: '\2302'; } /* '⌂' */
-i.icon.i-letter:before { content: '\2139'; } /* 'ℹ' */
-i.icon.lamp:before { content: '💡'; } /* '\1f4a1' */
-i.icon.link:before { content: '🔗'; } /* '\1f517' */
-i.icon.list:before { content: '\e782'; } /* '' */
+i.icon.i:before { content: '\2139'; } /* 'ℹ' */
+i.icon.idea:before { content: '💡'; } /* '\1f4a1' */
+i.icon.link.open:before { content: '🔗'; } /* '\1f517' */
+i.icon.content:before { content: '\e782'; } /* '' */
 i.icon.location:before { content: '\e724'; } /* '' */
 i.icon.mail:before { content: '\2709'; } /* '✉' */
 i.icon.mic:before { content: '🎤'; } /* '\1f3a4' */
@@ -168,8 +165,8 @@ i.icon.minus:before { content: '\2d'; } /* '-' */
 i.icon.money:before { content: '💰'; } /* '\1f4b0' */
 i.icon.off:before { content: '\e78e'; } /* '' */
 i.icon.pause:before { content: '\e808'; } /* '' */
-i.icon.pictures:before { content: '\e812'; } /* '' */
-i.icon.picture:before { content: '🌄'; } /* '\1f304' */
+i.icon.photos:before { content: '\e812'; } /* '' */
+i.icon.photo:before { content: '🌄'; } /* '\1f304' */
 i.icon.pin:before { content: '📌'; } /* '\1f4cc' */
 i.icon.play:before { content: '\e809'; } /* '' */
 i.icon.plus:before { content: '\2b'; } /* '+' */
@@ -177,28 +174,25 @@ i.icon.print:before { content: '\e716'; } /* '' */
 i.icon.rss:before { content: '\e73a'; } /* '' */
 i.icon.search:before { content: '🔍'; } /* '\1f50d' */
 i.icon.shuffle:before { content: '\e803'; } /* '' */
-i.icon.stop:before { content: '\e807'; } /* '' */
+i.icon.square:before { content: '\e807'; } /* '' */
 i.icon.tag:before { content: '\e80a'; } /* '' */
 i.icon.tags:before { content: '\e70d'; } /* '' */
 i.icon.terminal:before { content: '\e7ac'; } /* '' */
-i.icon.thumbs-down:before { content: '👎'; } /* '\1f44e' */
-i.icon.thumbs-up:before { content: '👍'; } /* '\1f44d' */
-i.icon.tint:before { content: '\e794'; } /* '' */
-i.icon.to-end:before { content: '\e762'; } /* '' */
-i.icon.to-end-alt:before { content: '\e806'; } /* '' */
-i.icon.to-start:before { content: '\e763'; } /* '' */
-i.icon.to-start-alt:before { content: '\e805'; } /* '' */
-i.icon.top-list:before { content: '🏆'; } /* '\1f3c6' */
+i.icon.thumbs.down:before { content: '👎'; } /* '\1f44e' */
+i.icon.thumbs.up:before { content: '👍'; } /* '\1f44d' */
+i.icon.to-end:before { content: '\e806'; } /* '' */
+i.icon.to-start:before { content: '\e805'; } /* '' */
+i.icon.top.list:before { content: '🏆'; } /* '\1f3c6' */
 i.icon.trash:before { content: '\e729'; } /* '' */
-i.icon.twitter-bird:before { content: '\f303'; } /* '' */
-i.icon.upload-cloud:before { content: '\e711'; } /* '' */
-i.icon.user-add:before { content: '\e700'; } /* '' */
+i.icon.twitter:before { content: '\f303'; } /* '' */
+i.icon.upload:before { content: '\e711'; } /* '' */
+i.icon.user.add:before { content: '\e700'; } /* '' */
 i.icon.user:before { content: '👤'; } /* '\1f464' */
-i.icon.users-alt:before { content: '\e814'; } /* '' */
+i.icon.community:before { content: '\e814'; } /* '' */
 i.icon.users:before { content: '👥'; } /* '\1f465' */
-i.icon.vcard:before { content: '\e722'; } /* '' */
-i.icon.zoom-in:before { content: '\e750'; } /* '' */
-i.icon.zoom-out:before { content: '\e751'; } /* '' */
+i.icon.id:before { content: '\e722'; } /* '' */
+i.icon.zoom.in:before { content: '\e750'; } /* '' */
+i.icon.zoom.out:before { content: '\e751'; } /* '' */
 
 
 
@@ -235,7 +229,7 @@ i.icon.right-dir {
   margin: 0em 0em 0em 0.1em;
 }
 
-i.icon.clock {
+i.icon.time {
   margin-top: -0.05em;
 }
 
@@ -244,11 +238,17 @@ i.icon.clock {
 ---------------*/
 
 /* aliases for convenience */
-i.icon.close:before { content: '\e80d'; } /* '' */
 i.icon.help:before { content: '\e704'; } /* '' */
 i.icon.info:before { content: '\e705'; } /* '' */
 i.icon.error:before { content: '\e80d'; } /* '' */
 
+i.icon.dislike:before { content: '\2661'; } /* '♡' */
+i.icon.like:before { content: '\2665'; } /* '♥' */
+
+i.icon.eye:before { content: '\e80f'; } /* '' */
+i.icon.eye.hidden:before { content: '\e70b'; } /* '' */
+i.icon.date:before { content: '📅'; } /* '\1f4c5' */
+
 
 
 /*******************************
@@ -264,8 +264,10 @@ i.icon.disabled {
            Variations
 *******************************/
 
-i.strong.icon {
+i.emphasized.icon {
   opacity: 1;
+  padding: 0.5em;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 }
 
 
@@ -276,6 +278,7 @@ i.strong.icon {
 i.inverted.icon {
   background-color: #222222;
   color: #FFFFFF;
+  padding: 0.5em;
 }
 
 /*-------------------
@@ -328,4 +331,30 @@ i.inverted.purple.icon {
 i.inverted.teal.icon {
   background-color: #00B5AD !important;
   color: #FFFFFF !important;
-}
+}
+
+
+/*-------------------
+        Sizes 
+--------------------*/
+
+i.small.icon {
+  font-size: 0.875em;
+  vertical-align: top;
+}
+i.icon {
+  font-size: 1em;
+  vertical-align: baseline;
+}
+i.large.icon {
+  font-size: 1.5em;
+  vertical-align: middle;
+}
+i.huge.icon {
+  font-size: 2em;
+  vertical-align: middle;
+}
+i.massive.icon {
+  font-size: 4em;
+  vertical-align: middle;
+}