Have to run, commit msg later

server/documents/elements/input.html.eco

@@ -102,7 +102,8 @@ themes      : ['Default']
     </div>
   </div>
   <div class="another example">
-    <div class="ui right labeled input">
+    <div class="ui right labeled left icon input">
+      <i class="tags icon"></i>
       <input type="text" placeholder="Enter categories">
       <div class="ui tag label">
         Tags

server/documents/index.html.eco

@@ -12,7 +12,7 @@ type   : 'Semantic'
 <div class="following bar">
   <div class="ui page grid">
     <div class="column">
-      <img src="images/logo.png" class="logo">
+      <img src="/images/logo.png" class="logo">
       <div class="ui large inverted right floated secondary menu">
         <div class="ui language floating dropdown item" id="languages">
           <i class="world icon"></i>
@@ -154,18 +154,6 @@ type   : 'Semantic'
           </h4>
           <%- @partial('examples/step') %>
         </div>
-        <div class="no example">
-          <h4 class="ui header">
-            <a href="/elements/input.html">Input</a>
-          </h4>
-          <%- @partial('examples/input') %>
-        </div>
-        <div class="no example">
-          <h4 class="ui header">
-            <a href="/elements/label.html">Label</a>
-          </h4>
-          <%- @partial('examples/label') %>
-        </div>
         <div class="no example">
           <h4 class="ui header">
             <a href="/collections/message.html">Message</a>
@@ -186,6 +174,12 @@ type   : 'Semantic'
           </h4>
           <%- @partial('examples/feed') %>
         </div>
+        <div class="no example">
+          <h4 class="ui header">
+            <a href="/elements/label.html">Label</a>
+          </h4>
+          <%- @partial('examples/label') %>
+        </div>
       </div>
       <div class="column">
         <div class="no example">
@@ -200,6 +194,12 @@ type   : 'Semantic'
           </h4>
           <%- @partial('examples/segment') %>
         </div>
+        <div class="no example">
+          <h4 class="ui header">
+            <a href="/elements/input.html">Input</a>
+          </h4>
+          <%- @partial('examples/input') %>
+        </div>
         <div class="no example">
           <h4 class="ui header">
             <a href="/modules/checkbox.html">Checkbox</a>

server/files/stylesheets/home.css

@@ -675,11 +675,6 @@
 #example .solid .column p {
   color: rgba(0, 0, 0, 0.5);
 }
-#example .stripe .message {
-  margin: 2em 0em;
-}
-
-
 
 
 

server/layouts/default.html.eco

@@ -182,9 +182,10 @@
       <i class="close icon"></i> Close Menu
     </a>
     <div class="item">
-      <a class="ui logo image" href="/">
-        <img src="images/share.png">
+      <a class="ui logo icon image" href="/">
+        <img src="/images/share.png">
       </a>
+      UI Docs
     </div>
     <a class="item" href="/build/semantic.zip">
       <i class="download icon"></i> <b>Download</b>

server/partials/examples/label.html

@@ -6,4 +6,38 @@
 <a class="ui teal label">
   <i class="mail icon"></i> 23 New
 </a>
-<a class="ui tag label">Dresses</a>
+<a class="ui tag label">Dresses</a>
+
+<div class="ui hidden divider"></div>
+<div class="ui two item fluid menu">
+  <a class="item">
+    <i class="icon mail"></i> Messages
+    <div class="floating ui red label">22</div>
+  </a>
+  <a class="item">
+    <i class="icon users"></i> Friends
+    <div class="floating ui teal label">22</div>
+  </a>
+</div>
+
+<div class="ui hidden divider"></div>
+<div class="ui left floated tiny image">
+  <a class="ui left red corner label">
+    <i class="heart icon"></i>
+  </a>
+  <img src="/images/avatar/large/jenny.jpg">
+</div>
+<div class="ui left floated tiny image">
+  <a class="ui left yellow corner label">
+    <i class="star icon"></i>
+  </a>
+  <img src="/images/avatar/large/daniel.jpg">
+</div>
+<div class="ui left floated tiny image">
+  <a class="ui right corner label">
+    <i class="close icon"></i>
+  </a>
+  <img src="/images/avatar/large/christian.jpg">
+</div>
+
+<div class="ui hidden divider"></div>

