/** * @class Ext.field.Field */ /** * @var {color} * Field background-color */$field-background-color: dynamic(null); /** * @var {color} * Field background-color when focused */$field-focused-background-color: dynamic(null); /** * @var {color} * Field background-color when invalid */$field-invalid-background-color: dynamic(null); /** * @var {color} * Field background-color when disabled */$field-disabled-background-color: dynamic(null); /** * @var {color} * Field label text color */$field-label-color: dynamic($color); /** * @var {color} * Field label text color when focused */$field-focused-label-color: dynamic(null); /** * @var {color} * Field label text color when invalid */$field-invalid-label-color: dynamic(null); /** * @var {color} * Field label text color when disabled */$field-disabled-label-color: dynamic(null); /** * @var {color} * Field label background-color */$field-label-background-color: dynamic(null); /** * @var {color} * Field label background-color when focused */$field-focused-label-background-color: dynamic(null); /** * @var {color} * Field label background-color when invalid */$field-invalid-label-background-color: dynamic(null); /** * @var {color} * Field label background-color when disabled */$field-disabled-label-background-color: dynamic(null); /** * @var {number/list} * Field label padding */$field-label-padding: dynamic(4px 6px 3px 0); /** * @var {number/list} * Field label padding in the {@link Global_CSS#$enable-big big} sizing scheme */$field-label-padding-big: dynamic(6px 6px 6px 0); /** * @var {string/number} * Field label font-weight */$field-label-font-weight: dynamic($font-weight-normal); /** * @var {number} * Field label font-size */$field-label-font-size: dynamic($font-size); /** * @var {number} * Field label font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$field-label-font-size-big: dynamic($font-size-big); /** * @var {number} * Field label line-height */$field-label-line-height: dynamic(17px); /** * @var {number} * Field label line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$field-label-line-height-big: dynamic(20px); /** * @var {string} * Field label font-family */$field-label-font-family: dynamic($font-family); /** * @var {number} * Field label width */$field-label-width: dynamic(100px); /** * @var {number} * Field label width in the {@link Global_CSS#$enable-big big} sizing scheme */$field-label-width-big: dynamic(120px); /** * @var {number} * Field label min-width */$field-label-min-width: dynamic(null); /** * @var {number} * Field label min-width in the {@link Global_CSS#$enable-big big} sizing scheme */$field-label-min-width-big: dynamic(null); /** * @var {number} * Opacity of form fields when disabled */$field-disabled-opacity: dynamic(.3); /** * @var {string/number} * Field {@link #required} indicator font-weight */$field-required-indicator-font-weight: dynamic(null); /** * @var {number} * Field {@link #required} indicator font-size */$field-required-indicator-font-size: dynamic(null); /** * @var {number} * Field {@link #required} indicator line-height */$field-required-indicator-line-height: dynamic(null); /** * @var {string} * Field {@link #required} indicator font-family */$field-required-indicator-font-family: dynamic(null); /** * @var {number} * Field {@link #required} indicator margin */$field-required-indicator-margin: dynamic(-3px null null 4px); /** * @var {number} * Field {@link #required} indicator margin in the {@link Global_CSS#$enable-big big} sizing scheme */$field-required-indicator-margin-big: dynamic(null); /** * @var {string} * Field error icon when {#errorTarget} is `'side'` */$field-error-icon-side: dynamic($fa-var-exclamation-circle 'Font Awesome 5 Free'); /** * @var {color} * Field error icon color when {#errorTarget} is `'side'` */$field-error-icon-side-color: dynamic($alert-color); /** * @var {number} * Field error icon size when {#errorTarget} is `'side'` */$field-error-icon-side-size: dynamic(16px); /** * @var {number} * Field error icon size when {#errorTarget} is `'side'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-icon-side-size-big: dynamic(30px); /** * @var {number} * Field error icon font-size when {#errorTarget} is `'side'` */$field-error-icon-side-font-size: dynamic(null); /** * @var {number} * Field error icon font-size when {#errorTarget} is `'side'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-icon-side-font-size-big: dynamic(null); /** * @var {number/list} * Field error icon margin when {#errorTarget} is `'side'` */$field-error-icon-side-margin: dynamic(0 5px); /** * @var {number/list} * Field error icon margin when {#errorTarget} is `'side'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-icon-side-margin-big: dynamic(0 8px); /** * @var {string} * Field error icon when {#errorTarget} is `'under'` */$field-error-icon-under: dynamic($fa-var-exclamation-circle 'Font Awesome 5 Free'); /** * @var {color} * Field error icon color when {#errorTarget} is `'under'` */$field-error-icon-under-color: dynamic($alert-color); /** * @var {number} * Field error icon size when {#errorTarget} is `'under'` */$field-error-icon-under-size: dynamic(16px); /** * @var {number} * Field error icon size when {#errorTarget} is `'under'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-icon-under-size-big: dynamic(30px); /** * @var {number} * Field error icon font-size when {#errorTarget} is `'under'` */$field-error-icon-under-font-size: dynamic(null); /** * @var {number} * Field error icon font-size when {#errorTarget} is `'under'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-icon-under-font-size-big: dynamic(null); /** * @var {number/list} * Field error icon margin when {#errorTarget} is `'under'` */$field-error-icon-under-margin: dynamic(0 5px 0 0); /** * @var {number/list} * Field error icon margin when {#errorTarget} is `'under'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-icon-under-margin-big: dynamic(0 8px 0 0); /** * @var {number/list} * Field error element margin when {#errorTarget} is `'under'` */$field-error-under-margin: dynamic(2px 0); /** * @var {number/list} * Field error element margin when {#errorTarget} is `'under'` * in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-under-margin-big: dynamic(3px); /** * @var {color} * Field error message color */$field-error-message-color: dynamic($alert-color); /** * @var {string/number} * Field error message font-weight */$field-error-message-font-weight: dynamic($font-weight); /** * @var {number} * Field error message font-size */$field-error-message-font-size: dynamic(1rem); /** * @var {number} * Field error message font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-message-font-size-big: dynamic(null); /** * @var {number} * Field error message line-height */$field-error-message-line-height: dynamic(16px); /** * @var {number} * Field error message line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$field-error-message-line-height-big: dynamic(24px); /** * @var {string} * Field error message font-family */$field-error-message-font-family: dynamic($font-family); /** * Creates a visual theme for a 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=field] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $background-color * Field background-color * * @param {color} $focused-background-color * Field background-color when focused * * @param {color} $invalid-background-color * Field background-color when invalid * * @param {color} $disabled-background-color * Field background-color when disabled * * @param {color} $label-color * Field label text color * * @param {color} $focused-label-color * Field label text color when focused * * @param {color} $invalid-label-color * Field label text color when invalid * * @param {color} $disabled-label-color * Field label text color when disabled * * @param {color} $label-background-color * Field label background-color * * @param {color} $focused-label-background-color * Field label background-color when focused * * @param {color} $invalid-label-background-color * Field label background-color when invalid * * @param {color} $disabled-label-background-color * Field label background-color when disabled * * @param {number/list} $label-padding * Field label padding * * @param {number/list} $label-padding-big * Field label padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string/number} $label-font-weight * Field label font-weight * * @param {number} $label-font-size * Field label font-size * * @param {number} $label-font-size-big * Field label font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $label-line-height * Field label line-height * * @param {number} $label-line-height-big * Field label line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $label-font-family * Field label font-family * * @param {number} $label-width * Field label width * * @param {number} $label-width-big * Field label width in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $label-min-width * Field label min-width * * @param {number} $label-min-width-big * Field label min-width in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $disabled-opacity * Opacity of form fields when disabled * * @param {string/number} $required-indicator-font-weight * Field {@link #required} indicator font-weight * * @param {number} $required-indicator-font-size * Field {@link #required} indicator font-size * * @param {number} $required-indicator-line-height * Field {@link #required} indicator line-height * * @param {string} $required-indicator-font-family * Field {@link #required} indicator font-family * * @param {number} $required-indicator-margin * Field {@link #required} indicator margin * * @param {number} $required-indicator-margin-big * Field {@link #required} indicator margin in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $error-icon-side * Field error icon when {#errorTarget} is `'side'` * * @param {color} $error-icon-side-color * Field error icon color when {#errorTarget} is `'side'` * * @param {number} $error-icon-side-size * Field error icon size when {#errorTarget} is `'side'` * * @param {number} $error-icon-side-size-big * Field error icon size when {#errorTarget} is `'side'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $error-icon-side-font-size * Field error icon font-size when {#errorTarget} is `'side'` * * @param {number} $error-icon-side-font-size-big * Field error icon font-size when {#errorTarget} is `'side'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $error-icon-side-margin * Field error icon margin when {#errorTarget} is `'side'` * * @param {number/list} $error-icon-side-margin-big * Field error icon margin when {#errorTarget} is `'side'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $error-icon-under * Field error icon when {#errorTarget} is `'under'` * * @param {color} $error-icon-under-color * Field error icon color when {#errorTarget} is `'under'` * * @param {number} $error-icon-under-size * Field error icon size when {#errorTarget} is `'under'` * * @param {number} $error-icon-under-size-big * Field error icon size when {#errorTarget} is `'under'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $error-icon-under-font-size * Field error icon font-size when {#errorTarget} is `'under'` * * @param {number} $error-icon-under-font-size-big * Field error icon font-size when {#errorTarget} is `'under'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $error-icon-under-margin * Field error icon margin when {#errorTarget} is `'under'` * * @param {number/list} $error-icon-under-margin-big * Field error icon margin when {#errorTarget} is `'under'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $error-under-margin * Field error element margin when {#errorTarget} is `'under'` * * @param {number/list} $error-under-margin-big * Field error element margin when {#errorTarget} is `'under'` * in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $error-message-color * Field error message color * * @param {string/number} $error-message-font-weight * Field error message font-weight * * @param {number} $error-message-font-size * Field error message font-size * * @param {number} $error-message-font-size-big * Field error message font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $error-message-line-height * Field error message line-height * * @param {number} $error-message-line-height-big * Field error message line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $error-message-font-family * Field error message font-family */@mixin field-ui( $ui: null, $xtype: field, $background-color: null, $focused-background-color: null, $invalid-background-color: null, $disabled-background-color: null, $label-color: null, $focused-label-color: null, $invalid-label-color: null, $disabled-label-color: null, $label-background-color: null, $focused-label-background-color: null, $invalid-label-background-color: null, $disabled-label-background-color: null, $label-padding: null, $label-padding-big: null, $label-font-weight: null, $label-font-size: null, $label-font-size-big: null, $label-line-height: null, $label-line-height-big: null, $label-font-family: null, $label-width: null, $label-width-big: null, $label-min-width: null, $label-min-width-big: 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, $error-icon-side: null, $error-icon-side-color: null, $error-icon-side-size: null, $error-icon-side-size-big: null, $error-icon-side-font-size: null, $error-icon-side-font-size-big: null, $error-icon-side-margin: null, $error-icon-side-margin-big: null, $error-icon-under: null, $error-icon-under-color: null, $error-icon-under-size: null, $error-icon-under-size-big: null, $error-icon-under-font-size: null, $error-icon-under-font-size-big: null, $error-icon-under-margin: null, $error-icon-under-margin-big: null, $error-under-margin: null, $error-under-margin-big: null, $error-message-color: null, $error-message-font-weight: null, $error-message-font-size: null, $error-message-font-size-big: null, $error-message-line-height: null, $error-message-line-height-big: null, $error-message-font-family: null) { $ui-suffix: ui-suffix($ui); // This mixin must use child selectors and not descendant selectors to ensure it only // styles the field's own elements and not descendants of a containerfield .#{$prefix}#{$xtype}#{$ui-suffix} { background-color: $background-color; > .#{$prefix}label-el { color: $label-color; background-color: $label-background-color; padding: $label-padding; @include font($label-font-weight, $label-font-size, $label-line-height, $label-font-family); width: $label-width; min-width: $label-min-width; @if $enable-big { .#{$prefix}big & { padding: $label-padding-big; font-size: $label-font-size-big; line-height: $label-line-height-big; width: $label-width-big; min-width: $label-min-width-big; } } } &.#{$prefix}label-align-right { > .#{$prefix}label-el { padding: flip-horizontal($label-padding); @if $enable-big { .#{$prefix}big & { padding: flip-horizontal($label-padding-big); } } } } &.#{$prefix}focused { background-color: $focused-background-color; > .#{$prefix}label-el { color: $focused-label-color; background-color: $focused-label-background-color; } } &.#{$prefix}invalid { background-color: $invalid-background-color; > .#{$prefix}label-el { color: $invalid-label-color; background-color: $invalid-label-background-color; } } &.#{$prefix}disabled { background-color: $disabled-background-color; // apply opacity to the label and body-wrap separately so that sliderfield // can reset the body-wrap opacity since the slider component has its own. > .#{$prefix}label-el { opacity: $disabled-opacity; color: $disabled-label-color; background-color: $disabled-label-background-color; } > .#{$prefix}body-wrap-el { opacity: $disabled-opacity; } } &.#{$prefix}required > .#{$prefix}label-el:after { @include font($required-indicator-font-weight, $required-indicator-font-size, $required-indicator-line-height, $required-indicator-font-family); margin: $required-indicator-margin; @if $enable-big { .#{$prefix}big & { margin: $required-indicator-margin-big; } } } &.#{$prefix}error-target-side > * > * > .#{$prefix}error-icon-el { margin: $error-icon-side-margin; @if $enable-big { .#{$prefix}big & { margin: $error-icon-side-margin-big; } } @include icon( $icon: $error-icon-side, $color: $error-icon-side-color, $size: $error-icon-side-size, $size-big: $error-icon-side-size-big, $font-size: $error-icon-side-font-size, $font-size-big: $error-icon-side-font-size-big ); } &.#{$prefix}error-target-under { > * > * > .#{$prefix}error-icon-el { margin: $error-icon-under-margin; @if $enable-big { .#{$prefix}big & { margin: $error-icon-under-margin-big; } } @include icon( $icon: $error-icon-under, $color: $error-icon-under-color, $size: $error-icon-under-size, $size-big: $error-icon-under-size-big, $font-size: $error-icon-under-font-size, $font-size-big: $error-icon-under-font-size-big ); } > * > .#{$prefix}error-el { margin: $error-under-margin; @if $enable-big { .#{$prefix}big & { margin: $error-under-margin-big; } } } } > * > * > .#{$prefix}error-message-el { @include font( $error-message-font-weight, $error-message-font-size, $error-message-line-height, $error-message-font-family ); color: $error-message-color; @if $enable-big { .#{$prefix}big & { font-size: $error-message-font-size-big; line-height: $error-message-line-height-big; } } } }} // The following variables are not configurable per-UI /** * @var {number} * Vertical space in between form fields */$field-vertical-spacing: dynamic(8px); /** * @var {number} * Vertical space in between form fields in the {@link Global_CSS#$enable-big big} sizing scheme */$field-vertical-spacing-big: dynamic(8px);