/** * @class Ext.dataview.IndexBar */ //# fashion replaces $index-bar-width /** * @var {number} * Index bar width */$indexbar-width: dynamic(15px); /** * @var {number} * Index bar width in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-width-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(10px); /** * @var {number} * Index bar font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-font-size-big: dynamic(12px); /** * @var {string} * Index bar font-family */$indexbar-font-family: dynamic($font-family); /** * @var {number/list} * Index bar padding */$indexbar-padding: dynamic(5px 0); /** * @var {number/list} * Index bar padding in the {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-padding-big: dynamic(7px 0); /** * @var {number/list} * Index bar margin */$indexbar-margin: dynamic(0 8px 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(312px); /** * @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($indexbar-horizontal-width); /** * @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)); /** * * @var {Boolean} $indexbar-justify-items * Determines the justify-content type for index bar items */$indexbar-justify-items: dynamic(center); /** * @var {number} * Index bar indicator width */$indexbar-indicator-width: dynamic(32px); /** * @var {number} * Index bar indicator width * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-indicator-width-big: dynamic(32px); /** * @var {number} * Index bar indicator height */$indexbar-indicator-height: dynamic($indexbar-indicator-width); /** * @var {number} * Index bar indicator height * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-indicator-height-big: dynamic($indexbar-indicator-width-big); /** * @var {number/list} * Index bar indicator margin */$indexbar-indicator-margin: dynamic(null); /** * @var {number} * Index bar indicator spacing between the bar and indicator */$indexbar-indicator-spacing: dynamic(4px); /** * @var {color} * Index bar indicator background color */$indexbar-indicator-background-color: dynamic($indexbar-pressed-background-color); /** * @var {number/list} * Index bar indicator border radius */$indexbar-indicator-border-radius: dynamic(3px); /** * @var {color} * Index bar indicator color */$indexbar-indicator-color: dynamic(null); /** * @var {number} * Index bar indicator font size */$indexbar-indicator-font-size: dynamic(12px); /** * @var {number} * Index bar indicator font size * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-indicator-font-size-big: dynamic(14px); /** * @var {number} * Index bar indicator line height */$indexbar-indicator-line-height: dynamic(null); /** * @var {number} * Index bar indicator line height * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-indicator-line-height-big: dynamic(null); /** * @var {number} * Index bar indicator font weight */$indexbar-indicator-font-weight: dynamic(bold); /** * @var {number} * Index bar indicator font weight * {@link Global_CSS#$enable-big big} sizing scheme */$indexbar-indicator-font-weight-big: dynamic(null); /** * @var {boolean} * Determines is the index bar indicator should have an arrow */$indexbar-indicator-enable-arrow: dynamic(true); /** * 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 {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/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 * * @param {Boolean} $justify-items * Determines the justify-content type for index bar items * * @param {number} $indicator-width * Index bar indicator width * * @param {number} $indicator-width-big * Index bar indicator width * {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $indicator-height * Index bar indicator height * * @param {number} $indicator-height-big * Index bar indicator height * {@link Global_CSS#$enable-big big} sizing scheme * * @param {number/list} $indicator-margin * Index bar indicator margin * * @param {number/list} $indicator-spacing * Index bar indicator spacing between the bar and indicator * * @param {color} $indicator-background-color * Index bar indicator background color * * @param {number/list} $indicator-border-radius * Index bar indicator border radius * * @param {color} $indicator-color * Index bar indicator color * * @param {number} $indicator-font-size * Index bar indicator font size * * @param {number} $indicator-font-size-big * Index bar indicator font size * {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $indicator-line-height * Index bar indicator line height * * @param {number} $indicator-line-height-big * Index bar indicator line height * {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $indicator-font-weight * Index bar indicator font weight * * @param {number} $indicator-font-weight-big * Index bar indicator font weight * {@link Global_CSS#$enable-big big} sizing scheme * * @param {Boolean} $indicator-enable-arrow * Determines if the index bar indicator should have an arrow */@mixin indexbar-ui( $ui: null, $width: null, $width-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-padding: null, $horizontal-padding-big: null, $horizontal-margin: null, $horizontal-margin-big: null, $justify-items: null, $indicator-width: null, $indicator-width-big: null, $indicator-height: null, $indicator-height-big: null, $indicator-margin: null, $indicator-spacing: null, $indicator-background-color: null, $indicator-border-radius: null, $indicator-color: null, $indicator-font-size: null, $indicator-font-size-big: null, $indicator-line-height: null, $indicator-line-height-big: null, $indicator-font-weight: null, $indicator-font-weight-big: null, $indicator-enable-arrow: null) { $ui-suffix: ui-suffix($ui); // Create this variable to de-reference CSS variables for Edge // Odd bug where before pseudo is not being rendered if in a rule // with a CSS variable background-color $edge-indicator-background-color: mix(#fff, $indicator-background-color, 0%); .#{$prefix}indexbar#{$ui-suffix} .#{$prefix}body-el { color: $color; justify-content: $justify-items; border-radius: $border-radius; opacity: $opacity; // This changes the element that will be used for the background color // For index bars that span the whole height/width we use the indexbar element // for collapsed indexbars we will use the individual elements for background color @if $justify-items == space-between or $justify-items == space-around { background-color: $background-color; &.#{$prefix}pressed { background-color: $pressed-background-color; } } @else { .#{$prefix}indexbar-item { background-color: $background-color; } &.#{$prefix}pressed .#{$prefix}indexbar-item{ background-color: $pressed-background-color; } } @if $enable-big { .#{$prefix}big & { border-radius: $border-radius-big; font-size: $font-size-big; } } &.#{$prefix}pressed { opacity: $pressed-opacity; } &.#{$prefix}vertical { width: $width; padding: $padding; margin: top($margin) right($margin) bottom($margin) $indicator-spacing; @if $enable-big { .#{$prefix}big & { width: $width-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; padding: $horizontal-padding; margin: $indicator-spacing right($margin) bottom($margin) left($margin); @if $enable-big { .#{$prefix}big & { width: $horizontal-width-big; padding: $horizontal-padding-big; margin: $horizontal-margin-big; } } } } .#{$prefix}list.#{$prefix}indexed-vertical.#{$prefix}indexed-no-autohide.#{$prefix}indexed#{$ui-suffix} { $item-spacing: calc-sum($width, horizontal($margin)); $item-spacing-big: calc-sum($width-big, horizontal($margin-big)); .#{$prefix}itemheader-body-el > :last-child, .#{$prefix}listitem-inner-el > :last-child, .#{$prefix}listswiperitem-body-el { margin-right: $item-spacing; @if $enable-big { .#{$prefix}big & { margin-right: $item-spacing-big; } } } .#{$prefix}listitem-tool-dock { > .#{$prefix}listitem-inner-el > :last-child { @if $item-spacing != null { margin-right: 0; } @if $enable-big and ($item-spacing-big != null) { .#{$prefix}big & { margin-right: 0; } } } > :last-child { margin-right: $item-spacing; @if $enable-big { .#{$prefix}big & { margin-right: $item-spacing-big; } } } } } .#{$prefix}indexbar#{$ui-suffix} { .#{$prefix}indexbar-indicator { .#{$prefix}edge & { background-color: $edge-indicator-background-color; } } .#{$prefix}indexbar-indicator { width: $indicator-width; height: $indicator-height; margin: $indicator-margin; color: $indicator-color; font-size: $indicator-font-size; line-height: $indicator-line-height; font-weight: $indicator-font-weight; background-color: $indicator-background-color; border-radius: $indicator-border-radius; .#{$prefix}big & { width: $indicator-width-big; height: $indicator-height-big; font-size: $indicator-font-size-big; line-height: $indicator-line-height-big; font-weight: $indicator-font-weight-big; } } @if $indicator-enable-arrow { $indicator-arrow-size: floor($indexbar-indicator-width * .4); .#{$prefix}indexbar-indicator::before { .#{$prefix}edge & { background-color: $edge-indicator-background-color; } } .#{$prefix}indexbar-indicator::before { content: ""; width: $indicator-arrow-size; height: $indicator-arrow-size; transform: rotate(45deg); top: ($indicator-height/2) - ($indicator-arrow-size/2); position: absolute; background-color: $indicator-background-color; } &.#{$prefix}horizontal > .#{$prefix}indexbar-indicator::before { bottom: floor($indicator-arrow-size * -.25); } &.#{$prefix}vertical > .#{$prefix}indexbar-indicator::before { right: floor($indicator-arrow-size * -.25); } } }}