saas-one/frontend/operation-web/ext/modern/theme-neptune/sass/var/Panel.scss

/**
 * @class Ext.Panel
 */

/**
 * @var {color}
 * Panel background-color
 */
$panel-background-color: dynamic($background-color);

/**
 * @var {color/list}
 * Panel border-color
 */
$panel-border-color: dynamic($base-color);

/**
 * @var {number/list}
 * Panel border-width
 */
$panel-border-width: dynamic(1px);

/**
 * @var {string/list}
 * Panel border-style
 */
$panel-border-style: dynamic(solid);

/**
 * @var {number/list}
 * Panel border-radius
 */
$panel-border-radius: dynamic(null);

/**
 * @var {number/list}
 * Panel border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-border-radius-big: dynamic($panel-border-radius);

/**
 * @var {color}
 * Panel body background-color
 */
$panel-body-background-color: dynamic($panel-background-color);

/**
 * @var {color}
 * Panel body text color
 */
$panel-body-color: dynamic($color);

/**
 * @var {color}
 * Panel body border-color
 */
$panel-body-border-color: dynamic($neutral-medium-dark-color);

/**
 * @var {number/list}
 * Panel body border-width
 */
$panel-body-border-width: dynamic(1px);

/**
 * @var {number/list}
 * Panel body border-style
 */
$panel-body-border-style: dynamic(solid);

/**
 * @var {string/number}
 * Panel body font-weight
 */
$panel-body-font-weight: dynamic($font-weight-normal);

/**
 * @var {number}
 * Panel body font-size
 */
$panel-body-font-size: dynamic($font-size);

/**
 * @var {number}
 * Panel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-body-font-size-big: dynamic($font-size-big);

/**
 * @var {number}
 * Panel body line-height
 */
$panel-body-line-height: dynamic($line-height);

/**
 * @var {number}
 * Panel body line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-body-line-height-big: dynamic($panel-body-line-height);

/**
 * @var {string}
 * Panel body font-family
 */
$panel-body-font-family: dynamic($font-family);

/**
 * @var {number/list}
 * Panel body padding
 */
$panel-body-padding: dynamic(null);

/**
 * @var {number/list}
 * Panel body padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-body-padding-big: dynamic(null);

/**
 * @var {color}
 * Panel Header background-color
 */
$panel-header-background-color: dynamic($base-color);

/**
 * @var {string/list}
 * Panel Header background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 */
$panel-header-background-gradient: dynamic(null);

/**
 * @var {color}
 * Panel Header text color
 */
