add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-neptune / sass / src / tab / Tab.scss

/**\r
 * Creates a visual theme for a Tab.\r
 *\r
 * @param {string} $ui\r
 * The name of the UI being created. Can not included spaces or special punctuation\r
 * (used in CSS class names).\r
 *\r
 * @param {color} $background-color\r
 * Tab background-color\r
 *\r
 * @param {color} $active-background-color\r
 * Tab background-color when active\r
 *\r
 * @param {string/list} $background-gradient\r
 * Tab background-gradient.  Can be either the name of a gradient defined by\r
 * {@link Global_CSS#background-gradient} or a list of color stops.\r
 *\r
 * @param {string/list} $active-background-gradient\r
 * Tab background-gradient when active.  Can be either the name of a gradient\r
 * defined by {@link Global_CSS#background-gradient} or a list of color stops.\r
 *\r
 * @param {color} $color\r
 * Tab text color\r
 *\r
 * @param {color} $active-color\r
 * Tab text color when active\r
 *\r
 * @param {color/list} $border-color\r
 * Tab border-color\r
 *\r
 * @param {color/list} $active-border-color\r
 * Tab border-color when active\r
 *\r
 * @param {number/list} $border-width\r
 * Tab border-width\r
 *\r
 * @param {number/list} $border-style\r
 * Tab border-style\r
 *\r
 * @param {number} $border-radius\r
 * Tab border-radius\r
 *\r
 * @param {number} $border-radius-big\r
 * Tab border-radius in the {@link Global_CSS#$enable-big big} sizing scheme\r
 *\r
 * @param {number} $font-weight\r
 * Tab font-weight\r
 *\r
 * @param {number} $font-size\r
 * Tab font-size\r
 *\r
 * @param {number} $font-size-big\r
 * Tab font-size in the {@link Global_CSS#$enable-big big} sizing scheme\r
 *\r
 * @param {number} $line-height\r
 * Tab line-height\r
 *\r
 * @param {number} $line-height-big\r
 * Tab line-height in the {@link Global_CSS#$enable-big big} sizing scheme\r
 *\r
 * @param {font-family} $font-family\r
 * Tab font-family\r
 *\r
 * @param {number/list} $padding\r
 * Tab padding\r
 *\r
 * @param {number/list} $padding-big\r
 * Tab padding in the {@link Global_CSS#$enable-big big} sizing scheme\r
 *\r
 * @param {number} $icon-size\r
 * Tab icon size\r
 *\r
 * @param {number} $icon-size-big\r
 * Tab icon size in the {@link Global_CSS#$enable-big big} sizing scheme\r
 *\r
 * @param {number} $icon-font-size\r
 * Tab icon font-size.  Used for configuring the size of font icons\r
 *\r
 * @param {number} $icon-font-size-big\r
 * Tab icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme\r
 *\r
 * @param {number} $icon-horizontal-spacing\r
 * The space between the button icon and text when the icon is horizontally aligned\r
 *\r
 * @param {number} $icon-horizontal-spacing-big\r
 * The space between the button icon and text when the icon is horizontally aligned\r
 * in the {@link Global_CSS#$enable-big big} sizing scheme\r
 *\r
 * @param {number} $icon-vertical-spacing\r
 * The space between the button icon and text when the icon is vertically aligned\r
 *\r
 * @param {number} $icon-vertical-spacing-big\r
 * The space between the button icon and text when the icon is vertically aligned\r
 * in the {@link Global_CSS#$enable-big big} sizing scheme\r
 *\r
 * @param {number} $disabled-opacity\r
 * Tab opacity when disabled\r
 * @param {color} $badge-background-color\r
 * The background-color of the button's {@link #badgeText badge}\r
 *\r
 * @param {string/list} $badge-background-gradient\r
 * The background-gradient of the button's {@link #badgeText badge} Can be either the name\r
 * of a gradient defined by {@link Global_CSS#background-gradient} or a list of color stops.\r
 *\r
 * @param {color} $badge-color\r
 * The text color of the button's {@link #badgeText badge}\r
 *\r
 * @param {color} $badge-border-color\r
 * The border-color of the button's {@link #badgeText badge}\r
 *\r
 * @param {number/list} $badge-border-radius\r
 * The border-radius of the button's {@link #badgeText badge}\r
 *\r
 * @param {number} $badge-min-width\r
 * The min-width of the button's {@link #badgeText badge}\r
 *\r
 * @param {number} $badge-max-width\r
 * The max-width of the button's {@link #badgeText badge}\r
 *\r
 * @param {number} $badge-font-weight\r
 * The font-weight of the button's {@link #badgeText badge}\r
 *\r
 * @param {number} $badge-font-size\r
 * The font-size of the button's {@link #badgeText badge}\r
 *\r
 * @param {string} $badge-font-family\r
 * The font-family of the button's {@link #badgeText badge}\r
 *\r
 * @param {number} $badge-line-height\r
 * The line-height of the button's {@link #badgeText badge}\r
 *\r
 * @param {number} $badge-top\r
 * Offset of the {@link #badgeText badge} from the top of the button\r
 *\r
 * @param {number} $badge-right\r
 * Offset of the {@link #badgeText badge} from the right of the button\r
 *\r
 * @param {number} $badge-bottom\r
 * Offset of the {@link #badgeText badge} from the bottom of the button\r
 *\r
 * @param {number} $badge-left\r
 * Offset of the {@link #badgeText badge} from the left of the button\r
 *\r
 * @param {number} $badge-padding\r
 * The padding of the button's {@link #badgeText badge}\r
 *\r
 * @member Ext.tab.Tab\r
 */\r
