add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-base / sass / etc / mixins / frame.scss

@function pad($radius) {\r
    $radius: boxmax($radius);\r
    $radius: parseint($radius);\r
    @if $radius >= 10 {\r
        @return $radius;\r
    }\r
    @else {\r
        @return "0" + $radius;\r
    }\r
}\r
\r
@function frame-size($border-width, $inner-border-width, $border-radius) {\r
    // We use the border-radius of the two corners on each edge to determine the "edge's\r
    // border-radius". For IE, the framing elements need to be as large as the larger of\r
    // the border-radius and the border-width on each edge. These values are passed on to\r
    // JavaScript using an encoded background-image url and the equivalent operations are\r
    // handled by Renderable.js.\r
    $frame-top:    max(top($border-width) +    top($inner-border-width),    max(top($border-radius),    right($border-radius)));\r
    $frame-right:  max(right($border-width) +  right($inner-border-width),  max(right($border-radius),  bottom($border-radius)));\r
    $frame-bottom: max(bottom($border-width) + bottom($inner-border-width), max(bottom($border-radius), left($border-radius)));\r
    $frame-left:   max(left($border-width) +   left($inner-border-width),   max(left($border-radius),   top($border-radius)));\r
\r
    $frame-max: max($frame-top $frame-right $frame-bottom $frame-left);\r
\r
    // Slices produced by the slicer are always equally sized so that\r
    // they can be sprited.  This means that all sides that have frames\r
    // must be the same size\r
    @if $frame-top != 0 {\r
        $frame-top: $frame-max;\r
    }\r
    @if $frame-right != 0 {\r
        $frame-right: $frame-max;\r
    }\r
    @if $frame-bottom != 0 {\r
        $frame-bottom: $frame-max;\r
    }\r
    @if $frame-left != 0 {\r
        $frame-left: $frame-max;\r
    }\r
\r
    @return $frame-top $frame-right $frame-bottom $frame-left\r
}\r
\r
@mixin x-frame(\r
    $cls,\r
    $ui: null,\r
    $border-radius: 0px,\r
    $border-width: 0px,\r
    $padding: null,\r
    $background-color: null,\r
    $background-gradient: null,\r
    $table: false,\r
    $background-direction: top,\r
    $include-frame-rtl: false,\r
    $background-stretch: null,\r
    $ignore-frame-padding: false,\r
    $inner-border-width: 0\r
) {\r
    $cls-ui: $cls;\r
    $cls-ui: null;\r
    @if $ui != null {\r
        $cls-ui: $cls + '-' + $ui;\r
    }\r
\r
    @if is-null($inner-border-width) {\r
        // default inner border width to 0 if the caller passed null or 'none' (e.g. buttons do this)\r
        $inner-border-width: 0;\r
    }\r
\r
    $vertical: false;\r
    @if not is-null($background-gradient) and ($background-direction == left or $background-direction == right) {\r
        $vertical: true;\r
    }\r
\r
    $background-stretch-position: null;\r
    @if is-null($background-stretch) {\r
        @if $background-direction == top {\r
            $background-stretch: bottom;\r
        } @else if $background-direction == right {\r
            $background-stretch: left;\r
        } @else if $background-direction == bottom {\r
            $background-stretch: top;\r
        } @else if $background-direction == left {\r
            $background-stretch: right;\r
        }\r
    }\r
\r
    @if $background-stretch == top {\r
        $background-stretch-position: bottom;\r
    } @else if $background-stretch == bottom {\r
        $background-stretch-position: top;\r
    } @else if $background-stretch == left {\r
        $background-stretch-position: right;\r
    } @else if $background-stretch == right {\r
        $background-stretch-position: left;\r
    }\r
\r
    @if not is-null($background-gradient) {\r
        $stretch: slicer-background-stretch($cls-ui, $background-stretch);\r
    }\r
\r
    $frame-size: frame-size($border-width, $inner-border-width, $border-radius);\r
    $frame-top: nth($frame-size, 1);\r
    $frame-right: nth($frame-size, 2);\r
    $frame-bottom: nth($frame-size, 3);\r
    $frame-left: nth($frame-size, 4);\r
\r
    $frame-max: max($frame-size);\r
\r
    $frame: slicer-frame($cls-ui, $frame-size);\r
\r
    $padding-top: 0;\r
    $padding-right: 0;\r
    $padding-bottom: 0;\r
    $padding-left: 0;\r
\r
    $frame-info-padding-top: 0;\r
    $frame-info-padding-right: 0;\r
    $frame-info-padding-bottom: 0;\r
    $frame-info-padding-left: 0;\r
\r
    // For CSS3 browsers, if the border-radius is larger than the border-width, we need to\r
    // apply padding to inset the content. These values can never be 0 because frame-xxx\r
    // includes border-xxx in its max.\r
    //\r
    @if not $ignore-frame-padding {\r
        $padding-top:    $frame-top    - top($border-width);\r
        $padding-right:  $frame-right  - right($border-width);\r
        $padding-bottom: $frame-bottom - bottom($border-width);\r
        $padding-left:   $frame-left   - left($border-width);\r
    } @else {\r
        // In nocss3 browsers we can never ignore frame padding, because the framing elements\r
        // cannot be overlapped by the content.\r
        $frame-info-padding-top:    $frame-top    - top($border-width);\r
        $frame-info-padding-right:  $frame-right  - right($border-width);\r
        $frame-info-padding-bottom: $frame-bottom - bottom($border-width);\r
        $frame-info-padding-left:   $frame-left   - left($border-width);\r
    }\r
\r
    // If there is additional padding, this is understood to be a request to ensure that\r
    // the content is **at least** this far from the inside of the border. If the framing\r
    // requires more padding, that wins. This is the amount of padding you need in CSS3\r
    // browsers.\r
    //\r
    @if not is-null($padding) {\r
        $padding-top:    max($padding-top,    top($padding));\r
        $padding-right:  max($padding-right,  right($padding));\r
        $padding-bottom: max($padding-bottom, bottom($padding));\r
        $padding-left:   max($padding-left,   left($padding));\r
    }\r
\r
    // For IE, the framing elements are sized by frame-xxx and the "-mc" will carry the\r
    // extra-padding-xxx.\r
    //\r
    $extra-padding-top:    max(top($border-width)    + $padding-top    - $frame-top, 0);\r
    $extra-padding-right:  max(right($border-width)  + $padding-right  - $frame-right, 0);\r
    $extra-padding-bottom: max(bottom($border-width) + $padding-bottom - $frame-bottom, 0);\r
    $extra-padding-left:   max(left($border-width)   + $padding-left   - $frame-left, 0);\r
\r
    $framing-info: '';\r
\r
    @if $table == true {\r
        $framing-info: $framing-info + 't';\r
    } @else {\r
        $framing-info: $framing-info + 'd';\r
    }\r
    @if $vertical == true {\r
        $framing-info: $framing-info + 'v';\r
    } @else {\r
        $framing-info: $framing-info + 'h';\r
    }\r
\r
    $framing-info: $framing-info + '-' +\r
           nopx($frame-top) + '-' +\r
           nopx($frame-right) + '-' +\r
           nopx($frame-bottom) + '-' +\r
           nopx($frame-left) + '-' +\r
           nopx(top($border-width)) + '-' +\r
           nopx(right($border-width)) + '-' +\r
           nopx(bottom($border-width)) + '-' +\r
           nopx(left($border-width)) + '-' +\r
           if($ignore-frame-padding, $frame-info-padding-top, nopx($padding-top)) + '-' +\r
           if($ignore-frame-padding, $frame-info-padding-right, nopx($padding-right)) + '-' +\r
           if($ignore-frame-padding, $frame-info-padding-bottom, nopx($padding-bottom)) + '-' +\r
           if($ignore-frame-padding, $frame-info-padding-left, nopx($padding-left));\r
\r
    .#{$prefix}#{$cls-ui} {\r
        @if length($border-radius) == 2 {\r
            @include border-top-left-radius(nth($border-radius, 1));\r
            @include border-top-right-radius(nth($border-radius, 2));\r
        } @else if length($border-radius) == 3 {\r
            @include border-top-left-radius(nth($border-radius, 1));\r
            @include border-top-right-radius(nth($border-radius, 2));\r
            @include border-bottom-right-radius(nth($border-radius, 3));\r
        } @else if length($border-radius) == 4 {\r
            @include border-top-left-radius(nth($border-radius, 1));\r
            @include border-top-right-radius(nth($border-radius, 2));\r
            @include border-bottom-right-radius(nth($border-radius, 3));\r
            @include border-bottom-left-radius(nth($border-radius, 4));\r
        } @else {\r
            @include border-radius($border-radius);\r
        }\r
\r
        padding: $padding-top $padding-right $padding-bottom $padding-left;\r
        border-width: $border-width;\r
        border-style: solid;\r
\r
        @if not is-null($background-color) {\r
            @if not is-null($background-gradient) {\r
                @include background-gradient($background-color, $background-gradient, $background-direction);\r
            }\r
            @else {\r
                background-color: $background-color;\r
            }\r
        }\r
    }\r
