projekt kivitendo

&.addition { margin-top: 0.3em !important ; }

}

// in some cases labels can be placed within the same cell as the form element

// best is to have it above the element

// PENDENT: plazierung in less-dateien, ggf. ueberfluessig

.label-above {

display: block ;

clear: both ;

overflow: hidden ;

margin-top: -0.5em ; // pendent: ansehen

//height: 1.8em ; // pendent: besser loesen, gefaellt mir nicht

}

&.single-col {

padding-top: 0 ;

padding-bottom: 0 ;

}

// form labels within table cells

//label {

//color: @t-cell-th-text-color ;

//cursor: pointer ;

//padding-top: 0.3em;

//}

} // /td /th

th {

color: @t-cell-th-text-color ;

//vertical-align: top ;

h4{

margin: 0 ;

padding: 0 ;

}

} // /th

td {

// 2nd to x column with plain data

// no form elements inside the cell

//color: @t-cell-data-text;

&.data {

//padding: 0.4363em 0.3em 0.4363em @padding-databoxes-left ;

}

& > span {

padding: 0 ;

margin: 0 ;

&.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 ) ; }

&.wi-wider { width: (@input-wi-wider ) !important ; }

&.wi-verywide { width: (@input-wi-verywide ) ; }

&.data,

&.plain-data {

//padding: 0.1em 0.3em 0.1em @padding-databoxes-left ;

margin-top: -0.2em ;

display: block ;

}

&.label {

color: @t-cell-th-text-color ;

padding: 0 0.3em 0.5em 0 !important ;

//display: block ;

}

&.button-inline {

margin: 0 !important ;

padding: 0.3em 0 0 0 ;

clear: both ;

display: inline-block ;

vertical-align: middle ;

input.button,

input[type="button"],

button,

a.button {

float: left ;

margin: 0 0.3em 0 0 !important ;

}

}

// special select-element

&.customer_vendor_picker {

padding: 0 !important ;

margin: 0 !important ;

display: inline-block ;

}

&.project_picker {

margin: -0.3em 0 0 0 ;

}

// area input element

&.area-input {

padding: 0 !important ;

margin: -0.3em 1px 0 0 !important ;

}

} // / > span

&>div.data { padding: 0.1363em 0 ; }

// pendent: braucht es das?

// pendent: span nicht td

.plus1 {

display: inline-block ;

padding: 0 ;

}

& > .condensed {

padding: 0 !important ;

margin: 0 ;

input, select {

margin-top: 0.2em ;

}

}

&>span.wi-small-wide { margin: 0 24px 0 0 ; display: block ; }

}

// exception: thead in horizontal table

// Caption!

thead th {

// padding: 0.5em 0.4em 0.5em 0.3em ;

// font-weight: normal ;

// font-size: @h3-size ;

// color: @base-heading-color ;

.mx-h3-caption ;

border: none ;

}

// zebra effect

// pendent: klasse .zebra hier wahrscheinlich kaum eingsetzt

&.zebra {

tbody {

tr:nth-child(odd){

background-color: @t-row-zebra-bg-odd ;

th { background-color: @t-row-zebra-bg-odd ; }

}

tr:nth-child(even){

background-color: @t-row-zebra-bg-even ;

th { background-color: @t-row-zebra-bg-even ; }

}

}

} // /.zebra

// checkered (bordered) table

&.checkered {

border-collapse: collapse ;

tbody {

tr {

background-color: @table-bg-accent ;

//th { background-color: #fff ; }

td, th {

border-color: @table-border-color ;

border-width: 1px ;

border-style: solid ;

padding: 0.3em 0.6em ;

}

}

} // /tbody

} // /.checkered

//PENDENT: ueberpruefen

&.expanded {

th.caption { padding-top: 1.2em ; padding-bottom: 0.6em ; }

}

} // /.tbl-horizontal

//--------------------------------------

// LIST TABLES

//--------------------------------------

&.tbl-plain,

&.tbl-list,

&.tbl-list-plain {

tbody td a {

display: inline-block !important ;

}

}

//--------------------------------------

// TABLE LIST (VERTICAL)

//--------------------------------------

// table with zebra effect

// this table has at least a thead and a tbody

// optional a tfoot for totals

