add extjs 6.0.1 sources

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

// Segmented Button\r
\r
.x-segmentedbutton {\r
    padding: 0 2px;\r
    height: 35px;\r
    border: 1px solid;\r
    border-color: #e3e3e3;\r
    @include border-radius($button-border-radius);\r
    @include background(linear-gradient(color-stops(#f4f4f4, #fcfcfc)));\r
    @include box-shadow(inset 0 2px 2px rgba(#000, .05));\r
\r
    .x-button {\r
        border: 1px solid transparent;\r
        height: 28px;\r
        margin: 3px 1px 0 0;\r
        @include box-shadow(none);\r
        @include border-radius(3px);\r
        background: none;\r
\r
        &:last-child {\r
            margin-right: 0;\r
        }\r
\r
        &:before {\r
            top: 0;\r
            right: 0;\r
            bottom: 0;\r
            left: 0;\r
            border: 0;\r
            background: none;\r
        }\r
\r
        .x-button-label {\r
            color: #262626;\r
        }\r
\r
        .x-button-icon:before {\r
            color: #000;\r
        }\r
    }\r
\r
    .x-button-pressing,\r
    .x-button-pressed {\r
        border-color: #c8c8c8;\r
\r
        .x-button-label {\r
            color: #555555;\r
        }\r
\r
        .x-button-icon:before {\r
            color: #555555;\r
        }\r
    }\r
\r
    .x-first:before {\r
        @include border-top-left-radius(4px);\r
        @include border-bottom-left-radius(4px);\r
    }\r
\r
    .x-last:before {\r
        @include border-top-right-radius(4px);\r
        @include border-bottom-right-radius(4px);\r
    }\r
}\r
\r
.x-toolbar-dark {\r
    .x-segmentedbutton {\r
        border-color: #060606;\r
        @include background(linear-gradient(color-stops(#010101, #060606)));\r
        @include box-shadow(0 0 0 1px #393939);\r
\r
        .x-button-label {\r
            color: #fff;\r
        }\r
\r
        .x-button-icon:before {\r
            color: #fff;\r
        }\r
\r
        .x-button {\r
            &:before {\r
                @include box-shadow(none);\r
            }\r
        }\r
\r
        .x-button-pressing,\r
        .x-button-pressed {\r
            border-color: #000;\r
            @include box-shadow(inset 0 0 0 1px rgba(#fff, .1));\r
            @include background(linear-gradient(top, rgba(#fff, .2), rgba(#fff, .1)));\r
        }\r
    }\r
}\r
\r
.x-toolbar-plain,\r
.x-toolbar-neutral,\r
.x-toolbar-light {\r
    .x-segmentedbutton {\r
        .x-button-pressing,\r
        .x-button-pressed {\r
            background-image: none;\r
\r
            &:before {\r
                @include box-shadow(none);\r
            }\r
        }\r
    }\r
}\r
\r
.x-toolbar-light {\r
    .x-segmentedbutton {\r
        background: transparent;\r
        border-color: #07648d;\r
        @include box-shadow(inset 0 1px 2px rgba(#000, .4));\r
    \r
        .x-button {\r
            &:before {\r
                @include box-shadow(none);\r
            }\r
        }\r
\r
        .x-button-pressing,\r
        .x-button-pressed {\r
            border-color: #0c6893;\r
            @include box-shadow(inset 0 0 0 1px rgba(#fff, .1));\r
            @include background(linear-gradient(top, rgba(#fff, .2), rgba(#fff, .1)));\r
        }\r
\r
        .x-button-label {\r
            color: #fff;\r
        }\r
\r
        .x-button-icon:before {\r
            color: #fff;\r
        }\r
    }\r
}\r
\r
.x-toolbar-neutral {\r
    .x-segmentedbutton {\r
        border-color: #c7c7c7;\r
        @include background(linear-gradient(color-stops(#efefef, #dfdfdf)));\r
        @include box-shadow(inset 0 1px 3px rgba(#000, .2));\r
\r
        .x-button {\r
            background-image: none;\r
        }\r
    }\r
}