/** * Creates a visual theme for a Tab Panel * @member Ext.tab.Panel */ @mixin extjs-tab-panel-ui( $ui, $ui-tab-background-color: $tab-base-color, $ui-tab-background-color-over: $tab-base-color-over, $ui-tab-background-color-active: $tab-base-color-active, $ui-tab-background-color-disabled: $tab-base-color-disabled, $ui-tab-border-radius: $tab-border-radius, $ui-tab-border-width: $tab-border-width, $ui-tab-margin: $tab-margin, $ui-tab-padding: $tab-padding, $ui-tab-text-padding: $tab-text-padding, $ui-tab-border-color: $tab-border-color, $ui-tab-border-color-over: $tab-border-color-over, $ui-tab-border-color-active: $tab-border-color-active, $ui-tab-border-color-disabled: $tab-border-color-disabled, $ui-tab-cursor: $tab-cursor, $ui-tab-cursor-disabled: $tab-cursor-disabled, $ui-tab-font-size: $tab-font-size, $ui-tab-font-size-over: $tab-font-size-over, $ui-tab-font-size-active: $tab-font-size-active, $ui-tab-font-size-disabled: $tab-font-size-disabled, $ui-tab-font-weight: $tab-font-weight, $ui-tab-font-weight-over: $tab-font-weight-over, $ui-tab-font-weight-active: $tab-font-weight-active, $ui-tab-font-weight-disabled: $tab-font-weight-disabled, $ui-tab-font-family: $tab-font-family, $ui-tab-font-family-over: $tab-font-family-over, $ui-tab-font-family-active: $tab-font-family-active, $ui-tab-font-family-disabled: $tab-font-family-disabled, $ui-tab-line-height: $tab-line-height, $ui-tab-color: $tab-color, $ui-tab-color-over: $tab-color-over, $ui-tab-color-active: $tab-color-active, $ui-tab-color-disabled: $tab-color-disabled, $ui-tab-background-gradient: $tab-background-gradient, $ui-tab-background-gradient-over: $tab-background-gradient-over, $ui-tab-background-gradient-active: $tab-background-gradient-active, $ui-tab-background-gradient-disabled: $tab-background-gradient-disabled, $ui-tab-inner-border-width: $tab-inner-border-width, $ui-tab-inner-border-color: $tab-inner-border-color, $ui-tab-icon-width: $tab-icon-width, $ui-tab-icon-height: $tab-icon-height, $ui-tab-icon-spacing: $tab-icon-spacing, $ui-tab-icon-background-position: $tab-icon-background-position, $ui-tab-glyph-color: $tab-glyph-color, $ui-tab-glyph-color-over: $tab-glyph-color-over, $ui-tab-glyph-color-active: $tab-glyph-color-active, $ui-tab-glyph-color-disabled: $tab-glyph-color-disabled, $ui-tab-glyph-opacity: $tab-glyph-opacity, $ui-tab-glyph-opacity-disabled: $tab-glyph-opacity-disabled, $ui-tab-opacity-disabled: $tab-opacity-disabled, $ui-tab-text-opacity-disabled: $tab-text-opacity-disabled, $ui-tab-icon-opacity-disabled: $tab-icon-opacity-disabled, $ui-strip-height: $tabbar-strip-height, $ui-strip-border-width: $tabbar-strip-border-width, $ui-strip-plain-border-width: $tabbar-strip-plain-border-width, $ui-strip-border-color: $tabbar-strip-border-color, $ui-strip-background-color: $tabbar-strip-background-color, $ui-bar-border-width: $tabbar-border-width, $ui-bar-border-color: $tabbar-border-color, $ui-bar-padding: $tabbar-padding, $ui-bar-background-color: $tabbar-base-color, $ui-bar-background-gradient: $tabbar-background-gradient, $ui-bar-scroller-width: $tabbar-scroller-width, $ui-bar-scroller-cursor: $tabbar-scroller-cursor, $ui-bar-scroller-cursor-disabled: $tabbar-scroller-cursor-disabled, $ui-bar-scroller-opacity: $tabbar-scroller-opacity, $ui-bar-scroller-opacity-over: $tabbar-scroller-opacity-over, $ui-bar-scroller-opacity-pressed: $tabbar-scroller-opacity-pressed, $ui-bar-scroller-opacity-disabled: $tabbar-scroller-opacity-disabled, $ui-tab-closable-icon-width: $tab-closable-icon-width, $ui-tab-closable-icon-height: $tab-closable-icon-height, $ui-tab-closable-icon-top: $tab-closable-icon-top, $ui-tab-closable-icon-right: $tab-closable-icon-right, $ui-tab-closable-icon-spacing: $tab-closable-icon-spacing ) { @include x-frame( $cls: 'tab', $ui: $ui + '-top', $border-radius: $ui-tab-border-radius, $border-width: $ui-tab-border-width, $background-color: $ui-tab-background-color, $background-gradient: $ui-tab-background-gradient, $background-direction: top, $padding: $ui-tab-padding, $table: true ); @include x-frame( $cls: 'tab', $ui: $ui + '-bottom', $border-radius: rotate180($ui-tab-border-radius), $border-width: rotate180($ui-tab-border-width), $background-color: $ui-tab-background-color, $background-gradient: $ui-tab-background-gradient, $background-direction: bottom, $padding: $ui-tab-padding, $table: true ); @include x-frame( $cls: 'tab', $ui: $ui + '-left', $border-radius: $ui-tab-border-radius, $border-width: $ui-tab-border-width, $background-color: $ui-tab-background-color, $background-gradient: $ui-tab-background-gradient, $background-direction: top, $padding: $ui-tab-padding, $table: true, $img-ui: $ui + '-top' ); @include x-frame( $cls: 'tab', $ui: $ui + '-right', $border-radius: $ui-tab-border-radius, $border-width: $ui-tab-border-width, $background-color: $ui-tab-background-color, $background-gradient: $ui-tab-background-gradient, $background-direction: top, $padding: $ui-tab-padding, $table: true, $img-ui: $ui + '-top' ); .#{$prefix}tab-#{$ui} { border-color: $ui-tab-border-color; margin: $ui-tab-margin; @if $ui-tab-cursor != null { cursor: $ui-tab-cursor; } .#{$prefix}tab-inner { font-size: $ui-tab-font-size; font-weight: $ui-tab-font-weight; font-family: $ui-tab-font-family; color: $ui-tab-color; line-height: $ui-tab-line-height; @if $ui-tab-text-padding != 0 { padding: $ui-tab-text-padding; } } .#{$prefix}tab-icon-el { width: $ui-tab-icon-width; height: $ui-tab-icon-height; line-height: $ui-tab-icon-height; background-position: $ui-tab-icon-background-position; } .#{$prefix}tab-glyph { font-size: $ui-tab-icon-height; color: $ui-tab-glyph-color; @if $ui-tab-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-tab-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 tab's background-color. .#{$prefix}ie8m & { color: mix($ui-tab-glyph-color, $ui-tab-background-color, $ui-tab-glyph-opacity * 100); } } @if $include-ie { // EXTJSIV-8765: vertical tabs get shifted to the left when focused. To work // around this, we move the left padding to the tab-button el. .#{$prefix}strict .#{$prefix}ie9 .#{$prefix}tab-bar-vertical & { padding-left: 0; .#{$prefix}tab-button { padding-left: left($ui-tab-padding); } .#{$prefix}tab-icon-el { left: left($ui-tab-padding); } } } } .#{$prefix}tab-#{$ui}-icon { .#{$prefix}tab-inner { // even though there is no text we set a width and padding as buttons shrink-wrap around this element width: $ui-tab-icon-width; } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui} { margin: rtl($ui-tab-margin); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui} { margin: rtl($ui-tab-margin); } } .#{$prefix}tab-#{$ui}-left { margin: rtl($ui-tab-margin); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-left { margin: $ui-tab-margin; } } .#{$prefix}tab-#{$ui}-top, .#{$prefix}tab-#{$ui}-left, .#{$prefix}tab-#{$ui}-right { border-bottom: top($ui-strip-border-width) solid $ui-strip-border-color; @if $ui-tab-background-gradient != null { @include background-gradient($ui-tab-background-color, $ui-tab-background-gradient, top); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-#{$ui}-top, 'tab/tab-#{$ui}-top-bg'); } } } @if $ui-tab-inner-border-width != 0 { @include inner-border( $width: $ui-tab-inner-border-width, $color: $ui-tab-inner-border-color ); } } .#{$prefix}tab-#{$ui}-bottom { border-top: top($ui-strip-border-width) solid $ui-strip-border-color; @if $ui-tab-background-gradient != null { @include background-gradient($ui-tab-background-color, $ui-tab-background-gradient, bottom); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-#{$ui}-bottom, 'tab/tab-#{$ui}-bottom-bg'); } } } @if $ui-tab-inner-border-width != 0 { @include inner-border( $width: flip-vertical($ui-tab-inner-border-width), $color: $ui-tab-inner-border-color ); } } .#{$prefix}tab-#{$ui}-left { @include rotate-element($angle: 270); @if $tab-left-rotate-direction == 'right' { .#{$prefix}tab-wrap { @include rotate-element($angle: 180); } } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-left { @include rotate-element($angle: 90); } } .#{$prefix}tab-#{$ui}-right { @include rotate-element($angle: 90); @if $tab-right-rotate-direction == 'left' { .#{$prefix}tab-wrap { @include rotate-element($angle: 180); } } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-right { @include rotate-element($angle: 270); } } .#{$prefix}tab-#{$ui}-icon-text-left { .#{$prefix}tab-inner { padding-left: $ui-tab-icon-width + $ui-tab-icon-spacing + left($ui-tab-text-padding); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-icon-text-left { .#{$prefix}tab-inner { padding-left: 0; padding-right: $ui-tab-icon-width + $ui-tab-icon-spacing + left($ui-tab-text-padding); } } } .#{$prefix}tab-#{$ui}-over { @if $ui-tab-border-color-over != $ui-tab-border-color { border-color: $ui-tab-border-color-over; } @if $ui-tab-background-color-over != $ui-tab-background-color { background-color: $ui-tab-background-color-over; } .#{$prefix}tab-inner { @if $ui-tab-color-over != $ui-tab-color { color: $ui-tab-color-over; } @if $ui-tab-font-weight-over != $ui-tab-font-weight { font-weight: $ui-tab-font-weight-over; } @if $ui-tab-font-size-over != $ui-tab-font-size { font-size: $ui-tab-font-size-over; } @if $ui-tab-font-family-over != $ui-tab-font-family { font-family: $ui-tab-font-family-over; } } .#{$prefix}tab-glyph { color: $ui-tab-glyph-color-over; // 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 tab's background-color. .#{$prefix}ie8m & { color: mix($ui-tab-glyph-color-over, $ui-tab-background-color-over, $ui-tab-glyph-opacity * 100); } } } @if $ui-tab-background-gradient-over != null { .#{$prefix}tab-#{$ui}-top-over, .#{$prefix}tab-#{$ui}-left-over, .#{$prefix}tab-#{$ui}-right-over { @include background-gradient($ui-tab-background-color-over, $ui-tab-background-gradient-over, top); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-#{$ui}-top-over, 'tab/tab-#{$ui}-top-over-bg'); } } } .#{$prefix}tab-#{$ui}-bottom-over { @include background-gradient($ui-tab-background-color-over, $ui-tab-background-gradient-over, bottom); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-#{$ui}-bottom-over, 'tab/tab-#{$ui}-bottom-over-bg'); } } } } .#{$prefix}tab-#{$ui}-active { @if $ui-tab-border-color-active != $ui-tab-border-color { border-color: $ui-tab-border-color-active; } background-color: $ui-tab-background-color-active; .#{$prefix}tab-inner { @if $ui-tab-color-active != $ui-tab-color { color: $ui-tab-color-active; } @if $ui-tab-font-weight-active != $ui-tab-font-weight { font-weight: $ui-tab-font-weight-active; } @if $ui-tab-font-size-active != $ui-tab-font-size { font-size: $ui-tab-font-size-active; } @if $ui-tab-font-family-active != $ui-tab-font-family { font-family: $ui-tab-font-family-active; } } .#{$prefix}tab-glyph { color: $ui-tab-glyph-color-active; // 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 tab's background-color. .#{$prefix}ie8m & { color: mix($ui-tab-glyph-color-active, $ui-tab-background-color-active, $ui-tab-glyph-opacity * 100); } } } .#{$prefix}tab-#{$ui}-top-active, .#{$prefix}tab-#{$ui}-left-active, .#{$prefix}tab-#{$ui}-right-active { border-bottom-color: $ui-strip-background-color; @if $ui-tab-background-gradient-active != null { @include background-gradient($ui-tab-background-color-active, $ui-tab-background-gradient-active, top); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-#{$ui}-top-active, 'tab/tab-#{$ui}-top-active-bg'); } } } } .#{$prefix}tab-#{$ui}-bottom-active { border-top-color: $ui-strip-background-color; @if $ui-tab-background-gradient-active != null { @include background-gradient($ui-tab-background-color-active, $ui-tab-background-gradient-active, bottom); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-#{$ui}-bottom-active, 'tab/tab-#{$ui}-bottom-active-bg'); } } } } .#{$prefix}tab-#{$ui}-disabled { @if $ui-tab-border-color-disabled != $ui-tab-border-color { border-color: $ui-tab-border-color-disabled; } @if $ui-tab-opacity-disabled != 1 { @include opacity($ui-tab-opacity-disabled); } @if $ui-tab-cursor-disabled != null { cursor: $ui-tab-cursor-disabled; } .#{$prefix}tab-inner { @if $ui-tab-color-disabled != $ui-tab-color { color: $ui-tab-color-disabled; } @if $ui-tab-font-weight-disabled != $ui-tab-font-weight { font-weight: $ui-tab-font-weight-disabled; } @if $ui-tab-font-size-disabled != $ui-tab-font-size { font-size: $ui-tab-font-size-disabled; } @if $ui-tab-font-family-disabled != $ui-tab-font-family { font-family: $ui-tab-font-family-disabled; } @if $ui-tab-text-opacity-disabled != 1 { @include opacity($ui-tab-text-opacity-disabled); } } @if $ui-tab-icon-opacity-disabled != 1 { .#{$prefix}tab-icon-el { @include opacity($ui-tab-icon-opacity-disabled); } } .#{$prefix}tab-glyph { color: $ui-tab-glyph-color-disabled; @if $ui-tab-glyph-opacity-disabled != 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-tab-glyph-opacity-disabled; } filter: none; // override opacity from tab-icon-el // 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 tab's background-color. .#{$prefix}ie8m & { color: mix($ui-tab-glyph-color-disabled, $ui-tab-background-color-disabled, $ui-tab-glyph-opacity-disabled * 100); } } } @if $ui-tab-background-gradient-disabled != null { .#{$prefix}tab-#{$ui}-top-disabled, .#{$prefix}tab-#{$ui}-left-disabled, .#{$prefix}tab-#{$ui}-right-disabled { @include background-gradient($ui-tab-background-color-disabled, $ui-tab-background-gradient-disabled, top); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-#{$ui}-top-disabled, 'tab/tab-#{$ui}-top-disabled-bg'); } } } .#{$prefix}tab-#{$ui}-bottom-disabled { @include background-gradient($ui-tab-background-color-disabled, $ui-tab-background-gradient-disabled, bottom); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-#{$ui}-bottom-disabled, 'tab/tab-#{$ui}-bottom-disabled-bg'); } } } } @if not $supports-border-radius or $compile-all { .#{$prefix}tab-#{$ui}-top-over, .#{$prefix}tab-#{$ui}-left-over, .#{$prefix}tab-#{$ui}-right-over { .#{$prefix}frame-tl, .#{$prefix}frame-bl, .#{$prefix}frame-tr, .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { background-image: slicer-corner-sprite(tab-#{$ui}-top-over, 'tab/tab-#{$ui}-top-over-corners'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { background-image: slicer-sides-sprite(tab-#{$ui}-top-over, 'tab/tab-#{$ui}-top-over-sides'); } .#{$prefix}frame-mc { background-color: $ui-tab-background-color-over; @if $ui-tab-background-gradient-over != null { background-repeat: repeat-x; background-image: slicer-frame-background-image(tab-#{$ui}-top-over, 'tab/tab-#{$ui}-top-over-fbg'); } } } .#{$prefix}tab-#{$ui}-bottom-over { .#{$prefix}frame-tl, .#{$prefix}frame-bl, .#{$prefix}frame-tr, .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { background-image: slicer-corner-sprite(tab-#{$ui}-bottom-over, 'tab/tab-#{$ui}-bottom-over-corners'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { background-image: slicer-sides-sprite(tab-#{$ui}-bottom-over, 'tab/tab-#{$ui}-bottom-over-sides'); } .#{$prefix}frame-mc { background-color: $ui-tab-background-color-over; @if $ui-tab-background-gradient-over != null { background-repeat: repeat-x; background-image: slicer-frame-background-image(tab-#{$ui}-bottom-over, 'tab/tab-#{$ui}-bottom-over-fbg'); } } } .#{$prefix}tab-#{$ui}-top-active, .#{$prefix}tab-#{$ui}-left-active, .#{$prefix}tab-#{$ui}-right-active { .#{$prefix}frame-tl, .#{$prefix}frame-bl, .#{$prefix}frame-tr, .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { background-image: slicer-corner-sprite(tab-#{$ui}-top-active, 'tab/tab-#{$ui}-top-active-corners'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { background-image: slicer-sides-sprite(tab-#{$ui}-top-active, 'tab/tab-#{$ui}-top-active-sides'); } .#{$prefix}frame-mc { background-color: $ui-tab-background-color-active; @if $ui-tab-background-gradient-active != null { background-repeat: repeat-x; background-image: slicer-frame-background-image(tab-#{$ui}-top-active, 'tab/tab-#{$ui}-top-active-fbg'); } } } .#{$prefix}tab-#{$ui}-bottom-active { .#{$prefix}frame-tl, .#{$prefix}frame-bl, .#{$prefix}frame-tr, .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { background-image: slicer-corner-sprite(tab-#{$ui}-bottom-active, 'tab/tab-#{$ui}-bottom-active-corners'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { background-image: slicer-sides-sprite(tab-#{$ui}-bottom-active, 'tab/tab-#{$ui}-bottom-active-sides'); } .#{$prefix}frame-mc { background-color: $ui-tab-background-color-active; @if $ui-tab-background-gradient-active != null { background-repeat: repeat-x; background-image: slicer-frame-background-image(tab-#{$ui}-bottom-active, 'tab/tab-#{$ui}-bottom-active-fbg'); } } } .#{$prefix}tab-#{$ui}-top-disabled, .#{$prefix}tab-#{$ui}-left-disabled, .#{$prefix}tab-#{$ui}-right-disabled { .#{$prefix}frame-tl, .#{$prefix}frame-bl, .#{$prefix}frame-tr, .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { background-image: slicer-corner-sprite(tab-#{$ui}-top-disabled, 'tab/tab-#{$ui}-top-disabled-corners'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { background-image: slicer-sides-sprite(tab-#{$ui}-top-disabled, 'tab/tab-#{$ui}-top-disabled-sides'); } .#{$prefix}frame-mc { background-color: $ui-tab-background-color-disabled; @if $ui-tab-background-gradient-disabled != null { background-repeat: repeat-x; background-image: slicer-frame-background-image(tab-#{$ui}-top-disabled, 'tab/tab-#{$ui}-top-disabled-fbg'); } } } .#{$prefix}tab-#{$ui}-bottom-disabled { .#{$prefix}frame-tl, .#{$prefix}frame-bl, .#{$prefix}frame-tr, .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { background-image: slicer-corner-sprite(tab-#{$ui}-bottom-disabled, 'tab/tab-#{$ui}-bottom-disabled-corners'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { background-image: slicer-sides-sprite(tab-#{$ui}-bottom-disabled, 'tab/tab-#{$ui}-bottom-disabled-sides'); } .#{$prefix}frame-mc { background-color: $ui-tab-background-color-disabled; @if $ui-tab-background-gradient-disabled != null { background-repeat: repeat-x; background-image: slicer-frame-background-image(tab-#{$ui}-bottom-disabled, 'tab/tab-#{$ui}-bottom-disabled-fbg'); } } } $nbr-tab-border-bottom-width: top($ui-strip-border-width); @if $nbr-tab-border-bottom-width != 0 { .#{$prefix}nbr { // frame.scss sets border:0 !important on the tab element in nbr mode. We // need an override with !important to add the bottom-border back since // tabs are special and need the bottom-border to hide the tab-strip's // border when the tab is active. // This needs to be wrapped in an x-nbr rule to be more specific than // the rule that removes the border in x-frame .#{$prefix}tab-#{$ui}-top, .#{$prefix}tab-#{$ui}-left, .#{$prefix}tab-#{$ui}-right { border-bottom-width: $nbr-tab-border-bottom-width !important; } .#{$prefix}tab-#{$ui}-bottom { border-top-width: $nbr-tab-border-bottom-width !important; } } } } // Tab Bar .#{$prefix}tab-bar-#{$ui} { @if $ui-bar-border-width != 0 { border-style: solid; border-color: $ui-bar-border-color; } } .#{$prefix}tab-bar-#{$ui}-top { padding: $ui-bar-padding; @if $ui-bar-border-width != 0 { border-width: $ui-bar-border-width; } } .#{$prefix}tab-bar-#{$ui}-bottom { padding: flip-vertical($ui-bar-padding); @if $ui-bar-border-width != 0 { border-width: flip-vertical($ui-bar-border-width); } } .#{$prefix}tab-bar-#{$ui}-left { padding: rotate270($ui-bar-padding); @if $ui-bar-border-width != 0 { border-width: rotate270($ui-bar-border-width); } } .#{$prefix}tab-bar-#{$ui}-right { padding: rotate90($ui-bar-padding); @if $ui-bar-border-width != 0 { border-width: rotate90($ui-bar-border-width); } } // tabbar needs a fixed height so that the tabbar doesn't lose height when all tabs are closed... // this works because shrinkWrapping with no children measures the body element $tabbar-body-height: $ui-tab-line-height + vertical($ui-tab-text-padding) + vertical($ui-tab-padding) + vertical($ui-tab-border-width) + $ui-strip-height; .#{$prefix}tab-bar-body-#{$ui}-horizontal { height: $tabbar-body-height; @if $include-ie { .#{$prefix}strict .#{$prefix}ie6 &, .#{$prefix}strict .#{$prefix}ie7 & { height: $tabbar-body-height - $tabbar-strip-height + vertical($ui-strip-border-width); } } } .#{$prefix}tab-bar-body-#{$ui}-vertical { width: $tabbar-body-height; @if $include-ie { .#{$prefix}strict .#{$prefix}ie6 &, .#{$prefix}strict .#{$prefix}ie7 & { width: $tabbar-body-height - $tabbar-strip-height + vertical($ui-strip-border-width); } } } .#{$prefix}tab-bar-body-#{$ui}-top { padding-bottom: max($ui-strip-height - vertical($ui-strip-border-width), 0); } .#{$prefix}tab-bar-body-#{$ui}-bottom { padding-top: max($ui-strip-height - vertical($ui-strip-border-width), 0); } .#{$prefix}tab-bar-body-#{$ui}-left { padding-right: max($ui-strip-height - vertical($ui-strip-border-width), 0); } .#{$prefix}tab-bar-body-#{$ui}-right { padding-left: max($ui-strip-height - vertical($ui-strip-border-width), 0); } .#{$prefix}tab-bar-strip-#{$ui} { border-style: solid; border-color: $ui-strip-border-color; background-color: $ui-tab-background-color-active; } @if $include-ie { .#{$prefix}tab-bar-strip-#{$ui}-horizontal { .#{$prefix}strict .#{$prefix}ie6 &, .#{$prefix}strict .#{$prefix}ie7 & { height: $ui-strip-height - vertical($ui-strip-border-width); } } } @if $include-ie { .#{$prefix}tab-bar-strip-#{$ui}-vertical { .#{$prefix}strict .#{$prefix}ie6 &, .#{$prefix}strict .#{$prefix}ie7 & { width: $ui-strip-height - vertical($ui-strip-border-width); } } } .#{$prefix}tab-bar-strip-#{$ui}-top { border-width: $ui-strip-border-width; height: $ui-strip-height; .#{$prefix}tab-bar-plain & { border-width: $ui-strip-plain-border-width; } } .#{$prefix}tab-bar-strip-#{$ui}-bottom { border-width: flip-vertical($ui-strip-border-width); height: $ui-strip-height; .#{$prefix}tab-bar-plain & { border-width: flip-vertical($ui-strip-plain-border-width); } } .#{$prefix}tab-bar-strip-#{$ui}-left { border-width: rotate270($ui-strip-border-width); width: $ui-strip-height; .#{$prefix}tab-bar-plain & { border-width: rotate270($ui-strip-plain-border-width); } } .#{$prefix}tab-bar-strip-#{$ui}-right { border-width: rotate90($ui-strip-border-width); width: $ui-strip-height; .#{$prefix}tab-bar-plain & { border-width: rotate90($ui-strip-plain-border-width); } } .#{$prefix}tab-bar-#{$ui} { background-color: $ui-bar-background-color; } @if $ui-bar-background-gradient != null { .#{$prefix}tab-bar-#{$ui}-top { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient, top); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-bar-#{$ui}-top, 'tab-bar/tab-bar-#{$ui}-top-bg'); } } } .#{$prefix}tab-bar-#{$ui}-bottom { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient, bottom); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-bar-#{$ui}-bottom, 'tab-bar/tab-bar-#{$ui}-bottom-bg'); } } } .#{$prefix}tab-bar-#{$ui}-left { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient, left); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-bar-#{$ui}-left, 'tab-bar/tab-bar-#{$ui}-left-bg'); } } } .#{$prefix}tab-bar-#{$ui}-right { @include background-gradient($ui-bar-background-color, $ui-bar-background-gradient, right); @if not $supports-gradients or $compile-all { .#{$prefix}nlg & { background-image: slicer-background-image(tab-bar-#{$ui}-right, 'tab-bar/tab-bar-#{$ui}-right-bg'); } } } } .#{$prefix}tab-#{$ui} { .#{$prefix}tab-close-btn { width: $ui-tab-closable-icon-width; height: $ui-tab-closable-icon-height; background-image: theme-background-image('tab/tab-#{$ui}-close'); @if $tab-closable-icon-opacity != 1 { @include opacity($tab-closable-icon-opacity); } } // include the element name since :hover causes performance issues in IE7 and 8 otherwise a.#{$prefix}tab-close-btn:hover { @if $tab-closable-icon-opacity-over != $tab-closable-icon-opacity { @include opacity($tab-closable-icon-opacity-over); } @if $tabbar-closable-icon-include-hover-background-position { background-position: (-$tab-closable-icon-width) 0; } } } .#{$prefix}tab-#{$ui} .#{$prefix}tab-close-btn { top: $ui-tab-closable-icon-top; right: $ui-tab-closable-icon-right; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui} .#{$prefix}tab-close-btn { right: auto; left: $ui-tab-closable-icon-right; } } @if $tab-left-rotate-direction == 'right' { .#{$prefix}tab-#{$ui}-left .#{$prefix}tab-close-btn { top: auto; right: auto; bottom: $ui-tab-closable-icon-top; left: $ui-tab-closable-icon-right; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-left .#{$prefix}tab-close-btn { left: auto; right: $ui-tab-closable-icon-right; } } } @if $tab-right-rotate-direction == 'left' { .#{$prefix}tab-#{$ui}-right .#{$prefix}tab-close-btn { top: auto; right: auto; bottom: $ui-tab-closable-icon-top; left: $ui-tab-closable-icon-right; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-right .#{$prefix}tab-close-btn { left: auto; right: $ui-tab-closable-icon-right; } } } //Include the tab-bar ancestor cls to raise the specificity to equal the :hover .#{$prefix}tab-bar .#{$prefix}tab-#{$ui}-disabled a.#{$prefix}tab-close-btn { @if $tab-closable-icon-opacity-disabled != $tab-closable-icon-opacity or $tab-closable-icon-opacity-disabled != $tab-closable-icon-opacity-over { @include opacity($tab-closable-icon-opacity-disabled); } @if $tabbar-closable-icon-include-hover-background-position { background-position: 0 0; } } @if $tabbar-closable-icon-include-pressed-background-position { //Include the tab-bar ancestor cls to raise the specificity to equal the :hover .#{$prefix}tab-bar .#{$prefix}tab-#{$ui}-pressed a.#{$prefix}tab-close-btn { background-position: (-$ui-tab-closable-icon-width * 2) 0; } } .#{$prefix}tab-#{$ui}-closable .#{$prefix}tab-wrap { padding-right: $ui-tab-closable-icon-width + $ui-tab-closable-icon-spacing; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-closable .#{$prefix}tab-wrap { padding-right: 0px; padding-left: $ui-tab-closable-icon-width + $ui-tab-closable-icon-spacing; } } @if $include-ie { .#{$prefix}ie9m { @if $tab-left-rotate-direction == 'right' { .#{$prefix}tab-#{$ui}-closable-left .#{$prefix}tab-icon-el { left: auto; right: 0; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-closable-left .#{$prefix}tab-icon-el { right: auto; left: 0; } } } @if $tab-right-rotate-direction == 'left' { .#{$prefix}tab-#{$ui}-closable-right .#{$prefix}tab-icon-el { left: auto; right: 0; } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-#{$ui}-closable-right .#{$prefix}tab-icon-el { right: auto; left: 0; } } } } } $needs-transparency-fix: (($ui-bar-scroller-opacity != 1 or $ui-bar-scroller-opacity-over != 1 or $ui-bar-scroller-opacity-pressed != 1) and $ui-bar-background-gradient == null); .#{$prefix}tab-bar-#{$ui} { .#{$prefix}box-scroller { cursor: $ui-bar-scroller-cursor; @if $ui-bar-scroller-opacity != 1 { @include opacity($ui-bar-scroller-opacity); } @if $needs-transparency-fix { // 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 tabbar. background-color: $ui-bar-background-color; } } @if $needs-transparency-fix { // plain tabbars have transparent backgrounds, so we use a white bg to overcome // the png transparency issues. See EXTJSIV-8846 .#{$prefix}box-scroller-plain .#{$prefix}box-scroller { background-color: transparent; .#{$prefix}ie8m & { background-color: #fff; } } } @if $ui-bar-scroller-opacity-over != 1 { .#{$prefix}box-scroller-hover { @include opacity($ui-bar-scroller-opacity-over); } } @if $ui-bar-scroller-opacity-pressed != 1 { .#{$prefix}box-scroller-pressed { @include opacity($ui-bar-scroller-opacity-pressed); } } $scroller-width: $ui-bar-scroller-width; $scroller-height: $ui-tab-line-height + vertical($ui-tab-text-padding) + vertical($ui-tab-padding) + vertical($ui-tab-border-width); .#{$prefix}tabbar-scroll-left, .#{$prefix}tabbar-scroll-right { height: $scroller-height; width: $scroller-width; } .#{$prefix}tabbar-scroll-top, .#{$prefix}tabbar-scroll-bottom { width: $scroller-height; height: $scroller-width; } } .#{$prefix}box-scroller { .#{$prefix}tab-bar-#{$ui}-bottom & { margin-top: top($tabbar-strip-border-width); } .#{$prefix}tab-bar-#{$ui}-right & { margin-left: top($tabbar-strip-border-width); } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-right & { margin-left: 0; } .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-left & { margin-right: top($tabbar-strip-border-width); } } } @if $tabbar-scroller-symmetrical-icons { .#{$prefix}tab-bar-#{$ui} { .#{$prefix}tabbar-scroll-left { background-image: theme-background-image('tab-bar/#{$ui}-scroll-left'); } .#{$prefix}tabbar-scroll-right { background-image: theme-background-image('tab-bar/#{$ui}-scroll-right'); } .#{$prefix}tabbar-scroll-top { background-image: theme-background-image('tab-bar/#{$ui}-scroll-top'); } .#{$prefix}tabbar-scroll-bottom { background-image: theme-background-image('tab-bar/#{$ui}-scroll-bottom'); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui} { .#{$prefix}tabbar-scroll-left { background-image: theme-background-image('tab-bar/#{$ui}-scroll-right'); } .#{$prefix}tabbar-scroll-right { background-image: theme-background-image('tab-bar/#{$ui}-scroll-left'); } } } @if $tabbar-scroller-include-plain-icon { .#{$prefix}tab-bar-#{$ui} .#{$prefix}box-scroller-plain { .#{$prefix}tabbar-scroll-left { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-left'); } .#{$prefix}tabbar-scroll-right { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-right'); } .#{$prefix}tabbar-scroll-top { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-top'); } .#{$prefix}tabbar-scroll-bottom { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-bottom'); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui} .#{$prefix}box-scroller-plain { .#{$prefix}tabbar-scroll-left { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-right'); } .#{$prefix}tabbar-scroll-right { background-image: theme-background-image('tab-bar/#{$ui}-plain-scroll-left'); } } } } } @else { .#{$prefix}tab-bar-#{$ui}-top { .#{$prefix}tabbar-scroll-left { background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-top'); } .#{$prefix}tabbar-scroll-right { background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-top'); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-top { .#{$prefix}tabbar-scroll-left { background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-top'); } .#{$prefix}tabbar-scroll-right { background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-top'); } } } .#{$prefix}tab-bar-#{$ui}-bottom { .#{$prefix}tabbar-scroll-left { background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-bottom'); } .#{$prefix}tabbar-scroll-right { background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-bottom'); } } @if $include-rtl { .#{$prefix}rtl.#{$prefix}tab-bar-#{$ui}-bottom { .#{$prefix}tabbar-scroll-left { background-image: theme-background-image('tab-bar/#{$ui}-scroll-right-bottom'); } .#{$prefix}tabbar-scroll-right { background-image: theme-background-image('tab-bar/#{$ui}-scroll-left-bottom'); } } } .#{$prefix}tab-bar-#{$ui}-left { .#{$prefix}tabbar-scroll-top { background-image: theme-background-image('tab-bar/#{$ui}-scroll-top-left'); } .#{$prefix}tabbar-scroll-bottom { background-image: theme-background-image('tab-bar/#{$ui}-scroll-bottom-left'); } } .#{$prefix}tab-bar-#{$ui}-right { .#{$prefix}tabbar-scroll-top { background-image: theme-background-image('tab-bar/#{$ui}-scroll-top-right'); } .#{$prefix}tabbar-scroll-bottom { background-image: theme-background-image('tab-bar/#{$ui}-scroll-bottom-right'); } } } .#{$prefix}tab-bar-#{$ui} { @if $tabbar-scroller-include-hover-background-position { .#{$prefix}tabbar-scroll-left-hover, .#{$prefix}tabbar-scroll-right-hover { background-position: -$ui-bar-scroller-width 0; } .#{$prefix}tabbar-scroll-top-hover, .#{$prefix}tabbar-scroll-bottom-hover { background-position: 0 (-$ui-bar-scroller-width); } } .#{$prefix}box-scroller-disabled { @if $ui-bar-scroller-opacity-disabled != 1 { @include opacity($ui-bar-scroller-opacity-disabled); } @if $ui-bar-scroller-cursor-disabled != null { cursor: $ui-bar-scroller-cursor-disabled; } } } @include x-slicer(tab-#{$ui}-top-over); @include x-slicer(tab-#{$ui}-bottom-over); @include x-slicer(tab-#{$ui}-top-active); @include x-slicer(tab-#{$ui}-bottom-active); @include x-slicer(tab-#{$ui}-top-disabled); @include x-slicer(tab-#{$ui}-bottom-disabled); @include x-slicer(tab-bar-#{$ui}-top); @include x-slicer(tab-bar-#{$ui}-bottom); @include x-slicer(tab-bar-#{$ui}-left); @include x-slicer(tab-bar-#{$ui}-right); } @include extjs-tab-panel-ui( $ui: 'default' ); .#{$prefix}tab-bar-plain { border-width: $tabbar-plain-border-width; padding: $tabbar-plain-padding; }