add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-neutral / sass / src / layout / container / Box.scss

/**\r
 * Creates a visual theme for a {@link Ext.layout.container.boxOverflow.Scroller Box Scroller}\r
 *\r
 * @param {string} $ui\r
 * The name of the UI being created. Can not included spaces or special punctuation\r
 * (used in CSS class names).\r
 *\r
 * @param {string} $type\r
 * The type of component that this box scroller will be used with.  For example 'toolbar'\r
 * or 'tab-bar'\r
 *\r
 * @param {number} [$horizontal-width=16px]\r
 * The width of horizontal scroller buttons\r
 *\r
 * @param {Number} [$horizontal-height=16px]\r
 * The height of horizontal scroller buttons\r
 *\r
 * @param {number} [$vertical-width=16px]\r
 * The width of vertical scroller buttons\r
 *\r
 * @param {Number} [$vertical-height=16px]\r
 * The height of vertical scroller buttons\r
 *\r
 * @param {number/list} [$top-margin=0]\r
 * The margin of the "top" scroller button\r
 *\r
 * @param {number/list} [$right-margin=0]\r
 * The margin of the "right" scroller button\r
 *\r
 * @param {number/list} [$bottom-margin=0]\r
 * The margin of the "bottom" scroller button\r
 *\r
 * @param {number/list} [$left-margin=0]\r
 * The margin of the "left" scroller button\r
 *\r
 * @param {number/list} $top-background-image\r
 * The background-image of the "top" scroller button\r
 *\r
 * @param {number/list} $right-background-image\r
 * The background-image of the "right" scroller button\r
 *\r
 * @param {number/list} $bottom-background-image\r
 * The background-image of the "bottom" scroller button\r
 *\r
 * @param {number/list} $left-background-image\r
 * The background-image of the "left" scroller button\r
 *\r
 * @param {color} $glyph-color\r
 * The color of the scroller button icons\r
 *\r
 * @param {number/list} $top-glyph\r
 * The glyph for the "top" scroller button\r
 *\r
 * @param {number/list} $right-glyph\r
 * The glyph for the "right" scroller button\r
 *\r
 * @param {number/list} $bottom-glyph\r
 * The glyph for the "bottom" scroller button\r
 *\r
 * @param {number/list} $left-glyph\r
 * The glyph for the "left" scroller button\r
 *\r
 * @param {color} [$border-color=$base-color]\r
 * The border-color of the scroller buttons\r
 *\r
 * @param {number} [$horizontal-border-width=0]\r
 * The border-width of the scroller buttons\r
 *\r
 * @param {number} [$vertical-border-width=0]\r
 * The border-width of the scroller buttons\r
 *\r
 * @param {number/list} [$container-padding=0]\r
 * The padding of the container that these scroller buttons will be used in.  Used for\r
 * setting margin offsets of the inner layout element to reserve space for the scrollers.\r
 *\r
 * @param {string} [$cursor=pointer]\r
 * The type of cursor to display when the mouse is over a scroller button\r
 *\r
 * @param {string} [$cursor-disabled=default]\r
 * The type of cursor to display when the mouse is over a disabled scroller button\r
 *\r
 * @param {string} [$align=middle]\r
 * Vertical alignment of the scroller buttons, or horizontal align of vertically oriented\r
 * scroller buttons. Can be one of the following values:\r
 *\r
 * - `begin`\r
 * - `middle`\r
 * - `end`\r
 * - `stretch`\r
 *\r
 * @param {string} [$align-offset=0]\r
 * Number of pixels to offset the alignment of the scroller.\r
 * Only applicable when {@link #align} is `middle`.\r
 *\r
 * @param {number} [$opacity=0.6]\r
 * The opacity of the scroller buttons. Only applicable when `$classic` is `false`.\r
 *\r
 * @param {number} [$opacity-over=0.8]\r
 * The opacity of hovered scroller buttons. Only applicable when `$classic` is `false`.\r
 *\r
 * @param {number} [$opacity-pressed=1]\r
 * The opacity of pressed scroller buttons. Only applicable when `$classic` is `false`.\r
 *\r
 * @param {number} [$opacity-disabled=0.25]\r
 * The opacity of disabled scroller buttons. Only applicable when `$classic` is `false`.\r
 *\r
 * @param {boolean} [$classic=false]\r
 * `true` to use classic-style scroller buttons.  When `true` scroller buttons are given\r
 * their hover state by changing their background-position,  When `false` scroller buttons\r
 * are given their hover state by applying opacity.\r
 *\r
 * @member Ext.layout.container.Box\r
 * @private\r
 */\r
