/** * @class Ext.grid.cell.Base */ /** * @var {color} * Grid Cell text color */ $gridcell-color: dynamic(null); /** * @var {color} * Grid Cell text color when hovered */ $gridcell-hovered-color: dynamic($gridrow-hovered-color or $listitem-hovered-color); /** * @var {color} * Grid Cell text color when selected */ $gridcell-selected-color: dynamic($gridrow-selected-color or $listitem-selected-color); /** * @var {color} * Grid Cell text color when pressed */ $gridcell-pressed-color: dynamic($gridrow-pressed-color or $listitem-pressed-color); /** * @var {color} * Grid Cell background-color */ $gridcell-background-color: dynamic(null); /** * @var {color} * Grid Cell background-color when hovered */ $gridcell-hovered-background-color: dynamic($gridrow-hovered-background-color or $listitem-hovered-background-color); /** * @var {color} * Grid Cell background-color when selected */ $gridcell-selected-background-color: dynamic($gridrow-selected-background-color or $listitem-selected-background-color); /** * @var {color} * Grid Cell background-color when pressed */ $gridcell-pressed-background-color: dynamic($gridrow-pressed-background-color or $listitem-pressed-background-color); /** * @var {number} * Grid Cell {@link Ext.grid.Grid#columnLines column} border-width */ $gridcell-column-border-width: dynamic(1px); /** * @var {string} * Grid Cell {@link Ext.grid.Grid#columnLines column} border-style */ $gridcell-column-border-style: dynamic($gridrow-border-style or $listitem-border-style); /** * @var {color} * Grid Cell {@link Ext.grid.Grid#columnLines column} border-color */ $gridcell-column-border-color: dynamic($gridrow-border-color or $listitem-border-color); /** * @var {number} * Grid Cell outline-width when focused */ $gridcell-focused-outline-width: dynamic($listitem-focused-outline-width); /** * @var {string} * Grid Cell outline-style when focused */ $gridcell-focused-outline-style: dynamic($listitem-focused-outline-style); /** * @var {color} * Grid Cell outline-color when focused */ $gridcell-focused-outline-color: dynamic($listitem-focused-outline-color); /** * @var {number} * Grid Cell outline-offset when focused */ $gridcell-focused-outline-offset: dynamic($listitem-focused-outline-offset); //# fashion replaces $grid-cell-font-weight /** * @var {string/number} * Grid Cell font-weight */ $gridcell-font-weight: dynamic($listitem-font-weight); //# fashion replaces $grid-cell-font-size /** * @var {number} * Grid Cell font-size */ $gridcell-font-size: dynamic($listitem-font-size); //# fashion replaces $grid-cell-font-size-big /** * @var {number} * Grid Cell font-size in the {@link Global_CSS#$enable-big big} sizing scheme */ $gridcell-font-size-big: dynamic($listitem-font-size-big); //# fashion replaces $grid-cell-line-height /** * @var {number} * Grid Cell line-height */ $gridcell-line-height: dynamic($listitem-line-height); //# fashion replaces $grid-cell-line-height-big /** * @var {number} * Grid Cell line-height in the {@link Global_CSS#$enable-big big} sizing scheme */ $gridcell-line-height-big: dynamic($listitem-line-height-big); //# fashion replaces $grid-cell-font-family /** * @var {string} * Grid Cell font-family */ $gridcell-font-family: dynamic($listitem-font-family); //# fashion replaces $grid-cell-padding /** * @var {number/list} * Grid Cell padding */ $gridcell-padding: dynamic($listitem-padding); //# fashion replaces $grid-cell-padding-big /** * @var {number/list} * Grid Cell padding in the {@link Global_CSS#$enable-big big} sizing scheme */ $gridcell-padding-big: dynamic($listitem-padding-big); /** * @var {string/list} * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon */ $gridcell-dirty-icon: dynamic($ext-var-dirty ExtJS); /** * @var {color} * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon color */ $gridcell-dirty-icon-color: dynamic($alert-color); /** * @var {number} * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon size */ $gridcell-dirty-icon-size: dynamic(14px); /** * @var {number} * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon size in the * {@link Global_CSS#$enable-big big} sizing scheme */ $gridcell-dirty-icon-size-big: dynamic(18px); /** * @var {number} * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon font-size */ $gridcell-dirty-icon-font-size: dynamic(null); /** * @var {number} * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon font-size in the * {@link Global_CSS#$enable-big big} sizing scheme */ $gridcell-dirty-icon-font-size-big: dynamic(null); /** * @var {Map} * Parameters for the `summary` gridcell UI used for cells in a summary row * @ui gridcell-ui */ $gridcell-summary-ui: dynamic(( font-weight: $font-weight-bold )); /** * Creates a visual theme for a Grid Cell. * * @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=gridcell] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $color * Grid Cell text color * * @param {color} $hovered-color * Grid Cell text color when hovered * * @param {color} $selected-color * Grid Cell text color when selected * * @param {color} $pressed-color * Grid Cell text color when pressed * * @param {color} $background-color * Grid Cell background-color * * @param {color} $hovered-background-color * Grid Cell background-color when hovered * * @param {color} $selected-background-color * Grid Cell background-color when selected * * @param {color} $pressed-background-color * Grid Cell background-color when pressed * * @param {number} $column-border-width * Grid Cell {@link Ext.grid.Grid#columnLines column} border-width * * @param {string} $column-border-style * Grid Cell {@link Ext.grid.Grid#columnLines column} border-style * * @param {color} $column-border-color * Grid Cell {@link Ext.grid.Grid#columnLines column} border-color * * @param {number} $focused-outline-width * Grid Cell outline-width when focused * * @param {string} $focused-outline-style * Grid Cell outline-style when focused * * @param {color} $focused-outline-color * Grid Cell outline-color when focused * * @param {number} $focused-outline-offset * Grid Cell outline-offset when focused * * @param {string/number} $font-weight * Grid Cell font-weight * * @param {number} $font-size * Grid Cell font-size * * @param {number} $font-size-big * Grid Cell font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $line-height * Grid Cell line-height * * @param {number} $line-height-big * Grid Cell line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * Grid Cell font-family * * @param {number/list} $padding * Grid Cell padding * * @param {number/list} $padding-big * Grid Cell padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string/list} $dirty-icon * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon * * @param {color} $dirty-icon-color * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon color * * @param {number} $dirty-icon-size * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon size * * @param {number} $dirty-icon-size-big * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon size in the * {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $dirty-icon-font-size * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon font-size * * @param {number} $dirty-icon-font-size-big * Grid Cell {@link Ext.grid.Grid#markDirty dirty} icon font-size in the * {@link Global_CSS#$enable-big big} sizing scheme */ @mixin gridcell-ui( $ui: null, $xtype: gridcell, $color: null, $hovered-color: null, $selected-color: null, $pressed-color: null, $background-color: null, $hovered-background-color: null, $selected-background-color: null, $pressed-background-color: null, $column-border-width: null, $column-border-style: null, $column-border-color: null, $focused-outline-width: null, $focused-outline-style: null, $focused-outline-color: null, $focused-outline-offset: 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, $dirty-icon: null, $dirty-icon-color: null, $dirty-icon-size: null, $dirty-icon-size-big: null, $dirty-icon-font-size: null, $dirty-icon-font-size-big: null ) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { @include font($font-weight, $font-size, $line-height, $font-family); @if $enable-big { .#{$prefix}big & { font-size: $font-size-big; line-height: $line-height-big; } } color: $color; background-color: $background-color; .#{$prefix}column-lines & { @include border-right($column-border-width, $column-border-style, $column-border-color); } &.#{$prefix}hovered { background-color: $hovered-background-color; color: $hovered-color; } &.#{$prefix}selected { background-color: $selected-background-color; color: $selected-color; } &.#{$prefix}pressed { background-color: $pressed-background-color; color: $pressed-color; } .#{$prefix}keyboard-mode &.#{$prefix}focused { @include outline($focused-outline-width, $focused-outline-style, $focused-outline-color, $focused-outline-offset); } .#{$prefix}mark-dirty > * > &.#{$prefix}dirty { @include icon( $icon: $dirty-icon, $color: $dirty-icon-color, $size: $dirty-icon-size, $size-big: $dirty-icon-size-big, $font-size: $dirty-icon-font-size, $font-size-big: $dirty-icon-font-size-big, $style-pseudo: true ); } } @include toolable-ui( $ui: $ui, $xtype: $xtype, $padding: $padding, $padding-big: $padding-big ); }