From 8daaf34e2b39b223157b2cca736e0d6ff2159c04 Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Wed, 29 May 2013 19:47:45 -0400 Subject: [PATCH] fixing issues with form/input Former-commit-id: b31a422eea701f918865dac6c04aa1507b6c5be9 Former-commit-id: da659be9ee819d2bb4d84785b3f3cd2acd4b971a --- build/minified/collections/form.min.css | 2 +- build/minified/elements/input.min.css | 2 +- .../packaged/semantic.min.css.REMOVED.git-id | 2 +- build/uncompressed/collections/form.css | 16 ++++++++++----- build/uncompressed/elements/input.css | 15 ++++++++++++-- node/src/documents/collections/form.html | 8 +++----- .../components/semantic/collections/form.css | 16 ++++++++++----- .../components/semantic/elements/input.css | 15 ++++++++++++-- src/collections/form.less | 18 ++++++++++++----- src/elements/input.less | 20 ++++++++++++++++--- 10 files changed, 84 insertions(+), 30 deletions(-) diff --git a/build/minified/collections/form.min.css b/build/minified/collections/form.min.css index 38d2b4861..6f4d6cba4 100644 --- a/build/minified/collections/form.min.css +++ b/build/minified/collections/form.min.css @@ -1 +1 @@ -.ui.form{position:relative;max-width:100%}.ui.form :first-child{margin-top:0}.ui.form>p{margin:1em 0}.ui.form .field{clear:both;margin:0 0 1em}.ui.form .field>label{margin:0 0 .3em;display:block;color:#555;font-size:.875em;line-height:1.2}.ui.form textarea,.ui.form input[type=text],.ui.form input[type=date],.ui.form input[type=password]{width:100%;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-box-shadow:0 rgba(0,0,0,.3) inset;-moz-box-shadow:0 rgba(0,0,0,.3) inset;box-shadow:0 rgba(0,0,0,.3) inset;-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.textarea,.ui.form textarea{line-height:1.33;min-height:8em;height:12em;max-height:24em;resize:vertical}.ui.form select{-webkit-tap-highlight-color:rgba(255,255,255,0)}.ui.form textarea,.ui.form input[type=checkbox]{vertical-align:top}.ui.form .divider{clear:both;margin:1em 0}.ui.form .info.message,.ui.form .warning.message,.ui.form .error.message{display:none}.ui.form .message:first-child{margin-top:0}.ui.form .field .prompt.label{white-space:nowrap}.ui.form .inline.field .prompt{margin-top:0;margin-left:1em}.ui.form .inline.field .prompt:before{margin-top:-.3em;bottom:auto;right:auto;top:50%;left:0}.ui.form input:focus,.ui.form textarea:focus{color:rgba(0,0,0,.85);border-color:rgba(0,0,0,.5);border-bottom-left-radius:0;border-top-left-radius:0;-webkit-box-shadow:.3em 0 0 0 rgba(0,0,0,.5) inset;-moz-box-shadow:.3em 0 0 0 rgba(0,0,0,.5) inset;box-shadow:.3em 0 0 0 rgba(0,0,0,.5) inset}.ui.form.warning .warning.message{display:block}.ui.form.error .error.message{display:block}.ui.form .fields.error .field label,.ui.form .field.error label{color:#EF4D6D}.ui.form .fields.error .field textarea,.ui.form .fields.error .field input[type=text],.ui.form .fields.error .field input[type=date],.ui.form .fields.error .field input[type=password],.ui.form .field.error textarea,.ui.form .field.error input[type=text],.ui.form .field.error input[type=date],.ui.form .field.error input[type=password]{background-color:#FFFAFA;border-color:#E7BEBE;border-left:0;color:#EF4D6D;padding-left:1.2em;border-bottom-left-radius:0;border-top-left-radius:0;-webkit-box-shadow:.3em 0 0 0 #EF4D6D inset;-moz-box-shadow:.3em 0 0 0 #EF4D6D inset;box-shadow:.3em 0 0 0 #EF4D6D inset}.ui.form .field.error textarea:focus,.ui.form .field.error input:focus{border-color:#ff5050;color:#ff5050;-webkit-box-shadow:.3em 0 0 0 #FF5050 inset;-moz-box-shadow:.3em 0 0 0 #FF5050 inset;box-shadow:.3em 0 0 0 #FF5050 inset}.ui.form ::-webkit-input-placeholder{color:#E0E0E0}.ui.form ::-moz-placeholder{color:#E0E0E0}.ui.form :focus::-webkit-input-placeholder{color:#AAA}.ui.form :focus::-moz-placeholder{color:#AAA}.ui.form .error ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.form .error ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.form .error :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.form .error :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.form .field :disabled,.ui.form .field.disabled{opacity:.5}.ui.form .field.disabled label{opacity:.5}.ui.form .field.disabled :disabled{opacity:1}.ui.form.loading{position:relative}.ui.form.loading:after{position:absolute;top:0;left:0;content:'';width:100%;height:100%;background:rgba(255,255,255,.8) url(../images/throbber-large.gif) no-repeat 50% 50%;visibility:visible}.ui.form.fluid{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.form input.attached{width:auto}.ui.form .date.field>label{position:relative}.ui.form .date.field>label:after{position:absolute;top:1.4em;right:.5em;font-family:Icons;content:'📅';font-size:1.5em;font-weight:400;color:#CCC}.ui.inverted.form label{color:#FFF}.ui.inverted.form .field.error textarea,.ui.inverted.form .field.error input[type=text]{background-color:#FCC}.ui.form .fields{clear:both}.ui.form .fields:after{content:' ';display:block;clear:both;visibility:hidden;line-height:0;height:0}.ui.form .fields .field{clear:none;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.form .fields .field:first-child{border-left:0;box-shadow:none}.ui.form .two.fields .field{width:50%;padding-left:1%;padding-right:1%}.ui.form .three.fields .field{width:33.333%;padding-left:1%;padding-right:1%}.ui.form .four.fields .field{width:25%;padding-left:1%;padding-right:1%}.ui.form .five.fields .field{width:20%;padding-left:1%;padding-right:1%}.ui.form .fields .field:first-child{padding-left:0}.ui.form .fields .field:last-child{padding-right:0}.ui.form .inline.fields .field{margin-right:1.5em}.ui.form .inline.fields .field>label,.ui.form .inline.fields .field>p,.ui.form .inline.fields .field>input,.ui.form .inline.fields .field>select,.ui.form .inline.field>label,.ui.form .inline.field>p,.ui.form .inline.field>input,.ui.form .inline.field>select{display:inline-block;width:auto;margin-top:0;margin-bottom:0;vertical-align:middle;font-size:1em}.ui.form .inline.fields .field>input,.ui.form .inline.field>input{font-size:.875em}.ui.form .inline.fields .field>:first-child,.ui.form .inline.field>:first-child{margin:0 .5em 0 0}.ui.small.form{font-size:.875em}.ui.small.form textarea,.ui.small.form input[type=text],.ui.small.form input[type=password],.ui.small.form label{font-size:1em}.ui.large.form{font-size:1.125em} \ No newline at end of file +.ui.form{position:relative;max-width:100%}.ui.form :first-child{margin-top:0}.ui.form>p{margin:1em 0}.ui.form .field{clear:both;margin:0 0 1em}.ui.form .field>label{margin:0 0 .3em;display:block;color:#555;font-size:.875em;line-height:1.2}.ui.form textarea,.ui.form input[type=text],.ui.form input[type=date],.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:.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-box-shadow:0 rgba(0,0,0,.3) inset;-moz-box-shadow:0 rgba(0,0,0,.3) inset;box-shadow:0 rgba(0,0,0,.3) inset;-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.textarea,.ui.form textarea{line-height:1.33;min-height:8em;height:12em;max-height:24em;resize:vertical}.ui.form select{-webkit-tap-highlight-color:rgba(255,255,255,0)}.ui.form textarea,.ui.form input[type=checkbox]{vertical-align:top}.ui.form .divider{clear:both;margin:1em 0}.ui.form .info.message,.ui.form .warning.message,.ui.form .error.message{display:none}.ui.form .message:first-child{margin-top:0}.ui.form .field .prompt.label{white-space:nowrap}.ui.form .inline.field .prompt{margin-top:0;margin-left:1em}.ui.form .inline.field .prompt:before{margin-top:-.3em;bottom:auto;right:auto;top:50%;left:0}.ui.form input:focus,.ui.form textarea:focus{color:rgba(0,0,0,.85);border-color:rgba(0,0,0,.2);border-bottom-left-radius:0;border-top-left-radius:0;-webkit-box-shadow:.3em 0 0 0 rgba(0,0,0,.2) inset;-moz-box-shadow:.3em 0 0 0 rgba(0,0,0,.2) inset;box-shadow:.3em 0 0 0 rgba(0,0,0,.2) inset}.ui.form.warning .warning.message{display:block}.ui.form.error .error.message{display:block}.ui.form .fields.error .field label,.ui.form .field.error label{color:#EF4D6D}.ui.form .fields.error .field textarea,.ui.form .fields.error .field input[type=text],.ui.form .fields.error .field input[type=date],.ui.form .fields.error .field input[type=password],.ui.form .field.error textarea,.ui.form .field.error input[type=text],.ui.form .field.error input[type=date],.ui.form .field.error input[type=password]{background-color:#FFFAFA;border-color:#E7BEBE;border-left:0;color:#EF4D6D;padding-left:1.2em;border-bottom-left-radius:0;border-top-left-radius:0;-webkit-box-shadow:.3em 0 0 0 #EF4D6D inset;-moz-box-shadow:.3em 0 0 0 #EF4D6D inset;box-shadow:.3em 0 0 0 #EF4D6D inset}.ui.form .field.error textarea:focus,.ui.form .field.error input:focus{border-color:#ff5050;color:#ff5050;-webkit-box-shadow:.3em 0 0 0 #FF5050 inset;-moz-box-shadow:.3em 0 0 0 #FF5050 inset;box-shadow:.3em 0 0 0 #FF5050 inset}.ui.form ::-webkit-input-placeholder{color:#E0E0E0}.ui.form ::-moz-placeholder{color:#E0E0E0}.ui.form :focus::-webkit-input-placeholder{color:#AAA}.ui.form :focus::-moz-placeholder{color:#AAA}.ui.form .error ::-webkit-input-placeholder{color:rgba(255,80,80,.4)}.ui.form .error ::-moz-placeholder{color:rgba(255,80,80,.4)}.ui.form .error :focus::-webkit-input-placeholder{color:rgba(255,80,80,.7)}.ui.form .error :focus::-moz-placeholder{color:rgba(255,80,80,.7)}.ui.form .field :disabled,.ui.form .field.disabled{opacity:.5}.ui.form .field.disabled label{opacity:.5}.ui.form .field.disabled :disabled{opacity:1}.ui.form.loading{position:relative}.ui.form.loading:after{position:absolute;top:0;left:0;content:'';width:100%;height:100%;background:rgba(255,255,255,.8) url(../images/throbber-large.gif) no-repeat 50% 50%;visibility:visible}.ui.form.fluid{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.form input.attached{width:auto}.ui.form .date.field>label{position:relative}.ui.form .date.field>label:after{position:absolute;top:1.4em;right:.5em;font-family:Icons;content:'📅';font-size:1.5em;font-weight:400;color:#CCC}.ui.inverted.form label{color:#FFF}.ui.inverted.form .field.error textarea,.ui.inverted.form .field.error input[type=text]{background-color:#FCC}.ui.form .fields{clear:both}.ui.form .fields:after{content:' ';display:block;clear:both;visibility:hidden;line-height:0;height:0}.ui.form .fields .field{clear:none;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ui.form .fields .field:first-child{border-left:0;box-shadow:none}.ui.form .two.fields .field{width:50%;padding-left:1%;padding-right:1%}.ui.form .three.fields .field{width:33.333%;padding-left:1%;padding-right:1%}.ui.form .four.fields .field{width:25%;padding-left:1%;padding-right:1%}.ui.form .five.fields .field{width:20%;padding-left:1%;padding-right:1%}.ui.form .fields .field:first-child{padding-left:0}.ui.form .fields .field:last-child{padding-right:0}.ui.form .inline.fields .field{margin-right:1.5em}.ui.form .inline.fields .field>label,.ui.form .inline.fields .field>p,.ui.form .inline.fields .field>input,.ui.form .inline.fields .field>select,.ui.form .inline.field>label,.ui.form .inline.field>p,.ui.form .inline.field>input,.ui.form .inline.field>select{display:inline-block;width:auto;margin-top:0;margin-bottom:0;vertical-align:middle;font-size:1em}.ui.form .inline.fields .field>input,.ui.form .inline.field>input{font-size:.875em}.ui.form .inline.fields .field>:first-child,.ui.form .inline.field>:first-child{margin:0 .5em 0 0}.ui.small.form{font-size:.875em}.ui.small.form textarea,.ui.small.form input[type=text],.ui.small.form input[type=password],.ui.small.form label{font-size:1em}.ui.large.form{font-size:1.125em} \ No newline at end of file diff --git a/build/minified/elements/input.min.css b/build/minified/elements/input.min.css index 9e5813257..603eadbfa 100644 --- a/build/minified/elements/input.min.css +++ b/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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/build/packaged/semantic.min.css.REMOVED.git-id b/build/packaged/semantic.min.css.REMOVED.git-id index b949d274d..414cfd63e 100644 --- a/build/packaged/semantic.min.css.REMOVED.git-id +++ b/build/packaged/semantic.min.css.REMOVED.git-id @@ -1 +1 @@ -a079bea61e4acfb6793945add9c5e58c381f6133 \ No newline at end of file +6f7b206fc7c86622d8acabca5d86ec409ca5b290 \ No newline at end of file diff --git a/build/uncompressed/collections/form.css b/build/uncompressed/collections/form.css index c245de8b9..92503d746 100644 --- a/build/uncompressed/collections/form.css +++ b/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 diff --git a/build/uncompressed/elements/input.css b/build/uncompressed/elements/input.css index a2ee3ca37..d22fdac9f 100644 --- a/build/uncompressed/elements/input.css +++ b/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 diff --git a/node/src/documents/collections/form.html b/node/src/documents/collections/form.html index c492f6091..6ef92fbf1 100755 --- a/node/src/documents/collections/form.html +++ b/node/src/documents/collections/form.html @@ -14,12 +14,10 @@ type : 'UI Collection'

Form input can be validated using the form validation behavior

Forms always include fields, and fields always contain form elements. Fields themselves may also include: - standard form fields, like labels, inputs and textareas, as well as: - checkboxes, - sliders, and - message blocks. + ui inputs, standard form fields, ui labels, textareas, as well as: + checkboxes, and message blocks.

-

Validation messages are text blocks which are formatted for use inside forms.

+

Validation messages use messages which are formatted for use inside forms.

diff --git a/node/src/files/components/semantic/collections/form.css b/node/src/files/components/semantic/collections/form.css index c245de8b9..92503d746 100644 --- a/node/src/files/components/semantic/collections/form.css +++ b/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 diff --git a/node/src/files/components/semantic/elements/input.css b/node/src/files/components/semantic/elements/input.css index a2ee3ca37..d22fdac9f 100644 --- a/node/src/files/components/semantic/elements/input.css +++ b/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 diff --git a/src/collections/form.less b/src/collections/form.less index e6cbb97dd..2cc1c6d39 100755 --- a/src/collections/form.less +++ b/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; } /*-------------------- diff --git a/src/elements/input.less b/src/elements/input.less index 15017188f..bafaa73c8 100755 --- a/src/elements/input.less +++ b/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; }