/** * @class Ext.slider.Thumb */ /** * @var {number} * Thumb height */$thumb-height: dynamic(15px); /** * @var {number} * Thumb height in the {@link Global_CSS#$enable-big big} sizing scheme */$thumb-height-big: dynamic(28px); /** * @var {number} * Thumb width */$thumb-width: dynamic(15px); /** * @var {number} * Thumb width in the {@link Global_CSS#$enable-big big} sizing scheme */$thumb-width-big: dynamic(28px); /** * @var {color} * Thumb background-color */$thumb-background-color: dynamic($slider-track-background-color); /** * @var {color} * Thumb background-color when hovered */$thumb-hovered-background-color: dynamic(null); /** * @var {color} * Thumb background-color when pressed */$thumb-pressed-background-color: dynamic(null); /** * @var {color} * Thumb background-color when disabled */$thumb-disabled-background-color: dynamic(null); /** * @var {number/list} * Thumb border-width */$thumb-border-width: dynamic(1px); /** * @var {string/list} * Thumb border-style */$thumb-border-style: dynamic(solid); /** * @var {color/list} * Thumb border-color */$thumb-border-color: dynamic($neutral-medium-dark-color); /** * @var {number} * Thumb border-radius */$thumb-border-radius: dynamic($thumb-height / 2); /** * @var {number} * Thumb border-radius in the {@link Global_CSS#$enable-big big} sizing scheme */$thumb-border-radius-big: dynamic($thumb-height-big / 2); /** * @var {string} * Thumb icon */$thumb-icon: dynamic($fa-var-circle); /** * @var {color} * Thumb icon color */$thumb-icon-color: dynamic($highlight-color); /** * @var {number} * Thumb icon size */$thumb-icon-size: dynamic(7px); /** * @var {number} * Thumb icon size in the {@link Global_CSS#$enable-big big} sizing scheme */$thumb-icon-size-big: dynamic(12px); /** * @var {number} * Thumb icon font-size */$thumb-icon-font-size: dynamic(null); /** * @var {number} * Thumb icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme */$thumb-icon-font-size-big: dynamic(null); /** * @var {list} * Thumb box-shadow */$thumb-box-shadow: dynamic(1px 1px 2px $neutral-dark-color); /** * @var {list} * Thumb box-shadow in the {@link Global_CSS#$enable-big big} sizing scheme */$thumb-box-shadow-big: dynamic($thumb-box-shadow); /** * @var {map} * Parameters for the "toggle-on" thumb UI. * Set to `null` to eliminate the UI from the CSS output. */$thumb-toggle-on-ui: dynamic(null); /** * @var {map} * Parameters for the "toggle-off" thumb UI. * Set to `null` to eliminate the UI from the CSS output. */$thumb-toggle-off-ui: dynamic(null); /** * Creates a visual theme for a Thumb. * * @param {string} $ui * The name of the UI being created. Can not included spaces or special punctuation * (used in CSS class names). * * @param {number} $height * Thumb height * * @param {number} $height-big * Thumb height in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $width * Thumb width * * @param {number} $width-big * Thumb width in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {color} $background-color * Thumb background-color * * @param {color} $hovered-background-color * Thumb background-color when hovered * * @param {color} $pressed-background-color * Thumb background-color when pressed * * @param {color} $disabled-background-color * Thumb background-color when disabled * * @param {number/list} $border-width * Thumb border-width * * @param {string/list} $border-style * Thumb border-style * * @param {color/list} $border-color * Thumb border-color * * @param {number} $border-radius * Thumb border-radius * * @param {number} $border-radius-big * Thumb border-radius in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {string/list} $icon * Thumb icon * * @param {color} $icon-color * Thumb icon color * * @param {number} $icon-size * Thumb icon size * * @param {number} $icon-size-big * Thumb icon size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {number} $icon-font-size * Thumb icon font-size * * @param {number} $icon-font-size-big * Thumb icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme * * @param {list} $box-shadow * Thumb box-shadow * * @param {list} $box-shadow-big * Thumb box-shadow in the {@link Global_CSS#$enable-big big} sizing scheme */@mixin thumb-ui( $ui: null, $height: null, $height-big: null, $width: null, $width-big: null, $background-color: null, $hovered-background-color: null, $pressed-background-color: null, $disabled-background-color: null, $border-width: null, $border-style: null, $border-color: null, $border-radius: null, $border-radius-big: null, $icon: null, $icon-color: null, $icon-size: null, $icon-size-big: null, $icon-font-size: null, $icon-font-size-big: null, $box-shadow: null, $box-shadow-big: null) { $ui-suffix: ui-suffix($ui); .#{$prefix}thumb#{$ui-suffix} { height: $height; width: $width; background-color: $background-color; border-radius: $border-radius; box-shadow: $box-shadow; @if $height != null { margin-top: -$height / 2; } @include border($border-width, $border-style, $border-color); @if $enable-big { .#{$prefix}big & { height: $height-big; width: $width-big; box-shadow: $box-shadow-big; margin-top: -($height-big or $thumb-height-big) / 2; @include border-radius($border-radius-big); } } .#{$prefix}icon-el { @include icon( $icon: $icon, $color: $icon-color, $size: $icon-size, $size-big: $icon-size-big, $font-size: $icon-font-size, $font-size-big: $icon-font-size-big ); } &:hover { background-color: $hovered-background-color; } &:active { background-color: $pressed-background-color; } &.#{$prefix}disabled { background-color: $disabled-background-color; } .#{$prefix}slider-vertical & { margin-top: 0; @if $width != null { margin-left: -$width / 2; } @if $enable-big { .#{$prefix}big & { margin-left: -($width-big or $thumb-width-big) / 2; } } transform: rotate(90deg); } } // This element ensures the containing slider is at least as high as its largest thumb .#{$prefix}thumb-sizer#{$ui-suffix} { height: $height; @if $enable-big { .#{$prefix}big & { height: $height-big; } } }}