/** * @class Ext.field.Checkbox */ /** * @var {number} * Checkbox Field checkbox size */$checkboxfield-checkbox-size: dynamic(16px); /** * @var {number} * Checkbox Field checkbox size in the {@link Global_CSS#$enable-big big} sizing scheme */$checkboxfield-checkbox-size-big: dynamic(20px); /** * @var {number} * Checkbox Field checkbox font size */$checkboxfield-checkbox-font-size: dynamic(null); /** * @var {number} * CheckboxField checkbox font size in the {@link Global_CSS#$enable-big big} sizing scheme */$checkboxfield-checkbox-font-size-big: dynamic(null); /** * @var {number} * CheckboxField checkbox margin */$checkboxfield-checkbox-margin: dynamic(null); /** * @var {number} * CheckboxField checkbox margin in the {@link Global_CSS#$enable-big big} sizing scheme */$checkboxfield-checkbox-margin-big: dynamic(null); /** * @var {string/list} * Checkbox Field checkbox icon */$checkboxfield-checkbox-icon: dynamic($fa-var-square); /** * @var {string/list} * Checkbox Field checkbox icon when checked */$checkboxfield-checked-checkbox-icon: dynamic($fa-var-check-square); /** * @var {string/list} * Checkbox Field checkbox icon when its in intermediate state */$checkboxfield-intermediate-checkbox-icon: dynamic($fa-var-minus-square); /** * @var {color} * Checkbox Field checkbox color */$checkboxfield-checkbox-color: dynamic($neutral-dark-color); /** * @var {color} * Checkbox Field checkbox color when checked */$checkboxfield-checked-checkbox-color: dynamic(null); /** * @var {color} * Checkbox Field checkbox color when disabled */$checkboxfield-disabled-checkbox-color: dynamic(null); /** * @var {color} * Checkbox Field checkbox color when focused */$checkboxfield-focused-checkbox-color: dynamic(mix(#fff, $base-color, 15%)); /** * @var {color} * Checkbox Field {@link #boxLabel} text color */$checkboxfield-box-label-color: dynamic($field-box-label-color); /** * @var {string/number} * Checkbox Field {@link #boxLabel} font-weight */$checkboxfield-box-label-font-weight: dynamic($field-box-label-font-weight); /** * @var {number} * Checkbox Field {@link #boxLabel} font-size */$checkboxfield-box-label-font-size: dynamic($field-box-label-font-size); /** * @var {number} * Checkbox Field {@link #boxLabel} font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$checkboxfield-box-label-font-size-big: dynamic($field-box-label-font-size-big); /** * @var {number} * Checkbox Field {@link #boxLabel} line-height */$checkboxfield-box-label-line-height: dynamic($field-box-label-line-height); /** * @var {number} * Checkbox Field {@link #boxLabel} line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$checkboxfield-box-label-line-height-big: dynamic($field-box-label-line-height-big); /** * @var {string} * Checkbox Field {@link #boxLabel} font-family */$checkboxfield-box-label-font-family: dynamic($field-box-label-font-family); /** * @var {string} * Checkbox Field box font-family */ $checkboxfield-box-font-family: dynamic('Font Awesome 5 Free Regular'); /** * @var {number/list} * Checkbox Field {@link #boxLabel} padding * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before` */$checkboxfield-box-label-padding: dynamic($field-box-label-padding); /** * @var {number/list} * Checkbox Field {@link #boxLabel} padding in the {@link Global_CSS#$enable-big big} sizing scheme * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before` */$checkboxfield-box-label-padding-big: dynamic($field-box-label-padding-big); /** * Creates a visual theme for a Checkbox 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=checkboxfield] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {number} $checkbox-size * Checkbox Field checkbox size * * @param {number} $checkbox-size-big * Checkbox Field checkbox size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $checkbox-font-size * Checkbox Field checkbox font size * * @param {number} $checkbox-font-size-big * CheckboxField checkbox font size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $checkbox-margin * CheckboxField checkbox margin * * @param {number} $checkbox-margin-big * CheckboxField checkbox margin in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string/list} $checkbox-icon * Checkbox Field checkbox icon * * @param {string/list} $checked-checkbox-icon * Checkbox Field checkbox icon when checked * * @param {color} $checkbox-color * Checkbox Field checkbox color * * @param {color} $checked-checkbox-color * Checkbox Field checkbox color when checked * * @param {color} $disabled-checkbox-color * Checkbox Field checkbox color when disabled * * @param {color} $focused-checkbox-color * Checkbox Field checkbox color when focused * * @param {color} $box-label-color * Checkbox Field {@link #boxLabel} text color * * @param {string/number} $box-label-font-weight * Checkbox Field {@link #boxLabel} font-weight * * @param {number} $box-label-font-size * Checkbox Field {@link #boxLabel} font-size * * @param {number} $box-label-font-size-big * Checkbox Field {@link #boxLabel} font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $box-label-line-height * Checkbox Field {@link #boxLabel} line-height * * @param {number} $box-label-line-height-big * Checkbox Field {@link #boxLabel} line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $box-label-font-family * Checkbox Field {@link #boxLabel} font-family * * @param {number/list} $box-label-padding * Checkbox Field {@link #boxLabel} padding * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before` * * @param {number/list} $box-label-padding-big * Checkbox Field {@link #boxLabel} padding in the {@link Global_CSS#$enable-big big} sizing scheme * The padding box will be flipped horizontally when {@link #boxLabelAlign} is `before` */@mixin checkboxfield-ui( $ui: null, $xtype: checkboxfield, $checkbox-size: null, $checkbox-size-big: null, $checkbox-font-size: null, $checkbox-font-size-big: null, $checkbox-margin: null, $checkbox-margin-big: null, $checkbox-icon: null, $checked-checkbox-icon: null, $checkbox-color: null, $checked-checkbox-color: null, $disabled-checkbox-color: null, $focused-checkbox-color: null, $box-label-color: null, $box-label-font-weight: null, $box-label-font-size: null, $box-label-font-size-big: null, $box-label-line-height: null, $box-label-line-height-big: null, $box-label-font-family: null, $box-label-padding: null, $box-label-padding-big: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { .#{$prefix}icon-el { margin: $checkbox-margin; font-family: $checkboxfield-box-font-family; @if $enable-big { .#{$prefix}big & { margin: $checkbox-margin-big; } } @include icon( $icon: $checkbox-icon, $color: $checkbox-color, $size: $checkbox-size, $size-big: $checkbox-size-big, $font-size: $checkbox-font-size, $font-size-big: $checkbox-font-size-big ); } &.#{$prefix}checked .#{$prefix}icon-el { @include icon($checked-checkbox-icon); color: $checked-checkbox-color; font-family: $checkboxfield-box-font-family; } &.#{$prefix}focused .#{$prefix}icon-el { .#{$prefix}keyboard-mode & { color: $focused-checkbox-color; } } &.#{$prefix}disabled .#{$prefix}icon-el { color: $disabled-checkbox-color; } @include box-label-ui( $box-label-color: $box-label-color, $box-label-font-weight: $box-label-font-weight, $box-label-font-size: $box-label-font-size, $box-label-font-size-big: $box-label-font-size-big, $box-label-line-height: $box-label-line-height, $box-label-line-height-big: $box-label-line-height-big, $box-label-font-family: $box-label-font-family, $box-label-padding: $box-label-padding, $box-label-padding-big: $box-label-padding-big ); }}