saas-one/frontend/operation-web/ext/modern/theme-neptune/sass/var/dataview/IndexBar.scss

/**
 * @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);
            }
        }
    }
}