\r
    @if $include-frame-rtl {\r
        @if $background-direction == left {\r
            $background-direction: right;\r
        } @else if $background-direction == right {\r
            $background-direction: left;\r
        }\r
\r
        @if $background-direction == left or $background-direction == right {\r
            .#{$prefix}rtl.#{$prefix}#{$cls-ui} {\r
                @include background-gradient(\r
                    $background-color,\r
                    $background-gradient,\r
                    $background-direction\r
                );\r
            }\r
        }\r
    }\r
\r
    @if $include-slicer-border-radius {\r
        .#{$prefix}#{$cls-ui}-mc {\r
            @if not is-null($background-gradient) {\r
                background-image: slicer-frame-background-image($cls-ui, '#{$cls}/#{$cls-ui}-fbg');\r
\r
                @if $vertical {\r
                    background-position: $background-stretch-position 0;\r
                    background-repeat: repeat-y;\r
                } @else {\r
                    background-position: 0 $background-stretch-position;\r
                }\r
            }\r
            @if not is-null($background-color) {\r
                background-color: $background-color;\r
            }\r
        }\r
\r
        @if $include-frame-rtl and not is-null($background-gradient) {\r
            .#{$prefix}rtl.#{$prefix}#{$cls-ui}-mc {\r
                background-image: slicer-frame-background-image-rtl($cls-ui, '#{$cls}/#{$cls-ui}-fbg-rtl');\r
                background-position: rtl-background-position($background-stretch-position 0);\r
            }\r
        }\r
    }\r
