/** * @class Ext.dataview.ListItem */ // NOTE when adding or removing variables in this file - please remember to document them // over in SimpleListItem.scss as well //# fashion replaces $list-item-color /** * @var {color} * List item text color */$listitem-color: dynamic($color); /** * @var {color} * List item text color when hovered */$listitem-hovered-color: dynamic(null); /** * @var {color} * List item text color when pressed */$listitem-pressed-color: dynamic(null); /** * @var {color} * List item text color when selected */$listitem-selected-color: dynamic(null); //# fashion replaces $list-item-background-color /** * @var {color} * List item background-color */$listitem-background-color: dynamic($background-color); /** * @var {color} * background-color for {@link Ext.dataview.List#striped striped} list items */$listitem-alt-background-color: dynamic(darken($listitem-background-color, 2)); /** * @var {color} * List item background-color when hovered */$listitem-hovered-background-color: dynamic(mix(#fff, $base-light-color, 65%)); //# fashion replaces $list-item-pressed-background-color /** * @var {color} * List item background-color when pressed */$listitem-pressed-background-color: dynamic(null); //# fashion replaces $list-item-selected-background-color /** * @var {color} * List item background-color when selected */$listitem-selected-background-color: dynamic(mix(#fff, $base-light-color, 25%)); /** * @var {number} * List item border-width */$listitem-border-width: dynamic(1px); /** * @var {string} * List item border-style */$listitem-border-style: dynamic(solid); //# fashion replaces $list-item-border-color /** * @var {color} * List item border-color */$listitem-border-color: dynamic($neutral-highlight-color); /** * @var {color} * List item border-color when hovered */$listitem-hovered-border-color: dynamic($listitem-hovered-background-color); /** * @var {color} * List item border-color when pressed */$listitem-pressed-border-color: dynamic($listitem-pressed-background-color); /** * @var {color} * List item border-color when selected */$listitem-selected-border-color: dynamic($listitem-selected-background-color); //# fashion replaces $list-item-font-weight /** * @var {string/number} * List item font-weight */$listitem-font-weight: dynamic($font-weight-normal); //# fashion replaces $list-item-font-size /** * @var {number} * List item font-size */$listitem-font-size: dynamic(1rem); //# fashion replaces $list-item-font-size-big /** * @var {number} * List item font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-font-size-big: dynamic(null); //# fashion replaces $list-item-line-height /** * @var {number} * List item line-height */$listitem-line-height: dynamic(1.25em); //# fashion replaces $list-item-line-height-big /** * @var {number} * List item line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-line-height-big: dynamic(1.2em); //# fashion replaces $list-item-font-family /** * @var {string} * List item font-family */$listitem-font-family: dynamic($font-family); //# fashion replaces $list-item-padding /** * @var {number/list} * List item padding */$listitem-padding: dynamic(.308em .6em); //# fashion replaces $list-item-padding-big /** * @var {number/list} * List item padding in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-padding-big: dynamic(.467em 1em); /** * @var {color} * List item disclosure background-color */$listitem-disclosure-background-color: dynamic(null); /** * @var {color} * List item disclosure background-color when the list item is pressed */$listitem-pressed-disclosure-background-color: dynamic(null); /** * @var {color} * List item disclosure background-color when the disclosure is pressed */$listitem-disclosure-pressed-background-color: dynamic(null); /** * @var {number/list} * List item disclosure border radius */$listitem-disclosure-border-radius: dynamic(null); /** * @var {number/list} * List item disclosure border radius in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-disclosure-border-radius-big: dynamic($listitem-disclosure-border-radius); /** * @var {string} * List item disclosure icon */$listitem-disclosure-icon: dynamic($fa-var-arrow-circle-right); /** * @var {color} * List item disclosure icon color */$listitem-disclosure-icon-color: dynamic($neutral-dark-color); /** * @var {color} * List item disclosure icon color when the list item is pressed */$listitem-pressed-disclosure-icon-color: dynamic(null); /** * @var {color} * List item disclosure icon color when the disclosure is pressed */$listitem-disclosure-pressed-icon-color: dynamic(null); /** * @var {number} * List item disclosure icon size */$listitem-disclosure-icon-size: dynamic(1.23em); /** * @var {number} * List item disclosure icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-disclosure-icon-size-big: dynamic(2em); /** * @var {number} * List item disclosure icon font-size */$listitem-disclosure-icon-font-size: dynamic($listitem-disclosure-icon-size); /** * @var {number} * List item disclosure icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-disclosure-icon-font-size-big: dynamic($listitem-disclosure-icon-size-big); /** * @var {number/list} * List item disclosure margin */$listitem-disclosure-margin: dynamic(null 0.6em null null); /** * @var {number/list} * List item disclosure margin in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-disclosure-margin-big: dynamic(null 0.6em null 1em); /** * Creates a visual theme for a ListItem. * * @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=listitem] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $color * List item text color * * @param {color} $hovered-color * List item text color when hovered * * @param {color} $pressed-color * List item text color when pressed * * @param {color} $selected-color * List item text color when selected * * @param {color} $background-color * List item background-color * * @param {color} $alt-background-color * background-color for {@link Ext.dataview.List#striped striped} list items * * @param {color} $hovered-background-color * List item background-color when hovered * * @param {color} $pressed-background-color * List item background-color when pressed * * @param {color} $selected-background-color * List item background-color when selected * * @param {number} $border-width * List item border-width * * @param {string} $border-style * List item border-style * * @param {color} $border-color * List item border-color * * @param {color} $hovered-border-color * List item border-color when hovered * * @param {color} $pressed-border-color * List item border-color when pressed * * @param {color} $selected-border-color * List item border-color when selected * * @param {string/number} $font-weight * List item font-weight * * @param {number} $font-size * List item font-size * * @param {number} $font-size-big * List item font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $line-height * List item line-height * * @param {number} $line-height-big * List item line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * List item font-family * * @param {number/list} $padding * List item padding * * @param {number/list} $padding-big * List item padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $disclosure-background-color * List item disclosure background-color * * @param {color} $pressed-disclosure-background-color * List item disclosure background-color when the list item is pressed * * @param {color} $disclosure-pressed-background-color * List item disclosure background-color when the disclosure is pressed * * @param {number/list} $disclosure-border-radius * List item disclosure border radius * * @param {number/list} $disclosure-border-radius-big * List item disclosure border radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $disclosure-icon * List item disclosure icon * * @param {color} $disclosure-icon-color * List item disclosure icon color * * @param {color} $pressed-disclosure-icon-color * List item disclosure icon color when the list item is pressed * * @param {color} $disclosure-pressed-icon-color * List item disclosure icon color when the disclosure is pressed * * @param {number} $disclosure-icon-size * List item disclosure icon size * * @param {number} $disclosure-icon-size-big * List item disclosure icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $disclosure-icon-font-size * List item disclosure icon font-size * * @param {number} $disclosure-icon-font-size-big * List item disclosure icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $disclosure-margin * List item disclosure margin * * @param {number} $disclosure-margin-big * List item disclosure margin in the {@link Global_CSS#$enable-big big} sizing scheme */@mixin listitem-ui( $ui: null, $xtype: listitem, $color: null, $hovered-color: null, $pressed-color: null, $selected-color: null, $background-color: null, $alt-background-color: null, $hovered-background-color: null, $pressed-background-color: null, $selected-background-color: null, $border-width: null, $border-style: null, $border-color: null, $hovered-border-color: null, $pressed-border-color: null, $selected-border-color: 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, $disclosure-background-color: null, $pressed-disclosure-background-color: null, $disclosure-pressed-background-color: null, $disclosure-border-radius: null, $disclosure-border-radius-big: null, $disclosure-icon: null, $disclosure-icon-color: null, $pressed-disclosure-icon-color: null, $disclosure-pressed-icon-color: null, $disclosure-icon-size: null, $disclosure-icon-size-big: null, $disclosure-icon-font-size: null, $disclosure-icon-font-size-big: null, $disclosure-margin: null, $disclosure-margin-big: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { @include font($font-weight, $font-size, $line-height, $font-family); @include listitem-base( $xtype: $xtype, $color: $color, $hovered-color: $hovered-color, $pressed-color: $pressed-color, $selected-color: $selected-color, $background-color: $background-color, $alt-background-color: $alt-background-color, $hovered-background-color: $hovered-background-color, $pressed-background-color: $pressed-background-color, $selected-background-color: $selected-background-color, $border-width: $border-width, $border-style: $border-style, $border-color: $border-color, $hovered-border-color: $hovered-border-color, $pressed-border-color: $pressed-border-color, $selected-border-color: $selected-border-color ); @if $enable-big { .#{$prefix}big & { font-size: $font-size-big; line-height: $line-height-big; } } } .#{$prefix}#{$xtype}-body#{$ui-suffix} { padding: $padding; @if $enable-big { .#{$prefix}big & { padding: $padding-big; } } } .#{$prefix}#{$xtype}-disclosure#{$ui-suffix} { @include margin($disclosure-margin); @if $enable-big { .#{$prefix}big & { @include margin($disclosure-margin-big); } } .#{$prefix}icon-el { color: $disclosure-icon-color; background-color: $disclosure-background-color; border-radius: $disclosure-border-radius; height: $disclosure-icon-size; width: $disclosure-icon-size; .#{$prefix}#{$xtype}.#{$prefix}pressed & { color: $pressed-disclosure-icon-color; background-color: $pressed-disclosure-background-color; } @if $enable-big { .#{$prefix}big & { border-radius: $disclosure-border-radius-big; height: $disclosure-icon-size-big; width: $disclosure-icon-size-big; } } @include icon( $icon: $disclosure-icon, $font-size: $disclosure-icon-font-size, $font-size-big: $disclosure-icon-font-size-big ); &:active { background-color: $disclosure-pressed-background-color; color: $disclosure-pressed-icon-color; } } }} /** * A private mixin that generates the styling common to the ListItem and GridRow ui mixins. * Do not call this mixin directly. Use {@link Ext.dataview.ListItem#listitem-ui listitem-ui} * or {@link Ext.grid.Row#$gridrow-ui gridrow-ui}. * @private */@mixin listitem-base( $xtype: null, $color: null, $hovered-color: null, $pressed-color: null, $selected-color: null, $background-color: null, $alt-background-color: null, $hovered-background-color: null, $pressed-background-color: null, $selected-background-color: null, $border-width: null, $border-style: null, $border-color: null, $hovered-border-color: null, $pressed-border-color: null, $selected-border-color: null) { color: $color; background-color: $background-color; @include border-top($border-width, $border-style, $border-color); &.#{$prefix}last { @include border-bottom($border-width, $border-style, $border-color); } &.#{$prefix}odd { background-color: $alt-background-color; } &.#{$prefix}hovered { background-color: $hovered-background-color; color: $hovered-color; border-color: $hovered-border-color; + .#{$prefix}#{$xtype} { border-top-color: $hovered-border-color; } } // This rule must be more specific than the ":hover + .x-[xtype]" rule above // which is the reason for the extra x-[xtype] class in the selector. // This ensures that selected border color always wins over hover &.#{$prefix}#{$xtype}.#{$prefix}selected { background-color: $selected-background-color; color: $selected-color; border-color: $selected-border-color; } &.#{$prefix}selected + .#{$prefix}#{$xtype} { border-top-color: $selected-border-color; } // pressed specificity must be >= selected &.#{$prefix}#{$xtype}.#{$prefix}pressed { background-color: $pressed-background-color; color: $pressed-color; border-color: $pressed-border-color; } &.#{$prefix}pressed + .#{$prefix}#{$xtype} { border-top-color: $pressed-border-color; }}