@import "../../style/themes/default"; @import "../../style/mixins/index"; @slider-prefix-cls: ~"@{ant-prefix}-slider"; // slider color @slider-disabled-color: @disabled-color; // tooltip @slider-tooltip-color: #fff; @slider-tooltip-bg: tint(@text-color, 4%); @slider-tooltip-arrow-width: 4px; @slider-tooltip-distance: @slider-tooltip-arrow-width + 4px; @slider-tooltip-arrow-color: @slider-tooltip-bg; .@{slider-prefix-cls} { .reset-component; position: relative; margin: 10px 6px; padding: 4px 0; height: 12px; cursor: pointer; .vertical(); &-with-marks { margin-bottom: 28px; } &-rail { position: absolute; width: 100%; height: 4px; border-radius: 2px; background-color: @border-color-split; transition: background-color 0.3s ease; } &-track { position: absolute; height: 4px; border-radius: @border-radius-base; background-color: tint(@primary-color, 60%); transition: background-color 0.3s ease; } &-handle { position: absolute; margin-left: -7px; margin-top: -5px; width: 14px; height: 14px; cursor: pointer; border-radius: 50%; border: solid 2px tint(@primary-color, 50%); background-color: @component-background; transition: border-color 0.3s ease, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28); &:hover { border-color: @primary-5; transform: scale(1.2); transform-origin: center center; } &:active { box-shadow: 0 0 0 2px fadeout(@primary-color, 80%); } } &:hover { .@{slider-prefix-cls}-rail { background-color: #e1e1e1; } .@{slider-prefix-cls}-track { background-color: tint(@primary-color, 40%); } .@{slider-prefix-cls}-handle { border-color: @primary-5; } } &-mark { position: absolute; top: 14px; left: 0; width: 100%; font-size: @font-size-base; } &-mark-text { position: absolute; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; color: @text-color-secondary; &-active { color: @text-color; } } &-step { position: absolute; width: 100%; height: 4px; background: transparent; } &-dot { position: absolute; top: -2px; margin-left: -4px; width: 8px; height: 8px; border: 2px solid @border-color-split; background-color: @component-background; cursor: pointer; border-radius: 50%; vertical-align: middle; &:first-child { margin-left: -4px; } &:last-child { margin-left: -4px; } &-active { border-color: tint(@primary-color, 50%); } } &-disabled { cursor: not-allowed; .@{slider-prefix-cls}-track { background-color: @slider-disabled-color !important; } .@{slider-prefix-cls}-handle, .@{slider-prefix-cls}-dot { border-color: @slider-disabled-color !important; background-color: @component-background; cursor: not-allowed; box-shadow: none; } .@{slider-prefix-cls}-mark-text, .@{slider-prefix-cls}-dot { cursor: not-allowed !important; } } } .vertical() { &-vertical { width: 12px; height: 100%; margin: 6px 10px; padding: 0 4px; .@{slider-prefix-cls}-rail { height: 100%; width: 4px; } .@{slider-prefix-cls}-track { width: 4px; } .@{slider-prefix-cls}-handle { margin-left: -5px; margin-bottom: -7px; } .@{slider-prefix-cls}-mark { top: 0; left: 12px; width: 18px; height: 100%; } .@{slider-prefix-cls}-mark-text { left: 4px; white-space: nowrap; } .@{slider-prefix-cls}-step { width: 4px; height: 100%; } .@{slider-prefix-cls}-dot { top: auto; left: 2px; margin-bottom: -4px; } } }