add extjs 6.0.1 sources

[extjs.git] / extjs / classic / theme-neutral / sass / src / form / FieldSet.scss

/**\r
 * Creates a visual theme for text fields.  Note this mixin only provides styling\r
 * For the form field body, The label and error are styled by\r
 * {@link Ext.form.Labelable#css_mixin-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-header-font-size=$fieldset-header-font-size]\r
 * The font-size of the FieldSet header\r
 *\r
 * @param {string} [$ui-header-font-weight=$fieldset-header-font-weight]\r
 * The font-weight of the FieldSet header\r
 *\r
 * @param {string} [$ui-header-font-family=$fieldset-header-font-family]\r
 * The font-family of the FieldSet header\r
 *\r
 * @param {number/string} [$ui-header-line-height=$fieldset-header-line-height]\r
 * The line-height of the FieldSet header\r
 *\r
 * @param {color} [$ui-header-color=$fieldset-header-color]\r
 * The text color of the FieldSet header\r
 *\r
 * @param {number} [$ui-border-width=$fieldset-border-width]\r
 * The border-width of the FieldSet\r
 *\r
 * @param {string} [$ui-border-style=$fieldset-border-style]\r
 * The border-style of the FieldSet\r
 *\r
 * @param {color} [$ui-border-color=$fieldset=border-color]\r
 * The border-color of the FieldSet\r
 *\r
 * @param {number} [$ui-border-radius=$fieldset=border-radius]\r
 * The border radius of FieldSet elements.\r
 *\r
 * @param {number/list} [$ui-padding=$fieldset-padding]\r
 * The FieldSet's padding\r
 *\r
 * @param {number/list} [$ui-margin=$fieldset-margin]\r
 * The FieldSet's margin\r
 *\r
 * @param {number/list} [$ui-header-padding=$fieldset-header-padding]\r
 * The padding to apply to the FieldSet's header\r
 *\r
 * @param {number} [$ui-collapse-tool-size=$fieldset-collapse-tool-size]\r
 * The size of the FieldSet's collapse tool\r
 *\r
 * @param {number/list} [$ui-collapse-tool-margin=$fieldset-collapse-tool-margin]\r
 * The margin to apply to the FieldSet's collapse tool\r
 *\r
 * @param {number/list} [$ui-collapse-tool-padding=$fieldset-collapse-tool-padding]\r
 * The padding to apply to the FieldSet's collapse tool\r
 *\r
 * @param {string} [$ui-collapse-tool-background-image=$fieldset-collapse-tool-background-image]\r
 * The background-image to use for the collapse tool. If 'none' the default tool\r
 * sprite will be used.  Defaults to 'none'.\r
 *\r
 * @param {number} [$ui-collapse-tool-opacity=$fieldset-collapse-tool-opacity]\r
 * The opacity of the FieldSet's collapse tool\r
 *\r
 * @param {number} [$ui-collapse-tool-opacity-over=$fieldset-collapse-tool-opacity-over]\r
 * The opacity of the FieldSet's collapse tool when hovered\r
 *\r
 * @param {number} [$ui-collapse-tool-opacity-pressed=$fieldset-collapse-tool-opacity-pressed]\r
 * The opacity of the FieldSet's collapse tool when pressed\r
 *\r
 * @param {color} [$ui-tool-glyph-color=$fieldset-tool-glyph-color]\r
 * The color to use for the collapse/expand tool icon when {@link Global_CSS#$enable-font-icons} is `true`.\r
 *\r
 * @param {string/list} [$ui-tool-expand-glyph=$fieldset-tool-expand-glyph]\r
 * Glyph for the "expand" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.\r
 *\r
 * @param {string/list} [$ui-tool-collapse-glyph=$fieldset-tool-collapse-glyph]\r
 * Glyph for the "collapse" tool icon when {@link Global_CSS#$enable-font-icons} is `true`.\r
 *\r
 * @param {number/list} [$ui-checkbox-margin=$fieldset-checkbox-margin]\r
 * The margin to apply to the FieldSet's checkbox (for FieldSets that use\r
 * {@link #checkboxToggle})\r
 *\r
 * @member Ext.form.FieldSet\r
 */\r
