@eclipse-scout/core/src/style/sizes.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 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
 */
/* -------------------------------- */
/* Global sizes                     */
/* -------------------------------- */
@application-loading01-size: 80px;
@application-loading02-size: 120px;
@border-radius: 3px;
@border-radius-medium: 8px;
@border-radius-large: 12px;
@borderless-field-padding-y: @text-field-padding-y + 1px;
@breadcrumb-bar-field-padding-bottom: 0;
@breadcrumb-bar-field-padding-bottom-dense: 4px;
@collapse-handle-border-radius: @border-radius-medium;
@control-border-radius: @border-radius;
@control-alternative-border-radius: @control-border-radius;
@control-popup-border-radius: @border-radius;
@control-popup-margin: 5px;
@drop-shadow-y: 6px;
@drop-shadow-blur: 13px;
@drop-shadow-large-y: 8px;
@drop-shadow-large-blur: 32px;
@filter-field-bottom: 8px;
@filter-field-right: 8px;
@filter-field-height: @logical-grid-row-height;
@filter-field-height-dense: @logical-grid-row-height-dense;
@filter-field-width: 190px;
@filter-field-min-width: 75px;
@filter-field-max-width: 60%;
@filter-field-icon-size: 24px;
@filter-field-transition-duration: 250ms;
@item-selection-border-width: 2px;
@logical-grid-row-height: 30px;
@logical-grid-row-height-dense: 24px;
@logical-grid-row-gap: 10px;
@logical-grid-row-gap-dense: 8px;
@logical-grid-column-width: 420px;
@logical-grid-column-gap: 40px - @mandatory-indicator-width;
@logical-grid-small-column-gap: 4px;
@loading-fade-duration: 250ms;
@mandatory-indicator-width: 10px;
@mandatory-indicator-font-size: 15px;
@field-label-font-size: @font-size-smaller;
@field-label-padding-top: @borderless-field-padding-y + 1; // +1 Because label font is a little smaller than input font
@field-label-padding-bottom: @borderless-field-padding-y;
@field-label-width: 140px;
@field-status-size: 24px;
@field-status-margin-left: 6px;
@focus-box-shadow-size: 3px;
@text-field-padding-x: 10px;
@text-field-padding-y: 7px;
@text-field-padding-top-compensation: 1px + @text-margin-top;
@text-field-alternative-padding-left: 0;
@text-field-alternative-padding-right: 0;
@text-field-icon-size: 24px;
@text-field-icon-margin-x: (@logical-grid-row-height - 2px - @text-field-icon-size) / 2; // same margin to the right as to the top and bottom of an input field
@text-field-icon-outer-width: @text-field-icon-size + 2 * @text-field-icon-margin-x;
@text-field-alternative-icon-outer-width: @text-field-icon-size + @text-field-icon-margin-x;
@top-label-font-size: @font-size-small;
@top-label-border-padding-bottom: 4px;

/* --------------------------------------------------------------------------- */
/* The following CSS classes are used to to read the values from JavaScript,   */
/* see scout.HtmlEnvironment                                                   */
/* --------------------------------------------------------------------------- */
.html-env-logical-grid-row {
  height: @logical-grid-row-height;
  margin-bottom: @logical-grid-row-gap;

  &.dense {
    height: @logical-grid-row-height-dense;
    margin-bottom: @logical-grid-row-gap-dense;
  }
}

.html-env-logical-grid-column {
  width: @logical-grid-column-width;
  margin-right: @logical-grid-column-gap;
  margin-left: @logical-grid-small-column-gap;
}

.html-env-field-mandatory-indicator {
  width: @mandatory-indicator-width;
}

.html-env-field-label {
  width: @field-label-width;
}

.html-env-field-status {
  width: @field-status-size;
}

