<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-panel-Panel-css_mixin-extjs-panel-ui'>/**
|
</span> * Creates a visual theme for a Panel
|
*
|
* @param {string} $ui-label
|
* 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 {number/list} [$ui-header-text-padding=$panel-header-text-padding]
|
* The padding 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-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-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`.
|
*
|
* @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-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-tool-spacing: $panel-tool-spacing,
|
$ui-tool-background-image: $panel-tool-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-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: $panel-wrap-border-color,
|
$ui-wrap-border-width: $panel-wrap-border-width
|
){
|
@if $ui-header-inner-border-color == null and $ui-header-background-color != null {
|
$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-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;
|
}
|
|
.#{$prefix}tool-img {
|
@if $ui-tool-background-image != $tool-background-image {
|
background-image: theme-background-image($ui-tool-background-image);
|
}
|
@if $ui-header-background-gradient == null {
|
// 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;
|
}
|
}
|
}
|
|
.#{$prefix}panel-header-#{$ui-label}-horizontal {
|
padding: $ui-header-padding;
|
}
|
|
.#{$prefix}panel-header-#{$ui-label}-horizontal-noborder {
|
padding: $ui-header-padding-noborder;
|
}
|
|
.#{$prefix}panel-header-#{$ui-label}-vertical {
|
padding: rotate90($ui-header-padding);
|
}
|
|
.#{$prefix}panel-header-#{$ui-label}-vertical-noborder {
|
padding: rotate90($ui-header-padding-noborder);
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}panel-header-#{$ui-label}-vertical {
|
padding: rotate270($ui-header-padding);
|
}
|
|
.#{$prefix}rtl.#{$prefix}panel-header-#{$ui-label}-vertical-noborder {
|
padding: rotate270($ui-header-padding-noborder);
|
}
|
}
|
|
|
// 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 + '-top', bottom);
|
$stretch: slicer-background-stretch($panel-header-ui + '-right', left);
|
$stretch: slicer-background-stretch($panel-header-ui + '-bottom', bottom);
|
$stretch: slicer-background-stretch($panel-header-ui + '-left', 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');
|
}
|
|
.#{$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;
|
background-position: $ui-header-icon-background-position;
|
}
|
.#{$prefix}panel-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.
|
.#{$prefix}ie8m & {
|
color: mix($ui-header-glyph-color, $ui-header-background-color, $ui-header-glyph-opacity * 100);
|
}
|
}
|
}
|
|
$ui-header-icon-margin: 0 $panel-header-icon-spacing 0 0;
|
.#{$prefix}panel-header-#{$ui-label}-horizontal {
|
.#{$prefix}panel-header-icon-before-title {
|
margin: $ui-header-icon-margin;
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}panel-header-icon-before-title {
|
margin: rtl($ui-header-icon-margin);
|
}
|
}
|
|
.#{$prefix}panel-header-icon-after-title {
|
margin: rtl($ui-header-icon-margin);
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}panel-header-icon-after-title {
|
margin: $ui-header-icon-margin;
|
}
|
}
|
}
|
|
.#{$prefix}panel-header-#{$ui-label}-vertical {
|
.#{$prefix}panel-header-icon-before-title {
|
margin: rotate90($ui-header-icon-margin);
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}panel-header-icon-before-title {
|
margin: rotate270(rtl($ui-header-icon-margin));
|
}
|
}
|
|
.#{$prefix}panel-header-icon-after-title {
|
margin: rotate90(rtl($ui-header-icon-margin));
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}panel-header-icon-after-title {
|
margin: rotate270($ui-header-icon-margin);
|
}
|
}
|
}
|
|
$ui-tool-margin: 0 0 0 $ui-tool-spacing;
|
.#{$prefix}panel-header-#{$ui-label}-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-label}-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);
|
}
|
}
|
}
|
|
@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;
|
}
|
}
|
}
|
|
// 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-label}-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-label},
|
$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-label: 'default'
|
);
|
}
|
|
@if $include-panel-default-framed-ui {
|
@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
|
);
|
}</pre>
|
</body>
|
</html>
|