\r
    @if $include-slicer-border-radius {\r
        .#{$prefix}nbr {\r
            // This rule must be in x-nbr to avoid matching on CSS3 browsers.\r
            .#{$prefix}#{$cls-ui} {\r
                padding: 0 !important;\r
                border-width: 0 !important;\r
                @include border-radius(0px);\r
                @if not is-null($background-color) {\r
                    background-color: transparent !important;\r
                } @else {\r
                    background: #fff;\r
                }\r
                @if not is-null($background-gradient) {\r
                    background-image: none;\r
                }\r
                // it is helpful to suppress box-shadow when debugging nocss3 mode in modern browsers\r
                box-shadow: none !important;\r
            }\r
        }\r
\r
        .#{$prefix}#{$cls-ui}-frameInfo {\r
            // Pass along Div/Table, Horz/Vert, border-radius and border-width\r
            // Here we're encoding the framing information in an arbitrary fashion so\r
            // it can be parsed by the component and get information about the framing.\r
            // Originally, this tried to embed the information using a background image\r
            // pointing to about:blank#info however in IE with SSL, this would trigger\r
            // the insecure content warning. We also tried encoding the info using a\r
            // filter as follows (where framing-info is a string containing the encoded data):\r
            // filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=false, src="ext-frame#{$framing-info}");\r
            // However the filter property can only be read by IE, making it impossible\r
            // to debug nocss3 mode in modern browsers. Font-family meets all the\r
            // requirements for tunneling data to JavaScript. It can contain an\r
            // arbitrary string value, which can be read in JS in any browser, and it\r
            // does not trigger any network interactions.\r
            font-family: #{$framing-info};\r
        }\r
\r
        // These rules apply to elements that are not rendered on CSS3 browsers so we do\r
        // not need to force the browser to walk to the root of the document searching\r
        // for x-nbr!\r
