adds more examples, fixes to input

Former-commit-id: 6ce32ae3f3
Former-commit-id: 3784993943

build/minified/elements/input.min.css

@@ -1 +1 @@
-.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}
+.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;margin:0;border-right:1px solid rgba(0,0,0,.1);background-color:#E8E8E8;width:2.5em;height:2.5em;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%;opacity:.8;margin:0 0 0 -1px;line-height:1.26;padding:.92em 1.3em!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{opacity:1;-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/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-0f04e268d6527b0d72587e9eb09c547493ae1194
+a079bea61e4acfb6793945add9c5e58c381f6133

build/uncompressed/elements/icons.css

@@ -590,6 +590,7 @@ i.icon.left {
   margin: 0em 0.5em 0em 0em;
 }
 /* right side icons */
+i.icon.search,
 i.icon.up,
 i.icon.down,
 i.icon.right {

build/uncompressed/elements/input.css

@@ -109,10 +109,11 @@
   position: absolute;
   top: 1px;
   left: 1px;
+  margin: 0em;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   background-color: #E8E8E8;
   width: 2.5em;
-  height: 2.47em;
+  height: 2.5em;
   padding-top: 0.75em;
   text-align: center;
   -webkit-border-radius: 0.2em 0em 0em 0.2em;
@@ -156,9 +157,10 @@
   position: absolute;
   top: 0em;
   left: 100%;
+  opacity: 0.8;
   margin: 0em 0em 0em -1px;
-  min-height: 3.1em;
-  padding: 0.92em !important;
+  line-height: 1.26;
+  padding: 0.92em 1.3em !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;
@@ -172,6 +174,7 @@
   border-bottom-right-radius: 0px;
 }
 .ui.action.input input:focus ~ .button {
+  opacity: 1;
   -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/documents/elements/input.html

@@ -35,6 +35,11 @@ type   : 'UI Element'
     <div class="ui input">
       <input type="text">
     </div>
+    <br><br>
+    <div class="ui input">
+      <i class="search icon"></i>
+      <input type="text">
+    </div>
   </div>
 
   <h2 class="ui dividing header">States</h2>
@@ -80,14 +85,27 @@ type   : 'UI Element'
         <i class="asterisk icon"></i>
       </div>
     </div>
+    <br><br>
+    <div class="ui labeled input">
+      <input type="text" placeholder="Search...">
+      <div class="ui corner label">
+        <div class="text">New</div>
+      </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>
+    <p>An input can be formatted to alert the user to an action they may perform</p>
+    <div class="ui input action">
+      <input type="text" placeholder="Search...">
+      <div class="ui button">Search</div>
+    </div>
+    <br><br>
     <div class="ui input action">
       <input type="text" placeholder="Search...">
-      <div class="ui button">Go</div>
+      <div class="ui teal button"><i class="add user icon"></i> Add users</div>
     </div>
   </div>
 

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

@@ -590,6 +590,7 @@ i.icon.left {
   margin: 0em 0.5em 0em 0em;
 }
 /* right side icons */
+i.icon.search,
 i.icon.up,
 i.icon.down,
 i.icon.right {

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

@@ -109,10 +109,11 @@
   position: absolute;
   top: 1px;
   left: 1px;
+  margin: 0em;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   background-color: #E8E8E8;
   width: 2.5em;
-  height: 2.47em;
+  height: 2.5em;
   padding-top: 0.75em;
   text-align: center;
   -webkit-border-radius: 0.2em 0em 0em 0.2em;
@@ -156,9 +157,10 @@
   position: absolute;
   top: 0em;
   left: 100%;
+  opacity: 0.8;
   margin: 0em 0em 0em -1px;
-  min-height: 3.1em;
-  padding: 0.92em !important;
+  line-height: 1.26;
+  padding: 0.92em 1.3em !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;
@@ -172,6 +174,7 @@
   border-bottom-right-radius: 0px;
 }
 .ui.action.input input:focus ~ .button {
+  opacity: 1;
   -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/icons.less

@@ -254,6 +254,7 @@ i.icon.left {
 }
 
 /* right side icons */
+i.icon.search,
 i.icon.up,
 i.icon.down,
 i.icon.right {

src/elements/input.less

@@ -158,11 +158,12 @@
   top: 1px;
   left: 1px;
 
+  margin: 0em;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   
   background-color: #E8E8E8;
   width: 2.5em;
-  height: 2.47em;
+  height: 2.5em;
   padding-top: 0.75em;
 
   text-align: center;
@@ -219,11 +220,12 @@
   position: absolute;
   top: 0em;
   left: 100%;
+  opacity: 0.8;
 
   margin: 0em 0em 0em -1px;
 
-  min-height: 3.1em;
-  padding: 0.92em !important;
+  line-height: 1.26;
+  padding: 0.92em 1.3em !important;
 
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -241,6 +243,7 @@
   border-bottom-right-radius: 0px;
 }
 .ui.action.input input:focus ~ .button {
+  opacity: 1;
   -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;