saas-one/frontend/operation-web/ext/modern/theme-neptune/sass/var/field/Text.scss

/**
 * @class Ext.field.Text
 */

/**
 * @var {color}
 * Text Field input color
 */
$textfield-input-color: dynamic($color);

/**
 * @var {color}
 * Text Field input color when focused
 */
$textfield-focused-input-color: dynamic(null);

/**
 * @var {color}
 * Text Field input color when invalid
 */
$textfield-invalid-input-color: dynamic(null);

/**
 * @var {color}
 * Text Field input color when disabled
 */
$textfield-disabled-input-color: dynamic(null);

/**
 * @var {number/list}
 * Text Field input border width
 */
$textfield-input-border-width: dynamic(1px);

/**
 * @var {string/list}
 * Text Field input border style
 */
$textfield-input-border-style: dynamic(solid);

/**
 * @var {string/list}
 * Text Field input border style when focused
 */
$textfield-focused-input-border-style: dynamic(null);

/**
 * @var {string/list}
 * Text Field input border style when invalid
 */
$textfield-invalid-input-border-style: dynamic(null);

//# fashion replaces $field-border-color
/**
 * @var {color/list}
 * Text Field input border color
 */
$textfield-input-border-color: dynamic($neutral-color);

/**
 * @var {string/list}
 * Text Field input border color when focused
 */
