/** * @class Ext.dataview.ItemHeader */ //# fashion replaces $list-group-header-color /** * @var {color} * List ItemHeader color */$itemheader-color: dynamic($highlight-color); /** * @var {color} * List ItemHeader color when {@link Ext.dataview.List#pinHeaders pinned} */$itemheader-pinned-color: dynamic(null); //# fashion replaces $list-group-header-background-color /** * @var {color} * List ItemHeader background-color */$itemheader-background-color: dynamic($neutral-light-color); /** * @var {color} * List ItemHeader background-color when {@link Ext.dataview.List#pinHeaders pinned} */$itemheader-pinned-background-color: dynamic(null); /** * @var {number/list} * List ItemHeader border-width */$itemheader-border-width: dynamic($listitem-border-width); /** * @var {string} * List ItemHeader border-style */$itemheader-border-style: dynamic($listitem-border-style); //# fashion replaces $list-group-header-border-color /** * @var {color} * List ItemHeader border-color */$itemheader-border-color: dynamic($neutral-medium-dark-color); /** * @var {color} * List ItemHeader border-color when {@link Ext.dataview.List#pinHeaders pinned} */$itemheader-pinned-border-color: dynamic(null); /** * @var {number} * List ItemHeader outline-width when focused */$itemheader-focused-outline-width: dynamic($listitem-focused-outline-width); /** * @var {string} * List ItemHeader outline-style when focused */$itemheader-focused-outline-style: dynamic($listitem-focused-outline-style); /** * @var {color} * List ItemHeader outline-color when focused */$itemheader-focused-outline-color: dynamic($listitem-focused-outline-color); /** * @var {number} * List ItemHeader outline-offset when focused */$itemheader-focused-outline-offset: dynamic($listitem-focused-outline-offset); /** * @var {list} * List ItemHeader box-shadow */$itemheader-box-shadow: dynamic(null); /** * @var {list} * List ItemHeader box-shadow when {@link Ext.dataview.List#pinHeaders pinned} */$itemheader-pinned-box-shadow: dynamic($listitem-pinned-box-shadow); /** * @var {list} * List ItemHeader box-shadow when {@link Ext.dataview.List#pinFooters pinned} to the bottom */$itemheader-pinned-bottom-box-shadow: dynamic($listitem-pinned-bottom-box-shadow); //# fashion replaces $list-group-header-font-weight /** * @var {string/number} * List ItemHeader font-weight */$itemheader-font-weight: dynamic($font-weight-bold); //# fashion replaces $list-group-header-font-size /** * @var {number} * List ItemHeader font-size */$itemheader-font-size: dynamic($listitem-font-size); //# fashion replaces $list-group-header-font-size-big /** * @var {number} * List ItemHeader font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$itemheader-font-size-big: dynamic($listitem-font-size-big); //# fashion replaces $list-group-header-line-height /** * @var {number} * List ItemHeader line-height */$itemheader-line-height: dynamic($listitem-line-height); //# fashion replaces $list-group-header-line-height-big /** * @var {number} * List ItemHeader line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$itemheader-line-height-big: dynamic($listitem-line-height-big); //# fashion replaces $list-group-header-font-family /** * @var {string} * List ItemHeader font-family */$itemheader-font-family: dynamic($listitem-font-family); //# fashion replaces $list-group-header-padding /** * @var {number/list} * List ItemHeader padding */$itemheader-padding: dynamic($listitem-padding); //# fashion replaces $list-group-header-padding-big /** * @var {number/list} * List ItemHeader padding in the {@link Global_CSS#$enable-big big} sizing scheme */$itemheader-padding-big: dynamic($listitem-padding-big); /** * Creates a visual theme for a List ItemHeader. * * @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=itemheader] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $color * List ItemHeader color * * @param {color} $pinned-color * List ItemHeader color when {@link Ext.dataview.List#pinHeaders pinned} * * @param {color} $background-color * List ItemHeader background-color * * @param {color} $pinned-background-color * List ItemHeader background-color when {@link Ext.dataview.List#pinHeaders pinned} * * @param {number/list} $border-width * List ItemHeader border-width * * @param {string} $border-style * List ItemHeader border-style * * @param {color} $border-color * List ItemHeader border-color * * @param {color} $pinned-border-color * List ItemHeader border-color when {@link Ext.dataview.List#pinHeaders pinned} * * @param {number} $focused-outline-width * List ItemHeader outline-width when focused * * @param {string} $focused-outline-style * List ItemHeader outline-style when focused * * @param {color} $focused-outline-color * List ItemHeader outline-color when focused * * @param {number} $focused-outline-offset * List ItemHeader outline-offset when focused * * @param {list} $box-shadow * List ItemHeader box-shadow * * @param {list} $pinned-box-shadow * List ItemHeader box-shadow when {@link Ext.dataview.List#pinHeaders pinned} * * @param {list} $pinned-bottom-box-shadow * List ItemHeader box-shadow when {@link Ext.dataview.List#pinFooters pinned} to the bottom * * @param {string/number} $font-weight * List ItemHeader font-weight * * @param {number} $font-size * List ItemHeader font-size * * @param {number} $font-size-big * List ItemHeader font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $line-height * List ItemHeader line-height * * @param {number} $line-height-big * List ItemHeader line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * List ItemHeader font-family * * @param {number/list} $padding * List ItemHeader padding * * @param {number/list} $padding-big * List ItemHeader padding in the {@link Global_CSS#$enable-big big} sizing scheme */@mixin itemheader-ui( $ui: null, $xtype: itemheader, $color: null, $pinned-color: null, $background-color: null, $pinned-background-color: null, $border-width: null, $border-style: null, $border-color: null, $pinned-border-color: null, $focused-outline-width: null, $focused-outline-style: null, $focused-outline-color: null, $focused-outline-offset: null, $box-shadow: null, $pinned-box-shadow: null, $pinned-bottom-box-shadow: null, $font-weight: null, $font-size: null, $font-size-big: null, $line-height: null, $line-height-big: null, $font-family: null, $padding: null, $padding-big: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { color: $color; background-color: $background-color; @include border($border-width, $border-style, $border-color); @include font($font-weight, $font-size, $line-height, $font-family); box-shadow: $box-shadow; margin-bottom: -(bottom($border-width)); + .#{$prefix}scrolldock-end { margin-top: bottom($border-width) } @if $enable-big { .#{$prefix}big & { font-size: $font-size-big; line-height: $line-height-big; } } &.#{$prefix}pinned { color: $pinned-color; background-color: $pinned-background-color; border-color: $pinned-border-color; box-shadow: $pinned-box-shadow; } &.#{$prefix}pinned-bottom { box-shadow: $pinned-bottom-box-shadow; } &.#{$prefix}focused { .#{$prefix}keyboard-mode & { @include outline( $width: $focused-outline-width, $style: $focused-outline-style, $color: $focused-outline-color, $offset: $focused-outline-offset, $border-width: $border-width ); } } } @include toolable-ui( $ui: $ui, $xtype: $xtype, $padding: $padding, $padding-big: $padding-big );}