public/stylesheets/extjs/resources/themes/stylesheets/ext4/default/widgets/_panel.scss in erp_app-3.0.16 vs public/stylesheets/extjs/resources/themes/stylesheets/ext4/default/widgets/_panel.scss in erp_app-3.1.0
- old
+ new
@@ -1,16 +1,16 @@
/**
- * @class Ext.Panel
- * Used to create the base structure of an Ext.Panel
- */
+ * Create the base structure of an Ext.Panel
+ * @member Ext.panel.Panel
+ */
@mixin extjs-panel {
.#{$prefix}panel,
.#{$prefix}plain {
overflow: hidden;
position: relative;
}
-
+
@if $include-ie {
// Workaround for disappearing right edge in IE6
.#{$prefix}ie {
.#{$prefix}panel-header,
.#{$prefix}panel-header-tl,
@@ -30,28 +30,36 @@
td.#{$prefix}frame-mc {
vertical-align: top;
}
}
}
-
+
//panel header
- .#{$prefix}panel-header {
+ .#{$prefix}panel-header-horizontal {
padding: $panel-header-padding;
}
-
+ .#{$prefix}panel-header-vertical {
+ padding: rotate90($panel-header-padding);
+ }
+
.#{$prefix}panel-header-icon,
.#{$prefix}window-header-icon {
- width:16px;
- height:16px;
+ width: $panel-header-icon-width;
+ height: $panel-header-icon-height;
background-repeat:no-repeat;
background-position:0 0;
vertical-align:middle;
margin-right:4px;
- margin-top:-1px;
- margin-bottom:-1px;
}
-
+
+ .#{$prefix}vertical {
+ .#{$prefix}panel-header-icon,
+ .#{$prefix}window-header-icon {
+ margin: 0 0 4px;
+ }
+ }
+
.#{$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;
@@ -74,25 +82,48 @@
.#{$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-container {
+ .#{$prefix}panel-header-text-container,
+ .#{$prefix}window-header-text-container {
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
+ padding: $panel-header-text-padding;
}
- .#{$prefix}panel-header-text {
+ .#{$prefix}panel-header-vertical .#{$prefix}panel-header-text-container,
+ .#{$prefix}window-header-vertical .#{$prefix}window-header-text-container {
+ -webkit-transform: rotate(90deg);
+ -webkit-transform-origin: 0 0;
+ -moz-transform: rotate(90deg);
+ -moz-transform-origin: 0 0;
+ -o-transform: rotate(90deg);
+ -o-transform-origin: 0 0;
+ transform: rotate(90deg);
+ transform-origin: 0 0;
+ }
+
+ // In IE9 and below we have to use a BasicImage filter to achieve 90 degree
+ // rotation of the text container. Text rotated using this methodology does
+ // not display using ClearType font unless the element has a background. To
+ // work around this, we apply a background color to the text container element
+ // and then use a Chroma filter to display all pixels of that color as transparent.
+ .#{$prefix}ie9m .#{$prefix}panel-header-vertical .#{$prefix}panel-header-text-container {
+ background: $panel-header-background-color;
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1),
+ progid:DXImageTransform.Microsoft.Chroma(color='#{$panel-header-background-color}');
+ }
+ .#{$prefix}ie9m .#{$prefix}window-header-vertical .#{$prefix}window-header-text-container {
+ background: $window-background-color;
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1),
+ progid:DXImageTransform.Microsoft.Chroma(color='#{$window-background-color}');
+ }
+
+ .#{$prefix}panel-header-text,
+ .#{$prefix}window-header-text {
@include no-select;
white-space: nowrap;
}
.#{$prefix}panel-header-left,
@@ -104,27 +135,14 @@
//panel body
.#{$prefix}panel-body {
overflow: hidden;
position: relative;
-
+
font-size: $panel-body-font-size;
}
- .#{$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 {
@@ -152,11 +170,11 @@
$ui-base-color: $panel-base-color,
$ui-border-width: $panel-border-width,
$ui-border-color: $panel-border-color,
$ui-border-radius: $panel-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-header-border-color,
$ui-header-background-color: $panel-header-background-color,
@@ -165,11 +183,11 @@
$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,
@@ -184,25 +202,26 @@
$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
+ $ui-body-background-color: $panel-frame-background-color,
+ $ui-image-label-with-border-radius: 'default'
);
}
- .x-panel-header-plain,
- .x-panel-body-plain {
+ .#{$prefix}panel-header-plain,
+ .#{$prefix}panel-body-plain {
border: 0;
padding: 0;
}
}
/**
- * @class Ext.Panel
- * Used to create a visual theme for an Ext.Panel
- */
+ * Creates a visual theme for an Ext.Panel
+ * @member Ext.panel.Panel
+ */
@mixin extjs-panel-ui(
$ui-label,
$ui-base-color: null,
@@ -212,10 +231,11 @@
$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-line-height: $panel-header-line-height,
$ui-header-border-color: $ui-border-color,
$ui-header-background-color: null,
$ui-header-background-gradient: matte,
$ui-header-inner-border-color: null,
@@ -223,19 +243,22 @@
$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
+ $ui-body-font-weight: null,
+ // optional image label to use when background header images are required (no linear-gradient),
+ // but border-radius is supported (no framing els) e.g. IE9.
+ $ui-image-label-with-border-radius: 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} {
@@ -243,11 +266,10 @@
}
// 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;
@@ -262,18 +284,18 @@
$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-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-top-bg.gif');
}
-
+
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-bottom-bg.gif');
}
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-left {
@@ -281,36 +303,79 @@
}
.#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-label}-right-bg.gif');
}
+
+ .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-right {
+ background-position: top right;
+ }
+
+ .#{$prefix}nlg .#{$prefix}panel-header-#{$ui-label}-bottom {
+ background-position: bottom left;
+ }
+
+ @if $ui-border-radius != null {
+ .#{$prefix}nbr {
+ // If framing elements are used to achieve rounded corners remove the background image from the header element since the framing elements
+ // already have the background image, and a background image on the main header element bleeds through the corner framing elements.
+ .#{$prefix}panel-header-#{$ui-label} {
+ background-image: none;
+ }
+ }
+ }
+
+
+ @if $ui-image-label-with-border-radius != null {
+ // IE9 strict, Opera < 11.10, and Safari 3 are the only currently supported browsers that support border-radius, but do not support linear-gradient.
+ .#{$prefix}strict .#{$prefix}ie9,
+ .#{$prefix}nlg.#{$prefix}opera,
+ .#{$prefix}nlg.#{$prefix}safari {
+ .#{$prefix}panel-header-#{$ui-label}-top {
+ background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-top-bg.gif');
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-bottom {
+ background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-bottom-bg.gif');
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-left {
+ background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-left-bg.gif');
+ }
+
+ .#{$prefix}panel-header-#{$ui-label}-right {
+ background-image: theme-background-image($theme-name, 'panel-header/panel-header-#{$ui-image-label-with-border-radius}-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; }
+ @if $ui-header-line-height != null { line-height: $ui-header-line-height; }
}
// 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; }
}
@@ -340,15 +405,15 @@
$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);
-
+ @include x-frame('panel-header', '#{$ui-label}-top', top($ui-border-radius) right($ui-border-radius) 0 0, top($ui-border-width) right($ui-border-width) 0 left($ui-border-width), $panel-header-padding, $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, top($ui-border-width) right($ui-border-width) bottom($ui-border-width) 0, rotate90($panel-header-padding), $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), 0 right($ui-border-width) bottom($ui-border-width) left($ui-border-width), $panel-header-padding, $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), top($ui-border-width) 0 bottom($ui-border-width) left($ui-border-width), rotate90($panel-header-padding), $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 {
@@ -378,15 +443,12 @@
.#{$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 {
@@ -399,15 +461,11 @@
.#{$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;
}
@@ -420,27 +478,27 @@
}
.#{$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);
+
+ @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, $panel-header-padding, $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, rotate90($panel-header-padding), $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, $panel-header-padding, $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, rotate90($panel-header-padding), $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