diff --git a/css/uni-form.css b/css/uni-form.css index 09ed82f..44cd5f1 100755 --- a/css/uni-form.css +++ b/css/uni-form.css @@ -1,345 +1,345 @@ -/* ========================================================================== - Copyright (c) 2010, Dragan Babic - Permission is hereby granted, free of charge, to any person - obtaining a copy of this software and associated documentation - files (the "Software"), to deal in the Software without - restriction, including without limitation the rights to use, - copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the - Software is furnished to do so, subject to the following - conditions: - The above copyright notice and this permission notice shall be - included in all copies or substantial portions of the Software. - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - OTHER DEALINGS IN THE SOFTWARE. - -------------------------------------------------------------------------- - Generals - ========================================================================== */ - -.uni-form { - margin: 0; - padding: 0; -} - -.uni-form * { - box-sizing: border-box; -} - -/* Reset stuff and prevent inheritance */ - -.uni-form fieldset { - border: none; - margin: 0; - padding: 0; -} - -/* This are the main units that contain form elements */ - -.uni-form .ctrl-holder, -.uni-form .button-holder { - clear: both; -} - -/* Clear all floats */ - - .uni-form:after, - .uni-form .button-holder:after, - .uni-form .ctrl-holder:after { - content: "."; - display: block; - height: 0; - line-height: 0; - font-size: 0; - clear: both; - min-height: 0; - visibility: hidden; - } - -.uni-form label, -.uni-form button { - cursor: pointer; -} - -/* ========================================================================== - Default layout - -------------------------------------------------------------------------- - Styles for form controls where labels are above the input elements - ========================================================================== */ - -/* Target only the "main" labels */ - -.uni-form .ctrl-holder > label, -.uni-form .ctrl-holder > .label { - display: block; - margin: 0; - padding: 0; -} - -/* Required fields asterisk styling */ - -.uni-form label em, -.uni-form .label em { - float: left; - width: .75em; - margin: 0 0 0 -.75em; - font-style: inherit; - font-weight: inherit; -} - -/* Float the input elements */ - -.uni-form .input-text, -.uni-form .input-file, -.uni-form .input-select, -.uni-form select, -.uni-form textarea { - float: left; - width: 67%; - margin: 0; -} - -/* Make some spacing between the label and the input/list */ - -.uni-form label + .input-text, -.uni-form label + .input-file, -.uni-form label + .input-select, -.uni-form label + select, -.uni-form label + textarea { - margin-top: .5em; -} - -/* Postition the hints */ - -.uni-form .form-hint { - float: right; - width: 33%; - margin: 0; -} - -/* Grouped controls (one below the other by default) */ - -.uni-form .ctrl-holder > ul { - float: left; - width: 67%; - margin: 0; - padding: 0 3% 0 0; -} - -.uni-form .ctrl-holder > ul + .form-hint { - margin-top: .5em; -} - - .uni-form .ctrl-holder > ul li { - margin: .5em 0; - list-style: none; - } - -/* Alternate layout for grouped controls (stacked inline) */ - -.uni-form ul.alternate li { - display: inline-block; - margin: .5em 0 0 0; -} - -.uni-form ul.columns-2 li { - width: 49%; -} - -.uni-form ul.columns-3 li { - width: 32%; -} - -.uni-form ul .input-text, -.uni-form ul .input-select, -.uni-form ul select, -.uni-form ul.alternate .input-text, -.uni-form ul.alternate .input-select, -.uni-form ul.alternate select { - display: inline-block; - float: none; - width: 98%; -} - -/* ========================================================================== - Alternate layout - -------------------------------------------------------------------------- - Styles for form controls where labels are in line with the input elements - -------------------------------------------------------------------------- - Set the class of the parent (preferably to a fieldset) to .inline-labels - ========================================================================== */ - -.uni-form .inline-labels .ctrl-holder > label, -.uni-form .inline-labels .ctrl-holder > .label { - float: left; - position: relative; - width: 33%; - padding-right: 3%; -} - -/* Float the input elements */ - -.uni-form .inline-labels .input-text, -.uni-form .inline-labels .input-file, -.uni-form .inline-labels .input-select, -.uni-form .inline-labels select, -.uni-form .inline-labels textarea { - float: left; - width: 67%; - margin: 0; -} - -/* Postition the hints */ - -.uni-form .inline-labels .form-hint { - clear: both; - float: none; - width: auto; - margin-left: 33%; - padding-top: .5em; /* Must use padding because of the clearing */ -} - -/* Grouped controls (one below the other by default) */ - -.uni-form .inline-labels .ctrl-holder > ul { - float: left; - width: 67%; - margin: 0; - padding: 0; -} - - .uni-form .inline-labels .ctrl-holder > ul li { - margin: 0; - } - - .uni-form .inline-labels .ctrl-holder > ul li + li { - margin-top: .5em; - } - - .uni-form .inline-labels .ctrl-holder > ul label { - float: none; - display: block; - width: 100%; - } - - .uni-form .inline-labels .ctrl-holder > ul .input-text, - .uni-form .inline-labels .ctrl-holder > ul .input-select, - .uni-form .inline-labels .ctrl-holder > ul .input-file, - .uni-form .inline-labels .ctrl-holder > ul select, - .uni-form .inline-labels .ctrl-holder > ul textarea { - float: none; - display: block; - width: 100%; - } - -/* Alternate layout for grouped controls (stacked inline) */ - -.uni-form .inline-labels .ctrl-holder > ul.alternate li { - margin-top: 0; -} - - .uni-form .inline-labels .ctrl-holder > ul.alternate .input-text, - .uni-form .inline-labels .ctrl-holder > ul.alternate .input-select, - .uni-form .inline-labels .ctrl-holder > ul.alternate .input-file, - .uni-form .inline-labels .ctrl-holder > ul.alternate select, - .uni-form .inline-labels .ctrl-holder > ul.alternate textarea { - width: 98%; - } - -/* ========================================================================== - Additional stuff - ========================================================================== */ - -/* When you don't want to use a label for grouped fields */ - -.uni-form .inline-labels .no-label ul { - margin-left: 33%; -} - -/*.uni-form label input { - float: none; - display: inline; - margin: 0; - padding: 0; - border: none; -}*/ - -/*.uni-form .button-holder label { - float: left; - margin: .5em 0 0 0; - width: auto; - max-width: 60%; - text-align: left; -}*/ - -/* Classes for control of the widths of the fields */ - -.uni-form .small { - width: 30% !important -} - -.uni-form .medium { - width: 45% !important -} - -.uni-form .large {} /* Large is default and should match the value you set for .input-text, textarea or select */ - -.uni-form .auto { - width: auto !important; - height: auto !important; -} - -.uni-form .small, -.uni-form .medium, -.uni-form .auto { - margin-right: 4px -} - -/* ========================================================================== - Read-Only output - ========================================================================== */ - -/* Default layout */ - -.uni-form .read-only-label { - display: block; - margin: 0; - font-size: 1em; - font-weight: bold; -} - -.uni-form .read-only { - margin: .5em 0 0 0; -} - - .uni-form .read-only .choice-label { - color: #777; - text-transform: uppercase; - font-size: .8em; - letter-spacing: .15em; - } - -/* Alternate layout */ - -.uni-form .inline-labels .read-only-label { - float: left; - position: relative; - width: 33%; - margin: 0; - padding-right: 3%; -} - -.uni-form .inline-labels .read-only { - float: right; - width: 67%; - margin: 0; -} - -.uni-form .inline-labels .read-only + .read-only { - margin-top: .5em; -} +/* ========================================================================== + Copyright (c) 2010, Dragan Babic + Permission is hereby granted, free of charge, to any person + obtaining a copy of this software and associated documentation + files (the "Software"), to deal in the Software without + restriction, including without limitation the rights to use, + copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the + Software is furnished to do so, subject to the following + conditions: + The above copyright notice and this permission notice shall be + included in all copies or substantial portions of the Software. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES + OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND + NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT + HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, + WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR + OTHER DEALINGS IN THE SOFTWARE. + -------------------------------------------------------------------------- + Generals + ========================================================================== */ + +.uni-form { + margin: 0; + padding: 0; +} + +.uni-form * { + box-sizing: border-box; +} + +/* Reset stuff and prevent inheritance */ + +.uni-form fieldset { + border: none; + margin: 0; + padding: 0; +} + +/* This are the main units that contain form elements */ + +.uni-form .ctrl-holder, +.uni-form .button-holder { + clear: both; +} + +/* Clear all floats */ + + .uni-form:after, + .uni-form .button-holder:after, + .uni-form .ctrl-holder:after { + content: "."; + display: block; + height: 0; + line-height: 0; + font-size: 0; + clear: both; + min-height: 0; + visibility: hidden; + } + +.uni-form label, +.uni-form button { + cursor: pointer; +} + +/* ========================================================================== + Default layout + -------------------------------------------------------------------------- + Styles for form controls where labels are above the input elements + ========================================================================== */ + +/* Target only the "main" labels */ + +.uni-form .ctrl-holder > label, +.uni-form .ctrl-holder > .label { + display: block; + margin: 0; + padding: 0; +} + +/* Required fields asterisk styling */ + +.uni-form label em, +.uni-form .label em { + float: left; + width: .75em; + margin: 0 0 0 -.75em; + font-style: inherit; + font-weight: inherit; +} + +/* Float the input elements */ + +.uni-form .input-text, +.uni-form .input-file, +.uni-form .input-select, +.uni-form select, +.uni-form textarea { + float: left; + width: 67%; + margin: 0; +} + +/* Make some spacing between the label and the input/list */ + +.uni-form label + .input-text, +.uni-form label + .input-file, +.uni-form label + .input-select, +.uni-form label + select, +.uni-form label + textarea { + margin-top: .5em; +} + +/* Postition the hints */ + +.uni-form .form-hint { + float: right; + width: 33%; + margin: 0; +} + +/* Grouped controls (one below the other by default) */ + +.uni-form .ctrl-holder > ul { + float: left; + width: 67%; + margin: 0; + padding: 0 3% 0 0; +} + +.uni-form .ctrl-holder > ul + .form-hint { + margin-top: .5em; +} + + .uni-form .ctrl-holder > ul li { + margin: .5em 0; + list-style: none; + } + +/* Alternate layout for grouped controls (stacked inline) */ + +.uni-form ul.alternate li { + display: inline-block; + margin: .5em 0 0 0; +} + +.uni-form ul.columns-2 li { + width: 49%; +} + +.uni-form ul.columns-3 li { + width: 32%; +} + +.uni-form ul .input-text, +.uni-form ul .input-select, +.uni-form ul select, +.uni-form ul.alternate .input-text, +.uni-form ul.alternate .input-select, +.uni-form ul.alternate select { + display: inline-block; + float: none; + width: 98%; +} + +/* ========================================================================== + Alternate layout + -------------------------------------------------------------------------- + Styles for form controls where labels are in line with the input elements + -------------------------------------------------------------------------- + Set the class of the parent (preferably to a fieldset) to .inline-labels + ========================================================================== */ + +.uni-form .inline-labels .ctrl-holder > label, +.uni-form .inline-labels .ctrl-holder > .label { + float: left; + position: relative; + width: 33%; + padding-right: 3%; +} + +/* Float the input elements */ + +.uni-form .inline-labels .input-text, +.uni-form .inline-labels .input-file, +.uni-form .inline-labels .input-select, +.uni-form .inline-labels select, +.uni-form .inline-labels textarea { + float: left; + width: 67%; + margin: 0; +} + +/* Postition the hints */ + +.uni-form .inline-labels .form-hint { + clear: both; + float: none; + width: auto; + margin-left: 33%; + padding-top: .5em; /* Must use padding because of the clearing */ +} + +/* Grouped controls (one below the other by default) */ + +.uni-form .inline-labels .ctrl-holder > ul { + float: left; + width: 67%; + margin: 0; + padding: 0; +} + + .uni-form .inline-labels .ctrl-holder > ul li { + margin: 0; + } + + .uni-form .inline-labels .ctrl-holder > ul li + li { + margin-top: .5em; + } + + .uni-form .inline-labels .ctrl-holder > ul label { + float: none; + display: block; + width: 100%; + } + + .uni-form .inline-labels .ctrl-holder > ul .input-text, + .uni-form .inline-labels .ctrl-holder > ul .input-select, + .uni-form .inline-labels .ctrl-holder > ul .input-file, + .uni-form .inline-labels .ctrl-holder > ul select, + .uni-form .inline-labels .ctrl-holder > ul textarea { + float: none; + display: block; + width: 100%; + } + +/* Alternate layout for grouped controls (stacked inline) */ + +.uni-form .inline-labels .ctrl-holder > ul.alternate li { + margin-top: 0; +} + + .uni-form .inline-labels .ctrl-holder > ul.alternate .input-text, + .uni-form .inline-labels .ctrl-holder > ul.alternate .input-select, + .uni-form .inline-labels .ctrl-holder > ul.alternate .input-file, + .uni-form .inline-labels .ctrl-holder > ul.alternate select, + .uni-form .inline-labels .ctrl-holder > ul.alternate textarea { + width: 98%; + } + +/* ========================================================================== + Additional stuff + ========================================================================== */ + +/* When you don't want to use a label for grouped fields */ + +.uni-form .inline-labels .no-label ul { + margin-left: 33%; +} + +/*.uni-form label input { + float: none; + display: inline; + margin: 0; + padding: 0; + border: none; +}*/ + +/*.uni-form .button-holder label { + float: left; + margin: .5em 0 0 0; + width: auto; + max-width: 60%; + text-align: left; +}*/ + +/* Classes for control of the widths of the fields */ + +.uni-form .small { + width: 30% !important +} + +.uni-form .medium { + width: 45% !important +} + +.uni-form .large {} /* Large is default and should match the value you set for .input-text, textarea or select */ + +.uni-form .auto { + width: auto !important; + height: auto !important; +} + +.uni-form .small, +.uni-form .medium, +.uni-form .auto { + margin-right: 4px +} + +/* ========================================================================== + Read-Only output + ========================================================================== */ + +/* Default layout */ + +.uni-form .read-only-label { + display: block; + margin: 0; + font-size: 1em; + font-weight: bold; +} + +.uni-form .read-only { + margin: .5em 0 0 0; +} + + .uni-form .read-only .choice-label { + color: #777; + text-transform: uppercase; + font-size: .8em; + letter-spacing: .15em; + } + +/* Alternate layout */ + +.uni-form .inline-labels .read-only-label { + float: left; + position: relative; + width: 33%; + margin: 0; + padding-right: 3%; +} + +.uni-form .inline-labels .read-only { + float: right; + width: 67%; + margin: 0; +} + +.uni-form .inline-labels .read-only + .read-only { + margin-top: .5em; +} diff --git a/demos/fauxform.html b/demos/fauxform.html index 08a6840..3b724b4 100755 --- a/demos/fauxform.html +++ b/demos/fauxform.html @@ -1,407 +1,407 @@ - - - -
- - - - - -- This is an example form demonstrating all of the units offered by Uni–Form, along with suggested message handling, form actions and style. -
- -+ This is an example form demonstrating all of the units offered by Uni–Form, along with suggested message handling, form actions and style. +
+ +- This is an example form data output demonstrating the read–only capabilities of Uni–Form -
- -+ This is an example form data output demonstrating the read–only capabilities of Uni–Form +
+ +