&.tbl-list {

border-spacing: 1px ;

border-collapse: collapse ;

margin: 0 0 1.0em 0 ;

& > caption { margin: 0.1em 0 0.0em 0 ; }

td,

th {

padding: 0.2em 0.4em ;

white-space: normal ;

vertical-align: middle ;

}

th { }

td { }

// space left from window border

& > thead > tr th:first-child,

& > tbody > tr th:first-child,

& > tfoot > tr td:first-child {

padding-left: 0.8em !important ;

}

thead {

display: table-header-group;

tr {

height: 2.2em ;

th {

.mx-thead-th ; // mixin

&.nowrap { white-space: nowrap !important ; }

& > a {

display: block ;

&:link,

&:visited {

color: @t-cell-head-text-accent ;

text-decoration: underline ;

}

&:hover {

color: @t-cell-head-text-accent ;

text-decoration: underline ;

}

&:active,

&:focus {

color: @t-cell-head-text-accent ;

text-decoration: underline ;

}

} // /a

label {

color: @t-cell-head-text-accent ;

//text-decoration: none ;

&:hover {

//color: @t-cell-head-text-accent ;

text-decoration: underline ;

}

}

} // /th

} // tr

&.links-condensed {

tr th a { display: inline ; }

}

} // /thead

tbody {

border-bottom: @table-border-color 1px solid ;

display: table-row-group;

// zebra effect

tr:nth-child(odd) { background-color: @t-row-zebra-bg-odd ; }

tr:nth-child(even) { background-color: @t-row-zebra-bg-even ; }

tr:nth-child(odd).listrow_ok { background-color: @base-ok-bg ; }

tr:nth-child(even).listrow_ok { background-color: @base-ok-bg-lighter ; }

tr:nth-child(odd).listrow_error { background-color: @base-error-bg ; }

tr:nth-child(even).listrow_error { background-color: @base-error-bg-lighter ; }

// using a darker color variant here because the light one is almost invisible

tr:nth-child(odd).listrow_info { background-color: @base-info-bg-darker ; }

tr:nth-child(even).listrow_info { background-color: @base-info-bg-dark ; }

tr:nth-child(odd).listrow_warning { background-color: @base-warning-bg ; }

tr:nth-child(even).listrow_warning { background-color: @base-warning-bg-lighter ; }

// pendent: funktioniert nicht

& > tr:last-child > td {

border-bottom: 1px @table-border-color solid !important ;

//padding-left: 0.8em !important;

}

tr:hover { background-color: @t-row-zebra-bg-hover ; }

// zebra effect using manually set classes (overrides automatic from above)

tr.listrow0 { background-color: @t-row-zebra-bg-odd !important ; }

tr.listrow1 { background-color: @t-row-zebra-bg-even !important ; }

tr.listrow_ok0 { background-color: @base-ok-bg !important ; }

tr.listrow_ok1 { background-color: @base-ok-bg-lighter !important ; }

tr.listrow_error0 { background-color: @base-error-bg !important ; }

tr.listrow_error1 { background-color: @base-error-bg-lighter !important ; }

// using a darker color variant here because the light one is almost invisible

tr.listrow_info0 { background-color: @base-info-bg-darker !important ; }

tr.listrow_info1 { background-color: @base-info-bg-dark !important ; }

tr.listrow_warning0 { background-color: @base-warning-bg !important ; }

tr.listrow_warning1 { background-color: @base-warning-bg-lighter !important ; }

td, th {

color: @table-list-zebra-text-color ;

}

} // /tbody

tfoot {

display: table-footer-group;

tr {

th,

td { }

}

} // /tfoot

} // /.tbl-list

//--------------------------------------

// TABLE PLAIN

//--------------------------------------

// simple table without zebra effect

&.tbl-list-plain,

&.tbl-plain {

caption,

th.caption {

font-size: 120% !important ;

margin: 0;

padding: 0.6em 0 0.2em 0;

}

thead,

tbody {

th,

td { padding: 3px 0.3em 4px 0.3em !important ; }

}

thead {

th {

.mx-thead-th ; // mixin

}

}

tr {

th,

td { padding: 0.3em inherit 0.3em 0.3em ; }

td { }

th { }

}

// kompakt

&.condensed {

caption { padding-left: 0 ; }

td, th {

padding: 0.1em 7px 0.1em 1px ;

}

}

// liniert

&.lined {

tr {

border-bottom: 1px @table-border-color solid ;

& > th,

& > th {

vertical-align: middle !important ;

}

}

}

} // /.tbl-plain

&.tbl-list-plain {

thead th {

border-top: 1px @table-border-color solid !important ;

border-bottom: 1px @table-border-color solid ;

font-weight: bold ;

}

tbody {

td,

th { border-bottom: 1px @table-border-color solid ; }

}

}// /.tbl-list-plain

//--------------------------------------

// TABLE DIALOG

//--------------------------------------

// table within div-dialogs

&.tbl-dialog {

th,

td {

background-color: @gray-verylight ;

}

th {

color: @t-cell-head-text ;

font-size: @font-size-base ;

vertical-align: top ;

}

}

//--------------------------------------

// CLEAR-TABLE WITH NO FLOATING

