@import "../styles/mixins/index.less"; @import "../styles/themes/index.less"; .@{wux-prefix}-slider { position: relative; z-index: 1; display: flex; align-items: center; &__rail-wrap { position: relative; flex: 1; width: 100%; padding: @slider-rail-margin; } &__rail { width: 100%; height: @slider-rail-size; background-color: @slider-rail-bg; border-radius: @slider-radius; vertical-align: middle; position: relative; } &__track { position: absolute; left: 0; height: @slider-rail-size; border-radius: @slider-radius; background-color: @slider-track-bg; } &__handle { background-color: @slider-handle-bg; border-radius: 50%; height: @slider-handle-size; left: 0; top: 50%; position: absolute; width: @slider-handle-size; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); transform: translate3d(-50%, -50%, 0); transition: transform .2s; &::after { content: attr(data-meta); color: #fff; position: absolute; pointer-events: none; display: none; opacity: 0; visibility: hidden; z-index: 15; font-size: @slider-font-size; line-height: 1.25; padding: 4px 8px; border-radius: @slider-radius; background-color: rgba(0, 0, 0, .7); white-space: nowrap; text-align: center; left: 50%; bottom: 100%; margin-bottom: 10px; transform: translateX(-50%); } &--last { z-index: 2; } &--is-touched { transform: translate3d(-50%, -50%, 0) scale(1.3); } } &--has-tip &__handle--is-touched::after { display: block; opacity: 1; visibility: visible; } &__mark { .square(@slider-rail-size); position: absolute; border-radius: 50%; background-color: @slider-mark-bg; transform: translateX(-50%); } &__min, &__max { font-size: @slider-font-size; color: @text-color-secondary; } &__min { margin-right: @slider-margin; } &__max { margin-left: @slider-margin; } &--disabled { opacity: @disabled-opacity; } }