@use "sass:map"; @use "sass:list"; @use '../helpers/baseMixin.scss'; $sliderThemeList: ( ( name: "primary", textColor: var(--vxe-ui-font-primary-color), hoverColor: var(--vxe-ui-font-primary-lighten-color), activeColor: var(--vxe-ui-font-primary-darken-color), disabledColor: var(--vxe-ui-font-primary-disabled-color) ), ( name: "success", textColor: var(--vxe-ui-status-success-color), hoverColor: var(--vxe-ui-status-success-lighten-color), activeColor: var(--vxe-ui-status-success-darken-color), disabledColor: var(--vxe-ui-status-success-disabled-color) ), ( name: "info", textColor: var(--vxe-ui-status-info-color), hoverColor: var(--vxe-ui-status-info-lighten-color), activeColor: var(--vxe-ui-status-info-darken-color), disabledColor: var(--vxe-ui-status-info-disabled-color) ), ( name: "warning", textColor: var(--vxe-ui-status-warning-color), hoverColor: var(--vxe-ui-status-warning-lighten-color), activeColor: var(--vxe-ui-status-warning-darken-color), disabledColor: var(--vxe-ui-status-warning-disabled-color) ), ( name: "danger", textColor: var(--vxe-ui-status-danger-color), hoverColor: var(--vxe-ui-status-danger-lighten-color), activeColor: var(--vxe-ui-status-danger-darken-color), disabledColor: var(--vxe-ui-status-danger-disabled-color) ), ( name: "error", textColor: var(--vxe-ui-status-error-color), hoverColor: var(--vxe-ui-status-error-lighten-color), activeColor: var(--vxe-ui-status-error-darken-color), disabledColor: var(--vxe-ui-status-error-disabled-color) ) ); .vxe-slider { position: relative; display: block; padding: 0.5em 1em; @for $index from 0 to list.length($sliderThemeList) { $item: list.nth($sliderThemeList, $index + 1); &.theme--#{map.get($item, name)} { .vxe-slider--bar-track { background-color: map.get($item, textColor); &:hover { background-color: map.get($item, hoverColor); } &:hover { background-color: map.get($item, activeColor); } } .vxe-slider--bar-btn { background-color: map.get($item, textColor); } } } &.is--disabled { .vxe-slider--bar-btn { cursor: not-allowed; } } &:not(.is--disabled) { .vxe-slider--bar-wrapper, .vxe-slider--inner { cursor: pointer; } .vxe-slider--bar-btn { &:hover { transform: scale(1.2); } &:active { transform: scale(1.1); } } } &.is--readonly { .vxe-slider--bar-wrapper, .vxe-slider--inner { cursor: default; } } } .vxe-slider--inner { position: relative; } .vxe-slider--bar-wrapper { background-color: #e4e7ed; } .vxe-slider--bar-track { position: absolute; left: 0; top: 0; z-index: 1; background-color: var(--vxe-ui-font-primary-color); &:hover { background-color: var(--vxe-ui-font-primary-lighten-color); } &:active { background-color: var(--vxe-ui-font-primary-darken-color); } } .vxe-slider--bar-wrapper, .vxe-slider--bar-track { height: 0.3em; border-radius: var(--vxe-ui-base-border-radius); } .vxe-slider--bar-btn { position: absolute; width: 0.9em; height: 0.9em; top: -0.3em; border-radius: 50%; border: 0.15em solid var(--vxe-ui-font-primary-color); background-color: #fff; cursor: pointer; z-index: 1; @include baseMixin.createAnimationTransition(transform, 0.1s); } .vxe-slider--start-btn { left: -0.45em; } .vxe-slider--end-btn { right: -0.45em; }