| //// |
| /// @group layout/table |
| //// |
| |
| /// Styling for table components. |
| @mixin os-table { |
| .v-table { |
| .v-label>img { |
| @if $os-img-size-override == true { |
| border-radius: $v-unit-size *0.5; |
| max-height: $v-unit-size; |
| } |
| } |
| img.v-icon { |
| @if $os-img-size-override == true { |
| max-height: $v-unit-size; |
| } |
| } |
| // 0 2px 3px rgba(0, 0, 0, 0.15) |
| } |
| |
| .v-table-table { |
| //color: valo-font-color($v-app-background-color); |
| td { |
| border-top: 0px; |
| } |
| } |
| |
| .v-table-body-wrapper { |
| border: 0px; |
| } |
| .v-table-body { |
| background-color: $os-color-contrast; |
| } |
| |
| .v-table-cell-wrapper > .v-widget { |
| margin: inherit; // affects row height |
| } |
| |
| .v-table-header { |
| font-size: $v-font-size; |
| |
| .v-icon { |
| display: none; |
| } |
| } |
| |
| .v-table-header-wrap { |
| border: 0px; |
| //background-image: none !important; |
| //background-color: $v-app-background-color; |
| //color: valo-font-color($v-app-background-color); |
| font-weight: bold; |
| border-top: $v-border; |
| border-bottom: $v-border; |
| |
| /* .v-table-column-selector { */ |
| /* border: 0px; */ |
| /* width: auto !important; */ |
| /* right: 1px; */ |
| |
| /* @include os-icon-font($content: '\f0c9', */ |
| /* $float: right); */ |
| /* } */ |
| } |
| .v-align-right > .v-table-cell-wrapper { |
| text-align: right !important; |
| } |
| |
| .v-align-center >.v-table-cell-wrapper { |
| text-align: center !important; |
| } |
| |
| .v-align-left > .v-table-cell-wrapper { |
| text-align: left !important; |
| } |
| |
| [class*="rowheader"] { |
| background-color: rgba($v-focus-color, 0.1); |
| } |
| |
| /* FILTER */ |
| .filters-wrap { |
| overflow: hidden; |
| background-color: $os-textfield-shade; |
| height: $v-unit-size; |
| div { |
| height: $v-unit-size; |
| } |
| } |
| |
| .filters-panel { |
| width: 90000px; |
| overflow: hidden; |
| line-height: $v-line-height; |
| color: valo-font-color($os-light-contrast); |
| font-style: italic; |
| |
| > div, > span, > input { |
| float: left !important; |
| } |
| |
| .v.label, .filterplaceholder { |
| height: $v-unit-size - first($v-border); //first list element |
| border-bottom: $v-border; |
| } |
| |
| .v-textfield { |
| @include os-textfield-filterspanel; |
| } |
| |
| .datefilterpopup, .numberfilterpopup { |
| > .v-button { |
| @include os-button-filterspanel; |
| } |
| } |
| } |
| } |
| |
| |
| |
| |
| /// @param {number} $header-footer-height 0 if no header or footer |
| @mixin os-table-mod($height-mod: 0, |
| $width-mod: 0, |
| $has-caption: 0, |
| $header-footer-height: 0, |
| $layout-level: 0, |
| $modify: 0, |
| $external-display: 0) |
| { |
| @if $external-display == 1 { |
| $field-width: $cash-display-field-width; |
| $field-height: $cash-display-field-height; |
| $zoom-factor: $os-cash-display-zoom-factor; |
| } |
| @else { |
| $field-width: $cash-field-width; |
| $field-height: $cash-field-height; |
| $zoom-factor: $os-cash-zoom-factor; |
| } |
| |
| @if $width-mod > 0 { |
| /// adds or removes one button-width to table-width for more flexibility |
| @if $modify == 1 { |
| $modify: $field-width/2 + $half-spacing ; |
| } |
| @if $modify == -1 { |
| $modify: ($field-width/2 + make_even($v-layout-spacing-vertical * 1.5) )* -1; |
| } |
| |
| .v-table-body-wrapper.v-scrollable, .v-table-header-wrap { |
| width: $modify; |
| width: $width-mod * (($field-width * 1.5) + ($v-layout-spacing-horizontal * ($width-mod * 0.5))) + $modify !important; |
| } |
| &.v-table.v-widget { |
| /* table: needed for proper scrollbar display when width is fixed */ |
| width: auto !important; |
| /// overlapping scrollbar workaround (unused) |
| .v-table-table tr > .v-table-cell-content:last-child >.v-table-cell-wrapper { |
| /* right: 0px !important; */ |
| } |
| } |
| } |
| |
| /// Borders expand table height and need to be subtracted. Currently one border in table header and one in table body. |
| /// @todo Did I cover all borders ($os-bordered versions)? |
| @if $height-mod > 0 and $layout-level == 0 { |
| @if $has-caption == 1 { |
| .v-table-body-wrapper.v-scrollable { |
| /* some number checks |
| height: $v-layout-spacing-vertical; |
| height: $half-spacing; |
| height: $cash-button-base-height; |
| height: make_even($v-layout-spacing-vertical); |
| height: $cash-field-height; |
| height: $v-unit-size * $os-cash-zoom-factor; |
| height: ($header-footer-height); |
| height: (($height-mod - 1) * $v-layout-spacing-vertical); |
| height: 2*first-number($v-border); |
| */ |
| height: $height-mod * $field-height - ($v-unit-size * $zoom-factor) - ($header-footer-height) + (($height-mod - 1) * $v-layout-spacing-vertical) - 2*first-number($v-border) !important; |
| } |
| } |
| @else { |
| .v-table-body-wrapper.v-scrollable { |
| height: $height-mod * $field-height - ($header-footer-height) + (($height-mod - 1) * $v-layout-spacing-vertical) - 2*first-number($v-border) !important; |
| overflow-y: auto !important; |
| } |
| .v-table-body-wrapper.v-scrollable > div { |
| |
| } |
| } |
| &.v-table.v-widget { |
| /* table: needed for proper scrollbar display when height is fixed */ |
| height: auto !important; |
| |
| /// overlapping scrollbar workaround |
| .v-table-table tbody { |
| } |
| /* .v-table-table tr > .v-table-cell-content:last-child >.v-table-cell-wrapper { */ |
| /* position: relative; */ |
| /* right: 20px; scrollbar width */ |
| /* } */ |
| } |
| } |
| |
| @if $height-mod > 0 and $layout-level == 1 { |
| height: $height-mod * $field-height + (($height-mod - 1) * $v-layout-spacing-vertical) !important; |
| // 2 * 266 - (64) + (1 * 10) |
| |
| .v-table-body-wrapper, .v-table-body-wrapper >div { |
| height: auto !Important; |
| } |
| } |
| } |
| |
| @mixin os-row-mod($rows-in-one: 1, $font-adjust: 1) { |
| /* NEW!! */ |
| $bigrow-factor: $rows-in-one; |
| $bigrow-font: $font-adjust * 0.8; |
| @if $bigrow-factor <= 1 { $bigrow-font: $font-adjust; } |
| |
| height: floor($v-unit-size * $bigrow-factor); |
| font-size: $v-font-size * $font-size-adjustment * $bigrow-font; |
| |
| |
| /* OLD!! */ |
| /* $bigrow-factor: $rows-in-one; */ |
| /* $bigrow-font: $rows-in-one * 0.8; */ |
| /* @if $bigrow-factor <= 1 { $bigrow-font: $rows-in-one; } */ |
| |
| /* height: floor($v-unit-size * $bigrow-factor); */ |
| /* font-size: $v-font-size * $font-size-adjustment * $bigrow-font; */ |
| } |