/** * @class Ext.dataview.SimpleListItem */ // ************************************** IMPORTANT ************************************** // // PLEASE READ THIS BEFORE MODIFYING ANYTHING IN THIS FILE // // The variables and mixins defined in this file apply to both Ext.dataview.ListItem // and Ext.dataview.SimpleListItem. Both classes use similar dom structure and class names // so that they can share all styling. // // To ensure that documentation for these variables appears under both classes in the // generated docs, documentation for all variables is repeated in ListItem.scss. // // When adding or removing variables in this file - please remember to document them // over in ListItem.scss as well. // // ************************************** IMPORTANT ************************************** //# fashion replaces $list-item-color /** * @var {color} * ListItem text color */$listitem-color: dynamic($dataitem-color); /** * @var {color} * ListItem text color when hovered */$listitem-hovered-color: dynamic($dataitem-hovered-color); /** * @var {color} * ListItem text color when selected */$listitem-selected-color: dynamic($dataitem-selected-color); /** * @var {color} * ListItem text color when pressed */$listitem-pressed-color: dynamic($dataitem-pressed-color); /** * @var {color} * ListItem text color when pinned */$listitem-pinned-color: dynamic(null); //# fashion replaces $list-item-background-color /** * @var {color} * ListItem background-color */$listitem-background-color: dynamic($dataitem-background-color); /** * @var {color} * background-color for `striped` ListItems */$listitem-alt-background-color: dynamic($dataitem-alt-background-color); /** * @var {color} * ListItem background-color when hovered */$listitem-hovered-background-color: dynamic($dataitem-hovered-background-color); //# fashion replaces $list-item-selected-background-color /** * @var {color} * ListItem background-color when selected */$listitem-selected-background-color: dynamic($dataitem-selected-background-color); //# fashion replaces $list-item-pressed-background-color /** * @var {color} * ListItem background-color when pressed */$listitem-pressed-background-color: dynamic($dataitem-pressed-background-color); /** * @var {color} * ListItem background-color when pinned */$listitem-pinned-background-color: dynamic(null); /** * @var {number/list} * ListItem border-width */$listitem-border-width: dynamic(1px 0); /** * @var {string} * ListItem border-style */$listitem-border-style: dynamic(solid); //# fashion replaces $list-item-border-color /** * @var {color} * ListItem border-color */$listitem-border-color: dynamic($neutral-highlight-color); /** * @var {color} * ListItem border-color when hovered */$listitem-hovered-border-color: dynamic($listitem-hovered-background-color); /** * @var {color} * ListItem border-color when selected */$listitem-selected-border-color: dynamic($listitem-selected-background-color); /** * @var {color} * ListItem border-color when pressed */$listitem-pressed-border-color: dynamic($listitem-pressed-background-color); /** * @var {color} * ListItem border-color when pinned */$listitem-pinned-border-color: dynamic(null); /** * @var {number} * ListItem outline-width when focused */$listitem-focused-outline-width: dynamic($dataitem-focused-outline-width); /** * @var {string} * ListItem outline-style when focused */$listitem-focused-outline-style: dynamic($dataitem-focused-outline-style); /** * @var {color} * ListItem outline-color when focused */$listitem-focused-outline-color: dynamic($dataitem-focused-outline-color); /** * @var {number} * ListItem outline-offset when focused */$listitem-focused-outline-offset: dynamic($dataitem-focused-outline-offset); /** * @var {list} * ListItem box-shadow when pinned */$listitem-pinned-box-shadow: dynamic(0 6px 6px -4px rgba(0, 0, 0, .2)); /** * @var {list} * ListItem box-shadow when pinned to the bottom */$listitem-pinned-bottom-box-shadow: dynamic(invert-shadow($listitem-pinned-box-shadow, y)); //# fashion replaces $list-item-font-weight /** * @var {string/number} * ListItem font-weight */$listitem-font-weight: dynamic($dataitem-font-weight); //# fashion replaces $list-item-font-size /** * @var {number} * ListItem font-size */$listitem-font-size: dynamic($dataitem-font-size); //# fashion replaces $list-item-font-size-big /** * @var {number} * ListItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-font-size-big: dynamic($dataitem-font-size-big); /** * @var {number} * ListItem font-size when selected */$listitem-selected-font-size: dynamic(null); /** * @var {number} * ListItem font-size when selected in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-selected-font-size-big: dynamic(null); /** * @var {number} * ListItem font-size when pressed */$listitem-pressed-font-size: dynamic(null); /** * @var {number} * ListItem font-size when pressed in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-pressed-font-size-big: dynamic(null); //# fashion replaces $list-item-line-height /** * @var {number} * ListItem line-height */$listitem-line-height: dynamic($dataitem-line-height); //# fashion replaces $list-item-line-height-big /** * @var {number} * ListItem line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-line-height-big: dynamic($dataitem-line-height-big); //# fashion replaces $list-item-font-family /** * @var {string} * ListItem font-family */$listitem-font-family: dynamic($dataitem-font-family); //# fashion replaces $list-item-padding /** * @var {number/list} * ListItem padding */$listitem-padding: dynamic(4px 8px); //# fashion replaces $list-item-padding-big /** * @var {number/list} * ListItem padding in the {@link Global_CSS#$enable-big big} sizing scheme */$listitem-padding-big: dynamic(7px 15px); /** * 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 * ListItem text color * * @param {color} $hovered-color * ListItem text color when hovered * * @param {color} $selected-color * ListItem text color when selected * * @param {color} $pressed-color * ListItem text color when pressed * * @param {color} $pinned-color * ListItem text color when pinned * * @param {color} $background-color * ListItem background-color * * @param {color} $alt-background-color * background-color for `striped` ListItems * * @param {color} $hovered-background-color * ListItem background-color when hovered * * @param {color} $selected-background-color * ListItem background-color when selected * * @param {color} $pressed-background-color * ListItem background-color when pressed * * @param {color} $pinned-background-color * ListItem background-color when pinned * * @param {number/list} $border-width * ListItem border-width * * @param {string} $border-style * ListItem border-style * * @param {color} $border-color * ListItem border-color * * @param {color} $hovered-border-color * ListItem border-color when hovered * * @param {color} $selected-border-color * ListItem border-color when selected * * @param {color} $pressed-border-color * ListItem border-color when pressed * * @param {color} $pinned-border-color * ListItem border-color when pinned * * @param {number} $focused-outline-width * ListItem outline-width when focused * * @param {string} $focused-outline-style * ListItem outline-style when focused * * @param {color} $focused-outline-color * ListItem outline-color when focused * * @param {number} $focused-outline-offset * ListItem outline-offset when focused * * @param {list} $pinned-box-shadow * ListItem border-color when pinned * * @param {list} $pinned-bottom-box-shadow * ListItem border-color when pinned to the bottom * * @param {string/number} $font-weight * ListItem font-weight * * @param {number} $font-size * ListItem font-size * * @param {number} $font-size-big * ListItem font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $selected-font-size * ListItem font-size when selected * * @param {number} $selected-font-size-big * ListItem font-size when selected in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $pressed-font-size * ListItem font-size when pressed * * @param {number} $pressed-font-size-big * ListItem font-size when pressed in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $line-height * ListItem line-height * * @param {number} $line-height-big * ListItem line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * ListItem font-family * * @param {number/list} $padding * ListItem padding * * @param {number/list} $padding-big * ListItem padding in the {@link Global_CSS#$enable-big big} sizing scheme */@mixin listitem-ui( $ui: null, $xtype: listitem, $color: null, $hovered-color: null, $selected-color: null, $pressed-color: null, $pinned-color: null, $background-color: null, $alt-background-color: null, $hovered-background-color: null, $selected-background-color: null, $pressed-background-color: null, $pinned-background-color: null, $border-width: null, $border-style: null, $border-color: null, $hovered-border-color: null, $selected-border-color: null, $pressed-border-color: null, $pinned-border-color: null, $focused-outline-width: null, $focused-outline-style: null, $focused-outline-color: null, $focused-outline-offset: null, $pinned-box-shadow: null, $pinned-bottom-box-shadow: null, $font-weight: null, $font-size: null, $font-size-big: null, $selected-font-size: null, $selected-font-size-big: null, $pressed-font-size: null, $pressed-font-size-big: null, $line-height: null, $line-height-big: null, $font-family: null, $padding: null, $padding-big: null) { $ui-suffix: ui-suffix($ui); $arguments: intersect-arguments(listitem-ui, listitem-base); .#{$prefix}#{$xtype}#{$ui-suffix} { @include listitem-base($arguments...); @include font($font-weight, $font-size, $line-height, $font-family); &.#{$prefix}selected { font-size: $selected-font-size; @if $enable-big { .#{$prefix}big & { font-size: $selected-font-size-big; } } } &.#{$prefix}pressed { font-size: $pressed-font-size; @if $enable-big { .#{$prefix}big & { font-size: $pressed-font-size-big; } } } @if $enable-big { .#{$prefix}big & { font-size: $font-size-big; line-height: $line-height-big; } } &.#{$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, $anchor: inner-el );} /** * 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( $color: null, $hovered-color: null, $selected-color: null, $pressed-color: null, $pinned-color: null, $background-color: null, $alt-background-color: null, $hovered-background-color: null, $selected-background-color: null, $pressed-background-color: null, $pinned-background-color: null, $border-width: null, $border-style: null, $border-color: null, $hovered-border-color: null, $selected-border-color: null, $pressed-border-color: null, $pinned-border-color: null, $pinned-box-shadow: null, $pinned-bottom-box-shadow: null) { color: $color; background-color: $background-color; @include border($border-width, $border-style, $border-color); margin-bottom: -(bottom($border-width)); + .#{$prefix}scrolldock-end { margin-top: bottom($border-width) } &:first-child { // top border color is the same as background color when row is the first row // This avoids the appearance of a double border on the grid header container // when scrollTop == 0 border-top-color: $background-color; } &.#{$prefix}odd { background-color: $alt-background-color; } &.#{$prefix}hovered { background-color: $hovered-background-color; color: $hovered-color; border-color: $hovered-border-color; } &.#{$prefix}selected { .#{$prefix}show-selection > & { background-color: $selected-background-color; color: $selected-color; border-color: $selected-border-color; } } &.#{$prefix}pressed { background-color: $pressed-background-color; color: $pressed-color; border-color: $pressed-border-color; } &.#{$prefix}pinned { background-color: $pinned-background-color; color: $pinned-color; border-color: $pinned-border-color; box-shadow: $pinned-box-shadow; } &.#{$prefix}pinned-bottom { box-shadow: $pinned-bottom-box-shadow; }}