Tank - CSS API Reference

All Common CSS variables:

Specific CSS variables for Tank styling:

• --smart-tank-default-width: Tank default width.
• --smart-tank-default-height: Tank default height.
• --smart-tank-scale-size: Tank scale size.
• --smart-tank-thumb-width: Tank thumb width.
• --smart-tank-thumb-height: Tank thumb height.
• --smart-tank-tooltip-width: Tank tooltip width.
• --smart-tank-tooltip-height: Tank thumb height.
• --smart-tank-tick-size: Tank tick size. Horizontal Tank tick height = Vertical Tank tick width.
• --smart-tank-minor-tick-size: Tank minor tick size.
• --smart-tank-minimum-track-size: Tank horizontal track min-height, vertical track min-width.

The following CSS selectors can be used to style Tank:

• smart-tank - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - a container that holds the inner structure of the element. Normally it shoudn't be used for styling.
    • .smart-scale .smart-scale-near - a DIV element used to draw the near scale of the tank.
    • .smart-track - a DIV container that holds the fill, thumbs and inner track (used when the ticks are placed on the track).
    • .smart-value - a DIV element that represents the fill ( the value ) of the tank.
      • .smart-bubble-container - a container for the 'bubble' animations.
        • .smart-bubble - a bubble.
      • .smart-tooltip - a DIV element that represents the tooltip of the first thumb.
        • .smart-tooltip-content - a DIV element that holds the value for the first thumb tooltip.
    • .smart-thumb - a DIV element that represents the first thumb of the tank.
      • .smart-thumb-label - a label for the thumb. Used by some themes.
    • .smart-track-ticks-container - a DIV element that represents the inner scale of the tank ( when ticksPosition is set to "track").
    • .smart-scale .smart-scale-far - a DIV element used to draw the far scale of the tank.

Demo

<style>
        #tank{
                --smart-color: #ccc;
                --smart-font-size: 20px;
        }
</style>