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