New input stylings and other things

build/minified/elements/input.min.css

@@ -1 +1 @@
-.ui.input input[type=text],input.ui.input{font-family:"Helvetica Neue",Helvetica,Arial;padding:.9em 1.2em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:#555;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-moz-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-o-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-ms-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.input:focus{color:rgba(20,20,20,.9)}.ui.input.error{background-color:#FFFAFA;border-color:#E7BEBE;border-left:0;color:#EF4D6D}
+.ui.input{display:inline-block;position:relative}.ui.input input{font-family:"Helvetica Neue",Helvetica,Arial;padding:.9em 1.2em;font-size:.825em;background-color:#FFF;border:1px solid rgba(0,0,0,.15);outline:0;color:rgba(0,0,0,.7);-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.3125em;-webkit-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-moz-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-o-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-ms-transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;transition:background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.input::-web inputkit-input-placeholder{color:#E0E0E0}.ui.input::-moz input-placeholder{color:#E0E0E0}.ui.input input:active,.ui.input.down input{border-color:rgba(0,0,0,.3);background-color:#FAFAFA}.ui.input.focus input,.ui.input input:focus{border-color:rgba(0,0,0,.2);color:rgba(0,0,0,.85)}.ui.input.focus input input::-webkit-input-placeholder,.ui.input input:focus input::-webkit-input-placeholder{color:#AAA}.ui.input.focus input input::-moz-placeholder,.ui.input input:focus input::-moz-placeholder{color:#AAA}.ui.input.error input{background-color:#FFFAFA;border-color:#E7BEBE;color:#EF4D6D}.ui.input.error input ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.input.error input :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.input.error input :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.icon.input .icon{position:absolute;top:1px;left:1px;border-right:1px solid rgba(0,0,0,.1);background-color:#E8E8E8;width:2.5em;height:2.47em;padding-top:.75em;text-align:center;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transition:opacity .3s ease-out;-moz-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;-ms-transition:opacity .3s ease-out;transition:opacity .3s ease-out}.ui.icon.input input{padding-left:4em;border-right:1px solid rgba(0,0,0,.3)}.ui.icon.input input:focus~.icon{opacity:1}.ui.labeled.input .corner.label{top:1px;right:1px;-webkit-border-top-right-radius:.3125em;-moz-border-top-right-radius:.3125em;border-top-right-radius:.3125em}.ui.labeled.input input{padding-right:2.5em}.ui.action.input .button{position:absolute;top:0;left:100%;margin:0 0 0 -1px;min-height:3.1em;padding:.92em!important;border-top-left-radius:0;border-bottom-left-radius:0;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;font-size:.85em;white-space:nowrap}.ui.action.input input{border-top-right-radius:0;border-bottom-right-radius:0}.ui.action.input input:focus~.button{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;-moz-box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset}

build/uncompressed/collections/form.css

@@ -51,16 +51,14 @@
 .ui.form textarea,
 .ui.form input[type="text"],
 .ui.form input[type="date"],
-.ui.form input[type="password"],
+.ui.form input[type="password"] {
-.ui.textarea,
-.ui.input {
   width: 100%;
   padding: 0.9em 1.2em;
   font-size: 0.825em;
   background-color: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.15);
   outline: none;
-  color: #555555;
+  color: rgba(0, 0, 0, 0.7);
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
   border-radius: 0.3125em;
@@ -137,7 +135,7 @@
 ---------------------*/
 .ui.form input:focus,
 .ui.form textarea:focus {
-  color: rgba(20, 20, 20, 0.9);
+  color: rgba(0, 0, 0, 0.85);
   border-color: rgba(0, 0, 0, 0.5);
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -207,10 +205,6 @@
 .ui.form :focus::-moz-placeholder {
   color: #AAAAAA;
 }
-.ui.form textarea.empty,
-.ui.form input.empty {
-  color: #E0E0E0;
-}
 /* Error Placeholder */
 .ui.form .error ::-webkit-input-placeholder {
   color: rgba(255, 80, 80, 0.4);

build/uncompressed/elements/button.css

@@ -39,6 +39,10 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
   -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;

build/uncompressed/elements/icons.css

@@ -45,6 +45,10 @@ i.icon {
   text-decoration: inherit;
   text-align: center;
   speak: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   font-smoothing: antialiased;
@@ -553,7 +557,7 @@ i.icon.rocket:before {
   font-family: "Custom Icons";
   content: "\f100";
 }
-i.icon.paint:before {
+i.icon.brush:before {
   font-family: "Custom Icons";
   content: "\f101";
 }

build/uncompressed/elements/input.css

@@ -1,5 +1,5 @@
 /*
- * # Semantic Form
+ * # Semantic Input
  * http://github.com/quirkyinc/semantic
  *
  *
@@ -7,7 +7,7 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- * Released: April 22 2013
+ * Released: May 29 2013
  */
 /*******************************
            Standard
@@ -15,15 +15,18 @@
 /*--------------------
         Inputs
 ---------------------*/
-.ui.input input[type="text"],
+.ui.input {
-input.ui.input {
+  display: inline-block;
+  position: relative;
+}
+.ui.input input {
   font-family: "Helvetica Neue", "Helvetica", Arial;
   padding: 0.9em 1.2em;
   font-size: 0.825em;
   background-color: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.15);
   outline: none;
-  color: #555555;
+  color: rgba(0, 0, 0, 0.7);
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
   border-radius: 0.3125em;
@@ -38,27 +41,138 @@ input.ui.input {
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 }
+/*--------------------
+      Placeholder
+---------------------*/
+/* browsers require these rules separate */
+.ui.input::-web inputkit-input-placeholder {
+  color: #E0E0E0;
+}
+.ui.input::-moz input-placeholder {
+  color: #E0E0E0;
+}
 /*******************************
             States
 *******************************/
+/*--------------------
+        Active
+---------------------*/
+.ui.input input:active,
+.ui.input.down input {
+  border-color: rgba(0, 0, 0, 0.3);
+  background-color: #FAFAFA;
+}
 /*--------------------
         Focus
 ---------------------*/
-.ui.input:focus {
+.ui.input.focus input,
-  color: rgba(20, 20, 20, 0.9);
+.ui.input input:focus {
+  border-color: rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.input.focus input input::-webkit-input-placeholder,
+.ui.input input:focus input::-webkit-input-placeholder {
+  color: #AAAAAA;
+}
+.ui.input.focus input input::-moz-placeholder,
+.ui.input input:focus input::-moz-placeholder {
+  color: #AAAAAA;
 }
 /*--------------------
         Error
 ---------------------*/
-.ui.input.error {
+.ui.input.error input {
   background-color: #FFFAFA;
   border-color: #E7BEBE;
-  border-left: none;
   color: #EF4D6D;
 }
+/* Error Placeholder */
+.ui.input.error input ::-webkit-input-placeholder {
+  color: rgba(255, 80, 80, 0.4);
+}
+.ui.input.error input ::-moz-placeholder {
+  color: rgba(255, 80, 80, 0.4);
+}
+.ui.input.error input :focus::-webkit-input-placeholder {
+  color: rgba(255, 80, 80, 0.7);
+}
+.ui.input.error input :focus::-moz-placeholder {
+  color: rgba(255, 80, 80, 0.7);
+}
 /*******************************
            Variations
 *******************************/
 /*--------------------
-      Fluid Width
+         Icon
+---------------------*/
+.ui.icon.input .icon {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #E8E8E8;
+  width: 2.5em;
+  height: 2.47em;
+  padding-top: 0.75em;
+  text-align: center;
+  -webkit-border-radius: 0.2em 0em 0em 0.2em;
+  -moz-border-radius: 0.2em 0em 0em 0.2em;
+  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: opacity 0.3s ease-out;
+  -moz-transition: opacity 0.3s ease-out;
+  -o-transition: opacity 0.3s ease-out;
+  -ms-transition: opacity 0.3s ease-out;
+  transition: opacity 0.3s ease-out;
+}
+.ui.icon.input input {
+  padding-left: 4em;
+  border-right: 1px solid rgba(0, 0, 0, 0.3);
+}
+/* Focus */
+.ui.icon.input input:focus ~ .icon {
+  opacity: 1;
+}
+/*--------------------
+        Labeled
 ---------------------*/
+.ui.labeled.input .corner.label {
+  top: 1px;
+  right: 1px;
+  -webkit-border-top-right-radius: 0.3125em;
+  -moz-border-top-right-radius: 0.3125em;
+  border-top-right-radius: 0.3125em;
+}
+.ui.labeled.input input {
+  padding-right: 2.5em;
+}
+/*--------------------
+        Action
+---------------------*/
+.ui.action.input .button {
+  position: absolute;
+  top: 0em;
+  left: 100%;
+  margin: 0em 0em 0em -1px;
+  min-height: 3.1em;
+  padding: 0.92em !important;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  font-size: 0.85em;
+  white-space: nowrap;
+}
+.ui.action.input input {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui.action.input input:focus ~ .button {
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+}

build/uncompressed/elements/label.css

@@ -176,7 +176,7 @@ a.ui.label:hover:before {
   right: 0em;
   z-index: 10;
   width: 1.75em;
-  height: 2.5em;
+  height: 1.75em;
   padding: 0em;
   font-size: 0.9em;
   text-align: center;

node/src/documents/elements/icon.html

@@ -39,7 +39,7 @@ type   : 'UI Element'
     <h4 class="ui header">Invention</h4>
       <div class="ui eight column grid">
         <div class="column"><i class="icon rocket"></i> Rocket</div>
-        <div class="column"><i class="icon paint"></i> Paint</div>
+        <div class="column"><i class="icon brush"></i> Brush</div>
         <div class="column"><i class="icon price"></i> Price</div>
         <div class="column"><i class="icon tools"></i> Tools</div>
       </div>

node/src/documents/elements/input.html

@@ -14,7 +14,7 @@ type   : 'UI Element'
     </div>
     <h1 class="ui header">
       Input
-      <div class="sub header">Inputs indicate a possible user action.</div>
+      <div class="sub header">Inputs allow a user to enter information into a website</div>
     </h1>
   </div>
 </div>
@@ -25,7 +25,6 @@ type   : 'UI Element'
       <a class="active item">Standard</a>
       <a class="item">States</a>
       <a class="item">Variations</a>
-      <a class="item">Groups</a>
     </div>
   </div>
   <h2 class="ui dividing header">Standard</h2>
@@ -33,16 +32,9 @@ type   : 'UI Element'
   <div class="example">
     <h4 class="ui header">Input:</h4>
     <p>A standard input</p>
-    <div class="ui input">Input</div>
+    <div class="ui input">
-  </div>
+      <input type="text">
-  
+    </div>
-  <div class="example">
-    <h4 class="ui header">Search</h4>
-    <p>A input can indicate</p>
-    <div class="ui secondary input">Secondary</div>
-    <div class="ui secondary teal input">Secondary</div>
-    <div class="ui secondary purple input">Secondary</div>
-    <div class="ui secondary red input">Secondary</div>
   </div>
 
   <h2 class="ui dividing header">States</h2>
@@ -50,16 +42,54 @@ type   : 'UI Element'
   <div class="example">
     <h4 class="ui header">Focus</h4>
     <p>An input field can show a user is currently interacting with it</p>
-    <input class="ui hover input"></input>
+    <div class="ui input focus">
+      <input type="text">
+    </div>
   </div>
   
   <div class="example">
     <h4 class="ui header">Error</h4>
     <p>An input field can show the data contains errors</p>
-    <input class="ui hover input"></input>
+    <div class="ui input error">
+      <input type="text">
+    </div>
   </div>
   
   <h2 class="ui dividing header">Variations</h2>
+  
+  <div class="example">
+    <h4 class="ui header">Icon</h4>
+    <p>An input can be formatted with an icon</p>
+    <div class="ui icon input">
+      <input type="text" placeholder="Search...">
+      <i class="icon search"></i>
+    </div>
+    <br><br>
+    <div class="ui icon input">
+      <input type="text" placeholder="Search users...">
+      <i class="icon blue inverted users"></i>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4 class="ui header">Labeled</h4>
+    <p>An input can be formatted with a label</p>
+    <div class="ui labeled input">
+      <input type="text" placeholder="Search...">
+      <div class="ui corner label">
+        <i class="asterisk icon"></i>
+      </div>
+    </div>
+  </div>
+  
+  <div class="example">
+    <h4 class="ui header">Action</h4>
+    <p>An input can be formatted so a user can trigger an action</p>
+    <div class="ui input action">
+      <input type="text" placeholder="Search...">
+      <div class="ui button">Go</div>
+    </div>
+  </div>
 
 </div>
 </body>

node/src/documents/specification/styleguide.html

@@ -44,6 +44,8 @@ type   : 'UI Specification'
   
   Use box shadow instead of borders for adding borders that dont use box model
   
+  Use rgba instead of hexcode unless you dont want color layering to be additive
+  
   
   
 </div>

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

@@ -51,16 +51,14 @@
 .ui.form textarea,
 .ui.form input[type="text"],
 .ui.form input[type="date"],
-.ui.form input[type="password"],
+.ui.form input[type="password"] {
-.ui.textarea,
-.ui.input {
   width: 100%;
   padding: 0.9em 1.2em;
   font-size: 0.825em;
   background-color: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.15);
   outline: none;
-  color: #555555;
+  color: rgba(0, 0, 0, 0.7);
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
   border-radius: 0.3125em;
@@ -137,7 +135,7 @@
 ---------------------*/
 .ui.form input:focus,
 .ui.form textarea:focus {
-  color: rgba(20, 20, 20, 0.9);
+  color: rgba(0, 0, 0, 0.85);
   border-color: rgba(0, 0, 0, 0.5);
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -207,10 +205,6 @@
 .ui.form :focus::-moz-placeholder {
   color: #AAAAAA;
 }
-.ui.form textarea.empty,
-.ui.form input.empty {
-  color: #E0E0E0;
-}
 /* Error Placeholder */
 .ui.form .error ::-webkit-input-placeholder {
   color: rgba(255, 80, 80, 0.4);

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

@@ -39,6 +39,10 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
   -moz-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;

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

@@ -45,6 +45,10 @@ i.icon {
   text-decoration: inherit;
   text-align: center;
   speak: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   font-smoothing: antialiased;
@@ -553,7 +557,7 @@ i.icon.rocket:before {
   font-family: "Custom Icons";
   content: "\f100";
 }
-i.icon.paint:before {
+i.icon.brush:before {
   font-family: "Custom Icons";
   content: "\f101";
 }

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

@@ -1,5 +1,5 @@
 /*
- * # Semantic Form
+ * # Semantic Input
  * http://github.com/quirkyinc/semantic
  *
  *
@@ -7,7 +7,7 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- * Released: April 22 2013
+ * Released: May 29 2013
  */
 /*******************************
            Standard
@@ -15,15 +15,18 @@
 /*--------------------
         Inputs
 ---------------------*/
-.ui.input input[type="text"],
+.ui.input {
-input.ui.input {
+  display: inline-block;
+  position: relative;
+}
+.ui.input input {
   font-family: "Helvetica Neue", "Helvetica", Arial;
   padding: 0.9em 1.2em;
   font-size: 0.825em;
   background-color: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.15);
   outline: none;
-  color: #555555;
+  color: rgba(0, 0, 0, 0.7);
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
   border-radius: 0.3125em;
@@ -38,27 +41,138 @@ input.ui.input {
   -ms-box-sizing: border-box;
   box-sizing: border-box;
 }
+/*--------------------
+      Placeholder
+---------------------*/
+/* browsers require these rules separate */
+.ui.input::-web inputkit-input-placeholder {
+  color: #E0E0E0;
+}
+.ui.input::-moz input-placeholder {
+  color: #E0E0E0;
+}
 /*******************************
             States
 *******************************/
+/*--------------------
+        Active
+---------------------*/
+.ui.input input:active,
+.ui.input.down input {
+  border-color: rgba(0, 0, 0, 0.3);
+  background-color: #FAFAFA;
+}
 /*--------------------
         Focus
 ---------------------*/
-.ui.input:focus {
+.ui.input.focus input,
-  color: rgba(20, 20, 20, 0.9);
+.ui.input input:focus {
+  border-color: rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.input.focus input input::-webkit-input-placeholder,
+.ui.input input:focus input::-webkit-input-placeholder {
+  color: #AAAAAA;
+}
+.ui.input.focus input input::-moz-placeholder,
+.ui.input input:focus input::-moz-placeholder {
+  color: #AAAAAA;
 }
 /*--------------------
         Error
 ---------------------*/
-.ui.input.error {
+.ui.input.error input {
   background-color: #FFFAFA;
   border-color: #E7BEBE;
-  border-left: none;
   color: #EF4D6D;
 }
+/* Error Placeholder */
+.ui.input.error input ::-webkit-input-placeholder {
+  color: rgba(255, 80, 80, 0.4);
+}
+.ui.input.error input ::-moz-placeholder {
+  color: rgba(255, 80, 80, 0.4);
+}
+.ui.input.error input :focus::-webkit-input-placeholder {
+  color: rgba(255, 80, 80, 0.7);
+}
+.ui.input.error input :focus::-moz-placeholder {
+  color: rgba(255, 80, 80, 0.7);
+}
 /*******************************
            Variations
 *******************************/
 /*--------------------
-      Fluid Width
+         Icon
+---------------------*/
+.ui.icon.input .icon {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #E8E8E8;
+  width: 2.5em;
+  height: 2.47em;
+  padding-top: 0.75em;
+  text-align: center;
+  -webkit-border-radius: 0.2em 0em 0em 0.2em;
+  -moz-border-radius: 0.2em 0em 0em 0.2em;
+  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transition: opacity 0.3s ease-out;
+  -moz-transition: opacity 0.3s ease-out;
+  -o-transition: opacity 0.3s ease-out;
+  -ms-transition: opacity 0.3s ease-out;
+  transition: opacity 0.3s ease-out;
+}
+.ui.icon.input input {
+  padding-left: 4em;
+  border-right: 1px solid rgba(0, 0, 0, 0.3);
+}
+/* Focus */
+.ui.icon.input input:focus ~ .icon {
+  opacity: 1;
+}
+/*--------------------
+        Labeled
 ---------------------*/
+.ui.labeled.input .corner.label {
+  top: 1px;
+  right: 1px;
+  -webkit-border-top-right-radius: 0.3125em;
+  -moz-border-top-right-radius: 0.3125em;
+  border-top-right-radius: 0.3125em;
+}
+.ui.labeled.input input {
+  padding-right: 2.5em;
+}
+/*--------------------
+        Action
+---------------------*/
+.ui.action.input .button {
+  position: absolute;
+  top: 0em;
+  left: 100%;
+  margin: 0em 0em 0em -1px;
+  min-height: 3.1em;
+  padding: 0.92em !important;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  font-size: 0.85em;
+  white-space: nowrap;
+}
+.ui.action.input input {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui.action.input input:focus ~ .button {
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+}

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

@@ -176,7 +176,7 @@ a.ui.label:hover:before {
   right: 0em;
   z-index: 10;
   width: 1.75em;
-  height: 2.5em;
+  height: 1.75em;
   padding: 0em;
   font-size: 0.9em;
   text-align: center;

node/src/files/javascript/semantic.js

@@ -222,7 +222,7 @@ semantic.ready = function() {
         $(this)
           .stop()
           .animate({
-            width: '120px'
+            width: '180px'
           }, 300, function() {
             $(this).find('.text').show();
           })
@@ -233,7 +233,7 @@ semantic.ready = function() {
         $(this)
           .stop()
           .animate({
-            width: '10px'
+            width: '70px'
           }, 300)
         ;
       }

node/src/files/stylesheets/semantic.css

@@ -407,7 +407,7 @@ a:hover {
   position: fixed;
   top: 75px;
   z-index: 500;
-  width: 10px;
+  width: 70px;
 }
 #example .sidebar.button .text {
   display: inline-block;

node/src/layouts/default.html.eco

@@ -30,6 +30,7 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/divider.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/header.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/icons.css">
+  <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/input.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/label.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/progress.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/components/semantic/elements/segment.css">

src/collections/form.less

@@ -64,9 +64,7 @@
 .ui.form textarea,
 .ui.form input[type="text"],
 .ui.form input[type="date"],
-.ui.form input[type="password"],
+.ui.form input[type="password"] {
-.ui.textarea,
-.ui.input {
   width: 100%;
   padding: 0.9em 1.2em;
   font-size: 0.825em;
@@ -76,7 +74,7 @@
   outline: none;
 
 
-  color: #555555;
+  color: rgba(0, 0, 0, 0.7);
 
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
@@ -192,7 +190,7 @@
 
 .ui.form input:focus,
 .ui.form textarea:focus {
-  color: rgba(20, 20, 20, 0.9);
+  color: rgba(0, 0, 0, 0.85);
   border-color: rgba(0, 0, 0, 0.5);
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -275,10 +273,6 @@
 .ui.form :focus::-moz-placeholder {
   color: #AAAAAA;
 }
-.ui.form textarea.empty,
-.ui.form input.empty {
-  color: #E0E0E0;
-}
 
 /* Error Placeholder */
 .ui.form .error ::-webkit-input-placeholder {

src/elements/button.less

@@ -56,6 +56,11 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 

src/elements/icons.less

@@ -67,6 +67,11 @@ i.icon {
   text-align: center;
 
   speak: none;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
@@ -218,7 +223,7 @@ i.icon.zoom.out:before { content: '\e751'; } /* '' */
 *******************************/
 
 i.icon.rocket:before { font-family: "Custom Icons"; content: "\f100"; }
-i.icon.paint:before { font-family: "Custom Icons"; content: "\f101"; }
+i.icon.brush:before { font-family: "Custom Icons"; content: "\f101"; }
 i.icon.price:before { font-family: "Custom Icons"; content: "\f102"; }
 i.icon.tools:before { font-family: "Custom Icons"; content: "\f103"; }
 

src/elements/input.less

@@ -1,5 +1,5 @@
 /*
- * # Semantic Form
+ * # Semantic Input
  * http://github.com/quirkyinc/semantic
  *
  *
@@ -7,7 +7,7 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- * Released: April 22 2013
+ * Released: May 29 2013
  */
 
 
@@ -20,8 +20,11 @@
         Inputs
 ---------------------*/
 
-.ui.input input[type="text"],
+.ui.input {
-input.ui.input {
+  display: inline-block;
+  position: relative;
+}
+.ui.input input {
   font-family: "Helvetica Neue", "Helvetica", Arial;
   
   padding: 0.9em 1.2em;
@@ -31,7 +34,7 @@ input.ui.input {
   border: 1px solid rgba(0, 0, 0, 0.15);
   outline: none;
 
-  color: #555555;
+  color: rgba(0, 0, 0, 0.7);
 
   -webkit-border-radius: 0.3125em;
   -moz-border-radius: 0.3125em;
@@ -72,37 +75,174 @@ input.ui.input {
 }
 
 
+/*--------------------
+      Placeholder
+---------------------*/
+
+/* browsers require these rules separate */
+.ui.input::-web inputkit-input-placeholder {
+  color: #E0E0E0;
+}
+.ui.input::-moz input-placeholder {
+  color: #E0E0E0;
+}
+
 
 /*******************************
             States
 *******************************/
 
+/*--------------------
+        Active
+---------------------*/
+
+.ui.input input:active,
+.ui.input.down input {
+  border-color: rgba(0, 0, 0, 0.3);
+  background-color: #FAFAFA;
+}
 
 /*--------------------
         Focus
 ---------------------*/
 
-.ui.input:focus  {
+.ui.input.focus input,
-  color: rgba(20, 20, 20, 0.9);
+.ui.input input:focus  {
+  border-color: rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.input.focus input input::-webkit-input-placeholder,
+.ui.input input:focus input::-webkit-input-placeholder {
+  color: #AAAAAA;
 }
+.ui.input.focus input input::-moz-placeholder,
+.ui.input input:focus input::-moz-placeholder {
+  color: #AAAAAA;
+}
+
 
 /*--------------------
         Error
 ---------------------*/
 
-.ui.input.error {
+.ui.input.error input {
   background-color: #FFFAFA;
   border-color: #E7BEBE;
-  border-left: none;
-
   color: #EF4D6D;
 }
 
+/* Error Placeholder */
+.ui.input.error input ::-webkit-input-placeholder {
+  color: rgba(255, 80, 80, 0.4);
+}
+.ui.input.error input ::-moz-placeholder {
+  color: rgba(255, 80, 80, 0.4);
+}
+.ui.input.error input :focus::-webkit-input-placeholder {
+  color: rgba(255, 80, 80, 0.7);
+}
+.ui.input.error input :focus::-moz-placeholder {
+  color: rgba(255, 80, 80, 0.7);
+}
 
 /*******************************
            Variations
 *******************************/
 
 /*--------------------
-      Fluid Width
+         Icon
+---------------------*/
+
+.ui.icon.input .icon {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  
+  background-color: #E8E8E8;
+  width: 2.5em;
+  height: 2.47em;
+  padding-top: 0.75em;
+
+  text-align: center;
+
+  -webkit-border-radius: 0.2em 0em 0em 0.2em;
+  -moz-border-radius: 0.2em 0em 0em 0.2em;
+  border-radius: 0.2em 0em 0em 0.2em;
+
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+
+  -webkit-transition: opacity 0.3s ease-out;
+  -moz-transition: opacity 0.3s ease-out;
+  -o-transition: opacity 0.3s ease-out;
+  -ms-transition: opacity 0.3s ease-out;
+  transition: opacity 0.3s ease-out;
+
+}
+.ui.icon.input input {
+  padding-left: 4em;
+  border-right: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+/* Focus */
+.ui.icon.input input:focus ~ .icon {
+  opacity: 1;
+}
+
+/*--------------------
+        Labeled
 ---------------------*/
+
+.ui.labeled.input .corner.label {
+  top: 1px;
+  right: 1px;
+
+  -webkit-border-top-right-radius: 0.3125em;
+  -moz-border-top-right-radius: 0.3125em;
+  border-top-right-radius: 0.3125em;
+}
+.ui.labeled.input input {
+  padding-right: 2.5em;
+}
+
+
+
+/*--------------------
+        Action
+---------------------*/
+
+.ui.action.input .button {
+  position: absolute;
+  top: 0em;
+  left: 100%;
+
+  margin: 0em 0em 0em -1px;
+
+  min-height: 3.1em;
+  padding: 0.92em !important;
+
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+
+  font-size: 0.85em;
+  white-space: nowrap;
+}
+
+.ui.action.input input {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui.action.input input:focus ~ .button {
+  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
+}
+

src/elements/label.less

@@ -227,7 +227,7 @@ a.ui.label:hover:before {
   z-index: 10;
 
   width: 1.75em;
-  height: 2.5em;
+  height: 1.75em;
   padding: 0em;
 
   font-size: 0.9em;