@mixin extjs-fieldset-ui(\r
    $ui: null,\r
    $ui-header-font-size: $fieldset-header-font-size,\r
    $ui-header-font-weight: $fieldset-header-font-weight,\r
    $ui-header-font-family: $fieldset-header-font-family,\r
    $ui-header-line-height: $fieldset-header-line-height,\r
    $ui-header-color: $fieldset-header-color,\r
    $ui-border-width: $fieldset-border-width,\r
    $ui-border-style: $fieldset-border-style,\r
    $ui-border-color: $fieldset-border-color,\r
    $ui-border-radius: $fieldset-border-radius,\r
    $ui-padding: $fieldset-padding,\r
    $ui-margin: $fieldset-margin,\r
    $ui-header-padding: $fieldset-header-padding,\r
    $ui-collapse-tool-size: $fieldset-collapse-tool-size,\r
    $ui-collapse-tool-margin: $fieldset-collapse-tool-margin,\r
    $ui-collapse-tool-padding: $fieldset-collapse-tool-padding,\r
    $ui-collapse-tool-background-image: $fieldset-collapse-tool-background-image,\r
    $ui-collapse-tool-opacity: $fieldset-collapse-tool-opacity,\r
    $ui-collapse-tool-opacity-over: $fieldset-collapse-tool-opacity-over,\r
    $ui-collapse-tool-opacity-pressed: $fieldset-collapse-tool-opacity-pressed,\r
    $ui-tool-glyph-color: $fieldset-tool-glyph-color,\r
    $ui-tool-expand-glyph: $fieldset-tool-expand-glyph,\r
    $ui-tool-collapse-glyph: $fieldset-tool-collapse-glyph,\r
    $ui-checkbox-margin: $fieldset-checkbox-margin,\r
    $ui-use-standard-tool-background-positions: $fieldset-use-standard-tool-background-positions\r
) {\r
    $ui-collapse-tool-background-position: 0 0;\r
    $ui-collapse-tool-background-position-over: 0 (-$ui-collapse-tool-size);\r
    $ui-collapse-tool-background-position-collapsed: (-$ui-collapse-tool-size) 0;\r
    $ui-collapse-tool-background-position-collapsed-over: (-$ui-collapse-tool-size) (-$ui-collapse-tool-size);\r
\r
    @if ($ui-use-standard-tool-background-positions) {\r
        $ui-collapse-tool-background-position: 0 ($ui-collapse-tool-size * -4);\r
        $ui-collapse-tool-background-position-over: (-$ui-collapse-tool-size) ($ui-collapse-tool-size * -4);\r
        $ui-collapse-tool-background-position-collapsed: 0 ($ui-collapse-tool-size * -5);\r
        $ui-collapse-tool-background-position-collapsed-over: (-$ui-collapse-tool-size) ($ui-collapse-tool-size * -5);\r
    }\r
\r
    .#{$prefix}fieldset-#{$ui} {\r
        border: $ui-border-width $ui-border-style $ui-border-color;\r
        padding: $ui-padding;\r
        margin: $ui-margin;\r
        @if $ui-border-radius != 0 {\r
            @include border-radius($ui-border-radius);\r
        }\r
    }\r
\r
    @if $include-ie {\r
        // Insane IE bug: Fieldset padding-top is rendered *outside* the border\r
        // So we transfer the padding-top to the body element.\r
        .#{$prefix}ie8 {\r
            .#{$prefix}fieldset-#{$ui} {\r
                padding-top: 0;\r
            }\r
            .#{$prefix}fieldset-body-#{$ui} {\r
                padding-top: top($ui-padding);\r
            }\r
        }\r
    }\r
\r
    .#{$prefix}fieldset-header-#{$ui} {\r
        padding: $ui-header-padding;\r
        line-height: $ui-header-line-height;\r
