/**
* Creates a visual theme for a Panel
* @member Ext.panel.Panel
*/
@mixin extjs-panel-ui(
$ui-label,
$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-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-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-margin: $panel-header-icon-margin,
$ui-tool-padding: $panel-tool-padding,
$ui-tool-margin: $panel-tool-margin,
$ui-tool-top-margin: $panel-tool-top-margin,
$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-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
){
@if $ui-header-inner-border-color == null and $ui-header-background-color != null {
$ui-header-inner-border-color: lighten($ui-header-background-color, 10);
}
.#{$prefix}panel-#{$ui-label} {
@if $ui-border-color != null { border-color: $ui-border-color; }
padding: $ui-padding;
}
// header
.#{$prefix}panel-header-#{$ui-label} {
@if $ui-header-font-size != null { 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;
}
padding: $ui-header-padding;
}
.#{$prefix}panel-header-#{$ui-label}-vertical {
padding: rotate90($ui-header-padding);
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}panel-header-#{$ui-label}-vertical {
padding: rotate270($ui-header-padding);
}
}
// header text
.#{$prefix}panel-header-text-container-#{$ui-label} {
@if $ui-header-color != null { color: $ui-header-color; }
@if $ui-header-font-size != null { font-size: $ui-header-font-size; }
@if $ui-header-font-weight != null { font-weight: $ui-header-font-weight; }
@if $ui-header-font-family != null { font-family: $ui-header-font-family; }
@if $ui-header-line-height != null { line-height: $ui-header-line-height; }
padding: $ui-header-text-padding;
text-transform: $ui-header-text-transform;
}
// body
.#{$prefix}panel-body-#{$ui-label} {
@if $ui-body-background-color != null { background: $ui-body-background-color; }
@if $ui-body-border-color != null { border-color: $ui-body-border-color; }
@if $ui-body-color != null { color: $ui-body-color; }
@if $ui-body-font-size != null { font-size: $ui-body-font-size; }
@if $ui-body-font-weight != null { font-size: $ui-body-font-weight; }
@if $ui-body-border-width != null {
border-width: $ui-body-border-width;
@if $ui-body-border-style != null { border-style: $ui-body-border-style; }
}
}
@if $ui-border-radius != null {
@include x-frame(
$cls: 'panel',
$ui: '#{$ui-label}',
$border-radius : $ui-border-radius,
$border-width : $ui-border-width,
$padding : $ui-padding,
$background-color: $ui-body-background-color
);
@include x-frame(
$cls: 'panel-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) 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-label}-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-label}-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-label}-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-label}-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-label}-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-label}-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-label}-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-label}-top {
border-bottom-width: bottom($ui-header-border-width) !important;
}
.#{$prefix}panel-header-#{$ui-label}-right {
border-left-width: bottom($ui-header-border-width) !important;
}
.#{$prefix}panel-header-#{$ui-label}-bottom {
border-top-width: bottom($ui-header-border-width) !important;
}
.#{$prefix}panel-header-#{$ui-label}-left {
border-right-width: bottom($ui-header-border-width) !important;
}
}
.#{$prefix}nbr {
.#{$prefix}panel-header-#{$ui-label}-collapsed-top {
border-bottom-width: 0 !important;
}
.#{$prefix}panel-header-#{$ui-label}-collapsed-right {
border-left-width: 0 !important;
}
.#{$prefix}panel-header-#{$ui-label}-collapsed-bottom {
border-top-width: 0 !important;
}
.#{$prefix}panel-header-#{$ui-label}-collapsed-left {
border-right-width: 0 !important;
}
}
} @else {
@if $ui-header-background-color != null and ($supports-gradients or $compile-all) {
.#{$prefix}panel-header-#{$ui-label} {
@include background-gradient($ui-header-background-color, $ui-header-background-gradient);
}
.#{$prefix}panel-header-#{$ui-label}-vertical {
@include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}panel-header-#{$ui-label}-vertical {
@include background-gradient($ui-header-background-color, $ui-header-background-gradient, left);
}
}
}
// header background images
$panel-header-ui: 'panel-header-#{$ui-label}';
$panel-header-path: 'panel-header/panel-header-#{$ui-label}';
@if $ui-header-background-color != null and $ui-header-background-gradient != null {
@if not $supports-gradients or $compile-all {
.#{$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');
}
.#{$prefix}#{$panel-header-ui}-left {
background: slicer-background-image($panel-header-ui + '-left',
'#{$panel-header-path}-left-bg') top right;
}
.#{$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');
}
&.#{$prefix}#{$panel-header-ui}-right {
background: slicer-background-image-rtl($panel-header-ui + '-right',
'#{$panel-header-path}-right-bg-rtl');
}
}
}
}
}
}
.#{$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-label}-collapsed-border-top {
border-bottom-width: $ui-header-border-width !important;
}
.#{$prefix}panel-header-#{$ui-label}-collapsed-border-right {
border-left-width: $ui-header-border-width !important;
}
.#{$prefix}panel-header-#{$ui-label}-collapsed-border-bottom {
border-top-width: $ui-header-border-width !important;
}
.#{$prefix}panel-header-#{$ui-label}-collapsed-border-left {
border-right-width: $ui-header-border-width !important;
}
}
$stretch: slicer-background-stretch($panel-header-ui + '-left', right);
$stretch: slicer-background-stretch($panel-header-ui + '-bottom', top);
@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');
}
.#{$prefix}panel-header-#{$ui-label}-vertical .#{$prefix}panel-header-text-container {
@include rotate-element($angle: 90, $background-color: $ui-header-background-color);
}
@if $include-rtl {
.#{$prefix}panel-header-#{$ui-label}-vertical .#{$prefix}rtl.#{$prefix}panel-header-text-container {
@include rotate-element($angle: 270, $background-color: $ui-header-background-color);
}
}
@if $ui-header-inner-border-width != 0 {
.#{$prefix}panel-header-#{$ui-label}-top {
@include inner-border($ui-header-inner-border-width, $ui-header-inner-border-color);
}
.#{$prefix}panel-header-#{$ui-label}-right {
@include inner-border(rotate90($ui-header-inner-border-width), $ui-header-inner-border-color);
}
.#{$prefix}panel-header-#{$ui-label}-bottom {
@include inner-border(rotate180($ui-header-inner-border-width), $ui-header-inner-border-color);
}
.#{$prefix}panel-header-#{$ui-label}-left {
@include inner-border(rotate270($ui-header-inner-border-width), $ui-header-inner-border-color);
}
}
.#{$prefix}panel-header-#{$ui-label} {
.#{$prefix}panel-header-icon {
width: $ui-header-icon-width;
height: $ui-header-icon-height;
margin: $ui-header-icon-margin;
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}panel-header-icon {
margin: rtl($ui-header-icon-margin);
}
}
}
.#{$prefix}panel-header-#{$ui-label}-vertical {
.#{$prefix}panel-header-icon {
margin: rotate90($ui-header-icon-margin);
}
@if $include-rtl {
.#{$prefix}rtl.#{$prefix}panel-header-icon {
margin: rtl(rotate90($ui-header-icon-margin));
}
}
}
.#{$prefix}panel-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}panel-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}panel-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);
}
}
}
@if $include-rtl {
.#{$prefix}rtl {
&.#{$prefix}panel-header-#{$ui-label}-collapsed-border-right {
border-right-width: $ui-header-border-width !important;
}
&.#{$prefix}panel-header-#{$ui-label}-collapsed-border-left {
border-left-width: $ui-header-border-width !important;
}
}
}
}
.#{$prefix}panel-ghost {
@include opacity($panel-ghost-opacity);
}
@if $include-panel-uis == true {
@include extjs-panel-ui(
$ui-label: 'default'
);
@include extjs-panel-ui(
$ui-label: '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
);
}