vaadin-framework/themes/src/main/themes/VAADIN/themes/valo/components/_table.scss

/**
 *
 * @group table
 */
$v-table-border-width: first-number($v-border) !default;

/**
 *
 * @group table
 */
$v-table-row-height: $v-unit-size !default;
$v-table-body-row-height: round($v-table-row-height + $v-table-border-width) !default;

/**
 *
 * @group table
 */
$v-table-border-color: null !default;

/**
 *
 * @group table
 */
$v-table-border-radius: 0 !default;

/**
 *
 * @group table
 */
$v-table-cell-padding-horizontal: round($v-unit-size/3) !default;

/**
 *
 * @group table
 */
$v-table-resizer-width: round($v-unit-size/4.5) !default;

/**
 *
 * @group table
 */
$v-table-sort-indicator-width: round($v-unit-size/2) !default;

/**
 *
 * @group table
 */
$v-table-header-font-size: round($v-font-size * 0.86) !default;

/**
 *
 * @group table
 */
$v-table-background-color: null !default;



/**
 *
 *
 * @param {string} $primary-stylename (v-table) -
 *
 * @group table
 */
@mixin valo-table-global ($primary-stylename: v-table) {

  .#{$primary-stylename}-header table,
  .#{$primary-stylename}-footer table,
  .#{$primary-stylename}-table {
    border-spacing: 0;
    border-collapse: separate;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: $v-line-height;
  }

  .#{$primary-stylename}-resizer,
  .#{$primary-stylename}-sort-indicator {
    float: right;
  }

  .#{$primary-stylename}-caption-container-align-center {
    text-align: center;
  }

  .#{$primary-stylename}-caption-container-align-right {
    text-align: right;
  }

  .#{$primary-stylename}-header td,
  .#{$primary-stylename}-footer td,
  .#{$primary-stylename}-cell-content {
    padding: 0;
  }

  .#{$primary-stylename}-sort-indicator {
    width: 0;
  }

}




/**
 *
 *
 * @param {color} $context ($v-background-color) -
 *
 * @return {color} -
 *
 * @group table
 */
@function valo-table-background-color($context: $v-background-color) {
  @if is-dark-color($context) {
    @return darken($context, 2%);
  }
  @return lighten($context, 2%);
}


/**
 *
 *
 * @param {string} $primary-stylename (v-table) -
 * @param {bool} $include-additional-styles -
 *
 * @group table
 */
