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

/**
 * @class Ext.Dialog
 */

/**
 * @var {color/list}
 * Dialog background-color
 */
$dialog-background-color: dynamic(null);

/**
 * @var {color/list}
 * Dialog border-color
 */
$dialog-border-color: dynamic($base-highlight-color);

/**
 * @var {number/list}
 * Dialog border-width
 */
$dialog-border-width: dynamic(5px);

/**
 * @var {string/list}
 * Dialog border-style
 */
$dialog-border-style: dynamic(null);

/**
 * @var {number/list}
 * Dialog border-radius
 */
$dialog-border-radius: dynamic(4px);

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

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

/**
 * @var {color}
 * Dialog body text color
 */
$dialog-body-color: dynamic(null);

/**
 * @var {color}
 * Dialog body border-color
 */
$dialog-body-border-color: dynamic(null);

/**
 * @var {number/list}
 * Dialog body border-width
 */
$dialog-body-border-width: dynamic(null);

/**
 * @var {number/list}
 * Dialog body border-style
 */
$dialog-body-border-style: dynamic(null);

/**
 * @var {string/number}
 * Dialog body font-weight
 */
$dialog-body-font-weight: dynamic(null);

/**
 * @var {number}
 * Dialog body font-size
 */
$dialog-body-font-size: dynamic(null);

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

/**
 * @var {number}
 * Dialog body line-height
 */
$dialog-body-line-height: dynamic(null);

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

/**
 * @var {string}
 * Dialog body font-family
 */
$dialog-body-font-family: dynamic(null);

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

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

/**
 * @var {color}
 * Dialog Header background-color
 */
$dialog-header-background-color: dynamic($base-highlight-color);

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

/**
 * @var {color}
 * Dialog Header text color
 */
$dialog-header-color: dynamic($light-color);

/**
 * @var {color/list}
 * Dialog Header border-color
 */
$dialog-header-border-color: dynamic(null);

/**
 * @var {number/list}
 * Dialog Header border-width
 */
$dialog-header-border-width: dynamic(null);

/**
 * @var {string/list}
 * Dialog Header border-style
 */
$dialog-header-border-style: dynamic(null);

/**
 * @var {string/number}
 * Dialog Header font-weight
 */
$dialog-header-font-weight: dynamic(null);

/**
 * @var {number}
 * Dialog Header font-size
 */
$dialog-header-font-size: dynamic(null);

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

/**
 * @var {number}
 * Dialog Header line-height
 */
$dialog-header-line-height: dynamic(null);

/**
 * @var {number}
 * Dialog Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$dialog-header-line-height-big: dynamic(null);

/**
 * @var {string}
 * Dialog Header font-family
 */
$dialog-header-font-family: dynamic(null);

/**
 * @var {number/list}
 * Dialog Header padding
 */
$dialog-header-padding: dynamic(4px 5px 10px);

/**
 * @var {number/list}
 * Dialog Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$dialog-header-padding-big: dynamic(5px 10px 13px);

/**
 * @var {number/list}
 * Dialog Header Title padding
 */
$dialog-header-title-padding: dynamic(0);

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

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

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

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

/**
 * @var {number}
 * Dialog Header min-height
 */
$dialog-header-min-height: dynamic(null);

/**
 * @var {number}
 * Dialog Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$dialog-header-min-height-big: dynamic(null);

/**
 * @var {color}
 * Dialog Header icon color.
 */
$dialog-header-icon-color: dynamic(null);

/**
 * @var {number}
 * Dialog Header icon size
 */
$dialog-header-icon-size: dynamic(null);

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

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

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

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

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

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

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

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

/**
 * @var {color}
 * Dialog Tool color
 */
$dialog-tool-color: dynamic(null);

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

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

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

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

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

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

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

/**
 * @var {number}
 * Dialog Tool opacity
 */
$dialog-tool-opacity: dynamic(null);

/**
 * @var {number}
 * Dialog Tool opacity when hovered
 */
$dialog-tool-hovered-opacity: dynamic(null);

/**
 * @var {number}
 * Dialog Tool opacity when pressed
 */
$dialog-tool-pressed-opacity: dynamic(null);

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

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

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

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

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

/**
 * @var {number}
 * Dialog Tool font-size
 */
$dialog-tool-font-size: dynamic(null);

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

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

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

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

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

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

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

/**
 * @var {color}
 * Dialog Tool outline color when focused
 */
$dialog-tool-focused-outline-color: dynamic(null);

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

/**
 * @var {color}
 * Dialog anchor border-color
 */
$dialog-anchor-border-color: dynamic(null);

/**
 * @var {color}
 * Dialog anchor background-color
 */
$dialog-anchor-background-color: dynamic(null);

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

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

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

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

/**
 * @var {number}
 * Dialog min-width
 */
$dialog-min-width: dynamic(250px);

