vue-amazing-ui/lib/slider/Slider.css

An Amazing Vue3 UI Components Library, Using TypeScript.

.slider-wrap[data-v-a3a1176f]{position:relative;cursor:pointer;touch-action:none}.slider-wrap .slider-rail[data-v-a3a1176f]{position:absolute;background-color:var(--slider-rail-color);border-radius:2px;transition:background-color .2s cubic-bezier(.4,0,.2,1)}.slider-wrap .slider-track[data-v-a3a1176f]{position:absolute;background-color:var(--slider-track-color);border-radius:2px;transition:background-color .2s cubic-bezier(.4,0,.2,1)}.slider-wrap .slider-dots[data-v-a3a1176f]{position:absolute;background:transparent;pointer-events:none}.slider-wrap .slider-dots .slider-dot[data-v-a3a1176f]{position:absolute;width:8px;height:8px;background-color:var(--slider-dot-color);border:2px solid var(--slider-dot-border-color);border-radius:50%;cursor:pointer;transition:border-color .2s cubic-bezier(.4,0,.2,1)}.slider-wrap .slider-dots .slider-dot-active[data-v-a3a1176f]{border-color:var(--slider-dot-color-active)}.slider-wrap .slider-marks[data-v-a3a1176f]{position:absolute;font-size:14px}.slider-wrap .slider-marks .slider-mark[data-v-a3a1176f]{position:absolute;display:inline-block;color:var(--slider-mark-color);text-align:center;word-break:keep-all;cursor:pointer;-webkit-user-select:none;user-select:none}.slider-wrap .slider-marks .slider-mark[data-v-a3a1176f] strong{color:inherit}.slider-wrap .slider-marks .slider-mark[data-v-a3a1176f] svg{fill:currentColor}.slider-wrap .slider-marks .slider-mark-active[data-v-a3a1176f]{color:var(--slider-mark-color-active)}.slider-wrap:hover .slider-rail[data-v-a3a1176f]{background:var(--slider-rail-color-hover)}.slider-wrap:hover .slider-track[data-v-a3a1176f]{background:var(--slider-track-color-hover)}.slider-wrap:hover .slider-dots .slider-dot[data-v-a3a1176f]{border-color:var(--slider-dot-border-color-hover)}.slider-wrap:hover .slider-dots .slider-dot-active[data-v-a3a1176f]{border-color:var(--slider-track-color-hover)}.slider-wrap .slider-handle[data-v-a3a1176f]{position:absolute;width:10px;height:10px;background:var(--slider-handle-color);box-shadow:0 0 0 2px var(--slider-handle-shadow-color);border-radius:50%;outline:none;transition:width .2s cubic-bezier(.4,0,.2,1),height .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}.slider-wrap .slider-handle[data-v-a3a1176f]:before{content:"";position:absolute;left:-2px;top:-2px;width:14px;height:14px;background-color:transparent}.slider-wrap .slider-handle .hover-focus-handle[data-v-a3a1176f]{width:12px;height:12px;box-shadow:0 0 0 4px var(--slider-handle-shadow-color-hover-focus)}.slider-wrap .slider-handle[data-v-a3a1176f]:hover,.slider-wrap .slider-handle[data-v-a3a1176f]:focus{width:12px;height:12px;box-shadow:0 0 0 4px var(--slider-handle-shadow-color-hover-focus)}.slider-wrap .slider-handle[data-v-a3a1176f]:hover:before,.slider-wrap .slider-handle[data-v-a3a1176f]:focus:before{left:-5px;top:-5px;width:20px;height:20px}.slider-wrap .slider-handle .handle-tooltip[data-v-a3a1176f]{position:relative;display:inline-block;width:max-content;min-width:32px;max-width:250px;padding:6px 8px;height:32px;font-size:14px;color:var(--slider-tooltip-color);line-height:20px;text-align:center;border-radius:6px;background:var(--slider-tooltip-bg-color);box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d;pointer-events:none;-webkit-user-select:none;user-select:none;outline:none;opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1)}.slider-wrap .slider-handle .handle-tooltip .tooltip-arrow[data-v-a3a1176f]{position:absolute;z-index:9;display:block;pointer-events:none;width:16px;height:16px;overflow:hidden}.slider-wrap .slider-handle .handle-tooltip .tooltip-arrow[data-v-a3a1176f]:before{position:absolute;bottom:0;left:0;width:16px;height:8px;background-color:var(--slider-tooltip-bg-color);clip-path:path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z");content:""}.slider-wrap .slider-handle .handle-tooltip .tooltip-arrow[data-v-a3a1176f]:after{position:absolute;width:8.97056275px;height:8.97056275px;bottom:0;left:0;right:0;margin:auto;border-radius:0 0 2px;transform:translateY(50%) rotate(-135deg);box-shadow:3px 3px 7px #0000001a;z-index:0;background:transparent;content:""}.slider-horizontal[data-v-a3a1176f]{padding-block:4px;height:12px;margin:10px 5px}.slider-horizontal .slider-rail[data-v-a3a1176f]{height:4px;width:100%}.slider-horizontal .slider-track[data-v-a3a1176f]{height:4px}.slider-horizontal .slider-dots[data-v-a3a1176f]{left:0;top:4px;width:100%;height:4px}.slider-horizontal .slider-dots .slider-dot[data-v-a3a1176f]{margin-left:-4px;position:absolute;top:-2px}.slider-horizontal .slider-marks[data-v-a3a1176f]{left:0;top:14px;width:100%}.slider-horizontal .slider-handle[data-v-a3a1176f]{top:50%}.slider-horizontal .slider-handle .handle-tooltip[data-v-a3a1176f]{top:-32px;left:50%;transform:translate(-50%,-50%) scale(.8)}.slider-horizontal .slider-handle .handle-tooltip .tooltip-arrow[data-v-a3a1176f]{left:50%;bottom:0;transform:translate(-50%) translateY(100%) rotate(180deg)}.slider-horizontal .slider-handle .show-handle-tooltip[data-v-a3a1176f],.slider-horizontal .slider-handle:hover .handle-tooltip[data-v-a3a1176f]{pointer-events:auto;transform:translate(-50%,-50%) scale(1);opacity:1}.slider-horizontal.slider-with-marks[data-v-a3a1176f]{margin-bottom:30px}.slider-vertical[data-v-a3a1176f]{padding-inline:4px;width:12px;margin:5px 10px}.slider-vertical .slider-rail[data-v-a3a1176f]{width:4px;height:100%}.slider-vertical .slider-track[data-v-a3a1176f]{width:4px}.slider-vertical .slider-dots[data-v-a3a1176f]{left:4px;top:0;height:100%;width:4px}.slider-vertical .slider-dots .slider-dot[data-v-a3a1176f]{margin-bottom:-4px;position:absolute;left:-2px}.slider-vertical .slider-marks[data-v-a3a1176f]{left:18px;top:0;height:100%}.slider-vertical .slider-handle[data-v-a3a1176f]{left:50%}.slider-vertical .slider-handle .handle-tooltip[data-v-a3a1176f]{left:100%;top:50%;transform:translate(16px,-50%) scale(.8)}.slider-vertical .slider-handle .handle-tooltip .tooltip-arrow[data-v-a3a1176f]{top:50%;left:0;transform:translateY(-50%) translate(-100%) rotate(-90deg)}.slider-vertical .slider-handle .show-handle-tooltip[data-v-a3a1176f],.slider-vertical .slider-handle:hover .handle-tooltip[data-v-a3a1176f]{pointer-events:auto;transform:translate(16px,-50%) scale(1);opacity:1}.slider-disabled[data-v-a3a1176f]{cursor:not-allowed}.slider-disabled .slider-rail[data-v-a3a1176f]{background:var(--slider-rail-color-disabled)}.slider-disabled .slider-track[data-v-a3a1176f]{background:var(--slider-track-color-disabled)}.slider-disabled .slider-handle[data-v-a3a1176f]{box-shadow:0 0 0 2px var(--slider-handle-shadow-color-disabled)}.slider-disabled .slider-handle[data-v-a3a1176f]:hover,.slider-disabled .slider-handle[data-v-a3a1176f]:focus{width:10px;height:10px;box-shadow:0 0 0 2px var(--slider-handle-shadow-color-disabled)}.slider-disabled:hover .slider-rail[data-v-a3a1176f]{background:var(--slider-rail-color-disabled)}.slider-disabled:hover .slider-track[data-v-a3a1176f]{background:var(--slider-track-color-disabled)}.slider-vertical.slider-with-marks[data-v-a3a1176f]{margin-right:36px}