@mixin extjs-box-scroller-ui(\r
    $ui: null,\r
    $type: null,\r
    $horizontal-width: 16px,\r
    $horizontal-height: 16px,\r
    $vertical-width: 16px,\r
    $vertical-height: 16px,\r
    $top-margin: 0,\r
    $right-margin: 0,\r
    $bottom-margin: 0,\r
    $left-margin: 0,\r
    $top-background-image: null,\r
    $right-background-image: null,\r
    $bottom-background-image: null,\r
    $left-background-image: null,\r
    $glyph-color: null,\r
    $top-glyph: null,\r
    $right-glyph: null,\r
    $bottom-glyph: null,\r
    $left-glyph: null,\r
    $horizontal-border-color: $base-color,\r
    $horizontal-border-width: 0,\r
    $vertical-border-color: $base-color,\r
    $vertical-border-width: 0,\r
    $container-padding: 0,\r
    $cursor: pointer,\r
    $cursor-disabled: default,\r
    $align: middle,\r
    $align-offset: 0,\r
    $opacity: 0.5,\r
    $opacity-over: 0.8,\r
    $opacity-pressed: 1,\r
    $opacity-disabled: 0.25,\r
    $classic: false,\r
    $include-horizontal: true,\r
    $include-vertical: true,\r
    $include-background-images: true\r
) {\r
    @if is-null($top-background-image) {\r
        $top-background-image: #{$type}/#{$ui}-scroll-top;\r
    }\r
\r
    @if is-null($right-background-image) {\r
        $right-background-image: #{$type}/#{$ui}-scroll-right;\r
    }\r
\r
    @if is-null($bottom-background-image) {\r
        $bottom-background-image: #{$type}/#{$ui}-scroll-bottom;\r
    }\r
\r
    @if is-null($left-background-image) {\r
        $left-background-image: #{$type}/#{$ui}-scroll-left;\r
    }\r
\r
    .#{$prefix}#{$type}-#{$ui}-scroller {\r
        .#{$prefix}box-scroller-body-horizontal {\r
            margin-left: max($horizontal-width + horizontal($left-margin) - left($container-padding), 0);\r
        }\r
    }\r
\r
    .#{$prefix}#{$type}-#{$ui}-vertical-scroller {\r
        .#{$prefix}box-scroller-body-vertical {\r
            margin-top: max($vertical-height + vertical($top-margin) - top($container-padding), 0);\r
        }\r
    }\r
\r
    .#{$prefix}box-scroller-#{$type}-#{$ui} {\r
        cursor: $cursor;\r
        color: $glyph-color;\r
\r
        @if not $classic {\r
            @if $opacity != 1 {\r
                @include opacity($opacity);\r
            }\r
\r
            @if $opacity != 1 or $opacity-over != 1 {\r
                &.#{$prefix}box-scroller-hover {\r
                    @include opacity($opacity-over);\r
                }\r
            }\r
\r
            @if $opacity != 1 or $opacity-pressed != 1 {\r
                &.#{$prefix}box-scroller-pressed {\r
                    @include opacity($opacity-pressed);\r
                }\r
            }\r
        }\r
\r
        &.#{$prefix}box-scroller-disabled {\r
            @if $opacity-disabled != 1 {\r
                @include opacity($opacity-disabled);\r
            }\r
            @if not is-null($cursor-disabled) {\r
                cursor: $cursor-disabled;\r
            }\r
        }\r
\r
        @if $include-horizontal {\r
            &.#{$prefix}box-scroller-left,\r
            &.#{$prefix}box-scroller-right {\r
                width: $horizontal-width;\r
\r
                @if $align != stretch {\r
                    height: $horizontal-height;\r
                }\r
\r
                @if $horizontal-border-width != 0 {\r
                    border-style: solid;\r
                    border-color: $horizontal-border-color;\r
                    border-width: $horizontal-border-width;\r
                }\r
\r
                @if $align == begin {\r
                    top: 0;\r
                } @else if $align == middle {\r
                    top: 50%;\r
                    margin-top: -(floor($horizontal-height / 2)) + $align-offset;\r
                } @else if $align == end {\r
                    bottom: 0;\r
                } @else if $align == stretch {\r
                    top: 0;\r
                    bottom: 0;\r
                }\r
            }\r