@mixin tab-ui(\r
    $ui: null,\r
\r
    $background-color: null,\r
    $active-background-color: null,\r
\r
    $background-gradient: null,\r
    $active-background-gradient: null,\r
\r
    $color: null,\r
    $active-color: null,\r
\r
    $border-color: null,\r
    $active-border-color: null,\r
\r
    $border-width: null,\r
    $border-style: null,\r
\r
    $border-radius: null,\r
    $border-radius-big: null,\r
\r
    $font-weight: null,\r
    $font-size: null,\r
    $font-size-big: null,\r
    $line-height: null,\r
    $line-height-big: null,\r
    $font-family: null,\r
\r
    $padding: null,\r
    $padding-big: null,\r
\r
    $icon-size: null,\r
    $icon-size-big: null,\r
    $icon-font-size: null,\r
    $icon-font-size-big: null,\r
    $icon-horizontal-spacing: null,\r
    $icon-horizontal-spacing-big: null,\r
    $icon-vertical-spacing: null,\r
    $icon-vertical-spacing-big: null,\r
\r
    $disabled-opacity: null,\r
\r
    $badge-background-color: null,\r
    $badge-background-gradient: null,\r
    $badge-color: null,\r
    $badge-border-color: null,\r
    $badge-border-radius: null,\r
    $badge-min-width: null,\r
    $badge-max-width: null,\r
    $badge-font-weight: null,\r
    $badge-font-size: null,\r
    $badge-font-family: null,\r
    $badge-line-height: null,\r
    $badge-top: null,\r
    $badge-right: null,\r
    $badge-bottom: null,\r
    $badge-left: null,\r
    $badge-padding: null\r
) {\r
    $ui-suffix: ui-suffix($ui);\r
\r
    .x-tab#{$ui-suffix} {\r
        color: $color;\r
        padding: $padding;\r
        @include font($font-weight, $font-size, $line-height, $font-family);\r
        @include border($border-width, $border-style, $border-color);\r
\r
        @if $include-border-radius {\r
            @include border-radius($border-radius);\r
        }\r
\r
        @if $enable-big {\r
            .x-big & {\r
                @if $padding-big != $padding {\r
                    padding: $padding-big;\r
                }\r
                @if $font-size-big != $font-size {\r
                    font-size: $font-size-big;\r
                }\r
                @if $line-height-big != $line-height {\r
                    line-height: $line-height-big;\r
                }\r
                @if $include-border-radius and ($border-radius-big != $border-radius) {\r
                    @include border-radius($border-radius-big);\r
                }\r
            }\r
        }\r
\r
        @include background-gradient($background-color, $background-gradient);\r
\r
        &.x-tab-active {\r
            color: $active-color;\r
            @include background-gradient($active-background-color, $active-background-gradient);\r
            border-color: $active-border-color;\r
        }\r
\r
        .x-button-icon {\r
            width: $icon-size;\r
            height: $icon-size;\r
            line-height: $icon-size;\r
            font-size: $icon-font-size;\r
\r
            @if $enable-big {\r
                .x-big & {\r
                    @if $icon-size-big != $icon-size {\r
                        width: $icon-size-big;\r
                        height: $icon-size-big;\r
                        line-height: $icon-size-big;\r
                    }\r
                    @if $icon-font-size-big != $icon-font-size {\r
                        font-size: $icon-font-size-big;\r
                    }\r
                }\r
            }\r
        }\r
\r
        &.x-iconalign-left .x-button-icon {\r
            margin-right: $icon-horizontal-spacing;\r
\r
            @if $enable-big and $icon-horizontal-spacing-big != $icon-horizontal-spacing {\r
                .x-big & {\r
                    margin-right: $icon-horizontal-spacing-big;\r
                }\r
            }\r
        }\r
\r
        &.x-iconalign-right .x-button-icon {\r
            margin-left: $icon-horizontal-spacing;\r
\r
            @if $enable-big and $icon-horizontal-spacing-big != $icon-horizontal-spacing {\r
                .x-big & {\r
                    margin-left: $icon-horizontal-spacing-big;\r
                }\r
            }\r
        }\r
\r
        &.x-iconalign-top .x-button-icon {\r
            margin-bottom: $icon-vertical-spacing;\r
\r
            @if $enable-big and $icon-vertical-spacing-big != $icon-vertical-spacing {\r
                .x-big & {\r
                    margin-bottom: $icon-vertical-spacing-big;\r
                }\r
            }\r
        }\r
\r
        &.x-iconalign-bottom .x-button-icon {\r
            margin-top: $icon-vertical-spacing;\r
\r
            @if $enable-big and $icon-vertical-spacing-big != $icon-vertical-spacing {\r
                .x-big & {\r
                    margin-top: $icon-vertical-spacing-big;\r
                }\r
            }\r
        }\r
\r
        .x-button-label {\r
            // prevents the button height from shrinking when it has no text\r
            min-height: $line-height;\r
        }\r
\r
        &.x-item-disabled {\r
            opacity: $disabled-opacity;\r
        }\r
\r
        .x-badge {\r
            border-color: $badge-border-color;\r
            min-width: $badge-min-width;\r
\r
            @include font($badge-font-weight, $badge-font-size, $badge-line-height, $badge-font-family);\r
\r
            top: $badge-top;\r
            right: $badge-right;\r
            bottom: $badge-bottom;\r
            left: $badge-left;\r
            padding: $badge-padding;\r
            max-width: $badge-max-width;\r
            color: $badge-color;\r
\r
            @include background-gradient($badge-background-color, $badge-background-gradient);\r
\r
            @if $include-border-radius {\r
                @include border-radius($badge-border-radius);\r
            }\r
        }\r
    }\r
}\r
\r
@include tab-ui(\r
    $background-color: $tab-background-color,\r
    $active-background-color: $tab-active-background-color,\r
\r
    $background-gradient: $tab-background-gradient,\r
    $active-background-gradient: $tab-active-background-gradient,\r
\r
    $color: $tab-color,\r
    $active-color: $tab-active-color,\r
\r
    $border-color: $tab-border-color,\r
    $active-border-color: $tab-active-border-color,\r
\r
\r
    $border-style: $tab-border-style,\r
    $border-width: $tab-border-width,\r
\r
    $border-radius: $tab-border-radius,\r
    $border-radius-big: $tab-border-radius-big,\r
\r
    $font-weight: $tab-font-weight,\r
    $font-size: $tab-font-size,\r
    $font-size-big: $tab-font-size-big,\r
    $line-height: $tab-line-height,\r
    $line-height-big: $tab-line-height-big,\r
    $font-family: $tab-font-family,\r
\r
    $padding: $tab-padding,\r
    $padding-big: $tab-padding-big,\r
\r
    $icon-size: $tab-icon-size,\r
    $icon-size-big: $tab-icon-size-big,\r
    $icon-font-size: $tab-icon-font-size,\r
    $icon-font-size-big: $tab-icon-font-size-big,\r
    $icon-horizontal-spacing: $tab-icon-horizontal-spacing,\r
    $icon-horizontal-spacing-big: $tab-icon-horizontal-spacing-big,\r
    $icon-vertical-spacing: $tab-icon-vertical-spacing,\r
    $icon-vertical-spacing-big: $tab-icon-vertical-spacing-big,\r
\r
    $disabled-opacity: $button-disabled-opacity,\r
\r
    $badge-background-color: $button-badge-background-color,\r
    $badge-background-gradient: $button-badge-background-gradient,\r
    $badge-color: $button-badge-color,\r
    $badge-border-color: $button-badge-border-color,\r
    $badge-border-radius: $button-badge-border-radius,\r
    $badge-min-width: $button-badge-min-width,\r
    $badge-max-width: $button-badge-max-width,\r
    $badge-font-weight: $button-badge-font-weight,\r
    $badge-font-size: $button-badge-font-size,\r
    $badge-font-family: $button-badge-font-family,\r
    $badge-line-height: $button-badge-line-height,\r
    $badge-top: $button-badge-top,\r
    $badge-right: $button-badge-right,\r
    $badge-bottom: $button-badge-bottom,\r
    $badge-left: $button-badge-left,\r
    $badge-padding: $button-badge-padding\r
);