\r
        > .#{$prefix}fieldset-header-text {\r
            font: $ui-header-font-weight #{$ui-header-font-size}/#{$ui-header-line-height} $ui-header-font-family;\r
            color: $ui-header-color;\r
            padding: 1px 0;\r
        }\r
    }\r
\r
    .#{$prefix}fieldset-header-checkbox-#{$ui} {\r
        margin: $ui-checkbox-margin;\r
        @if $include-rtl {\r
            &.#{$prefix}rtl {\r
                margin: rtl($ui-checkbox-margin);\r
            }\r
        }\r
        line-height: $ui-header-line-height;\r
    }\r
\r
    .#{$prefix}fieldset-header-tool-#{$ui} {\r
        margin: $ui-collapse-tool-margin;\r
        @if $include-rtl {\r
            &.#{$prefix}rtl {\r
                margin: rtl($ui-collapse-tool-margin);\r
            }\r
        }\r
        padding: $ui-collapse-tool-padding;\r
\r
        > .#{$prefix}tool-img {\r
            @include opacity($ui-collapse-tool-opacity);\r
            height: $ui-collapse-tool-size;\r
            width: $ui-collapse-tool-size;\r
        }\r
\r
        @if $ui-collapse-tool-opacity-over != 1 or $ui-collapse-tool-opacity != 1 {\r
            &.#{$prefix}tool-over > .#{$prefix}tool-img {\r
                @include opacity($ui-collapse-tool-opacity-over);\r
            }\r
        }\r
\r
        @if $ui-collapse-tool-opacity-pressed != 1 or $ui-collapse-tool-opacity != 1 {\r
            &.#{$prefix}tool-pressed > .#{$prefix}tool-img {\r
                @include opacity($ui-collapse-tool-opacity-pressed);\r
            }\r
        }\r
\r
        @if $enable-font-icons and ($ui-tool-expand-glyph != null) {\r
            > .#{$prefix}tool-toggle {\r
                @include font-icon($ui-tool-expand-glyph);\r
                color: $ui-tool-glyph-color;\r
            }\r
        } @else {\r
            > .#{$prefix}tool-toggle {\r
                @if not is-null($ui-collapse-tool-background-image) {\r
                    background-image: theme-background-image($ui-collapse-tool-background-image);\r
                }\r
                background-position: $ui-collapse-tool-background-position;\r
            }\r
            @if not is-null($ui-collapse-tool-background-position-over) {\r
                &.#{$prefix}tool-over > .#{$prefix}tool-toggle {\r
                    background-position: $ui-collapse-tool-background-position-over;\r
                }\r
            }\r
        }\r
\r
        // TODO Come up with proper styling!\r
        &.#{$prefix}focus {\r
            outline: 1px solid red;\r
        }\r
    }\r
\r
    .#{$prefix}fieldset-#{$ui} {\r
        &.#{$prefix}fieldset-collapsed {\r
            @if $ui-border-radius != 0 {\r
                @include border-radius(0);\r
            }\r
            border-width: 1px 1px 0 1px;\r
            border-left-color: transparent;\r
            border-right-color: transparent;\r
\r
            @if $enable-font-icons and ($ui-tool-collapse-glyph != null) {\r
                .#{$prefix}tool-toggle {\r
                    @include font-icon($ui-tool-collapse-glyph);\r
                }\r
            } @else {\r
                .#{$prefix}tool-toggle {\r
                    background-position: $ui-collapse-tool-background-position-collapsed;\r
                }\r
                @if not is-null($ui-collapse-tool-background-position-collapsed-over) {\r
                    .#{$prefix}tool-over > .#{$prefix}tool-toggle {\r
                        background-position: $ui-collapse-tool-background-position-collapsed-over;\r
                    }\r
                }\r
            }\r
        }\r
    }\r
}\r
\r
@if $include-fieldset-default-ui {\r
    @include extjs-fieldset-ui(\r
        $ui: 'default'\r
    );\r
}