iteration on feed, menu fixes for icons

Former-commit-id: 9241c90c8723d1f6a7549d3f1983f370440c5339 Former-commit-id: 0e79dee48d0abdc82d3875221340d2c0deacf9c3
12 years ago · fc265d0dc1
24 changed files with 436 additions and 234 deletions
--- a/build/minified/collections/menu.min.css
+++ b/build/minified/collections/menu.min.css
--- a/build/minified/elements/button.min.css
+++ b/build/minified/elements/button.min.css
--- a/build/minified/elements/header.min.css
+++ b/build/minified/elements/header.min.css
@ -1 +1 @@
-.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{background-color:#E6EEF1;border-left:.2em solid #6ECFF5}.ui.black.block.header{background-color:#EAEAEA;border-left:.2em solid #5C6166}.ui.green.block.header{background-color:#EFF8E4;border-left:.2em solid #A1CF64}.ui.red.block.header{background-color:#F6E5E8;border-left:.2em solid #EF4D6D}.ui.purple.block.header{background-color:#EFEDF8;border-left:.2em solid #564F8A}.ui.teal.block.header{background-color:#E9F7F6;border-left:.2em solid #00B5AD}.ui.inverted.header{background-color:#222;color:#FFF}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-left:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.block.header{background-color:#F0F0F0;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;margin:0rem auto 2rem}
+.ui.header{border:0;margin:1em 0 1rem;padding:0;font-size:1.33em;font-weight:700;line-height:1.33}.ui.header .ui.sub.header,.ui.header .sub.header{font-size:1rem;font-weight:400;margin:0;padding:0;line-height:1.2;color:rgba(0,0,0,.5)}.ui.header:first-child{margin-top:0}.ui.header+p{margin-top:0}h1.ui.header{min-height:1rem;line-height:1.33;font-size:2rem}h2.ui.header{line-height:1.33;font-size:1.75rem}h3.ui.header{line-height:1.33;font-size:1.33rem}h4.ui.header{line-height:1.33;font-size:1.1rem}h5.ui.header{line-height:1.2;font-size:1rem}.ui.huge.header{min-height:1em;font-size:2em}.ui.large.header{font-size:1.75em}.ui.medium.header{font-size:1.33em}.ui.small.header{font-size:1.1em}.ui.tiny.header{font-size:1em}.ui.disabled.header{opacity:.5}.ui.blue.header{color:#6ECFF5!important}.ui.black.header{color:#5C6166!important}.ui.green.header{color:#A1CF64!important}.ui.red.header{color:#EF4D6D!important}.ui.purple.header{color:#564F8A!important}.ui.teal.header{color:#00B5AD!important}.ui.blue.block.header{background-color:#E6EEF1;border-left:.2em solid #6ECFF5}.ui.black.block.header{background-color:#EAEAEA;border-left:.2em solid #5C6166}.ui.green.block.header{background-color:#EFF8E4;border-left:.2em solid #A1CF64}.ui.red.block.header{background-color:#F6E5E8;border-left:.2em solid #EF4D6D}.ui.purple.block.header{background-color:#EFEDF8;border-left:.2em solid #564F8A}.ui.teal.block.header{background-color:#E9F7F6;border-left:.2em solid #00B5AD}.ui.inverted.header{background-color:#222;color:#FFF}.ui.inverted.black.header{background-color:#5C6166!important;color:#FFF!important}.ui.inverted.blue.header{background-color:#6ECFF5!important;color:#FFF!important}.ui.inverted.green.header{background-color:#A1CF64!important;color:#FFF!important}.ui.inverted.red.header{background-color:#EF4D6D!important;color:#FFF!important}.ui.inverted.purple.header{background-color:#564F8A!important;color:#FFF!important}.ui.inverted.teal.header{background-color:#00B5AD!important;color:#FFF!important}.ui.inverted.block.header{border-left:0}.ui.left.aligned.header{text-align:left}.ui.right.aligned.header{text-align:right}.ui.center.aligned.header{text-align:center}.ui.floated.header,.ui.left.floated.header{float:left}.ui.right.floated.header{float:right}.ui.fitted.header{padding:0}.ui.block.header{background-color:#F5F5F5;padding:.5em 1em}.ui.dividing.header{padding-bottom:.2rem;border-bottom:1px solid rgba(0,0,0,.1)}.ui.attached.header{padding:.7em 1rem;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1);-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1);box-shadow:0 0 0 1px rgba(0,0,0,.1)}.ui.top.attached.header{margin-bottom:0;-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.bottom.attached.header{margin-top:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.header.icon{display:inline-block;text-align:center}.ui.header.icon .icon{display:block;font-size:4em;margin:0rem auto 2rem}
--- a/build/minified/modules/popup.min.js
+++ b/build/minified/modules/popup.min.js
--- a/build/minified/modules/tab.min.js
+++ b/build/minified/modules/tab.min.js
--- a/build/minified/views/feed.min.css
+++ b/build/minified/views/feed.min.css
@ -1 +1 @@
-.ui.feed a{cursor:pointer}.ui.feed .event{width:100%;display:table;border-top:1px dotted rgba(0,0,0,.1);padding:1em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.feed .event:first-child{border-top:0}.ui.feed .label{width:3em;display:table-cell;vertical-align:top;text-align:left}.ui.feed .label .icon{font-size:1.75em;margin:0}.ui.feed .label img{width:3.25em;padding:.25em;margin:0;border-radius:50em}.ui.feed .content{display:table-cell;vertical-align:top;text-align:left;padding:1em 1em 0}.ui.feed .content .date{float:right;color:rgba(0,0,0,.4)}.ui.feed .content .summary{color:rgba(0,0,0,.75)}.ui.feed .content .summary img{display:inline-block;margin-right:.25em;width:4em;border-radius:500px}.ui.feed .content .extra{margin:1em 0 0;padding:.5em 0 0;color:rgba(0,0,0,.5)}.ui.feed .content .extra.images img{display:inline-block;margin-right:1em;width:9em}.ui.feed .content .extra.text{padding:.5em 1em;border-left:.2em solid rgba(0,0,0,.1)}
+.ui.feed a{cursor:pointer}.ui.feed .event{width:100%;display:table;padding:1em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.feed .event:first-child{border-top:0}.ui.feed .event:last-child{margin-bottom:2em}.ui.feed .label{width:3em;display:table-cell;vertical-align:top;text-align:left}.ui.feed .label .icon{font-size:1.5em;margin:0}.ui.feed .label img{width:3em;margin:0;border-radius:50em}.ui.feed .content{display:table-cell;vertical-align:top;text-align:left;padding:1em 1em 0}.ui.feed .content .date{float:right;color:rgba(0,0,0,.4)}.ui.feed .content .summary{color:rgba(0,0,0,.75)}.ui.feed .content .summary img{display:inline-block;margin-right:.25em;width:4em;border-radius:500px}.ui.feed .content .extra{margin:1em 0 0;padding:.5em 0 0;color:rgba(0,0,0,.5)}.ui.feed .content .extra.images img{display:inline-block;margin-right:.25em;width:6em}.ui.feed .content .extra.text{padding:.5em 1em;border-left:.2em solid rgba(0,0,0,.1)}.ui.small.feed .label img{width:2.5em}.ui.small.feed .label .icon{font-size:1.25em}.ui.feed .event{padding:.75em 0}.ui.small.feed .content{padding:.5em .5em 0}.ui.small.feed .content .extra.images img{width:5em}.ui.small.feed .content .extra{margin:.5em 0 0}.ui.feed .content .extra.text{padding:.25em .5em}
--- a/build/packaged/semantic.min.css.REMOVED.git-id
+++ b/build/packaged/semantic.min.css.REMOVED.git-id
@ -1 +1 @@
-1b2b2a611ea798ab9f7d09fcc613d2954ef4872a
+93cf0ecde2c2c6612bf919f6e6c5b5a0f67a5d65
--- a/build/packaged/semantic.min.js.REMOVED.git-id
+++ b/build/packaged/semantic.min.js.REMOVED.git-id
@ -1 +1 @@
-48b84023e8655138188f696681fe59c4793305f2
+2ffbf8c57a9025e9d732e7c6f119dbc5f84eccf9
--- a/build/uncompressed/collections/menu.css
+++ b/build/uncompressed/collections/menu.css
@ -854,6 +854,10 @@
 .ui.icon.menu .icon:before {
  opacity: 1;
 }
+/* Item Icon Only */
+.ui.menu .icon.item .icon {
+  margin: 0em;
+}
 /*--- inverted ---*/
 .ui.inverted.icon.menu .item {
  color: rgba(255, 255, 255, 0.8);
--- a/build/uncompressed/elements/button.css
+++ b/build/uncompressed/elements/button.css
@ -446,7 +446,6 @@ Containing Icon
 .ui.icon.buttons .button i,
 .ui.icon.button i {
  margin: 0em;
-  vertical-align: top;
 }
 /*--------------
   Labeled Icon
@ -532,10 +531,10 @@ Containing Icon
 /*--------------
     Bubbly
 ---------------*/
-.ui.button.bubbly {
-  -webkit-border-radius: 1em;
-  -moz-border-radius: 1em;
-  border-radius: 1em;
+.ui.circular.button {
+  -webkit-border-radius: 10em;
+  -moz-border-radius: 10em;
+  border-radius: 10em;
 }
 /*--------------
     Attached
@ -599,64 +598,9 @@ input:focus + .ui.attached.button {
 .ui.attached.button.loading.hover {
  opacity: 1;
 }
-/*******************************
-      Buttons (Button Group)
-*******************************/
-.ui.buttons {
-  overflow: hidden;
-}
-.ui.buttons .button {
-  float: left;
-  -webkit-border-radius: 0em;
-  -moz-border-radius: 0em;
-  border-radius: 0em;
-  border-left: 1px solid rgba(0, 0, 0, 0.05);
-}
-.ui.buttons .button:first-child {
-  margin-left: 0em;
-  border-top-left-radius: 0.3125em;
-  border-bottom-left-radius: 0.3125em;
-}
-.ui.buttons .button:last-child {
-  border-top-right-radius: 0.3125em;
-  border-bottom-right-radius: 0.3125em;
-}
-/* Vertical  Style */
-.ui.buttons.vertical {
-  display: inline-block;
-}
-.ui.buttons.vertical .button {
-  display: block;
-  float: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  border-left: none;
-  box-shadow: none;
-}
-.ui.buttons.vertical .button:first-child,
-.ui.buttons.vertical .mini.button:first-child,
-.ui.buttons.vertical .tiny.button:first-child,
-.ui.buttons.vertical .small.button:first-child,
-.ui.buttons.vertical .massive.button:first-child,
-.ui.buttons.vertical .huge.button:first-child {
-  margin-top: 0px;
-  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
-  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
-  border-radius: 0.3125em 0.3125em 0px 0px;
-}
-.ui.buttons.vertical .button:last-child,
-.ui.buttons.vertical .mini.button:last-child,
-.ui.buttons.vertical .tiny.button:last-child,
-.ui.buttons.vertical .small.button:last-child,
-.ui.buttons.vertical .massive.button:last-child,
-.ui.buttons.vertical .huge.button:last-child,
-.ui.buttons.vertical .gigantic.button:last-child {
-  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
-  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
-  border-radius: 0px 0px 0.3125em 0.3125em;
-}
-/*******************************
-       OR Button Divisions
-*******************************/
+/*-------------------
+      Or Buttons
+--------------------*/
 .ui.buttons .or {
  position: relative;
  float: left;
@ -868,3 +812,58 @@ input:focus + .ui.attached.button {
 .ui.twelve.fluid.buttons > .button {
  height: 8.3333%;
 }
+/*******************************
+            Groups
+*******************************/
+.ui.buttons {
+  overflow: hidden;
+}
+.ui.buttons .button {
+  float: left;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
+}
+.ui.buttons .button:first-child {
+  margin-left: 0em;
+  border-top-left-radius: 0.3125em;
+  border-bottom-left-radius: 0.3125em;
+}
+.ui.buttons .button:last-child {
+  border-top-right-radius: 0.3125em;
+  border-bottom-right-radius: 0.3125em;
+}
+/* Vertical  Style */
+.ui.buttons.vertical {
+  display: inline-block;
+}
+.ui.buttons.vertical .button {
+  display: block;
+  float: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-left: none;
+  box-shadow: none;
+}
+.ui.buttons.vertical .button:first-child,
+.ui.buttons.vertical .mini.button:first-child,
+.ui.buttons.vertical .tiny.button:first-child,
+.ui.buttons.vertical .small.button:first-child,
+.ui.buttons.vertical .massive.button:first-child,
+.ui.buttons.vertical .huge.button:first-child {
+  margin-top: 0px;
+  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
+  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
+  border-radius: 0.3125em 0.3125em 0px 0px;
+}
+.ui.buttons.vertical .button:last-child,
+.ui.buttons.vertical .mini.button:last-child,
+.ui.buttons.vertical .tiny.button:last-child,
+.ui.buttons.vertical .small.button:last-child,
+.ui.buttons.vertical .massive.button:last-child,
+.ui.buttons.vertical .huge.button:last-child,
+.ui.buttons.vertical .gigantic.button:last-child {
+  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
+  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
+  border-radius: 0px 0px 0.3125em 0.3125em;
+}
--- a/build/uncompressed/elements/header.css
+++ b/build/uncompressed/elements/header.css
@ -193,11 +193,17 @@ h5.ui.header {
 .ui.right.floated.header {
  float: right;
 }
+/*-------------------
+       Fittted
+--------------------*/
+.ui.fitted.header {
+  padding: 0em;
+}
 /*-------------------
        Block
 --------------------*/
 .ui.block.header {
-  background-color: #F0F0F0;
+  background-color: #F5F5F5;
  padding: 0.5em 1em;
 }
 /*-------------------
--- a/build/uncompressed/views/feed.css
+++ b/build/uncompressed/views/feed.css
@ -22,7 +22,6 @@
 .ui.feed .event {
  width: 100%;
  display: table;
-  border-top: 1px dotted rgba(0, 0, 0, 0.1);
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
@ -32,6 +31,9 @@
 .ui.feed .event:first-child {
  border-top: 0px;
 }
+.ui.feed .event:last-child {
+  margin-bottom: 2em;
+}
 /* Event Label */
 .ui.feed .label {
  width: 3em;
@ -40,12 +42,11 @@
  text-align: left;
 }
 .ui.feed .label .icon {
-  font-size: 1.75em;
+  font-size: 1.5em;
  margin: 0em;
 }
 .ui.feed .label img {
-  width: 3.25em;
-  padding: 0.25em;
+  width: 3em;
  margin: 0em;
  border-radius: 50em;
 }
@ -79,10 +80,34 @@
 }
 .ui.feed .content .extra.images img {
  display: inline-block;
-  margin-right: 1em;
-  width: 9em;
+  margin-right: 0.25em;
+  width: 6em;
 }
 .ui.feed .content .extra.text {
  padding: 0.5em 1em;
  border-left: 0.2em solid rgba(0, 0, 0, 0.1);
 }
+/*******************************
+            Variations
+*******************************/
+.ui.small.feed .label img {
+  width: 2.5em;
+}
+.ui.small.feed .label .icon {
+  font-size: 1.25em;
+}
+.ui.feed .event {
+  padding: 0.75em 0em;
+}
+.ui.small.feed .content {
+  padding: 0.5em 0.5em 0;
+}
+.ui.small.feed .content .extra.images img {
+  width: 5em;
+}
+.ui.small.feed .content .extra {
+  margin: 0.5em 0em 0em;
+}
+.ui.feed .content .extra.text {
+  padding: 0.25em 0.5em;
+}
--- a/node/src/documents/elements/button.html
+++ b/node/src/documents/elements/button.html
@ -163,9 +163,10 @@ type   : 'UI Element'
  </div>

  <div class="example">
-    <h4 class="ui header">Bubbly</h4>
-    <p>Can be bubbly:</p>
-    <div class="bubbly ui button">More bubbly</div>
+    <h4 class="ui header">Circular</h4>
+    <p>Can be circular:</p>
+    <div class="circular ui button">Rounded</div>
+    <div class="circular ui icon button"><i class="icon settings"></i></div>
  </div>

  <div class="example">
--- a/node/src/documents/views/feed.html
+++ b/node/src/documents/views/feed.html
@ -24,9 +24,8 @@ type   : 'UI View'
  <h2 class="ui dividing header">Standard</h2>

  <div class="example">
-    <h4 class="ui header">Feed</h4>
-    <div class="ui fitted feed segment">
-
+    <div class="ui red feed segment">
+      <h3 class="ui header">Recent Activity</h3>
      <div class="event">
        <div class="label">
          <img src="/images/demo/avatar2.jpg">
@ -168,4 +167,94 @@ type   : 'UI View'
  </div>


+  <h2 class="ui dividing header">Variations</h2>
+
+
+  <div class="example">
+    <h4 class="ui header">Sizes</h4>
+    <p>A feed can have different sizes</p>
+
+    <div class="ui small blue feed segment" style="width: 540px;">
+      <h4 class="ui header">Recent Activity</h4>
+      <div class="event">
+        <div class="label">
+          <img src="/images/demo/avatar2.jpg">
+        </div>
+        <div class="content">
+          <div class="date">
+            Just moments ago
+          </div>
+          <div class="summary">
+             <a>Sally Poodle</a> added you as a friend
+          </div>
+        </div>
+      </div>
+      <div class="event">
+        <div class="label">
+          <i class="icon circular idea"></i>
+        </div>
+        <div class="content">
+          <div class="date">
+            3 days ago
+          </div>
+          <div class="summary">
+            You submitted a new post to the page
+          </div>
+          <div class="extra text">
+            I am a dog and I do not know how to make a post
+          </div>
+        </div>
+      </div>
+      <div class="event">
+        <div class="label">
+          <i class="icon circular photos"></i>
+        </div>
+        <div class="content">
+          <div class="date">
+            3 days ago
+          </div>
+          <div class="summary">
+            <a>Sally Poodle</a> added <a>2 new photos</a> of you
+          </div>
+          <div class="extra images">
+            <img src="/images/demo/item1.jpg">
+            <img src="/images/demo/item2.jpg">
+          </div>
+        </div>
+      </div>
+      <div class="event">
+        <div class="label">
+          <img src="/images/demo/avatar.jpg">
+        </div>
+        <div class="content">
+          <div class="date">
+            Just moments ago
+          </div>
+          <div class="summary">
+            <a>James Doggington</a> added you as a friend
+          </div>
+        </div>
+      </div>
+      <div class="event">
+        <div class="label">
+          <i class="icon circular idea"></i>
+        </div>
+        <div class="content">
+          <div class="date">
+            3 days ago
+          </div>
+          <div class="summary">
+            You submitted a new post to the page
+          </div>
+          <div class="extra text">
+            I am a dog and I do not know how to make a post
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+
+
 </div>
--- a/node/src/files/components/semantic/collections/menu.css
+++ b/node/src/files/components/semantic/collections/menu.css
@ -854,6 +854,10 @@
 .ui.icon.menu .icon:before {
  opacity: 1;
 }
+/* Item Icon Only */
+.ui.menu .icon.item .icon {
+  margin: 0em;
+}
 /*--- inverted ---*/
 .ui.inverted.icon.menu .item {
  color: rgba(255, 255, 255, 0.8);
--- a/node/src/files/components/semantic/elements/button.css
+++ b/node/src/files/components/semantic/elements/button.css
@ -446,7 +446,6 @@ Containing Icon
 .ui.icon.buttons .button i,
 .ui.icon.button i {
  margin: 0em;
-  vertical-align: top;
 }
 /*--------------
   Labeled Icon
@ -532,10 +531,10 @@ Containing Icon
 /*--------------
     Bubbly
 ---------------*/
-.ui.button.bubbly {
-  -webkit-border-radius: 1em;
-  -moz-border-radius: 1em;
-  border-radius: 1em;
+.ui.circular.button {
+  -webkit-border-radius: 10em;
+  -moz-border-radius: 10em;
+  border-radius: 10em;
 }
 /*--------------
     Attached
@ -599,64 +598,9 @@ input:focus + .ui.attached.button {
 .ui.attached.button.loading.hover {
  opacity: 1;
 }
-/*******************************
-      Buttons (Button Group)
-*******************************/
-.ui.buttons {
-  overflow: hidden;
-}
-.ui.buttons .button {
-  float: left;
-  -webkit-border-radius: 0em;
-  -moz-border-radius: 0em;
-  border-radius: 0em;
-  border-left: 1px solid rgba(0, 0, 0, 0.05);
-}
-.ui.buttons .button:first-child {
-  margin-left: 0em;
-  border-top-left-radius: 0.3125em;
-  border-bottom-left-radius: 0.3125em;
-}
-.ui.buttons .button:last-child {
-  border-top-right-radius: 0.3125em;
-  border-bottom-right-radius: 0.3125em;
-}
-/* Vertical  Style */
-.ui.buttons.vertical {
-  display: inline-block;
-}
-.ui.buttons.vertical .button {
-  display: block;
-  float: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  border-left: none;
-  box-shadow: none;
-}
-.ui.buttons.vertical .button:first-child,
-.ui.buttons.vertical .mini.button:first-child,
-.ui.buttons.vertical .tiny.button:first-child,
-.ui.buttons.vertical .small.button:first-child,
-.ui.buttons.vertical .massive.button:first-child,
-.ui.buttons.vertical .huge.button:first-child {
-  margin-top: 0px;
-  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
-  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
-  border-radius: 0.3125em 0.3125em 0px 0px;
-}
-.ui.buttons.vertical .button:last-child,
-.ui.buttons.vertical .mini.button:last-child,
-.ui.buttons.vertical .tiny.button:last-child,
-.ui.buttons.vertical .small.button:last-child,
-.ui.buttons.vertical .massive.button:last-child,
-.ui.buttons.vertical .huge.button:last-child,
-.ui.buttons.vertical .gigantic.button:last-child {
-  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
-  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
-  border-radius: 0px 0px 0.3125em 0.3125em;
-}
-/*******************************
-       OR Button Divisions
-*******************************/
+/*-------------------
+      Or Buttons
+--------------------*/
 .ui.buttons .or {
  position: relative;
  float: left;
@ -868,3 +812,58 @@ input:focus + .ui.attached.button {
 .ui.twelve.fluid.buttons > .button {
  height: 8.3333%;
 }
+/*******************************
+            Groups
+*******************************/
+.ui.buttons {
+  overflow: hidden;
+}
+.ui.buttons .button {
+  float: left;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
+}
+.ui.buttons .button:first-child {
+  margin-left: 0em;
+  border-top-left-radius: 0.3125em;
+  border-bottom-left-radius: 0.3125em;
+}
+.ui.buttons .button:last-child {
+  border-top-right-radius: 0.3125em;
+  border-bottom-right-radius: 0.3125em;
+}
+/* Vertical  Style */
+.ui.buttons.vertical {
+  display: inline-block;
+}
+.ui.buttons.vertical .button {
+  display: block;
+  float: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-left: none;
+  box-shadow: none;
+}
+.ui.buttons.vertical .button:first-child,
+.ui.buttons.vertical .mini.button:first-child,
+.ui.buttons.vertical .tiny.button:first-child,
+.ui.buttons.vertical .small.button:first-child,
+.ui.buttons.vertical .massive.button:first-child,
+.ui.buttons.vertical .huge.button:first-child {
+  margin-top: 0px;
+  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
+  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
+  border-radius: 0.3125em 0.3125em 0px 0px;
+}
+.ui.buttons.vertical .button:last-child,
+.ui.buttons.vertical .mini.button:last-child,
+.ui.buttons.vertical .tiny.button:last-child,
+.ui.buttons.vertical .small.button:last-child,
+.ui.buttons.vertical .massive.button:last-child,
+.ui.buttons.vertical .huge.button:last-child,
+.ui.buttons.vertical .gigantic.button:last-child {
+  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
+  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
+  border-radius: 0px 0px 0.3125em 0.3125em;
+}
--- a/node/src/files/components/semantic/elements/header.css
+++ b/node/src/files/components/semantic/elements/header.css
@ -193,11 +193,17 @@ h5.ui.header {
 .ui.right.floated.header {
  float: right;
 }
+/*-------------------
+       Fittted
+--------------------*/
+.ui.fitted.header {
+  padding: 0em;
+}
 /*-------------------
        Block
 --------------------*/
 .ui.block.header {
-  background-color: #F0F0F0;
+  background-color: #F5F5F5;
  padding: 0.5em 1em;
 }
 /*-------------------
--- a/node/src/files/components/semantic/views/feed.css
+++ b/node/src/files/components/semantic/views/feed.css
@ -22,7 +22,6 @@
 .ui.feed .event {
  width: 100%;
  display: table;
-  border-top: 1px dotted rgba(0, 0, 0, 0.1);
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
@ -32,6 +31,9 @@
 .ui.feed .event:first-child {
  border-top: 0px;
 }
+.ui.feed .event:last-child {
+  margin-bottom: 2em;
+}
 /* Event Label */
 .ui.feed .label {
  width: 3em;
@ -40,12 +42,11 @@
  text-align: left;
 }
 .ui.feed .label .icon {
-  font-size: 1.75em;
+  font-size: 1.5em;
  margin: 0em;
 }
 .ui.feed .label img {
-  width: 3.25em;
-  padding: 0.25em;
+  width: 3em;
  margin: 0em;
  border-radius: 50em;
 }
@ -79,10 +80,34 @@
 }
 .ui.feed .content .extra.images img {
  display: inline-block;
-  margin-right: 1em;
-  width: 9em;
+  margin-right: 0.25em;
+  width: 6em;
 }
 .ui.feed .content .extra.text {
  padding: 0.5em 1em;
  border-left: 0.2em solid rgba(0, 0, 0, 0.1);
 }
+/*******************************
+            Variations
+*******************************/
+.ui.small.feed .label img {
+  width: 2.5em;
+}
+.ui.small.feed .label .icon {
+  font-size: 1.25em;
+}
+.ui.feed .event {
+  padding: 0.75em 0em;
+}
+.ui.small.feed .content {
+  padding: 0.5em 0.5em 0;
+}
+.ui.small.feed .content .extra.images img {
+  width: 5em;
+}
+.ui.small.feed .content .extra {
+  margin: 0.5em 0em 0em;
+}
+.ui.feed .content .extra.text {
+  padding: 0.25em 0.5em;
+}
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@ -765,7 +765,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
 #example h4 + .example i.code {
  top: 0px;
 }
-#example .example h4 {
+#example .example > h4 {
  margin-bottom: 0em;
 }
 #example .example {
--- a/node/src/files/stylesheets/shape.css
+++ b/node/src/files/stylesheets/shape.css
@ -3,6 +3,12 @@
        Shapes Example
 *******************************/

+
+#example.shape .ui.header {
+  clear: both;
+  margin-top: 1rem;
+}
+
 #example .dog.shape {
  float: left;
  margin: 0 1em 3em 0;
@ -41,11 +47,6 @@
  width: 140px;
 }

-#example .ui.header {
-  clear: both;
-  margin-top: 1rem;
-}
-

 #example .demo.shape {

--- a/src/collections/menu.less
+++ b/src/collections/menu.less
@ -1111,6 +1111,11 @@
  opacity: 1;
 }

+/* Item Icon Only */
+.ui.menu .icon.item .icon {
+  margin: 0em;
+}
+
 /*--- inverted ---*/
 .ui.inverted.icon.menu .item {
  color: rgba(255, 255, 255, 0.8);
--- a/src/elements/button.less
+++ b/src/elements/button.less
@ -545,7 +545,6 @@ Containing Icon
 .ui.icon.buttons .button i,
 .ui.icon.button i {
  margin: 0em;
-  vertical-align: top;
 }


@ -654,10 +653,10 @@ Containing Icon
     Bubbly
 ---------------*/

-.ui.button.bubbly {
-  -webkit-border-radius: 1em;
-  -moz-border-radius: 1em;
-  border-radius: 1em;
+.ui.circular.button {
+  -webkit-border-radius: 10em;
+  -moz-border-radius: 10em;
+  border-radius: 10em;
 }


@ -738,67 +737,9 @@ input:focus + .ui.attached.button {



-/*******************************
-      Buttons (Button Group)
-*******************************/
-
-.ui.buttons {
-  overflow: hidden;
-}
-.ui.buttons .button {
-  float: left;
-  -webkit-border-radius: 0em;
-  -moz-border-radius: 0em;
-  border-radius: 0em;
-  border-left: 1px solid rgba(0, 0, 0, 0.05);
-}
-.ui.buttons .button:first-child  {
-  margin-left: 0em;
-  border-top-left-radius: 0.3125em;
-  border-bottom-left-radius: 0.3125em;
-}
-.ui.buttons .button:last-child {
-  border-top-right-radius: 0.3125em;
-  border-bottom-right-radius: 0.3125em;
-}
-
-/* Vertical  Style */
-.ui.buttons.vertical {
-  display: inline-block;
-}
-.ui.buttons.vertical .button {
-  display: block;
-  float: none;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  border-left: none;
-  box-shadow: none;
-}
-.ui.buttons.vertical .button:first-child,
-.ui.buttons.vertical .mini.button:first-child,
-.ui.buttons.vertical .tiny.button:first-child,
-.ui.buttons.vertical .small.button:first-child,
-.ui.buttons.vertical .massive.button:first-child,
-.ui.buttons.vertical .huge.button:first-child {
-  margin-top: 0px;
-  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
-  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
-  border-radius: 0.3125em 0.3125em 0px 0px;
-}
-.ui.buttons.vertical .button:last-child,
-.ui.buttons.vertical .mini.button:last-child,
-.ui.buttons.vertical .tiny.button:last-child,
-.ui.buttons.vertical .small.button:last-child,
-.ui.buttons.vertical .massive.button:last-child,
-.ui.buttons.vertical .huge.button:last-child,
-.ui.buttons.vertical .gigantic.button:last-child {
-  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
-  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
-  border-radius: 0px 0px 0.3125em 0.3125em;
-}
-
-/*******************************
-       OR Button Divisions
-*******************************/
+/*-------------------
+      Or Buttons
+--------------------*/

 .ui.buttons .or {
  position: relative;
@ -1028,4 +969,64 @@ input:focus + .ui.attached.button {
 }
 .ui.twelve.fluid.buttons > .button {
  height: 8.3333%;
+}
+
+
+
+/*******************************
+            Groups
+*******************************/
+
+.ui.buttons {
+  overflow: hidden;
+}
+.ui.buttons .button {
+  float: left;
+  -webkit-border-radius: 0em;
+  -moz-border-radius: 0em;
+  border-radius: 0em;
+  border-left: 1px solid rgba(0, 0, 0, 0.05);
+}
+.ui.buttons .button:first-child  {
+  margin-left: 0em;
+  border-top-left-radius: 0.3125em;
+  border-bottom-left-radius: 0.3125em;
+}
+.ui.buttons .button:last-child {
+  border-top-right-radius: 0.3125em;
+  border-bottom-right-radius: 0.3125em;
+}
+
+/* Vertical  Style */
+.ui.buttons.vertical {
+  display: inline-block;
+}
+.ui.buttons.vertical .button {
+  display: block;
+  float: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-left: none;
+  box-shadow: none;
+}
+.ui.buttons.vertical .button:first-child,
+.ui.buttons.vertical .mini.button:first-child,
+.ui.buttons.vertical .tiny.button:first-child,
+.ui.buttons.vertical .small.button:first-child,
+.ui.buttons.vertical .massive.button:first-child,
+.ui.buttons.vertical .huge.button:first-child {
+  margin-top: 0px;
+  -moz-border-radius: 0.3125em 0.3125em 0px 0px;
+  -webkit-border-radius: 0.3125em 0.3125em 0px 0px;
+  border-radius: 0.3125em 0.3125em 0px 0px;
+}
+.ui.buttons.vertical .button:last-child,
+.ui.buttons.vertical .mini.button:last-child,
+.ui.buttons.vertical .tiny.button:last-child,
+.ui.buttons.vertical .small.button:last-child,
+.ui.buttons.vertical .massive.button:last-child,
+.ui.buttons.vertical .huge.button:last-child,
+.ui.buttons.vertical .gigantic.button:last-child {
+  -moz-border-radius: 0px 0px 0.3125em 0.3125em;
+  -webkit-border-radius: 0px 0px 0.3125em 0.3125em;
+  border-radius: 0px 0px 0.3125em 0.3125em;
 }
--- a/src/elements/header.less
+++ b/src/elements/header.less
@ -223,12 +223,21 @@ h5.ui.header {
  float: right;
 }

+/*-------------------
+       Fittted
+--------------------*/
+
+.ui.fitted.header {
+  padding: 0em;
+}
+
+
 /*-------------------
        Block
 --------------------*/

 .ui.block.header {
-  background-color: #F0F0F0;
+  background-color: #F5F5F5;
  padding: 0.5em 1em;  
 }

--- a/src/views/feed.less
+++ b/src/views/feed.less
@ -32,7 +32,6 @@
 .ui.feed .event {
  width: 100%;
  display: table;
-  border-top: 1px dotted rgba(0, 0, 0, 0.1);
  padding: 1em;

  -webkit-box-sizing: border-box;
@ -43,6 +42,9 @@
 .ui.feed .event:first-child {
  border-top: 0px;
 }
+.ui.feed .event:last-child {
+  margin-bottom: 2em;
+}

 /* Event Label */
 .ui.feed .label {
@ -52,12 +54,11 @@
  text-align: left;
 }
 .ui.feed .label .icon {
-  font-size: 1.75em;
+  font-size: 1.5em;
  margin: 0em;
 }
 .ui.feed .label img {
-  width: 3.25em;
-  padding: 0.25em;
+  width: 3em;
  margin: 0em;
  border-radius: 50em;
 }
@ -94,17 +95,44 @@
  color: rgba(0, 0, 0, 0.5);
 }

-
 .ui.feed .content .extra.images {

 }
 .ui.feed .content .extra.images img {
  display: inline-block;
-  margin-right: 1em;
-  width: 9em;
+  margin-right: 0.25em;
+  width: 6em;
 }

 .ui.feed .content .extra.text {
  padding: 0.5em 1em;
  border-left: 0.2em solid rgba(0, 0, 0, 0.1);
 }
+
+
+
+/*******************************
+            Variations
+*******************************/
+
+.ui.small.feed .label img {
+  width: 2.5em;
+}
+.ui.small.feed .label .icon {
+  font-size: 1.25em;
+}
+.ui.feed .event {
+  padding: 0.75em 0em;
+}
+.ui.small.feed .content {
+  padding: 0.5em 0.5em 0;
+}
+.ui.small.feed .content .extra.images img {
+  width: 5em;
+}
+.ui.small.feed .content .extra {
+  margin: 0.5em 0em 0em;
+}
+.ui.feed .content .extra.text {
+  padding: 0.25em 0.5em;
+}