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