X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/resources/themes/stylesheets/ext4/default/widgets/_tab.scss diff --git a/resources/themes/stylesheets/ext4/default/widgets/_tab.scss b/resources/themes/stylesheets/ext4/default/widgets/_tab.scss index 15f479c7..860c0011 100644 --- a/resources/themes/stylesheets/ext4/default/widgets/_tab.scss +++ b/resources/themes/stylesheets/ext4/default/widgets/_tab.scss @@ -77,7 +77,7 @@ .#{$prefix}tab-inner { background-color: transparent; background-repeat: no-repeat; - background-position: 0 -1px; + background-position: 0 -2px; display: block; text-align: center; white-space: nowrap; @@ -89,6 +89,10 @@ } } + .#{$prefix}tab-disabled { + @include opacity(1); + } + .#{$prefix}border-box { .#{$prefix}tab-default-top { height: $tab-height + top($tabbar-top-strip-border-width); @@ -207,6 +211,23 @@ } } + .#{$prefix}tab { + button, a { + position: relative; + + .#{$prefix}tab-icon { + position: absolute; + background-repeat: no-repeat; + top: 0; + left:0; + right:auto; + bottom:0; + width: 18px; + height: 18px; + } + } + } + //over .#{$prefix}tab-over { @if $tab-border-color-over != $tab-border-color { @@ -229,19 +250,11 @@ } } - @if $tab-background-gradient-over != $tab-background-gradient { - .#{$prefix}tab-top-over { - @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top); - } - .#{$prefix}tab-bottom-over { - @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom); - } + .#{$prefix}tab-top-over { + @include background-gradient($tab-base-color-over, $tab-background-gradient-over, top); } - @else if $tab-base-color-over != $tab-base-color { - .#{$prefix}tab-top-over, - .#{$prefix}tab-bottom-over { - background-color: $tab-base-color-over; - } + .#{$prefix}tab-bottom-over { + @include background-gradient($tab-base-color-over, $tab-background-gradient-over, bottom); } //active @@ -267,19 +280,11 @@ } } - @if $tab-background-gradient-active != $tab-background-gradient { - .#{$prefix}tab-top-active { - @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top); - } - .#{$prefix}tab-bottom-active { - @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom); - } + .#{$prefix}tab-top-active { + @include background-gradient($tab-base-color-active, $tab-background-gradient-active, top); } - @else if $tab-base-color-active != $tab-base-color { - .#{$prefix}tab-top-active, - .#{$prefix}tab-bottom-active { - background-color: $tab-base-color-active; - } + .#{$prefix}tab-bottom-active { + @include background-gradient($tab-base-color-active, $tab-background-gradient-active, bottom); } //disabled @@ -304,38 +309,38 @@ } } - @if $tab-background-gradient-disabled != $tab-background-gradient { - .#{$prefix}tab-top-disabled { - background-image: none; - background: transparent; - @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top); - } - .#{$prefix}tab-bottom-disabled { - background-image: none; - background: transparent; - @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom); - } + .#{$prefix}tab-top-disabled { + background-image: none; + background: transparent; + @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, top); } - @else if $tab-base-color-disabled != $tab-base-color { - .#{$prefix}tab-top-disabled, - .#{$prefix}tab-bottom-disabled { - background-color: $tab-base-color-disabled; - } + .#{$prefix}tab-bottom-disabled { + background-image: none; + background: transparent; + @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled, bottom); } @if not $supports-gradients or $compile-all { .#{$prefix}nlg { - .#{$prefix}tab-top { background-image: theme-image($theme-name, 'tab/tab-default-top-bg.gif'); } - .#{$prefix}tab-bottom { background-image: theme-image($theme-name, 'tab/tab-default-bottom-bg.gif'); } + @if $tab-background-gradient != null { + .#{$prefix}tab-top { background-image: theme-background-image($theme-name, 'tab/tab-default-top-bg.gif'); } + .#{$prefix}tab-bottom { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-bg.gif'); } + } - .#{$prefix}tab-top-over { background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif'); } - .#{$prefix}tab-bottom-over { background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); } + @if $tab-background-gradient-over != null { + .#{$prefix}tab-top-over { background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); } + .#{$prefix}tab-bottom-over { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); } + } - .#{$prefix}tab-top-active { background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif'); } - .#{$prefix}tab-bottom-active { background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); } + @if $tab-background-gradient-active != null { + .#{$prefix}tab-top-active { background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); } + .#{$prefix}tab-bottom-active { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); } + } - .#{$prefix}tab-top-disabled { background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; } - .#{$prefix}tab-bottom-disabled { background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; } + @if $tab-background-gradient-disabled != null { + .#{$prefix}tab-top-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif') !important; } + .#{$prefix}tab-bottom-disabled { background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif') !important; } + } } } @@ -344,7 +349,7 @@ } .#{$prefix}tab-close-btn { - position: absolute; + position: absolute !important; top: $tab-closable-icon-top; right: $tab-closable-icon-right; width: $tab-closable-icon-width; @@ -352,7 +357,8 @@ font-size: 0; line-height: 0; text-indent: -999px; - background: theme-image($theme-name, $tab-closable-icon) no-repeat; + background: no-repeat; + background-image: theme-background-image($theme-name, $tab-closable-icon); @include opacity(.6); } .#{$prefix}tab-close-btn:hover { @@ -368,16 +374,18 @@ .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { - background-image: theme-image($theme-name, 'tab/tab-default-top-over-corners.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-corners.gif'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { - background-image: theme-image($theme-name, 'tab/tab-default-top-over-sides.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-sides.gif'); } - .#{$prefix}frame-mc { - background-color: $tab-base-color-over; - background-repeat: repeat-x; - background-image: theme-image($theme-name, 'tab/tab-default-top-over-bg.gif'); + @if $tab-background-gradient-over != null { + .#{$prefix}frame-mc { + background-color: $tab-base-color-over; + background-repeat: repeat-x; + background-image: theme-background-image($theme-name, 'tab/tab-default-top-over-bg.gif'); + } } } @@ -388,16 +396,18 @@ .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { - background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-corners.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-corners.gif'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { - background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-sides.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-sides.gif'); } - .#{$prefix}frame-mc { - background-color: $tab-base-color-over; - background-repeat: repeat-x; - background-image: theme-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); + @if $tab-background-gradient-over != null { + .#{$prefix}frame-mc { + background-color: $tab-base-color-over; + background-repeat: repeat-x; + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-over-bg.gif'); + } } } @@ -408,16 +418,18 @@ .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { - background-image: theme-image($theme-name, 'tab/tab-default-top-active-corners.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-corners.gif'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { - background-image: theme-image($theme-name, 'tab/tab-default-top-active-sides.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-sides.gif'); } - .#{$prefix}frame-mc { - background-color: $tab-base-color-active; - background-repeat: repeat-x; - background-image: theme-image($theme-name, 'tab/tab-default-top-active-bg.gif'); + @if $tab-background-gradient-active != null { + .#{$prefix}frame-mc { + background-color: $tab-base-color-active; + background-repeat: repeat-x; + background-image: theme-background-image($theme-name, 'tab/tab-default-top-active-bg.gif'); + } } } @@ -428,16 +440,18 @@ .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { - background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-corners.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-corners.gif'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { - background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-sides.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-sides.gif'); } - .#{$prefix}frame-mc { - background-color: $tab-base-color-active; - background-repeat: repeat-x; - background-image: theme-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); + @if $tab-background-gradient-active != null { + .#{$prefix}frame-mc { + background-color: $tab-base-color-active; + background-repeat: repeat-x; + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-active-bg.gif'); + } } } @@ -448,15 +462,17 @@ .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { - background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-corners.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-corners.gif'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { - background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-sides.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-sides.gif'); } - .#{$prefix}frame-mc { - background-repeat: repeat-x; - background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif'); + @if $tab-background-gradient-disabled != null { + .#{$prefix}frame-mc { + background-repeat: repeat-x; + background-image: theme-background-image($theme-name, 'tab/tab-default-top-disabled-bg.gif'); + } } } @@ -467,15 +483,17 @@ .#{$prefix}frame-br, .#{$prefix}frame-tc, .#{$prefix}frame-bc { - background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-corners.gif'); } .#{$prefix}frame-ml, .#{$prefix}frame-mr { - background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif'); + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-sides.gif'); } - .#{$prefix}frame-mc { - background-repeat: repeat-x; - background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif'); + @if $tab-background-gradient-disabled != null { + .#{$prefix}frame-mc { + background-repeat: repeat-x; + background-image: theme-background-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif'); + } } } }