/** * @class Ext.form.CheckboxGroup */ /** * @var {number/list} * The padding of the CheckboxGroup body element */$form-checkboxgroup-body-padding: dynamic(0 4px); /** * @var {color} * The border color of the CheckboxGroup body element when in an invalid state. */$form-checkboxgroup-body-invalid-border-color: dynamic($form-field-invalid-border-color); /** * @var {string} * The border style of the CheckboxGroup body element when in an invalid state. */$form-checkboxgroup-body-invalid-border-style: dynamic(solid); /** * @var {number} * The border width of the CheckboxGroup body element when in an invalid state. */$form-checkboxgroup-body-invalid-border-width: dynamic(1px); /** * @var {string} * The background image of the CheckboxGroup body element when in an invalid state. */$form-checkboxgroup-body-invalid-background-image: dynamic($form-field-invalid-background-image); /** * @var {string} * The background-repeat of the CheckboxGroup body element when in an invalid state. */$form-checkboxgroup-body-invalid-background-repeat: dynamic($form-field-invalid-background-repeat); /** * @var {string} * The background-position of the CheckboxGroup body element when in an invalid state. */$form-checkboxgroup-body-invalid-background-position: dynamic($form-field-invalid-background-position); /** * @var {boolean} * True to include the "default" checkboxgroup UI */$include-checkboxgroup-default-ui: dynamic($include-field-default-ui); /** * Creates a visual theme for a CheckboxGroup buttons. Note this mixin only provides * styling for the CheckboxGroup body and its {@link Ext.form.field.Checkbox#boxLabel}, The {@link #fieldLabel} * and error icon/message are styled by {@link #extjs-label-ui}. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {number/list} [$ui-body-padding=$form-checkboxgroup-body-padding] * The padding of the CheckboxGroup body element * * @param {color} [$ui-body-invalid-border-color=$form-checkboxgroup-body-invalid-border-color] * The border color of the CheckboxGroup body element when in an invalid state. * * @param {string} [$ui-body-invalid-border-style=$form-checkboxgroup-body-invalid-border-style] * The border style of the CheckboxGroup body element when in an invalid state. * * @param {number} [$ui-body-invalid-border-width=$form-checkboxgroup-body-invalid-border-width] * The border width of the CheckboxGroup body element when in an invalid state. * * @param {string} [$ui-body-invalid-background-image=$form-checkboxgroup-body-invalid-background-image] * The background image of the CheckboxGroup body element when in an invalid state. * * @param {string} [$ui-body-invalid-background-repeat=$form-checkboxgroup-body-invalid-background-repeat] * The background-repeat value of the CheckboxGroup body element when in an invalid state. * * @param {string} [$ui-body-invalid-background-position=$form-checkboxgroup-body-invalid-background-position] * The background-position of the CheckboxGroup body element when in an invalid state. * * @member Ext.form.CheckboxGroup */@mixin extjs-checkboxgroup-ui( $ui: null, $ui-body-padding: $form-checkboxgroup-body-padding, $ui-body-invalid-border-color: $form-checkboxgroup-body-invalid-border-color, $ui-body-invalid-border-style: $form-checkboxgroup-body-invalid-border-style, $ui-body-invalid-border-width: $form-checkboxgroup-body-invalid-border-width, $ui-body-invalid-background-image: $form-checkboxgroup-body-invalid-background-image, $ui-body-invalid-background-repeat: $form-checkboxgroup-body-invalid-background-repeat, $ui-body-invalid-background-position: $form-checkboxgroup-body-invalid-background-position ) { .#{$prefix}form-item-body-#{$ui}.#{$prefix}form-checkboxgroup-body { padding: $ui-body-padding; .#{$prefix}form-invalid & { @if $ui-body-invalid-border-width != 0 { border-width: $ui-body-invalid-border-width; border-style: $ui-body-invalid-border-style; border-color: $ui-body-invalid-border-color; } @if not is-null($ui-body-invalid-background-image) { background-image: theme-background-image($ui-body-invalid-background-image); background-repeat: $ui-body-invalid-background-repeat; background-position: $ui-body-invalid-background-position; } } }}