@mixin valo-table ($primary-stylename: v-table, $include-additional-styles: contains($v-included-additional-styles, table)) {

  $background-color: $v-table-background-color or valo-table-background-color();
  $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8));

  .#{$primary-stylename} {
    // For scroll position indicator
    position: relative;
    background: $v-background-color;
    color: valo-font-color($v-background-color);

    // Hide row focus outline
    overflow: hidden;
  }

  .#{$primary-stylename}-header table,
  .#{$primary-stylename}-footer table,
  .#{$primary-stylename}-table {
    @include box-shadow(0 0 0 $v-table-border-width $border-color);
  }

  .#{$primary-stylename}-header-wrap,
  .#{$primary-stylename}-footer-wrap,
  .#{$primary-stylename}-header-drag {
    border: $v-table-border-width solid $border-color;
    @include valo-gradient($v-background-color);
    white-space: nowrap;
    font-size: $v-table-header-font-size;
    text-shadow: valo-text-shadow();
  }

  .#{$primary-stylename}-header-wrap {
    position: relative;
    border-bottom: none;
    @if $v-table-border-radius > 0 {
      border-radius: $v-table-border-radius $v-table-border-radius 0 0;
    }
  }

  .#{$primary-stylename}-footer-wrap {
    border-top: none;
    @if $v-table-border-radius > 0 {
      border-radius: 0 0 $v-table-border-radius $v-table-border-radius;
    }
  }

  .#{$primary-stylename}-footer td {
    border-left: $v-table-border-width solid $border-color;
    // Hack to overcome fixed "magic number" in VScrollTable.FooterCell (assumes 1px border)
    @if $v-table-border-width != 1px {
      display: inline-block;
      margin-left: ($v-table-border-width - 1px) * -1;

      &:first-child {
        margin-left: 0;
      }
    }
  }

  .#{$primary-stylename}-footer-container,
  .#{$primary-stylename}-caption-container {
    overflow: hidden;
    line-height: 1;
    min-height: $v-table-row-height;
    box-sizing: border-box;
  }

  .#{$primary-stylename}-footer-container {
    $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
    padding: $vertical-padding - $v-table-border-width $v-table-cell-padding-horizontal $vertical-padding;
    float: right;
  }

  [class^="#{$primary-stylename}-header-cell"] {
    position: relative;
  }

  .#{$primary-stylename}-caption-container,
  .#{$primary-stylename}-header-drag {
    $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
    padding: $vertical-padding $v-table-cell-padding-horizontal $vertical-padding - $v-table-border-width;
    border-left: $v-table-border-width solid $border-color;
  }

  .#{$primary-stylename}-caption-container-align-right {
    padding-right: $v-table-cell-padding-horizontal - $v-table-resizer-width;
  }

  .#{$primary-stylename}-resizer {
    height: $v-table-row-height;
    width: $v-table-resizer-width;
    cursor: e-resize;
    cursor: col-resize;
    position: relative;
    right: round($v-table-resizer-width / -2);
    z-index: 1;
    margin-left: -$v-table-resizer-width;
  }

  .#{$primary-stylename}-cell-content {
    border-left: $v-table-border-width solid $border-color;
    overflow: hidden;
    height: $v-table-body-row-height;
    vertical-align: middle;

    &:first-child {
      border-left: none;
      padding-left: $v-table-border-width;
    }
  }

  .#{$primary-stylename}-header td:first-child .#{$primary-stylename}-caption-container,
  .#{$primary-stylename}-footer td:first-child {
    border-left-color: transparent;
  }


  .#{$primary-stylename}-cell-wrapper {
    line-height: 1;
    padding: 0 $v-table-cell-padding-horizontal;
    box-sizing: border-box;
    margin-right: 0 !important;

    > .v-widget {
      // Leave some breathing room around the table cell and the widget
      margin: round($v-table-cell-padding-horizontal / 4) round($v-table-cell-padding-horizontal / -2);

      &.v-label,
      &.v-checkbox,
      &.v-select-optiongroup {
        margin: 0;
      }
      &.v-progressbar {
        margin-left: 0;
        margin-right: 0;
      }
    }
  }

  .#{$primary-stylename}-body {
    border: $v-table-border-width solid $border-color;
    overflow-anchor: none; /* In Chrome 56+ */
    @include user-select(text);
  }

  .#{$primary-stylename}-table {
    background-color: $background-color;
    white-space: nowrap;
  }

  .#{$primary-stylename}-table td {
    border-top: $v-table-border-width solid $border-color;
    box-sizing: border-box;
  }

  .#{$primary-stylename}-table tr:first-child > td {
    height: $v-table-row-height;
    border-top: none;
  }

  .#{$primary-stylename}-row {
    background-color: $background-color;
    cursor: pointer;
  }

  .#{$primary-stylename}-row-odd {
    $bg-lightness: if(color-luminance($background-color) < 10, 4%, -4%);
    background-color: scale-color($background-color, $lightness: $bg-lightness);
    cursor: pointer;
  }

  .#{$primary-stylename}-body-noselection .#{$primary-stylename}-row,
  .#{$primary-stylename}-body-noselection .#{$primary-stylename}-row-odd {
    cursor: default;
  }

  .#{$primary-stylename} [class*="-row"].v-selected {
    $selected-border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%);

    @include valo-gradient($v-selection-color);
    background-origin: border-box;
    $font-color: valo-font-color($v-selection-color, 0.9);
    color: $font-color;
    text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);

    + .v-selected {
      $gradient-end: first(last(valo-gradient-color-stops($v-selection-color)));
      background: $gradient-end;

      td {
        border-top-color: $gradient-end;
      }
    }

    .#{$primary-stylename}-cell-content {
      border-color: transparent;
      border-left-color: $selected-border-color;

      &:first-child {
        border-left-color: transparent;
      }
    }
  }

  .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator,
  .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator {
    background: transparent;
    width: $v-table-sort-indicator-width;
    height: $v-table-row-height;
    line-height: $v-table-row-height;
    margin-left: -$v-table-sort-indicator-width;
  }

  .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before,
  .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before {
    font-style: normal;
    font-weight: normal;
    display: inline-block;
  }

  .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before {
    @include valo-table-sort-asc-icon-style;
  }

  .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator:before {
    @include valo-table-sort-desc-icon-style;
  }


  [class*="rowheader"] span.v-icon {
    min-width: 1em;
  }


  .#{$primary-stylename}-focus {
    $outline-width: max($v-table-border-width, 1px);
    outline: $outline-width solid $v-focus-color;
    outline-offset: -$outline-width;
  }

  .v-drag-element.#{$primary-stylename}-focus,
  .v-drag-element .#{$primary-stylename}-focus {
    outline: none;
  }

  .#{$primary-stylename}-header-drag {
    position: absolute;
    @include opacity(0.9);
    margin-top: round($v-table-row-height/-2);
    z-index: 30000;
    line-height: 1;
  }

  .#{$primary-stylename}-focus-slot-right {
    border-right: $v-table-border-width + 2px solid $v-focus-color;
    right: -$v-table-border-width - 1px;
    margin-left: -$v-table-resizer-width - $v-table-border-width - 2px !important;
  }

  .#{$primary-stylename}-focus-slot-left {
    float: left;
    border-left: $v-table-border-width + 2px solid $v-focus-color;
    left: -$v-table-border-width;
    right: auto;
    margin-left: 0 !important;
    margin-right: -$v-table-resizer-width - $v-table-border-width - 2px;
  }

  .#{$primary-stylename}-column-selector {
    @include valo-button-style($shadow: null);
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: round($v-unit-size/2);
    height: round($v-unit-size/2);
    line-height: round($v-unit-size/2);
    padding: 0;
    border-top-width: 0;
    border-right-width: 0;
    border-radius: 0 0 0 $v-border-radius;
    cursor: pointer;
    text-align: center;

    @include opacity(0);
    @if $v-animations-enabled {
      @include transition(opacity 200ms 2s);
    }

    &:after {
      content: "";
      position: absolute;
      border: none;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    &:active:after {
      @include valo-button-active-style;
    }
    &:before {
      @include valo-table-column-selector-icon-style;
    }
  }

  .#{$primary-stylename}-header-wrap:hover .#{$primary-stylename}-column-selector {
    @include opacity(1);
    @include transition-delay(200ms);
  }

  .v-on,
  .v-off {
    &:before {
      @include valo-table-column-visible-icon-style;
      font-size: 0.9em;
      margin-right: round($v-unit-size/6);
    }
    div {
      display: inline;
    }

    &.v-disabled {
        @include opacity($v-disabled-opacity);
    }
  }
  .v-off:before {
    visibility: hidden;
  }


  tbody.v-drag-element {
    display: block;
    overflow: visible;
    @include box-shadow(none);
    background: transparent;
    @include opacity(1);

    tr {
      display: block;
      @include valo-drag-element-style($background-color: null);
      background: $background-color;

      &[style*="hidden"] {

      }
    }
  }


  .#{$primary-stylename}-body {
    // Show on top of scroll position indicator (allow scroll events to hit the body instead of indicator)
    position: relative;
    z-index: 1;
  }

  .#{$primary-stylename}-scrollposition {
    position: absolute;
    top: 50%;
    width: 100%;
    height: $v-unit-size;
    line-height: $v-unit-size;
    margin: round($v-unit-size/-2) 0 0 !important;
    text-align: center;
  }





  // Drag'n'drop styles

  .#{$primary-stylename}-drag {
    // Show drag focus outline
    overflow: visible;
  }

  .#{$primary-stylename}-drag .#{$primary-stylename}-body {
    @include box-shadow(0 0 0 2px rgba($v-focus-color, .5));

    @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) {
      border-color: $v-focus-color;
    }

    .#{$primary-stylename}-focus {
      outline: none;
    }
  }

  .#{$primary-stylename}-row-drag-middle .#{$primary-stylename}-cell-content {
    $bg: mix($v-focus-color, $background-color, 20%);
    background-color: $bg;
    color: valo-font-color($bg);
  }

  .#{$primary-stylename}-row-drag-bottom td.#{$primary-stylename}-cell-content {
    border-bottom: 2px solid $v-focus-color;
    height: $v-table-body-row-height - 2px;
  }

  .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-wrapper {
    margin-bottom: -2px;
  }

  .#{$primary-stylename}-row-drag-top td.#{$primary-stylename}-cell-content {
    border-top: 2px solid $v-focus-color;
    height: $v-table-body-row-height - 2px + $v-table-border-width;
  }

  .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-wrapper {
    margin-top: -1px;
  }




  @if $include-additional-styles {
    .#{$primary-stylename}-no-stripes {
      @include valo-table-no-stripes-style;
    }

    .#{$primary-stylename}-no-vertical-lines {
      @include valo-table-no-vertical-lines-style;
    }

    .#{$primary-stylename}-no-horizontal-lines {
      @include valo-table-no-horizontal-lines-style;
    }

    .#{$primary-stylename}-no-header {
      @include valo-table-no-header-style;
    }

    .#{$primary-stylename}-borderless {
      @include valo-table-borderless-style;
    }

    .#{$primary-stylename}-compact,
    .#{$primary-stylename}-small {
      @include valo-table-spacing-style($row-height: $v-unit-size--small, $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
    }

    .#{$primary-stylename}-small {
      font-size: $v-font-size--small;

      &.v-treetable .#{$primary-stylename}-cell-wrapper {
        min-height: $v-font-size--small;
      }
    }
  }

}




