vue-cesium
Version:
Vue 3.x components for CesiumJS.
1 lines • 6.15 kB
CSS
.vc-slider{position:relative}.vc-slider--h{width:100%}.vc-slider--v{height:200px}.vc-slider--editable .vc-slider__track-container{cursor:grab}.vc-slider__track-container{outline:0}.vc-slider__track-container--h{width:100%;padding:12px 0}.vc-slider__track-container--h .vc-slider__selection{will-change:width,left}.vc-slider__track-container--v{height:100%;padding:0 12px}.vc-slider__track-container--v .vc-slider__selection{will-change:height,top}.vc-slider__track{color:var(--vc-primary);background:rgba(0,0,0,.1);border-radius:4px;width:inherit;height:inherit}.vc-slider__inner{background:rgba(0,0,0,.1);border-radius:inherit;width:100%;height:100%}.vc-slider__selection{background:currentColor;border-radius:inherit;width:100%;height:100%}.vc-slider__markers{color:rgba(0,0,0,.3);border-radius:inherit;width:100%;height:100%}.vc-slider__markers:after{content:"";position:absolute;background:currentColor}.vc-slider__markers--h{background-image:repeating-linear-gradient(to right,currentColor,currentColor 2px,rgba(255,255,255,0) 0,rgba(255,255,255,0))}.vc-slider__markers--h:after{height:100%;width:2px;top:0;right:0}.vc-slider__markers--v{background-image:repeating-linear-gradient(to bottom,currentColor,currentColor 2px,rgba(255,255,255,0) 0,rgba(255,255,255,0))}.vc-slider__markers--v:after{width:100%;height:2px;left:0;bottom:0}.vc-slider__marker-labels-container{position:relative;width:100%;height:100%;min-height:24px;min-width:24px}.vc-slider__marker-labels{position:absolute}.vc-slider__marker-labels--h-standard{top:0}.vc-slider__marker-labels--h-switched{bottom:0}.vc-slider__marker-labels--h-ltr{transform:translateX(-50%)}.vc-slider__marker-labels--h-rtl{transform:translateX(50%)}.vc-slider__marker-labels--v-standard{left:4px}.vc-slider__marker-labels--v-switched{right:4px}.vc-slider__marker-labels--v-ltr{transform:translateY(-50%)}.vc-slider__marker-labels--v-rtl{transform:translateY(50%)}.vc-slider__thumb{z-index:1;outline:0;color:var(--vc-primary);transition:transform .18s ease-out,fill .18s ease-out,stroke .18s ease-out}.vc-slider__thumb.vc-slider--focus{opacity:1}.vc-slider__thumb--h{top:50%;will-change:left}.vc-slider__thumb--h-ltr{transform:scale(1) translate(-50%,-50%)}.vc-slider__thumb--h-rtl{transform:scale(1) translate(50%,-50%)}.vc-slider__thumb--v{left:50%;will-change:top}.vc-slider__thumb--v-ltr{transform:scale(1) translate(-50%,-50%)}.vc-slider__thumb--v-rtl{transform:scale(1) translate(-50%,50%)}.vc-slider__thumb-shape{top:0;left:0;stroke-width:3.5;stroke:currentColor;transition:transform .28s}.vc-slider__thumb-shape path{stroke:currentColor;fill:currentColor}.vc-slider__focus-ring{border-radius:50%;opacity:0;transition:transform .266s ease-out,opacity .266s ease-out,background-color .266s ease-out;transition-delay:.14s}.vc-slider__pin{opacity:0;white-space:nowrap;transition:opacity .28s ease-out;transition-delay:.14s}.vc-slider__pin:before{content:"";width:0;height:0;position:absolute}.vc-slider__pin--h:before{border-left:6px solid transparent;border-right:6px solid transparent;left:50%;transform:translateX(-50%)}.vc-slider__pin--h-standard{bottom:100%}.vc-slider__pin--h-standard:before{bottom:2px;border-top:6px solid currentColor}.vc-slider__pin--h-switched{top:100%}.vc-slider__pin--h-switched:before{top:2px;border-bottom:6px solid currentColor}.vc-slider__pin--v{top:0}.vc-slider__pin--v:before{top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent}.vc-slider__pin--v-standard{left:100%}.vc-slider__pin--v-standard:before{left:2px;border-right:6px solid currentColor}.vc-slider__pin--v-switched{right:100%}.vc-slider__pin--v-switched:before{right:2px;border-left:6px solid currentColor}.vc-slider__label{z-index:1;white-space:nowrap;position:absolute}.vc-slider__label--h{left:50%;transform:translateX(-50%)}.vc-slider__label--h-standard{bottom:7px}.vc-slider__label--h-switched{top:7px}.vc-slider__label--v{top:50%;transform:translateY(-50%)}.vc-slider__label--v-standard{left:7px}.vc-slider__label--v-switched{right:7px}.vc-slider__text-container{min-height:25px;padding:2px 8px;border-radius:4px;background:currentColor;position:relative;text-align:center}.vc-slider__text{color:#fff;font-size:12px}.vc-slider--no-value .vc-slider__inner,.vc-slider--no-value .vc-slider__selection,.vc-slider--no-value .vc-slider__thumb{opacity:0}.vc-slider--focus .vc-slider__focus-ring,body.desktop .vc-slider.vc-slider--editable .vc-slider__track-container:hover .vc-slider__focus-ring{background:currentColor;transform:scale3d(1.55,1.55,1);opacity:.25}.vc-slider--focus .vc-slider__inner,.vc-slider--focus .vc-slider__selection,.vc-slider--focus .vc-slider__thumb,body.desktop .vc-slider.vc-slider--editable .vc-slider__track-container:hover .vc-slider__inner,body.desktop .vc-slider.vc-slider--editable .vc-slider__track-container:hover .vc-slider__selection,body.desktop .vc-slider.vc-slider--editable .vc-slider__track-container:hover .vc-slider__thumb{opacity:1}.vc-slider--inactive .vc-slider__thumb--h{transition:left .28s,right .28s}.vc-slider--inactive .vc-slider__thumb--v{transition:top .28s,bottom .28s}.vc-slider--inactive .vc-slider__selection{transition:width .28s,left .28s,right .28s,height .28s,top .28s,bottom .28s}.vc-slider--inactive .vc-slider__text-container{transition:transform .28s}.vc-slider--active{cursor:grabbing}.vc-slider--active .vc-slider__thumb-shape{transform:scale(1.5)}.vc-slider--active .vc-slider__focus-ring,.vc-slider--active.vc-slider--label .vc-slider__thumb-shape{transform:scale(0)}body.desktop .vc-slider.vc-slider--enabled .vc-slider__track-container:hover .vc-slider__pin{opacity:1}.vc-slider--label .vc-slider--focus .vc-slider__pin,.vc-slider--label.vc-slider--active .vc-slider__pin,.vc-slider--label.vc-slider--label-always .vc-slider__pin{opacity:1}.vc-slider--dark .vc-slider__track{background:rgba(255,255,255,.1)}.vc-slider--dark .vc-slider__inner{background:rgba(255,255,255,.1)}.vc-slider--dark .vc-slider__markers{color:rgba(255,255,255,.3)}.vc-slider--dense .vc-slider__track-container--h{padding:6px 0}.vc-slider--dense .vc-slider__track-container--v{padding:0 6px}