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

@import "treegrid";

$v-tree8-border-radius: 3px;

@mixin valo-tree8 ($primary-stylename: v-tree8) {

  @include valo-treegrid($primary-stylename);

  .#{$primary-stylename} {
    background-color: transparent;
  }

  .#{$primary-stylename}-row > td {
    background-color: transparent;
    border: none;
  }

  .#{$primary-stylename}-tablewrapper {
    background-color: transparent;
    border: none;
  }

  .#{$primary-stylename}-row-selected  > .#{$primary-stylename}-cell {
    background-color: transparent;
    background-image: none;
    color: inherit;
    text-shadow: none;
    border: none;
  }

  .#{$primary-stylename}:focus .#{$primary-stylename}-rowmode-row-focused:before {
    display: none;
  }

  .#{$primary-stylename}-cell-content {
    border: $v-grid-cell-focused-border;
    border-color: transparent;
    border-radius: $v-tree8-border-radius;
    padding: $v-grid-cell-padding;
  }

  .#{$primary-stylename}:focus .#{$primary-stylename}-rowmode-cell-focused
    > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content {
    border: $v-grid-cell-focused-border;
  }

  // Selected
  .#{$primary-stylename}-row-selected {
    $grid-sel-bg: $v-grid-row-selected-background-color;

    > .#{$primary-stylename}-cell > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content {
      @include valo-gradient($grid-sel-bg);
      color: valo-font-color($grid-sel-bg);
      text-shadow: valo-text-shadow($font-color: valo-font-color($grid-sel-bg), $background-color: $grid-sel-bg);
      border-color: adjust-color($grid-sel-bg, $lightness: -8%, $saturation: -8%);
    }

    > .#{$primary-stylename}-cell-focused > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content {
      border-color: adjust-color($grid-sel-bg, $lightness: 20%);
    }
  }
}