slick.grid.less

/*
 * IMPORTANT:
 * In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
 * No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
 * classes should alter those!
 */

@import (less) "slick.config.less";

@import (less) "slick.less.macros.less";


.slickgrid-container
{
    overflow: hidden;
    outline: 0;

    border: 1px solid silver;
    border-left-color: transparent;
    border-top-color: transparent;
    border-left-width: 0;
    border-top-width: 0;

    .slick-viewport,
    .slick-top-panel-scroller,
    .slick-header, 
    .slick-headerrow, 
    .slick-footerrow {
      position: relative;
      width: 100%;
      border: 1px solid silver;
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-right-width: 0;
      border-bottom-width: 0;
      margin: 0;
      outline: 0;
    }
    .slick-viewport {
      overflow: auto;
    }
    .slick-header, 
    .slick-headerrow, 
    .slick-footerrow {
      overflow: hidden;
    }
    .slick-headerrow {
      border-top-color: transparent;
      border-top-width: 0;
    }

    .slick-top-panel,
    .slick-header-columns, 
    .slick-headerrow-columns, 
    .slick-footerrow-columns {
      position: relative;
      white-space: nowrap;
      cursor: default;
      overflow: hidden;
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
    }

    .slick-cell, 
    .slick-header-column, 
    .slick-headerrow-column, 
    .slick-footerrow-column {
      position: absolute;
      top: 0;
      bottom: 0;

      border: 1px solid silver;
      border-top-color: transparent;
      border-left-color: transparent;
      border-top-width: 0;
      border-left-width: 0;
      margin: 0;
      padding: 0;

      overflow: hidden;
      .text-overflow(ellipsis);
      vertical-align: middle;
      z-index: 1;
      white-space: nowrap;
      cursor: default;

      // do not include a bottom border for the bottom-most = leaf header cells:
      // that border will be provided by the rows container.
      &.slick-header-is-leaf {
        border-bottom-color: transparent;
        border-bottom-width: 0;
      }
    }

    .slick-cell {
      border-style: dotted;
      padding: 1px 2px 1px 2px;
    } 

    .slick-header-column {
      padding: @cell-padding-top @cell-padding-right @cell-padding-bottom @cell-padding-left;
    }

    .grid-canvas {
      position: relative;
      outline: 0;
    }

    .slick-row {
      position: absolute;
      border: 0;
      width: 100%;
    }

    .slick-header-column-sorted {
      font-style: italic;
    }

    .slick-sort-indicator {
      display: inline-block;
      width: 8px;
      height: 5px;
      margin-left: 4px;
      margin-top: 6px;
      position: absolute;
      left: 0;
      background: url('images/sort-undetermined.png');
    }

    .slick-sort-indicator-desc {
      background: url('images/sort-desc.png');
    }

    .slick-sort-indicator-asc {
      background: url('images/sort-asc.png');
    }

    .slick-header-sortable .slick-column-name {
      margin-left: 10px;
    }

    .slick-resizable-handle {
      position: absolute;
      font-size: 0.1px;
      display: block;
      cursor: col-resize;
      width: 4px;
      right: 0;
      top: 0;
      height: 100%;
    }

    .slick-resizable-handle-hover {
      background-color: #ccc;
    }

    .slick-sortable-placeholder {
      background: silver;
    }

    .slick-group {
    }

    .slick-group-toggle {
      display: inline-block;
    }

    .slick-cell {
      &.highlighted {
        background: lightskyblue;
        background: rgba(0, 0, 255, 0.2);
        .transition(all 0.5s);
      }

      &.flashing {
        border: 1px solid red !important;
      }

      &.editable {
        z-index: 11;
        overflow: visible;
        background: white;
        border-color: black;
        border-style: solid;
      }

      &:focus {
        outline: none;
      }
    }

    .slick-reorder-proxy {
      display: inline-block;
      background: blue;
      .opacity(0.15);
      cursor: move;
    }

    .slick-reorder-guide {
      display: inline-block;
      height: 2px;
      background: blue;
      .opacity(0.7);
    }

    .slick-selection {
      z-index: 10;
      position: absolute;
      border: 2px dashed black;
    }
}