/** * Creates a visual theme for a Window * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {number} [$ui-padding=$window-padding] * The padding of the Window * * @param {number} [$ui-border-radius=$window-border-radius] * The border-radius of the Window * * @param {color} [$ui-border-color=$window-border-color] * The border-color of the Window * * @param {number} [$ui-border-width=$window-border-width] * The border-width of the Window * * @param {color} [$ui-inner-border-color=$window-inner-border-color] * The inner border-color of the Window * * @param {number} [$ui-inner-border-width=$window-inner-border-width] * The inner border-width of the Window * * @param {color} [$ui-header-color=$window-header-color] * The text color of the Header * * @param {color} [$ui-header-background-color=$window-header-background-color] * The background-color of the Header * * @param {number/list} [$ui-header-padding=$window-header-padding] * The padding of the Header * * @param {string} [$ui-header-font-family=$window-header-font-family] * The font-family of the Header * * @param {number} [$ui-header-font-size=$window-header-font-size] * The font-size of the Header * * @param {string} [$ui-header-font-weight=$window-header-font-weight] * The font-weight of the Header * * @param {number} [$ui-header-line-height=$window-header-line-height] * The line-height of the Header * * @param {number/list} [$ui-header-text-padding=$window-header-text-padding] * The padding of the Header's text element * * @param {string} [$ui-header-text-transform=$window-header-text-transform] * The text-transform of the Header * * @param {color} [$ui-header-border-color=$ui-border-color] * The border-color of the Header * * @param {number} [$ui-header-border-width=$window-header-border-width] * The border-width of the Header * * @param {color} [$ui-header-inner-border-color=$window-header-inner-border-color] * The inner border-color of the Header * * @param {number} [$ui-header-inner-border-width=$window-header-inner-border-width] * The inner border-width of the Header * * @param {number} [$ui-header-icon-width=$window-header-icon-width] * The width of the Header icon * * @param {number} [$ui-header-icon-height=$window-header-icon-height] * The height of the Header icon * * @param {number} [$ui-header-icon-spacing=$window-header-icon-spacing] * The space between the Header icon and text * * @param {list} [$ui-header-icon-background-position=$window-header-icon-background-position] * The background-position of the Header icon * * @param {color} [$ui-header-glyph-color=$window-header-glyph-color] * The color of the Header glyph icon * * @param {number} [$ui-header-glyph-opacity=$window-header-glyph-opacity] * The opacity of the Header glyph icon * * @param {number} [$ui-tool-spacing=$window-tool-spacing] * The space between the {@link Ext.panel.Tool Tools} * * @param {string} [$ui-tool-background-image=$window-tool-background-image] * The background sprite to use for {@link Ext.panel.Tool Tools} * * @param {color} [$ui-tool-focus-outline-color=$window-tool-focus-outline-color] * The color of the outline around {@link Ext.panel.Tool Tools} when focused * * @param {string} [$ui-tool-focus-outline-style=$window-tool-focus-outline-style] * The outline-style of {@link Ext.panel.Tool Tools} when focused * * @param {number} [$ui-tool-focus-outline-width=$window-tool-focus-outline-width] * The outline-width of {@link Ext.panel.Tool Tools} when focused * * @param {number} [$ui-tool-focus-outline-offset=$window-tool-focus-outline-offset] * The outline-offset of {@link Ext.panel.Tool Tools} when focused * * @param {color} [$ui-body-border-color=$window-body-border-color] * The border-color of the Window body * * @param {color} [$ui-body-background-color=$window-body-background-color] * The background-color of the Window body * * @param {number} [$ui-body-border-width=$window-body-border-width] * The border-width of the Window body * * @param {string} [$ui-body-border-style=$window-body-border-style] * The border-style of the Window body * * @param {color} [$ui-body-color=$window-body-color] * The color of text inside the Window body * * @param {Number} [$ui-body-font-size=$window-body-font-size] * The body font size * * @param {Number} [$ui-body-font-weight=$window-body-font-weight] * The body font weight * * @param {String} [$ui-body-font-family=$window-body-font-family] * The body font family * * @param {color} [$ui-background-color=$window-background-color] * The background color * * @param {boolean} [$ui-force-header-border=$window-force-header-border] * True to force the window header to have a border on the side facing * the window body. Overrides dock layout's border management border * removal rules. * * @param {boolean} [$ui-include-border-management-rules=$window-include-border-management-rules] * True to include neptune style border management rules. * * @param {color} [$ui-wrap-border-color=$window-wrap-border-color] * The color to apply to the border that wraps the body and docked items. The presence of * the wrap border is controlled by the {@link #border} config. Only applicable when * `$ui-include-border-management-rules` is `true`. * * @param {color} [$ui-wrap-border-width=$window-wrap-border-width] * The width to apply to the border that wraps the body and docked items. The presence of * the wrap border is controlled by the {@link #border} config. Only applicable when * `$ui-include-border-management-rules` is `true`. * * @param {boolean} [$ui-ignore-frame-padding=$window-ignore-frame-padding] * True to ignore the frame padding. By default, the frame mixin adds extra padding when * border radius is larger than border width. This is intended to prevent the content * from colliding with the rounded corners of the frame. Set this to true to prevent * the window frame from adding this extra padding. * * @member Ext.window.Window */@mixin extjs-window-ui( $ui: null, $ui-padding: $window-padding, $ui-border-radius: $window-border-radius, $ui-border-color: $window-border-color, $ui-border-width: $window-border-width, $ui-inner-border-color: $window-inner-border-color, $ui-inner-border-width: $window-inner-border-width, $ui-header-color: $window-header-color, $ui-header-background-color: $window-header-background-color, $ui-header-padding: $window-header-padding, $ui-header-font-family: $window-header-font-family, $ui-header-font-size: $window-header-font-size, $ui-header-font-weight: $window-header-font-weight, $ui-header-line-height: $window-header-line-height, $ui-header-text-padding: $window-header-text-padding, $ui-header-text-transform: $window-header-text-transform, $ui-header-border-color: $ui-border-color, $ui-header-border-width: $window-header-border-width, $ui-header-inner-border-color: $window-header-inner-border-color, $ui-header-inner-border-width: $window-header-inner-border-width, $ui-header-icon-width: $window-header-icon-width, $ui-header-icon-height: $window-header-icon-height, $ui-header-icon-spacing: $window-header-icon-spacing, $ui-header-icon-background-position: $window-header-icon-background-position, $ui-header-glyph-color: $window-header-glyph-color, $ui-header-glyph-opacity: $window-header-glyph-opacity, $ui-tool-spacing: $window-tool-spacing, $ui-tool-background-image: $window-tool-background-image, $ui-tool-focus-outline-color: $window-tool-focus-outline-color, $ui-tool-focus-outline-style: $window-tool-focus-outline-style, $ui-tool-focus-outline-width: $window-tool-focus-outline-width, $ui-tool-focus-outline-offset: $window-tool-focus-outline-offset, $ui-body-border-color: $window-body-border-color, $ui-body-background-color: $window-body-background-color, $ui-body-border-width: $window-body-border-width, $ui-body-border-style: $window-body-border-style, $ui-body-color: $window-body-color, $ui-body-font-size: $window-body-font-size, $ui-body-font-weight: $window-body-font-weight, $ui-body-font-family: $window-body-font-family, $ui-background-color: $window-background-color, // See the docs above $ui-force-header-border: $window-force-header-border, $ui-include-border-management-rules: $window-include-border-management-rules, $ui-wrap-border-color: null, $ui-wrap-border-width: null, $ui-ignore-frame-padding: $window-ignore-frame-padding, // deprecated - use $ui instead $ui-label: null){ @if $ui == null { @if $ui-label != null { @warn '$ui-label is deprecated. Use $ui instead'; $ui: $ui-label; } @else { @warn "#{error('$ui is required')}"; } } @if is-null($ui-wrap-border-color) { @if $ui == 'default' { $ui-wrap-border-color: $window-wrap-border-color; } @else { $ui-wrap-border-color: $ui-border-color; } } @if is-null($ui-wrap-border-width) { @if $ui == 'default' { $ui-wrap-border-width: $window-wrap-border-width; } @else { $ui-wrap-border-width: $ui-border-width; } } .#{$prefix}window-#{$ui} { @if not is-null($ui-border-color) { border-color: $ui-border-color; } @if not is-null($ui-border-radius) { @include border-radius($ui-border-radius); } @if $ui-inner-border-width != 0 { @include inner-border($ui-inner-border-width, $ui-inner-border-color); } } @if not is-null($ui-border-radius) and $ui-border-radius != 0{ @include x-frame( 'window', $ui, $border-radius: $ui-border-radius, $border-width: $ui-border-width, $padding: $ui-padding, $background-color: $ui-background-color, $ignore-frame-padding: $ui-ignore-frame-padding ); } .#{$prefix}window-body-#{$ui} { @if not is-null($ui-body-border-color) { border-color: $ui-body-border-color; border-width: $ui-body-border-width; border-style: $ui-body-border-style; } @if not is-null($ui-body-background-color) { background: $ui-body-background-color; } @if not is-null($ui-body-color) { color: $ui-body-color; } @if not is-null($ui-body-font-size) { font-size: $ui-body-font-size; } @if not is-null($ui-body-font-weight) { font-weight: $ui-body-font-weight; } @if not is-null($ui-body-font-family) { font-family: $ui-body-font-family; } } .#{$prefix}window-header-#{$ui} { @if not is-null($ui-header-font-size) { font-size: $ui-header-font-size; } @if not is-null($ui-border-color) { border-color: $ui-border-color; } background-color: $ui-header-background-color; .#{$prefix}tool-img { @if $ui-tool-background-image != $tool-background-image { background-image: theme-background-image($ui-tool-background-image); } // EXTJSIV-8846: partially transparent png images do not display correctly // in winXP/IE8m when the image element has a transparent background. // to fix this, we give the element the same background-color as the header. background-color: $ui-header-background-color; } } @if $include-ext-tab-bar { .#{$prefix}window-header-#{$ui}-horizontal { .#{$prefix}window-header-#{$ui}-tab-bar { margin-top: -(top($ui-header-padding)); margin-bottom: -(bottom($ui-header-padding)); } } .#{$prefix}window-header-#{$ui}-vertical { .#{$prefix}window-header-#{$ui}-tab-bar { margin-right: -(top($ui-header-padding)); margin-left: -(bottom($ui-header-padding)); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}window-header-#{$ui}-vertical { .#{$prefix}window-header-#{$ui}-tab-bar { margin-left: -(top($ui-header-padding)); margin-right: -(bottom($ui-header-padding)); } } } } .#{$prefix}window-header-title-#{$ui} { @if not is-null($ui-header-color) { color: $ui-header-color; } @if not is-null($ui-header-font-size) { font-size: $ui-header-font-size; } @if not is-null($ui-header-font-weight) { font-weight: $ui-header-font-weight; } @if not is-null($ui-header-font-family) { font-family: $ui-header-font-family; } @if not is-null($ui-header-line-height) { line-height: $ui-header-line-height; } > { .#{$prefix}title-text-#{$ui} { padding: $ui-header-text-padding; text-transform: $ui-header-text-transform; @if $ext-trial { &:after { font-family: ext-watermark; font-size: ($ui-header-line-height + vertical($ui-header-padding)) * 0.75; content: 'd'; position: absolute; top: 0; right: 0; // since IE8 does not support opacity on pseudo elements we simulate it by // mixing the text color with the background color color: mix($ui-header-color, $ui-header-background-color, 40%); } @if $include-rtl { &.#{$prefix}rtl:after { right: auto; left: 0; } } } @if $ext-beta { &:after { font-family: ext-watermark; font-size: ($ui-header-line-height + vertical($ui-header-padding)) * 0.75; content: 'b'; position: absolute; top: 0; right: 0; // since IE8 does not support opacity on pseudo elements we simulate it by // mixing the text color with the background color color: mix($ui-header-color, $ui-header-background-color, 40%); } @if $include-rtl { &.#{$prefix}rtl:after { right: auto; left: 0; } } } } .#{$prefix}title-icon-wrap-#{$ui} { &.#{$prefix}title-icon-top { height: $ui-header-icon-height + $ui-header-icon-spacing; padding-bottom: $ui-header-icon-spacing; } &.#{$prefix}title-icon-right { width: $ui-header-icon-width + $ui-header-icon-spacing; padding-left: $ui-header-icon-spacing; @if $include-rtl { &.#{$prefix}rtl { padding-left: 0; padding-right: $ui-header-icon-spacing; } } } &.#{$prefix}title-icon-bottom { height: $ui-header-icon-height + $ui-header-icon-spacing; padding-top: $ui-header-icon-spacing; } &.#{$prefix}title-icon-left { width: $ui-header-icon-width + $ui-header-icon-spacing; padding-right: $ui-header-icon-spacing; @if $include-rtl { &.#{$prefix}rtl { padding-right: 0; padding-left: $ui-header-icon-spacing; } } } > .#{$prefix}title-icon-#{$ui} { width: $ui-header-icon-width; height: $ui-header-icon-height; font-size: $ui-header-icon-height; color: $ui-header-glyph-color; background-position: $ui-header-icon-background-position; &.#{$prefix}title-glyph { @if $ui-header-glyph-opacity != 1 { // do not use the opacity mixin because we do not want IE's filter version of // opacity to be included. We emulate the opacity setting in IE8m by mixing // the icon color into the background color. (see below) opacity: $ui-header-glyph-opacity; } // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the header's background-color. @if $include-ie { .#{$prefix}ie8 & { color: mix($ui-header-glyph-color, $ui-header-background-color, $ui-header-glyph-opacity * 100); } } } } } } } $header-border-bottom-width: 0; @if $ui-force-header-border { $header-border-bottom-width: bottom($ui-header-border-width); } $header-expanded-padding: $ui-header-padding; @if $window-use-classic-header-padding { $frame-top: max(top($ui-border-width), max(top($ui-border-radius), right($ui-border-radius))); $header-bottom-padding-adjust: $frame-top - top($ui-border-width); $header-expanded-padding: top($ui-header-padding), right($ui-header-padding), bottom($ui-header-padding) - $header-bottom-padding-adjust, left($ui-header-padding); } @if not is-null($ui-border-radius) and $ui-border-radius != 0 { @include x-frame( $cls: 'window-header', $ui: '#{$ui}-top', $border-radius: top($ui-border-radius) right($ui-border-radius) 0 0, $border-width: top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width), $padding: $header-expanded-padding, $background-color: $ui-header-background-color ); @include x-frame( $cls: 'window-header', $ui: '#{$ui}-right', $border-radius: 0 top($ui-border-radius) right($ui-border-radius) 0, $border-width: left($ui-header-border-width) top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width, $padding: rotate90($header-expanded-padding), $background-color: $ui-header-background-color, $include-frame-rtl: $include-rtl ); @include x-frame( $cls: 'window-header', $ui: '#{$ui}-bottom', $border-radius: 0 0 top($ui-border-radius) left($ui-border-radius), $border-width: $header-border-bottom-width right($ui-header-border-width) top($ui-header-border-width) left($ui-header-border-width), $padding: rotate180($header-expanded-padding), $background-color: $ui-header-background-color ); @include x-frame( $cls: 'window-header', $ui: '#{$ui}-left', $border-radius: right($ui-border-radius) 0 0 top($ui-border-radius), $border-width: right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width) top($ui-header-border-width), $padding: rotate270($header-expanded-padding), $background-color: $ui-header-background-color, $include-frame-rtl: $include-rtl ); @include x-frame( $cls: 'window-header', $ui: '#{$ui}-collapsed-top', $border-radius: $ui-border-radius, $border-width: $ui-header-border-width, $padding: $ui-header-padding, $background-color: $ui-header-background-color ); @include x-frame( $cls: 'window-header', $ui: '#{$ui}-collapsed-right', $border-radius: $ui-border-radius, $border-width: $ui-header-border-width, $padding: rotate90($ui-header-padding), $background-color: $ui-header-background-color, $include-frame-rtl: $include-rtl ); @include x-frame( $cls: 'window-header', $ui: '#{$ui}-collapsed-bottom', $border-radius: $ui-border-radius, $border-width: $ui-header-border-width, $padding: rotate180($ui-header-padding), $background-color: $ui-header-background-color ); @include x-frame( $cls: 'window-header', $ui: '#{$ui}-collapsed-left', $border-radius: $ui-border-radius, $border-width: $ui-header-border-width, $padding: rotate270($ui-header-padding), $background-color: $ui-header-background-color, $include-frame-rtl: $include-rtl ); } @if $ui-header-inner-border-width != 0 { .#{$prefix}window-header-#{$ui}-top { @include inner-border($ui-header-inner-border-width, $ui-header-inner-border-color); } .#{$prefix}window-header-#{$ui}-right { @include inner-border(rotate90($ui-header-inner-border-width), $ui-inner-border-color); } .#{$prefix}window-header-#{$ui}-bottom { @include inner-border(rotate180($ui-header-inner-border-width), $ui-inner-border-color); } .#{$prefix}window-header-#{$ui}-left { @include inner-border(rotate270($ui-header-inner-border-width), $ui-inner-border-color); } } .#{$prefix}window-header-#{$ui} { .#{$prefix}window-header-icon { width: $ui-header-icon-width; height: $ui-header-icon-height; // color, font-size, and line-height are needed for glyph icons color: $ui-header-glyph-color; font-size: $ui-header-icon-height; line-height: $ui-header-icon-height; background-position: $window-header-icon-background-position; } .#{$prefix}window-header-glyph { color: $ui-header-glyph-color; font-size: $ui-header-icon-height; line-height: $ui-header-icon-height; @if $ui-header-glyph-opacity != 1 { // do not use the opacity mixin because we do not want IE's filter version of // opacity to be included. We emulate the opacity setting in IE8m by mixing // the icon color into the background color. (see below) opacity: $ui-header-glyph-opacity; } // In IE8 and below when a glyph contains partially transparent pixels, we // can't apply an opacity filter to the glyph element, because IE8m will render // the partially transparent pixels of the glyph as black. To work around this, // we emulate the approximate color that the glyph would have if it had opacity // applied by mixing the glyph color with the header's background-color. @if $include-ie { .#{$prefix}ie8 & { color: mix($ui-header-glyph-color, $ui-header-background-color, $ui-header-glyph-opacity * 100); } } } } $ui-tool-margin: 0 0 0 $ui-tool-spacing; .#{$prefix}window-header-#{$ui}-horizontal { .#{$prefix}tool-after-title { margin: $ui-tool-margin; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tool-after-title { margin: rtl($ui-tool-margin); } } .#{$prefix}tool-before-title { margin: rtl($ui-tool-margin); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tool-before-title { margin: $ui-tool-margin; } } } .#{$prefix}window-header-#{$ui}-vertical { .#{$prefix}tool-after-title { margin: rotate90($ui-tool-margin); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tool-after-title { margin: rotate270(rtl($ui-tool-margin)); } } .#{$prefix}tool-before-title { margin: rotate90(rtl($ui-tool-margin)); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tool-before-title { margin: rotate270($ui-tool-margin); } } } .#{$prefix}window-header-#{$ui} { .#{$prefix}tool-focus { .#{$prefix}keyboard-mode & { @include css-outline( $width: $ui-tool-focus-outline-width, $style: $ui-tool-focus-outline-style, $color: $ui-tool-focus-outline-color, $offset: $ui-tool-focus-outline-offset ); } } } // !important is needed in the following rules to override dock layout's border // management rules. @if $ui-force-header-border { .#{$prefix}window-header-#{$ui} { border-width: $ui-header-border-width !important; } } @else { .#{$prefix}window-#{$ui}-collapsed .#{$prefix}window-header { border-width: $ui-header-border-width !important; } } @if $include-slicer-border-radius { .#{$prefix}nbr .#{$prefix}window-#{$ui}-collapsed .#{$prefix}window-header { border-width: 0 !important; } } // Window resizing. // If there's a border that's wider than the specified threshold (Sencha default is 2) then // embed the handles in the borders using -ve position and make resizable windows show overflow. // The dock layout should ensure that all constituent elements fit within the element. // The only exception is during animated resizing. Overflow inline style is set hidden during animation (AbstractComponent.animate) @if $ui-border-width > $border-width-threshold { .#{$prefix}window-#{$ui}-resizable { // Resizable Window element overflow must be visible for embedded handles to accept mouseovers. overflow: visible; .#{$prefix}window-handle-north-br { top: -($ui-border-width); } .#{$prefix}window-handle-south-br { bottom: -($ui-border-width); } .#{$prefix}window-handle-east-br { right: -($ui-border-width); } .#{$prefix}window-handle-west-br { left: -($ui-border-width); } .#{$prefix}window-handle-northwest-br { left: -($ui-border-width); top: -($ui-border-width); } .#{$prefix}window-handle-northeast-br { right: -($ui-border-width); top: -($ui-border-width); } .#{$prefix}window-handle-southeast-br { right: -($ui-border-width); bottom: -($ui-border-width); } .#{$prefix}window-handle-southwest-br { left: -($ui-border-width); bottom: -($ui-border-width); } } } @if $ui-include-border-management-rules { @include border-management( $parent-cls: window-#{$ui}, $border-width: $ui-wrap-border-width, $border-color: $ui-wrap-border-color ); }} .#{$prefix}window-ghost { @include opacity($window-ghost-opacity);} @if $include-window-default-ui { @include extjs-window-ui( $ui: 'default' );} .#{$prefix}window-body-plain { background-color: transparent;}