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

/**
 * @class Ext.panel.Header
 */

/**
 * Creates a visual theme for a Panel Header.
 *
 * @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=panelheader] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $background-color
 * Panel Header background-color
 *
 * @param {string/list} $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/list} $border-color
 * Panel Header border-color
 *
 * @param {number/list} $border-width
 * Panel Header border-width
 *
 * @param {string/list} $border-style
 * Panel Header border-style
 *
 * @param {number/list} $padding
 * Panel Header padding
 *
 * @param {number/list} $padding-big
 * Panel Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {shadow} $shadow
 * Panel Header Shadow
 *
 * @param {number} $z-index
 * Z-Index for the PanelHeader, should be used with shadows to raise header above content
 *
 * @param {number} $min-height
 * Panel Header min-height
 *
 * @param {number} $min-height-big
 * Panel Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @private
 */
@mixin panelheader-ui(
    $ui: null,
    $xtype: panelheader,
    $background-color: null,
    $background-gradient: null,
    $border-color: null,
    $border-width: null,
    $border-style: null,
    $padding: null,
    $padding-big: null,
    $shadow: null,
    $z-index: null,
    $min-height: null,
    $min-height-big: null
) {
    $ui-suffix: ui-suffix($ui);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        @include background-gradient($background-color, $background-gradient);
        @include border($border-width, $border-style, $border-color);
        box-shadow: $shadow;
        z-index: $z-index;

        &.#{$prefix}horizontal {
            min-height: $min-height;

            @if $enable-big {
                .#{$prefix}big & {
                    min-height: $min-height-big;
                }
            }
        }

        &.#{$prefix}vertical {
            min-width: $min-height;

            @if $enable-big {
                .#{$prefix}big & {
                    min-width: $min-height-big;
                }
            }
        }

        > .#{$prefix}body-el {
            padding: $padding;

            @if $enable-big {
                .#{$prefix}big & {
                    padding: $padding-big;
                }
            }
        }

        &.#{$prefix}docked-right {
            > .#{$prefix}body-el {
                padding: rotate90($padding);

                @if $enable-big {
                    .#{$prefix}big & {
                        padding: rotate90($padding-big);
                    }
                }
            }

            @include border(rotate90($border-width), rotate90($border-style), rotate90($border-color));
        }

        &.#{$prefix}docked-left {
            > .#{$prefix}body-el {
                padding: rotate270($padding);

                @if $enable-big {
                    .#{$prefix}big & {
                        padding: rotate270($padding-big);
                    }
                }
            }
            
            @include border(rotate270($border-width), rotate270($border-style), rotate270($border-color));
        }

        &.#{$prefix}docked-bottom {
            @include border(flip-vertical($border-width), flip-vertical($border-style), flip-vertical($border-color));
        }
    }
}