/** * @class Ext.carousel.Carousel */ /** * @var {measurement} $carousel-indicator-size Size (width/height) of carousel indicator dots. */$carousel-indicator-size: dynamic(.5em); /** * @var {measurement} $carousel-indicator-spacing * Amount of space between carousel indicator dots. */$carousel-indicator-spacing: dynamic(.2em); /** * @var {measurement} $carousel-track-size Size of the track the carousel indicator dots are in. */$carousel-track-size: dynamic(2em); /** * @var {boolean} * `true` to include the "light" panel UI */$carousel-light-ui: dynamic($enable-default-uis); /** * @var {boolean} * `true` to include the "dark" panel UI */$carousel-dark-ui: dynamic($enable-default-uis); $carousel-indicator-active-size: dynamic(null);$carousel-indicator-border-radius: dynamic($carousel-indicator-size / 2); /** * Creates a theme UI for carousel indicator components. * * @param {string} $ui-label The name of the UI being created. * Can not included spaces or special punctuation (used in class names) * @param {color} $color Base color for the UI. * @param {string} $gradient Default gradient for the UI. * @param {color} $active-color Active color for the UI. * @param {string} $active-gradient Active gradient for the UI. */@mixin sencha-carousel-indicator-ui( $ui-label:null, $color:null, $gradient:null, $active-color: null, $active-gradient: null) { .x-carousel-indicator-#{$ui-label} span { @include background-gradient($color, $gradient); &.x-carousel-indicator-active { @include background-gradient($active-color, $active-gradient); } }} // Private variables @mixin carousel-light-ui { @include sencha-carousel-indicator-ui( $ui-label: 'light', $color: rgba(#fff, .1), $active-color: rgba(#fff, .3) ) } @mixin carousel-dark-ui { @include sencha-carousel-indicator-ui( $ui-label: 'dark', $color: rgba(#000, .1), $active-color: rgba(#000, .3) );}