/** * @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; } } } }}