server/partials/examples/message.html

@@ -1,4 +1,24 @@
 <div class="ui message">
+  <i class="close icon"></i>
+  This site uses cookies
+</div>
+<div class="ui warning icon message">
+  <div class="content">
+    <div class="header">Looking for help? </div>
+    <ul class="list">
+      <li>Use our <a href="#">help center</a></li>
+      <li>Check our <a href"#">FAQ</a></li>
+    </ul>
+  </div>
+</div>
+<div class="ui info message">
   <div class="header">We're creating your profile page</div>
   <p>It will be ready in just a second.</p>
-</div>
+</div>
+
+<div class="ui top attached message">
+  Top attached
+</div>
+<div class="ui bottom attached message">
+  Bottom attached
+</div>

src/definitions/elements/input.less

@@ -179,6 +179,9 @@
   box-sizing: border-box;
   transition: @iconTransition;
 }
+.ui.icon.input > .icon {
+  top: @iconOffset;
+}
 .ui.icon.input > .icon:before,
 .ui.icon.input > .icon:after {
   left: 0;

src/themes/packages/default/collections/message.variables

@@ -14,8 +14,9 @@
 
 @background: #EFEFEF;
 @lineHeight: 1.3;
-@borderRadius: 0.25em;
+@lineHeightOffset: ((@lineHeight - 1em) / 2);
 
+@borderRadius: 0.25em;
 @borderWidth: 1px;
 @borderShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset;
 @boxShadow:
@@ -52,7 +53,7 @@
 @iconDistance: 0.6em;
 
 /* Close Icon */
-@closeTopDistance: 1em;
+@closeTopDistance: (1em + @lineHeightOffset);
 @closeRightDistance: 0.5em;
 @closeOpacity: 0.7;
 

src/themes/packages/default/elements/input.variables

@@ -10,7 +10,10 @@
 
 @verticalPadding: 0.8em;
 @horizontalPadding: 1em;
+
 @lineHeight: 1.2em;
+@lineHeightOffset: ((@lineHeight - 1em) / 2);
+
 @padding: (@verticalPadding - @lineHeightOffset) @horizontalPadding;
 
 @textAlign: left;
@@ -34,11 +37,14 @@
 
 /* Icon Input */
 @glyphWidth: 1.25em;
+
 @iconWidth: (@verticalPadding * 2) + @glyphWidth;
 @iconOpacity: 0.5;
 @iconFocusOpacity: 1;
-@iconSpacing: 0em;
-@iconMargin: @iconWidth + @iconSpacing;
+/*@iconOffset: @lineHeightOffset;*/
+
+@iconDistance: 0em;
+@iconMargin: @iconWidth + @iconDistance;
 @iconTransition: opacity 0.3s @defaultEasing;
 
 @transparentIconWidth: @glyphWidth;

src/themes/packages/default/globals/site.variables

@@ -19,7 +19,7 @@
 
 @importGoogleFonts : true;
 @googleFontName    : 'Lato';
-@googleFontSizes   : '300,400,700,300italic,400italic,700italic';
+@googleFontSizes   : '400,700,400italic,700italic';
 
 /*-------------------
       Site Colors
@@ -57,11 +57,10 @@
 --------------------*/
 
 @pageBackground      : #F7F7F7;
-@lineHeight          : 1.33;
-
 @pageOverflowX       : hidden;
 
 @fontSize            : 14px;
+@lineHeight          : 1.33;
 @textColor           : rgba(0, 0, 0, 0.8);
 
 @headerMargin        : 1em 0em 1rem;