/** * @class Ext.grid.column.Column */ //# fashion replaces $grid-column-color /** * @var {color} * Grid Column text color */$gridcolumn-color: dynamic($highlight-color); //# fashion replaces $grid-column-background-color /** * @var {color} * Grid Column background-color */$gridcolumn-background-color: dynamic($headercontainer-background-color); /** * @var {color} * Grid Column background-color when hovered */$gridcolumn-hovered-background-color: dynamic(mix(#fff, $base-light-color, 80%)); //# fashion replaces $grid-column-sorted-background-color /** * @var {color} * Grid Column background-color when sorted */$gridcolumn-sorted-background-color: dynamic($gridcolumn-hovered-background-color); /** * @var {number/list} * Grid Column border-width */$gridcolumn-border-width: dynamic(0 1px 1px 0); /** * @var {string/list} * Grid Column border-style */$gridcolumn-border-style: dynamic(solid); //# fashion replaces $grid-column-border-color /** * @var {color} * Grid Column border-color */$gridcolumn-border-color: dynamic($headercontainer-border-color); //# fashion replaces $grid-column-font-weight /** * @var {string/number} * Grid Column font-weight */$gridcolumn-font-weight: dynamic($font-weight-bold); //# fashion replaces $grid-column-font-size /** * @var {number} * Grid Column font-size */$gridcolumn-font-size: dynamic($font-size); //# fashion replaces $grid-column-font-size-big /** * @var {number} * Grid Column font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$gridcolumn-font-size-big: dynamic($font-size-big); //# fashion replaces $grid-column-line-height /** * @var {number} * Grid Column line-height */$gridcolumn-line-height: dynamic(16px); //# fashion replaces $grid-column-line-height-big /** * @var {number} * Grid Column line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$gridcolumn-line-height-big: dynamic(18px); //# fashion replaces $grid-column-font-family /** * @var {string} * Grid Column font-family */$gridcolumn-font-family: dynamic($font-family); //# fashion replaces $grid-column-padding /** * @var {number/list} * Grid Column padding */$gridcolumn-padding: dynamic(4px 8px); //# fashion replaces $grid-column-padding-big /** * @var {number/list} * Grid Column padding in the {@link Global_CSS#$enable-big big} sizing scheme */$gridcolumn-padding-big: dynamic(7px 15px); /** * @var {number} * Grid Column sort icon margin */$gridcolumn-sort-icon-margin: dynamic(0 0 0 3px); /** * @var {number} * Grid Column sort icon margin in the {@link Global_CSS#$enable-big big} sizing scheme */$gridcolumn-sort-icon-margin-big: dynamic(null); /** * @var {number} * Grid Column sort icon size */$gridcolumn-sort-icon-size: dynamic(13px); /** * @var {number} * Grid Column sort icon size in the {@link global_css#$enable-big big} sizing scheme */$gridcolumn-sort-icon-size-big: dynamic(null); //# fashion replaces $grid-column-sort-icon-font-size /** * @var {number} * Grid Column sort icon font-size */$gridcolumn-sort-icon-font-size: dynamic(null); /** * @var {number} * Grid Column sort icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$gridcolumn-sort-icon-font-size-big: dynamic(null); //# fashion replaces $grid-column-sort-icon-color /** * @var {color} * Grid Column sort icon color */$gridcolumn-sort-icon-color: dynamic($gridcolumn-color); //# fashion replaces $grid-column-sort-asc-icon /** * @var {string/list} * Grid Column sort ascending icon */$gridcolumn-sort-asc-icon: dynamic($fa-var-long-arrow-up); //# fashion replaces $grid-column-sort-desc-icon /** * @var {string/list} * Grid Column sort descending icon */$gridcolumn-sort-desc-icon: dynamic($fa-var-long-arrow-down); /** * @var {number} * Grid Column trigger width */$gridcolumn-trigger-width: dynamic(18px); /** * @var {number} * Grid Column trigger width in the {@link global_css#$enable-big big} sizing scheme */$gridcolumn-trigger-width-big: dynamic(24px); /** * @var {color} * Grid Column trigger background-color */$gridcolumn-trigger-background-color: dynamic($gridcolumn-hovered-background-color or $gridcolumn-background-color); /** * @var {number/list} * Grid Column trigger border-width */$gridcolumn-trigger-border-width: dynamic(0 0 0 1px); /** * @var {string} * Grid Column trigger border-style */$gridcolumn-trigger-border-style: dynamic(right($gridcolumn-border-style)); /** * @var {color} * Grid Column trigger border-color */$gridcolumn-trigger-border-color: dynamic(right($gridcolumn-border-color)); /** * @var {string/list} * Grid Column trigger icon */$gridcolumn-trigger-icon: dynamic($fa-var-caret-down); /** * @var {color} * Grid Column trigger icon color */$gridcolumn-trigger-icon-color: dynamic(#808080); /** * @var {number} * Grid Column trigger icon font size */$gridcolumn-trigger-icon-font-size: dynamic(16px); /** * @var {number} * Grid Column trigger icon font size in the {@link global_css#$enable-big big} sizing scheme */$gridcolumn-trigger-icon-font-size-big: dynamic(20px); /** * @var {color} * Grid Column resizer width */$gridcolumn-resizer-width: dynamic(13px); /** * @var {color} * Grid Column resizer background-color */$gridcolumn-resizer-background-color: dynamic(darken($gridcolumn-background-color, 10%)); /** * Creates a visual theme for a grid column. * * @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=gridcolumn] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $color * Grid Column text color * * @param {color} $background-color * Grid Column background-color * * @param {color} $hovered-background-color * Grid Column background-color when hovered * * @param {color} $sorted-background-color * Grid Column background-color when sorted * * @param {number/list} $border-width * Grid Column border-width * * @param {string/list} $border-style * Grid Column border-style * * @param {color} $border-color * Grid Column border-color * * @param {string/number} $font-weight * Grid Column font-weight * * @param {number} $font-size * Grid Column font-size * * @param {number} $font-size-big * Grid Column font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $line-height * Grid Column line-height * * @param {number} $line-height-big * Grid Column line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * Grid Column font-family * * @param {number/list} $padding * Grid Column padding * * @param {number/list} $padding-big * Grid Column padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $sort-icon-margin * Grid Column sort icon margin * * @param {number} $sort-icon-margin-big * Grid Column sort icon margin in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $sort-icon-size * Grid Column sort icon size * * @param {number} $sort-icon-size-big * Grid Column sort icon size in the {@link global_css#$enable-big big} sizing scheme * * @param {number} $sort-icon-font-size * Grid Column sort icon font-size * * @param {number} $sort-icon-font-size-big * Grid Column sort icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $sort-icon-color * Grid Column sort icon color * * @param {string/list} $sort-asc-icon * Grid Column sort ascending icon * * @param {string/list} $sort-desc-icon * Grid Column sort descending icon * * @param {number} $trigger-width * Grid Column trigger width * * @param {number} $trigger-width-big * Grid Column trigger width in the {@link global_css#$enable-big big} sizing scheme * * @param {color} $trigger-background-color * Grid Column trigger background-color * * @param {number/list} $trigger-border-width * Grid Column trigger border-width * * @param {string} $trigger-border-style * Grid Column trigger border-style * * @param {color} $trigger-border-color * Grid Column trigger border-color * * @param {string/list} $trigger-icon * Grid Column trigger icon * * @param {color} $trigger-icon-color * Grid Column trigger icon color * * @param {number} $trigger-icon-font-size * Grid Column trigger icon font size * * @param {number} $trigger-icon-font-size-big * Grid Column trigger icon font size in the {@link global_css#$enable-big big} sizing scheme * * @param {color} $resizer-width * Grid Column resizer width * * @param {color} $resizer-background-color * Grid Column resizer background-color */@mixin gridcolumn-ui( $ui: null, $xtype: gridcolumn, $color: null, $background-color: null, $hovered-background-color: null, $sorted-background-color: null, $border-width: null, $border-style: null, $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, $sort-icon-margin: null, $sort-icon-margin-big: null, $sort-icon-size: null, $sort-icon-size-big: null, $sort-icon-font-size: null, $sort-icon-font-size-big: null, $sort-icon-color: null, $sort-asc-icon: null, $sort-desc-icon: null, $trigger-width: null, $trigger-width-big: null, $trigger-background-color: null, $trigger-border-width: null, $trigger-border-style: null, $trigger-border-color: null, $trigger-icon: null, $trigger-icon-color: null, $trigger-icon-font-size: null, $trigger-icon-font-size-big: null, $resizer-width: null, $resizer-background-color: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { > .#{$prefix}header-el { color: $color; background-color: $background-color; @include font($font-weight, $font-size, $line-height, $font-family); @include border($border-width, $border-style, $border-color); @if $enable-big { .#{$prefix}big & { font-size: $font-size-big; line-height: $line-height-big; } } &:hover { background-color: $hovered-background-color; } .#{$prefix}trigger-el { width: $trigger-width; color: $trigger-icon-color; background-color: $trigger-background-color; @include border($trigger-border-width, $trigger-border-style, $trigger-border-color); @include icon( $icon: $trigger-icon, $font-size: $trigger-icon-font-size, $font-size-big: $trigger-icon-font-size-big ); @if $enable-big { .#{$prefix}big & { width: $trigger-width-big; } } } // resizer element &:after { width: $resizer-width; background-color: $resizer-background-color; } } &.#{$prefix}sorted { > .#{$prefix}header-el { background-color: $sorted-background-color; } .#{$prefix}sort-icon-el { margin: $sort-icon-margin; height: $sort-icon-size; width: $sort-icon-size; color: $sort-icon-color; @include icon( $font-size: $sort-icon-font-size, $font-size-big: $sort-icon-font-size-big ); @if $enable-big { .#{$prefix}big & { margin: $sort-icon-margin-big; height: $sort-icon-size-big; width: $sort-icon-size-big; } } } } &.#{$prefix}sorted-asc .#{$prefix}sort-icon-el { @include icon($sort-asc-icon); } &.#{$prefix}sorted-desc .#{$prefix}sort-icon-el { @include icon($sort-desc-icon); } } @include toolable-ui( $ui: $ui, $xtype: $xtype, $padding: $padding, $padding-big: $padding-big, $anchor: title-wrap-el );} // Non-UI vars /** * @var {string/list} * Column menu sort ascending item icon. */$gridcolumn-menu-sort-asc-icon: dynamic($fa-var-sort-alpha-asc); /** * @var {string/list} * Column menu sort descending item icon. */$gridcolumn-menu-sort-desc-icon: dynamic($fa-var-sort-alpha-desc); /** * @var {string/list} * Column hide/show menu item icon. */$gridcolumn-menu-columns-icon: dynamic($fa-var-columns);