/**
* Creates a visual theme for an Ext.Window
* @member Ext.window.Window
*/
@mixin extjs-window-ui(
$ui-label,
$ui-padding: null,
$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-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-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-margin: $window-header-icon-margin,
$ui-tool-padding: $window-tool-padding,
$ui-tool-margin: $window-tool-margin,
$ui-tool-top-margin: $window-tool-top-margin,
$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-background-color: $window-background-color
){
$ui-header-text-height: $window-header-line-height;
.#{$prefix}window-#{$ui-label} {
@if $ui-border-color != null { border-color: $ui-border-color; }
@if $ui-border-radius != null { @include border-radius($ui-border-radius); }
@if $ui-inner-border-width != 0 {
@include inner-border($ui-inner-border-width, $ui-inner-border-color);
}
}
@if $ui-border-radius != null {
@include x-frame(
'window',
$ui-label,
$border-radius: $ui-border-radius,
$border-width: $ui-border-width,
$padding: $ui-padding,
$background-color: $ui-background-color
);
}
.#{$prefix}window-body-#{$ui-label} {
@if $ui-body-border-color !=null {
border-color: $ui-body-border-color;
border-width: $ui-body-border-width;
border-style: $ui-body-border-style;
}
@if $ui-body-background-color != null { background: $ui-body-background-color; }
@if $ui-body-color != null { color: $ui-body-color; }
}
.#{$prefix}window-header-#{$ui-label} {
@if $ui-header-font-size != null { font-size: $ui-header-font-size; }
@if $ui-border-color != null { border-color: $ui-border-color; }
zoom:1;
}
.#{$prefix}window-header-#{$ui-label}-vertical .#{$prefix}window-header-text-container {
@include rotate-element($angle: 90, $background-color: $ui-background-color);
}
@if $include-rtl {
.#{$prefix}window-header-#{$ui-label}-vertical .#{$prefix}rtl.#{$prefix}window-header-text-container {
@include rotate-element($angle: 270, $background-color: $ui-background-color);
}
}
.#{$prefix}window-header-text-container-#{$ui-label} {
@if $ui-header-color != null { color: $ui-header-color; }
@if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
line-height: $ui-header-text-height;
font-family: $ui-header-font-family;
font-size: $ui-header-font-size;
padding: $ui-header-text-padding;
text-transform: $ui-header-text-transform;
}
$header-border-bottom-width: 0;
@if $ui-body-border-width == 0 {
$header-border-bottom-width: bottom($ui-header-border-width);
}
$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 $ui-border-radius != null {
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-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-background-color
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-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-background-color,
$include-frame-rtl: $include-rtl
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-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-background-color
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-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-background-color,
$include-frame-rtl: $include-rtl
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-collapsed-top',
$border-radius: $ui-border-radius,
$border-width: $ui-header-border-width,
$padding: $ui-header-padding,
$background-color: $ui-background-color
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-collapsed-right',
$border-radius: $ui-border-radius,
$border-width: $ui-header-border-width,
$padding: rotate90($ui-header-padding),
$background-color: $ui-background-color,
$include-frame-rtl: $include-rtl
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-collapsed-bottom',
$border-radius: $ui-border-radius,
$border-width: $ui-header-border-width,
$padding: rotate180($ui-header-padding),
$background-color: $ui-background-color
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-collapsed-left',
$border-radius: $ui-border-radius,
$border-width: $ui-header-border-width,
$padding: rotate270($ui-header-padding),
$background-color: $ui-background-color,
$include-frame-rtl: $include-rtl
);
}
@if $ui-header-inner-border-width != 0 {
.#{$prefix}window-header-#{$ui-label}-top {
@include inner-border($ui-header-inner-border-width, $ui-header-inner-border-color);
}
.#{$prefix}window-header-#{$ui-label}-right {
@include inner-border(rotate90($ui-header-inner-border-width), $ui-inner-border-color);
}
.#{$prefix}window-header-#{$ui-label}-bottom {
@include inner-border(rotate180($ui-header-inner-border-width), $ui-inner-border-color);
}
.#{$prefix}window-header-#{$ui-label}-left {
@include inner-border(rotate270($ui-header-inner-border-width), $ui-inner-border-color);
}
}
.#{$prefix}window-header-#{$ui-label} {
.#{$prefix}window-header-icon {
width: $ui-header-icon-width;
height: $ui-header-icon-height;
margin: $ui-header-icon-margin;
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}window-header-icon {
margin: rtl($ui-header-icon-margin);
}
}
}
.#{$prefix}window-header-#{$ui-label}-vertical {
.#{$prefix}window-header-icon {
margin: rotate90($ui-header-icon-margin);
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}window-header-icon {
margin: rtl(rotate90($ui-header-icon-margin));
}
}
}
.#{$prefix}window-header-#{$ui-label}-horizontal {
.#{$prefix}tool {
margin: $ui-tool-margin;
padding: $ui-tool-padding;
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}tool {
padding: rtl($ui-tool-padding);
margin: rtl($ui-tool-margin);
}
}
}
.#{$prefix}window-header-#{$ui-label}-vertical {
.#{$prefix}tool {
margin: rotate90($ui-tool-margin);
padding: rotate90($ui-tool-padding);
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}tool {
margin: rtl(rotate90($ui-tool-margin));
padding: rtl(rotate90($ui-tool-padding));
}
}
}
.#{$prefix}window-header-#{$ui-label}-vertical {
// This assumes that there will only ever be one tool that shows at the top of a
// vertical header (the collapse tool). We should revisit this if it is decided that
// we want to support multiple tools at the top
.#{$prefix}tool-top {
margin: $ui-tool-top-margin;
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}tool-top {
margin: rtl($ui-tool-top-margin);
}
}
}
// !important is needed in the following rules to override dock layout's border
// management rules.
@if top($ui-body-border-width) == 0 {
.#{$prefix}window-header-#{$ui-label} {
border-width: $ui-header-border-width !important;
}
} @else {
.#{$prefix}window-#{$ui-label}-collapsed .#{$prefix}window-header {
border-width: $ui-header-border-width !important;
}
}
@if not $supports-border-radius or $compile-all {
.#{$prefix}nbr .#{$prefix}window-#{$ui-label}-collapsed .#{$prefix}window-header {
border-width: 0 !important;
}
}
}
.#{$prefix}window-ghost {
@include opacity($window-ghost-opacity);
}
@include extjs-window-ui('default');