--- /dev/null
+/**
+ * @class Ext.Panel
+ * Used to create the base structure of an Ext.Panel
+ */
+@mixin extjs-panel {
+ .#{$prefix}panel,
+ .#{$prefix}plain {
+ overflow: hidden;
+ position: relative;
+ }
+
+ // Workaround for disappearing right edge in IE6
+ @if $include-ie {
+ .#{$prefix}ie {
+ .#{$prefix}panel-header,
+ .#{$prefix}panel-header-tl,
+ .#{$prefix}panel-header-tc,
+ .#{$prefix}panel-header-tr,
+ .#{$prefix}panel-header-ml,
+ .#{$prefix}panel-header-mc,
+ .#{$prefix}panel-header-mr,
+ .#{$prefix}panel-header-bl,
+ .#{$prefix}panel-header-bc,
+ .#{$prefix}panel-header-br {
+ zoom: 1;
+ }
+ }
+ }
+
+ //panel header
+ .#{$prefix}panel-header {
+ padding: $panel-header-padding;
+ }
+
+ .#{$prefix}panel-header-icon,
+ .#{$prefix}window-header-icon {
+ width:16px;
+ height:16px;
+ background-repeat:no-repeat;
+ background-position:0 0;
+ vertical-align:middle;
+ margin-right:4px;
+ margin-top:-1px;
+ margin-bottom:-1px;
+ }
+
+ .#{$prefix}panel-header-draggable,
+ .#{$prefix}panel-header-draggable .#{$prefix}panel-header-text,
+ .#{$prefix}window-header-draggable,
+ .#{$prefix}window-header-draggable .#{$prefix}window-header-text{
+ cursor: move;
+ }
+
+ // A ghost is just a Panel. The only extra it needs is opacity.
+ // TODO: Make opacity a variable
+ .#{$prefix}panel-ghost, .#{$prefix}window-ghost {
+ @include opacity(0.65);
+ cursor: move;
+ }
+
+ .#{$prefix}panel-header-horizontal, .#{$prefix}window-header-horizontal, .#{$prefix}btn-group-header-horizontal {
+ .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
+ width: 100%;
+ }
+ }
+
+ .#{$prefix}panel-header-vertical, .#{$prefix}window-header-vertical, .#{$prefix}btn-group-header-vertical {
+ .#{$prefix}panel-header-body, .#{$prefix}window-header-body, .#{$prefix}btn-group-header-body {
+ height: 100%;
+ }
+ }
+
+ // Vertical headers must be inline blocks so that they acquire width from the content
+ .#{$prefix}panel-header-vertical, .#{$prefix}panel-header-vertical .#{$prefix}panel-header-body,
+ .#{$prefix}btn-group-header-vertical, .#{$prefix}btn-group-header-vertical .#{$prefix}btn-group-header-body,
+ .#{$prefix}window-header-vertical, .#{$prefix}window-header-vertical .#{$prefix}window-header-body {
+ display: -moz-inline-stack;
+ display: inline-block;
+ }
+
+ .#{$prefix}panel-header-text {
+ @include no-select;
+ white-space: nowrap;
+ }
+
+ .#{$prefix}panel-header-left,
+ .#{$prefix}panel-header-right {
+ .#{$prefix}vml-base {
+ left: -3px !important;
+ }
+ }
+
+ //panel body
+ .#{$prefix}panel-body {
+ overflow: hidden;
+ position: relative;
+ }
+
+ .#{$prefix}panel-header-vertical {
+ .#{$prefix}surface {
+ margin-top: 2px;
+ }
+ }
+
+ .#{$prefix}panel-header-plain-vertical {
+ .#{$prefix}surface {
+ margin-top: 0;
+ }
+ }
+
+
+ .#{$prefix}panel-collapsed {
+ .#{$prefix}panel-header-collapsed-border-top {
+ border-bottom-width: $panel-header-border-width !important;
+ }
+ .#{$prefix}panel-header-collapsed-border-right {
+ border-left-width: $panel-header-border-width !important;
+ }
+ .#{$prefix}panel-header-collapsed-border-bottom {
+ border-top-width: $panel-header-border-width !important;
+ }
+ .#{$prefix}panel-header-collapsed-border-left {
+ border-right-width: $panel-header-border-width !important;
+ }
+ }
+
+ @if not $supports-gradients or $compile-all {
+ .#{$prefix}nlg .#{$prefix}panel-header-vertical {
+ .#{$prefix}frame-mc {
+ background-repeat: repeat-y;
+ }
+ }
+ }
+
+ @if $include-panel-uis == true {
+ @include extjs-panel-ui(
+ 'default',
+
+ $ui-base-color: $panel-base-color,
+ $ui-border-color: $panel-border-color,
+
+ $ui-header-color: $panel-header-color,
+ $ui-header-font-size: $panel-header-font-size,
+ $ui-header-font-weight: $panel-header-font-weight,
+ $ui-header-border-color: $panel-header-border-color,
+ $ui-header-background-color: $panel-header-background-color,
+ $ui-header-background-gradient: $panel-header-background-gradient,
+
+ $ui-body-color: $panel-body-color,
+ $ui-body-border-color: $panel-body-border-color,
+ $ui-body-border-width: 1px,
+ $ui-body-background-color: $panel-body-background-color
+ );
+
+ @include extjs-panel-ui(
+ 'default-framed',
+
+ $ui-base-color: $panel-base-color,
+ $ui-border-width: $panel-frame-border-width,
+ $ui-border-color: $panel-frame-border-color,
+ $ui-border-radius: $panel-frame-border-radius,
+
+ $ui-header-color: $panel-header-color,
+ $ui-header-font-size: $panel-header-font-size,
+ $ui-header-font-weight: $panel-header-font-weight,
+ $ui-header-border-color: $panel-frame-border-color,
+ $ui-header-background-color: $panel-header-background-color,
+ $ui-header-background-gradient: $panel-header-background-gradient,
+
+ $ui-body-color: $panel-body-color,
+ $ui-body-border-color: $panel-body-border-color,
+ $ui-body-border-width: 0,
+ $ui-body-background-color: $panel-frame-background-color
+ );
+ }
+
+ .x-panel-header-plain,
+ .x-panel-body-plain {
+ border: 0;
+ padding: 0;
+ }
+}
+
+/**
+ * @class Ext.Panel
+ * Used to create a visual theme for an Ext.Panel
+ */
+@mixin extjs-panel-ui(
+ $ui-label,
+
+ $ui-base-color: null,
+
+ $ui-border-color: null,
+ $ui-border-radius: null,
+ $ui-border-width: 0,
+
+ $ui-header-color: null,
+ $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-border-color: $ui-border-color,
+ $ui-header-background-color: null,
+ $ui-header-background-gradient: matte,
+ $ui-header-inner-border-color: null,
+
+ $ui-body-color: null,
+ $ui-body-border-color: null,
+ $ui-body-border-width: null,
+ $ui-body-border-style: solid,
+ $ui-body-background-color: null,
+ $ui-body-font-size: null,
+ $ui-body-font-weight: null
+){
+ @if $ui-base-color != null {
+ @if $ui-border-color == null { $ui-border-color: $ui-base-color; }
+
+ @if $ui-header-color == null { $ui-header-color: #fff; }
+ @if $ui-header-background-color == null { $ui-header-background-color: lighten($ui-base-color, 15); }
+ }
+
+ @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; }
+ }
+
+ // header
+ .#{$prefix}panel-header-#{$ui-label} {
+ @if $ui-header-font-size != null { font-size: $ui-header-font-size; }
+ line-height: $panel-header-line-height;
+
+ @if $ui-header-border-color != null {
+ border-color: $ui-header-border-color;
+ border-width: $panel-header-border-width;
+ border-style: $panel-header-border-style;
+ }
+
+ @if $supports-gradients or $compile-all {
+ @if $ui-header-background-color != null { @include background-gradient($ui-header-background-color, $ui-header-background-gradient); }
+
+ @if $panel-header-inner-border and $ui-header-inner-border-color != null {
+ @include inner-border(
+ $width: $panel-header-inner-border-width,
+ $color: $ui-header-inner-border-color
+ );
+ }
+ }
+ }
+
+ // header background images
+ @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-label}-top {
+ background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
+ }
+
+ .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
+ background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
+ }
+
+ .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left {
+ background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-left-bg.gif');
+ }
+
+ .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
+ background-image: theme-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif');
+ }
+ }
+ }
+
+ // header text
+ .#{$prefix}panel-header-text-#{$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; }
+ }
+
+ // 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; }
+ }
+ }
+
+ .#{$prefix}panel-collapsed {
+ .#{$prefix}window-header-#{$ui-label},
+ .#{$prefix}panel-header-#{$ui-label} {
+ @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
+ }
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-vertical {
+ @if $ui-body-border-color != null { border-color: $ui-body-border-color; }
+ }
+
+ @if $ui-base-color != null {
+ @if $supports-gradients or $compile-all {
+ .#{$prefix}panel-header-#{$ui-label}-left,
+ .#{$prefix}panel-header-#{$ui-label}-right {
+ @include background-gradient($ui-header-background-color, $ui-header-background-gradient, right);
+ }
+ }
+ }
+
+ // TODO: Fix this genocide of Sass.
+ // and window stuff in here, wtf?
+ @if $include-webkit {
+ .#{$prefix}webkit {
+ #{$prefix}panel-ghost > div.#{$prefix}panel-body-#{$ui-label},
+ #{$prefix}panel-ghost > div.#{$prefix}window-body-#{$ui-label} {
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, from(white), color-stop(0.02, #E5ECF7), to(#B7CBE7));
+ }
+ }
+ }
+
+ @if $include-ff {
+ .#{$prefix}gecko {
+ .#{$prefix}panel-ghost > div.#{$prefix}panel-body-#{$ui-label},
+ .#{$prefix}panel-ghost > div.#{$prefix}window-body-#{$ui-label} {
+ background-image: -moz-linear-gradient(#FFFFFF, #E5ECF7 2%, #B7CBE7);
+ }
+ }
+ }
+
+ @if $ui-border-radius != null {
+ @include x-frame(
+ 'panel',
+ $ui: '#{$ui-label}',
+
+ /* Radius, width, padding and background-color */
+ $border-radius : $ui-border-radius,
+ $border-width : $ui-border-width,
+ $padding : $panel-frame-padding,
+ $background-color: $ui-body-background-color
+ );
+
+
+ @include x-frame('panel-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
+ @include x-frame('panel-header', '#{$ui-label}-right', 0 right($ui-border-radius) bottom($ui-border-radius) 0, $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
+ @include x-frame('panel-header', '#{$ui-label}-bottom', 0 0 bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
+ @include x-frame('panel-header', '#{$ui-label}-left', top($ui-border-radius) 0 0 left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
+
+ .#{$prefix}panel-header-#{$ui-label}-top {
+ @include inner-border(1px 1px 0 1px, $ui-header-inner-border-color);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-right {
+ @include inner-border(1px 1px 1px 0, $ui-header-inner-border-color);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-bottom {
+ @include inner-border(0 1px 1px 1px, $ui-header-inner-border-color);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-left {
+ @include inner-border(1px 0 1px 1px, $ui-header-inner-border-color);
+ }
+ } @else {
+ .#{$prefix}panel-collapsed {
+ .#{$prefix}panel-header-#{$ui-label}-top {
+ @include border-bottom-radius($ui-border-radius);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-right {
+ @include border-left-radius($ui-border-radius);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-bottom {
+ @include border-top-radius($ui-border-radius);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-left {
+ @include border-right-radius($ui-border-radius);
+ }
+ }
+
+ .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
+ background-position: top right;
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-top {
+ @include inner-border(1px 0 0 0, $ui-header-inner-border-color);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-right {
+ @include inner-border(0 1px 0 0, $ui-header-inner-border-color);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-bottom {
+ @include inner-border(0 0 1px, $ui-header-inner-border-color);
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-left {
+ @include inner-border(0 0 0 1px, $ui-header-inner-border-color);
+ }
+ }
+
+ .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
+ background-position: bottom left;
+ }
+
+ @if $ui-border-radius != null {
+ .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-top {
+ border-bottom-width: 1px !important;
+ }
+
+ .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-right {
+ border-left-width: 1px !important;
+ }
+
+ .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-bottom {
+ border-top-width: 1px !important;
+ }
+
+ .#{$prefix}panel .#{$prefix}panel-header-#{$ui-label}-left {
+ border-right-width: 1px !important;
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-collapsed {
+ @include border-radius($ui-border-radius);
+ }
+
+ @include x-frame('panel-header', '#{$ui-label}-collapsed-top', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
+ @include x-frame('panel-header', '#{$ui-label}-collapsed-right', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
+ @include x-frame('panel-header', '#{$ui-label}-collapsed-bottom', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient);
+ @include x-frame('panel-header', '#{$ui-label}-collapsed-left', top($ui-border-radius) right($ui-border-radius) bottom($ui-border-radius) left($ui-border-radius), $ui-border-width, 4px 5px 4px 5px, $ui-header-background-color, $ui-header-background-gradient, false, right);
+ }
+
+ //background positioning of images
+ .#{$prefix}panel-header-#{$ui-label}-right-tc,
+ .#{$prefix}panel-header-#{$ui-label}-right-mc,
+ .#{$prefix}panel-header-#{$ui-label}-right-bc {
+ background-position: right 0;
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-bottom-tc,
+ .#{$prefix}panel-header-#{$ui-label}-bottom-mc,
+ .#{$prefix}panel-header-#{$ui-label}-bottom-bc {
+ background-position: 0 bottom;
+ }
+}
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff