/** * @class Ext.dataview.IndexBar */ //# fashion replaces $index-bar-width /** * @var {number} * Index bar width */$indexbar-width: dynamic(1.15rem); /** * @var {number} * Index bar width in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-width-big: dynamic(null); /** * @var {number} * Index bar height */$indexbar-height: dynamic(25rem); /** * @var {number} * Index bar height in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-height-big: dynamic(null); /** * @var {color} * Index bar color. */$indexbar-color: dynamic($base-dark-color); /** * @var {color} * Index bar color when pressed */$indexbar-pressed-color: dynamic(null); //# fashion replaces $index-bar-bg-color /** * @var {color} * Index bar background-color */$indexbar-background-color: dynamic(null); /** * @var {color} * Index bar background-color when pressed */$indexbar-pressed-background-color: dynamic($neutral-color); /** * @var {number/list} * Index bar border-radius */$indexbar-border-radius: dynamic($indexbar-width); /** * @var {number/list} * Index bar border-radius in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-border-radius-big: dynamic(null); /** * @var {number} * Index bar opacity */$indexbar-opacity: dynamic(null); /** * @var {number} * Index bar opacity when pressed */$indexbar-pressed-opacity: dynamic(null); /** * @var {string/number} * Index bar font-weight */$indexbar-font-weight: dynamic($font-weight-bold); /** * @var {number} * Index bar font-size */$indexbar-font-size: dynamic(.77rem); /** * @var {number} * Index bar font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-font-size-big: dynamic(.8rem); /** * @var {string} * Index bar font-family */$indexbar-font-family: dynamic($font-family); /** * @var {number/list} * Index bar padding */$indexbar-padding: dynamic(.4rem 0); /** * @var {number/list} * Index bar padding in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-padding-big: dynamic(.5rem 0); /** * @var {number/list} * Index bar margin */$indexbar-margin: dynamic(0 .6rem 0 0); /** * @var {number/list} * Index bar margin in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-margin-big: dynamic(null); /** * @var {number} * Index bar width when {@link #direction horizontally} oriented */$indexbar-horizontal-width: dynamic(24em); /** * @var {number} * Index bar width when {@link #direction horizontally} oriented in the * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-horizontal-width-big: dynamic(28em); /** * @var {number} * Index bar height when {@link #direction horizontally} oriented */$indexbar-horizontal-height: dynamic($indexbar-width); /** * @var {number} * Index bar height when {@link #direction horizontally} oriented in the * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-horizontal-height-big: dynamic($indexbar-height-big); /** * @var {number/list} * Index bar padding when {@link #direction horizontally} oriented */$indexbar-horizontal-padding: dynamic(rotate90($indexbar-padding)); /** * @var {number/list} * Index bar padding when {@link #direction horizontally} oriented in the * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-horizontal-padding-big: dynamic(rotate90($indexbar-padding-big)); /** * @var {number/list} * Index bar margin when {@link #direction horizontally} oriented */$indexbar-horizontal-margin: dynamic(rotate90($indexbar-margin)); /** * @var {number/list} * Index bar margin when {@link #direction horizontally} oriented in the * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-horizontal-margin-big: dynamic(rotate90($indexbar-margin-big)); /** * Creates a visual theme for an IndexBar. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {number} $width * Index bar width * * @param {number} $width-big * Index bar width in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $height * Index bar height * * @param {number} $height-big * Index bar height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $color * Index bar color. * * @param {color} $pressed-color * Index bar color when pressed * * @param {color} $background-color * Index bar background-color * * @param {color} $pressed-background-color * Index bar background-color when pressed * * @param {number/list} $border-radius * Index bar border-radius * * @param {number/list} $border-radius-big * Index bar border-radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $opacity * Index bar opacity * * @param {number} $pressed-opacity * Index bar opacity when pressed * * @param {string/number} $font-weight * Index bar font-weight * * @param {number} $font-size * Index bar font-size * * @param {number} $font-size-big * Index bar font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * Index bar font-family * * @param {number/list} $padding * Index bar padding * * @param {number/list} $padding-big * Index bar padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $margin * Index bar margin * * @param {number/list} $margin-big * Index bar margin in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $horizontal-width * Index bar width when {@link #direction horizontally} oriented * * @param {number} $horizontal-width-big * Index bar width when {@link #direction horizontally} oriented in the * {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $horizontal-height * Index bar height when {@link #direction horizontally} oriented * * @param {number} $horizontal-height-big * Index bar height when {@link #direction horizontally} oriented in the * {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $horizontal-padding * Index bar padding when {@link #direction horizontally} oriented * * @param {number/list} $horizontal-padding-big * Index bar padding when {@link #direction horizontally} oriented in the * {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $horizontal-margin * Index bar margin when {@link #direction horizontally} oriented * * @param {number/list} $horizontal-margin-big * Index bar margin when {@link #direction horizontally} oriented in the * {@link Global_CSS#$enable-big big} sizing scheme */@mixin indexbar-ui( $ui: null, $width: null, $width-big: null, $height: null, $height-big: null, $color: null, $pressed-color: null, $background-color: null, $pressed-background-color: null, $border-radius: null, $border-radius-big: null, $opacity: null, $pressed-opacity: null, $font-weight: null, $font-size: null, $font-size-big: null, $font-family: null, $padding: null, $padding-big: null, $margin: null, $margin-big: null, $horizontal-width: null, $horizontal-width-big: null, $horizontal-height: null, $horizontal-height-big: null, $horizontal-padding: null, $horizontal-padding-big: null, $horizontal-margin: null, $horizontal-margin-big: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}indexbar#{$ui-suffix} { color: $color; background-color: $background-color; border-radius: $border-radius; opacity: $opacity; @if $enable-big { .#{$prefix}big & { border-radius: $border-radius-big; font-size: $font-size-big; } } &.#{$prefix}pressed { background-color: $pressed-background-color; opacity: $pressed-opacity; } &.#{$prefix}vertical { width: $width; height: $height; padding: $padding; margin: $margin; @if $enable-big { .#{$prefix}big & { width: $width-big; height: $height-big; padding: $padding-big; margin: $margin-big; } } } .#{$prefix}indexbar-item { // font must be on the item so that it does not affect the size/padding/margin // of the indexbar when size is specified in ems @include font($font-weight: $font-weight, $font-size: $font-size, $font-family: $font-family); } &.#{$prefix}horizontal { width: $horizontal-width; height: $horizontal-height; padding: $horizontal-padding; margin: $horizontal-margin; @if $enable-big { .#{$prefix}big & { width: $horizontal-width-big; height: $horizontal-height-big; padding: $horizontal-padding-big; margin: $horizontal-margin-big; } } } } .#{$prefix}list.#{$prefix}indexed-vertical.#{$prefix}indexed#{$ui-suffix} { .#{$prefix}listitem, .#{$prefix}itemheader { padding-right: calc-sum($width, horizontal($margin)); @if $enable-big { .#{$prefix}big & { padding-right: calc-sum($width-big, horizontal($margin-big)); } } } }}