/** * Creates a visual theme for a Panel. * * **Note:** When using `frame: true`, this mixin call creates a UI property with the name and a "-framed" suffix. * * For example, Panel's UI will be set to "highlight-framed" if `frame:true`. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {color} [$ui-border-color=$panel-border-color] * The border-color of the Panel * * @param {number} [$ui-border-radius=$panel-border-radius] * The border-radius of the Panel * * @param {number} [$ui-border-width=$panel-border-width] * The border-width of the Panel * * @param {number} [$ui-padding=$panel-padding] * The padding of the Panel * * @param {color} [$ui-header-color=$panel-header-color] * The text color of the Header * * @param {string} [$ui-header-font-family=$panel-header-font-family] * The font-family of the Header * * @param {number} [$ui-header-font-size=$panel-header-font-size] * The font-size of the Header * * @param {string} [$ui-header-font-weight=$panel-header-font-weight] * The font-weight of the Header * * @param {number} [$ui-header-line-height=$panel-header-line-height] * The line-height of the Header * * @param {color} [$ui-header-border-color=$panel-header-border-color] * The border-color of the Header * * @param {number} [$ui-header-border-width=$panel-header-border-width] * The border-width of the Header * * @param {string} [$ui-header-border-style=$panel-header-border-style] * The border-style of the Header * * @param {color} [$ui-header-background-color=$panel-header-background-color] * The background-color of the Header * * @param {string/list} [$ui-header-background-gradient=$panel-header-background-gradient] * The background-gradient of the Header. Can be either the name of a predefined gradient * or a list of color stops. Used as the `$type` parameter for {@link Global_CSS#background-gradient}. * * @param {color} [$ui-header-inner-border-color=$panel-header-inner-border-color] * The inner border-color of the Header * * @param {number} [$ui-header-inner-border-width=$panel-header-inner-border-width] * The inner border-width of the Header * * @param {color} [$ui-header-focus-outline-color] * The color of the outline around focused Panel title * * @param {string} [$ui-header-focus-outline-style] * The outline style of the focused Panel title * * @param {number} [$ui-header-focus-outline-width] * The width of the focused Panel title outline * * @param {number} [$ui-header-focus-outline-offset] * The offset for focused Panel title outline * * @param {color} [$ui-header-focus-color] * The color of the Panel title text when header is focused * * @param {color} [$ui-header-focus-background-color] * The background color of Panel title text when header is focused * * @param {number/list} [$ui-header-text-padding=$panel-header-text-padding] * The padding of the Header's text element * * @param {number/list} [$ui-header-text-margin=$panel-header-text-margin] * The margin of the Header's text element * * @param {string} [$ui-header-text-transform=$panel-header-text-transform] * The text-transform of the Header * * @param {number/list} [$ui-header-padding=$panel-header-padding] * The padding of the Header * * @param {number} [$ui-header-icon-width=$panel-header-icon-width] * The width of the Header icon * * @param {number} [$ui-header-icon-height=$panel-header-icon-height] * The height of the Header icon * * @param {number} [$ui-header-icon-spacing=$panel-header-icon-spacing] * The space between the Header icon and text * * @param {list} [$ui-header-icon-background-position=$panel-header-icon-background-position] * The background-position of the Header icon * * @param {color} [$ui-header-glyph-color=$panel-header-glyph-color] * The color of the Header glyph icon * * @param {number} [$ui-header-glyph-opacity=$panel-header-glyph-opacity] * The opacity of the Header glyph icon * * @param {number} [$ui-header-noborder-adjust=$panel-header-noborder-adjust] * True to adjust the padding of borderless panel headers so that their height is the same * as the height of bordered panels. This is helpful when borderless and bordered panels * are used side-by-side, as it maintains a consistent vertical alignment. * * @param {number} [$ui-tool-spacing=$panel-tool-spacing] * The space between the Panel {@link Ext.panel.Tool Tools} * * @param {string} [$ui-tool-background-image=$panel-tool-background-image] * The background sprite to use for Panel {@link Ext.panel.Tool Tools} * * @param {color} [$ui-tool-glyph-color=$tool-glyph-color] * The color to use for tool icons when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-tool-focus-outline-color=$panel-tool-focus-outline-color] * The color of the outline around Panel {@link Ext.panel.Tool Tools} when focused * * @param {string} [$ui-tool-focus-outline-style=$panel-tool-focus-outline-style] * The outline-style of Panel {@link Ext.panel.Tool Tools} when focused * * @param {number} [$ui-tool-focus-outline-width=$panel-tool-focus-outline-width] * The outline-width of Panel {@link Ext.panel.Tool Tools} when focused * * @param {number} [$ui-tool-focus-outline-offset=$panel-tool-focus-outline-offset] * The outline-offset of Panel {@link Ext.panel.Tool Tools} when focused * * @param {color} [$ui-tool-focus-color] * The text color of the focused Panel tool glyph * * @param {color} [$ui-tool-focus-background-color] * The background color of the focused Panel tool * * @param {string} [$ui-tool-focus-background-image] * The sprite to use for focused Panel tools * * @param {color} [$ui-body-color=$panel-body-color] * The color of text inside the Panel body * * @param {color} [$ui-body-border-color=$panel-body-border-color] * The border-color of the Panel body * * @param {number} [$ui-body-border-width=$panel-body-border-width] * The border-width of the Panel body * * @param {string} [$ui-body-border-style=$panel-body-border-style] * The border-style of the Panel body * * @param {color} [$ui-body-background-color=$panel-body-background-color] * The background-color of the Panel body * * @param {number} [$ui-body-font-size=$panel-body-font-size] * The font-size of the Panel body * * @param {string} [$ui-body-font-weight=$panel-body-font-weight] * The font-weight of the Panel body * * @param {string} [$ui-background-stretch-top=$panel-background-stretch-top] * The direction to strech the background-gradient of top docked Headers when slicing images * for IE using Sencha Cmd * * @param {string} [$ui-background-stretch-bottom=$panel-background-stretch-bottom] * The direction to strech the background-gradient of bottom docked Headers when slicing images * for IE using Sencha Cmd * * @param {string} [$ui-background-stretch-right=$panel-background-stretch-right] * The direction to strech the background-gradient of right docked Headers when slicing images * for IE using Sencha Cmd * * @param {string} [$ui-background-stretch-left=$panel-background-stretch-left] * The direction to strech the background-gradient of left docked Headers when slicing images * for IE using Sencha Cmd * * @param {boolean} [$ui-include-border-management-rules=$panel-include-border-management-rules] * True to include neptune style border management rules. * * @param {color} [$ui-wrap-border-color=$panel-wrap-border-color] * The color to apply to the border that wraps the body and docked items in a framed * panel. The presence of the wrap border in a framed panel is controlled by the * {@link #border} config. Only applicable when `$ui-include-border-management-rules` is * `true`. * * @param {color} [$ui-wrap-border-width=$panel-wrap-border-width] * The width to apply to the border that wraps the body and docked items in a framed * panel. The presence of the wrap border in a framed panel is controlled by the * {@link #border} config. Only applicable when `$ui-include-border-management-rules` is * `true`. * * @param {boolean} [$ui-ignore-frame-padding=$panel-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 panel frame from adding this extra padding. * * @member Ext.panel.Panel */@mixin extjs-panel-ui( $ui: null, $ui-border-color: $panel-border-color, $ui-border-radius: $panel-border-radius, $ui-border-width: $panel-border-width, $ui-padding: 0, $ui-header-color: $panel-header-color, $ui-header-font-family: $panel-header-font-family, $ui-header-font-size: $panel-header-font-size, $ui-header-font-weight: $panel-header-font-weight, $ui-header-line-height: $panel-header-line-height, $ui-header-border-color: $panel-header-border-color, $ui-header-border-width: $panel-header-border-width, $ui-header-border-style: $panel-header-border-style, $ui-header-focus-outline-color: $panel-header-focus-outline-color, $ui-header-focus-outline-style: $panel-header-focus-outline-style, $ui-header-focus-outline-width: $panel-header-focus-outline-width, $ui-header-focus-outline-offset: $panel-header-focus-outline-offset, $ui-header-focus-color: $panel-header-focus-color, $ui-header-focus-background-color: $panel-header-focus-background-color, $ui-header-background-color: $panel-header-background-color, $ui-header-background-gradient: $panel-header-background-gradient, $ui-header-inner-border-color: $panel-header-inner-border-color, $ui-header-inner-border-width: $panel-header-inner-border-width, $ui-header-text-padding: $panel-header-text-padding, $ui-header-text-margin: $panel-header-text-margin, $ui-header-text-transform: $panel-header-text-transform, $ui-header-padding: $panel-header-padding, $ui-header-icon-width: $panel-header-icon-width, $ui-header-icon-height: $panel-header-icon-height, $ui-header-icon-spacing: $panel-header-icon-spacing, $ui-header-icon-background-position: $panel-header-icon-background-position, $ui-header-glyph-color: $panel-header-glyph-color, $ui-header-glyph-opacity: $panel-header-glyph-opacity, $ui-header-noborder-adjust: $panel-header-noborder-adjust, $ui-tool-spacing: $panel-tool-spacing, $ui-tool-background-image: $panel-tool-background-image, $ui-tool-glyph-color: $tool-glyph-color, $ui-tool-focus-outline-color: $panel-tool-focus-outline-color, $ui-tool-focus-outline-style: $panel-tool-focus-outline-style, $ui-tool-focus-outline-width: $panel-tool-focus-outline-width, $ui-tool-focus-outline-offset: $panel-tool-focus-outline-offset, $ui-tool-focus-color: $panel-tool-focus-color, $ui-tool-focus-background-color: $panel-tool-focus-background-color, $ui-tool-focus-background-image: $panel-tool-focus-background-image, $ui-body-color: $panel-body-color, $ui-body-border-color: $panel-body-border-color, $ui-body-border-width: $panel-body-border-width, $ui-body-border-style: $panel-body-border-style, $ui-body-background-color: $panel-body-background-color, $ui-body-font-size: $panel-body-font-size, $ui-body-font-weight: $panel-body-font-weight, $ui-body-font-family: $panel-body-font-family, $ui-background-stretch-top: $panel-background-stretch-top, $ui-background-stretch-bottom: $panel-background-stretch-bottom, $ui-background-stretch-right: $panel-background-stretch-right, $ui-background-stretch-left: $panel-background-stretch-left, // See the docs above $ui-include-border-management-rules: $panel-include-border-management-rules, $ui-wrap-border-color: null, $ui-wrap-border-width: null, $ui-ignore-frame-padding: $panel-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-framed' { $ui-wrap-border-color: $panel-wrap-border-color; } @else { $ui-wrap-border-color: $ui-border-color; } } @if is-null($ui-wrap-border-width) { @if $ui == 'default-framed' { $ui-wrap-border-width: $panel-wrap-border-width; } @else { $ui-wrap-border-width: $ui-border-width; } } @if is-null($ui-header-inner-border-color) and not is-null($ui-header-background-color) { $ui-header-inner-border-color: lighten($ui-header-background-color, 10); } $ui-header-padding-noborder: top($ui-header-padding) + top($ui-header-border-width) right($ui-header-padding) + right($ui-header-border-width) // don't add bottom border since bottom border always gets removed by dock layout bottom($ui-header-padding) left($ui-header-padding) + left($ui-header-border-width); .#{$prefix}panel-#{$ui} { @if not is-null($ui-border-color) { border-color: $ui-border-color; &.#{$prefix}masked { border-color: mix(#fff, $ui-border-color, $loadmask-opacity * 100); } } padding: $ui-padding; } // header .#{$prefix}panel-header-#{$ui} { @if not is-null($ui-header-font-size) { font-size: $ui-header-font-size; } @if $ui-header-border-width != 0 { border: $ui-header-border-width $ui-header-border-style $ui-header-border-color; } // Non font icon themes allow using glyphs as well @if $ui-tool-glyph-color != $tool-glyph-color { .#{$prefix}tool-tool-el { color: $ui-tool-glyph-color; } } @if not $enable-font-icons { .#{$prefix}tool-img { @if $ui-tool-background-image != $tool-background-image { background-image: theme-background-image($ui-tool-background-image); } } } @if is-null($ui-header-background-gradient) { // EXTJSIV-8846: partially transparent png images do not display correctly // in winXP/IE8 when the image element has a transparent background. // to fix this, we give the element the same background-color as the header. .#{$prefix}tool-tool-el { background-color: $ui-header-background-color; } } } .#{$prefix}panel-header-#{$ui}-horizontal { padding: $ui-header-padding; @if $include-ext-tab-bar { .#{$prefix}panel-header-#{$ui}-tab-bar { margin-top: -(top($ui-header-padding)); margin-bottom: -(bottom($ui-header-padding)); } } } @if $ui-header-noborder-adjust { .#{$prefix}panel-header-#{$ui}-horizontal.#{$prefix}header-noborder { padding: $ui-header-padding-noborder; @if $include-ext-tab-bar { .#{$prefix}panel-header-#{$ui}-tab-bar { margin-top: -(top($ui-header-padding-noborder)); margin-bottom: -(bottom($ui-header-padding-noborder)); } } } } .#{$prefix}panel-header-#{$ui}-vertical { padding: rotate90($ui-header-padding); @if $include-ext-tab-bar { .#{$prefix}panel-header-#{$ui}-tab-bar { margin-right: -(top($ui-header-padding)); margin-left: -(bottom($ui-header-padding)); } } } @if $ui-header-noborder-adjust { .#{$prefix}panel-header-#{$ui}-vertical.#{$prefix}header-noborder { padding: rotate90($ui-header-padding-noborder); @if $include-ext-tab-bar { .#{$prefix}panel-header-#{$ui}-tab-bar { margin-right: -(top($ui-header-padding-noborder)); margin-left: -(bottom($ui-header-padding-noborder)); } } } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}panel-header-#{$ui}-vertical { padding: rotate270($ui-header-padding); @if $include-ext-tab-bar { .#{$prefix}panel-header-#{$ui}-tab-bar { margin-left: -(top($ui-header-padding)); margin-right: -(bottom($ui-header-padding)); } } } @if $ui-header-noborder-adjust { .#{$prefix}rtl.#{$prefix}panel-header-#{$ui}-vertical.#{$prefix}header-noborder { padding: rotate270($ui-header-padding-noborder); @if $include-ext-tab-bar { .#{$prefix}panel-header-#{$ui}-tab-bar { margin-left: -(top($ui-header-padding-noborder)); margin-right: -(bottom($ui-header-padding-noborder)); } } } } } .#{$prefix}panel-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; } @if $ui-header-text-margin != 0 { margin: $ui-header-text-margin; } &.#{$prefix}title-focus { .#{$prefix}keyboard-mode & { @if not is-null($ui-header-focus-color) { color: $ui-header-focus-color; } @if not is-null($ui-header-focus-background-color) { background-color: $ui-header-focus-background-color; } @if not is-null($ui-header-focus-outline-width) { @include css-outline( $width: $ui-header-focus-outline-width, $style: $ui-header-focus-outline-style, $color: $ui-header-focus-outline-color, $offset: $ui-header-focus-outline-offset ); } } } > { .#{$prefix}title-text-#{$ui} { text-transform: $ui-header-text-transform; padding: $ui-header-text-padding; @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); } } } } } } } // body .#{$prefix}panel-body-#{$ui} { @if not is-null($ui-body-background-color) { background: $ui-body-background-color; } @if not is-null($ui-body-border-color) { border-color: $ui-body-border-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; } @if not is-null($ui-body-border-width) { border-width: $ui-body-border-width; @if not is-null($ui-body-border-style) { border-style: $ui-body-border-style; } } } @if not is-null($ui-border-radius) and $ui-border-radius != 0 { @include x-frame( $cls: 'panel', $ui: '#{$ui}', $border-radius: $ui-border-radius, $border-width: $ui-border-width, $padding: $ui-padding, $background-color: $ui-body-background-color, $ignore-frame-padding: $ui-ignore-frame-padding ); @include x-frame( $cls: 'panel-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) 0 left($ui-header-border-width), $padding: $ui-header-padding, $background-color: $ui-header-background-color, $background-gradient: $ui-header-background-gradient, $background-stretch: $ui-background-stretch-top ); @include x-frame( $cls: 'panel-header', $ui: '#{$ui}-right', $border-radius: 0 right($ui-border-radius) bottom($ui-border-radius) 0, $border-width: top($ui-header-border-width) right($ui-header-border-width) bottom($ui-header-border-width) 0, $padding: rotate90($ui-header-padding), $background-color: $ui-header-background-color, $background-gradient: $ui-header-background-gradient, $background-direction: right, $include-frame-rtl: $include-rtl, $background-stretch: $ui-background-stretch-right ); @include x-frame( $cls: 'panel-header', $ui: '#{$ui}-bottom', $border-radius: 0 0 bottom($ui-border-radius) left($ui-border-radius), $border-width: 0 right($ui-header-border-width) bottom($ui-header-border-width) left($ui-header-border-width), $padding: $ui-header-padding, $background-color: $ui-header-background-color, $background-gradient: $ui-header-background-gradient, $background-stretch: $ui-background-stretch-bottom ); @include x-frame( $cls: 'panel-header', $ui: '#{$ui}-left', $border-radius: top($ui-border-radius) 0 0 left($ui-border-radius), $border-width: top($ui-header-border-width) 0 bottom($ui-header-border-width) left($ui-header-border-width), $padding: rotate90($ui-header-padding), $background-color: $ui-header-background-color, $background-gradient: $ui-header-background-gradient, $background-direction: right, $include-frame-rtl: $include-rtl, $background-stretch: $ui-background-stretch-left ); @include x-frame( $cls: 'panel-header', $ui: '#{$ui}-collapsed-top', $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $border-width: $ui-header-border-width, $padding: $ui-header-padding, $background-color: $ui-header-background-color, $background-gradient: $ui-header-background-gradient, $background-stretch: $ui-background-stretch-top ); @include x-frame( $cls: 'panel-header', $ui: '#{$ui}-collapsed-right', $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $border-width: $ui-header-border-width, $padding: rotate90($ui-header-padding), $background-color: $ui-header-background-color, $background-gradient: $ui-header-background-gradient, $background-direction: right, $include-frame-rtl: $include-rtl, $background-stretch: $ui-background-stretch-right ); @include x-frame( $cls: 'panel-header', $ui: '#{$ui}-collapsed-bottom', $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $border-width: $ui-header-border-width, $padding: $ui-header-padding, $background-color: $ui-header-background-color, $background-gradient: $ui-header-background-gradient, $background-stretch: $ui-background-stretch-bottom ); @include x-frame( $cls: 'panel-header', $ui: '#{$ui}-collapsed-left', $border-radius: top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $border-width: $ui-header-border-width, $padding: rotate90($ui-header-padding), $background-color: $ui-header-background-color, $background-gradient: $ui-header-background-gradient, $background-direction: right, $include-frame-rtl: $include-rtl, $background-stretch: $ui-background-stretch-left ); // !important is needed in the following rules to override dock layout's border // management rules. the x-panel ancestor selector is used to increase the // specificity over the ".#{$prefix}nbr .#{$prefix}#{$cls-ui}" rule produced by // x-frame .#{$prefix}panel { .#{$prefix}panel-header-#{$ui}-top { border-bottom-width: bottom($ui-header-border-width) !important; } .#{$prefix}panel-header-#{$ui}-right { border-left-width: bottom($ui-header-border-width) !important; } .#{$prefix}panel-header-#{$ui}-bottom { border-top-width: bottom($ui-header-border-width) !important; } .#{$prefix}panel-header-#{$ui}-left { border-right-width: bottom($ui-header-border-width) !important; } } @if $include-slicer-border-radius { .#{$prefix}nbr { .#{$prefix}panel-header-#{$ui}-collapsed-top { border-bottom-width: 0 !important; } .#{$prefix}panel-header-#{$ui}-collapsed-right { border-left-width: 0 !important; } .#{$prefix}panel-header-#{$ui}-collapsed-bottom { border-top-width: 0 !important; } .#{$prefix}panel-header-#{$ui}-collapsed-left { border-right-width: 0 !important; } } } } @else { @if not is-null($ui-header-background-color) { .#{$prefix}panel-header-#{$ui} { @include background-gradient($ui-header-background-color, $ui-header-background-gradient); } .#{$prefix}panel-header-#{$ui}-vertical { @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}panel-header-#{$ui}-vertical { @include background-gradient($ui-header-background-color, $ui-header-background-gradient, left); } } } // header background images $panel-header-ui: 'panel-header-#{$ui}'; $panel-header-path: 'panel-header/panel-header-#{$ui}'; @if not is-null($ui-header-background-color) and not is-null($ui-header-background-gradient) { @if $include-slicer-gradient { .#{$prefix}nlg { .#{$prefix}#{$panel-header-ui}-top { background: slicer-background-image($panel-header-ui + '-top', '#{$panel-header-path}-top-bg'); } .#{$prefix}#{$panel-header-ui}-bottom { background: slicer-background-image($panel-header-ui + '-bottom', '#{$panel-header-path}-bottom-bg') bottom left; } .#{$prefix}#{$panel-header-ui}-left { background: slicer-background-image($panel-header-ui + '-left', '#{$panel-header-path}-left-bg') top left; } .#{$prefix}#{$panel-header-ui}-right { background: slicer-background-image($panel-header-ui + '-right', '#{$panel-header-path}-right-bg') top right; } @if $include-rtl { .#{$prefix}rtl { &.#{$prefix}#{$panel-header-ui}-left { background: slicer-background-image-rtl($panel-header-ui + '-left', '#{$panel-header-path}-left-bg-rtl') top right; } &.#{$prefix}#{$panel-header-ui}-right { background: slicer-background-image-rtl($panel-header-ui + '-right', '#{$panel-header-path}-right-bg-rtl') top left; } } } } } } .#{$prefix}panel { // !important is needed here to override dock layout's border management // rules. the x-panel ancestor selector is used to increase the specificity // over the ".#{$prefix}nbr .#{$prefix}#{$cls-ui}" rule produced by x-frame .#{$prefix}panel-header-#{$ui}-collapsed-border-top { border-bottom-width: $ui-header-border-width !important; } .#{$prefix}panel-header-#{$ui}-collapsed-border-right { border-left-width: $ui-header-border-width !important; } .#{$prefix}panel-header-#{$ui}-collapsed-border-bottom { border-top-width: $ui-header-border-width !important; } .#{$prefix}panel-header-#{$ui}-collapsed-border-left { border-right-width: $ui-header-border-width !important; } } $stretch: slicer-background-stretch($panel-header-ui + '-top', $ui-background-stretch-top); $stretch: slicer-background-stretch($panel-header-ui + '-right', $ui-background-stretch-right); $stretch: slicer-background-stretch($panel-header-ui + '-bottom', $ui-background-stretch-bottom); $stretch: slicer-background-stretch($panel-header-ui + '-left', $ui-background-stretch-left); @include x-slicer($panel-header-ui + '-top'); @include x-slicer($panel-header-ui + '-bottom'); @include x-slicer($panel-header-ui + '-left'); @include x-slicer($panel-header-ui + '-right'); } @if $ui-header-inner-border-width != 0 { .#{$prefix}panel-header-#{$ui}-top { @include inner-border($ui-header-inner-border-width, $ui-header-inner-border-color); } .#{$prefix}panel-header-#{$ui}-right { @include inner-border(rotate90($ui-header-inner-border-width), $ui-header-inner-border-color); } .#{$prefix}panel-header-#{$ui}-bottom { @include inner-border(rotate180($ui-header-inner-border-width), $ui-header-inner-border-color); } .#{$prefix}panel-header-#{$ui}-left { @include inner-border(rotate270($ui-header-inner-border-width), $ui-header-inner-border-color); } } $ui-tool-margin: 0 0 0 $ui-tool-spacing; .#{$prefix}panel-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}panel-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}panel-header-#{$ui} { .#{$prefix}tool-focus { .#{$prefix}keyboard-mode & { .#{$prefix}tool-tool-el { @if not is-null($ui-tool-focus-color) { color: $ui-tool-focus-color; } @if not is-null($ui-tool-focus-background-color) { background-color: $ui-tool-focus-background-color; } } @if $ui-tool-focus-background-image != $ui-tool-background-image { .#{$prefix}tool-img { background-image: theme-background-image($ui-tool-focus-background-image); } } @if not is-null($ui-tool-focus-outline-width) { @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 ); } } } } @if $include-rtl { .#{$prefix}rtl { &.#{$prefix}panel-header-#{$ui}-collapsed-border-right { border-right-width: $ui-header-border-width !important; } &.#{$prefix}panel-header-#{$ui}-collapsed-border-left { border-left-width: $ui-header-border-width !important; } } } // Panel 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) .#{$prefix}panel-#{$ui}-resizable { // Panel resize handles are invisible .#{$prefix}panel-handle { @include opacity(0); } // If there's a border width, embed the handles in that border @if $ui-border-width > $border-width-threshold { // Resizable Panel element overflow must be visible for embedded handles to accept mouseovers. overflow: visible; .#{$prefix}panel-handle-north-br { top: -($ui-border-width); } .#{$prefix}panel-handle-south-br { bottom: -($ui-border-width); } .#{$prefix}panel-handle-east-br { right: -($ui-border-width); } .#{$prefix}panel-handle-west-br { left: -($ui-border-width); } .#{$prefix}panel-handle-northwest-br { left: -($ui-border-width); top: -($ui-border-width); } .#{$prefix}panel-handle-northeast-br { right: -($ui-border-width); top: -($ui-border-width); } .#{$prefix}panel-handle-southeast-br { right: -($ui-border-width); bottom: -($ui-border-width); } .#{$prefix}panel-handle-southwest-br { left: -($ui-border-width); bottom: -($ui-border-width); } } } @if $ui-include-border-management-rules { @include border-management( $parent-cls: panel-#{$ui}, $border-width: $ui-wrap-border-width, $border-color: $ui-wrap-border-color ); }} .#{$prefix}panel-ghost { @include opacity($panel-ghost-opacity);} @if $include-panel-default-ui { @include extjs-panel-ui( $ui: 'default' );} @if $include-panel-default-framed-ui { @include extjs-panel-ui( $ui: 'default-framed', $ui-border-color: $panel-frame-border-color, $ui-border-width: $panel-frame-border-width, $ui-border-radius: $panel-frame-border-radius, $ui-padding: $panel-frame-padding, $ui-header-border-color: $panel-frame-border-color, $ui-header-border-width: $panel-frame-header-border-width, $ui-header-inner-border-color: $panel-frame-header-inner-border-color, $ui-header-inner-border-width: $panel-frame-header-inner-border-width, $ui-header-padding: $panel-frame-header-padding, $ui-body-border-width: $panel-frame-body-border-width, $ui-body-background-color: $panel-frame-background-color );}