\r
        @if $vertical {\r
            // vertical framing element background positions\r
            .#{$prefix}#{$cls-ui}-tl {\r
                background-position: 0 0;\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-tr {\r
                background-position: 0 (-$frame-max);\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-bl {\r
                background-position: 0 (-$frame-max * 2);\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-br {\r
                background-position: 0 (-$frame-max * 3);\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-ml {\r
                background-position: (-$frame-max) 0;\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-mr {\r
                background-position: right 0;\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-tc {\r
                background-position: $background-stretch-position 0;\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-bc {\r
                background-position: $background-stretch-position (-$frame-max);\r
            }\r
\r
            @if $include-frame-rtl {\r
                .#{$prefix}rtl.#{$prefix}#{$cls-ui}-tc {\r
                    background-position: rtl-background-position($background-stretch-position 0);\r
                }\r
\r
                .#{$prefix}rtl.#{$prefix}#{$cls-ui}-bc {\r
                    background-position: rtl-background-position($background-stretch-position (-$frame-max));\r
                }\r
            }\r
        } @else {\r
            // horizontal framing element background positions\r
            .#{$prefix}#{$cls-ui}-tl {\r
                background-position: 0 (-$frame-max * 2);\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-tr {\r
                background-position: right (-$frame-max * 3);\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-bl {\r
                background-position: 0 (-$frame-max * 4);\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-br {\r
                background-position: right (-$frame-max * 5);\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-ml {\r
                @if $background-stretch-position == 'right' or $background-stretch-position == 'left' {\r
                    background-position: $background-stretch-position 0;\r
                } @else {\r
                    background-position: 0 $background-stretch-position;\r
                }\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-mr {\r
                @if $background-stretch-position == 'right' or $background-stretch-position == 'left' {\r
                    background-position: $background-stretch-position 0;\r
                } @else {\r
                    background-position: right $background-stretch-position;\r
                }\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-tc {\r
                background-position: 0 0;\r
            }\r
\r
            .#{$prefix}#{$cls-ui}-bc {\r
                background-position: 0 (-$frame-max);\r
            }\r
        }\r
\r
        .#{$prefix}#{$cls-ui}-tr,\r
        .#{$prefix}#{$cls-ui}-br,\r
        .#{$prefix}#{$cls-ui}-mr {\r
            padding-right: $frame-right;\r
        }\r
\r
        .#{$prefix}#{$cls-ui}-tl,\r
        .#{$prefix}#{$cls-ui}-bl,\r
        .#{$prefix}#{$cls-ui}-ml {\r
            padding-left: $frame-left;\r
        }\r
\r
        .#{$prefix}#{$cls-ui}-tc {\r
            height: $frame-top;\r
        }\r
        .#{$prefix}#{$cls-ui}-bc {\r
            height: $frame-bottom;\r
        }\r
\r
        .#{$prefix}#{$cls-ui}-tl,\r
        .#{$prefix}#{$cls-ui}-bl,\r
        .#{$prefix}#{$cls-ui}-tr,\r
        .#{$prefix}#{$cls-ui}-br,\r
        .#{$prefix}#{$cls-ui}-tc,\r
        .#{$prefix}#{$cls-ui}-bc,\r
        .#{$prefix}#{$cls-ui}-ml,\r
        .#{$prefix}#{$cls-ui}-mr {\r
            @if $background-color != transparent {\r
                background-image: slicer-corner-sprite($cls-ui, '#{$cls}/#{$cls-ui}-corners');\r
            }\r
        }\r
\r
        @if $background-color != transparent {\r
            @if $include-frame-rtl {\r
                .#{$prefix}rtl {\r
                    &.#{$prefix}#{$cls-ui}-tl,\r
                    &.#{$prefix}#{$cls-ui}-ml,\r
                    &.#{$prefix}#{$cls-ui}-bl,\r
                    &.#{$prefix}#{$cls-ui}-tr,\r
                    &.#{$prefix}#{$cls-ui}-mr,\r
                    &.#{$prefix}#{$cls-ui}-br {\r
                        background-image: slicer-corner-sprite-rtl($cls-ui, '#{$cls}/#{$cls-ui}-corners-rtl');\r
                    }\r
                }\r
            }\r
        }\r
\r
        @if $vertical == true {\r
            .#{$prefix}#{$cls-ui}-tc,\r
            .#{$prefix}#{$cls-ui}-bc {\r
                @if $background-color != transparent {\r
                    background-image: slicer-sides-sprite($cls-ui, '#{$cls}/#{$cls-ui}-sides');\r
                    background-repeat: repeat-x;\r
                }\r
            }\r
\r
            @if $include-frame-rtl and $background-color != transparent {\r
                .#{$prefix}rtl {\r
                    &.#{$prefix}#{$cls-ui}-tc,\r
                    &.#{$prefix}#{$cls-ui}-bc {\r
                        background-image: slicer-sides-sprite-rtl($cls-ui, '#{$cls}/#{$cls-ui}-sides-rtl');\r
                    }\r
                }\r
            }\r
        } @else {\r
            .#{$prefix}#{$cls-ui}-ml,\r
            .#{$prefix}#{$cls-ui}-mr {\r
                @if $background-color != transparent {\r
                    background-image: slicer-sides-sprite($cls-ui, '#{$cls}/#{$cls-ui}-sides');\r
                    @if is-null($background-gradient) {\r
                        background-repeat: repeat-y;\r
                    }\r
                }\r
            }\r
        }\r
\r
        .#{$prefix}#{$cls-ui}-mc {\r
            padding: $extra-padding-top $extra-padding-right $extra-padding-bottom $extra-padding-left;\r
        }\r
    }\r
\r
    @include x-slicer($cls-ui);\r
}\r