Revision cd670dfa
Von Hans Peter Schlaepfer vor etwa 5 Jahren hinzugefügt
- ID cd670dfafdb3560614634765e2a377946ff1809b
- Vorgänger ff33b093
| css/less/forms.less | ||
|---|---|---|
| 1 |
/* ------------------------------------------------------------- */ |
|
| 2 |
/* FORM ELEMENTS (forms.less) */ |
|
| 3 |
/* ------------------------------------------------------------- */ |
|
| 4 |
|
|
| 1 | 5 |
// ---------------------------------------------------------------------------- |
| 2 | 6 |
// |
| 3 | 7 |
// FORMS & FORM-ELEMENTS |
| ... | ... | |
| 37 | 41 |
// but it is not possible because some forms (print dialog etc.) do not have |
| 38 | 42 |
// a surrounding form element |
| 39 | 43 |
form {
|
| 40 |
display: table; |
|
| 41 |
width: 100%; |
|
| 44 |
display: table;
|
|
| 45 |
width: 100%;
|
|
| 42 | 46 |
text-align: left; |
| 43 |
margin: 0 auto 0 auto; |
|
| 47 |
margin: 0 auto 0 auto;
|
|
| 44 | 48 |
|
| 45 | 49 |
|
| 46 | 50 |
// If Form must be a block container |
| 47 | 51 |
// PENDENT: anschauen |
| 48 | 52 |
&.box {
|
| 49 |
display: block; |
|
| 53 |
display: block;
|
|
| 50 | 54 |
overflow: hidden ; |
| 51 |
padding: 0 0 1.6em 0 ; |
|
| 55 |
padding: 0 0 1.6em 0 ;
|
|
| 52 | 56 |
} |
| 53 | 57 |
|
| 54 | 58 |
} |
| ... | ... | |
| 62 | 66 |
input, |
| 63 | 67 |
textarea, |
| 64 | 68 |
select {
|
| 65 |
font-family: @font-family-sans-serif ; |
|
| 66 |
font-size: @font-size-smaller ;
|
|
| 67 |
padding: 0.2em 0.2em 0.2em 0.2em ;
|
|
| 68 |
border: 1px; |
|
| 69 |
border-color: darkgray lightgray lightgray; |
|
| 70 |
border-style: solid; |
|
| 71 |
outline: none; |
|
| 69 |
font-family: @font-family-sans-serif ;
|
|
| 70 |
//font-size: @font-size-smaller ;
|
|
| 71 |
padding: 0.2em 0.2em 0.2em @padding-databoxes-left ;
|
|
| 72 |
border: 1px;
|
|
| 73 |
border-color: darkgray lightgray lightgray;
|
|
| 74 |
border-style: solid;
|
|
| 75 |
outline: none;
|
|
| 72 | 76 |
background-color: #fff ; |
| 73 | 77 |
|
| 74 | 78 |
&[type="text"], |
| ... | ... | |
| 78 | 82 |
// PENDENT: data type |
| 79 | 83 |
&[type="text"] {
|
| 80 | 84 |
&.accent{
|
| 81 |
font-weight: bold ; |
|
| 82 |
font-size: 130% !important ; |
|
| 83 |
padding: 0.6em auto !important ; |
|
| 85 |
font-weight: bold ;
|
|
| 86 |
font-size: 130% !important ;
|
|
| 87 |
padding: 0.6em auto !important ;
|
|
| 84 | 88 |
} |
| 85 | 89 |
} |
| 86 | 90 |
} |
| 87 | 91 |
// /input, textarea, select |
| 88 | 92 |
|
| 93 |
|
|
| 94 |
textarea {
|
|
| 95 |
resize: vertical; |
|
| 96 |
} |
|
| 97 |
|
|
| 98 |
|
|
| 99 |
|
|
| 100 |
|
|
| 101 |
|
|
| 89 | 102 |
// -------------- |
| 90 | 103 |
// Focused Elements |
| 91 | 104 |
input[type="text"], |
| ... | ... | |
| 95 | 108 |
&:focus, |
| 96 | 109 |
&:active {
|
| 97 | 110 |
background-color: @formelement-focus-bg ; |
| 98 |
border: @formelement-focus-border ; |
|
| 111 |
border: @formelement-focus-border ; |
|
| 112 |
color: @formelement-focus-text ; |
|
| 99 | 113 |
} |
| 100 | 114 |
} |
| 101 | 115 |
|
| ... | ... | |
| 107 | 121 |
|
| 108 | 122 |
select {
|
| 109 | 123 |
// background: white url('../image/select-down.png') no-repeat scroll right center;
|
| 110 |
padding-right: 1.0em; |
|
| 124 |
//padding-right: 1.0em; |
|
| 125 |
//padding-left: 0.6em ; |
|
| 111 | 126 |
&.helper {
|
| 112 |
background-color: @gray-superlight; |
|
| 127 |
background-color: @gray-superlight; |
|
| 128 |
} |
|
| 129 |
& > option {
|
|
| 130 |
padding-left: 0.6em ; |
|
| 113 | 131 |
} |
| 114 | 132 |
} |
| 115 | 133 |
|
| 116 | 134 |
|
| 135 |
|
|
| 136 |
|
|
| 137 |
|
|
| 138 |
|
|
| 139 |
|
|
| 117 | 140 |
// -------------------------------------- |
| 118 | 141 |
// SPECIAL INPUT TYPES |
| 119 | 142 |
// -------------------------------------- |
| 120 | 143 |
|
| 121 | 144 |
input {
|
| 122 | 145 |
&[type="file"]{
|
| 123 |
padding: 0.8em; |
|
| 124 |
background-color: @gray-lighter; |
|
| 125 |
color: @gray-mediumdark ;
|
|
| 126 |
border: 1px @gray-mediumdark solid ;
|
|
| 146 |
padding: 0.8em;
|
|
| 147 |
background-color: @gray-lighter;
|
|
| 148 |
color: @gray-dark ;
|
|
| 149 |
border: 1px @gray-dark solid ;
|
|
| 127 | 150 |
// PENDENT: geht wahrscheinlich nicht, oder muss anders geloest werden |
| 128 | 151 |
// Hier handelt es sich um den "Select File"-Button |
| 129 | 152 |
button, |
| ... | ... | |
| 136 | 159 |
|
| 137 | 160 |
|
| 138 | 161 |
|
| 139 |
|
|
| 140 |
|
|
| 141 |
|
|
| 142 |
|
|
| 143 |
|
|
| 144 |
|
|
| 145 |
|
|
| 146 |
|
|
| 147 |
|
|
| 148 |
|
|
| 149 |
|
|
| 150 |
|
|
| 151 | 162 |
// -------------------------------------- |
| 152 | 163 |
// LABELS |
| 153 | 164 |
// -------------------------------------- |
| 154 | 165 |
|
| 155 | 166 |
label {
|
| 156 |
cursor: text; |
|
| 157 |
vertical-align: top; |
|
| 158 |
display: inline-block; |
|
| 159 |
width: 88% ; |
|
| 160 |
color: @brand-data-label-color ; |
|
| 167 |
cursor: pointer; |
|
| 168 |
vertical-align: top; |
|
| 169 |
display: inline-block; |
|
| 170 |
width: 88% ; |
|
| 171 |
color: @brand-data-label-color ; |
|
| 172 |
|
|
| 173 |
&:link, |
|
| 174 |
&:visited {
|
|
| 175 |
text-decoration: none ; |
|
| 176 |
} |
|
| 161 | 177 |
&:hover {
|
| 162 |
color: #000 ;
|
|
| 163 |
text-decoration: underline ; |
|
| 178 |
//color: #000 ;
|
|
| 179 |
text-decoration: underline ;
|
|
| 164 | 180 |
} |
| 165 | 181 |
} |
| 166 | 182 |
|
| ... | ... | |
| 172 | 188 |
// -------------------------------------- |
| 173 | 189 |
|
| 174 | 190 |
fieldset {
|
| 175 |
margin-top: 15px; |
|
| 176 |
color: black; |
|
| 177 |
font-weight: normal; |
|
| 178 |
font-size: @font-size-large; |
|
| 179 |
text-transform: uppercase; |
|
| 180 |
border-color: grey; |
|
| 181 |
border-width: 1px ; |
|
| 182 |
margin: 0.4em 0.6em 1.4em 0.6em; |
|
| 191 |
margin-top: 15px;
|
|
| 192 |
color: black;
|
|
| 193 |
font-weight: normal;
|
|
| 194 |
font-size: @font-size-large;
|
|
| 195 |
text-transform: uppercase;
|
|
| 196 |
border-color: grey;
|
|
| 197 |
border-width: 1px ;
|
|
| 198 |
margin: 0.4em 0.6em 1.4em 0.6em;
|
|
| 183 | 199 |
|
| 184 | 200 |
// Heading within FIELDSET */ |
| 185 | 201 |
h4 {
|
| ... | ... | |
| 197 | 213 |
// DIMENSIONS |
| 198 | 214 |
// -------------------------------------- |
| 199 | 215 |
input{
|
| 216 |
|
|
| 200 | 217 |
// 1 Lined input field |
| 201 | 218 |
// PENDENT: bei Verwendung von weiteren HTML5-Typen Typ-Deklaration erweitern |
| 202 | 219 |
&[type="text"], |
| ... | ... | |
| 210 | 227 |
&.wi-wide { width: @input-wi-wide ; } // 18.0em
|
| 211 | 228 |
&.wi-wider { min-width: @input-wi-wider ; } // 24.0em
|
| 212 | 229 |
&.wi-verywide { min-width: @input-wi-verywide ; } // 36.0em
|
| 230 |
|
|
| 213 | 231 |
// data types |
| 214 | 232 |
&.wi-date { width: @input-wi-small ; } //
|
| 215 | 233 |
&.wi-number { width: @input-wi-small ; } //
|
| 216 | 234 |
&.wi-tinynumber { width: @input-wi-verysmall ; } //
|
| 217 | 235 |
&.wi-largenumber { width: @input-wi-mediumsmall ; } //
|
| 236 |
|
|
| 218 | 237 |
// combined minus dimensions (take care of the double hyphen -- ) |
| 219 | 238 |
&.wi-lightwide--verysmall { width: @input-wi-lightwide--verysmall; }
|
| 220 | 239 |
&.wi-wide--verysmall { width: @input-wi-wide--verysmall !important; }
|
| 221 | 240 |
//&.wi-wide--verysmall { width: 203px; }
|
| 241 |
|
|
| 222 | 242 |
} |
| 223 | 243 |
// Password (Standard size) // PENDENT: Standardgroesse ?? |
| 224 | 244 |
&[type="password"]{
|
| 225 | 245 |
//min-width: @input-wi-normal ; |
| 226 | 246 |
} |
| 247 |
|
|
| 227 | 248 |
// OBSOLETE // PENDENT: ggf. entfernen |
| 228 | 249 |
.fixed_width {
|
| 229 | 250 |
width: 250px; |
| ... | ... | |
| 461 | 482 |
|
| 462 | 483 |
|
| 463 | 484 |
input[type=text].emphasized {
|
| 464 |
word-wrap: break-word; |
|
| 465 |
word-break: break-all; |
|
| 466 |
height: auto; |
|
| 467 |
overflow: hidden ; |
|
| 485 |
word-wrap: break-word;
|
|
| 486 |
word-break: break-all;
|
|
| 487 |
height: auto;
|
|
| 488 |
overflow: hidden ;
|
|
| 468 | 489 |
} |
| 469 | 490 |
|
| 470 | 491 |
|
| ... | ... | |
| 486 | 507 |
|
| 487 | 508 |
td {
|
| 488 | 509 |
div.rowspan-table{
|
| 489 |
display: table-row ; |
|
| 490 |
float: left; |
|
| 491 |
|
|
| 510 |
display: table-row ;
|
|
| 511 |
float: left;
|
|
| 512 |
margin: 0 2.8em 0 0 ; |
|
| 492 | 513 |
div.label-n-value{
|
| 493 |
display: table-cell ; |
|
| 514 |
display: table-cell ;
|
|
| 494 | 515 |
vertical-align: middle; |
| 495 |
height: 1.6em !important ; // the cell have not the same height if they are made with DIVs |
|
| 516 |
height: 1.6em !important ; // the cell have not the same height if they are made with DIVs
|
|
| 496 | 517 |
|
| 497 | 518 |
float: left; |
| 498 |
padding: 0 2.0em 0 0 ; |
|
| 519 |
padding: 0 2.0em 0 0 ;
|
|
| 499 | 520 |
//overflow: hidden ; |
| 500 | 521 |
b{
|
| 501 |
font-weight: normal; |
|
| 502 |
padding: 0 0 0 0 ; |
|
| 522 |
font-weight: normal;
|
|
| 523 |
padding: 0 0 0 0 ;
|
|
| 503 | 524 |
} |
| 504 | 525 |
} |
| 505 | 526 |
} |
| ... | ... | |
| 512 | 533 |
// Tables with either Form Elements or Text in Cells |
| 513 | 534 |
// PENDENT: .data mit anderen Formular-Elementen zusammenfassen |
| 514 | 535 |
table td > span.data {
|
| 515 |
display: block; |
|
| 516 |
overflow: hidden ; |
|
| 517 |
font-size: @font-size-smaller ; |
|
| 518 |
border: 1px #dcdcdc solid; |
|
| 519 |
margin: 0 ; |
|
| 520 |
line-height: 120%; |
|
| 521 |
padding: 0.2em 0.28em 0.2em 0.2em !important; |
|
| 536 |
display: block; |
|
| 537 |
overflow: hidden ; |
|
| 538 |
height: (@font-size-smaller * 1.7); // 1.6em |
|
| 539 |
font-size: @font-size-smaller ; |
|
| 540 |
color: @t-cell-databox-text-color ; |
|
| 541 |
border: 1px @t-cell-databox-border-color solid; |
|
| 542 |
margin: 0 ; |
|
| 543 |
line-height: 120%; |
|
| 544 |
//padding: 0.2em 0.28em 0.2em @padding-databoxes-left !important; |
|
| 522 | 545 |
|
| 523 | 546 |
&::before{
|
| 524 | 547 |
//content: "" ; |
| ... | ... | |
| 560 | 583 |
// Additional |
| 561 | 584 |
// There are also some Checkboxes for "Select All" |
| 562 | 585 |
h3 {
|
| 563 |
|
|
| 586 |
padding: 0.2em 0 0.2em 0.0em; |
|
| 587 |
|
|
| 564 | 588 |
label{
|
| 565 |
float: right; |
|
| 589 |
//float: right; |
|
| 590 |
float: left; |
|
| 566 | 591 |
width: 88% ; |
| 567 | 592 |
font-size: @h3-size ; |
| 568 |
padding: 0 0 0.6em 0 ; |
|
| 593 |
padding: 0 0 0.6em 0.2em ;
|
|
| 569 | 594 |
line-height: 1.2em ; |
| 570 | 595 |
} |
| 571 | 596 |
} |
| 572 | 597 |
|
| 573 | 598 |
|
| 574 | 599 |
&>div{
|
| 575 |
clear: both; |
|
| 576 |
margin: 0 0 0.6em 0 ; |
|
| 577 |
padding: 0; |
|
| 578 |
display: block ; |
|
| 579 |
overflow: hidden ; |
|
| 600 |
clear: both;
|
|
| 601 |
margin: 0 0 0.6em 0 ;
|
|
| 602 |
padding: 0;
|
|
| 603 |
display: block ;
|
|
| 604 |
overflow: hidden ;
|
|
| 580 | 605 |
label{
|
| 581 |
float: left; |
|
| 582 |
width: 88% ; |
|
| 606 |
float: left;
|
|
| 607 |
width: 88% ;
|
|
| 583 | 608 |
} |
| 584 | 609 |
input[type="checkbox"], |
| 585 | 610 |
input[type="radio"]{
|
| 586 |
float: left; |
|
| 587 |
margin-right: 0.6em ; |
|
| 611 |
float: left;
|
|
| 612 |
margin-right: 0.6em ;
|
|
| 588 | 613 |
} |
| 589 | 614 |
} |
| 590 | 615 |
} |
| ... | ... | |
| 596 | 621 |
td.horizontal {
|
| 597 | 622 |
input[type="radio"], |
| 598 | 623 |
input[type="checkbox"]{
|
| 599 |
float: left !important; |
|
| 600 |
clear: none !important; |
|
| 601 |
width: auto; |
|
| 624 |
float: left !important;
|
|
| 625 |
clear: none !important;
|
|
| 626 |
width: auto;
|
|
| 602 | 627 |
} |
| 603 | 628 |
label{
|
| 604 |
width: auto !important; |
|
| 605 |
margin-right: 2.0em ; |
|
| 606 |
float: left !important; |
|
| 607 |
clear: none !important; |
|
| 629 |
width: auto !important;
|
|
| 630 |
margin-right: 2.0em ;
|
|
| 631 |
float: left !important;
|
|
| 632 |
clear: none !important;
|
|
| 608 | 633 |
} |
| 609 | 634 |
} |
| 610 | 635 |
|
| ... | ... | |
| 625 | 650 |
label{
|
| 626 | 651 |
display: inline-block; |
| 627 | 652 |
|
| 628 |
&:link, |
|
| 629 |
&:visited {
|
|
| 630 |
color: @gray ;
|
|
| 631 |
text-decoration: none ; |
|
| 632 |
} |
|
| 633 |
&:hover{
|
|
| 634 |
color: #777 ; |
|
| 635 |
text-decoration: underline; |
|
| 636 |
} |
|
| 653 |
// &:link,
|
|
| 654 |
// &:visited {
|
|
| 655 |
// color: @gray-standard ;
|
|
| 656 |
// text-decoration: none ;
|
|
| 657 |
// }
|
|
| 658 |
// &:hover{
|
|
| 659 |
// color: #777 ;
|
|
| 660 |
// text-decoration: underline;
|
|
| 661 |
// }
|
|
| 637 | 662 |
} |
| 638 | 663 |
} |
| 639 | 664 |
td{
|
| ... | ... | |
| 734 | 759 |
// -------------------------------------- |
| 735 | 760 |
|
| 736 | 761 |
.frame-header-quicksearch input::placeholder {
|
| 737 |
color: @gray-mediumdark ;
|
|
| 762 |
color: @gray-dark ; |
|
| 738 | 763 |
} |
| 739 | 764 |
|
| 740 | 765 |
#content input::placeholder {
|
| ... | ... | |
| 752 | 777 |
} |
| 753 | 778 |
input#vendor_id_name.ui-autocomplete-input, |
| 754 | 779 |
input#customer_id_name.ui-autocomplete-input {
|
| 755 |
&.wi-wide{ width: @input-wi-wide ; }
|
|
| 780 |
margin: 0 ; |
|
| 781 |
&.wi-wide{
|
|
| 782 |
width: @input-wi-wide ; |
|
| 783 |
} |
|
| 756 | 784 |
} |
| 757 | 785 |
|
| 758 | 786 |
// -------------------------------------- |
Auch abrufbar als: Unified diff
Erweiterung und Optimierung less und css fuer Design 4.0