/** * @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; } } }}