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

/**
 * @class Ext.panel.Title
 */

/**
 * Creates a visual theme for a Panel Title.
 *
 * @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=paneltitle] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * Panel Title text color
 *
 * @param {string/number} $font-weight
 * Panel Title font-weight
 *
 * @param {number} $font-size
 * Panel Title font-size
 *
 * @param {number} $font-size-big
 * Panel Title font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * Panel Title line-height
 *
 * @param {number} $line-height-big
 * Panel Title line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Panel Title font-family
 *
 * @param {number/list} $padding
 * Panel Title padding
 *
 * @param {number/list} $padding-big
 * Panel Title padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $opacity
 * Panel Title opacity
 *
 * @param {color} $icon-color
 * Panel Title icon color.
 *
 * @param {number} $icon-size
 * Panel Title icon size
 *
 * @param {number} $icon-size-big
 * Panel Title icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-font-size
 * Panel Title icon font-size.  Used for configuring the size of font icons
 *
 * @param {number} $icon-font-size-big
 * Panel Title icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-horizontal-spacing
 * The space between the Panel Title icon and text when the icon is horizontally aligned
 *
 * @param {number} $icon-horizontal-spacing-big
 * The space between the Panel Title icon and text when the icon is horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-vertical-spacing
 * The space between the Panel Title icon and text when the icon is vertically aligned
 *
 * @param {number} $icon-vertical-spacing-big
 * The space between the Panel Title icon and text when the icon is vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $icon-opacity
 * Panel Title icon opacity
 *
 * @private
 */
@mixin paneltitle-ui(
    $ui: null,
    $xtype: paneltitle,
    $color: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $line-height: null,
    $line-height-big: null,
    $font-family: null,
    $padding: null,
    $padding-big: null,
    $opacity: null,
    $icon-color: null,
    $icon-size: null,
    $icon-size-big: null,
    $icon-font-size: null,
    $icon-font-size-big: null,
    $icon-horizontal-spacing: null,
    $icon-horizontal-spacing-big: null,
    $icon-vertical-spacing: null,
    $icon-vertical-spacing-big: null,
    $icon-opacity: null
) {
    $ui-suffix: ui-suffix($ui);

    @if $icon-font-size == null {
        $icon-font-size: $icon-size;
    }

    @if $icon-font-size-big == null {
        $icon-font-size-big: $icon-size-big;
    }

    @if $icon-color == null {
        $icon-color: $color;
    }

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

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

        .#{$prefix}icon-el {
            opacity: $icon-opacity;

            @include icon(
                $color: $icon-color,
                $size: $icon-size,
                $size-big: $icon-size-big,
                $font-size: $icon-font-size,
                $font-size-big: $icon-font-size-big
            );
        }

        .#{$prefix}text-el {
            opacity: $opacity;
        }

        &.#{$prefix}horizontal {
            &.#{$prefix}icon-align-top .#{$prefix}icon-el {
                margin-bottom: $icon-vertical-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-bottom: $icon-vertical-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-right .#{$prefix}icon-el {
                margin-left: $icon-horizontal-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-left: $icon-horizontal-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-bottom .#{$prefix}icon-el {
                margin-top: $icon-vertical-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-top: $icon-vertical-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-left .#{$prefix}icon-el {
                margin-right: $icon-horizontal-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-right: $icon-horizontal-spacing-big;
                    }
                }
            }
        }

        &.#{$prefix}rotate-90 {
            padding: rotate90($padding);

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

            &.#{$prefix}icon-align-top .#{$prefix}icon-el {
                margin-left: $icon-vertical-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-left: $icon-vertical-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-right .#{$prefix}icon-el {
                margin-top: $icon-horizontal-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-top: $icon-horizontal-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-bottom .#{$prefix}icon-el {
                margin-right: $icon-vertical-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-right: $icon-vertical-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-left .#{$prefix}icon-el {
                margin-bottom: $icon-horizontal-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-bottom: $icon-horizontal-spacing-big;
                    }
                }
            }
        }

        &.#{$prefix}rotate-270 {
            padding: rotate270($padding);

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

            &.#{$prefix}icon-align-top .#{$prefix}icon-el {
                margin-right: $icon-vertical-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-right: $icon-vertical-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-right .#{$prefix}icon-el {
                margin-bottom: $icon-horizontal-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-bottom: $icon-horizontal-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-bottom .#{$prefix}icon-el {
                margin-left: $icon-vertical-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-left: $icon-vertical-spacing-big;
                    }
                }
            }

            &.#{$prefix}icon-align-left .#{$prefix}icon-el {
                margin-top: $icon-horizontal-spacing;

                @if $enable-big {
                    .#{$prefix}big & {
                        margin-top: $icon-horizontal-spacing-big;
                    }
                }
            }
        }

        &.#{$prefix}vertical .#{$prefix}text-el {
            // fixes disappearing text bug on rotated titles in firefox
            width: $line-height;

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