add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-blackberry / sass / old / src / tab / Panel.scss

.x-tab,\r
.x-menu-application .x-button-tab,\r
.x-toolbar-dark.x-docked-bottom .x-button,\r
.x-toolbar-dark.x-docked-bottom .x-button-tab {\r
    min-width: 3.3em;\r
    height: 66px;\r
    background-color: transparent;\r
    border: 0;\r
    padding: 0;\r
    border-left: 1px solid darken($dark-color, 1);\r
    @include border-radius(0);\r
    color: #fff;\r
\r
    // Blackberry Landscape & Q10 styles\r
    .x-landscape &, .x-bb-keyboard & {\r
\r
        min-width: 90px;\r
        height: 50px;\r
\r
        .x-button-icon:before {\r
            line-height: 2em;\r
            font-size: 20px;\r
        }\r
    }\r
\r
    .x-button-icon:before {\r
        line-height: 1.7em;\r
    }\r
\r
    .x-button-icon {\r
        margin: 0 auto !important;\r
        display: block;\r
        width: 100%;\r
        height: 42px;\r
        background-size: 32px;\r
        background-position: center;\r
        @include box-flex(1);\r
\r
        &:before {\r
            font-size: 27px;\r
        }\r
    }\r
\r
    &:last-child {\r
        border-right: 1px solid darken($dark-color, 1);\r
    }\r
\r
    &:before {\r
        @include absolute-position;\r
        content: '';\r
        height: 4px;\r
        bottom: auto;\r
        border: 0;\r
        @include border-radius(0);\r
        background: lighten($dark-color, 10);\r
    }\r
\r
    .x-button-icon.x-hidden {\r
        display: none;\r
    }\r
\r
    .x-landscape & {\r
        .x-button-icon {\r
            margin-bottom: 0 !important;\r
\r
            &:before {\r
                font-size: 20px;\r
            }\r
        }\r
    }\r
}\r
\r
.x-button.tabmenu {\r
    width: 61px;\r
    margin-left: 0;\r
    border-right: 1px solid darken($dark-color, 6) !important;\r
    box-shadow: 4px 0px 1px -2px rgba(#000, .4) !important;\r
    -webkit-box-shadow: 4px 0px 1px -2px rgba(#000, .4) !important;\r
\r
    &:before {\r
        background-color: $base-color !important;\r
        @include box-shadow(none);\r
    }\r
\r
    .x-button-icon:after {\r
        content: '';\r
        position: absolute;\r
        top: 0;\r
        left: 0;\r
        right: 0;\r
        bottom: 0;\r
        background-size: 22px;\r
        background-position: -12px 22px;\r
        background-repeat: no-repeat;\r
        background-image: theme-background-image('icons/ic_overflow_tab');\r
    }\r
\r
    .x-landscape & .x-button-icon:after {\r
        background-size: 20px;\r
        background-position: -10px 16px;\r
    }\r
\r
    .x-button-icon.overflow_tab:after {\r
        background-image: none;\r
    }\r
\r
    &.x-open {\r
        .x-button-label {\r
            visibility: hidden;\r
        }\r
\r
        .overflow_tab ~ .x-button-label {\r
            visibility: visible;\r
        }\r
\r
        .x-button-icon:not(.overflow_tab) {\r
            background-image: none;\r
        }\r
\r
        .x-button-icon:after {\r
            background-position: center 23px;\r
        }\r
\r
        .x-landscape & .x-button-icon:after {\r
            background-position: center 16px;\r
        }\r
\r
        .x-button-icon:before {\r
            display: none;\r
        }\r
    }\r
}\r
\r
.x-tabbar-light {\r
    .x-tab {\r
        border-color: darken($base-color, 13);\r
        background-color: rgba(255, 255, 255, .1);\r
\r
        &:before {\r
            background: lighten($base-color, 15);\r
        }\r
    }\r
\r
    .x-tab-active {\r
        &:before {\r
            background-color: #fff;\r
        }\r
    }\r
}\r
\r
.x-menu-application,\r
.x-toolbar-dark.x-docked-bottom,\r
.x-tabbar-neutral,\r
.x-tabbar-dark {\r
    .x-tab,\r
    .x-button,\r
    .x-button-tab {\r
        border-color: darken($dark-color, 6);\r
        background: none transparent;\r
        @include box-shadow(none);\r
    }\r
\r
    .x-tab-active,\r
    .x-button.x-button-pressing,\r
    .x-button-tab.x-button-pressing {\r
        @include bb-gradient(lighten($dark-color, 5));\r
\r
        &:before {\r
            @include box-shadow(none);\r
            background-color: $base-color !important;\r
        }\r
    }\r
}\r
\r
.x-menu-application,\r
.x-toolbar-dark.x-docked-bottom,\r
.x-tabbar {\r
    .x-tab,\r
    .x-button,\r
    .x-button-tab {\r
        @include st-box-orient(vertical);\r
\r
        .x-button-icon {\r
            margin: 0 auto;\r
        }\r
\r
        .x-button-label {\r
            margin: 1px 0;\r
            font-size: 11px;\r
            line-height: 1.5em;\r
            padding-bottom: .5em;\r
        }\r
\r
        .x-badge {\r
            margin: 3px;\r
        }\r
    }\r
}\r
\r
.x-menu-application,\r
.x-toolbar-dark.x-docked-bottom {\r
    .x-tab,\r
    .x-button,\r
    .x-button-tab {\r
        border-width: 0 !important;\r
    }\r
}\r