/** * Creates a visual theme for checkboxes and radio buttons. Note this mixin only provides * styling for the checkbox/radio button and its {@link #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} [$ui-field-height=$form-field-height] * The height of the field body that the checkbox must fit within. This does not set the * height of the field, only allows the checkbox to be centered inside the field body. * (The height of the field body is determined by {@link #extjs-label-ui}). * * @param {number} [$ui-checkbox-size=$form-checkbox-size] * The size of the checkbox * * @param {string} [$ui-checkbox-background-image=$form-checkbox-background-image] * The background-image of the checkbox * * @param {string/list} [$ui-checkbox-glyph=$form-checkbox-glyph] * The glyph for the checkbox when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-checkbox-checked-glyph=$form-checkbox-checked-glyph] * The glyph for the checkbox in "checked" state when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-checkbox-glyph-color=$form-checkbox-glyph-color] * The color of the checkbox when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-checkbox-glyph-focus-color=$form-checkbox-glyph-focus-color] * The color of the checkbox in "focused" state when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string} [$ui-radio-background-image=$form-radio-background-image] * The background-image of the radio button * * @param {string/list} [$ui-radio-glyph=$form-radio-glyph] * The glyph for the radio button when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {string/list} [$ui-radio-checked-glyph=$form-radio-checked-glyph] * The glyph for the radio button in "checked" state when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-radio-glyph-color=$form-radio-glyph-color] * The color of the radio button when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-radio-glyph-focus-color=$form-radio-glyph-focus-color] * The color of the radio button in "focused" state when {@link Global_CSS#$enable-font-icons} is `true`. * * @param {color} [$ui-label-color=$form-checkbox-label-color] * The color of the checkbox's {@link #boxLabel} * * @param {string} [$ui-label-font-weight=$form-checkbox-label-font-weight] * The font-weight of the checkbox's {@link #boxLabel} * * @param {string} [$ui-label-font-size=$form-checkbox-label-font-size] * The font-size of the checkbox's {@link #boxLabel} * * @param {string} [$ui-label-font-family=$form-checkbox-label-font-family] * The font-family of the checkbox's {@link #boxLabel} * * @param {string} [$ui-label-line-height=$form-checkbox-label-line-height] * The line-height of the checkbox's {@link #boxLabel} * * @param {number} [$ui-label-spacing=$form-checkbox-label-spacing] * The space between the boxLabel and the checkbox. * * @member Ext.form.field.Checkbox */@mixin extjs-checkbox-ui( $ui: null, $ui-field-height: $form-field-height, $ui-checkbox-size: $form-checkbox-size, $ui-checkbox-background-image: $form-checkbox-background-image, $ui-checkbox-glyph: $form-checkbox-glyph, $ui-checkbox-checked-glyph: $form-checkbox-checked-glyph, $ui-checkbox-glyph-color: $form-checkbox-glyph-color, $ui-checkbox-glyph-focus-color: $form-checkbox-glyph-focus-color, $ui-radio-background-image: $form-radio-background-image, $ui-radio-glyph: $form-radio-glyph, $ui-radio-checked-glyph: $form-radio-checked-glyph, $ui-radio-glyph-color: $form-radio-glyph-color, $ui-radio-glyph-focus-color: $form-radio-glyph-focus-color, $ui-label-color: $form-checkbox-label-color, $ui-label-font-weight: $form-checkbox-label-font-weight, $ui-label-font-size: $form-checkbox-label-font-size, $ui-label-font-family: $form-checkbox-label-font-family, $ui-label-line-height: $form-checkbox-label-line-height, $ui-label-spacing: $form-checkbox-label-spacing ) { .#{$prefix}form-cb-wrap-#{$ui} { height: $ui-field-height; // The checkbox field's body element must be at least the width of the checkbox. // This min-width prevents the width from collapsing to 0 when there is no boxLabel // since the checkbox-containing element itself is absolutely positioned. // See EXTJS-18430 min-width: $ui-checkbox-size; } .#{$prefix}form-cb-#{$ui} { // vertically center the checkbox margin-top: round(($ui-field-height - $ui-checkbox-size) / 2); } .#{$prefix}form-checkbox-#{$ui}, .#{$prefix}form-radio-#{$ui} { width: $ui-checkbox-size; height: $ui-checkbox-size; } .#{$prefix}form-radio-#{$ui} { @if $enable-font-icons and ($ui-radio-glyph != null) { @include font-icon($ui-radio-glyph); color: $ui-radio-glyph-color; .#{$prefix}form-cb-checked & { @include font-icon($ui-radio-checked-glyph); } } @else { background: theme-background-image($ui-radio-background-image) no-repeat; .#{$prefix}form-cb-checked & { background-position: 0 (0 - $ui-checkbox-size); } } } .#{$prefix}form-checkbox-#{$ui} { @if $enable-font-icons and ($ui-checkbox-glyph != null) { @include font-icon($ui-checkbox-glyph); color: $ui-checkbox-glyph-color; .#{$prefix}form-cb-checked & { @include font-icon($ui-checkbox-checked-glyph); } } @else { background: theme-background-image($ui-checkbox-background-image) no-repeat; .#{$prefix}form-cb-checked & { background-position: 0 (0 - $ui-checkbox-size); } } } .#{$prefix}keyboard-mode { .#{$prefix}form-checkbox-focus { &.#{$prefix}form-radio-#{$ui} { @if $enable-font-icons and ($ui-radio-glyph != null) { color: $ui-radio-glyph-focus-color; } @else { background-position: (0 - $ui-checkbox-size) 0; } } &.#{$prefix}form-checkbox-#{$ui} { @if $enable-font-icons and ($ui-checkbox-glyph != null) { color: $ui-checkbox-glyph-focus-color; } @else { background-position: (0 - $ui-checkbox-size) 0; } } } .#{$prefix}form-cb-checked { .#{$prefix}form-checkbox-focus.#{$prefix}form-radio-#{$ui} { @if $enable-font-icons and ($ui-radio-glyph != null) { color: $ui-radio-glyph-focus-color; } @else { background-position: (0 - $ui-checkbox-size) (0 - $ui-checkbox-size); } } .#{$prefix}form-checkbox-focus.#{$prefix}form-checkbox-#{$ui} { @if $enable-font-icons and ($ui-checkbox-glyph != null) { color: $ui-checkbox-glyph-focus-color; } @else { background-position: (0 - $ui-checkbox-size) (0 - $ui-checkbox-size); } } } } .#{$prefix}form-cb-label-#{$ui} { margin-top: round(($ui-field-height - $ui-label-line-height) / 2); font: $ui-label-font-weight #{$ui-label-font-size}/#{$ui-label-line-height} $ui-label-font-family; color: $ui-label-color; &.#{$prefix}form-cb-label-before { padding-right: $ui-label-spacing + $ui-checkbox-size; @if $include-rtl { &.#{$prefix}rtl { padding-right: 0; padding-left: $ui-label-spacing + $ui-checkbox-size; } } } &.#{$prefix}form-cb-label-after { padding-left: $ui-label-spacing + $ui-checkbox-size; } @if $include-rtl { &.#{$prefix}rtl { padding-left: 0; padding-right: $ui-label-spacing + $ui-checkbox-size; } } } // Checkbox field or subclass inside cell - calculate top/bottom padding to keep row height correct @if $include-ext-grid-column-widget or $include-ext-grid-plugin-editing { .#{$prefix}checkbox-#{$ui}-cell > .#{$prefix}grid-cell-inner { padding-top: max(ceil(($grid-row-height - $ui-field-height) / 2), 0); padding-bottom: max(floor(($grid-row-height - $ui-field-height) / 2), 0); } }}