Removed uniform.css foo
This commit is contained in:
parent
c812642afc
commit
e127f0a494
|
|
@ -1,320 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
UNI-FORM STYLE by DRAGAN BABIC
|
|
||||||
--------------------------------------------------------------------------
|
|
||||||
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.
|
|
||||||
--------------------------------------------------------------------------
|
|
||||||
NOTE ABOUT STYLING FORMS
|
|
||||||
--------------------------------------------------------------------------
|
|
||||||
When styling your form make sure to copy the selector from uni-form.css
|
|
||||||
into this file and override it with your properties and values.
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.uni-form {
|
|
||||||
margin: 1.5em 0;
|
|
||||||
padding-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Form titles
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.uni-form .uni-form-title {
|
|
||||||
margin: 1.5em 0;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Holders
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.uni-form .ctrl-holder {
|
|
||||||
padding: 1em 1em 1.5em 1em;
|
|
||||||
border: 1px solid #efefef;
|
|
||||||
border-width: 1px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .inline-labels .ctrl-holder {
|
|
||||||
padding: 1.5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form fieldset .ctrl-holder:last-child {
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .ctrl-holder.focused {
|
|
||||||
background: #fffcdf
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .button-holder {
|
|
||||||
background: #efefef;
|
|
||||||
margin-top: 1.5em;
|
|
||||||
padding: 1.5em;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Design for input fields
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.uni-form .input-text,
|
|
||||||
.uni-form .input-textarea {
|
|
||||||
padding: 5px;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 2px;
|
|
||||||
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.15) inset;
|
|
||||||
box-shadow: 1px 1px 3px rgba(0,0,0,.15) inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .input-text:focus,
|
|
||||||
.uni-form .input-textarea:focus {
|
|
||||||
border-color: #343434;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .input-textarea {
|
|
||||||
height: 12em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .input-select {}
|
|
||||||
|
|
||||||
.uni-form .input-file {}
|
|
||||||
|
|
||||||
/* Disabled inputs */
|
|
||||||
|
|
||||||
.uni-form .input-disabled {
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
border-color: #ccc;
|
|
||||||
color: #999;
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Buttons
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.uni-form .action-primary {
|
|
||||||
padding: 1em 2em;
|
|
||||||
line-height: 1;
|
|
||||||
background: #254a86;
|
|
||||||
border: 1px solid #163362;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 4px;
|
|
||||||
text-shadow: -1px -1px 0 rgba(0,0,0,.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .action-primary:focus,
|
|
||||||
.uni-form .action-primary:hover {
|
|
||||||
background: #2b58a1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .action-primary:active {
|
|
||||||
background: #1d3c6d;
|
|
||||||
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5) inset;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,.5) inset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .action-secondary,
|
|
||||||
.uni-form button.action-secondary,
|
|
||||||
.uni-form input[type=submit].action-secondary {
|
|
||||||
float: right;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
margin: 1.25em 0 0 0;
|
|
||||||
padding: 0;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Disabled actions */
|
|
||||||
|
|
||||||
.uni-form .action-disabled,
|
|
||||||
.uni-form .action-disabled:link,
|
|
||||||
.uni-form .action-disabled:visited,
|
|
||||||
.uni-form .action-disabled:focus,
|
|
||||||
.uni-form .action-disabled:hover,
|
|
||||||
.uni-form .action-disabled:active {
|
|
||||||
background: #ccc;
|
|
||||||
border: 1px solid #aaa;
|
|
||||||
color: #999;
|
|
||||||
text-shadow: 1px 1px 0 rgba(255,255,255,.25);
|
|
||||||
-webkit-box-shadow: none;
|
|
||||||
box-shadow: none;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Required fields asterisks
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.uni-form .inline-labels label em,
|
|
||||||
.uni-form .inline-labels .label em {
|
|
||||||
font-style: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Labels within grouped controls
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.uni-form .multi label {
|
|
||||||
margin-top: .3em; /* Compensate for the smaller font size */
|
|
||||||
font-size: .85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Form hints
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.uni-form .form-hint {
|
|
||||||
padding-top: .3em; /* Compensate for the smaller font size */
|
|
||||||
font-size: .85em;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .ctrl-holder.focused .form-hint {
|
|
||||||
color: #343434;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Messages
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/* Error message at the top of the form ------------------------------------- */
|
|
||||||
|
|
||||||
.uni-form #errorMsg {
|
|
||||||
background: #ffdfdf;
|
|
||||||
border: 1px solid #f3afb5;
|
|
||||||
margin: 1.5em 0;
|
|
||||||
padding: 0 1.5em;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form #errorMsg h3 {
|
|
||||||
margin: 1em 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form #errorMsg ol {
|
|
||||||
margin: 1.5em 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form #errorMsg li {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 0 4px 0;
|
|
||||||
padding: 7px;
|
|
||||||
background: #f6bec1;
|
|
||||||
position: relative;
|
|
||||||
font-size: .85em;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Holder errors ------------------------------------------------------------ */
|
|
||||||
|
|
||||||
.uni-form .ctrl-holder.error,
|
|
||||||
.uni-form .ctrl-holder.focused.error {
|
|
||||||
background-color: #ffdfdf;
|
|
||||||
border-color: #f3afb5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .ctrl-holder.error .input-text.error,
|
|
||||||
.uni-form .ctrl-holder.error .input-file.error,
|
|
||||||
.uni-form .ctrl-holder.error .input-select.error,
|
|
||||||
.uni-form .ctrl-holder.error .input-textarea.error {
|
|
||||||
color: #af4c4c;
|
|
||||||
border-color: #c55f68;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Success messages at the top of the form ---------------------------------- */
|
|
||||||
|
|
||||||
.uni-form #okMsg {
|
|
||||||
background: #e1f4cd;
|
|
||||||
border: 1px solid #b6cda4;
|
|
||||||
margin: 0 0 1.5em 0;
|
|
||||||
padding: 1.5em;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form #okMsg p {
|
|
||||||
margin: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Holder valid input ------------------------------------------------------- */
|
|
||||||
|
|
||||||
.uni-form .ctrl-holder.valid {
|
|
||||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAABpElEQVRIiWNgGAWDAfTvV+2vX6W0/v//UAN0OUZqWbLsoV7BodXv+mF8fUeexkzjGw0wPhM1LPn/v0LhyLp39chiF/d/qUf2GTM1LPqp/GT99y//NJDF2DiZHniZHa+E8Sn20bKHegUfXv1xQBefmGUeiMynyKL//0MNkOMFBvQdeRoZGVdfQBajKOi+yHzd/vvnfwlkMW5+5gvVPncj0dWS7aPpZzUavn78i5GMe1LMErGpJ8ui//9DDS7u/1KPLo4tyGAAI+j+/w81+Kn8bXndaiXGxU3PsWoiJchgAMVH//+HGmRPOL7/w6s/DusmvJq/649RAroGUoMMq0XZE47v//eXQQDGR7eMnCDDahE2ALPs///7AiVzTs1HlxcQYzmAXNTgAihlHSzokH2FbCB6xmRiZvgwtSDGkJGx4wEhi1B8xMi4+sLUAktHJmaGD+gKseV+myChRmIswbCIkGXIQECM5UCU/KUJxFiC1SJiLGNiZvjQHhuBN5URZREhy0gJMoIW4bKM1CAjCfz/H2pQv0ppfesW5fn//9/HSJGjgKYAAELOyUHrhNdJAAAAAElFTkSuQmCC);
|
|
||||||
background-position: 99% 1em;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 18px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .inline-labels .ctrl-holder.valid {
|
|
||||||
background-position: 31% 1.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ctrl-holder.valid .input-text,
|
|
||||||
.ctrl-holder.valid .input-select,
|
|
||||||
.ctrl-holder.valid .input-textarea {
|
|
||||||
border-color: #88a24f;
|
|
||||||
color: #88a24f;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Columns
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
/* Remove borders from .ctrl-holder */
|
|
||||||
|
|
||||||
.uni-form-row > .ctrl-holder {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add borders to rows */
|
|
||||||
|
|
||||||
.uni-form-row {
|
|
||||||
border: 1px solid #efefef;
|
|
||||||
border-width: 1px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form-row:last-child {
|
|
||||||
border-bottom-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
480 breakpoint
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
|
||||||
|
|
||||||
.uni-form .ctrl-holder,
|
|
||||||
.uni-form .inline-labels .ctrl-holder {
|
|
||||||
padding-top: 1em;
|
|
||||||
padding-bottom: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-form .ctrl-holder.valid,
|
|
||||||
.uni-form .inline-labels .ctrl-holder.valid {
|
|
||||||
background-position: 97% 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,425 +0,0 @@
|
||||||
/* ==========================================================================
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -14,8 +14,6 @@
|
||||||
|
|
||||||
<!-- Bootstrap core CSS -->
|
<!-- Bootstrap core CSS -->
|
||||||
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
|
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
|
||||||
<link href="{% static "css/uni-form.css" %}" rel="stylesheet">
|
|
||||||
<link href="{% static "css/style.uni-form.css" %}" rel="stylesheet">
|
|
||||||
|
|
||||||
<!-- Custom styles for this template -->
|
<!-- Custom styles for this template -->
|
||||||
<link href="{% static "style.css" %}" rel="stylesheet">
|
<link href="{% static "style.css" %}" rel="stylesheet">
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
<p>
|
<p>
|
||||||
Login with callsign (uppercase) and password.
|
Login with callsign (uppercase) and password.
|
||||||
</p>
|
</p>
|
||||||
<form method="post" action="{% url "login" %}" class="uniForm">
|
<form method="post" action="{% url "login" %}">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
{{ loginForm|crispy }}
|
{{ loginForm|crispy }}
|
||||||
<div class="form-actions">
|
<div class="form-actions">
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
Trouble logging in? Remember that your call is all upper-case.
|
Trouble logging in? Remember that your call is all upper-case.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<form action="{% url "login" %}" method="post" class="uniForm">
|
<form action="{% url "login" %}" method="post">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
{{ form|crispy }}
|
{{ form|crispy }}
|
||||||
|
|
||||||
|
|
@ -26,25 +26,5 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-6">
|
|
||||||
<blockquote>
|
|
||||||
Serverbasierte Loesung finde ich nach eingem Ueberlegen doof.
|
|
||||||
<footer>DL7BST</footer>
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-6">
|
|
||||||
Please Login! Don't have an account? <a href="{% url 'register' %}">Register here!</a>
|
|
||||||
<form action="#" method="post" class="uniForm">
|
|
||||||
{% csrf_token %}
|
|
||||||
{{ form|crispy }}
|
|
||||||
|
|
||||||
<button type="submit" class="btn btn-default" value="Login">Login</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue