wishthis/semantic/dist/components/slider.min.css

1 line
14 KiB
CSS
Raw Normal View History

2022-01-13 13:00:31 +00:00
.ui.slider:not(.vertical):not(.checkbox){width:100%;padding:1em .5em}.ui.slider:not(.checkbox){position:relative}.ui.slider:not(.checkbox):focus{outline:0}.ui.slider .inner{position:relative;z-index:2}.ui.slider:not(.vertical) .inner{height:1.5em}.ui.slider .inner:hover{cursor:auto}.ui.slider .inner .track{position:absolute;border-radius:4px;background-color:rgba(0,0,0,.05)}.ui.slider:not(.vertical) .inner .track{width:100%;height:.4em;top:.55em;left:0}.ui.slider .inner .track-fill{position:absolute;border-radius:4px;background-color:#1b1c1d}.ui.slider:not(.vertical) .inner .track-fill{height:.4em;top:.55em;left:0}.ui.slider .inner .thumb{position:absolute;left:0;top:0;height:1.5em;width:1.5em;background:#fff -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#fff -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#fff linear-gradient(transparent,rgba(0,0,0,.05));border-radius:100%;-webkit-box-shadow:0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset;box-shadow:0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset;-webkit-transition:background .3s ease;transition:background .3s ease}.ui.slider:not(.disabled) .inner .thumb:hover{cursor:pointer;background:#f2f2f2 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#f2f2f2 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#f2f2f2 linear-gradient(transparent,rgba(0,0,0,.05))}.ui.slider:not(.disabled):focus .inner .thumb{background:#f2f2f2 -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));background:#f2f2f2 -webkit-linear-gradient(transparent,rgba(0,0,0,.05));background:#f2f2f2 linear-gradient(transparent,rgba(0,0,0,.05))}.ui.disabled.slider:not(.checkbox){opacity:.5}.ui.disabled.slider .inner:hover{cursor:auto}.ui.disabled.slider .inner .track-fill{background:#ccc}.ui.reversed.slider .inner .track-fill{left:auto;right:0}.ui.reversed.slider:not(.vertical) .inner .thumb{left:auto;right:0}.ui.reversed.vertical.slider .inner .thumb{left:.03em}.ui.labeled.reversed.slider>.labels .label{-webkit-transform:translate(-100%,-100%);transform:translate(-100%,-100%)}.ui.vertical.slider{height:100%;width:1.5em;padding:.5em 1em}.ui.vertical.slider .inner{height:100%}.ui.vertical.slider .inner .track{height:100%;width:.4em;left:.55em;top:0}.ui.vertical.slider .inner .track-fill{width:.4em;left:.55em;top:0}.ui.vertical.reversed.slider .inner .thumb{top:auto;bottom:0}.ui.vertical.reversed.slider .inner .track-fill{top:auto;bottom:0}.ui.labeled.slider>.labels{height:1.5em;width:auto;margin:0;padding:0;position:absolute;top:50%;left:0;right:0}.ui.labeled.slider:not(.vertical)>.labels{-webkit-transform:translateY(-50%);transform:translateY(-50%)}.ui.labeled.slider>.labels .label{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:.2em 0;position:absolute;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%);white-space:nowrap}.ui.bottom.aligned.labeled.slider>.labels .label{bottom:0;-webkit-transform:translate(-50%,100%);transform:translate(-50%,100%)}.ui.labeled.ticked.slider>.labels .label:after{content:' ';height:1.5em;width:1px;background:#ccc;position:absolute;top:100%;left:50%}.ui.bottom.aligned.labeled.ticked.slider>.labels .label:after{top:auto;bottom:100%}.ui.labeled.ticked.slider>.labels .halftick.label:after{height:.75em}.ui.labeled.vertical.slider>.labels{width:1.5em;height:auto;left:50%;top:0;bottom:0;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.ui.labeled.vertical.slider>.labels .label{-webkit-transform:translate(-100%,-50%);transform:translate(-100%,-50%)}.ui.labeled.vertical.slider>.labels .label:after{width:1.5em;height:1px;left:100%;top:50%}.ui.labeled.vertical.slider>.labels .halftick.label:after{width:.75em;height:1px}.ui.labeled.vertical.reversed.slider>.labels .label{-webkit-transform:translate(-100%,50%);transform:translate(-100%,50%)}.ui.hover.slider .inner .thumb{opacity:0;-webkit-transition:opacity .2s linear;transition:opacity .2s