@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
1 lines • 6.09 kB
CSS
.dnb-slider{--slider-track-height:0.25rem;--slider-thumb-size:2rem;--slider-button-size:1.5rem;--slider-space:1rem;--slider-line-before:#000;--slider-line-after:gray;--slider-line-before--disabled:dimgray;--slider-line-after--disabled:#d3d3d3;--slider-marker:var(--slider-line-before);--slider-marker-height:calc(var(--slider-thumb-size)*0.75);--slider-marker-width:0.125rem;-webkit-touch-callout:none;display:flex;font-size:var(--font-size-small);line-height:var(--slider-thumb-size);-webkit-user-select:none;user-select:none}.dnb-slider--stretch{width:100%}.dnb-slider--vertical{display:flex;height:100%;min-height:inherit;min-width:inherit;width:auto}.dnb-slider__wrapper{display:inline-flex;flex:1;flex-direction:column;width:100%}.dnb-slider--vertical .dnb-slider__wrapper{align-items:center;height:100%;width:auto}.dnb-slider__inner{display:inline-flex;height:var(--slider-thumb-size)}.dnb-slider__suffix{align-self:center}.dnb-slider--vertical .dnb-slider__suffix{padding-left:0;padding-top:.5rem}.dnb-slider__marker{background-color:var(--slider-marker);bottom:0;height:var(--slider-marker-height);margin:auto;position:absolute;top:0;width:var(--slider-marker-width);z-index:3}.dnb-slider__marker:focus{outline:none}html[data-whatinput=keyboard] .dnb-slider__marker:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-slider__marker:before{content:"";height:100%;position:absolute;transform:scaleX(10);width:100%}.dnb-slider--vertical .dnb-slider__marker{bottom:auto;height:var(--slider-marker-width);left:0;right:0;top:auto;width:var(--slider-marker-height)}.dnb-slider--vertical .dnb-slider__marker:before{transform:scaleY(10)}.dnb-slider__track{cursor:pointer;flex:1;margin:0 calc(var(--slider-space)*1.5);min-width:2rem;position:relative;touch-action:none}.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)*1.5) 0;min-height:2rem;min-width:auto}.dnb-slider--no-buttons .dnb-slider__track{margin:0 calc(var(--slider-space))}.dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)) 0}.dnb-slider--vertical .dnb-slider__inner{flex-direction:column;height:inherit;min-height:inherit;min-width:inherit;width:var(--slider-thumb-size)}.dnb-slider__line{background-color:var(--slider-line-before);border-radius:var(--slider-track-height);height:var(--slider-track-height);left:0;margin:0 calc(0px - var(--slider-space));position:absolute;top:50%;transform:translate3d(0,-50%,0)}.dnb-slider__line__before{z-index:2}.dnb-slider__line__after{background-color:var(--slider-line-after);right:0;z-index:1}.dnb-slider--vertical .dnb-slider__line{height:auto;left:50%;margin:calc(0px - var(--slider-space)) 0;top:0;transform:translate3d(-50%,0,0);width:var(--slider-track-height)}.dnb-slider--vertical .dnb-slider__line__before{bottom:0;top:0}.dnb-slider--vertical .dnb-slider__line__after{bottom:0}.dnb-slider__thumb{box-shadow:var(--shadow-sharp)}.dnb-slider__button-helper,.dnb-slider__thumb{border-radius:50%;display:flex;justify-content:center;left:0;position:absolute;top:0;transform:translate3d(-50%,0,0);z-index:4}.dnb-slider__button-helper,.dnb-slider__button-helper .dnb-button,.dnb-slider__thumb,.dnb-slider__thumb .dnb-button{height:var(--slider-thumb-size);width:var(--slider-thumb-size)}.dnb-slider--vertical .dnb-slider__thumb{transform:translate3d(0,-50%,0)}.dnb-slider__button.dnb-button--size-small{height:var(--slider-button-size);line-height:var(--slider-button-size);transform:translateY(.25rem);width:var(--slider-button-size);z-index:2}.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small{transform:translateX(.25rem)}.dnb-slider__state--disabled .dnb-slider__line,.dnb-slider__state--disabled .dnb-slider__thumb,.dnb-slider__state--disabled .dnb-slider__track{cursor:not-allowed}.dnb-slider__state--animate .dnb-slider__line,.dnb-slider__state--animate .dnb-slider__thumb{transition:left .25s var(--easing-default),top .25s var(--easing-default),bottom .25s var(--easing-default),right .25s var(--easing-default),box-shadow .25s var(--easing-default)}@media (prefers-reduced-motion:reduce){.dnb-slider__state--animate .dnb-slider__line,.dnb-slider__state--animate .dnb-slider__thumb{transition-duration:.01ms}}html[data-visual-test] .dnb-slider__line,html[data-visual-test] .dnb-slider__thumb{transition:none}.dnb-slider__button-helper{opacity:0;pointer-events:none;transform:translate3d(.0625rem,0,0);z-index:2}.dnb-slider__button-helper:not(:disabled):focus~.dnb-button{outline:none}html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-slider>.dnb-form-label{align-self:flex-start;line-height:var(--slider-thumb-size);margin-right:1rem}.dnb-slider>.dnb-form-label--vertical{line-height:var(--line-height-basis);margin-right:0}.dnb-slider__label--vertical{flex-direction:column}.dnb-slider__label--vertical.dnb-slider--vertical{align-items:center}.dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label{margin-bottom:.5rem;margin-right:0;text-align:center;width:100%}.dnb-slider .dnb-form-status{margin-top:.5rem;order:2}.dnb-slider--vertical .dnb-form-status{margin-top:1rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-slider{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-slider>.dnb-form-label{margin-bottom:.5rem}}.dnb-slider.dnb-skeleton .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__marker,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:before,.dnb-slider.dnb-skeleton .dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__track:before{background-color:var(--skeleton-color)}