add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-blackberry / sass / src / Toolbar.scss

/**\r
 * @class Ext.Toolbar\r
 */\r
\r
.x-toolbar {\r
    min-height: 44px;\r
    background-color: #f0f0f0;\r
    overflow: visible;\r
\r
    .x-button {\r
        background: transparent;\r
\r
    &.x-button-pressed,\r
        &.x-button-pressing {\r
            background: $highlight-color;\r
        }\r
    }\r
\r
    .x-field-select .x-component-outer {\r
        @include background(linear-gradient(color-stops(lighten(#dbdbdb, 5%), #dbdbdb)));\r
    }\r
}\r
\r
.x-toolbar,\r
.x-tabbar {\r
    border-width: 0 !important;\r
    height: 50px;\r
}\r
\r
.x-tabbar.x-docked-bottom,\r
.x-toolbar.x-docked-bottom {\r
    height: 66px;\r
\r
    .x-button-normal:before {\r
        height: 2px !important;\r
    }\r
\r
    .x-button.menu {\r
        margin: 0;\r
        border-right-style: solid;\r
        border-right-width: 1px;\r
    }\r
\r
    .x-tab,\r
    .x-button,\r
    .x-button-tab {\r
        @include st-box-orient(vertical);\r
        border-color: darken($dark-color, 6);\r
        background: none transparent;\r
        @include box-shadow(none);\r
        border-width: 0 !important;\r
        overflow: visible;\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
    .x-tab-active,\r
    .x-button.x-button-pressing,\r
    .x-button-tab.x-button-pressing {\r
        background-color: #e6e6e6;\r
    }\r
\r
    .x-button.bb-default.x-button-pressing,\r
    .x-button-tab.bb-default.x-button-pressing {\r
        background-color: transparent;\r
    }\r
\r
    .x-button, .x-button-tab {\r
        min-width: 3.3em;\r
        height: 100%;\r
        background-color: transparent;\r
        border: 0;\r
        padding: 0;\r
        @include border-radius(0);\r
        color: #323232;\r
\r
        // Blackberry Landscape & Q10 styles\r
        .x-landscape &, .x-bb-keyboard & {\r
            min-width: 60px;\r
            .x-button-icon:before {\r
                line-height: 2em;\r
                font-size: 20px;\r
            }\r
        }\r
\r
\r
        &.bb-default.x-button-pressing .x-button-icon {\r
            -webkit-transform: scale(1.1);\r
            transform: scale(1.1);\r
            &:before {\r
                background-color: #087099;\r
            }\r
        }\r
\r
\r
        &.bb-default .x-button-icon {\r
            top: -20px;\r
            -webkit-transform: inherit;\r
            transform: inherit;\r
            -webkit-transition: -webkit-transform $default-button-animation-time;\r
            transition: transform $default-button-animation-time;\r
\r
            &:after {\r
                top: 3px;\r
                margin: 0 auto;\r
                .x-bb-keyboard & {\r
                    top: 4px;\r
                }\r
            }\r
\r
            &:before {\r
                background-color: #0092cc;\r
                -webkit-transition: background-color $default-button-animation-time;\r
                width: 52px;\r
                height: 52px;\r
                .x-bb-keyboard & {\r
                    left: 4px;\r
                }\r
                display: block;\r
                border-radius: 100%;\r
                text-align: center;\r
                position: absolute;\r
                margin: 0 auto;\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 !important;\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
        &:before {\r
            @include border-radius(0);\r
        }\r
\r
        .x-button-icon.x-hidden {\r
            display: block !important;\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
\r
.x-title {\r
    color: #323232;\r
    font-size: 20px;\r
    font-weight: normal;\r
    letter-spacing: 1px;\r
}