$panel-header-color: dynamic(#fff);

/**
 * @var {color/list}
 * Panel Header border-color
 */
$panel-header-border-color: dynamic($panel-border-color);

/**
 * @var {number/list}
 * Panel Header border-width
 */
$panel-header-border-width: dynamic($panel-border-width);

/**
 * @var {string/list}
 * Panel Header border-style
 */
$panel-header-border-style: dynamic(solid);

/**
 * @var {string/number}
 * Panel Header font-weight
 */
$panel-header-font-weight: dynamic($font-weight-bold);

/**
 * @var {number}
 * Panel Header font-size
 */
$panel-header-font-size: dynamic($font-size);

/**
 * @var {number}
 * Panel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-font-size-big: dynamic($font-size-big);

/**
 * @var {number}
 * Panel Header line-height
 */
$panel-header-line-height: dynamic(16px);

/**
 * @var {number}
 * Panel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-line-height-big: dynamic(24px);

/**
 * @var {string}
 * Panel Header font-family
 */
$panel-header-font-family: dynamic($font-family);

/**
 * @var {number/list}
 * Panel Header padding
 */
$panel-header-padding: dynamic(0 10px);

/**
 * @var {number/list}
 * Panel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-padding-big: dynamic(0 15px);

/**
 * @var {number/list}
 * Panel Header Title padding
 */
$panel-header-title-padding: dynamic(7px 0);

/**
 * @var {number/list}
 * Panel Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-title-padding-big: dynamic(9px 0);

/**
 * @var {number}
 * Panel Header Title opacity.
 */
$panel-header-title-opacity: dynamic(null);

/**
 * @var {shadow}
 * Panel Header Shadow
 */
$panel-header-shadow: dynamic(null);

/**
 * @var {number}
 * Z-Index for the Panel Header, should be used with shadows to raise header above content
 */
$panel-header-z-index: dynamic(null);

/**
 * @var {number}
 * Panel Header min-height
 */
$panel-header-min-height: dynamic(36px);

/**
 * @var {number}
 * Panel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-min-height-big: dynamic(44px);

/**
 * @var {color}
 * Panel Header icon color.
 */
$panel-header-icon-color: dynamic(rgba($panel-header-color, .5));

/**
 * @var {number}
 * Panel Header icon size
 */
$panel-header-icon-size: dynamic($panel-header-line-height);

/**
 * @var {number}
 * Panel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-icon-size-big: dynamic($panel-header-line-height-big);

/**
 * @var {number}
 * Panel Header icon font-size.  Used for configuring the size of font icons
 */
$panel-header-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Panel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-icon-font-size-big: dynamic(null);

/**
 * @var {number}
 * The space between the Panel Header icon and text when the icon is horizontally aligned
 */
$panel-header-icon-horizontal-spacing: dynamic(6px);

/**
 * @var {number}
 * The space between the Panel Header icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-icon-horizontal-spacing-big: dynamic(8px);

/**
 * @var {number}
 * The space between the Panel Header icon and text when the icon is vertically aligned
 */
$panel-header-icon-vertical-spacing: dynamic(2px);

/**
 * @var {number}
 * The space between the Panel Header icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-header-icon-vertical-spacing-big: dynamic(2px);

/**
 * @var {number}
 * Panel Header icon opacity
 */
$panel-header-icon-opacity: dynamic(null);

/**
 * @var {color}
 * Panel Tool color
 */
$panel-tool-color: dynamic($panel-header-color);

/**
 * @var {number}
 * Panel Tool color when hovered
 */
$panel-tool-hovered-color: dynamic(null);

/**
 * @var {number}
 * Panel Tool color when pressed
 */
$panel-tool-pressed-color: dynamic(null);

/**
 * @var {number}
 * Panel Tool color when disabled
 */
$panel-tool-disabled-color: dynamic(null);

/**
 * @var {color}
 * Panel Tool background-color
 */
$panel-tool-background-color: dynamic(null);

/**
 * @var {number}
 * Panel Tool background-color when hovered
 */
$panel-tool-hovered-background-color: dynamic(null);

/**
 * @var {number}
 * Panel Tool background-color when pressed
 */
$panel-tool-pressed-background-color: dynamic(null);

/**
 * @var {number}
 * Panel Tool background-color when disabled
 */
$panel-tool-disabled-background-color: dynamic(null);

/**
 * @var {number}
 * Panel Tool opacity
 */
$panel-tool-opacity: dynamic(.5);

/**
 * @var {number}
 * Panel Tool opacity when hovered
 */
$panel-tool-hovered-opacity: dynamic(.6);

/**
 * @var {number}
 * Panel Tool opacity when pressed
 */
$panel-tool-pressed-opacity: dynamic(.7);

/**
 * @var {number}
 * Panel Tool opacity when disabled
 */
$panel-tool-disabled-opacity: dynamic(null);

/**
 * @var {number}
 * Panel Tool border radius
 */
$panel-tool-border-radius: dynamic(null);

/**
 * @var {number}
 * Panel Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-tool-border-radius-big: dynamic(null);

/**
 * @var {number}
 * Panel Tool size
 */
$panel-tool-size: dynamic(null);

/**
 * @var {number}
 * Panel Tool size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-tool-size-big: dynamic(null);

/**
 * @var {number}
 * Panel Tool font-size
 */
$panel-tool-font-size: dynamic($panel-tool-size);

/**
 * @var {number}
 * Panel Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-tool-font-size-big: dynamic($panel-tool-size-big);

/**
 * @var {number}
 * The space between Panel Tools
 */
$panel-tool-spacing: dynamic(null);

/**
 * @var {number}
 * The space between Panel Tools in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$panel-tool-spacing-big: dynamic(null);

/**
 * @var {string}
 * Panel Tool cursor
 */
$panel-tool-cursor: dynamic(null);

/**
 * @var {string}
 * Panel Tool cursor when disabled
 */
$panel-tool-disabled-cursor: dynamic(null);

/**
 * @var {number}
 * Panel Tool outline width when focused
 */
$panel-tool-focused-outline-width: dynamic(null);

/**
 * @var {string}
 * Panel Tool outline style when focused
 */
$panel-tool-focused-outline-style: dynamic(null);

/**
 * @var {color}
 * Panel Tool outline color when focused
 */
$panel-tool-focused-outline-color: dynamic($panel-header-color);

/**
 * @var {number}
 * Panel Tool outline offset when focused
 */
$panel-tool-focused-outline-offset: dynamic(null);

/**
 * @var {color}
 * Panel anchor border-color
 */
$panel-anchor-border-color: dynamic($panel-border-color);

/**
 * @var {color}
 * Panel anchor background-color
 */
$panel-anchor-background-color: dynamic($panel-body-background-color);

/**
 * @var {number}
 * The height (in all orientations) of the anchor arrow
 */
$panel-anchor-height: dynamic(10px);

/**
 * @var {number}
 * The width (in all orientations) of the anchor arrow.
 */
$panel-anchor-width: dynamic(20px);

/**
 * @var {number}
 * The extra spacing beyond the tip of the anchor arrow to prevent the pointer touching
 * the target;
 */
$panel-anchor-margin: dynamic(1px);

/**
 * @var {string}
 * `true` to include {@link #manageBorders border management} rules
 */
$panel-manage-borders: dynamic(true);

/**
 * @var {map}
 * Parameters for the "light" panel UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$panel-light-ui: dynamic((
    background-color: $neutral-light-color,
    border-color: mix($base-light-color, $neutral-light-color, 30%),
    body-border-color: mix($base-light-color, $neutral-light-color, 30%),
    header-background-color: mix($base-light-color, $neutral-light-color, 30%),
    header-border-color: mix($base-light-color, $neutral-light-color, 30%),
    header-color: #666,
    header-icon-color: rgba(#666, .5),
    tool-color: #666,
    tool-focused-outline-color: $base-color
));

/**
 * Creates a visual theme for a Panel.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=panel] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {String} [$header-xtype=panelheader] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors for the header component.  For use by UI mixins of derived classes.
 *
 * @param {String} [$title-xtype=paneltitle] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors for the title component.  For use by UI mixins of derived classes.
 *
 * @param {String} [$tool-xtype=paneltool] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors for tools.  For use by UI mixins of derived classes.
 *
 * @param {color} $background-color
 * Panel background-color
 *
 * @param {color/list} $border-color
 * Panel border-color
 *
 * @param {number/list} $border-width
 * Panel border-width
 *
 * @param {string/list} $border-style
 * Panel border-style
 *
 * @param {number/list} $border-radius
 * Panel border-radius
 *
 * @param {number/list} $border-radius-big
 * Panel border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $body-background-color
 * Panel body background-color
 *
 * @param {color} $body-color
 * Panel body text color
 *
 * @param {color} $body-border-color
 * Panel body border-color
 *
 * @param {number/list} $body-border-width
 * Panel body border-width
 *
 * @param {number/list} $body-border-style
 * Panel body border-style
 *
 * @param {string/number} $body-font-weight
 * Panel body font-weight
 *
 * @param {number} $body-font-size
 * Panel body font-size
 *
 * @param {number} $body-font-size-big
 * Panel body font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $body-line-height
 * Panel body line-height
 *
 * @param {number} $body-line-height-big
 * Panel body line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $body-font-family
 * Panel body font-family
 *
 * @param {number/list} $body-padding
 * Panel body padding
 *
 * @param {number/list} $body-padding-big
 * Panel body padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $header-background-color
 * Panel Header background-color
 *
 * @param {string/list} $header-background-gradient
 * Panel Header background-gradient.  Can be either the name of a gradient defined by
 * {@link Global_CSS#background-gradient} or a list of color stops.
 *
 * @param {color} $header-color
 * Panel Header text color
 *
 * @param {color/list} $header-border-color
 * Panel Header border-color
 *
 * @param {number/list} $header-border-width
 * Panel Header border-width
 *
 * @param {string/list} $header-border-style
 * Panel Header border-style
 *
 * @param {string/number} $header-font-weight
 * Panel Header font-weight
 *
 * @param {number} $header-font-size
 * Panel Header font-size
 *
 * @param {number} $header-font-size-big
 * Panel Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-line-height
 * Panel Header line-height
 *
 * @param {number} $header-line-height-big
 * Panel Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $header-font-family
 * Panel Header font-family
 *
 * @param {number/list} $header-padding
 * Panel Header padding
 *
 * @param {number/list} $header-padding-big
 * Panel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $header-title-padding
 * Panel Header Title padding
 *
 * @param {number/list} $header-title-padding-big
 * Panel Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-title-opacity
 * Panel Header Title opacity
 *
 * @param {shadow} $header-shadow
 * Panel Header Shadow
 *
 * @param {number} $header-z-index
 * Z-Index for the Panel Header, should be used with shadows to raise header above content
 *
 * @param {number} $header-min-height
 * Panel Header min-height
 *
 * @param {number} $header-min-height-big
 * Panel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $header-icon-color
 * Panel Header icon color.
 *
 * @param {number} $header-icon-size
 * Panel Header icon size
 *
 * @param {number} $header-icon-size-big
 * Panel Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-font-size
 * Panel Header icon font-size.  Used for configuring the size of font icons
 *
 * @param {number} $header-icon-font-size-big
 * Panel Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-horizontal-spacing
 * The space between the Panel Header icon and text when the icon is horizontally aligned
 *
 * @param {number} $header-icon-horizontal-spacing-big
 * The space between the Panel Header icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-vertical-spacing
 * The space between the Panel Header icon and text when the icon is vertically aligned
 *
 * @param {number} $header-icon-vertical-spacing-big
 * The space between the Panel Header icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-opacity
 * Panel Header icon opacity
 *
 * @param {color} $tool-color
 * Panel Tool color
 *
 * @param {number} $tool-hovered-color
 * Panel Tool color when hovered
 *
 * @param {number} $tool-pressed-color
 * Panel Tool color when pressed
 *
 * @param {number} $tool-disabled-color
 * Panel Tool color when disabled
 *
 * @param {color} $tool-background-color
 * Panel Tool background-color
 *
 * @param {number} $tool-hovered-background-color
 * Panel Tool background-color when hovered
 *
 * @param {number} $tool-pressed-background-color
 * Panel Tool background-color when pressed
 *
 * @param {number} $tool-disabled-background-color
 * Panel Tool background-color when disabled
 *
 * @param {number} $tool-opacity
 * Panel Tool opacity
 *
 * @param {number} $tool-hovered-opacity
 * Panel Tool opacity when hovered
 *
 * @param {number} $tool-pressed-opacity
 * Panel Tool opacity when pressed
 *
 * @param {number} $tool-disabled-opacity
 * Panel Tool opacity when disabled
 *
 * @param {number} $tool-border-radius
 * Panel Tool border radius
 *
 * @param {number} $tool-border-radius-big
 * Panel Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-size
 * Panel Tool size
 *
 * @param {number} $tool-size-big
 * Panel Tool size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-font-size
 * Panel Tool font-size
 *
 * @param {number} $tool-font-size-big
 * Panel Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-spacing
 * The space between Panel Tools
 *
 * @param {number} $tool-spacing-big
 * The space between Panel Tools in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $tool-cursor
 * Panel Tool cursor
 *
 * @param {string} $tool-disabled-cursor
 * Panel Tool cursor when disabled
 *
 * @param {number} $tool-focused-outline-width
 * Panel Tool outline width when focused
 *
 * @param {string} $tool-focused-outline-style
 * Panel Tool outline style when focused
 *
 * @param {color} $tool-focused-outline-color
 * Panel Tool outline color when focused
 *
 * @param {number} $tool-focused-outline-offset
 * Panel Tool outline offset when focused
 *
 * @param {color} $anchor-border-color
 * Panel anchor border-color
 *
 * @param {color} $anchor-background-color
 * Panel anchor background-color
 *
 * @param {number} $anchor-height
 * The height (in all orientations) of the anchor arrow
 *
 * @param {number} $anchor-width
 * The width (in all orientations) of the anchor arrow.
 *
 * @param {number} $anchor-margin
 * The extra spacing beyond the tip of the anchor arrow to prevent the pointer touching
 * the target;
 *
 * @param {string} $manage-borders
 * `true` to include {@link #manageBorders border management} rules
 */
@mixin panel-ui(
    $ui: null,
    $xtype: panel,
    $header-xtype: panelheader,
    $title-xtype: paneltitle,
    $tool-xtype: paneltool,
    $background-color: null,
    $border-color: null,
    $border-width: null,
    $border-style: null,
    $border-radius: null,
    $border-radius-big: null,
    $body-background-color: null,
    $body-color: null,
    $body-border-color: null,
    $body-border-width: null,
    $body-border-style: null,
    $body-font-weight: null,
    $body-font-size: null,
    $body-font-size-big: null,
    $body-line-height: null,
    $body-line-height-big: null,
    $body-font-family: null,
    $body-padding: null,
    $body-padding-big: null,
    $header-background-color: null,
    $header-background-gradient: null,
    $header-color: null,
    $header-border-color: null,
    $header-border-width: null,
    $header-border-style: null,
    $header-font-weight: null,
    $header-font-size: null,
    $header-font-size-big: null,
    $header-line-height: null,
    $header-line-height-big: null,
    $header-font-family: null,
    $header-padding: null,
    $header-padding-big: null,
    $header-title-padding: null,
    $header-title-padding-big: null,
    $header-title-opacity: null,
    $header-shadow: null,
    $header-z-index: null,
    $header-min-height: null,
    $header-min-height-big: null,
    $header-icon-color: null,
    $header-icon-size: null,
    $header-icon-size-big: null,
    $header-icon-font-size: null,
    $header-icon-font-size-big: null,
    $header-icon-horizontal-spacing: null,
    $header-icon-horizontal-spacing-big: null,
    $header-icon-vertical-spacing: null,
    $header-icon-vertical-spacing-big: null,
    $header-icon-opacity: null,
    $tool-color: null,
    $tool-hovered-color: null,
    $tool-pressed-color: null,
    $tool-disabled-color: null,
    $tool-background-color: null,
    $tool-hovered-background-color: null,
    $tool-pressed-background-color: null,
    $tool-disabled-background-color: null,
    $tool-opacity: null,
    $tool-hovered-opacity: null,
    $tool-pressed-opacity: null,
    $tool-disabled-opacity: null,
    $tool-border-radius: null,
    $tool-border-radius-big: null,
    $tool-size: null,
    $tool-size-big: null,
    $tool-font-size: null,
    $tool-font-size-big: null,
    $tool-spacing: null,
    $tool-spacing-big: null,
    $tool-cursor: null,
    $tool-disabled-cursor: null,
    $tool-focused-outline-width: null,
    $tool-focused-outline-style: null,
    $tool-focused-outline-color: null,
    $tool-focused-outline-offset: null,
    $anchor-border-color: null,
    $anchor-background-color: null,
    $anchor-height: null,
    $anchor-width: null,
    $anchor-margin: null,
    $manage-borders: $panel-manage-borders
) {
    $ui-suffix: ui-suffix($ui);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
		background-color: $background-color;
        border-radius: $border-radius;

        @if $enable-big {
            .#{$prefix}big {
                border-radius: $border-radius-big;
            }
        }

        @if not $manage-borders {
            @include border($border-width, $border-style, $border-color);
        }

        @if $anchor-border-color == null {
            $anchor-border-color: $border-color;
        }

        @if $anchor-background-color == null {
            $anchor-background-color: $body-background-color;
        }

        $anchor-border-width: $border-width;

        > .#{$prefix}anchor-el {
            // This is read and used as the extra offset between the anchor point
            // and the target.
            margin: $anchor-margin;

            .#{$prefix}pointer-el {
                fill: $anchor-background-color;
                stroke-width: $anchor-border-width;
                stroke: $anchor-border-color;
            }

            &.#{$prefix}top {
                width: $anchor-width;
                height: $anchor-height;
                top: -$anchor-height;
                padding-bottom: $border-width;
            }

            &.#{$prefix}bottom {
                width: $anchor-width;
                height: $anchor-height;
                bottom: -$anchor-height;
                padding-top: $border-width;
            }

            &.#{$prefix}left {
                height: $anchor-width;
                width: $anchor-height;
                left: -$anchor-height;
                padding-right: $border-width;

                .#{$prefix}pointer-el {
                    transform-origin: ($anchor-width / 2) ($anchor-width / 2);
                }
            }

            &.#{$prefix}right {
                height: $anchor-width;
                width: $anchor-height;
                right: -$anchor-height;
                padding-left: $border-width;

                .#{$prefix}pointer-el {
                    transform-origin: ($anchor-height / 2) ($anchor-height / 2);
                }
            }
        }
    }

    .#{$prefix}#{$xtype}#{$ui-suffix}-body-el {
        padding: $body-padding;
        background-color: $body-background-color;
        color: $body-color;
        @include border($body-border-width, $body-border-style, $body-border-color);
        @include font($body-font-weight, $body-font-size, $body-line-height, $body-font-family);

        @if $enable-big {
            .#{$prefix}big & {
                font-size: $body-font-size-big;
                line-height: $body-line-height-big;
                padding: $body-padding-big;
            }
        }
    }

    // When a boxscroller is present we move the body border to the boxscroller element so
    // that it surrounds the items and tools
    .#{$prefix}#{$xtype}#{$ui-suffix}-boxscroller {
        @include border($body-border-width, $body-border-style, $body-border-color);

        > .#{$prefix}boxscroller-body > .#{$prefix}body-el {
            border: 0;
        }
    }

    @if $manage-borders {
        @include border-management(
            $parent-cls: #{$xtype}#{$ui-suffix},
            $border-width: $border-width,
            $border-color: $border-color,
            $border-radius: $border-radius,
            $border-radius-big $border-radius-big
        );
    }

    @include panelheader-ui(
        $ui: $ui,
        $xtype: $header-xtype,
        $background-color: $header-background-color,
        $background-gradient: $header-background-gradient,
        $border-color: $header-border-color,
        $border-width: $header-border-width,
        $border-style: $header-border-style,
        $padding: $header-padding,
        $padding-big: $header-padding-big,
        $shadow: $header-shadow,
        $z-index: $header-z-index,
        $min-height: $header-min-height,
        $min-height-big: $header-min-height-big
    );

    @include paneltitle-ui(
        $ui: $ui,
        $xtype: $title-xtype,
        $color: $header-color,
        $font-weight: $header-font-weight,
        $font-size: $header-font-size,
        $font-size-big: $header-font-size-big,
        $line-height: $header-line-height,
        $line-height-big: $header-line-height-big,
        $font-family: $header-font-family,
        $padding: $header-title-padding,
        $padding-big: $header-title-padding-big,
        $opacity: $header-title-opacity,
        $icon-color: $header-icon-color,
        $icon-size: $header-icon-size,
        $icon-size-big: $header-icon-size-big,
        $icon-font-size: $header-icon-font-size,
        $icon-font-size-big: $header-icon-font-size-big,
        $icon-horizontal-spacing: $header-icon-horizontal-spacing,
        $icon-horizontal-spacing-big: $header-icon-horizontal-spacing-big,
        $icon-vertical-spacing: $header-icon-vertical-spacing,
        $icon-vertical-spacing-big: $header-icon-vertical-spacing-big,
        $icon-opacity: $header-icon-opacity
    );

    @include tool-ui(
        $ui: $ui,
        $xtype: $tool-xtype,
        $color: $tool-color,
        $hovered-color: $tool-hovered-color,
        $pressed-color: $tool-pressed-color,
        $disabled-color: $tool-disabled-color,
        $background-color: $tool-background-color,
        $hovered-background-color: $tool-hovered-background-color,
        $pressed-background-color: $tool-pressed-background-color,
        $disabled-background-color: $tool-disabled-background-color,
        $opacity: $tool-opacity,
        $hovered-opacity: $tool-hovered-opacity,
        $pressed-opacity: $tool-pressed-opacity,
        $disabled-opacity: $tool-disabled-opacity,
        $border-radius: $tool-border-radius,
        $border-radius-big: $tool-border-radius-big,
        $size: $tool-size,
        $size-big: $tool-size-big,
        $font-size: $tool-font-size,
        $font-size-big: $tool-font-size-big,
        $spacing: $tool-spacing,
        $spacing-big: $tool-spacing-big,
        $cursor: $tool-cursor,
        $disabled-cursor: $tool-disabled-cursor,
        $focused-outline-width: $tool-focused-outline-width,
        $focused-outline-style: $tool-focused-outline-style,
        $focused-outline-color: $tool-focused-outline-color,
        $focused-outline-offset: $tool-focused-outline-offset
    );
}