fixing issues with form/input

Former-commit-id: b31a422eea701f918865dac6c04aa1507b6c5be9
Former-commit-id: da659be9ee819d2bb4d84785b3f3cd2acd4b971a

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;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}
+.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!important;border-right:1px solid rgba(0,0,0,.3)}.ui.icon.input input.error,.ui.icon.input input.focus,.ui.icon.input input:focus{border-left-width:1px;-webkit-border-radius:.3125em!important;-moz-border-radius:.3125em!important;border-radius:.3125em!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;box-shadow:none!important}.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!important}.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 @@
-a079bea61e4acfb6793945add9c5e58c381f6133
+6f7b206fc7c86622d8acabca5d86ec409ca5b290

build/uncompressed/collections/form.css

@@ -51,8 +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.form .ui.input {
   width: 100%;
+}
+.ui.form textarea,
+.ui.form input[type="text"],
+.ui.form input[type="date"],
+.ui.form input[type="password"] {
   padding: 0.9em 1.2em;
   font-size: 0.825em;
   background-color: #FFFFFF;
@@ -136,12 +142,12 @@
 .ui.form input:focus,
 .ui.form textarea:focus {
   color: rgba(0, 0, 0, 0.85);
-  border-color: rgba(0, 0, 0, 0.5);
+  border-color: rgba(0, 0, 0, 0.2);
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
-  -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
-  box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
+  -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
 }
 /*--------------------
         Error

build/uncompressed/elements/input.css

@@ -130,10 +130,21 @@
   transition: opacity 0.3s ease-out;
 }
 .ui.icon.input input {
-  padding-left: 4em;
+  padding-left: 4em !important;
   border-right: 1px solid rgba(0, 0, 0, 0.3);
 }
 /* Focus */
+.ui.icon.input input.error,
+.ui.icon.input input.focus,
+.ui.icon.input input:focus {
+  border-left-width: 1px;
+  -webkit-border-radius: 0.3125em !important;
+  -moz-border-radius: 0.3125em !important;
+  border-radius: 0.3125em !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
 .ui.icon.input input:focus ~ .icon {
   opacity: 1;
 }
@@ -148,7 +159,7 @@
   border-top-right-radius: 0.3125em;
 }
 .ui.labeled.input input {
-  padding-right: 2.5em;
+  padding-right: 2.5em !important;
 }
 /*--------------------
         Action

node/src/documents/collections/form.html

@@ -14,12 +14,10 @@ type   : 'UI Collection'
     <p>Form input can be validated using the <a href="/modules/form.html">form validation behavior</a></p>
     <p> 
       Forms always include fields, and fields always contain form elements. Fields themselves may also include:
-        <a href="#">standard form fields</a>, like labels, inputs and textareas, as well as:
-        <a href="/modules/checkbox.html">checkboxes</a>, 
-        <a href="#">sliders</a>, and
-        <a href="/elements/message.html">message blocks</a>.
+        <a href="/elements/input.html">ui inputs</a>, standard form fields, <a href="/elements/labels.html">ui labels</a>, textareas, as well as:
+        <a href="/modules/checkbox.html">checkboxes</a>, and <a href="/elements/message.html">message blocks</a>.
     </p>
-    <p>Validation messages are <a href="#">text blocks</a> which are formatted for use inside forms.</p>
+    <p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
   </div>
 </div>
 <div class="main container">

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

@@ -51,8 +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.form .ui.input {
   width: 100%;
+}
+.ui.form textarea,
+.ui.form input[type="text"],
+.ui.form input[type="date"],
+.ui.form input[type="password"] {
   padding: 0.9em 1.2em;
   font-size: 0.825em;
   background-color: #FFFFFF;
@@ -136,12 +142,12 @@
 .ui.form input:focus,
 .ui.form textarea:focus {
   color: rgba(0, 0, 0, 0.85);
-  border-color: rgba(0, 0, 0, 0.5);
+  border-color: rgba(0, 0, 0, 0.2);
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
-  -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
-  -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
-  box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
+  -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
 }
 /*--------------------
         Error

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

@@ -130,10 +130,21 @@
   transition: opacity 0.3s ease-out;
 }
 .ui.icon.input input {
-  padding-left: 4em;
+  padding-left: 4em !important;
   border-right: 1px solid rgba(0, 0, 0, 0.3);
 }
 /* Focus */
+.ui.icon.input input.error,
+.ui.icon.input input.focus,
+.ui.icon.input input:focus {
+  border-left-width: 1px;
+  -webkit-border-radius: 0.3125em !important;
+  -moz-border-radius: 0.3125em !important;
+  border-radius: 0.3125em !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
 .ui.icon.input input:focus ~ .icon {
   opacity: 1;
 }
@@ -148,7 +159,7 @@
   border-top-right-radius: 0.3125em;
 }
 .ui.labeled.input input {
-  padding-right: 2.5em;
+  padding-right: 2.5em !important;
 }
 /*--------------------
         Action

src/collections/form.less

@@ -61,11 +61,19 @@
     Standard Inputs
 ---------------------*/
 
+
 .ui.form textarea,
 .ui.form input[type="text"],
 .ui.form input[type="date"],
-.ui.form input[type="password"] {
+.ui.form input[type="password"],
+.ui.form .ui.input {
   width: 100%;
+}
+
+.ui.form textarea,
+.ui.form input[type="text"],
+.ui.form input[type="date"],
+.ui.form input[type="password"] {
   padding: 0.9em 1.2em;
   font-size: 0.825em;
 
@@ -191,13 +199,13 @@
 .ui.form input:focus,
 .ui.form textarea:focus {
   color: rgba(0, 0, 0, 0.85);
-  border-color: rgba(0, 0, 0, 0.5);
+  border-color: rgba(0, 0, 0, 0.2);
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   
-  -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
-  -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
-  box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.5) inset;
+  -webkit-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
+  -moz-box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0.3em 0em 0em 0em rgba(0, 0, 0, 0.2) inset;
 }
 
 /*--------------------

src/elements/input.less

@@ -182,14 +182,28 @@
   -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;
+  padding-left: 4em !important;
   border-right: 1px solid rgba(0, 0, 0, 0.3);
 }
 
 /* Focus */
+
+
+.ui.icon.input input.error,
+.ui.icon.input input.focus,
+.ui.icon.input input:focus {
+  border-left-width: 1px;
+  -webkit-border-radius: 0.3125em !important;
+  -moz-border-radius: 0.3125em !important;
+  border-radius: 0.3125em !important;
+
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
 .ui.icon.input input:focus ~ .icon {
   opacity: 1;
 }
@@ -207,7 +221,7 @@
   border-top-right-radius: 0.3125em;
 }
 .ui.labeled.input input {
-  padding-right: 2.5em;
+  padding-right: 2.5em !important;
 }