/** * @class Ext.dataview.listswiper.Stepper */ /** * @var {color} * ListSwiper stepper text color */$listswiperstepper-color: dynamic($neutral-medium-dark-color); /** * @var {color} * ListSwiper stepper text color when active */$listswiperstepper-active-color: dynamic($light-color); /** * @var {color} * ListSwiper stepper text color when in the undo state */$listswiperstepper-undo-color: dynamic($listswiperstepper-active-color); /** * @var {color} * ListSwiper stepper background-color */$listswiperstepper-background-color: dynamic($neutral-light-color); /** * @var {color} * ListSwiper stepper background-color when active */$listswiperstepper-active-background-color: dynamic($active-color); /** * @var {color} * ListSwiper stepper background-color when in the undo state */$listswiperstepper-undo-background-color: dynamic($alert-color); /** * @var {number/list} * ListSwiper stepper padding */$listswiperstepper-padding: dynamic(4px 5px); /** * @var {number/list} * ListSwiper stepper padding in the {@link Global_CSS#$enable-big big} sizing scheme */$listswiperstepper-padding-big: dynamic(6px 8px); /** * @var {string} * ListSwiper stepper font-family */$listswiperstepper-font-family: dynamic($font-family); /** * @var {number} * ListSwiper stepper font-size */$listswiperstepper-font-size: dynamic($listitem-font-size); /** * @var {number} * ListSwiper stepper font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$listswiperstepper-font-size-big: dynamic($listitem-font-size-big); /** * @var {string/number} * ListSwiper stepper font-weight */$listswiperstepper-font-weight: dynamic($font-weight-bold); /** * @var {number} * ListSwiper stepper line-height */$listswiperstepper-line-height: dynamic($listitem-line-height); /** * @var {number} * ListSwiper stepper line-height in the {@link Global_CSS#$enable-big big} sizing scheme */$listswiperstepper-line-height-big: dynamic($listitem-line-height-big); /** * @var {number/list} * ListSwiper stepper padding */$listswiperstepper-padding: dynamic($listitem-padding); /** * @var {number/list} * ListSwiper stepper padding in the {@link Global_CSS#$enable-big big} sizing scheme */$listswiperstepper-padding-big: dynamic($listitem-padding-big); /** * @var {color} * ListSwiper stepper icon color */$listswiperstepper-icon-color: dynamic(inherit); /** * @var {color} * ListSwiper stepper icon color when active */$listswiperstepper-active-icon-color: dynamic(inherit); /** * @var {color} * ListSwiper stepper icon color when in the undo state */$listswiperstepper-undo-icon-color: dynamic($listswiperstepper-active-icon-color); /** * @var {number} * ListSwiper stepper icon size */$listswiperstepper-icon-size: dynamic(16px); /** * @var {number} * ListSwiper stepper icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$listswiperstepper-icon-size-big: dynamic(20px); /** * @var {number} * ListSwiper stepper icon font-size. Used for configuring the size of font icons */$listswiperstepper-icon-font-size: dynamic($listswiperstepper-icon-size);/** * @var {number} * ListSwiper stepper icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$listswiperstepper-icon-font-size-big: dynamic($listswiperstepper-icon-size-big); /** * @var {number} * The space between the ListSwiper stepper icon and text */$listswiperstepper-icon-horizontal-spacing: dynamic(5px); /** * @var {number} * The space between the ListSwiper stepper icon and text * in the {@link Global_CSS#$enable-big big} sizing scheme */$listswiperstepper-icon-horizontal-spacing-big: dynamic(8px); /** * @var {map} * Parameters for the "confirm" step swiper UI. * Set to `null` to eliminate the UI from the CSS output. */$listswiperstepper-action-ui: dynamic(( active-background-color: $base-highlight-color )); /** * @var {map} * Parameters for the "confirm" step swiper UI. * Set to `null` to eliminate the UI from the CSS output. */$listswiperstepper-confirm-ui: dynamic(( active-background-color: desaturate(darken($confirm-color, 10%), 5%) )); /** * @var {map} * Parameters for the "decline" step swiper UI. * Set to `null` to eliminate the UI from the CSS output. */$listswiperstepper-decline-ui: dynamic(( active-background-color: desaturate(darken($alert-color, 10%), 5%) )); /** * Creates a visual theme for a ListSwiperStepper. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {String} [$xtype=listswiperstepper] (protected) The {@link Ext.Class#xtype} to use * in CSS selectors. For use by UI mixins of derived classes. * * @param {color} $color * ListSwiper stepper text color * * @param {color} $active-color * ListSwiper stepper text color when active * * @param {color} $undo-color * ListSwiper stepper text color when in the undo state * * @param {color} $background-color * ListSwiper stepper background-color * * @param {color} $active-background-color * ListSwiper stepper background-color when active * * @param {color} $undo-background-color * ListSwiper stepper background-color when in the undo state * * @param {number/list} $padding * ListSwiper stepper padding * * @param {number/list} $padding-big * ListSwiper stepper padding in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string} $font-family * ListSwiper stepper font-family * * @param {number} $font-size * ListSwiper stepper font-size * * @param {number} $font-size-big * ListSwiper stepper font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string/number} $font-weight * ListSwiper stepper font-weight * * @param {number} $line-height * ListSwiper stepper line-height * * @param {number} $line-height-big * ListSwiper stepper line-height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $icon-color * ListSwiper stepper icon color * * @param {color} $active-icon-color * ListSwiper stepper icon color when active * * @param {color} $undo-icon-color * ListSwiper stepper icon color when in the undo state * * @param {number} $icon-size * ListSwiper stepper icon size. * * @param {number} $icon-size-big * ListSwiper stepper icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $icon-font-size * ListSwiper stepper icon font-size * * @param {number} $icon-font-size-big * ListSwiper stepper icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $icon-horizontal-spacing * The space between the ListSwiper stepper icon and text * * @param {number} $icon-horizontal-spacing-big * The space between the ListSwiper stepper icon and text * in the {@link Global_CSS#$enable-big big} sizing scheme */@mixin listswiperstepper-ui( $ui: null, $xtype: listswiperstepper, $color: null, $active-color: null, $undo-color: null, $background-color: null, $active-background-color: null, $undo-background-color: null, $padding: null, $padding-big: null, $font-family: null, $font-size: null, $font-size-big: null, $font-weight: null, $line-height: null, $line-height-big: null, $icon-color: null, $active-icon-color: null, $undo-icon-color: null, $icon-size: null, $icon-size-big: null, $icon-font-size: null, $icon-font-size-big: null, $icon-horizontal-spacing: null, $icon-horizontal-spacing-big: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}#{$xtype}#{$ui-suffix} { @include font($font-weight, $font-size, $line-height, $font-family); background-color: $background-color; color: $color; @if $enable-big { .#{$prefix}big & { font-size: $font-size-big; line-height: $line-height-big; } } } .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el .#{$prefix}icon-el { @include icon($font-size: $icon-font-size, $font-size-big: $icon-font-size-big); color: $icon-color; height: $icon-size; width: $icon-size; @if $enable-big { .#{$prefix}big & { height: $icon-size-big; width: $icon-size-big; } } } .#{$prefix}#{$xtype}#{$ui-suffix} { &.#{$prefix}side-left .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el { margin-right: $icon-horizontal-spacing; @if $enable-big { .#{$prefix}big & { margin-right: $icon-horizontal-spacing-big; } } } &.#{$prefix}side-right .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el { margin-left: $icon-horizontal-spacing; @if $enable-big { .#{$prefix}big & { margin-left: $icon-horizontal-spacing-big; } } } &.#{$prefix}undo { color: $undo-color; background-color: $undo-background-color; .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el .#{$prefix}icon-el { color: $undo-icon-color; } } &.#{$prefix}active { color: $active-color; background-color: $active-background-color; .#{$prefix}#{$xtype}#{$ui-suffix}-icon-wrap-el .#{$prefix}icon-el { color: $active-icon-color; } } } .#{$prefix}#{$xtype}#{$ui-suffix}-body-el { padding: $padding; @if $enable-big { .#{$prefix}big & { padding: $padding-big; } } }}