//--------------------------------------

&.clear {

float: none ;

clear: both ;

}

//--------------------------------------

// TABLE CLASS TEST

//--------------------------------------

// use this class for reviewing your table html

&.test,

&.test-plain {

th {

background-color: #b3b3b3 ;

color: @t-cell-text-color ;

font-weight: normal ;

&.caption {

background-color: #b3b3b3 ;

}

}

td {

background-color: #cfcdd2 ;

&.longdesc,

&.longdescription,

&.long-desc,

&.long-description {

border: 1px solid green !important ;

}

}

table {

border: 1px #0000ff solid ;

border-collapse: collapse ;

td, th {

border: 1px #c20d18 dotted !important ;

}

}

} // /.test

&.test {

//border: 1px @table-border-color solid ;

//background-color: #bfd2ad ;

th {

border: 1px @gray-dark solid !important ;

background-color: #b3b3b3 ;

color: #000 ;

font-weight: normal ;

&.caption {

background-color: @table-caption-bg ;

//border: 1px solid red !important ;

}

}

td {

border: 1px #000 solid ;

background-color: #cfcdd2 ;

&.longdesc,

&.longdescription,

&.long-desc,

&.long-description {

border: 1px solid green !important ;

}

}

table {

border: 2px #0000ff solid ;

border-collapse: collapse ;

td, th {

border: 1px #c20d18 dotted !important ;

}

}

} // /.test

}

// /table

//--------------------------------------

// TABLE & COLS DIMENSIONS

//--------------------------------------

table,

table colgroup col {

&.wi-smallest { width: @tcol-wi-smallest ; }

&.wi-verysmall { width: @tcol-wi-verysmall ; }

&.wi-small { width: @tcol-wi-small ; }

&.wi-mediumsmall { width: @tcol-wi-mediumsmall ; }

&.wi-normal { width: @tcol-wi-normal ; }

&.wi-lightwide { width: @tcol-wi-lightwide ; }

&.wi-wide { width: @tcol-wi-wide ; }

&.wi-wider { width: @tcol-wi-wider ; }

&.wi-verywide { width: @tcol-wi-verywide ; }

&.wi-small-small { width: @tcol-wi-small + @tcol-wi-small ; }

&.wi-small-mediumsmall { width: @tcol-wi-small + @tcol-wi-mediumsmall ; }

&.wi-small-normal { width: @tcol-wi-small + @tcol-wi-normal ; }

&.wi-small-lightwide { width: @tcol-wi-small + @tcol-wi-lightwide ; }

// pendent: noch genauer anschauen, sollte eigentlich nur für horizontale tabellen vorgesehen sein

&.wi-small-wide { width: @tcol-wi-small + @tcol-wi-wide + ( @diff-input-select ) ; }

//&.wi-small-wide { width: 460px ; }

&.wi-small-wider { width: @tcol-wi-small + @tcol-wi-wider ; }

&.wi-small-verywide { width: @tcol-wi-small + @tcol-wi-verywide ; }

&.wi-mediumsmall-small { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }

&.wi-mediumsmall-mediumsmall { width: @tcol-wi-mediumsmall + @tcol-wi-mediumsmall ; }

&.wi-mediumsmall-normal { width: @tcol-wi-mediumsmall + @tcol-wi-normal ; }

&.wi-mediumsmall-lightwide { width: @tcol-wi-mediumsmall + @tcol-wi-lightwide ; }

&.wi-mediumsmall-wide { width: @tcol-wi-mediumsmall + @tcol-wi-wide ; }

&.wi-mediumsmall-wider { width: @tcol-wi-mediumsmall + @tcol-wi-wider ; }

&.wi-mediumsmall-verywide { width: @tcol-wi-mediumsmall + @tcol-wi-verywide ; }

&.wi-normal-small { width: @tcol-wi-normal + @tcol-wi-small ; }

&.wi-normal-mediumsmall { width: @tcol-wi-normal + @tcol-wi-mediumsmall ; }

&.wi-normal-normal { width: @tcol-wi-normal + @tcol-wi-normal ; }

&.wi-normal-lightwide { width: @tcol-wi-normal + @tcol-wi-lightwide ; }

&.wi-normal-wide { width: @tcol-wi-normal + @tcol-wi-wide ; }

&.wi-normal-wider { width: @tcol-wi-normal + @tcol-wi-wider ; }

&.wi-normal-verywide { width: @tcol-wi-normal + @tcol-wi-verywide ; }

&.wi-lightwide-small { width: @tcol-wi-lightwide + @tcol-wi-small ; }

&.wi-lightwide-mediumsmall { width: @tcol-wi-lightwide + @tcol-wi-mediumsmall ; }

&.wi-lightwide-normal { width: @tcol-wi-lightwide + @tcol-wi-normal ; }

&.wi-lightwide-lightwide { width: @tcol-wi-lightwide + @tcol-wi-lightwide ; }

&.wi-lightwide-wide { width: @tcol-wi-lightwide + @tcol-wi-wide ; }

&.wi-lightwide-wider { width: @tcol-wi-lightwide + @tcol-wi-wider ; }

&.wi-lightwide-verywide { width: @tcol-wi-lightwide + @tcol-wi-verywide ; }

}