/**
 * @var {number}
 * Dialog min-width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$dialog-min-width-big: dynamic(300px);

/**
 * Creates a visual theme for a Dialog.
 *
 * @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=dialog] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {String} [$header-xtype=dialogheader] (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=dialogtitle] (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=dialogtool] (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
 * Dialog background-color
 *
 * @param {color/list} $border-color
 * Dialog border-color
 *
 * @param {number/list} $border-width
 * Dialog border-width
 *
 * @param {string/list} $border-style
 * Dialog border-style
 *
 * @param {number/list} $border-radius
 * Dialog border-radius
 *
 * @param {number/list} $border-radius-big
 * Dialog border-radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $body-background-color
 * Dialog body background-color
 *
 * @param {color} $body-color
 * Dialog body text color
 *
 * @param {color} $body-border-color
 * Dialog body border-color
 *
 * @param {number/list} $body-border-width
 * Dialog body border-width
 *
 * @param {number/list} $body-border-style
 * Dialog body border-style
 *
 * @param {string/number} $body-font-weight
 * Dialog body font-weight
 *
 * @param {number} $body-font-size
 * Dialog body font-size
 *
 * @param {number} $body-font-size-big
 * Dialog body font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $body-line-height
 * Dialog body line-height
 *
 * @param {number} $body-line-height-big
 * Dialog body line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $body-font-family
 * Dialog body font-family
 *
 * @param {number/list} $body-padding
 * Dialog body padding
 *
 * @param {number/list} $body-padding-big
 * Dialog body padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $header-background-color
 * Dialog Header background-color
 *
 * @param {string/list} $header-background-gradient
 * Dialog 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
 * Dialog Header text color
 *
 * @param {color/list} $header-border-color
 * Dialog Header border-color
 *
 * @param {number/list} $header-border-width
 * Dialog Header border-width
 *
 * @param {string/list} $header-border-style
 * Dialog Header border-style
 *
 * @param {string/number} $header-font-weight
 * Dialog Header font-weight
 *
 * @param {number} $header-font-size
 * Dialog Header font-size
 *
 * @param {number} $header-font-size-big
 * Dialog Header font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-line-height
 * Dialog Header line-height
 *
 * @param {number} $header-line-height-big
 * Dialog Header line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $header-font-family
 * Dialog Header font-family
 *
 * @param {number/list} $header-padding
 * Dialog Header padding
 *
 * @param {number/list} $header-padding-big
 * Dialog Header padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $header-title-padding
 * Dialog Header Title padding
 *
 * @param {number/list} $header-title-padding-big
 * Dialog Header Title padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number/list} $header-title-opacity
 * Dialog Header Title opacity
 *
 * @param {shadow} $header-shadow
 * Dialog Header Shadow
 *
 * @param {number} $header-z-index
 * Z-Index for the Dialog Header, should be used with shadows to raise header above content
 *
 * @param {number} $header-min-height
 * Dialog Header min-height
 *
 * @param {number} $header-min-height-big
 * Dialog Header min-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $header-icon-color
 * Dialog Header icon color.
 *
 * @param {number} $header-icon-size
 * Dialog Header icon size
 *
 * @param {number} $header-icon-size-big
 * Dialog Header icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-font-size
 * Dialog Header icon font-size.  Used for configuring the size of font icons
 *
 * @param {number} $header-icon-font-size-big
 * Dialog Header icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $header-icon-horizontal-spacing
 * The space between the Dialog Header icon and text when the icon is horizontally aligned
 *
 * @param {number} $header-icon-horizontal-spacing-big
 * The space between the Dialog 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 Dialog Header icon and text when the icon is vertically aligned
 *
 * @param {number} $header-icon-vertical-spacing-big
 * The space between the Dialog 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
 * Dialog Header icon opacity
 *
 * @param {color} $tool-color
 * Dialog Tool color
 *
 * @param {number} $tool-hovered-color
 * Dialog Tool color when hovered
 *
 * @param {number} $tool-pressed-color
 * Dialog Tool color when pressed
 *
 * @param {number} $tool-disabled-color
 * Dialog Tool color when disabled
 *
 * @param {color} $tool-background-color
 * Dialog Tool background-color
 *
 * @param {number} $tool-hovered-background-color
 * Dialog Tool background-color when hovered
 *
 * @param {number} $tool-pressed-background-color
 * Dialog Tool background-color when pressed
 *
 * @param {number} $tool-disabled-background-color
 * Dialog Tool background-color when disabled
 *
 * @param {number} $tool-opacity
 * Dialog Tool opacity
 *
 * @param {number} $tool-hovered-opacity
 * Dialog Tool opacity when hovered
 *
 * @param {number} $tool-pressed-opacity
 * Dialog Tool opacity when pressed
 *
 * @param {number} $tool-disabled-opacity
 * Dialog Tool opacity when disabled
 *
 * @param {number} $tool-border-radius
 * Dialog Tool border radius
 *
 * @param {number} $tool-border-radius-big
 * Dialog Tool border radius in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-size
 * Dialog Tool size
 *
 * @param {number} $tool-size-big
 * Dialog Tool size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-font-size
 * Dialog Tool font-size
 *
 * @param {number} $tool-font-size-big
 * Dialog Tool font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $tool-spacing
 * The space between Dialog Tools
 *
 * @param {number} $tool-spacing-big
 * The space between Dialog Tools in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $tool-cursor
 * Dialog Tool cursor
 *
 * @param {string} $tool-disabled-cursor
 * Dialog Tool cursor when disabled
 *
 * @param {number} $tool-focused-outline-width
 * Dialog Tool outline width when focused
 *
 * @param {string} $tool-focused-outline-style
 * Dialog Tool outline style when focused
 *
 * @param {color} $tool-focused-outline-color
 * Dialog Tool outline color when focused
 *
 * @param {number} $tool-focused-outline-offset
 * Dialog Tool outline offset when focused
 *
 * @param {color} $anchor-border-color
 * Dialog anchor border-color
 *
 * @param {color} $anchor-background-color
 * Dialog 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
 *
 * @param {number} $min-width
 * Dialog min-width
 *
 * @param {number} $min-width-big
 * Dialog min-width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin dialog-ui(
    $ui: null,
    $xtype: dialog,
    $header-xtype: dialogheader,
    $title-xtype: dialogtitle,
    $tool-xtype: dialogtool,
    $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: $dialog-manage-borders,
    $min-width: null,
    $min-width-big: null
) {
    $ui-suffix: ui-suffix($ui);

    $arguments: intersect-arguments(dialog-ui, panel-ui);

    @include panel-ui($arguments...);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        min-width: $min-width;

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