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