org.eclipse.scout.rt.ui.html/src/main/js/scout/desktop/bench/DesktopBench.css

/*******************************************************************************
 * Copyright (c) 2014-2015 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 ******************************************************************************/

@detail-table-header-padding-y: @table-header-padding-y + 5;
@detail-table-row-padding-y: @table-row-padding-y + 5;
@detail-table-header-padding-x: @bench-padding-x - @table-header-padding-left;
@detail-table-data-padding-x: @bench-padding-x - @table-cell-padding-left;
@detail-table-header-menubar-padding-right: 10px;
@desktop-bench-drop-shadow-top: 3px;

.desktop-bench-drop-shadow() {
  position: absolute;
  content: '';
  left: 0;
  top: @desktop-bench-drop-shadow-top;
  width: 10px;
  height: calc(~'100%' - @desktop-bench-drop-shadow-top);
  box-shadow: -10px 0px 10px 0px rgba(0,0,0,0.4);
}

.desktop-bench {
  position: absolute;

  top: 0;
  background-color: @background-color;

  &.drop-shadow::before {
    .desktop-bench-drop-shadow();
  }

  &.removed {
    #scout.animation-name(slideout-right);
    #scout.animation-duration(0.5s);
  }
}

.detail-table.table {

  & > .table-header {
    padding-left: @detail-table-header-padding-x;
    padding-right: @detail-table-header-padding-x;

    & > .table-header-item {
      padding-top: @detail-table-header-padding-y;
      padding-bottom: @detail-table-header-padding-y;

      & > .table-header-item-state {
        top: 9px;
      }
    }

    & > .menubar-container {
      padding-left: 6px;
      padding-right: @detail-table-header-menubar-padding-right;

      & > .menubar > .menu-box > .menu-item {
        margin-right: 12px;
      }
    }
  }

  & > .table-data {
    padding-left: @detail-table-data-padding-x;
    padding-right: @detail-table-data-padding-x;
  }

  & .table-aggregate {
    /* Desktop table has a 2px (left) border. */
    margin-left: @detail-table-data-padding-x + 2px;

    & > .table-cell {
      padding-top: @detail-table-row-padding-y;
      padding-bottom: @detail-table-row-padding-y;
    }
  }

  & > .table-data {
    & > .scrollbar.x-axis {
      margin-top: 2px;
      margin-bottom: 2px;
    }

    & > .table-row,
    & > .table-aggregate-row {
      /* Desktop table has a 2px border. Top and bottom border are added to the table cell. */
      border-left-width: 2px;
      border-right-width: 2px;

      &.selected {
        background-color: @item-selection-background-color;
        border-color: @item-selection-border-color;
      }

      & > .table-cell {
        /* Replace first and last pixel of specified row padding by a transparent border. This border will be */
        /* set to the selection color when the row is selected, thus creating the illusion that the 2px selection */
        /* border is drawn around the cell. See CSS rules below. */
        padding-top: @detail-table-row-padding-y - 1px;
        padding-bottom: @detail-table-row-padding-y - 1px;
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;

        &.checkable {
          padding-top: @detail-table-row-padding-y - @checkable-cell-padding-adjustment - 1px;
          padding-bottom: @detail-table-row-padding-y - @checkable-cell-padding-adjustment - 1px;
        }
      }

      &.select-top > .table-cell {
        border-top-color: @item-selection-border-color;
      }

      &.select-bottom > .table-cell {
        border-bottom-color: @item-selection-border-color;
      }

      &.select-single > .table-cell {
        border-top-color: @item-selection-border-color;
        border-bottom-color: @item-selection-border-color;
      }
    }

    & > .cell-editor-popup > .check-box-field {
      border-top: 2px solid @item-selection-border-color;
      border-bottom: 2px solid @item-selection-border-color;

      & > .field {
        padding-top: 9px;
        padding-bottom: 9px;
      }
    }

    & > .cell-editor-popup > .cell-editor-form-field > input {
      border-top: 2px solid @item-selection-border-color;
      border-bottom: 2px solid @item-selection-border-color;
    }
  }
}