table {

&.width-full,

&.full-width,

&.wi-full { width: 100% ; }

// moderate width with padding on the right side

&.width-moderate,

&.moderate-width,

&.wi-moderate {

width: auto ;

td,

th {

// PENDENT: vielleicht in pixeln angeben, statt in ems (siehe tbl-plain)

padding-left: 0.6em ;

padding-right: 1.2em ;

}

}

}

//--------------------------------------

// LIST-TABLES IN WRAPPERS

//--------------------------------------

// creates a border on the left & right side of the table

div.wrapper,

div.cols {

table.tbl-list tr {

border-left: 1px solid @table-border-color ;

border-right: 1px solid @table-border-color ;

}

}

//--------------------------------------

// LIST-TABLES NOT IN WRAPPERS

//--------------------------------------

#content .ui-tabs-panel > table.tbl-list caption {

//margin-left: @margin-from-panel-left - 0.2em ;

margin-left: 0.3em ;

}

#content {

.ui-tabs-panel > table.tbl-list caption {

//margin-left: @margin-from-panel-left - 0.2em ;

margin-left: 0.3em ;

}

& > table.tbl-plain,

& > table.tbl-list-plain {

margin-top: 1.0em ;

}

}

// --------------------------------------

// SORT SYMBOLS

// --------------------------------------

span.sort {

display: inline-block ;

height: 100% ;

vertical-align: top;

padding-top: 6px;

}

span.sort_symbol {

display: inline-block ;

width: 10px ;

padding: 0 ;

margin: 0 10px 0 0 ;

a {

display: block ;

width: 8px ;

height: 8px ;

font-size: 7pt ;

padding: 0 0 3px 0 ;

margin: 0 ;

text-align: center ;

clear: both ;

float: none ;

vertical-align: top ;

&.ascending {

border-top: 1px @table-border-color solid ;

border-right: 1px @table-border-color solid ;

border-left: 1px @table-border-color solid ;

}

&.descending {

border-right: 1px @table-border-color solid ;

border-bottom: 1px @table-border-color solid ;

border-left: 1px @table-border-color solid ;

}

&.active {

//background-color: #000000 ;

color: #ffffff ;

}

&:link,

&:visited{

color: @base-light ;

}

}

}

//--------------------------------------

// SPECIFIX TABLES (#REPORT_TABLE)

//--------------------------------------

// Ueberpruefen

table#report_table_id.tbl-list {

& > tbody > tr > td { vertical-align: top ; }

}

// Benutzerdefinierte Tabellen-Angaben

// Diese uebersteuern alle Anweisungen aus tables.less

// Es dürfen nur Tabellen mit Zusatzklassen oder mit IDs uebersteuert werden.

// Uebersteuern Sie nur wenige, bestehende Elemente, um ein einheitliches

// Design zu gewaehrleisten

// Diese Datei wird am Schluss von tables.less includiert.

table{

// Zusatzklasse zur Tabelle (Beispiel)

// Betreff: xyz

// Autor: hanspeter.schlaepfer@revamp-it.ch

&.meine-tabellen-klasse {

}

// Tabelle mit spezieller ID (Beispiel)

// Betreff: xyz

// Autor: hanspeter.schlaepfer@revamp-it.ch

&#meine-spezielle-tabelle {

}

// Tabelle mit Konten-Uebersicht (Kontoplan)

// Betreff: Kontoplan

// Autor: hanspeter.schlaepfer@revamp-it.ch

&#konten-plan {

tbody tr{

td:first-child {

text-align: right !important;

}

&.heading td {

font-size: @font-size-large;

border-top: 1px #999 solid;

}

}

tr:first-child {

&.heading td {

border: none;

}

}

}

// PENDENT: genauer anschauen

&#eurtable {

border-collapse: collapse;

width: 100%;

}

tr.category {

// background set via jquery

}

tr.chart {

border: 0;

}

td.chartname {

padding-left: 50px;

}

tr.chartrow {

font-size: 75%;

}

.guv_row_background {

background:#f0f0f0;

}

.tr_error {

background-color: #ffc9c9;

}

}

Powered by Redmine © 2006-2025 Jean-Philippe Lang