add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-neutral / sass / var / form / trigger / Spinner.scss

/**\r
 * Creates a visual theme for spinner field triggers.  Note this mixin only provides\r
 * styling for the spinner trigger buttons. The text field portion of the styling must be\r
 * created using {@link Ext.form.field.Text#css_mixin-extjs-text-field-ui}\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 {boolean} [$ui-trigger-vertical=$spinner-trigger-vertical]\r
 * `true` to align the up/down triggers vertically.\r
 *\r
 * @param {number} [$ui-trigger-width=$form-trigger-width]\r
 * The width of the triggers.\r
 *\r
 * @param {number} [$ui-field-height=$form-text-field-height]\r
 * The height of the text field that the trigger must fit within.  This does not set the\r
 * height of the field, only the height of the triggers.  When {@link #css_mixin-extjs-spinner-trigger-ui $ui-trigger-vertical}\r
 * is true, the available height within the field borders is divided evenly between the\r
 * two triggers.\r
 *\r
 * @param {number/list} [$ui-field-border-width=$form-text-field-border-width]\r
 * The border width of the text field that the trigger must fit within.  This does not set\r
 * the border of the field, it is only needed so that the border-width of the field can\r
 * be subtracted from the trigger height.\r
 *\r
 * @param {string} [$ui-trigger-vertical-background-image=$spinner-trigger-vertical-background-image]\r
 * The background image sprite for vertically aligned spinner triggers\r
 *\r
 * @param {string} [$ui-trigger-up-background-image='form/spinner-up']\r
 * The background image for the "up" trigger when triggers are horizontally aligned\r
 *\r
 * @param {string} [$ui-trigger-down-background-image='form/spinner-down']\r
 * The background image for the "down" trigger when triggers are horizontally aligned\r
 *\r
 * @param {string/list} [$ui-trigger-up-glyph=$spinner-trigger-up-glyph]\r
 * The glyph for the "up" spinner trigger trigger when {@link Global_CSS#$enable-font-icons} is `true`.\r
 *\r
 * @param {string/list} [$ui-trigger-down-glyph=$spinner-trigger-down-glyph]\r
 * The glyph for the "down" spinner trigger trigger when {@link Global_CSS#$enable-font-icons} is `true`.\r
 *\r
 * @param {color} [$ui-trigger-glyph-color=$spinner-trigger-glyph-color]\r
 * The color of spinner triggers when {@link Global_CSS#$enable-font-icons} is `true`.\r
 *\r
 * @param {color} [$ui-trigger-background-color=$form-text-field-background-color]\r
 * The background color of the spinner triggers\r
 *\r
 * @param {boolean} [$ui-classic-border=$form-text-field-classic-border]\r
 * `true` to use classic-theme styled border.\r
 *\r
 * @member Ext.form.trigger.Spinner\r
 */\r
@mixin extjs-spinner-trigger-ui(\r
    $ui: null,\r
    $ui-trigger-vertical: $spinner-trigger-vertical,\r
    $ui-trigger-width: $form-trigger-width,\r
    $ui-field-height: $form-text-field-height,\r
    $ui-field-border-width: $form-text-field-border-width,\r
    $ui-trigger-vertical-background-image: $spinner-trigger-vertical-background-image,\r
    $ui-trigger-up-background-image: $spinner-trigger-up-background-image,\r
    $ui-trigger-down-background-image: $spinner-trigger-down-background-image,\r
    $ui-trigger-up-glyph: $spinner-trigger-up-glyph,\r
    $ui-trigger-down-glyph: $spinner-trigger-down-glyph,\r
    $ui-trigger-glyph-color: $spinner-trigger-glyph-color,\r
    $ui-trigger-background-color: $form-text-field-background-color,\r
    $ui-classic-border: $form-text-field-classic-border\r
){\r
    $ui-inner-height: if($ui-classic-border, $ui-field-height, $ui-field-height - vertical($ui-field-border-width));\r
    $ui-trigger-height: if($ui-trigger-vertical, $ui-inner-height / 2, $ui-inner-height);\r
\r
    .#{$prefix}form-trigger-spinner-#{$ui} {\r
        width: if($ui-trigger-vertical, $ui-trigger-width, $ui-trigger-width * 2);\r
        @if $ui-classic-border {\r
            border: 0;\r
        }\r
\r
        @if $enable-font-icons and ($ui-trigger-up-glyph != null or $ui-trigger-down-glyph != null) {\r
            // remove pseduo element from default trigger\r
            &:before {\r
                content: '';\r
            }\r
        }\r
    }\r
