UAS2.0_DEV_TEST/ext/modern/theme-neptune/sass/var/Indicator.scss

/**
 * @class Ext.Indicator
 */

/**
 * @var {color}
 * The color of the indicator dots.
 */
$indicator-background-color: dynamic(#ccc);

/**
 * @var {string/list}
 * The background-gradient of the indicator dots.
 */
$indicator-background-gradient: dynamic(null);

//# fashion replaces $carousel-indicator-size
/**
 * @var {measurement}
 * The size (height and width) of indicator dots.
 */
$indicator-size: dynamic(6px);

/**
 * @var {color}
 * The background-color of the active indicator dot.
 */
$indicator-active-background-color: dynamic($indicator-background-color);

/**
 * @var {string/list}
 * The background-gradient of the active indicator dot.
 */
$indicator-active-background-gradient: dynamic($indicator-background-gradient);

//# fashion replaces $carousel-indicator-active-size
/**
 * @var {measurement}
 * The size (height and width) of the active indicator dot.
 */
$indicator-active-size: dynamic($indicator-size * 2);

//# fashion replaces $carousel-track-size
/**
 * @var {measurement}
 * The size of the track the indicator dots are in. The size will be used for the width
 * of a vertical indicator or the height of a horizontal indicator.
 */
$indicator-track-size: dynamic(26px);

//# fashion replaces $carousel-indicator-spacing
/**
 * @var {measurement}
 * Amount of space between the indicator dots.
 */
$indicator-spacing: dynamic(3px);

//# fashion replaces $carousel-indicator-border-radius
/**
 * @var {number}
 * The border-radius of the indicator dots.
 */
$indicator-border-radius: dynamic(50%);

//# fashion replaces $carousel-light-ui
/**
 * @var {map}
 * Parameters for the "light" carousel UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$indicator-light-ui: dynamic((
    color: rgba(#fff, .1),
    active-color: rgba(#fff, .3)
));

//# fashion replaces $carousel-dark-ui
/**
 * @var {map}
 * Parameters for the "dark" carousel UI.
 * Set to `null` to eliminate the UI from the CSS output.
 */
$indicator-dark-ui: dynamic((
    color: rgba(#000, .1),
    active-color: rgba(#000, .3)
));

/**
 * Creates a theme UI for the indicator component.
 *
 * @param {string} $ui The name of the UI being created.
 *   Can not included spaces or special punctuation (used in class names)
 * @param {number} $xtype The xtype of the UI being created.
 * @param {number} $margin The margin between the indicator dots.
 * @param {number} $border-radius The border radius of the indicator dots.
 * @param {number} $track-size The size of the track the indicator dots are in.
 * @param {color} $background-color The background color of the indicator dots.
 * @param {string} $background-gradient The background gradient of the indicator dots.
 * @param {number} $size The size of the indicator dots.
 * @param {color} $active-background-color The background color of the active indicator dot.
 * @param {string} $active-background-gradient The background gradient of the active indicator dot.
 * @param {number} $active-size The size of the active indicator dot.
 */
@mixin indicator-ui(
    $ui: null,
    $xtype: indicator,

    $margin: $indicator-spacing,
    $border-radius: $indicator-border-radius,
    $track-size: $indicator-track-size,

    $background-color: $indicator-background-color,
    $background-gradient: $indicator-background-gradient,
    $size: $indicator-size,

    $active-background-color: $indicator-active-background-color,
    $active-background-gradient: $indicator-active-background-gradient,
    $active-size: $indicator-active-size
) {
    $ui-suffix: ui-suffix($ui);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        span {
            width: $size;
            height: $size;
            margin: $margin;

            @if $enable-border-radius {
                @include border-radius($border-radius);
            }

            @include background-gradient($background-color, $background-gradient);

            &.#{$prefix}#{$xtype}-active {
                width: $active-size;
                height: $active-size;

                @include background-gradient($active-background-color, $active-background-gradient);
            }
        }

        &.#{$prefix}#{$xtype}-horizontal {
            height: $track-size;
        }

        &.#{$prefix}#{$xtype}-vertical {
            width: $track-size;
        }
    }
}