/**
 *
 *
 *
 * @group table
 */
@mixin valo-table-sort-asc-icon-style {
  content: '\f0de';
  font-family: ThemeIcons;
}

/**
 *
 *
 *
 * @group table
 */
@mixin valo-table-sort-desc-icon-style {
  content: '\f0dd';
  font-family: ThemeIcons;
}

/**
 *
 *
 *
 * @group table
 */
@mixin valo-table-column-selector-icon-style {
  font-family: ThemeIcons;
  content: "\f013";
}

/**
 *
 *
 *
 * @group table
 */
@mixin valo-table-column-visible-icon-style {
  content: "\f00c";
  font-family: ThemeIcons;
}




/**
 *
 *
 * @param {string} $primary-stylename (v-table) -
 *
 * @group table
 */
@mixin valo-table-no-stripes-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-row,
  .#{$primary-stylename}-row-odd {
    background: transparent;
  }
}


/**
 *
 *
 * @param {string} $primary-stylename (v-table) -
 *
 * @group table
 */
@mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-cell-content {
    border-left: none;
    padding-left: $v-table-border-width;
  }

  &.v-treetable {
    .#{$primary-stylename}-cell-content {
      padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
    }
  }
}


/**
 *
 *
 * @param {string} $primary-stylename (v-table) -
 *
 * @group table
 */
@mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-cell-content {
    border-top: none;
    border-bottom: none;
  }

  .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content,
  .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content {
    height: $v-table-body-row-height - 1px;
  }
}


/**
 *
 *
 * @param {string} $primary-stylename (v-table) -
 *
 * @group table
 */
@mixin valo-table-no-header-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-header-wrap {
    display: none;
  }
}


/**
 *
 *
 * @param {string} $primary-stylename (v-table) -
 *
 * @group table
 */
@mixin valo-table-borderless-style ($primary-stylename: v-table) {
  .#{$primary-stylename}-header-wrap,
  .#{$primary-stylename}-footer-wrap,
  .#{$primary-stylename}-header-drag,
  .#{$primary-stylename}-body {
    border: none;
  }

  // TODO copy pasted from the main mixin
  $background-color: $v-table-background-color or valo-table-background-color();
  $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.7));

  .#{$primary-stylename}-header-wrap {
    border-bottom: $v-table-border-width solid $border-color;
  }

  .#{$primary-stylename}-footer-wrap {
    border-top: $v-table-border-width solid $border-color;
  }
}


@mixin valo-table-spacing-style (
    $primary-stylename: v-table,
    $row-height: $v-table-row-height,
    $header-font-size: $v-table-header-font-size,
    $cell-padding-horizontal: $v-table-cell-padding-horizontal
  ) {

  $vertical-padding: round(($row-height - $header-font-size)/2);

  .#{$primary-stylename}-header-wrap,
  .#{$primary-stylename}-footer-wrap,
  .#{$primary-stylename}-header-drag {
    font-size: $header-font-size;
  }

  .#{$primary-stylename}-footer-container {
    padding: $vertical-padding - $v-table-border-width $cell-padding-horizontal + $v-table-border-width $vertical-padding;
  }

  .#{$primary-stylename}-caption-container,
  .#{$primary-stylename}-header-drag {
    padding-top: $vertical-padding;
    padding-bottom: $vertical-padding - $v-table-border-width;
    padding-left: $cell-padding-horizontal;
    padding-right: $cell-padding-horizontal;
  }

  .#{$primary-stylename}-caption-container-align-right {
    padding-right: max(0, $cell-padding-horizontal - $v-table-resizer-width);
  }

  .#{$primary-stylename}-resizer {
    height: $row-height;
  }

  .#{$primary-stylename}-cell-content {
    height: $row-height;
  }

  .#{$primary-stylename}-cell-wrapper {
    padding-left: $cell-padding-horizontal;
    padding-right: $cell-padding-horizontal;

    > .v-widget {
      margin: round($cell-padding-horizontal / 4) round($cell-padding-horizontal / -2);

      &.v-label,
      &.v-checkbox,
      &.v-select-optiongroup {
        margin: 0;
      }
      &.v-progressbar {
        margin-left: 0;
        margin-right: 0;
      }
    }
  }

  .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator,
  .#{$primary-stylename}-header-cell-desc .#{$primary-stylename}-sort-indicator {
    height: $row-height;
    line-height: $row-height;
  }

  .#{$primary-stylename}-header-drag {
    margin-top: round($row-height/-2);
  }

  &.v-treetable {
    .#{$primary-stylename}-cell-wrapper {
      padding-left: 0;
      padding-right: 0;
      min-height: $v-font-size;
    }

    .#{$primary-stylename}-cell-content {
      padding-left: $cell-padding-horizontal;
      padding-right: $cell-padding-horizontal;

      &:first-child {
        padding-left: $cell-padding-horizontal + $v-table-border-width;
      }
    }

    .#{$primary-stylename}-footer-container {
      padding-left: $cell-padding-horizontal;
      padding-right: $cell-padding-horizontal;
    }
  }

  .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content,
  .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content {
    height: $row-height - 1px;
  }
}