smart-webcomponents-react/source/styles/components/smart.tank.css

[](https://jqwidgets.com/license/)

.smart-tank:focus,smart-slider:focus{outline:0}smart-slider.smart-element,smart-tank.smart-element{border:none;background:0 0;overflow:visible}.smart-tank[labels-visibility=endPoints] .smart-label-middle,.smart-tank[labels-visibility=none] .smart-label,smart-slider[labels-visibility=endPoints] .smart-label-middle,smart-slider[labels-visibility=none] .smart-label{visibility:hidden}.smart-tank *,smart-slider *{box-sizing:border-box}.smart-tank .smart-label,smart-slider .smart-label{font-family:inherit;font-size:inherit;white-space:nowrap;color:var(--smart-background-color);float:left}smart-tank{padding-left:5px;padding-right:5px;width:var(--smart-tank-default-width);height:var(--smart-tank-default-height)}smart-tank.smart-scale-far .smart-tick{top:initial}smart-slider .smart-container{overflow:visible}smart-slider .smart-scale{position:relative;user-select:none;pointer-events:none}smart-slider .smart-label{position:absolute}smart-slider .smart-tooltip{z-index:1}smart-slider .smart-tooltip-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}smart-slider .smart-track-container{touch-action:none}smart-slider .smart-track-ticks-container{position:absolute;width:100%;height:100%;pointer-events:none}smart-slider[ticks-visibility=major] .smart-tick,smart-slider[ticks-visibility=major] .smart-tick-minor,smart-slider[ticks-visibility=none] .smart-tick,smart-slider[ticks-visibility=none] .smart-tick-minor{display:none}.smart-tank .smart-container{overflow:visible}.smart-tank .smart-track{height:100%;width:calc(100% - var(--smart-tank-scale-size) - 4px);min-width:var(--smart-tank-minimum-track-size);position:relative;border:var(--smart-border) solid;border-width:var(--smart-border-width);background-color:var(--smart-background);float:left;border-top-left-radius:var(--smart-border-top-left-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);touch-action:none;margin:0 2px}.smart-tank .smart-track.track-hovered{cursor:pointer}.smart-tank .smart-track-ticks-container{position:absolute;width:100%;height:100%;pointer-events:none}.smart-tank .smart-value{width:100%;height:0;background-color:var(--smart-primary);border-color:var(--smart-primary);position:absolute}.smart-tank .smart-label{position:absolute}.smart-tank .smart-thumb{display:none;position:absolute;width:var(--smart-tank-thumb-width);height:var(--smart-tank-thumb-height);transform:scale(0);transition:transform .2s ease-out;left:calc(-1 * var(--smart-tank-thumb-width) * 2);top:calc(-1 * var(--smart-tank-thumb-height)/ 2);border-radius:50%;background-color:var(--smart-primary)}.smart-tank .smart-thumb:before{transform:scale(1.1) rotate(45deg);border:1px solid var(--smart-primary);border-radius:50% 0 50% 50%;background-color:var(--smart-primary);width:100%;height:100%;display:block;content:""}.smart-tank .smart-thumb-label-container{overflow:hidden;text-overflow:ellipsis;width:var(--smart-tank-thumb-width);height:var(--smart-tank-thumb-height);position:absolute;top:0;left:0}.smart-tank .smart-scale{position:relative;user-select:none;pointer-events:none;float:left;margin-top:var(--smart-border-width);margin-left:initial;height:calc(100% - var(--smart-border-width));width:var(--smart-tank-scale-size);max-width:calc(100% - var(--smart-tank-minimum-track-size) - 4px)}.smart-tank .smart-scale-near .smart-tick{bottom:initial;right:0}.smart-tank .smart-scale-near .smart-label{bottom:initial;right:calc(var(--smart-tank-tick-size) + 2px)}.smart-tank .smart-scale-far .smart-label{left:calc(var(--smart-tank-tick-size) + 2px);top:initial}.smart-tank .smart-tooltip{position:absolute;display:flex;align-items:center;justify-content:center;border:1px solid var(--smart-border);width:var(--smart-tank-tooltip-width);height:var(--smart-tank-tooltip-height);padding:5px;background-color:var(--smart-background);color:var(--smart-background-color);opacity:.7;left:calc(-1 * var(--smart-tank-tooltip-width) - 10.5px);top:calc(-1 * var(--smart-tank-tooltip-height)/ 2);z-index:1}.smart-tank .smart-tooltip.smart-hidden,.smart-tank:not([animation=none])[disabled] .bubble,.smart-tank:not([animation=none])[inverted] .bubble,.smart-tank:not([animation=none])[orientation=horizontal] .bubble,.smart-tank[ticks-visibility=major] .smart-tick,.smart-tank[ticks-visibility=major] .smart-tick-minor,.smart-tank[ticks-visibility=none] .smart-tick,.smart-tank[ticks-visibility=none] .smart-tick-minor{display:none}.smart-tank .smart-tooltip:before{content:"";width:0;height:0;border-right:none;border-left:6px solid var(--smart-border);border-top:6px solid transparent;border-bottom:6px solid transparent;position:absolute;top:calc(50% - 6px);right:-7px;left:auto}.smart-tank .smart-tooltip-content{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.smart-tank .smart-tick{position:absolute;background-color:var(--smart-background-color);float:initial;width:var(--smart-tank-tick-size);height:1px}.smart-tank .smart-tick-minor{width:var(--smart-tank-minor-tick-size);height:1px}.smart-tank:focus .smart-track{border-style:solid;border-color:var(--smart-outline);border-width:var(--smart-border-width)}.smart-tank:active .smart-track{cursor:n-resize}.smart-tank:not([animation=none]) .smart-value{transition:height .15s ease-out,margin-top .15s ease-out}.smart-tank:not([animation=none]) .smart-value.disable-animation{transition:none}.smart-tank:not([animation=none]) .smart-bubble-container{position:relative;overflow:hidden;touch-action:none;width:100%;height:100%;user-select:none}.smart-tank:not([animation=none]) .bubble{user-select:none;pointer-events:none;border-radius:50%;box-shadow:0 10px 20px rgba(0,0,0,.2),inset 0 10px 25px 5px #fff;width:50px;height:50px}.smart-tank:not([animation=none]) .bubble1{left:10%;top:40%;animation:animateBubble 12.5s linear infinite,sideWays 5s ease-in-out infinite alternate;transform:scale(.25)}.smart-tank:not([animation=none]) .bubble2{left:5%;top:35%;animation:animateBubble 15s linear infinite,sideWays 4.5s ease-in-out infinite alternate;transform:scale(.2)}.smart-tank:not([animation=none]) .bubble3{left:0;top:50%;animation:animateBubble 10s linear infinite,sideWays 7s ease-in-out infinite alternate;transform:scale(.3)}.smart-tank:not([animation=none]) .bubble4{left:10%;top:60%;animation:animateBubble 7s linear infinite,sideWays 11s ease-in-out infinite alternate;transform:scale(.275)}.smart-tank:not([animation=none]) .bubble5{left:8%;top:70%;animation:animateBubble 14.5s linear infinite,sideWays 8s ease-in-out infinite alternate;transform:scale(.35)}.smart-tank[disabled] .smart-track.track-hovered,.smart-tank[disabled]:active .smart-track,.smart-tank[readonly] .smart-track.track-hovered,.smart-tank[readonly]:active .smart-track{cursor:default}.smart-tank[inverted] .smart-thumb{top:calc(100% - var(--smart-tank-thumb-height)/ 2);margin-left:initial;margin-top:initial}.smart-tank[inverted] .smart-tooltip{left:calc(-1 * var(--smart-tank-tooltip-width) - 10.5px);top:calc(100% - 1 * var(--smart-tank-tooltip-height)/ 2)}.smart-tank[inverted]:focus .smart-thumb{top:calc(100% - var(--smart-tank-thumb-height)/ 2)}.smart-tank[inverted][tooltip-position=far] .smart-tooltip{top:calc(100% - var(--smart-tank-tooltip-height)/ 2)}.smart-tank[inverted][tooltip-position=far][scale-position=none] .smart-tooltip{left:calc(-100% - 7px)}.smart-tank[inverted][tooltip-position=near] .smart-tooltip{left:calc(-1 * var(--smart-tank-tooltip-width) - 10.5px);top:calc(100% - var(--smart-tank-tooltip-height)/ 2)}.smart-tank[inverted][orientation=vertical] .smart-thumb{top:calc(100% - var(--smart-tank-thumb-height)/ 2)}.smart-tank[ticks-visibility=none] .smart-scale-near .smart-label{right:2px}.smart-tank[ticks-visibility=none] .smart-scale-far .smart-label{left:2px;top:initial}.smart-tank[ticks-position=track] .smart-tick{width:100%}.smart-tank[ticks-position=track] .smart-tick-minor{width:80%;left:50%;transform:translateX(-50%)}.smart-tank[ticks-position=track] .smart-scale-near .smart-label{right:2px}.smart-tank[ticks-position=track] .smart-scale-far .smart-label{left:2px;top:initial}.smart-tank[tooltip-position=far] .smart-tooltip{left:calc(100% + 10.5px);top:calc(-1 * var(--smart-tank-tooltip-height)/ 2)}.smart-tank[tooltip-position=far] .smart-tooltip:before{border-left:none;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--smart-border);top:calc(50% - 6px);left:-7px}.smart-tank[show-thumb-label] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2);overflow:visible;display:initial}.smart-tank[show-thumb-label] .smart-thumb-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.65rem;font-family:var(--smart-font-family);user-select:none;color:var(--smart-background-color)}.smart-tank[show-thumb-label]:focus .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width) - var(--smart-tank-thumb-width)/ 2 - 2px);transform:scale(1)}.smart-tank[show-thumb-label]:not([animation=none]) .smart-thumb{transition:transform .2s ease-out,left .2s ease-in-out,top .2s ease-in-out}.smart-tank[show-thumb-label][thumb-label-position=far] .smart-thumb{left:calc(100% - var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal] .smart-thumb{left:100%;top:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal][inverted] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=far] .smart-thumb{left:100%;top:calc(100% - var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[show-thumb-label][orientation=horizontal][thumb-label-position=near] .smart-thumb{left:100%;top:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[thumb-label-position=far] .smart-thumb:before{border:1px solid var(--smart-primary);border-radius:50% 50% 50% 0}.smart-tank[thumb-label-position=far]:focus .smart-thumb{left:calc(100% + var(--smart-tank-thumb-width)/ 2 + 2px)}.smart-tank[scale-position=none] .smart-track{height:100%;width:100%;position:relative;border:var(--smart-border) solid;border-width:var(--smart-border-width);margin:0}.smart-tank[scale-position=none]:focus .smart-track{border-style:solid;border-color:var(--smart-outline);border-width:var(--smart-border-width)}.smart-tank[scale-position=none][tooltip-position=near] .smart-tooltip{top:calc(-1 * var(--smart-tank-tooltip-height)/ 2)}.smart-tank[scale-position=both] .smart-track{width:calc(100% - 2 * var(--smart-tank-scale-size) - 4px)}.smart-tank[scale-position=both] .smart-scale{width:var(--smart-tank-scale-size);height:100%;max-width:47%}.smart-tank[orientation=vertical][thumb-label-position=far] .smart-thumb:before{border:1px solid var(--smart-primary);border-radius:50% 50% 50% 0}.smart-tank[orientation=vertical]:not([animation=none]) .smart-value{transition:height .15s ease-out,margin-top .15s ease-out}.smart-tank[orientation=vertical]:not([animation=none]) .smart-value.disable-animation{transition:none}.smart-tank[orientation=horizontal]{padding-top:5px;padding-bottom:5px;padding-left:initial;padding-right:initial}.smart-tank[orientation=horizontal]:active .smart-track{cursor:w-resize}.smart-tank[orientation=horizontal] .smart-track{height:calc(100% - var(--smart-tank-scale-size) - 4px);min-height:var(--smart-tank-minimum-track-size);width:100%;background-color:transparent;margin-top:2px;margin-bottom:2px}.smart-tank[orientation=horizontal] .smart-value{height:100%;width:0}.smart-tank[orientation=horizontal] .smart-thumb{margin-left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[orientation=horizontal] .smart-thumb:before{border-radius:50% 50% 0}.smart-tank[orientation=horizontal] .smart-scale{width:100%;float:left;height:calc(var(--smart-tank-scale-size));margin-left:var(--smart-border-width)}.smart-tank[orientation=horizontal] .smart-scale-near .smart-tick{bottom:0;right:initial}.smart-tank[orientation=horizontal] .smart-scale-near .smart-label{bottom:calc(var(--smart-tank-tick-size) + 2px);right:initial}.smart-tank[orientation=horizontal] .smart-scale-far .smart-tick{top:0}.smart-tank[orientation=horizontal] .smart-scale-far .smart-label{top:calc(var(--smart-tank-tick-size) + 2px);left:initial}.smart-tank[orientation=horizontal] .smart-tooltip{top:calc(-1 * var(--smart-tank-tooltip-height) - 12px);left:calc(100% - var(--smart-tank-tooltip-width)/ 2)}.smart-tank[orientation=horizontal] .smart-tooltip:before{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--smart-border);position:absolute;top:100%;left:calc(var(--smart-tank-tooltip-width)/ 2 - 6px)}.smart-tank[orientation=horizontal] .smart-tick{float:left;width:1px;height:var(--smart-tank-tick-size)}.smart-tank[orientation=horizontal] .smart-tick-minor{height:var(--smart-tank-minor-tick-size);width:1px}.smart-tank[orientation=horizontal]:not([animation=none]) .smart-value{transition:width .15s ease-out,margin-left .15s ease-out}.smart-tank[orientation=horizontal]:not([animation=none]) .smart-value.disable-animation{transition:none}.smart-tank[orientation=horizontal][inverted] .smart-tooltip{top:calc(-1 * var(--smart-tank-tooltip-height) - 12px);left:calc(-1 * var(--smart-tank-tooltip-width)/ 2)}.smart-tank[orientation=horizontal][inverted]:focus .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}.smart-tank[orientation=horizontal][inverted][tooltip-position=far] .smart-tooltip{left:calc(-1 * var(--smart-tank-tooltip-width)/ 2);top:calc(100% + 12px)}.smart-tank[orientation=horizontal][ticks-visibility=none] .smart-scale-near .smart-label{bottom:2px}.smart-tank[orientation=horizontal][ticks-visibility=none] .smart-scale-far .smart-label{top:2px;left:initial}.smart-tank[orientation=horizontal][ticks-position=track] .smart-tick{height:100%;width:1px}.smart-tank[orientation=horizontal][ticks-position=track] .smart-tick-minor{height:80%;top:50%;transform:translateY(-50%)}.smart-tank[orientation=horizontal][ticks-position=track] .smart-scale-near .smart-label{bottom:2px}.smart-tank[orientation=horizontal][ticks-position=track] .smart-scale-far .smart-label{top:2px;left:initial}.smart-tank[orientation=horizontal][tooltip-position=near][inverted] .smart-tooltip{top:calc(-1 * var(--smart-tank-tooltip-height) - 12px);left:calc(-1 * var(--smart-tank-tooltip-width)/ 2)}.smart-tank[orientation=horizontal][tooltip-position=far] .smart-tooltip{top:calc(100% + 12px);left:calc(100% - var(--smart-tank-tooltip-width)/ 2)}.smart-tank[orientation=horizontal][tooltip-position=far] .smart-tooltip:before{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid var(--smart-border);border-top:0;position:absolute;left:calc(var(--smart-tank-tooltip-width)/ 2 - 6px);top:-7px}.smart-tank[orientation=horizontal][show-thumb-label]:focus .smart-thumb{left:100%;top:calc(-1 * var(--smart-tank-thumb-height) - var(--smart-tank-thumb-height)/ 2 - 2px)}.smart-tank[orientation=horizontal][show-thumb-label][thumb-label-position=far]:focus .smart-thumb{top:calc(100% + var(--smart-tank-thumb-height)/ 2)}.smart-tank[orientation=horizontal][thumb-label-position=far] .smart-thumb:before{border-radius:0 50% 50%}.smart-tank[orientation=horizontal][thumb-label-position=far]:focus .smart-thumb{left:100%}.smart-tank[orientation=horizontal][scale-position=none] .smart-track{height:100%;width:100%;position:relative;border:var(--smart-border) solid;border-width:var(--smart-border-width);background-color:transparent;margin-top:0;margin-bottom:0}.smart-tank[orientation=horizontal][scale-position=both] .smart-track{height:calc(100% - 2 * var(--smart-tank-scale-size) - 4px)}.smart-tank[orientation=horizontal][scale-position=both] .smart-scale{width:100%;height:var(--smart-tank-scale-size)}@keyframes sideWays{0%{margin-left:-10%}100%{margin-left:55%}}@keyframes animateBubble{0%{margin-top:100%}100%{margin-top:-100%}}smart-tank[right-to-left] .smart-label,smart-tank[right-to-left] .smart-tooltip-content{direction:rtl}smart-tank[right-to-left][show-thumb-label][orientation=horizontal] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2);margin-left:initial}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][inverted] .smart-thumb{left:100%;margin-left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far] .smart-thumb{left:calc(-1 * var(--smart-tank-thumb-width)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted] .smart-thumb{top:calc(100% - var(--smart-tank-thumb-width)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=far][inverted]:focus .smart-thumb{top:calc(100% + var(--smart-tank-thumb-height)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=near][inverted] .smart-thumb{top:calc(-1 * var(--smart-tank-thumb-width)/ 2)}smart-tank[right-to-left][show-thumb-label][orientation=horizontal][thumb-label-position=near][inverted]:focus .smart-thumb{top:calc(-1 * var(--smart-tank-thumb-height) - var(--smart-tank-thumb-height)/ 2 - 2px)}