blob: 1a1028a97748b0522188b4ee822c85cbee7dd8bc [file] [log] [blame]
////
/// @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; */
}