add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-base / sass / src / button / Button.scss

/**\r
 * generates base style rules for both tabs and buttons\r
 *\r
 * @param {string} [$base-cls='button']\r
 *\r
 * @param {boolean} [$include-arrows=true]\r
 *\r
 * @member Ext.button.Button\r
 * @private\r
 */\r
@mixin extjs-button-base(\r
    $base-cls: 'btn',\r
    $btn-display: inline-block,\r
    $include-arrows: true,\r
    $flexbox: true\r
) {\r
    .#{$prefix}#{$base-cls} {\r
        display: $btn-display;\r
        outline: 0;\r
        cursor: pointer;\r
        white-space: nowrap;\r
        text-decoration: none;\r
        vertical-align: top;\r
        overflow: hidden;\r
        // buttons are position:relative because they may contain an absolutely positioned\r
        // pseudo element for imitating box-shadow in IE8 when used in a segmented button\r
        // see extjs-button-ui\r
        position: relative;\r
        > .#{$prefix}frame {\r
            height: 100%;\r
            width: 100%;\r
        }\r
    }\r
\r
    .#{$prefix}#{$base-cls}-wrap {\r
        height: 100%;\r
        width: 100%;\r
\r
        @if $flexbox {\r
            @include ext-box;\r
            @include ext-box-align(stretch);\r
\r
            &.#{$prefix}btn-arrow-bottom,\r
            &.#{$prefix}btn-split-bottom {\r
                @include ext-box-orient(vertical);\r
            }\r
\r
            @if $include-ie {\r
                .#{$prefix}ie9m & {\r
                    display: table;\r
                    border-spacing: 0;\r
                }\r
            }\r
        } @else {\r
            display: table;\r
            border-spacing: 0;\r
        }\r
    }\r
\r
    .#{$prefix}#{$base-cls}-button {\r
        white-space: nowrap;\r
        line-height: 0;\r
        // this element must be position:relative so that the split line can be absolutely\r
        // positioned inside of it\r
        position: relative;\r
\r
        @if $flexbox {\r
            @include ext-box;\r
            @include ext-box-align(center);\r
            @include ext-box-flex;\r
\r
            &.#{$prefix}#{$base-cls}-icon-top,\r
            &.#{$prefix}#{$base-cls}-icon-bottom {\r
                @include ext-box-orient(vertical);\r
                @include ext-box-align(stretch);\r
                @include ext-box-pack(center);\r
            }\r
\r
            @if $include-ie {\r
                .#{$prefix}ie9m & {\r
                    display: table-cell;\r
                    vertical-align: middle;\r
                }\r
            }\r
        } @else {\r
            display: table-cell;\r
            vertical-align: middle;\r
        }\r
    }\r
\r
    .#{$prefix}#{$base-cls}-inner {\r
        overflow: hidden;\r
        text-overflow: ellipsis;\r
\r
        @if $flexbox {\r
            -ms-flex-negative: 1;\r
            display: block;\r
\r
            @if $include-ie {\r
                .#{$prefix}ie9m & {\r
                    display: inline-block;\r
                    vertical-align: middle;\r
                }\r
            }\r
        } @else {\r
            display: inline-block;\r
            vertical-align: middle;\r
        }\r
\r
        .#{$prefix}#{$base-cls}-icon.#{$prefix}#{$base-cls}-no-text > & {\r
            display: none;\r
        }\r
    }\r
\r
    .#{$prefix}#{$base-cls}-icon-el {\r
        display: none;\r
        vertical-align: middle;\r
        text-align: center;\r
        background-position: center center;\r
        background-repeat: no-repeat;\r
\r
        @if $flexbox {\r
            .#{$prefix}#{$base-cls}-icon > & {\r
                display: block;\r
            }\r
\r
            @if $include-ie {\r
                .#{$prefix}ie9m .#{$prefix}#{$base-cls}-icon-left > &,\r
                .#{$prefix}ie9m .#{$prefix}#{$base-cls}-icon-right > & {\r
                    display: inline-block;\r
                }\r
            }\r
        } @else {\r
            .#{$prefix}#{$base-cls}-icon > & {\r
                display: inline-block;\r
            }\r
\r
            .#{$prefix}#{$base-cls}-icon-top > &,\r
            .#{$prefix}#{$base-cls}-icon-bottom > & {\r
                display: block;\r
            }\r
        }\r
    }\r
