kendo-ui-core/css/web/kendo.common.less

/*!
 * Copyright 2019 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@input-height: 1.65em;
@input-default-width: 12.4em;
@input-border-width: 1px;
@input-padding-x: 0;
@input-padding-y: 0.17857143em;
@input-indent: .571em;
@input-offset: (@input-height + .35em);

@icon-size: 16px;
@input-icon-width: calc(@input-height + .35em);

@combobox-padding-x: @input-offset;

@input-clear-icon-offset: ~"( (@{input-offset} - @{grid-size})/2 )";
@combobox-clear-icon-offset: ~"( @{input-clear-icon-offset} + @{input-offset} )";
@multiselect-clear-icon-top-offset: ~"( (@{input-height} - @{grid-size}) / 2 + @{input-padding-y} + 1px )";

@editor-icon-size: 2em;
@menu-link-padding: .5em 1.1em .4em;
@button-padding-x: 8px;
@button-padding-y: 4px;
@button-padding: @button-padding-y @button-padding-x;
@button-line-height: (20 / 14);
@disabled-button-opacity: 0.6;

@treeview-inner-padding: 1px 0.3333em 1px 0.25em;
@treeview-inner-margin: 1px 0 1px 0.16666em;
@scheduler-link-padding: 0 1.1em;
@grid-header-padding: .22em .2em .28em;
@grid-th-padding: .5em .6em .4em .6em;
@icon-positioning: "default";

@window-border-width: 1px;
@window-border-style: solid;

@window-sizes: {
    sm: 300px;
    md: 800px;
    lg: 1200px;
};

@window-titlebar-padding-x: 12px;
@window-titlebar-padding-y: 8px;
@window-titlebar-border-width: 0 0 1px;
@window-titlebar-border-style: solid;

@window-title-font-size: 1.2em;
@window-title-line-height: 1.25;

@window-inner-padding-x: @window-titlebar-padding-x;
@window-inner-padding-y: @window-inner-padding-x;

@grid-padding-x: 8px;
@grid-padding-y: 6px;

@grid-header-padding-x: @grid-padding-x;
@grid-header-padding-y: @grid-padding-y;

@grid-footer-padding-x: @grid-header-padding-x;
@grid-footer-padding-y: @grid-header-padding-y;

@grid-cell-padding-x: @grid-padding-x;
@grid-cell-padding-y: @grid-padding-y;

@grid-search-width: 15.7em;

// Calendar
@calendar-padding-x: 0;
@calendar-padding-y: 0;
@calendar-border-width: 1px;
@calendar-border-radius: 4px;
@calendar-font-size: 14px;
@calendar-line-height: (20 / 14);

@calendar-header-padding-x: 2px;
@calendar-header-padding-y: 2px;
@calendar-header-border-width: 1px;
@calendar-header-button-padding-x: 4px;
@calendar-header-button-padding-y: 4px;
@calendar-header-button-border-width: 0;
@calendar-header-button-border-radius: @calendar-border-radius;

@calendar-content-padding-x: 0;
@calendar-content-padding-y: 0;

@calendar-cell-padding-x: .5em;
@calendar-cell-padding-y: .5em;
@calendar-cell-border-radius: @calendar-border-radius;
@calendar-cell-line-height: (20 / 14);
@calendar-cell-size: ( (34px / 14px ) * 1em );

@calendar-header-cell-padding-x: 2px;
@calendar-header-cell-padding-y: (@calendar-cell-padding-y / 2);
@calendar-header-cell-border-width: 1px;
@calendar-header-cell-font-size: 12px;
@calendar-header-cell-line-height: (20 / 14);
@calendar-header-cell-size: @calendar-cell-size;

@calendar-meta-cell-size: ( (60px / @calendar-font-size) * 1em );

// Multiviewcalendar
@multiviewcalendar-font-size: @calendar-font-size;
@multiviewcalendar-line-height: @calendar-line-height;

@multiviewcalendar-header-padding-x: 16px;
@multiviewcalendar-header-padding-y: 8px;

@multiviewcalendar-content-padding-x: 16px;
@multiviewcalendar-content-padding-y: 8px;

@multiviewcalendar-cell-padding-x: @calendar-cell-padding-x;
@multiviewcalendar-cell-padding-y: @calendar-cell-padding-y;
@multiviewcalendar-cell-border-radius: @calendar-border-radius;
@multiviewcalendar-cell-line-height: @calendar-cell-line-height;
@multiviewcalendar-cell-size: @calendar-cell-size;

@multiviewcalendar-centuryview-cell-padding-x: @multiviewcalendar-cell-padding-x;
@multiviewcalendar-centuryview-cell-padding-y: @multiviewcalendar-cell-padding-y;

@multiviewcalendar-header-cell-font-size: 12px;

// ScrollView
@scrollview-pagebutton-size: 8px;
@scrollview-navigation-size: 4.5em;

@scrollview-pager-offset: 20px;
@scrollview-pager-item-spacing: 20px;
@scrollview-pager-item-border-width: 1px;
@scrollview-pager-height: calc(@scrollview-pagebutton-size + (2 * @scrollview-pager-item-border-width) + (@scrollview-pager-item-spacing / 2 ));

// Switch
@switch-size: 5em;
@switch-border-radius: @switch-size;
@switch-font-size: 12px;

@switch-track-size: null;
@switch-container-border-width: 1px;
@switch-container-padding-x: 2px;
@switch-container-padding-y: @switch-container-padding-x;

@switch-handle-size: (.4 * @switch-size);
@switch-handle-border-radius: @switch-size;
@switch-handle-border-width: 1px;

@switch-label-display: inline;
@switch-label-outer-spacing: 8px;
@switch-label-inner-spacing: 2px;
@switch-label-spacing: calc(@switch-label-outer-spacing + @switch-label-inner-spacing);

@switch-label-position: calc(@switch-label-outer-spacing - @switch-container-border-width);
@switch-label-width: calc(100% - @switch-handle-size - @switch-label-spacing - @switch-container-padding-x);
@switch-on-left-x: calc(100% - @switch-handle-size);

// Pager
@pager-button-border-radius-sm: 3px;
@pager-button-border-radius-lg: 1.0833em;
@pager-button-width: 2em;
@pager-button-height: @pager-button-width;
@pager-button-margin: 0.08333em;

// Pdf Viewer
@pdf-viewer-page-spacing: 30px;

@pdf-viewer-action-buttons-top-offset: 10px;
@pdf-viewer-action-buttons-padding: 10px;

@pdf-viewer-search-dialog-input-button-height: @input-height;
@pdf-viewer-search-dialog-textbox-padding-x: @input-padding-y;

@pdf-viewer-search-dialog-matches-width: 4.5em;

@pdf-viewer-search-dialog-spacing: 0.28571428em;
@pdf-viewer-search-dialog-button-spacing: @pdf-viewer-search-dialog-spacing;

// Card
@form-line-height: (20 / 14);
@card-title-font-size: 19px;
@card-subtitle-font-size: 12px;
@card-border-radius: 4px;
@card-border-width: 1px;
@card-header-padding-x: 16px;
@card-header-padding-y: 12px;
@card-header-border-width: 1px;
@card-body-padding-x: 16px;
@card-body-padding-y: 12px;
@paragraph-margin-bottom: 8px;
@card-title-margin-bottom: 8px;
@card-subtitle-margin-bottom: 8px;
@card-actions-padding-x: 16px;
@card-actions-padding-y: 8px;
@card-actions-border-width: 1px;
@card-button-padding-x: 8px;
@card-button-padding-y: 8px;
@card-deck-gap: 16px;

@card-deck-scroll-button-radius: 0;
@card-deck-scroll-button-offset: -1px;

@card-callout-width: 20px;
@card-callout-height: 20px;

// Drawer
@drawer-border-width: 1px;
@drawer-content-padding-x: 8px;
@drawer-content-padding-y: 8px;

@drawer-scrollbar-width: 7px;
@drawer-scrollbar-radius: 20px;

@drawer-item-padding-x: 8px;
@drawer-item-padding-y: 8px;
@drawer-item-font-size: 16px;
@drawer-item-line-height: 1.5;

@drawer-icon-size: 18px;
@drawer-mini-initial-width: calc(4 * @drawer-item-padding-x + @drawer-icon-size);


// Rating
@rating-container-margin-x: 4px;

@rating-item-padding-x: 4px;
@rating-item-padding-y: 4px;

@rating-label-margin-x: 8px;
@rating-label-margin-y: 4px;
@rating-label-line-height: 1.5;

@rating-font-size: 14px;
@rating-icon-size: 24px;


// Spreadsheet
@spreadsheet-insert-image-dialog-margin: 0 1em;
@spreadsheet-insert-image-dialog-border-style: dashed;
@spreadsheet-insert-image-dialog-border-width: 2px;

@spreadsheet-insert-image-dialog-preview-width: 355px;
@spreadsheet-insert-image-dialog-preview-height: 200px;
@spreadsheet-insert-image-dialog-preview-padding: 10px;
@spreadsheet-insert-image-dialog-text-padding: 10px;

@spreadsheet-drawing-outline-style: solid;
@spreadsheet-drawing-outline-width: 2px;

@spreadsheet-drawing-handle-width: 6px;
@spreadsheet-drawing-handle-height: 6px;
@spreadsheet-drawing-handle-border-style: solid;
@spreadsheet-drawing-handle-border-width: 1px;


// Notification
@notification-border-width: 1px;

@notification-padding-x: 0.5em;
@notification-padding-y: 0.6em;
@notification-padding-end: 20px;

@notification-icon-spacing: 4px;


// Filter
@filter-bottom-margin: 2.1em;
@filter-line-size: 1px;
@filter-padding-x: 8px;
@filter-padding-y: 4px;
@filter-operator-dropdown-width: 15em;

// Timeline
@timeline-border-radius: 2px;
@timeline-border-radius-lg: 4px;
@timeline-spacing-x: 40px;
@timeline-spacing-y: 40px;
@timeline-items-padding: 16px;
@timeline-mobile-spacing-x: 16px;
@timeline-mobile-spacing-y: 16px;

@timeline-track-arrow-width: 30px;
@timeline-track-arrow-height: 30px;

@timeline-track-size: 6px;
@timeline-track-border-width: 1px;
@timeline-track-margin-bottom: 16px;
@timeline-track-start-calc: calc(@timeline-track-arrow-width - 2 * @timeline-track-border-width);
@timeline-track-end-calc: calc(@timeline-track-arrow-width - 2 * @timeline-track-border-width);

@timeline-track-event-offset: 36px;

@timeline-flag-padding-x: @button-padding-x;
@timeline-flag-padding-y: @button-padding-y;
@timeline-flag-line-height: @button-line-height;
@timeline-flag-min-width: 80px;
@timeline-flag-max-width: calc(@timeline-flag-min-width + 2 * @timeline-spacing-x);
@timeline-mobile-flag-max-width: calc(@timeline-flag-min-width + 2 * @timeline-mobile-spacing-x);
@timeline-horizontal-flag-min-width: 60px;

@timeline-flag-callout-width: 10px;
@timeline-flag-callout-height: 10px;

@timeline-flag-offset-bottom: 4px;
@timeline-flag-margin-bottom-calc: calc(@timeline-track-size + 2 * @timeline-track-border-width + @timeline-flag-offset-bottom + @timeline-flag-callout-height);

@timeline-date-margin-bottom: 8px;
@timeline-date-width: 50px;

@timeline-vertical-padding-calc: calc(@timeline-spacing-x + (@timeline-flag-min-width - @timeline-track-size) / 2);
@timeline-vertical-padding-with-dates-calc: calc(@timeline-vertical-padding-calc + @timeline-date-width);
@timeline-mobile-vertical-padding-calc: calc(@timeline-mobile-spacing-x + (@timeline-flag-min-width - @timeline-track-size) / 2);
@timeline-mobile-vertical-padding-with-dates-calc: calc(@timeline-mobile-vertical-padding-calc + @timeline-date-width);

@timeline-circle-width: 16px;
@timeline-circle-height: 16px;

@timeline-collapse-arrow-padding-x: 8px;

@timeline-event-width: 400px;
@timeline-event-height: 600px;
@timeline-event-min-height-calc: calc(2 * @timeline-track-event-offset);


@import "common/all.less";