| /* |
| * Copyright (c) 2010-2020 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 |
| */ |
| /* -------------------------------- */ |
| /* 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; |
| @collapse-handle-border-radius: @border-radius-medium; |
| @control-border-radius: @border-radius; |
| @control-alternative-border-radius: 0; |
| @control-popup-border-radius: @border-radius; |
| @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-width: 20px; |
| @field-status-margin-left: 10px; |
| @focus-box-shadow-size: 3px; |
| @text-field-padding-x: 10px; |
| @text-field-padding-y: 7px; |
| @text-field-padding-top-compensation: 1px; |
| @text-field-alternative-padding-left: 0; |
| @text-field-alternative-padding-right: 0; |
| @text-field-alternative-icon-padding-right: 4px; |
| @text-field-icon-outer-width: 30px; |
| @text-field-alternative-icon-outer-width: 23px; |
| @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-width; |
| } |
| |
| /* -------------------------------- */ |
| /* Component specific sizes */ |
| /* -------------------------------- */ |
| @bench-padding-x: 20px; |
| @bench-view-min-height: 50px; |
| @bench-view-min-width: 50px; |
| @box-margin-y: 15px; |
| @box-width: 420px; |
| @busyindicator-icon-size: 22px; |
| @busyindicator-large-size: 100px; |
| @busyindicator-large-border-width: 2px; |
| @button-border-radius: @border-radius; |
| @button-focus-border-radius: 6px; |
| @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-checked-line-height: @check-box-size; |
| @check-box-field-label-padding-top: 2px; |
| @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) */ |
| @compact-outline-node-padding-x: 16px; |
| @compact-outline-node-padding-y: @outline-breadcrumb-node-padding-y; |
| @compact-outline-title-padding-x: @compact-outline-node-padding-x; |
| @context-menu-item-padding-y: 8px; |
| @context-menu-item-padding-left: 16px; |
| @dashboard-tile-label-padding-bottom: 5px; |
| @dashboard-tile-label-large-padding-bottom: 10px; |
| @date-picker-header-height: @logical-grid-row-height; |
| @date-picker-header-month-padding-top: 1px; |
| @date-picker-day-padding-x: 5px; |
| @date-picker-day-padding-y: 5px; |
| @desktop-bench-drop-shadow-top: 3px; |
| @desktop-bench-border-left-width: 1px; |
| @desktop-bench-drop-shadow-border-top-left-radius: @desktop-tab-selected-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-notifications-margin-top: 57px; |
| @desktop-tab-border-radius: @view-tab-border-radius; |
| @desktop-tab-key-box-bottom: @view-tab-key-box-bottom; |
| @desktop-tab-margin: @view-tab-margin; |
| @desktop-tab-margin-top: @view-tab-margin-top; |
| @desktop-tab-padding: 4px; |
| @desktop-tab-padding-left: 14px; |
| @desktop-tab-width: @desktop-tab-selected-width - @desktop-tab-margin * 2; |
| @desktop-tab-min-width: @desktop-tab-selected-min-width - @desktop-tab-margin * 2;; |
| @desktop-tab-selected-width: 200px; |
| @desktop-tab-selected-min-width: 130px; |
| @desktop-tab-selected-border-radius: @view-tab-selected-border-radius; |
| @desktop-tab-selected-padding: @desktop-tab-padding + @desktop-tab-margin; |
| @desktop-tab-selected-padding-left: @desktop-tab-padding-left + @desktop-tab-margin; |
| @desktop-tab-selected-margin-top: @view-tab-selected-margin-top; |
| @desktop-tool-box-item-border-radius: @view-tab-border-radius; |
| @desktop-tool-box-item-font-size: 14px; |
| @desktop-tool-box-item-margin: 3px; |
| @desktop-tool-box-item-margin-top: @view-tab-margin-top; |
| @detail-table-border-radius: 4px; |
| @detail-table-data-padding-x: @bench-padding-x - @table-cell-padding-left; |
| @detail-table-header-menubar-padding-right: 10px; |
| @detail-table-header-padding-x: @bench-padding-x - @table-header-padding-left; |
| @detail-table-header-padding-y: @table-header-padding-y + 5; |
| @detail-table-row-padding-y: @table-row-padding-y + 5; |
| @detail-table-footer-with-handle-margin-left: 30px; |
| @dialog-border-top-size: 5px; |
| @form-title-margin-top: 10px; |
| @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; |
| @login-box-font-size: 16px; |
| @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; |
| @messagebox-label-padding: 20px; |
| @messagebox-max-width: 330px; |
| @mobile-popup-title-margin-right: 30px; |
| @mobile-popup-title-margin-top: 10px; |
| @mode-padding: 5px; |
| @mode-padding-dense: 3px; |
| @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-size: 18px; |
| @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: 14px; |
| @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; |
| @radio-button-circle-size: 18px; |
| @radio-button-border-width: 1px; |
| @radio-button-label-padding-top: 2px; |
| @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: 14px; |
| @scrollbar-thumb-size: 4px; |
| @scrollbar-thumb-hover-size: 8px; |
| @search-outline-panel-padding-bottom: 14px; |
| @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.5px; |
| @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-cell-padding-left: 8px; /* also used in scout.Column.prototype.buildCell */ |
| @table-cell-padding-right: 4px; /* also used in scout.Column.prototype.buildCell */ |
| @table-cell-padding-right-last: @scrollbar-size; |
| @table-control-content-padding: 10px; |
| @table-control-container-height: 345px; |
| @table-control-container-height-dense: 320px; |
| @table-control-padding: 14px; |
| @table-control-resize-border-width: 3px; |
| @table-control-tab-item-title-padding-top: 12px; |
| @table-control-tab-item-title-padding-bottom: @table-control-tab-item-title-padding-top; |
| @table-footer-height: 52px; |
| @table-header-menu-cmd-height: 30px; |
| @table-header-menu-cmd-width: 43px; |
| @table-header-menu-group-padding-top: 10px; |
| @table-header-menu-padding: 10px; |
| @table-header-padding-left: @table-cell-padding-left; |
| @table-header-padding-right: @table-cell-padding-right; |
| @table-header-padding-y: @table-row-padding-y; |
| @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-menubar-padding: 8px; |
| @table-row-padding-y: 7px; |
| @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; |
| @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: @tag-field-tag-margin-y; |
| @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: 14px; |
| @tooltip-border-size: 1px; |
| @tooltip-border: @tooltip-border-size solid @tooltip-border-color; |
| @tooltip-menu-padding-y: 5px; |
| @tooltip-padding-x: 12px; |
| @tooltip-padding-y: 8px; |
| @tree-node-bitmap-icon-size: 16px; |
| @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: 14px; |
| @tree-node-control-padding-left: 13px; |
| @tree-node-font-icon-line-height: 15px; |
| @tree-node-padding-left: 28px; |
| @tree-node-padding-right: 6px; |
| @tree-node-padding-y: 6px; |
| @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-progress-border-width: 1px; |
| @wizard-progress-content-h-padding: 15px; |
| @wizard-progress-compact-height: 44px; |
| @wizard-progress-compact-content-h-padding: 7px; |
| @wizard-progress-compact-icon-container-size: 28px; |
| @wizard-progress-compact-icon-container-margin-right: 8px; |
| @wizard-progress-height: 50px; |
| @wizard-progress-icon-container-border-width: 1px; |
| @wizard-progress-icon-container-margin-right: 12px; |
| @wizard-progress-icon-container-padding: 4px; |
| @wizard-progress-icon-container-size: 33px; |
| |
| /* -------------------------------- */ |
| /* Other sizes */ |
| /* -------------------------------- */ |
| @iphone5-height: 568px; |
| @iphone5-width: 320px; |
| @iphone6-width: 375px; |
