| 1 |
- .el-slider{--el-slider-main-bg-color:var(--el-color-primary);--el-slider-runway-bg-color:var(--el-border-color-light);--el-slider-stop-bg-color:var(--el-color-white);--el-slider-disabled-color:var(--el-text-color-placeholder);--el-slider-border-radius:3px;--el-slider-height:6px;--el-slider-button-size:20px;--el-slider-button-wrapper-size:36px;--el-slider-button-wrapper-offset:-15px;align-items:center;display:flex;height:32px;width:100%}.el-slider__runway{background-color:var(--el-slider-runway-bg-color);border-radius:var(--el-slider-border-radius);cursor:pointer;flex:1;height:var(--el-slider-height);position:relative}.el-slider__runway.show-input{margin-right:30px;width:auto}.el-slider__runway.is-disabled{cursor:default}.el-slider__runway.is-disabled .el-slider__bar{background-color:var(--el-slider-disabled-color)}.el-slider__runway.is-disabled .el-slider__button{border-color:var(--el-slider-disabled-color)}.el-slider__runway.is-disabled .el-slider__button-wrapper.hover,.el-slider__runway.is-disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.el-slider__runway.is-disabled .el-slider__button-wrapper.dragging{cursor:not-allowed}.el-slider__runway.is-disabled .el-slider__button.dragging,.el-slider__runway.is-disabled .el-slider__button.hover,.el-slider__runway.is-disabled .el-slider__button:hover{transform:scale(1)}.el-slider__runway.is-disabled .el-slider__button.hover,.el-slider__runway.is-disabled .el-slider__button:hover{cursor:not-allowed}.el-slider__runway.is-disabled .el-slider__button.dragging{cursor:not-allowed}.el-slider__input{flex-shrink:0;width:130px}.el-slider__bar{background-color:var(--el-slider-main-bg-color);border-bottom-left-radius:var(--el-slider-border-radius);border-top-left-radius:var(--el-slider-border-radius);height:var(--el-slider-height);position:absolute}.el-slider__button-wrapper{background-color:transparent;height:var(--el-slider-button-wrapper-size);line-height:normal;outline:none;position:absolute;text-align:center;top:var(--el-slider-button-wrapper-offset);transform:translateX(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:var(--el-slider-button-wrapper-size);z-index:1}.el-slider__button-wrapper:after{content:"";display:inline-block;height:100%;vertical-align:middle}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__button{background-color:var(--el-color-white);border:2px solid var(--el-slider-main-bg-color);border-radius:50%;box-sizing:border-box;display:inline-block;height:var(--el-slider-button-size);transition:var(--el-transition-duration-fast);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;width:var(--el-slider-button-size)}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.2)}.el-slider__button.hover,.el-slider__button:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__stop{background-color:var(--el-slider-stop-bg-color);border-radius:var(--el-border-radius-circle);height:var(--el-slider-height);position:absolute;transform:translateX(-50%);width:var(--el-slider-height)}.el-slider__marks{height:100%;left:12px;top:0;width:18px}.el-slider__marks-text{color:var(--el-color-info);font-size:14px;margin-top:15px;position:absolute;transform:translateX(-50%);white-space:pre}.el-slider.is-vertical{display:inline-flex;flex:0;height:100%;position:relative;width:auto}.el-slider.is-vertical .el-slider__runway{height:100%;margin:0 16px;width:var(--el-slider-height)}.el-slider.is-vertical .el-slider__bar{border-radius:0 0 3px 3px;height:auto;width:var(--el-slider-height)}.el-slider.is-vertical .el-slider__button-wrapper{left:var(--el-slider-button-wrapper-offset);top:auto;transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{transform:translateY(50%)}.el-slider.is-vertical .el-slider__marks-text{left:15px;margin-top:0;transform:translateY(50%)}.el-slider--large{height:40px}.el-slider--small{height:24px}
|