$textfield-focused-input-border-color: dynamic(mix(#fff, #157fcc, 15%));

/**
 * @var {string/list}
 * Text Field input border color when invalid
 */
$textfield-invalid-input-border-color: dynamic($alert-color);

/**
 * @var {string/list}
 * Text Field input border color when disabled
 */
$textfield-disabled-input-border-color: dynamic(null);

/**
 * @var {number}
 * Text field input underline width
 */
$textfield-input-underline-width: dynamic(null);

/**
 * @var {number}
 * Text field input underline width when focused
 */
$textfield-focused-input-underline-width: dynamic(null);

/**
 * @var {number}
 * Text field input underline width when invalid
 */
$textfield-invalid-input-underline-width: dynamic(null);

/**
 * @var {color}
 * Text field input underline color
 */
$textfield-input-underline-color: dynamic(null);

/**
 * @var {color}
 * Text field input underline color when focused
 */
$textfield-focused-input-underline-color: dynamic(null);

/**
 * @var {color}
 * Text field input underline color when invalid
 */
$textfield-invalid-input-underline-color: dynamic(null);

/**
 * @var {color}
 * Text Field input background-color
 */
$textfield-input-background-color: dynamic($background-color);

/**
 * @var {color}
 * Text Field input background-color when focused
 */
$textfield-focused-input-background-color: dynamic(null);

/**
 * @var {color}
 * Text Field input background-color when invalid
 */
$textfield-invalid-input-background-color: dynamic(null);

/**
 * @var {color}
 * Text Field input background-color when disabled
 */
$textfield-disabled-input-background-color: dynamic(null);

/**
 * @var {number/list}
 * Text Field input padding
 */
$textfield-input-padding: dynamic(3px 6px 2px);

/**
 * @var {number/list}
 * Text Field input padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-padding-big: dynamic(5px 6px);

/**
 * @var {string/number}
 * Text Field input font-weight
 */
$textfield-input-font-weight: dynamic($font-weight-normal);

/**
 * @var {number}
 * Text Field input font-size
 */
$textfield-input-font-size: dynamic($font-size);

/**
 * @var {number}
 * Text Field input font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-font-size-big: dynamic($font-size-big);

/**
 * @var {number}
 * Text Field input line-height
 */
$textfield-input-line-height: dynamic(17px);

/**
 * @var {number}
 * Text Field input line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-input-line-height-big: dynamic(20px);

/**
 * @var {string}
 * Text Field input font-family
 */
$textfield-input-font-family: dynamic($font-family);

/**
 * @var {color}
 * Text Field {@link #placeholder} color
 */
$textfield-placeholder-color: dynamic($neutral-medium-dark-color);

/**
 * @var {color}
 * Text Field {@link #placeholder} color when focused
 */
$textfield-focused-placeholder-color: dynamic(null);

/**
 * @var {color}
 * Text Field {@link #placeholder} color when invalid
 */
$textfield-invalid-placeholder-color: dynamic(null);

/**
 * @var {color}
 * Text Field {@link #placeholder} color when disabled
 */
$textfield-disabled-placeholder-color: dynamic(null);

/**
 * @var {number}
 * Text Field body width
 */
$textfield-body-width: dynamic(170px);

/**
 * @var {number}
 * Text Field body width in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$textfield-body-width-big: dynamic(200px);

/**
 * @var {map}
 * Parameters for the "celleditor" textfield UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$textfield-celleditor-ui: dynamic((
    input-padding:
        top($gridcell-padding or 0) - top($textfield-input-border-width or 0)
        right($gridcell-padding or 0) - right($textfield-input-border-width or 0)
        bottom($gridcell-padding or 0) - bottom($textfield-input-border-width or 0)
        left($gridcell-padding or 0) - left($textfield-input-border-width or 0),
    input-padding-big:
        top($gridcell-padding-big or 0) - top($textfield-input-border-width or 0)
        right($gridcell-padding-big or 0) - right($textfield-input-border-width or 0)
        bottom($gridcell-padding-big or 0) - bottom($textfield-input-border-width or 0)
        left($gridcell-padding-big or 0) - left($textfield-input-border-width or 0),
    input-line-height: $gridcell-line-height,
    input-line-height-big: $gridcell-line-height-big,
    input-font-size: $gridcell-font-size,
    input-font-size-big: $gridcell-font-size-big
));

/**
 * @var {number}
 * The duration for the focus {@link #animateUnderline underline animation}
 */
$textfield-animate-underline-duration: dynamic(.45s);

/**
 * @var {map}
 * Parameters for the "alt" textfield UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$textfield-alt-ui: dynamic((
    input-background-color: rgba(255, 255, 255, .2),
    focused-input-background-color: rgba(255, 255, 255, .15),
    input-color: rgba(255, 255, 255, .6),
    focused-input-color: rgba(255, 255, 255, .6),
    input-padding: 7px 7px 7px 0,
    input-padding-big: 7px 7px 7px 0,
    input-border-width: 0,
    placeholder-color: rgba(255, 255, 255, .6),
    focused-placeholder-color: rgb(255, 255, 255),
    border-radius: 3px
));

/**
 * @var {map}
 * Parameters for the "faded" textfield UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$textfield-faded-ui: dynamic((
    input-background-color: rgba(0, 0, 0, .1),
    focused-input-background-color: rgba(0, 0, 0, .15),
    input-color: rgba(0, 0, 0, .4),
    focused-input-color: rgba(0, 0, 0, .4),
    input-padding: 7px 7px 7px 0,
    input-padding-big: 7px 7px 7px 0,
    input-border-width: 0,
    placeholder-color: rgba(0, 0, 0, .4),
    focused-placeholder-color: #333,
    border-radius: 3px
));

/**
 * @var {map}
 * Parameters for the "solo" textfield UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$textfield-solo-ui: dynamic((
    input-background-color: #FFFFFF,
    input-color: rgba(0, 0, 0, .4),
    focused-input-color: rgba(0, 0, 0, .4),
    input-padding: 10px 10px 10px 0,
    input-padding-big: 10px 10px 10px 0,
    input-border-width: 0,
    placeholder-color: rgba(0, 0, 0, .4),
    border-radius: 3px
));

/**
 * Creates a visual theme for a Text Field
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=textfield] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $background-color
 * Text Field input background color
 *
 * @param {color} $focused-background-color
 * Focused Text Field background color
 *
 * @param {color} $invalid-background-color
 * Invalid Text Field background color
 *
 * @param {color} $disabled-background-color
 * Disabled Text Field background color
 *
 * @param {Number} $disabled-opacity
 * Text Field disabled opacity
 *
 * @param {Number} $required-indicator-font-weight
 * Required indicator font weight
 *
 * @param {Number} $required-indicator-font-size
 * Required indicator font size
 *
 * @param {Number} $required-indicator-line-height
 * Required indicator line height
 *
 * @param {String} $required-indicator-font-family
 * Required indicator font family
 *
 * @param {String} $required-indicator-margin
 * Required indicator margin
 *
 * @param {String} $required-indicator-margin-big
 * Required indicator margin in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $input-color
 * Text field input color
 *
 * @param {color} $focused-input-color
 * Text Field input color when focused
 *
 * @param {color} $invalid-input-color
 * Text Field input color when invalid
 *
 * @param {color} $disabled-input-color
 * Text Field input color when disabled
 *
 * @param {number/list} $input-border-width
 * Text Field input border width
 *
 * @param {string/list} $input-border-style
 * Text Field input border style
 *
 * @param {string/list} $focused-input-border-style
 * Text Field input border style when focused
 *
 * @param {string/list} $invalid-input-border-style
 * Text Field input border style when invalid
 *
 * @param {color/list} $input-border-color
 * Text Field input border color
 *
 * @param {string/list} $focused-input-border-color
 * Text Field input border color when focused
 *
 * @param {string/list} $invalid-input-border-color
 * Text Field input border color when invalid
 *
 * @param {string/list} $disabled-input-border-color
 * Text Field input border color when disabled
 *
 * @param {number} $input-underline-width
 * Text field input underline width
 *
 * @param {number} $focused-input-underline-width
 * Text field input underline width when focused
 *
 * @param {number} $invalid-input-underline-width
 * Text field input underline width when invalid
 *
 * @param {color} $input-underline-color
 * Text field input underline color
 *
 * @param {color} $focused-input-underline-color
 * Text field input underline color when focused
 *
 * @param {color} $invalid-input-underline-color
 * Text field input underline color when invalid
 *
 * @param {color} $input-background-color
 * Text Field input background-color
 *
 * @param {color} $focused-input-background-color
 * Text Field input background-color when focused
 *
 * @param {color} $invalid-input-background-color
 * Text Field input background-color when invalid
 *
 * @param {color} $disabled-input-background-color
 * Text Field input background-color when disabled
 *
 * @param {color} $input-padding
 * Text Field input padding
 *
 * @param {color} $input-padding-big
 * Text Field input padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/number} $input-font-weight
 * Text Field input font-weight
 *
 * @param {number} $input-font-size
 * Text Field input font-size
 *
 * @param {number} $input-font-size-big
 * Text Field input font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $input-line-height
 * Text Field input line-height
 *
 * @param {number} $input-line-height-big
 * Text Field input line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $input-font-family
 * Text Field input font-family
 *
 * @param {color} $placeholder-color
 * Text Field {@link #placeholder} color
 *
 * @param {color} $focused-placeholder-color
 * Text Field {@link #placeholder} color when focused
 *
 * @param {color} $invalid-placeholder-color
 * Text Field {@link #placeholder} color when invalid
 *
 * @param {color} $disabled-placeholder-color
 * Text Field {@link #placeholder} color when disabled
 *
 * @param {number} $border-radius
 * The border radius of the text field
 *
 * @param {number} $body-width
 * Text Field body width
 *
 * @param {number} $body-width-big
 * Text Field body width in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $animate-underline-duration
 * The duration, in seconds, for the focus {@link #animateUnderline underline animation}
 */
@mixin textfield-ui(
    $ui: null,
    $xtype: textfield,
    $background-color: null,
    $focused-background-color: null,
    $invalid-background-color: null,
    $disabled-background-color: null,
    $disabled-opacity: null,
    $required-indicator-font-weight: null,
    $required-indicator-font-size: null,
    $required-indicator-line-height: null,
    $required-indicator-font-family: null,
    $required-indicator-margin: null,
    $required-indicator-margin-big: null,
    $input-color: null,
    $focused-input-color: null,
    $invalid-input-color: null,
    $disabled-input-color: null,
    $input-border-width: null,
    $input-border-style: null,
    $focused-input-border-style: null,
    $invalid-input-border-style: null,
    $input-border-color: null,
    $focused-input-border-color: null,
    $invalid-input-border-color: null,
    $disabled-input-border-color: null,
    $input-underline-width: null,
    $focused-input-underline-width: null,
    $invalid-input-underline-width: null,
    $input-underline-color: null,
    $focused-input-underline-color: null,
    $invalid-input-underline-color: null,
    $input-background-color: null,
    $focused-input-background-color: null,
    $invalid-input-background-color: null,
    $disabled-input-background-color: null,
    $input-padding: null,
    $input-padding-big: null,
    $input-font-weight: null,
    $input-font-size: null,
    $input-font-size-big: null,
    $input-line-height: null,
    $input-line-height-big: null,
    $input-font-family: null,
    $placeholder-color: null,
    $focused-placeholder-color: null,
    $invalid-placeholder-color: null,
    $disabled-placeholder-color: null,
    $border-radius: null,
    $body-width: null,
    $body-width-big: null,
    $animate-underline-duration: null
) {
    $ui-suffix: ui-suffix($ui);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        background-color: $background-color;
        @include border-radius($border-radius);

        .#{$prefix}body-wrap-el {
            width: $body-width;

            @if $enable-big {
                .#{$prefix}big & {
                    width: $body-width-big;
                }
            }
        }

        // keep the background-color, color and border rules at the x-input-wrap-el
        // level to make triggers visually inside the text field input.
        .#{$prefix}input-wrap-el {
            @include border($input-border-width, $input-border-style, $input-border-color);

            background-color: $input-background-color;
            color: $input-color;
        }

        .#{$prefix}input-el {
            @include font($input-font-weight, $input-font-size, $input-line-height, $input-font-family);
            @include padding($input-padding);

            // IE11 does not respect line-height on input elements. To workaround the issue
            // we use content-box model and set min-height in addition to line-height
            min-height: $input-line-height;

            @if $enable-big {
                .#{$prefix}big & {
                    padding: $input-padding-big;
                    font-size: $input-font-size-big;
                    line-height: $input-line-height-big;
                }
            }

            // when using vendor prefixes, the selectors need to be separated into their own
            // rule for each prefix because when encountering an unsupported vendor prefix,
            // CSS parsing engines will consider the entire rule invalid.
            &::-webkit-input-placeholder {
                color: $placeholder-color;
            }
            &::-moz-placeholder {
                color: $placeholder-color;
            }
            &:-ms-input-placeholder {
                color: $placeholder-color;
            }
        }

        .#{$prefix}underline-el {
            height: $input-underline-width;
            background-color: $input-underline-color;
        }

        &.#{$prefix}animate-underline .#{$prefix}underline-el:before {
            transition: transform $animate-underline-duration cubic-bezier(0.23, 1, 0.32, 1);
        }

        &.#{$prefix}focused {
            background-color: $focused-background-color;

            .#{$prefix}underline-el:before {
                height: $focused-input-underline-width;
                background-color: $focused-input-underline-color;
            }

            .#{$prefix}input-wrap-el {
                border-style: $focused-input-border-style;
                border-color: $focused-input-border-color;
                background-color: $focused-input-background-color;
                color: $focused-input-color;
            }

            .#{$prefix}input-el {
                // when using vendor prefixes, the selectors need to be separated into their own
                // rule for each prefix because when encountering an unsupported vendor prefix,
                // CSS parsing engines will consider the entire rule invalid.
                &::-webkit-input-placeholder {
                    color: $focused-placeholder-color;
                }
                &::-moz-placeholder {
                    color: $focused-placeholder-color;
                }
                &:-ms-input-placeholder {
                    color: $focused-placeholder-color;
                }
            }
        }

        &.#{$prefix}invalid {
            background-color: $invalid-background-color;

            .#{$prefix}underline-el:after {
                height: $invalid-input-underline-width;
                background-color: $invalid-input-underline-color;
            }

            .#{$prefix}input-wrap-el {
                border-style: $invalid-input-border-style;
                border-color: $invalid-input-border-color;
                background-color: $invalid-input-background-color;
                color: $invalid-input-color;
            }

            .#{$prefix}input-el {
                // when using vendor prefixes, the selectors need to be separated into their own
                // rule for each prefix because when encountering an unsupported vendor prefix,
                // CSS parsing engines will consider the entire rule invalid.
                &::-webkit-input-placeholder {
                    color: $invalid-placeholder-color;
                }
                &::-moz-placeholder {
                    color: $invalid-placeholder-color;
                }
                &:-ms-input-placeholder {
                    color: $invalid-placeholder-color;
                }
            }
        }

        &.#{$prefix}disabled {
            background-color: $disabled-background-color;

            .#{$prefix}input-wrap-el {
                background-color: $disabled-input-background-color;
                border-color: $disabled-input-border-color;
                color: $disabled-input-color;
            }

            .#{$prefix}input-el {
                // when using vendor prefixes, the selectors need to be separated into their own
                // rule for each prefix because when encountering an unsupported vendor prefix,
                // CSS parsing engines will consider the entire rule invalid.
                &::-webkit-input-placeholder {
                    color: $disabled-placeholder-color;
                }
                &::-moz-placeholder {
                    color: $disabled-placeholder-color;
                }
                &:-ms-input-placeholder {
                    color: $disabled-placeholder-color;
                }
            }
        }
    }
}