| <style include="navi-colors-css"> |
| :host { |
| align-items: center; |
| display: flex; |
| } |
| |
| span { |
| background: var(--navi-step-indicator-color); |
| border-radius: 50%; |
| display: inline-block; |
| height: 8px; |
| margin: 0 4px; |
| width: 8px; |
| } |
| |
| span.active { |
| background: var(--navi-step-indicator-active-color); |
| } |
| |
| .screen-reader-only { |
| clip: rect(0, 0, 0, 0); |
| position: fixed; |
| } |
| </style> |
| <template is="dom-repeat" items="[[dots_]]"> |
| <span class$="[[getActiveClass_(index, model.active)]]"></span> |
| </template> |
| <div class="screen-reader-only"> |
| [[computeLabel_(model.active, model.total)]] |
| </div> |