\r
    .#{$prefix}form-spinner-#{$ui} {\r
        @if $ui-trigger-vertical {\r
            @if (not $enable-font-icons) or ($ui-trigger-up-glyph == null and $ui-trigger-down-glyph == null) {\r
                background-image: theme-background-image($ui-trigger-vertical-background-image);\r
                @if $include-rtl {\r
                    &.#{$prefix}rtl {\r
                        background-image: theme-background-image($ui-trigger-vertical-background-image + '-rtl');\r
                    }\r
                }\r
            }\r
        } @else {\r
            display: inline-block;\r
        }\r
        background-color: $ui-trigger-background-color;\r
        width: $ui-trigger-width;\r
        height: $ui-trigger-height;\r
        @if $enable-font-icons {\r
            color: $ui-trigger-glyph-color;\r
        }\r
    }\r
\r
    @if not $spinner-trigger-vertical {\r
        @if (not $enable-font-icons) or ($ui-trigger-up-glyph == null) {\r
            .#{$prefix}form-spinner-up-#{$ui} {\r
                background-image: theme-background-image($ui-trigger-up-background-image);\r
                @if $include-rtl {\r
                    &.#{$prefix}rtl {\r
                        background-image: theme-background-image($ui-trigger-up-background-image + '-rtl');\r
                    }\r
                }\r
            }\r
        }\r
\r
        @if (not $enable-font-icons) or ($ui-trigger-down-glyph == null) {\r
            .#{$prefix}form-spinner-down-#{$ui} {\r
                background-image: theme-background-image($ui-trigger-down-background-image);\r
                @if $include-rtl {\r
                    &.#{$prefix}rtl {\r
                        background-image: theme-background-image($ui-trigger-down-background-image + '-rtl');\r
                    }\r
                }\r
            }\r
        }\r
    }\r
\r
    @if $enable-font-icons and ($ui-trigger-up-glyph != null) {\r
        .#{$prefix}form-spinner-up-#{$ui} {\r
            @include font-icon($ui-trigger-up-glyph);\r
        }\r
    }\r
\r
    @if $enable-font-icons and ($ui-trigger-down-glyph != null) {\r
        .#{$prefix}form-spinner-down-#{$ui} {\r
            @include font-icon($ui-trigger-down-glyph);\r
        }\r
    }\r
\r
    @if $ui-trigger-vertical {\r
        .#{$prefix}form-spinner-up-#{$ui} {\r
            background-position: 0 0;\r
\r
            &.#{$prefix}form-spinner-over {\r
                background-position: (-$ui-trigger-width) 0;\r
                &.#{$prefix}form-spinner-focus {\r
                    background-position: -($ui-trigger-width * 4) 0;\r
                }\r
            }\r
\r
            &.#{$prefix}form-spinner-focus {\r
                background-position: -($ui-trigger-width * 3) 0;\r
            }\r
\r
            // add x-form-spinner class to increase specificity of "click" above focus/over\r
            &.#{$prefix}form-spinner.#{$prefix}form-spinner-click {\r
                background-position: -($ui-trigger-width * 2) 0;\r
            }\r
        }\r
\r
        .#{$prefix}form-spinner-down-#{$ui} {\r
            background-position: 0 (-$ui-trigger-height);\r
\r
            &.#{$prefix}form-spinner-over {\r
                background-position: (-$ui-trigger-width) (-$ui-trigger-height);\r
                &.#{$prefix}form-spinner-focus {\r
                    background-position: -($ui-trigger-width * 4) (-$ui-trigger-height);\r
                }\r
            }\r
\r
            &.#{$prefix}form-spinner-focus {\r
                background-position: -($ui-trigger-width * 3) (-$ui-trigger-height);\r
            }\r
\r
            // add x-form-spinner class to increase specificity of "click" above focus/over\r
            &.#{$prefix}form-spinner.#{$prefix}form-spinner-click {\r
                background-position: -($ui-trigger-width * 2) (-$ui-trigger-height);\r
            }\r
        }\r
    } @else {\r
        .#{$prefix}form-spinner-#{$ui} {\r
            background-position: 0 0;\r
\r
            &.#{$prefix}form-spinner-over {\r
                background-position: (-$ui-trigger-width) 0;\r
                &.#{$prefix}form-spinner-focus {\r
                    background-position: -($ui-trigger-width * 4) 0;\r
                }\r
            }\r
\r
            &.#{$prefix}form-spinner-focus {\r
                background-position: -($ui-trigger-width * 3) 0;\r
            }\r
\r
            // add x-form-spinner class to increase specificity of "click" above focus/over\r
            &.#{$prefix}form-spinner.#{$prefix}form-spinner-click {\r
                background-position: -($ui-trigger-width * 2) 0;\r
            }\r
        }\r
    }\r
}\r
\r