vaadin-framework/WebContent/VAADIN/themes/valo/components/_grid.scss

@import "table";

$v-grid-row-background-color: valo-table-background-color() !default;
$v-grid-row-stripe-background-color: scale-color($v-grid-row-background-color, $lightness: if(color-luminance($v-grid-row-background-color) < 10, 4%, -4%)) !default;

$v-grid-border-color-source: $v-grid-row-background-color !default;
$v-grid-border: flatten-list(valo-border($color: $v-grid-border-color-source, $strength: 0.8)) !default;
$v-grid-cell-focused-border: max(2px, first-number($v-border)) solid $v-selection-color !default;

$v-grid-row-height: $v-table-row-height !default;
$v-grid-row-selected-background-color: $v-selection-color !default;

$v-grid-header-font-size: $v-table-header-font-size !default;
$v-grid-header-background-color: $v-background-color !default;

$v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default;

$v-grid-animations-enabled: $v-animations-enabled !default;

$v-grid-details-marker-width: first-number($v-grid-border) * 2 !default;
$v-grid-details-marker-color: $v-selection-color !default;
$v-grid-details-border-top: valo-border($color: $v-grid-border-color-source, $strength: 0.3) !default;
$v-grid-details-border-top-stripe: valo-border($color: $v-grid-row-stripe-background-color, $strength: 0.3) !default;
$v-grid-details-border-bottom: $v-grid-cell-horizontal-border !default;
$v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;

@import "../../base/grid/grid";

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

  @include base-grid($primary-stylename);

  .#{$primary-stylename} {
    @include user-select(text);
    background-color: $v-background-color;
  }

  .#{$primary-stylename}-header .#{$primary-stylename}-cell {
    @include valo-gradient($v-grid-header-background-color);
    text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-header-background-color), $background-color: $v-grid-header-background-color);
  }

  .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged {
    @include opacity(0.5, false);
    @include transition (opacity .3s ease-in-out);
   }

   .#{$primary-stylename}-header .#{$primary-stylename}-cell.dragged-column-header {
    margin-top: round($v-grid-row-height/-2);
   }

  .#{$primary-stylename}-footer .#{$primary-stylename}-cell {
    @include valo-gradient($v-grid-footer-background-color);
    text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-footer-background-color), $background-color: $v-grid-footer-background-color);
  }

  .#{$primary-stylename}-header-deco {
    @include valo-gradient($v-grid-header-background-color);
  }

  .#{$primary-stylename}-footer-deco,
  .#{$primary-stylename}-horizontal-scrollbar-deco {
    @include valo-gradient($v-grid-footer-background-color);
  }

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

    > .#{$primary-stylename}-cell {
      @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:before {
      border-color: adjust-color($grid-sel-bg, $lightness: 20%);
    }
  }

  .#{$primary-stylename}-editor {
    @include valo-focus-style;
    border-color: $v-focus-color;
  }

  .#{$primary-stylename}-editor-footer {
    font-size: $v-font-size--small;
    padding: 0 round($v-layout-spacing-horizontal / 2);
    background: $v-app-background-color;
    @if $v-grid-animations-enabled {
      @include animation(valo-grid-editor-footer-animate-in 200ms 120ms backwards);
    }
  }

  @if $v-grid-animations-enabled {
    .#{$primary-stylename}-editor-footer:first-child {
      @include animation(valo-grid-editor-footer-animate-in-alt 200ms 120ms backwards);
    }
  }

  .#{$primary-stylename}-editor-cells {
    z-index: 1;
  }

  .#{$primary-stylename}-editor-cells > div {
    // Vertical centering for widgets
    &:before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    
    .error::before {
      border-top: round($v-unit-size / 4) solid $v-error-indicator-color;
      border-right: round($v-unit-size / 4) solid transparent;
    }
    
    .error,
    .error > input {
      // taken from @mixin valo-textfield-error-style()
      background-color: scale-color($v-error-indicator-color, $lightness: 98%);
    }

    .v-textfield,
    .v-textfield-focus,
    .v-datefield,
    .v-datefield .v-textfield-focus,
    .v-filterselect-input,
    .v-filterselect-input:focus {
      border: none;
      border-radius: 0;
      background: transparent;

      @if $v-textfield-bevel {
        @include box-shadow(valo-bevel-and-shadow($bevel: $v-textfield-bevel));
      } @else {
        @include box-shadow(none);
      }
    }
    
    .v-datefield-button {
      .v-ie8 & {
        margin-left: 0px;
      }
    }
      
    .v-filterselect-button {
      .v-ie8 & {
        margin-left: 0px;
      }
    }

    .v-textfield-focus,
    .v-datefield .v-textfield-focus,
    .v-filterselect-input:focus {
      position: relative;
    }

    .v-select {
      padding-left: round($v-grid-cell-padding-horizontal / 2);
      padding-right: round($v-grid-cell-padding-horizontal / 2);
    }

    .v-checkbox {
      margin: 0 round($v-grid-cell-padding-horizontal / 2);

      label {
        white-space: nowrap;
      }
    }
  }

  .#{$primary-stylename}-editor-message > div:before {
    display: inline-block;
    @include valo-error-indicator-style($is-pseudo-element: true);
  }

  .#{$primary-stylename}-editor-save,
  .#{$primary-stylename}-editor-cancel {
    @include valo-link-style;
    font-weight: $v-font-weight + 100;
    text-decoration: none;
    border: none;
    background: transparent;
    padding: round($v-layout-spacing-vertical / 2) round($v-layout-spacing-horizontal / 2);
    margin: 0;
    outline: none;
  }  

  .#{$primary-stylename}-spacer {
    margin-top: first-number($v-grid-border) * -1;
  }

  // Sidebar
  .#{$primary-stylename}-sidebar.v-contextmenu {
    &.open {

      .#{$primary-stylename}-sidebar-content {
        margin: 0 0 2px;
        padding: 4px 4px 2px;
      }
    }

    &.closed {
      @include valo-gradient($v-grid-header-background-color);
    }
  }

  // Customize scrollbars
  .#{$primary-stylename}-scroller {
    &::-webkit-scrollbar {
      border: none;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      border: 4px solid transparent;
      background: if(is-dark-color($v-grid-header-background-color), rgba(255,255,255,.3), rgba(0,0,0,.3));
      -webkit-background-clip: content-box;
      background-clip: content-box;
    }
  }

  .#{$primary-stylename}-scroller-vertical::-webkit-scrollbar-thumb {
    min-height: 30px;
  }

  .#{$primary-stylename}-scroller-horizontal::-webkit-scrollbar-thumb {
    min-width: 30px;
  }

}


@include keyframes(valo-grid-editor-footer-animate-in) {
  0% {
    margin-top: -$v-grid-row-height;
  }
}

@include keyframes(valo-grid-editor-footer-animate-in-alt) {
  0% {
    margin-bottom: -$v-grid-row-height - first-number($v-grid-cell-horizontal-border);
  }
  100% {
    margin-bottom: first-number($v-grid-cell-horizontal-border) * -1;
  }
}