\r
            &.#{$prefix}box-scroller-left {\r
                @if $align == middle {\r
                    // set all but margin-top to avoid overriding centering margin above\r
                    margin-left: left($left-margin);\r
                    margin-right: right($left-margin);\r
                    margin-bottom: bottom($left-margin);\r
                } @else {\r
                    margin: $left-margin;\r
                }\r
\r
                @if $enable-font-icons and ($left-glyph != null) {\r
                    @include font-icon($left-glyph, $line-height: $horizontal-height);\r
                } @else if $include-background-images {\r
                    background-image: theme-background-image($left-background-image);\r
                }\r
\r
                @if $classic {\r
                    background-position: -$horizontal-width 0;\r
\r
                    &.#{$prefix}box-scroller-hover {\r
                        background-position: 0 0;\r
                    }\r
                }\r
            }\r
\r
            &.#{$prefix}box-scroller-right {\r
                @if $align == middle {\r
                    // set all but margin-top to avoid overriding centering margin above\r
                    margin-left: left($right-margin);\r
                    margin-right: right($right-margin);\r
                    margin-bottom: bottom($right-margin);\r
                } @else {\r
                    margin: $right-margin;\r
                }\r
\r
                @if $enable-font-icons and ($right-glyph != null) {\r
                    @include font-icon($right-glyph, $line-height: $horizontal-height);\r
                } @else if $include-background-images {\r
                    background-image: theme-background-image($right-background-image);\r
                }\r
\r
                @if $classic {\r
                    background-position: 0 0;\r
\r
                    &.#{$prefix}box-scroller-hover {\r
                        background-position: -$horizontal-width 0;\r
                    }\r
                }\r
            }\r
        }\r
\r
        @if $include-vertical {\r
            &.#{$prefix}box-scroller-top,\r
            &.#{$prefix}box-scroller-bottom {\r
                height: $vertical-height;\r
\r
                @if $align != stretch {\r
                    width: $vertical-width;\r
                }\r
\r
                @if $vertical-border-width != 0 {\r
                    border-style: solid;\r
                    border-color: $vertical-border-color;\r
                    border-width: $vertical-border-width;\r
                }\r
\r
                @if $align == begin {\r
                    left: 0;\r
                } @else if $align == middle {\r
                    left: 50%;\r
                    margin-left: -(floor($vertical-width / 2)) + $align-offset;\r
                } @else if $align == end {\r
                    right: 0;\r
                } @else if $align == stretch {\r
                    left: 0;\r
                    right: 0;\r
                }\r
            }\r
\r
            &.#{$prefix}box-scroller-top {\r
                @if $align == middle {\r
                    // set all but margin-left to avoid overriding centering margin above\r
                    margin-top: top($top-margin);\r
                    margin-right: right($top-margin);\r
                    margin-bottom: bottom($top-margin);\r
                } @else {\r
                    margin: $top-margin;\r
                }\r
\r
                @if $enable-font-icons and ($top-glyph != null) {\r
                    @include font-icon($top-glyph, $line-height: $vertical-height);\r
                } @else if $include-background-images {\r
                    background-image: theme-background-image($top-background-image);\r
                }\r
\r
                @if $classic {\r
                    background-position: 0 (-$vertical-height);\r
\r
                    &.#{$prefix}box-scroller-hover {\r
                        background-position: 0 0;\r
                    }\r
                }\r
            }\r
\r
            &.#{$prefix}box-scroller-bottom {\r
                @if $align == middle {\r
                    // set all but margin-left to avoid overriding centering margin above\r
                    margin-top: top($bottom-margin);\r
                    margin-right: right($bottom-margin);\r
                    margin-bottom: bottom($bottom-margin);\r
                } @else {\r
                    margin: $bottom-margin;\r
                }\r
\r
                @if $enable-font-icons and ($bottom-glyph != null) {\r
                    @include font-icon($bottom-glyph, $line-height: $vertical-height);\r
                } @else if $include-background-images {\r
                    background-image: theme-background-image($bottom-background-image);\r
                }\r
\r
                @if $classic {\r
                    background-position: 0 0;\r
\r
                    &.#{$prefix}box-scroller-hover {\r
                        background-position: 0 (-$vertical-height);\r
                    }\r
                }\r
            }\r
        }\r
    }\r
}