|
// ----------------------------------------------------------------------------
|
|
//
|
|
// TABLES
|
|
//
|
|
// ----------------------------------------------------------------------------
|
|
// DESCRIPTION: for all kind of tables in #content
|
|
//
|
|
// CONTENTS:
|
|
// - MIXINS
|
|
// - TABLE
|
|
// - CELLS (TD & TH)
|
|
// - Data Format
|
|
// - Images within Cells
|
|
// - TD
|
|
// - TH
|
|
// - TR (Table Row)
|
|
// - THEAD
|
|
// - TBODY
|
|
// - TFOOT
|
|
// - CAPTION
|
|
// - HEADINGS (Print Style)
|
|
// - COLGROUP & COLS
|
|
// - Dimensions for Table Colums (COL)
|
|
// - TABLE LIST
|
|
// - TABLE PLAIN
|
|
// - TABLE HORIZONTAL
|
|
// - TABLE DIALOG
|
|
// - TABLE CLASS TEST
|
|
// - DIMENSIONS (Classes) FOR TABLES
|
|
// - LINKS
|
|
// - HEADINGS
|
|
// - SUBTOTALS
|
|
//
|
|
// - TABLES in Requirement Specs
|
|
// - TABLES with DIVS
|
|
// - LIST WITH PARAGRAPHS
|
|
// ----------------------------------------------------------------------------
|
|
|
|
|
|
// --------------------------------------
|
|
// TABLE
|
|
// --------------------------------------
|
|
|
|
table {
|
|
font-size: @font-size-base ;
|
|
table-layout: auto ;
|
|
border-spacing: 1px ;
|
|
|
|
|
|
// --------------------------------------
|
|
// CELLS (TD & TH)
|
|
// --------------------------------------
|
|
td,
|
|
th {
|
|
text-align: left ;
|
|
vertical-align: top ;
|
|
font-size: @font-size-smaller ;
|
|
font-weight: normal ;
|
|
|
|
|
|
// --------------
|
|
// Data format
|
|
//
|
|
&.right { text-align: right !important ; }
|
|
&.center { text-align: center !important ;
|
|
input { float: none !important ; }
|
|
}
|
|
&.numeric { text-align: right !important ; }
|
|
&.numeric-centered { text-align: center !important ; }
|
|
&.date { text-align: right !important ; }
|
|
// PENDENT: wo eingesetzt
|
|
&.button { text-align: center !important ; }
|
|
&.img { text-align: center !important ; }
|
|
&.top { vertical-align: top !important ; }
|
|
// see also div.longdesc in main.css
|
|
// PENDENT: Mixin und Variablen erstellen
|
|
&.long-desc,
|
|
&.long-description,
|
|
&.longdesc,
|
|
&.longdescription {
|
|
font-size: 80% ;
|
|
color: @t-cell-head-text ;
|
|
}
|
|
&.highlight { background-color: @t-row-zebra-bg-highlight ; }
|
|
// --------------
|
|
// Images within Cells
|
|
//
|
|
img {
|
|
display: inline ;
|
|
vertical-align: top ;
|
|
}
|
|
&+a img,
|
|
&+img { float: left ; }
|
|
&~a img,
|
|
&~img { float: right ; }
|
|
|
|
|
|
// --------------
|
|
// Description & labels within cells
|
|
//
|
|
div.description {
|
|
font-size: 90% ;
|
|
color: @t-cell-head-text ;
|
|
float: none ;
|
|
clear: both ;
|
|
}
|
|
& > input,
|
|
& > select {
|
|
& + div.description { margin-top: 0.4em ; }
|
|
}
|
|
|
|
span {
|
|
// simulates TH in horizontal tables
|
|
&.label {
|
|
display: block ;
|
|
padding: 0 0 0.5em 0 ;
|
|
color: @brand-data-label-color ;
|
|
}
|
|
&.below {
|
|
//clear: both ;
|
|
overflow: hidden ;
|
|
display: block ;
|
|
input {
|
|
margin: 0.6em 0 0 0 !important ;
|
|
&[type="checkbox"]{ padding: 0.6em 0.6em 0 0 ;}
|
|
}
|
|
}
|
|
&.above {
|
|
//clear: both ;
|
|
overflow: hidden ;
|
|
display: block ;
|
|
margin-bottom: 0.4em ;
|
|
padding: 0.3em 0.3em 0 0 !important ;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// --------------
|
|
// Form Element within Cells
|
|
//
|
|
input,
|
|
select {
|
|
//float: left ;
|
|
&.below {
|
|
display: block ;
|
|
clear: left ;
|
|
float: none ;
|
|
overflow: hidden ;
|
|
margin: 0.3em 0 0 0 !important ;
|
|
}
|
|
}
|
|
textarea {
|
|
margin: -0.14em -0.0em ;
|
|
}
|
|
|
|
}
|
|
// /th, td
|
|
|
|
|
|
// --------------
|
|
// TH (Table Header Cells)
|
|
//
|
|
th {
|
|
white-space: normal !important ;
|
|
}
|
|
|
|
// --------------
|
|
// TD (Table Data)
|
|
//
|
|
td {
|
|
color: @gray-mediumdark;
|
|
}
|
|
|
|
|
|
// --------------
|
|
// TR
|
|
//
|
|
tr {
|
|
// if header-cell is in the same row as a caption-header-cell (TH.CAPTION)
|
|
&.header-caption th {
|
|
vertical-align: bottom ;
|
|
}
|
|
&.separator {
|
|
// Standard separator is below
|
|
th, td {
|
|
padding-bottom: 3.0em ;
|
|
}
|
|
&.below {
|
|
th, td {
|
|
padding-bottom: 3.0em ;
|
|
}
|
|
}
|
|
&.above {
|
|
th, td {
|
|
padding-top : 3.0em ;
|
|
padding-bottom: 0 ; // override .separator
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// --------------------------------------
|
|
// THEAD
|
|
// --------------------------------------
|
|
thead {
|
|
th {
|
|
.mx-thead-th ; // Mixin
|
|
|
|
a {
|
|
img {
|
|
vertical-align: middle ;
|
|
padding: 0 ;
|
|
margin: 0 ;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// --------------------------------------
|
|
// TBODY
|
|
// --------------------------------------
|
|
|
|
tbody {
|
|
tr {
|
|
// common cells within TBODY
|
|
td { }
|
|
th { }
|
|
}
|
|
}
|
|
|
|
|
|
// --------------------------------------
|
|
// TFOOT
|
|
// --------------------------------------
|
|
tfoot {
|
|
tr {
|
|
th,
|
|
td {
|
|
vertical-align: middle ;
|
|
border-bottom: @table-border-color 2px solid ;
|
|
height: 1.8em ;
|
|
}
|
|
td {
|
|
font-weight: bold ;
|
|
color: @t-cell-foot-text ;
|
|
}
|
|
th {
|
|
font-weight: normal ;
|
|
color: @t-cell-foot-text ;
|
|
}
|
|
// if more than one row in TFOOT first row has other properties
|
|
&:first {
|
|
td,
|
|
th { border-top: @table-border-color 2px solid ; }
|
|
}
|
|
// sometimes last row of a table with some links or buttons under a designated row
|
|
&.blank {
|
|
border: none !important ;
|
|
th,
|
|
td {
|
|
border: none !important ;
|
|
}
|
|
}
|
|
} // /tr
|
|
// This is just for expecption (eg. form in price-rules)
|
|
// tfoot.blank
|
|
&.blank {
|
|
tr {
|
|
border: none !important ;
|
|
&:first-child {
|
|
th, td { border-top: 1px solid @table-border-color !important ; }
|
|
}
|
|
th,
|
|
td {
|
|
border: none !important ;
|
|
}
|
|
}
|
|
} // /tfoot.blank
|
|
} // /TFOOT
|
|
|
|
|
|
// --------------------------------------
|
|
// CAPTION
|
|
// --------------------------------------
|
|
|
|
// this must be placed here
|
|
// otherwise th.caption will be overridden if placed above
|
|
caption,
|
|
th.caption {
|
|
background-color: @table-caption-bg ;
|
|
white-space: nowrap ;
|
|
.mx-h3-caption ; // Mixin
|
|
// Addition with smaller font-size
|
|
small { font-size : @font-size-small ; }
|
|
margin: 0.1em 0 0.4em 0 ;
|
|
}
|
|
|
|
|
|
// --------------------------------------
|
|
// HEADINGS
|
|
// --------------------------------------
|
|
|
|
// alternativ Version (Print style)
|
|
tr.heading th {
|
|
font-size: 120% ;
|
|
border-top: 1px @table-border-color solid ;
|
|
}
|
|
|
|
|
|
// --------------------------------------
|
|
// COLGROUP & COLS
|
|
// --------------------------------------
|
|
|
|
colgroup {
|
|
|
|
// Table Columns
|
|
// only for background-color and width
|
|
// PENDENT: funktioniert Text-Ausrichtung?
|
|
col {
|
|
&.right { text-align: right ; }
|
|
&.center { text-align: center ; }
|
|
&.long-desc { font-size: 70% ; }
|
|
|
|
// --------------
|
|
// Width of Columns (Dimensions)
|
|
//
|
|
&.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 ) ; }
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// --------------------------------------
|
|
// 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 {
|
|
tr {
|
|
height: 2.2em ;
|
|
th {
|
|
.mx-thead-th ; // Mixin
|
|
&.nowrap { white-space: nowrap !important ; }
|
|
|
|
& > a {
|
|
display: block ;
|
|
//margin-top: -2px ;
|
|
&:link,
|
|
&:visited {
|
|
color: @t-cell-head-text-accent ;
|
|
text-decoration: none ;
|
|
}
|
|
&:hover {
|
|
color: @t-cell-head-text-accent ;
|
|
text-decoration: underline ;
|
|
}
|
|
&:active,
|
|
&:focus {
|
|
color: @t-cell-head-text-accent ;
|
|
text-decoration: underline ;
|
|
}
|
|
} // /a
|
|
} // /th
|
|
} // tr
|
|
&.links-condensed {
|
|
tr th a { display: inline ; }
|
|
}
|
|
} // /thead
|
|
|
|
tbody {
|
|
border-bottom: @table-border-color 1px solid ;
|
|
// zebra effect
|
|
tr:nth-child(odd){ background-color: @t-row-zebra-bg-odd ; }
|
|
tr:nth-child(even){ background-color: @t-row-zebra-bg-even ; }
|
|
// 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 ; }
|
|
tr.listrow_error { background-color: @brand-error-bg !important ; }
|
|
td {
|
|
color: @brand-darkest ;
|
|
}
|
|
} // /tbody
|
|
|
|
tfoot {
|
|
tr {
|
|
th,
|
|
td { }
|
|
}
|
|
} // /tfoot
|
|
|
|
} // /.tbl-list
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// TABLE PLAIN
|
|
// --------------------------------------
|
|
|
|
// Simple Table without Zebra Effect
|
|
|
|
&.tbl-list-plain,
|
|
&.tbl-plain {
|
|
caption,
|
|
th.caption { font-size: 80% !important ; }
|
|
|
|
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-right: 7px ;
|
|
padding-left: 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 HORIZONTAL
|
|
// --------------------------------------
|
|
|
|
&.tbl-horizontal {
|
|
|
|
th,
|
|
td {
|
|
background: none ;
|
|
padding-top: 0.3em ;
|
|
padding-right: 0.2em ;
|
|
padding-bottom: 0.2em ;
|
|
padding-left: 0.3em ;
|
|
|
|
// Adjust Form Elements in this table type
|
|
&>input[type="checkbox"],
|
|
&>input[type="radio"] {
|
|
margin: 0.2em 0.3em 0 0 !important ;
|
|
}
|
|
&>input,
|
|
&>select {
|
|
margin: -0.3em 1px 0 0 ;
|
|
// if there are further form elements within a table cell separated with a Linebreak BR
|
|
&.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
|
|
.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 ;
|
|
}
|
|
} // /td /th
|
|
|
|
th {
|
|
color: @brand-data-label-color ;
|
|
vertical-align: top ;
|
|
& > a {
|
|
&:link,
|
|
&:visited {
|
|
text-decoration: none ;
|
|
color: @t-cell-label-text-accent ;
|
|
}
|
|
&:hover,
|
|
&:active {
|
|
text-decoration: underline ;
|
|
}
|
|
}
|
|
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 0.3em ;
|
|
}
|
|
|
|
& > 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 0.2em ;
|
|
margin-top: -0.2em ;
|
|
display: block ;
|
|
}
|
|
&.label {
|
|
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-left: 0 !important ;
|
|
display: inline-block ;
|
|
}
|
|
&.project_picker {
|
|
margin: -0.3em 0 0 0 ;
|
|
}
|
|
// Switch form element
|
|
&.switch-form-element {
|
|
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
|
|
thead th {
|
|
padding: 0.5em 0.4em 0.5em 0.3em ;
|
|
font-weight: bold ;
|
|
color: @t-cell-head-text ;
|
|
border: none ;
|
|
}
|
|
|
|
|
|
// Zebra effect
|
|
// PENDENT: Klasse .zebra wahrscheinlich kaum eingsetzt
|
|
&.zebra {
|
|
tbody {
|
|
tr:nth-child(odd){
|
|
background-color: @gray-lighter ;
|
|
th { background-color: #fff ; }
|
|
}
|
|
tr:nth-child(even){
|
|
background-color: @gray-verylight ;
|
|
th { background-color: #fff ; }
|
|
}
|
|
}
|
|
} // /.zebra
|
|
|
|
// checkered (bordered) table
|
|
&.checkered {
|
|
border-collapse: collapse ;
|
|
tbody {
|
|
tr {
|
|
background-color: #F3F3F3 ;
|
|
//th { background-color: #fff ; }
|
|
td, th {
|
|
border-color: @table-border-color ;
|
|
border-width: 1px ;
|
|
border-style: solid ;
|
|
padding: 0.3em 0.6em ;
|
|
}
|
|
}
|
|
}
|
|
} // /.zebra
|
|
|
|
} // /.tbl-horizontal
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// STANDARD KIVITENDO TABLES
|
|
// --------------------------------------
|
|
&.tbl-horizontal,
|
|
&.tbl-plain,
|
|
&.tbl-list {
|
|
margin-bottom: 0.6em ;
|
|
border-collapse: collapse ;
|
|
border: none ;
|
|
|
|
tr td {
|
|
&>span {
|
|
padding: 0.3em 0.3em 0.6em 0.3em ;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.tbl-horizontal.expanded {
|
|
th.caption { padding-top: 1.2em ; padding-bottom: 0.6em ; }
|
|
}
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// 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 ;
|
|
}
|
|
|
|
|
|
// --------------------------------------
|
|
// DIMENSIONS (Classes) FOR TABLES
|
|
// --------------------------------------
|
|
|
|
&.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 ;
|
|
}
|
|
}
|
|
|
|
|
|
&.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 ; }
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// LINKS (within TD & TH)
|
|
// --------------------------------------
|
|
|
|
td > a,
|
|
th > a {
|
|
display: block ;
|
|
}
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// HEADINGS (within TD & TH)
|
|
// --------------------------------------
|
|
|
|
td,
|
|
th {
|
|
h3,
|
|
h4 {
|
|
margin: 0 !important ;
|
|
padding: 0.8em 0 0.2em 0 !important ;
|
|
}
|
|
h4 {
|
|
//font-weight: normal ;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// SUB-TOTALS
|
|
// --------------------------------------
|
|
|
|
tr {
|
|
|
|
// PENDENT: ggf. OBSOLETE
|
|
&.total-sub {
|
|
height: 2.0em ;
|
|
|
|
td {
|
|
border-top: 1px solid @table-border-color ;
|
|
border-bottom: 2px solid @table-border-color ;
|
|
font-weight: bold ;
|
|
color: @t-cell-text-color ;
|
|
}
|
|
}
|
|
|
|
} // /tr
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// TABLE CLASS TEST
|
|
// --------------------------------------
|
|
// Use this class for reviewing your Table HTML
|
|
|
|
&.test,
|
|
&.test-plain {
|
|
//border: 1px @table-border-color solid ;
|
|
//background-color: #BFD2AD ;
|
|
|
|
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-mediumdark 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-small ; }
|
|
&.wi-small-mediumsmall { width: @tcol-wi-small-mediumsmall ; }
|
|
&.wi-small-normal { width: @tcol-wi-small-normal ; }
|
|
&.wi-small-lightwide { width: @tcol-wi-small-lightwide ; }
|
|
// PENDENT: noch genauer anschauen, sollte eigentlich nur für horizontale Tabellen vorgesehen sein
|
|
&.wi-small-wide { width: ( @tcol-wi-small-wide ) ; }
|
|
//&.wi-small-wide { width: 460px ; }
|
|
&.wi-small-wider { width: @tcol-wi-small-wider ; }
|
|
&.wi-small-verywide { width: @tcol-wi-small-verywide ; }
|
|
|
|
&.wi-mediumsmall-small { width: @tcol-wi-mediumsmall-lightwide ; }
|
|
&.wi-mediumsmall-mediumsmall { width: @tcol-wi-mediumsmall-mediumsmall ; }
|
|
&.wi-mediumsmall-normal { width: @tcol-wi-mediumsmall-normal ; }
|
|
&.wi-mediumsmall-lightwide { width: @tcol-wi-mediumsmall-lightwide ; }
|
|
&.wi-mediumsmall-wide { width: @tcol-wi-mediumsmall-wide ; }
|
|
&.wi-mediumsmall-wider { width: @tcol-wi-mediumsmall-wider ; }
|
|
&.wi-mediumsmall-verywide { width: @tcol-wi-mediumsmall-verywide ; }
|
|
|
|
&.wi-normal-small { width: @tcol-wi-normal-small ; }
|
|
&.wi-normal-mediumsmall { width: @tcol-wi-normal-mediumsmall ; }
|
|
&.wi-normal-normal { width: @tcol-wi-normal-normal ; }
|
|
&.wi-normal-lightwide { width: @tcol-wi-normal-lightwide ; }
|
|
&.wi-normal-wide { width: @tcol-wi-normal-wide ; }
|
|
&.wi-normal-wider { width: @tcol-wi-normal-wider ; }
|
|
&.wi-normal-verywide { width: @tcol-wi-normal-verywide ; }
|
|
|
|
&.wi-lightwide-small { width: @tcol-wi-lightwide-small ; }
|
|
&.wi-lightwide-mediumsmall { width: @tcol-wi-lightwide-mediumsmall ; }
|
|
&.wi-lightwide-normal { width: @tcol-wi-lightwide-normal ; }
|
|
&.wi-lightwide-lightwide { width: @tcol-wi-lightwide-lightwide ; }
|
|
&.wi-lightwide-wide { width: @tcol-wi-lightwide-wide ; }
|
|
&.wi-lightwide-wider { width: @tcol-wi-lightwide-wider ; }
|
|
&.wi-lightwide-verywide { width: @tcol-wi-lightwide-verywide ; }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// LIST-TABLES in Wrappers
|
|
// --------------------------------------
|
|
|
|
div.wrapper,
|
|
div.cols {
|
|
table.tbl-list tr {
|
|
border-left: 1px solid @table-border-color ;
|
|
border-right: 1px solid @table-border-color ;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
span.sort {
|
|
display: inline-block ;
|
|
height: 100% ;
|
|
}
|
|
span.sort_symbol {
|
|
display: inline-block ;
|
|
width: 10px ;
|
|
padding: 0 ;
|
|
margin: 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 ;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// --------------------------------------
|
|
// SPECIFIX TABLES
|
|
// --------------------------------------
|
|
|
|
table#report_table_id.tbl-list {
|
|
& > tbody > tr > td { vertical-align: top ; }
|
|
}
|
|
|
|
|
|
|