\r
    .#{$prefix}#{$base-cls}-button-center {\r
        text-align: center;\r
        @if $flexbox {\r
            @include ext-box-pack(center);\r
        }\r
    }\r
\r
    .#{$prefix}#{$base-cls}-button-left {\r
        text-align: left;\r
        @if $flexbox {\r
            @include ext-box-pack(start);\r
        }\r
    }\r
\r
    @if $include-rtl {\r
        .#{$prefix}rtl.#{$prefix}#{$base-cls}-button-left {\r
            text-align: right;\r
        }\r
    }\r
\r
    .#{$prefix}#{$base-cls}-button-right {\r
        text-align: right;\r
        @if $flexbox {\r
            @include ext-box-pack(end);\r
        }\r
    }\r
\r
    @if $include-rtl {\r
        .#{$prefix}rtl.#{$prefix}#{$base-cls}-button-right {\r
            text-align: left;\r
        }\r
    }\r
\r
    @if $include-arrows {\r
        .#{$prefix}#{$base-cls}-arrow:after,\r
        .#{$prefix}#{$base-cls}-split:after {\r
            display: block;\r
            background-repeat: no-repeat;\r
            content: '';\r
            // pseudo elements don't match wildcard selectors, so ".x-border-box *" will not apply\r
            // to this element\r
            box-sizing: border-box;\r
            -moz-box-sizing: border-box;\r
            -ms-box-sizing: border-box;\r
            -webkit-box-sizing: border-box;\r
            text-align: center;\r
        }\r
\r
        .#{$prefix}#{$base-cls}-arrow-right:after,\r
        .#{$prefix}#{$base-cls}-split-right:after {\r
            background-position: right center;\r
\r
            @if $flexbox {\r
                @include ext-box;\r
                @include ext-box-align(center);\r
                @include ext-box-pack(center);\r
\r
                @if $include-ie {\r
                    .#{$prefix}ie9m & {\r
                        display: table-cell;\r
                        vertical-align: middle;\r
                    }\r
                }\r
            } @else {\r
                display: table-cell;\r
                vertical-align: middle;\r
            }\r
        }\r
\r
        @if $include-rtl {\r
            .#{$prefix}rtl {\r
                &.#{$prefix}#{$base-cls}-arrow-right:after,\r
                &.#{$prefix}#{$base-cls}-split-right:after {\r
                    background-position: left center;\r
                }\r
            }\r
        }\r
\r
        .#{$prefix}#{$base-cls}-arrow-bottom:after,\r
        .#{$prefix}#{$base-cls}-split-bottom:after {\r
            background-position: center bottom;\r
            // when this pseudo el is display:table-row (with no table-cell inside) in needs\r
            // content other than emtpy or space in order to render in some browsers (IE8-11),\r
            // so use non-breaking space\r
            content: '\00a0';\r
            // line-height:0 prevents the pseudo el from inheriting line-height and being\r
            // taller than specified by $icon-size.\r
            line-height: 0;\r
\r
            @if $flexbox {\r
                @if $include-ie {\r
                    .#{$prefix}ie9m & {\r
                        display: table-row;\r
                    }\r
                }\r
            } @else {\r
                display: table-row;\r
            }\r
        }\r
\r
        // placeholder pseudo element for split line when line is not contained in arrow image\r
        .#{$prefix}#{$base-cls}-split-right > .#{$prefix}btn-button:after {\r
            position: absolute;\r
            display: block;\r
            top: -100%;\r
            right: 0;\r
            height: 300%;\r
            content: '';\r
        }\r
\r
        @if $include-rtl {\r
            .#{$prefix}rtl.#{$prefix}#{$base-cls}-split-right > .#{$prefix}btn-button:after {\r
                left: 0;\r
                right: auto;\r
            }\r
        }\r
\r
        // placeholder pseudo element for split line when line is not contained in arrow image\r
        .#{$prefix}#{$base-cls}-split-bottom > .#{$prefix}btn-button:after {\r
            position: absolute;\r
            display: block;\r
            bottom: 0;\r
            left: -100%;\r
            font-size: 0;\r
            width: 300%;\r
            content: '';\r
        }\r
    }\r
\r
    .#{$prefix}#{$base-cls}-mc {\r
        // buttons and tabs can have a focus outline on the btnWrap element.  The default\r
        // overflow:hidden styling of the frame body hides the outline, so override it to\r
        // overflow:visible.\r
        overflow: visible;\r
    }\r
}\r
\r
@include extjs-button-base();\r