@eclipse-scout/core/src/desktop/DesktopDense.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
.dense {

  /* FormField.less */

  .form-field {
    & > label {
      padding-top: 4px; /* @borderless-field-padding-y; */
      padding-bottom: 4px; /* @borderless-field-padding-y; */
    }
  }

  /* SmartField.less */

  .smart-field,
  .smart-field.read-only,
  .smart-field.alternative {
    & > .field > .multiline-lines {
      line-height: 15px;
      padding-top: 2px; /* padding: 3px @text-field-padding-x; */
      padding-bottom: 2px;
    }
  }

  .proposal-chooser {
    & > .active-filter,
    & > .status {
      height: @logical-grid-row-height;
    }

    & > .active-filter > .radiobutton-group {
      height: @logical-grid-row-height;

      & > .radiobutton-group-body {
        height: @logical-grid-row-height;
      }
    }
  }

  /* MenuBar.less */

  .menubar:not(.main-menubar) {
    & > .menubar-box {
      & > .menu-item,
      & > .combo-menu > .menu-item {
        padding-top: 3px; /* @menubar-item-padding-y; */
        padding-bottom: 3px; /* @menubar-item-padding-y; */

        /* By making sure menu items are always at least the same height as form fields, it is easier to align them with each other, especially when zoomed */
        min-height: @logical-grid-row-height-dense; /* @logical-grid-row-height; */
      }

      & > .menu-button,
      & > .combo-menu > .menu-button {
        padding-top: 2px;
        padding-bottom: 2px;
      }

      & > .combo-menu {
        padding: 0;
      }

      & > .form-field-menu {
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  }

  /* GroupBox.less */

  .group-box-header {
    margin-top: 6px; /* @group-box-title-margin-top; */

    & > .title {
      padding-top: 6px; /* padding: @group-box-title-padding-top 0 @group-box-title-padding-bottom 0; */
      padding-bottom: 6px;
    }
  }

  .group-box-body {
    padding-top: 10px; /* padding: @group-box-body-padding-top 0 @group-box-body-padding-bottom 0; */
    padding-bottom: 8px;

    /* redefine */

    &.y-padding-invisible {
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  /* TabBox.less */

  .tab-box-header {
    margin-top: 6px; /* @group-box-title-margin-top; */
  }

  .tab-item {
    & > .title {
      padding-top: 6px; /* padding: @tab-item-title-padding-top 0 @tab-item-title-padding-bottom; */
      padding-bottom: 6px;
    }
  }

  .overflow-tab-item.menu-item {
    padding-top: 4px; /* padding: @tab-item-title-padding-top - 2px @tab-item-padding-x - 8px @tab-item-title-padding-bottom; */
    padding-bottom: 4px;
  }

  /* TableHeader.less */

  .table-header-item {
    margin-top: 2px; /* margin: @table-header-item-margin-y @table-header-item-margin-x  */
    margin-bottom: 2px;
    min-height: 24px; /* min-height: @table-header-item-min-height; */
  }

  .table-header-resize {
    padding-top: 4px; /* 8px 8px; */
    padding-bottom: 4px;
  }

  /* Table.less */

  .table,
  .detail-table.table {
    --table-row-padding-y: 4px;
  }

  .table-cell {

    &.table-node {

      & > .table-row-control {
        /* padding: @table-row-padding-y 8px @table-row-padding-y @table-row-control-padding-left; */
        padding-top: 6px;
      }
    }
  }

  /* TableFooter.less */

  .table-control-resize {
    height: 12px;
  }

  /* DesktopBench.less */

  .detail-table.table {
    & > .table-header {
      & > .table-header-item {
        margin-top: 2px;
        margin-bottom: 2px;
        min-height: 24px;
      }
    }
  }

  /* ContextMenuPopup.less */

  .context-menu {
    & > .menu-item,
    & > .combo-menu > .menu-item {
      padding-top: 6px; /* padding: 11px 15px; */
      padding-bottom: 6px;
    }

    & > .combo-menu {
      padding: 0;
    }
  }

  /* CheckBoxField.less */

  .check-box-field > .field {
    padding-top: 2px; /* padding: 6px 0; */
    padding-bottom: 2px;
  }

  /* main.less */

  .input-field {
    padding-top: 2px; /* padding: @text-field-padding-y @text-field-padding-x; */
    padding-bottom: 2px;
  }

  /* Button */

  .button-field > .button {
    padding-top: 0; /*   padding: @button-padding-y @button-padding-x; */
    padding-bottom: 0;
    min-height: @logical-grid-row-height-dense;

    & > .icon {
      padding-top: 0; /* padding-top: 2px; */
      padding-bottom: 0; /* padding-bottom: 2px; */
    }
  }

  /* RadioButton.less */

  .radio-button > .field {
    padding-top: 2px; /*   padding: 6px 0; */
    padding-bottom: 2px;

    & > .label {
      padding-top: 1px; /* padding-top: @radio-button-label-padding-top; */
    }
  }

  /* LabelField.less */

  .label-field > .field {
    padding-top: 2px; /* padding-top: @borderless-field-padding-y; */
    padding-bottom: 2px; /* padding-bottom: @borderless-field-padding-y; */
  }

  /* Tree.less */

  .tree-node {
    padding-top: 3px; /* padding: @tree-node-padding-y @tree-node-padding-right @tree-node-padding-y @tree-node-padding-left; */
    padding-bottom: 3px;
  }

  .tree-node-control {
    padding-top: 4px;
    padding-bottom: 3px;
  }

  /* Outline.less */

  .outline.tree {
    & > .tree-data {
      & > .tree-node,
      & > .animation-wrapper > .tree-node {
        padding-top: 6px; /* padding-top: @outline-node-padding-y; */
        padding-bottom: 6px; /* padding-bottom: @outline-node-padding-y; */

        & > .tree-node-control {
          padding-top: 6px; /* padding-top: @outline-node-control-padding-y; */
        }
      }
    }
  }

  /* ValueField.less */

  .value-field {
    & > input,
    & > .input-field,
    & > .field > input,
    & > .field > .input-field,
    & > .file-input {
      /* Mainly necessary if label is invisible or on top and use ui height is set -> Makes sure the status is aligned and inputs are always the same height*/
      min-height: @logical-grid-row-height-dense;
    }
  }

  /* TagBar.less */

  .tag-element,
  .overflow-icon {
    height: 20px; /* @tag-field-tag-height */
    line-height: 20px; /* @tag-field-tag-height */
    margin-top: 0; /* margin: @tag-field-tag-margin-y @tag-field-tag-margin-right 0 0; */
  }

  /* use default margin in the overflow popup, otherwise the tags sit on each other */

  .tag-overflow-popup > .popup-body {
    & > .tag-element {
      margin-top: @tag-field-tag-margin-y;
    }
  }

  /* TagField.less */

  .tag-field {
    & > .field {
      & > input {
        padding-bottom: 1px;
      }
    }
  }

  /* BreadcrumbItem.less */

  .breadcrumb-item {
    font-size: @font-size-normal;
  }
}