extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'bars'
  - var parent = 'components'
  - var title = 'Bars - Components - Spectre.css CSS Framework'
  - var description = 'Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('bars', 'Bars')
    include ../_layout/_ad-g.pug

    p
      | Bars represent the progress of a task or the value within the known range.
      | Bars are custom components for displaying HTML5 #{'<progress>'}, #{'<meter>'} and input range elements.

    .docs-demo.columns
      .column.col-8.col-xs-12
        .bar.bar-sm
          .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
      .column.col-8.col-xs-12
        .bar
          .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
      .column.col-8.col-xs-12
        .bar
          .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
          .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15%
          .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10%
          .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15%

    p
      | Add a container element with the #[code bar] class.
      | And add child elements with the #[code bar-item] class.
      | The width percentage value is needed for every #[code bar-item].

    p
      | There is the #[code bar-sm] class for thinner Bars.
      | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item].

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- normal bars -->
          <div class="bar bar-sm">
            <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
          </div>

          <!-- multi-bars -->
          <div class="bar">
            <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
            <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
          </div>

    +docs-subheading('bars-slider', 'Slider bars')

    .docs-demo.columns
      .column.col-8.col-xs-12
        .bar.bar-slider
          .bar-item(role="progressbar" style="width:50%;")
            button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
      .column.col-8.col-xs-12
        .bar.bar-slider
          .bar-item(role="progressbar" style="width:15%;")
            button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider")
          .bar-item(role="progressbar" style="width:65%;")
            button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider")

    p
      | You can add the #[code bar-slider] class to the Bars container.
      | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item.
      | You need to set the #[code bar-item] width manually to have the slider point.

    p
      | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <!-- normal slider -->
          <div class="bar bar-slider">
            <div class="bar-item" role="progressbar" style="width:25%;">
              <button class="bar-slider-btn btn" role="slider"></button>
            </div>
          </div>

          <!-- range slider -->
          <div class="bar bar-slider">
            <div class="bar-item" role="progressbar" style="width:15%;">
              <button class="bar-slider-btn btn" role="slider"></button>
            </div>
            <div class="bar-item" role="progressbar" style="width:65%;">
              <button class="bar-slider-btn btn" role="slider"></button>
            </div>
          </div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug