/** * Creates a visual theme for "labelable" form items. Provides visual styling for the * Label and error message that can be shared between many types of form fields. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {color} [$ui-font-color=$form-label-font-color] * The text color the label * * @param {string} [$ui-font-weight=$form-label-font-weight] * The font-weight of the label * * @param {number} [$ui-font-size=$form-label-font-size] * The font-size of the label * * @param {string} [$ui-font-family=$form-label-font-family] * The font-family the label * * @param {number} [$ui-height=$form-field-height] * The height of the label. This should be the same height as the height of fields that * this label ui will be used with. This does not actually set the height of the label * but is used to ensure that the label is centered within the given height. * * @param {number} [$ui-line-height=$form-label-line-height] * The line-height of the label * * @param {number} [$ui-horizontal-spacing=$form-label-horizontal-spacing] * Horizontal space between the label and the field body when the label is left-aligned. * * @param {number} [$ui-vertical-spacing=$form-label-vertical-spacing] * Vertical space between the label and the field body when the label is top-aligned. * * @param {number} [$ui-error-icon-background-image=$form-error-icon-background-image] * The background-image of the error icon * * @param {number} [$ui-error-icon-width=$form-error-icon-width] * The width of the error icon * * @param {number} [$ui-error-icon-height=$form-error-icon-height] * The height of the error icon * * @param {number/list} [$ui-error-icon-side-margin=$form-error-icon-side-margin] * Margin for error icons when aligned to the side of the field * * @param {number} [$ui-error-under-icon-spacing=$form-error-under-icon-spacing] * The space between the icon and the message for errors that display under the field * * @param {number/list} [$ui-error-under-padding=$form-error-under-padding] * The padding on errors that display under the form field * * @param {color} [$ui-error-msg-color=$form-error-msg-color] * The text color of form error messages * * @param {string} [$ui-error-msg-font-weight=$form-error-msg-font-weight] * The font-weight of form error messages * * @param {number} [$ui-error-msg-font-size=$form-error-msg-font-size] * The font-size of form error messages * * @param {string} [$ui-error-msg-font-family=$form-error-msg-font-family] * The font-family of form error messages * * @param {number} [$ui-error-msg-line-height=$form-error-msg-line-height] * The line-height of form error messages * * @param {number} [$ui-disabled-opacity=$form-field-disabled-opacity] * Opacity of disabled form fields * * @member Ext.form.Labelable */@mixin extjs-label-ui( $ui: null, $ui-font-color: $form-label-font-color, $ui-font-weight: $form-label-font-weight, $ui-font-size: $form-label-font-size, $ui-font-family: $form-label-font-family, $ui-height: $form-field-height, $ui-line-height: $form-label-line-height, $ui-horizontal-spacing: $form-label-horizontal-spacing, $ui-vertical-spacing: $form-label-vertical-spacing, $ui-error-icon-background-image: $form-error-icon-background-image, $ui-error-icon-width: $form-error-icon-width, $ui-error-icon-height: $form-error-icon-height, $ui-error-icon-side-margin: $form-error-icon-side-margin, $ui-error-under-icon-spacing: $form-error-under-icon-spacing, $ui-error-under-padding: $form-error-under-padding, $ui-error-msg-color: $form-error-msg-color, $ui-error-msg-font-weight: $form-error-msg-font-weight, $ui-error-msg-font-size: $form-error-msg-font-size, $ui-error-msg-font-family: $form-error-msg-font-family, $ui-error-msg-line-height: $form-error-msg-line-height, $ui-disabled-opacity: $form-field-disabled-opacity ) { $ui-error-wrap-width: $ui-error-icon-width + horizontal($ui-error-icon-side-margin); .#{$prefix}form-item-label-#{$ui} { $padding-top: round(($ui-height - $ui-line-height) / 2); color: $ui-font-color; font: $ui-font-weight #{$ui-font-size}/#{$ui-line-height} $ui-font-family; min-height: $ui-height; padding-top: $padding-top; padding-right: $ui-horizontal-spacing; @if $include-rtl { &.#{$prefix}rtl { padding-left: $ui-horizontal-spacing; padding-right: 0; } } @if $include-ie { .#{$prefix}ie8 & { // min-height triggers content-box sizing on IE8, so subtract padding min-height: $ui-height - $padding-top; } } &.#{$prefix}form-item-label-top { height: 1px; > .#{$prefix}form-item-label-inner { padding-top: round(($ui-height - $ui-line-height) / 2); padding-bottom: $ui-vertical-spacing; } } &.#{$prefix}form-item-label-top-side-error:after { width: $ui-error-wrap-width; } } .#{$prefix}form-item-body-#{$ui} { min-height: $ui-height; } .#{$prefix}form-invalid-icon-#{$ui} { width: $ui-error-icon-width; height: $ui-error-icon-height; margin: $ui-error-icon-side-margin; background: theme-background-image($ui-error-icon-background-image) no-repeat; } .#{$prefix}form-invalid-under-#{$ui} { padding: top($ui-error-under-padding) right($ui-error-under-padding) bottom($ui-error-under-padding) (left($ui-error-under-padding) + $ui-error-icon-width + $ui-error-under-icon-spacing); color: $ui-error-msg-color; font: $ui-error-msg-font-weight #{$ui-error-msg-font-size}/#{$ui-error-msg-line-height} $ui-error-msg-font-family; background: no-repeat left($ui-error-under-padding) top($ui-error-under-padding); background-image: theme-background-image($ui-error-icon-background-image); } .#{$prefix}form-error-wrap-#{$ui}.#{$prefix}form-error-wrap-side { width: $ui-error-wrap-width; } @if $ui-disabled-opacity != 1 { .#{$prefix}form-item-#{$ui}.#{$prefix}item-disabled { @include opacity($ui-disabled-opacity); } }} @if $include-label-default-ui { @include extjs-label-ui( $ui: 'default' );} @if $include-label-toolbar-ui { @include extjs-label-ui( $ui: 'toolbar', $ui-font-color: $form-toolbar-label-font-color, $ui-font-weight: $form-toolbar-label-font-weight, $ui-font-size: $form-toolbar-label-font-size, $ui-font-family: $form-toolbar-label-font-family, $ui-height: $form-toolbar-field-height, $ui-line-height: $form-toolbar-label-line-height, $ui-horizontal-spacing: $form-toolbar-label-horizontal-spacing, $ui-vertical-spacing: $form-toolbar-label-vertical-spacing, $ui-error-icon-background-image: $form-toolbar-error-icon-background-image, $ui-error-icon-width: $form-toolbar-error-icon-width, $ui-error-icon-height: $form-toolbar-error-icon-height, $ui-error-icon-side-margin: $form-toolbar-error-icon-side-margin, $ui-error-under-icon-spacing: $form-toolbar-error-under-icon-spacing, $ui-error-under-padding: $form-toolbar-error-under-padding, $ui-error-msg-color: $form-toolbar-error-msg-color, $ui-error-msg-font-weight: $form-toolbar-error-msg-font-weight, $ui-error-msg-font-size: $form-toolbar-error-msg-font-size, $ui-error-msg-font-family: $form-toolbar-error-msg-font-family, $ui-error-msg-line-height: $form-toolbar-error-msg-line-height, $ui-disabled-opacity: $form-toolbar-field-disabled-opacity );} .#{$prefix}autocontainer-form-item,.#{$prefix}anchor-form-item,.#{$prefix}vbox-form-item,.#{$prefix}table-form-item { margin-bottom: $form-item-margin-bottom;}