extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'comparison'
  - var parent = 'experimentals'
  - var title = 'Comparison sliders - Experimentals - Spectre.css CSS Framework'
  - var description = 'Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

block docs-content
  +docs-heading('comparison', 'Comparison sliders')
    p
      small.label.label-secondary CSS ONLY

    include ../_layout/_ad-g.pug

    p
      | Comparison Sliders are sliders for comparing two images. It is built in pure CSS.

    .docs-demo.columns
      .column.col-12
        .comparison-slider
          figure.comparison-before
            img.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
            .comparison-label Before
          figure.comparison-after
            img.filter-grayscale.rounded(src="../img/macos-sierra-2.jpg" alt="macOS Sierra Wallpaper")
            .comparison-label After
            textarea.comparison-resizer(readonly="")

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="comparison-slider">
            <figure class="comparison-before">
              <!-- image (before) -->
              <div class="comparison-label">Before</div>
            </figure>

            <figure class="comparison-after">
              <!-- image (after) -->
              <div class="comparison-label">After</div>
              <textarea class="comparison-resizer" readonly></textarea>
            </figure>
          </div>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug