add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-neutral / sass / var / form / field / Checkbox.scss

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