+++ /dev/null
-/**
- * @class Ext.Tab
- */
-@mixin extjs-tab {
- @include x-frame(
- $cls: 'tab',
- $ui: 'default-top',
- $border-radius: $tab-top-border-radius,
- $border-width: $tab-top-border-width,
- $background-color: $tab-base-color,
- $background-gradient: $tab-background-gradient,
- $background-direction: top,
- $table: true
- );
-
- @include x-frame(
- $cls: 'tab',
- $ui: 'default-bottom',
- $border-radius: $tab-bottom-border-radius,
- $border-width: $tab-bottom-border-width,
- $background-color: $tab-base-color,
- $background-gradient: $tab-background-gradient,
- $background-direction: bottom,
- $table: true
- );
-
- .#{$prefix}tab {
- z-index: 1;
- margin: 0 0 0 $tab-spacing;
- display: inline-block;
- zoom: 1;
- *display: inline;
- white-space: nowrap;
- height: $tab-height;
- border-color: $tab-border-color;
- cursor: pointer;
- cursor: hand;
-
- * {
- cursor: pointer;
- cursor: hand;
- }
-
- em {
- display: block;
- padding: 0 6px;
- line-height: 1px;
- }
-
- button {
- background: none;
- border: 0;
- padding: 0;
- margin: 0;
- -webkit-appearance: none;
- font-size: $tab-font-size;
- @if $tab-font-weight {
- font-weight: $tab-font-weight;
- }
- @if $tab-font-family {
- $font-family: $tab-font-family;
- }
-
- color: $tab-color;
- outline: 0 none;
-
- overflow: hidden;
- overflow-x: visible;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
-
- &::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
-
- .#{$prefix}tab-inner {
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: 0 -1px;
- display: block;
- text-align: center;
- white-space: nowrap;
- }
- }
-
- img {
- display: none;
- }
- }
-
- .#{$prefix}border-box {
- .#{$prefix}tab-default-top {
- height: $tab-height + top($tabbar-top-strip-border-width);
- }
- .#{$prefix}tab-default-bottom {
- height: $tab-height + bottom($tabbar-bottom-strip-border-width);
- }
- }
-
- @if $include-ie {
- * html .#{$prefix}ie {
- .#{$prefix}tab button {
- width: 1px;
- }
- }
-
- .#{$prefix}strict .#{$prefix}ie6,
- .#{$prefix}strict .#{$prefix}ie7 {
- .#{$prefix}tab .#{$prefix}frame-mc {
- height: 100%;
- }
- }
-
- .#{$prefix}ie .#{$prefix}tab-active button:active {
- position: relative;
- top: -1px;
- left: -1px;
- }
- }
-
- $framepad: max(top($tab-top-border-radius), right($tab-top-border-radius)) - top($tab-top-border-width);
-
- .#{$prefix}tab-default-top {
- @if $tab-inner-border {
- @include inner-border(
- $width: $tab-top-inner-border-width,
- $color: $tab-inner-border-color
- );
- }
-
- border-bottom: 1px solid $tabbar-strip-border-color !important;
-
- em {
- padding-bottom: $framepad;
- }
-
- button,
- .#{$prefix}tab-inner {
- height: $tab-height - $framepad * 2 - top($tab-top-border-width);
- line-height: $tab-height - $framepad * 2 - top($tab-top-border-width);
- }
- }
-
- .#{$prefix}nbr .#{$prefix}tab-default-top {
- border-bottom-width: 1px !important;
- }
-
- .#{$prefix}tab-default-top-active {
- border-bottom-color: $tabbar-strip-background-color !important;
- }
-
- $framepad: max(bottom($tab-bottom-border-radius), left($tab-bottom-border-radius)) - bottom($tab-bottom-border-width);
-
- .#{$prefix}tab-default-bottom {
- @if $tab-inner-border {
- @include inner-border(
- $width: $tab-bottom-inner-border-width,
- $color: $tab-inner-border-color
- );
- }
-
- border-top: 1px solid $tabbar-strip-border-color !important;
-
- @include inner-border(
- $width: $tab-bottom-inner-border-width,
- $color: $tab-inner-border-color
- );
-
- em {
- padding-top: $framepad;
- }
-
- button,
- .#{$prefix}tab-inner {
- height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
- line-height: $tab-height - $framepad * 2 - bottom($tab-bottom-border-width);
- }
- }
-
- .#{$prefix}nbr .#{$prefix}tab-default-bottom {
- border-top-width: 1px !important;
- }
-
- .#{$prefix}tab-default-bottom-active {
- border-top-color: $tabbar-strip-background-color !important;
- }
-
- .#{$prefix}tab-default-disabled {
- cursor: default;
-
- * {
- cursor: default;
- }
-
- border-color: $tab-border-color-disabled;
- @include background-gradient($tab-base-color-disabled, $tab-background-gradient-disabled);
-
- button {
- color: $tab-color-disabled !important;
- }
- }
-
- .#{$prefix}tab-icon-text-left {
- .#{$prefix}tab-inner {
- padding-left: 20px;
- }
- }
-
- //over
- .#{$prefix}tab-over {
- @if $tab-border-color-over != $tab-border-color {
- border-color: $tab-border-color-over;
- }
-
- button {
- @if $tab-color-over != $tab-color {
- color: $tab-color-over;
- }
- @if $tab-font-weight-over != $tab-font-weight {
- font-weight: $tab-font-weight-over;
- }
- @if $tab-font-size-over != $tab-font-size {
- font-size: $tab-font-size-over;
- }
- @if $tab-font-family-over != $tab-font-family {
- font-family: $tab-font-family-over;
- }
- }
- }
-
- @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);
- }
- }
- @else if $tab-base-color-over != $tab-base-color {
- .#{$prefix}tab-top-over,
- .#{$prefix}tab-bottom-over {
- background-color: $tab-base-color-over;
- }
- }
-
- //active
- .#{$prefix}tab-active {
- z-index: 3;
- @if $tab-border-color-active != $tab-border-color {
- border-color: $tab-border-color-active;
- }
-
- button {
- @if $tab-color-active != $tab-color {
- color: $tab-color-active;
- }
- @if $tab-font-weight-active != $tab-font-weight {
- font-weight: $tab-font-weight-active;
- }
- @if $tab-font-size-active != $tab-font-size {
- font-size: $tab-font-size-active;
- }
- @if $tab-font-family-active != $tab-font-family {
- font-family: $tab-font-family-active;
- }
- }
- }
-
- @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);
- }
- }
- @else if $tab-base-color-active != $tab-base-color {
- .#{$prefix}tab-top-active,
- .#{$prefix}tab-bottom-active {
- background-color: $tab-base-color-active;
- }
- }
-
- //disabled
- .#{$prefix}tab-disabled {
- @if $tab-border-color-disabled != $tab-border-color {
- border-color: $tab-border-color-disabled;
- }
-
- button {
- @if $tab-color-disabled != $tab-color {
- color: $tab-color-disabled;
- }
- @if $tab-font-weight-disabled != $tab-font-weight {
- font-weight: $tab-font-weight-disabled;
- }
- @if $tab-font-size-disabled != $tab-font-size {
- font-size: $tab-font-size-disabled;
- }
- @if $tab-font-family-disabled != $tab-font-family {
- font-family: $tab-font-family-disabled;
- }
- }
- }
-
- @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);
- }
- }
- @else if $tab-base-color-disabled != $tab-base-color {
- .#{$prefix}tab-top-disabled,
- .#{$prefix}tab-bottom-disabled {
- background-color: $tab-base-color-disabled;
- }
- }
-
- @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'); }
-
- .#{$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'); }
-
- .#{$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'); }
-
- .#{$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; }
- }
- }
-
- .#{$prefix}tab-closable em {
- padding-right: $tab-closable-icon-width + 3;
- }
-
- .#{$prefix}tab-close-btn {
- position: absolute;
- top: $tab-closable-icon-top;
- right: $tab-closable-icon-right;
- width: $tab-closable-icon-width;
- height: $tab-closable-icon-height;
- font-size: 0;
- line-height: 0;
- text-indent: -999px;
- background: theme-image($theme-name, $tab-closable-icon) no-repeat;
- @include opacity(.6);
- }
- .#{$prefix}tab-close-btn:hover {
- @include opacity(1);
- }
-
- @if not $supports-border-radius or $compile-all {
- .#{$prefix}nbr {
- .#{$prefix}tab-top-over {
- .#{$prefix}frame-tl,
- .#{$prefix}frame-bl,
- .#{$prefix}frame-tr,
- .#{$prefix}frame-br,
- .#{$prefix}frame-tc,
- .#{$prefix}frame-bc {
- background-image: theme-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');
- }
- .#{$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');
- }
- }
-
- .#{$prefix}tab-bottom-over {
- .#{$prefix}frame-tl,
- .#{$prefix}frame-bl,
- .#{$prefix}frame-tr,
- .#{$prefix}frame-br,
- .#{$prefix}frame-tc,
- .#{$prefix}frame-bc {
- background-image: theme-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');
- }
- .#{$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');
- }
- }
-
- .#{$prefix}tab-top-active {
- .#{$prefix}frame-tl,
- .#{$prefix}frame-bl,
- .#{$prefix}frame-tr,
- .#{$prefix}frame-br,
- .#{$prefix}frame-tc,
- .#{$prefix}frame-bc {
- background-image: theme-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');
- }
- .#{$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');
- }
- }
-
- .#{$prefix}tab-bottom-active {
- .#{$prefix}frame-tl,
- .#{$prefix}frame-bl,
- .#{$prefix}frame-tr,
- .#{$prefix}frame-br,
- .#{$prefix}frame-tc,
- .#{$prefix}frame-bc {
- background-image: theme-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');
- }
- .#{$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');
- }
- }
-
- .#{$prefix}tab-top-disabled {
- .#{$prefix}frame-tl,
- .#{$prefix}frame-bl,
- .#{$prefix}frame-tr,
- .#{$prefix}frame-br,
- .#{$prefix}frame-tc,
- .#{$prefix}frame-bc {
- background-image: theme-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');
- }
- .#{$prefix}frame-mc {
- background-repeat: repeat-x;
- background-image: theme-image($theme-name, 'tab/tab-default-top-disabled-bg.gif');
- }
- }
-
- .#{$prefix}tab-bottom-disabled {
- .#{$prefix}frame-tl,
- .#{$prefix}frame-bl,
- .#{$prefix}frame-tr,
- .#{$prefix}frame-br,
- .#{$prefix}frame-tc,
- .#{$prefix}frame-bc {
- background-image: theme-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');
- }
- .#{$prefix}frame-mc {
- background-repeat: repeat-x;
- background-image: theme-image($theme-name, 'tab/tab-default-bottom-disabled-bg.gif');
- }
- }
- }
- }
-}
git.ithinksw.org / extjs.git / blobdiff