You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
426 lines
9.8 KiB
426 lines
9.8 KiB
/* ==========================================================================
|
|
Copyright (c) 2013, 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 * {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
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 all floats */
|
|
|
|
.uni-form:after,
|
|
.uni-form .button-holder:after,
|
|
.uni-form .ctrl-holder:after,
|
|
.uni-form-row: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 .ctrl,
|
|
.uni-form .input-text,
|
|
.uni-form .input-file,
|
|
.uni-form .input-select,
|
|
.uni-form .input-textarea {
|
|
float: left;
|
|
width: 65%; /* 2% for spacing */
|
|
margin: 0;
|
|
}
|
|
|
|
.uni-form .ctrl {
|
|
padding-right: 3%;
|
|
}
|
|
|
|
/* 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 + .input-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 .multi {
|
|
float: left;
|
|
width: 67%;
|
|
margin: 0;
|
|
padding: 0 3% 0 0;
|
|
}
|
|
|
|
.uni-form .multi + .form-hint {
|
|
margin-top: .5em;
|
|
}
|
|
|
|
.uni-form .multi > li {
|
|
margin: .5em 0;
|
|
list-style: none;
|
|
}
|
|
|
|
/* Alternate layout for grouped controls (stacked inline) */
|
|
|
|
.uni-form .multi-inline > li {
|
|
float: left;
|
|
margin: .5em 0 0 0;
|
|
}
|
|
|
|
.uni-form .columns-2 > li {
|
|
width: 50%;
|
|
}
|
|
|
|
.uni-form .columns-2 > li + li {
|
|
padding-left: 2%;
|
|
}
|
|
|
|
.uni-form .columns-3 > li {
|
|
width: 33.3%;
|
|
}
|
|
|
|
.uni-form .columns-3 > li + li,
|
|
.uni-form .columns-3 > li + li + li {
|
|
padding-left: 2%;
|
|
}
|
|
|
|
.uni-form .multi .input-text,
|
|
.uni-form .multi .input-select,
|
|
.uni-form .multi select {
|
|
display: inline-block;
|
|
float: none;
|
|
width: 100%;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
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 .ctrl,
|
|
.uni-form .inline-labels .input-text,
|
|
.uni-form .inline-labels .input-file,
|
|
.uni-form .inline-labels .input-select,
|
|
.uni-form .inline-labels .input-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 .multi {
|
|
float: left;
|
|
width: 67%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.uni-form .inline-labels .multi > li {
|
|
margin: 0;
|
|
}
|
|
|
|
.uni-form .inline-labels .multi > li + li {
|
|
margin-top: .5em;
|
|
}
|
|
|
|
.uni-form .inline-labels .multi label {
|
|
float: none;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.uni-form .inline-labels .multi .input-text,
|
|
.uni-form .inline-labels .multi .input-select,
|
|
.uni-form .inline-labels .multi .input-file,
|
|
.uni-form .inline-labels .multi .input-textarea {
|
|
float: none;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Alternate layout for grouped controls (stacked inline) */
|
|
|
|
.uni-form .inline-labels .multi-inline > li + li {
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Additional stuff
|
|
========================================================================== */
|
|
|
|
/* When you don't want to use a label for grouped fields */
|
|
|
|
.uni-form .inline-labels .no-label .multi {
|
|
margin-left: 33%;
|
|
}
|
|
|
|
/* Classes for control of the widths of the fields */
|
|
|
|
.uni-form .small {
|
|
width: 30% !important
|
|
}
|
|
|
|
.uni-form .medium {
|
|
width: 45% !important
|
|
}
|
|
|
|
.uni-form .large {
|
|
float: none;
|
|
display: block;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.uni-form .large + .form-hint,
|
|
.uni-form .inline-labels .large + .form-hint {
|
|
float: none;
|
|
width: auto;
|
|
margin-left: 0;
|
|
padding-top: .3em;
|
|
}
|
|
|
|
.uni-form .auto {
|
|
width: auto !important;
|
|
height: auto !important;
|
|
display: inline-block !important;
|
|
float: none !important;
|
|
}
|
|
|
|
/* Make spacing in between two inputs */
|
|
|
|
.uni-form .small + input,
|
|
.uni-form .medium + input,
|
|
.uni-form .auto + input,
|
|
.uni-form .small + select,
|
|
.uni-form .medium + select,
|
|
.uni-form .auto + select {
|
|
margin-right: 4px !important;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
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;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Columns
|
|
========================================================================== */
|
|
|
|
.uni-form-row {}
|
|
|
|
.uni-form-row > .ctrl-holder {
|
|
float: left;
|
|
}
|
|
|
|
.columns-2 > .ctrl-holder {
|
|
width: 50%;
|
|
}
|
|
|
|
.columns-3 > .ctrl-holder {
|
|
width: 33.3%;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
480 breakpoint
|
|
========================================================================== */
|
|
|
|
@media screen and (max-width: 480px) {
|
|
|
|
/* Default layout selectors */
|
|
.uni-form .ctrl-holder > label,
|
|
.uni-form .ctrl-holder > .label,
|
|
.uni-form .input-text,
|
|
.uni-form .input-select,
|
|
.uni-form .input-textarea,
|
|
.uni-form .input-file,
|
|
.uni-form .ctrl,
|
|
.uni-form .multi,
|
|
.uni-form .multi-inline > li,
|
|
.uni-form .form-hint,
|
|
/* Alternate layout selectors */
|
|
.uni-form .inline-labels .ctrl-holder > label,
|
|
.uni-form .inline-labels .ctrl-holder > .label,
|
|
.uni-form .inline-labels .input-text,
|
|
.uni-form .inline-labels .input-select,
|
|
.uni-form .inline-labels .input-textarea,
|
|
.uni-form .inline-labels .input-file,
|
|
.uni-form .inline-labels .ctrl,
|
|
.uni-form .multi,
|
|
.uni-form .inline-labels .multi-inline > li,
|
|
.uni-form .inline-labels .form-hint,
|
|
.uni-form .inline-labels .no-label .multi {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.uni-form .inline-labels label + .input-text,
|
|
.uni-form .inline-labels label + .input-file,
|
|
.uni-form .inline-labels label + .input-select,
|
|
.uni-form .inline-labels label + .input-textarea {
|
|
margin-top: .5em;
|
|
}
|
|
|
|
.uni-form .inline-labels .ctrl-holder > label,
|
|
.uni-form .inline-labels .ctrl-holder > .label,
|
|
.uni-form .multi,
|
|
.uni-form .multi-inline > li,
|
|
.uni-form .columns-2 > li + li,
|
|
.uni-form .columns-3 > li + li,
|
|
.uni-form .columns-3 > li + li + li {
|
|
padding: 0;
|
|
}
|
|
|
|
.uni-form .form-hint,
|
|
.uni-form .inline-labels .form-hint,
|
|
.uni-form .inline-labels .no-label .multi{
|
|
margin-left: 0;
|
|
}
|
|
|
|
}
|