/* -------------------------------- */
/* Component specific sizes         */
/* -------------------------------- */
@bench-padding-x: 20px;
@bench-view-min-height: 50px;
@bench-view-min-width: 50px;
@box-font-size: 14px;
@box-margin-y: 15px;
@box-width: 450px;
@busyindicator-icon-size: 22px;
@busyindicator-large-size: 100px;
@busyindicator-large-border-width: 2px;
@button-border-radius: @border-radius;
@button-padding-x: 7px;
@button-padding-y: 2px;
@button-margin-top: 1px; /* Necessary to align icon with text */
@button-font-icon-size: 16px;
@calendar-component-margin-left: 32px;
@calendar-day-selected-circle-size: 23px;
@calendar-header-button-height: 30px;
@calendar-title-height: 25px;
@calendar-week-axis-overlap: 6px;
@calendar-week-name-width: 45px;
@calendar-padding-right-mobile: 6px;
@check-box-border-radius: @border-radius;
@check-box-border-width: 1px;
@check-box-field-padding-y: 6px;
@check-box-field-label-padding-top: 2px;
@check-box-field-label-padding-left: 7px;
@check-box-size: 18px;
@checkable-cell-padding-adjustment: 2px; /* Adjustment to shift the checkbox a little upwards to align it with the text (resp. first line of the text in case of multiline table cells) */
@closer-border-radius: 7px;
@compact-outline-node-padding-x: 16px;
@compact-outline-node-padding-y: 14px;
@compact-outline-node-menubar-height: 43px; // Depends on the paddings above, needs to be the height for a single line node
@compact-outline-title-padding-x: @compact-outline-node-padding-x;
@context-menu-margin-y: 6px;
@context-menu-item-padding-y: 8px;
@context-menu-item-padding-left: 16px;
@context-menu-item-padding-right: 16px;
@context-menu-item-icon-margin-right: 14px;
@dashboard-tile-label-padding-bottom: 5px;
@dashboard-tile-label-large-padding-bottom: 10px;
@dashboard-tile-drop-shadow-light-alpha: 0.05;
@dashboard-tile-drop-shadow-dark-alpha: 0.1;
@dashboard-tile-border-radius: @border-radius-large;
@dashboard-tile-selected-border-width: 2px;
@dashboard-tile-inverted-selected-border-width: 3px;
@date-picker-header-height: 36px;
@date-picker-month-padding: 13px;
@date-picker-day-margin: 2px;
@date-picker-day-size: 32px;
@date-picker-day-border-radius: 6px;
@time-picker-cell-padding-top: 3px;
@time-picker-cell-size: @date-picker-day-size;
@time-picker-cell-border-radius: @date-picker-day-border-radius;
@desktop-bench-drop-shadow-top: 3px;
@desktop-bench-border-left-width: 1px;
@desktop-bench-drop-shadow-border-top-left-radius: @desktop-tab-border-radius;
@desktop-header-height: 64px;
@desktop-logo-height: 32px;
@desktop-logo-min-width: 0;
@desktop-navigation-breadcrumb-width: 240px;
@desktop-navigation-min-width: 49px; /* not 50px because last pixel is the border (would not look good)*/
@desktop-navigation-width: 290px;
@desktop-notification-no-icon-padding-y: 16px;
@desktop-tab-border-radius: @view-tab-border-radius;
@desktop-tab-border-width: 0;
@desktop-tab-key-box-bottom: @view-tab-key-box-bottom;
@desktop-tab-margin-top: @view-tab-margin-top;
@desktop-tab-margin-right: 3px;
@desktop-tab-padding: 10px;
@desktop-tab-padding-left: 20px;
@desktop-tab-width: 200px;
@desktop-tab-min-width: 130px;
@desktop-tab-border-radius: @view-tab-selected-border-radius;
@desktop-tab-margin-top: @view-tab-selected-margin-top;
@desktop-tool-box-item-border-radius: @view-tab-border-radius;
@desktop-tool-box-item-font-size: @font-size-icon-small;
@desktop-tool-box-item-margin: 3px;
@desktop-tool-box-item-margin-top: @view-tab-margin-top;
@detail-table-border-radius: 4px;
@detail-table-row-margin-x: @bench-padding-x - @table-cell-padding-left;
@detail-table-header-menubar-padding-right: 10px;
@detail-table-header-item-padding-x: @bench-padding-x - @table-header-item-padding-left;
@detail-table-header-item-padding-y: @table-header-item-padding-y;
@detail-table-header-item-margin-top: 6px;
@detail-table-header-item-margin-bottom: 6px;
@detail-table-row-padding-y: 10px;
@detail-table-aggregate-padding-y-large: 20px;
@detail-table-aggregate-padding-y-small: @table-aggregate-padding-y-small;
@detail-table-footer-with-handle-margin-left: 30px;
@dialog-border-top-size: 5px;
@form-title-padding-top: 16px;
@group-collapse-icon-margin-top: -1px;
@group-box-control-font-size: 16px;
@group-box-control-width: 25px;
@group-box-body-padding-bottom: 16px;
@group-box-body-padding-top: 18px;
@group-box-header-border-width: 1px;
@group-box-header-margin-top: 8px;
@group-box-title-padding-bottom: 12px;
@group-box-title-padding-top: 12px;
@group-box-title-with-sub-label-padding-bottom: 7px;
@main-menubar-height: @desktop-header-height;
@main-menubar-item-margin-x: 5px;
@main-menubar-first-menu-item-margin-left: @bench-padding-x - @menu-item-padding-x;
@main-menubar-last-menu-item-margin-right: @main-menubar-first-menu-item-margin-left;
@main-menubar-first-menu-item-icononly-margin-left: @bench-padding-x - @menubar-item-icononly-padding-x;
@main-menubar-last-menu-item-icononly-margin-right: @main-menubar-first-menu-item-icononly-margin-left;
@menubar-button-margin: @menubar-field-menu-margin-y;
@menubar-field-menu-margin-y: 4px;
@menubar-item-icononly-padding-x: 8px;
@menubar-item-icononly-margin-x: 2px;
@menubar-item-margin-x: 2px;
@menubar-item-margin-y: 2px;
@menu-item-height: 39px;
@menu-item-min-image-icon-width: 16px;
@menu-item-max-image-icon-height: 16px;
@menu-item-padding-x: 10px;
@menu-item-padding-y: 6px;
@menu-item-icon-margin-right: 8px;
@messagebox-label-padding: 27px;
@messagebox-max-width: 473px;
@filechooser-max-width: 473px;
@mobile-popup-title-margin-right: 30px;
@mobile-popup-title-margin-top: 10px;
@mode-padding-x: 12px;
@mode-padding-y: 6px;
@mode-padding-dense-x: 5px;
@mode-padding-dense-y: 3px;
@mode-border-width: 1px;
@mode-selector-alternative-border-width: 3px;
@notification-no-icon-padding-y: 13px;
@notification-no-icon-padding-right: 12px;
@notification-no-icon-padding-left: 23px;
@outline-breadcrumb-node-padding-x: @outline-title-padding-left;
@outline-breadcrumb-node-padding-y: 12px;
@outline-data-padding-top: 16px;
@outline-font-size: @font-size-normal;
@outline-node-control-padding-left: @outline-title-padding-left;
@outline-node-control-padding-y: @outline-node-padding-y;
@outline-node-control-line-height: @tree-node-control-line-height;
@outline-node-font-icon-line-height: @tree-node-font-icon-line-height;
@outline-node-font-icon-size: 16px;
@outline-node-padding-left: 37px;
@outline-node-padding-right: 8px;
@outline-node-padding-y: 9px;
@outline-title-height: @desktop-header-height;
@outline-title-padding-left: 20px;
@outline-title-padding-right: 20px;
@outline-title-icon-padding-right: 10px;
@planner-header-button-height: 30px;
@planner-resource-minheight: @logical-grid-row-height;
@planner-resource-title-width: 150px;
@planner-scale-height: 45px;
@popup-border-radius: @border-radius-large;
@popup-border-width: 0;
@popup-arrow-size: 11px;
@proposal-chooser-padding-x: 12px;
@proposal-chooser-padding-y: 8px;
@radio-button-circle-size: 18px;
@radio-button-inner-circle-size: 10px;
@radio-button-border-width: 1px;
@radio-button-field-padding-y: 6px;
@radio-button-label-padding-top: 2px;
@radio-button-label-padding-left: 7px;
@resource-padding-x: 5px;
@root-group-box-padding-left: @bench-padding-x - @mandatory-indicator-width;
@root-group-box-padding-right: @bench-padding-x;
@scrollbar-margin: 8px;
@scrollbar-side-padding: 5px;
@scrollbar-side-padding-hover: 3px;
@scrollbar-size: @scrollbar-thumb-size + 2 * @scrollbar-side-padding; // thumb needs to be in the middle
@scrollbar-thumb-size: 4px;
@scrollbar-thumb-hover-size: 8px;
@scroll-shadow-size-large: 10px;
@scroll-shadow-size: 5px;
@scroll-shadow-blur: @scroll-shadow-size;
@scroll-shadow-spread: @scroll-shadow-size + 1; // +1 to ensure firefox does not draw a light shadow on the side of the scrollable
@search-outline-panel-padding-bottom: 16px;
@search-outline-panel-no-title-padding-top: 14px;
@simple-tab-padding: 5px;
@split-box-splitter-line-size: 3px;
@split-box-x-splitter-padding: 19px;
@split-box-y-splitter-padding: 6px;
@splitter-line-size: 2px;
@splitter-size: 16px;
@status-font-icon-size: 16px;
@sub-title-letter-spacing: 0.2px;
@sub-title-font-size: 11px;
@tab-area-border-width: @group-box-header-border-width;
@tab-item-focus-arrow-width: 15px;
@tab-item-focus-arrow-padding-top: @tab-item-title-padding-top;
@tab-item-padding-x: 20px;
@tab-area-selection-marker-height: 3px;
@tab-item-title-padding-bottom: @group-box-title-padding-bottom;
@tab-item-title-padding-top: @group-box-title-padding-top;
@tab-item-title-margin-top: @group-box-header-margin-top;
@table-aggregate-cell-font-icon-line-height: normal;
@table-aggregate-sum-avg-font-icon-size: 13px;
@table-aggregate-min-max-font-icon-size: 15px;
@table-aggregate-row-font-size: @font-size-smaller;
@table-cell-padding-left: 10px;
@table-cell-padding-right: @table-cell-padding-left;
@table-cell-padding-right-last: @scrollbar-size;
@table-cell-font-icon-size: @tree-node-font-icon-size;
@table-cell-font-icon-line-height: @tree-node-font-icon-line-height;
@table-control-content-padding: 10px;
@table-control-container-height: 364px;
@table-control-container-height-dense: 320px;
@table-control-resize-border-width: 2px;
@table-control-size: 40px;
@table-footer-height: @main-menubar-height;
@table-footer-text-filter-height: 32px;
@table-footer-text-filter-width: 180px;
@table-header-menu-cmd-height: @logical-grid-row-height;
@table-header-menu-cmd-width: 43px;
@table-header-menu-group-padding-top: 12px;
@table-header-menu-padding: 16px;
@table-header-item-padding-left: @table-cell-padding-left - @table-header-item-margin-x;
@table-header-item-padding-right: @table-cell-padding-right - @table-header-item-margin-x;
@table-header-item-padding-right-last: @table-cell-padding-right-last - @table-header-item-margin-x;
@table-header-item-padding-y: 5px;
@table-header-item-margin-y: 3px;
@table-header-item-margin-x: 3px;
@table-header-item-min-height: 27px; // not 28 because of 2px bottom border (to make it equal height as menubar)
@table-header-icon-font-size: 15px; // not 16 because of 2px bottom border (to really center it)
@table-header-sort-icon-size-1: 12px;
@table-header-sort-icon-size-2: @table-header-sort-icon-size-1 + 12px; /* bigger space when multiple icons are displayed */
@table-info-margin-x: 15px;
@table-menubar-padding: 8px;
@table-cell-icon-width: @tree-node-icon-width;
@table-row-padding-y: 7px;
@table-row-margin-x: 0px;
@table-row-level-padding-width: 20px;
@table-row-control-line-height: @tree-node-control-line-height;
@table-row-control-padding-left: @tree-node-control-padding-left;
@table-row-control-size: @tree-node-control-size;
@table-aggregate-padding-y-large: 15px;
@table-aggregate-padding-y-small: 7px;
@tag-field-tag-height: @logical-grid-row-height - 2px - 2 * @tag-field-tag-margin-y;
@tag-field-tag-margin-y: 3px;
@tag-field-tag-margin-right: 4px;
@tag-element-padding-x: 8px;
@tile-padding-y: 6px; /* Optimized for a tile height of 30px (logical-grid-height) */
@tile-padding-x: 8px;
@title-font-weight: @font-weight-bold;
@tile-field-padding: 20px;
@tile-field-compact-padding-y: 10px;
@tile-field-compact-padding-x: 15px;
@tile-field-small-compact-padding-x: @tile-field-compact-padding-y;
@tooltip-arrow-size: 7px;
@tooltip-border-radius: @border-radius;
@tooltip-border-width: 0;
@tooltip-padding-x: 12px;
@tooltip-padding-y: @context-menu-item-padding-y;
@tree-node-icon-width: 16px;
@tree-node-icon-padding-right: 9px;
@tree-node-bitmap-icon-size: @tree-node-icon-width;
@tree-node-bitmap-icon-margin-top: -2px;
@tree-node-checkbox-size: 20px;
@tree-node-checkbox-margin-top: -2px;
@tree-node-control-checkbox-size: 20px + @tree-node-control-size;
@tree-node-control-size: 16px;
@tree-node-control-line-height: @font-icon-line-height;
@tree-node-control-padding-left: 13px;
@tree-node-font-icon-line-height: @font-icon-line-height;
@tree-node-font-icon-size: @font-size-icon-small;
@tree-node-padding-left: 28px;
@tree-node-padding-right: 7px;
@tree-node-padding-y: 7px;
@tree-node-padding-level-diff-parent-has-icon: @tree-node-icon-width + @tree-node-icon-padding-right;
@view-tab-key-box-bottom: 9px;
@view-tab-icon-font-size: 20px;
@view-tab-selected-width: 56px;
@view-tab-margin: 6px;
@view-tab-margin-top: 14px;
@view-tab-selected-margin-top: 8px;
@view-tab-border-radius: @border-radius-medium;
@view-tab-selected-border-radius: @border-radius-large;
@year-panel-day-height: 24px;
@year-panel-day-line-height: @year-panel-day-height;
@widget-popup-margin: 8px; /* minimum margin to window or anchor */
@wizard-step-padding-x: 15px;
@wizard-steps-border-width: 1px;
@wizard-steps-compact-height: 44px;
@wizard-steps-height: @main-menubar-height;
@wizard-step-icon-border-width: 1px;
@wizard-step-icon-margin-right: 9px;
@wizard-step-icon-size: 26px;

/* -------------------------------- */
/* Other sizes                      */
/* -------------------------------- */
@iphone5-height: 568px;
@iphone5-width: 320px;
@iphone6-width: 375px; // includes iphone 6, 6s, 6s plus, 7, 8
@iphone6-height: 667px;