$thumb-height: dynamic(1.154rem);
$thumb-height-big: dynamic(1.867rem);
$thumb-width: dynamic(1.154rem);
$thumb-width-big: dynamic(1.867rem);
$thumb-background-color: dynamic($slider-track-background-color);
$thumb-hovered-background-color: dynamic(null);
$thumb-pressed-background-color: dynamic(null);
$thumb-disabled-background-color: dynamic(null);
$thumb-border-width: dynamic(1px);
$thumb-border-style: dynamic(solid);
$thumb-border-color: dynamic($neutral-medium-dark-color);
$thumb-border-radius: dynamic($thumb-height / 2);
$thumb-border-radius-big: dynamic($thumb-height-big / 2);
$thumb-icon: dynamic($fa-var-circle);
$thumb-icon-color: dynamic($highlight-color);
$thumb-icon-size: dynamic(7px);
$thumb-icon-size-big: dynamic(.8rem);
$thumb-icon-font-size: dynamic($thumb-icon-size);
$thumb-icon-font-size-big: dynamic($thumb-icon-size-big);
$thumb-box-shadow: dynamic(1px 1px 2px $neutral-dark-color);
$thumb-box-shadow-big: dynamic($thumb-box-shadow);
@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 {
color: $icon-color;
size: $icon-size;
size-big: $icon-size-big;
@include icon(
$icon: $icon,
$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}thumb-sizer#{$ui-suffix} {
height: $height;
@if $enable-big {
.#{$prefix}big & {
height: $height-big;
}
}
}
}
@mixin thumb-toggle-on-ui {
@include thumb-ui(
$ui: 'toggle-on'
);
}
@mixin thumb-toggle-off-ui {
@include thumb-ui(
$ui: 'toggle-off'
);
}