/** * @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; } } } } }}