kivitendo/css/less/forms.less @ f88ca788
| fb33dc99 | Hans Peter Schlaepfer | // ----------------------------------------------------------------------------
|
|
//
|
|||
// FORMS & FORM-ELEMENTS
|
|||
//
|
|||
// ----------------------------------------------------------------------------
|
|||
// DESCRIPTION:
|
|||
// The properties of every form and form element should be specified here
|
|||
//
|
|||
//
|
|||
// CONTENTS:
|
|||
// - FORM
|
|||
// -- .box
|
|||
// - FORM ELEMENTS
|
|||
// -- input, textarea, select
|
|||
// -- focused elements
|
|||
// - BUTTONS
|
|||
// - LABELS
|
|||
// - FIELDSET
|
|||
// - DIMENSIONS:
|
|||
// - Single line input fields
|
|||
// - Select elements
|
|||
// - DATA FORMAT
|
|||
// - SPECIALS:
|
|||
// - Date picker (JQuery-UI)
|
|||
// - MIXED FORM-TABLES
|
|||
// - PLACEHOLDER-TEXT
|
|||
// - JQUERY-CONTAINERS FOR FIELDS (Picker etc.)
|
|||
// ----------------------------------------------------------------------------
|
|||
/* forms.less */
|
|||
// --------------------------------------
|
|||
// FORM
|
|||
// --------------------------------------
|
|||
// At first we tried to nest all form elements within the form tag
|
|||
// but it is not possible because some forms (print dialog etc.) do not have
|
|||
// a surrounding form element
|
|||
form {
|
|||
display: table;
|
|||
width: 100%;
|
|||
text-align: left;
|
|||
margin: 0 auto 0 auto;
|
|||
// If Form must be a block container
|
|||
// PENDENT: anschauen
|
|||
&.box {
|
|||
display: block;
|
|||
overflow: hidden ;
|
|||
padding: 0 0 1.6em 0 ;
|
|||
}
|
|||
}
|
|||
// /form
|
|||
// --------------------------------------
|
|||
// FORM-ELEMENTS
|
|||
// --------------------------------------
|
|||
//
|
|||
input,
|
|||
textarea,
|
|||
select {
|
|||
font-family: @font-family-sans-serif ;
|
|||
font-size: @font-size-smaller ;
|
|||
padding: 0.2em 0.2em 0.2em 0.2em ;
|
|||
border: 1px;
|
|||
border-color: darkgray lightgray lightgray;
|
|||
border-style: solid;
|
|||
outline: none;
|
|||
background-color: #fff ;
|
|||
&[type="text"],
|
|||
&[type="password"] {
|
|||
}
|
|||
// PENDENT: data type
|
|||
&[type="text"] {
|
|||
&.accent{
|
|||
font-weight: bold ;
|
|||
font-size: 130% !important ;
|
|||
padding: 0.6em auto !important ;
|
|||
}
|
|||
}
|
|||
}
|
|||
// /input, textarea, select
|
|||
// --------------
|
|||
// Focused Elements
|
|||
input[type="text"],
|
|||
input[type="password"],
|
|||
textarea,
|
|||
select {
|
|||
&:focus,
|
|||
&:active {
|
|||
background-color: @formelement-focus-bg ;
|
|||
border: @formelement-focus-border ;
|
|||
}
|
|||
}
|
|||
// --------------
|
|||
// Forced Padding for Pop-Down-Symbol
|
|||
// PENDENT: Pop-Down-Symbol wo definiert?
|
|||
select {
|
|||
// background: white url('../image/select-down.png') no-repeat scroll right center;
|
|||
padding-right: 1.0em;
|
|||
&.helper {
|
|||
background-color: @gray-superlight;
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// SPECIAL INPUT TYPES
|
|||
// --------------------------------------
|
|||
input {
|
|||
&[type="file"]{
|
|||
padding: 0.8em;
|
|||
background-color: @gray-lighter;
|
|||
color: @gray-mediumdark ;
|
|||
border: 1px @gray-mediumdark solid ;
|
|||
// PENDENT: geht wahrscheinlich nicht, oder muss anders geloest werden
|
|||
// Hier handelt es sich um den "Select File"-Button
|
|||
button,
|
|||
input[type="button"] {
|
|||
background-color: #A3FFA8;
|
|||
}
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// LABELS
|
|||
// --------------------------------------
|
|||
label {
|
|||
cursor: text;
|
|||
vertical-align: top;
|
|||
display: inline-block;
|
|||
width: 88% ;
|
|||
color: @brand-data-label-color ;
|
|||
&:hover {
|
|||
color: #000 ;
|
|||
text-decoration: underline ;
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// FIELDSET
|
|||
// --------------------------------------
|
|||
fieldset {
|
|||
margin-top: 15px;
|
|||
color: black;
|
|||
font-weight: normal;
|
|||
font-size: @font-size-large;
|
|||
text-transform: uppercase;
|
|||
border-color: grey;
|
|||
border-width: 1px ;
|
|||
margin: 0.4em 0.6em 1.4em 0.6em;
|
|||
// Heading within FIELDSET */
|
|||
h4 {
|
|||
font-weight: normal ;
|
|||
font-size: @h4-size ;
|
|||
margin: 0;
|
|||
padding: 0 0 0.2em 0;
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// DIMENSIONS
|
|||
// --------------------------------------
|
|||
input{
|
|||
// 1 Lined input field
|
|||
// PENDENT: bei Verwendung von weiteren HTML5-Typen Typ-Deklaration erweitern
|
|||
&[type="text"],
|
|||
&[type="password"]{
|
|||
&.wi-smallest { width: @input-wi-smallest ; } // 2.0em
|
|||
&.wi-verysmall { width: @input-wi-verysmall ; } // 4.0em
|
|||
&.wi-small { width: @input-wi-small ; } // 8.8em
|
|||
&.wi-mediumsmall { width: @input-wi-mediumsmall ; } // 8.8em
|
|||
&.wi-normal { width: @input-wi-normal ; } // 12.0em
|
|||
&.wi-lightwide { width: @input-wi-lightwide ; } // 12.0em
|
|||
&.wi-wide { width: @input-wi-wide ; } // 18.0em
|
|||
&.wi-wider { min-width: @input-wi-wider ; } // 24.0em
|
|||
&.wi-verywide { min-width: @input-wi-verywide ; } // 36.0em
|
|||
// data types
|
|||
&.wi-date { width: @input-wi-small ; } //
|
|||
&.wi-number { width: @input-wi-small ; } //
|
|||
&.wi-tinynumber { width: @input-wi-verysmall ; } //
|
|||
&.wi-largenumber { width: @input-wi-mediumsmall ; } //
|
|||
// combined minus dimensions (take care of the double hyphen -- )
|
|||
&.wi-lightwide--verysmall { width: @input-wi-lightwide--verysmall; }
|
|||
&.wi-wide--verysmall { width: @input-wi-wide--verysmall !important; }
|
|||
//&.wi-wide--verysmall { width: 203px; }
|
|||
}
|
|||
// Password (Standard size) // PENDENT: Standardgroesse ??
|
|||
&[type="password"]{
|
|||
//min-width: @input-wi-normal ;
|
|||
}
|
|||
// OBSOLETE // PENDENT: ggf. entfernen
|
|||
.fixed_width {
|
|||
width: 250px;
|
|||
}
|
|||
} // /DIMENSION input
|
|||
// -------------------
|
|||
// Select-Element
|
|||
//
|
|||
select {
|
|||
&.wi-smallest { width: @select-wi-smallest ; } // 2.0em
|
|||
&.wi-verysmall { width: @select-wi-verysmall ; }
|
|||
&.wi-small { width: @select-wi-small ; } // Datum (PENDENT: ca. 8.6em)
|
|||
&.wi-mediumsmall { width: @select-wi-mediumsmall ; }
|
|||
&.wi-normal { width: @select-wi-normal ; }
|
|||
&.wi-lightwide { width: @select-wi-lightwide ; }
|
|||
&.wi-wide { width: @select-wi-wide ; }
|
|||
&.wi-wider { min-width: @select-wi-wider ; }
|
|||
&.wi-verywide { min-width: @select-wi-verywide ; }
|
|||
&.wi-full { width: 100% ; }
|
|||
&.wi-small-normal { width: @select-wi-small-normal } ;
|
|||
&.wi-small-lightwide { width: @select-wi-small-lightwide } ;
|
|||
&.wi-small-wide { width: @select-wi-small-wide } ;
|
|||
&.wi-small-wider { width: @select-wi-small-wider } ;
|
|||
&.wi-small-verywide { width: @select-wi-small-verywide } ;
|
|||
&.wi-mediumsmall-normal { width: @select-wi-mediumsmall-normal } ;
|
|||
&.wi-mediumsmall-lightwide { width: @select-wi-mediumsmall-lightwide } ;
|
|||
&.wi-mediumsmall-wide { width: @select-wi-mediumsmall-wide } ;
|
|||
&.wi-mediumsmall-wider { width: @select-wi-mediumsmall-wider } ;
|
|||
&.wi-mediumsmall-verywide { width: @select-wi-mediumsmall-verywide } ;
|
|||
&.wi-normal-normal { width: @select-wi-normal-normal } ;
|
|||
&.wi-normal-lightwide { width: @select-wi-normal-lightwide } ;
|
|||
&.wi-normal-wide { width: @select-wi-normal-wide } ;
|
|||
&.wi-normal-wider { width: @select-wi-normal-wider } ;
|
|||
&.wi-normal-verywide { width: @select-wi-normal-verywide } ;
|
|||
&.wi-lightwide-normal { width: @select-wi-lightwide-normal } ;
|
|||
&.wi-lightwide-lightwide { width: @select-wi-lightwide-lightwide } ;
|
|||
&.wi-lightwide-wide { width: @select-wi-lightwide-wide } ;
|
|||
&.wi-lightwide-wider { width: @select-wi-lightwide-wider } ;
|
|||
&.wi-lightwide-verywide { width: @select-wi-lightwide-verywide } ;
|
|||
&.wi-wide-normal { width: @select-wi-wide-normal } ;
|
|||
&.wi-wide-lightwide { width: @select-wi-wide-lightwide } ;
|
|||
&.wi-wide-wide { width: @select-wi-wide-wide } ;
|
|||
&.wi-wide-wider { width: @select-wi-wide-wider } ;
|
|||
&.wi-wide-verywide { width: @select-wi-wide-verywide } ;
|
|||
} // /DIMENSION select
|
|||
// -------------------
|
|||
// Textarea-Element
|
|||
//
|
|||
textarea {
|
|||
// Standard-Dimensions
|
|||
&.wi-smallest { width: @textarea-wi-normal ; } // no smallest, just normal
|
|||
&.wi-verysmall { width: @textarea-wi-normal ; } // no verysmall, just normal
|
|||
&.wi-small { width: @textarea-wi-normal ; } // no small, just normal
|
|||
&.wi-mediumsmall { width: @textarea-wi-normal ; } // no mediumsmall, just normal
|
|||
&.wi-normal { width: @textarea-wi-normal ; }
|
|||
&.wi-lightwide { min-width: @textarea-wi-lightwide ; }
|
|||
&.wi-wide { min-width: @textarea-wi-wide ; }
|
|||
&.wi-wide.strict { max-width: @textarea-wi-wide !important ; }
|
|||
&.wi-wider { min-width: @textarea-wi-wider ; }
|
|||
&.wi-verywide { min-width: @textarea-wi-verywide ; }
|
|||
&.wi-full { width: 100% ; }
|
|||
&.wi-small-small { width: @textarea-wi-small-small ; }
|
|||
&.wi-small-mediumsmall { width: @textarea-wi-small-mediumsmall ; margin: 0 30px 0 0 ; }
|
|||
&.wi-small-normal { width: @textarea-wi-small-normal ; }
|
|||
&.wi-small-lightwide { width: @textarea-wi-small-lightwide ; }
|
|||
&.wi-small-wide { width: @textarea-wi-small-wide ; }
|
|||
&.wi-small-wider { width: @textarea-wi-small-wider ; }
|
|||
&.wi-small-verywide { width: @textarea-wi-small-verywide ; }
|
|||
&.wi-mediumsmall-small { width: @textarea-wi-mediumsmall-small ; }
|
|||
&.wi-mediumsmall-mediumsmall { width: @textarea-wi-mediumsmall-mediumsmall ; }
|
|||
&.wi-mediumsmall-normal { width: @textarea-wi-mediumsmall-normal ; }
|
|||
&.wi-mediumsmall-lightwide { width: @textarea-wi-mediumsmall-lightwide ; }
|
|||
&.wi-mediumsmall-wide { width: @textarea-wi-mediumsmall-wide ; }
|
|||
&.wi-mediumsmall-wider { width: @textarea-wi-mediumsmall-wider ; }
|
|||
&.wi-mediumsmall-verywide { width: @textarea-wi-mediumsmall-verywide ; }
|
|||
&.wi-normal-small { width: @textarea-wi-normal-small ; }
|
|||
&.wi-normal-mediumsmall { width: @textarea-wi-normal-mediumsmall ; }
|
|||
&.wi-normal-normal { width: @textarea-wi-normal-normal ; }
|
|||
&.wi-normal-lightwide { width: @textarea-wi-normal-lightwide ; }
|
|||
&.wi-normal-wide { width: @textarea-wi-normal-wide ; }
|
|||
&.wi-normal-wider { width: @textarea-wi-normal-wider ; }
|
|||
&.wi-normal-verywide { width: @textarea-wi-normal-verywide ; }
|
|||
&.wi-lightwide-small { width: @textarea-wi-lightwide-small ; }
|
|||
&.wi-lightwide-mediumsmall { width: @textarea-wi-lightwide-mediumsmall ; }
|
|||
&.wi-lightwide-normal { width: @textarea-wi-lightwide-normal ; }
|
|||
&.wi-lightwide-lightwide { width: @textarea-wi-lightwide-lightwide ; }
|
|||
&.wi-lightwide-wide { width: @textarea-wi-lightwide-wide ; }
|
|||
&.wi-lightwide-wider { width: @textarea-wi-lightwide-wider ; }
|
|||
&.wi-lightwide-verywide { width: @textarea-wi-lightwide-verywide ; }
|
|||
&.wi-wide-small { width: @textarea-wi-wide-small ; }
|
|||
&.wi-wide-mediumsmall { width: @textarea-wi-wide-mediumsmall ; }
|
|||
&.wi-wide-normal { width: @textarea-wi-wide-normal ; }
|
|||
&.wi-wide-lightwide { width: @textarea-wi-wide-wide ; }
|
|||
&.wi-wide-wide { width: @textarea-wi-wide-wide ; }
|
|||
&.wi-wide-wider { width: @textarea-wi-wide-wider ; }
|
|||
&.wi-wide-verywide { width: @textarea-wi-wide-verywide ; }
|
|||
} // /DIMENSION textarea
|
|||
// textarea sizes for JS generated elements
|
|||
// make sure not to use it as a standard
|
|||
td, th { &.wi-date > input[type="text"] { width: @input-wi-small ; } }
|
|||
td, th { &.wi-lightwide > textarea { width: @textarea-wi-wide ; } }
|
|||
td, th { &.wi-wide > textarea { width: @textarea-wi-wide ; } }
|
|||
td, th { &.wi-small-verywide > textarea { width: @textarea-wi-small-verywide ; } }
|
|||
th,
|
|||
td {
|
|||
&.wi-lightwide { textarea, input[type="text"], div.cke_editable, input#order_vendor_id_name { width: @textarea-wi-lightwide; } }
|
|||
&.wi-wide { textarea, input[type="text"], div.cke_editable, input#order_vendor_id_name { width: @textarea-wi-wide; } }
|
|||
}
|
|||
span {
|
|||
// Standard-Dimensions
|
|||
&.wi-smallest { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal ; } } // no smallest, just normal
|
|||
&.wi-verysmall { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal ; } } // no verysmall, just normal
|
|||
&.wi-small { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal ; } } // no small, just normal
|
|||
&.wi-mediumsmall { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal ; } } // no mediumsmall, just normal
|
|||
&.wi-normal { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal ; } }
|
|||
&.wi-lightwide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-lightwide ; } }
|
|||
&.wi-wide { padding: 0 ; textarea, & > div.cke_editable { width: @textarea-wi-wide !important ; } }
|
|||
&.wi-wide.strict { max-width: @textarea-wi-wide !important ; }
|
|||
&.wi-wider { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-wider ; } }
|
|||
&.wi-verywide { padding: 0 ; textarea, div.cke_editable { min-width: @textarea-wi-verywide ; } }
|
|||
&.wi-full { padding: 0 ; textarea, div.cke_editable { width: 100% ; } }
|
|||
&.wi-small-small { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-small-small ; } }
|
|||
&.wi-small-mediumsmall { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-small-mediumsmall ; margin: 0 30px 0 0 ; } }
|
|||
&.wi-small-normal { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-small-normal ; } }
|
|||
&.wi-small-lightwide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-small-lightwide ; } }
|
|||
&.wi-small-wide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-small-wide ; } }
|
|||
&.wi-small-wider { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-small-wider ; } }
|
|||
&.wi-small-verywide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-small-verywide ; } }
|
|||
&.wi-mediumsmall-small { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-mediumsmall-small ; } }
|
|||
&.wi-mediumsmall-mediumsmall { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-mediumsmall-mediumsmall ; } }
|
|||
&.wi-mediumsmall-normal { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-mediumsmall-normal ; } }
|
|||
&.wi-mediumsmall-lightwide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-mediumsmall-lightwide ; } }
|
|||
&.wi-mediumsmall-wide { padding: 0 ; textarea, &.wi-mediumsmall-wide > div.cke_editable { width: @textarea-wi-mediumsmall-wide !important ; } }
|
|||
&.wi-mediumsmall-wider { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-mediumsmall-wider ; } }
|
|||
&.wi-mediumsmall-verywide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-mediumsmall-verywide ; } }
|
|||
&.wi-normal-small { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal-small ; } }
|
|||
&.wi-normal-mediumsmall { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal-mediumsmall ; } }
|
|||
&.wi-normal-normal { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal-normal ; } }
|
|||
&.wi-normal-lightwide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal-lightwide ; } }
|
|||
&.wi-normal-wide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal-wide ; } }
|
|||
&.wi-normal-wider { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal-wider ; } }
|
|||
&.wi-normal-verywide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-normal-verywide ; } }
|
|||
&.wi-lightwide-small { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-lightwide-small ; } }
|
|||
&.wi-lightwide-mediumsmall { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-lightwide-mediumsmall ; } }
|
|||
&.wi-lightwide-normal { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-lightwide-normal ; } }
|
|||
&.wi-lightwide-lightwide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-lightwide-lightwide ; } }
|
|||
&.wi-lightwide-wide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-lightwide-wide ; } }
|
|||
&.wi-lightwide-wider { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-lightwide-wider ; } }
|
|||
&.wi-lightwide-verywide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-lightwide-verywide ; } }
|
|||
&.wi-wide-small { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-wide-small ; } }
|
|||
&.wi-wide-mediumsmall { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-wide-mediumsmall ; } }
|
|||
&.wi-wide-normal { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-wide-normal ; } }
|
|||
&.wi-wide-lightwide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-wide-wide ; } }
|
|||
&.wi-wide-wide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-wide-wide ; } }
|
|||
&.wi-wide-wider { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-wide-wider ; } }
|
|||
&.wi-wide-verywide { padding: 0 ; textarea, div.cke_editable { width: @textarea-wi-wide-verywide ; } }
|
|||
} // /DIMENSION textarea
|
|||
// -------------------
|
|||
// Input, Select & Textarea-Elements within TD & TH elements
|
|||
//
|
|||
// PENDENT: Dieses Konstrukt sollte nicht noetig sein und behoben werden, vor allem die Funktion L.button_tag()
|
|||
th,
|
|||
td {
|
|||
&.wi-smallest { input[type="text"], select { width: @input-wi-smallest ; } }
|
|||
&.wi-verysmall { input[type="text"], select { width: @input-wi-verysmall ; } }
|
|||
&.wi-small { input[type="text"], select { width: @input-wi-small ; } }
|
|||
&.wi-mediumsmall { input[type="text"], select { width: @input-wi-mediumsmall ; } }
|
|||
&.wi-normal { input[type="text"], select, textarea, div.cke_editable { width: @input-wi-normal ; } }
|
|||
&.wi-lightwide { input[type="text"], select, textarea, div.cke_editable { width: @input-wi-lightwide ; } }
|
|||
&.wi-wide { input[type="text"], select, textarea, div.cke_editable { width: @input-wi-wide !important ; } }
|
|||
&.wi-wide.strict { input[type="text"], select, textarea, div.cke_editable { max-width: @input-wi-wide !important ; } }
|
|||
&.wi-wider { input[type="text"], select, textarea, div.cke_editable { width: @input-wi-wider !important ; } }
|
|||
&.wi-verywide { input[type="text"], select, textarea, div.cke_editable { min-width: @input-wi-verywide ; } }
|
|||
&.wi-full { input[type="text"], select, textarea, div.cke_editable { width: 100% ; } }
|
|||
// Combinations
|
|||
&.wi-mediumsmall-wide { input[type="text"], select, textarea, div.cke_editable { width: @textarea-wi-mediumsmall-wide ; } }
|
|||
&.wi-small-mediumsmall { input[type="text"], select, textarea, div.cke_editable { width: @textarea-wi-small-mediumsmall ; } }
|
|||
&.wi-mediumsmall-lightwide { input[type="text"], select, textarea, div.cke_editable { width: @textarea-wi-mediumsmall-lightwide ; } }
|
|||
&.below { input[type="text"], select, textarea, div.cke_editable { clear: both; margin-top: 0.4em ; } }
|
|||
}
|
|||
// TEMPORAER: PENDENT: sollte behoben sein, weshalb dieses Konstrukt nicht mehr noetig sein sollte
|
|||
td.wi-lightwide > span.customer_vendor_picker > input { width: @input-wi-lightwide ; }
|
|||
td.wi-wide > span.customer_vendor_picker > input { width: @input-wi-wide ; }
|
|||
td.wi-wider > span.customer_vendor_picker > input { width: @input-wi-wider ; }
|
|||
// --------------------------------------
|
|||
// DATA-FORMAT
|
|||
// --------------------------------------
|
|||
input,
|
|||
select {
|
|||
&.number { text-align: right ; }
|
|||
&.numeric { text-align: right ; }
|
|||
&.right { text-align: right ; }
|
|||
}
|
|||
input[type=text].emphasized {
|
|||
word-wrap: break-word;
|
|||
word-break: break-all;
|
|||
height: auto;
|
|||
overflow: hidden ;
|
|||
}
|
|||
// --------------------------------------
|
|||
// SPECIALS
|
|||
// --------------------------------------
|
|||
// -------------------
|
|||
// Date picker Symbol (Jquery-UI)
|
|||
// normally placed after a input field within a table cell
|
|||
td img.ui-datepicker-trigger{
|
|||
vertical-align: middle ;
|
|||
padding: 0 0.2em ;
|
|||
}
|
|||
td {
|
|||
div.rowspan-table{
|
|||
display: table-row ;
|
|||
float: left;
|
|||
div.label-n-value{
|
|||
display: table-cell ;
|
|||
vertical-align: middle;
|
|||
height: 1.6em !important ; // the cell have not the same height if they are made with DIVs
|
|||
float: left;
|
|||
padding: 0 2.0em 0 0 ;
|
|||
//overflow: hidden ;
|
|||
b{
|
|||
font-weight: normal;
|
|||
padding: 0 0 0 0 ;
|
|||
}
|
|||
}
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// MIXED FORM-TABLES
|
|||
// --------------------------------------
|
|||
// Tables with either Form Elements or Text in Cells
|
|||
// PENDENT: .data mit anderen Formular-Elementen zusammenfassen
|
|||
table td > span.data {
|
|||
display: block;
|
|||
overflow: hidden ;
|
|||
font-size: @font-size-smaller ;
|
|||
border: 1px #dcdcdc solid;
|
|||
margin: 0 ;
|
|||
line-height: 120%;
|
|||
padding: 0.2em 0.28em 0.2em 0.2em !important;
|
|||
&::before{
|
|||
//content: "" ;
|
|||
}
|
|||
&.below{
|
|||
margin-top: 0.2em;
|
|||
}
|
|||
&.numeric,
|
|||
&.right{
|
|||
text-align: right;
|
|||
}
|
|||
// Dimensions
|
|||
&.wi-smallest { width: @input-wi-smallest ; }
|
|||
&.wi-verysmall { width: @input-wi-verysmall ; }
|
|||
&.wi-small { width: @input-wi-small ; }
|
|||
&.wi-mediumsmall { width: @input-wi-mediumsmall ; }
|
|||
&.wi-normal { width: @input-wi-normal ; }
|
|||
&.wi-lightwide { width: @input-wi-lightwide ; }
|
|||
&.wi-wide { width: @input-wi-wide ; }
|
|||
// Data Types
|
|||
&.numeric { text-align: right ; }
|
|||
&.right { text-align: right ; }
|
|||
}
|
|||
// -------------------
|
|||
// Boxes
|
|||
//
|
|||
div.boxes{
|
|||
margin: 0 0 0.9em 0 ;
|
|||
overflow: hidden ;
|
|||
max-width: 800px ;
|
|||
// Additional
|
|||
// There are also some Checkboxes for "Select All"
|
|||
h3 {
|
|||
label{
|
|||
float: right;
|
|||
width: 88% ;
|
|||
font-size: @h3-size ;
|
|||
padding: 0 0 0.6em 0 ;
|
|||
line-height: 1.2em ;
|
|||
}
|
|||
}
|
|||
&>div{
|
|||
clear: both;
|
|||
margin: 0 0 0.6em 0 ;
|
|||
padding: 0;
|
|||
display: block ;
|
|||
overflow: hidden ;
|
|||
label{
|
|||
float: left;
|
|||
width: 88% ;
|
|||
}
|
|||
input[type="checkbox"],
|
|||
input[type="radio"]{
|
|||
float: left;
|
|||
margin-right: 0.6em ;
|
|||
}
|
|||
}
|
|||
}
|
|||
// -------------------
|
|||
// Boxes horizontal
|
|||
//
|
|||
td.horizontal {
|
|||
input[type="radio"],
|
|||
input[type="checkbox"]{
|
|||
float: left !important;
|
|||
clear: none !important;
|
|||
width: auto;
|
|||
}
|
|||
label{
|
|||
width: auto !important;
|
|||
margin-right: 2.0em ;
|
|||
float: left !important;
|
|||
clear: none !important;
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// CHECKBOXES & LABELS WITHIN DIVS
|
|||
// --------------------------------------
|
|||
table.tbl-horizontal,
|
|||
table.tbl-list,
|
|||
table.tbl-plain {
|
|||
th {
|
|||
label{
|
|||
display: inline-block;
|
|||
&:link,
|
|||
&:visited {
|
|||
color: @gray ;
|
|||
text-decoration: none ;
|
|||
}
|
|||
&:hover{
|
|||
color: #777 ;
|
|||
text-decoration: underline;
|
|||
}
|
|||
}
|
|||
}
|
|||
td{
|
|||
input[type="radio"],
|
|||
input[type="checkbox"]{
|
|||
float: left;
|
|||
clear: left;
|
|||
&~label{
|
|||
float: left;
|
|||
width: auto;
|
|||
margin-left: 0.2em ;
|
|||
line-height: 1.4em ;
|
|||
//clear: left;
|
|||
}
|
|||
}
|
|||
// Date-Field generated by the function L.Date_Tag
|
|||
span.wi-date {
|
|||
padding: 0 ;
|
|||
input[type="text"],
|
|||
input[type="date"]{
|
|||
width: @input-wi-small ;
|
|||
}
|
|||
}
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// FAKE-ELEMENTS
|
|||
// --------------------------------------
|
|||
// Yes, there exists some foolery
|
|||
// Substitution for Elements as readonly containers
|
|||
div.fake-textarea {
|
|||
width: @textarea-wi-lightwide;
|
|||
height: 150px;
|
|||
background-color: white;
|
|||
overflow: auto;
|
|||
border: 1px #999999 solid;
|
|||
&.fake-wi-wide { width: @textarea-wi-wide ; }
|
|||
}
|
|||
// especially in the admin section
|
|||
div.admin{
|
|||
form{
|
|||
font-size: @font-size-small ;
|
|||
input[type="checkbox"] {
|
|||
margin: 0.2em 0.6em 0.3em 0 ;
|
|||
float: left;
|
|||
}
|
|||
h3{
|
|||
margin: 1.2em 0 0.6em 0 ;
|
|||
display: block;
|
|||
}
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// jQuery-Plugins for forms
|
|||
// --------------------------------------
|
|||
// MultiSelect2Side
|
|||
.ms2side {
|
|||
display: block;
|
|||
overflow: hidden;
|
|||
p {
|
|||
margin: 0 0 0.4em 0 ;
|
|||
}
|
|||
.ms2side__div {
|
|||
.ms2side__header {
|
|||
width: 12.0em ;
|
|||
height: 2.2em ;
|
|||
display: table-cell;
|
|||
vertical-align: bottom;
|
|||
}
|
|||
.ms2side__options > p.ms2side__hide,
|
|||
.ms2side__updown > p.ms2side__hide {
|
|||
cursor: default;
|
|||
color: #9e9e9e;
|
|||
border: 1px solid grey;
|
|||
background-color: #D4D4D4 !important;
|
|||
}
|
|||
}
|
|||
}
|
|||
// --------------------------------------
|
|||
// PLACEHOLDER-TEXT
|
|||
// --------------------------------------
|
|||
.frame-header-quicksearch input::placeholder {
|
|||
color: @gray-mediumdark ;
|
|||
}
|
|||
#content input::placeholder {
|
|||
color: #999 ;
|
|||
}
|
|||
// --------------------------------------
|
|||
// JQUERY-CONTAINERS FOR FIELDS
|
|||
// --------------------------------------
|
|||
// PENDENT: gehoert in Tables
|
|||
span.customer_vendor_picker {
|
|||
padding: 0 ;
|
|||
}
|
|||
input#vendor_id_name.ui-autocomplete-input,
|
|||
input#customer_id_name.ui-autocomplete-input {
|
|||
&.wi-wide{ width: @input-wi-wide ; }
|
|||
}
|
|||
// --------------------------------------
|
|||
// DIVERS JQUERY-/AJAX-STUFF
|
|||
// --------------------------------------
|
|||
table td span.project_picker {
|
|||
padding: 0 !important;
|
|||
}
|
|||