extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'icons'
  - var parent = 'elements'
  - var title = 'Icons - Elements - Spectre.css CSS Framework'
  - var description = 'Icons are single-element, responsive and pure CSS icons. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('icons', 'Icons.css')
    p
      small.label.label-secondary CSS ONLY

    include ../_layout/_ad-g.pug

    .docs-demo.columns
      .column
        .toast.toast-primary
          | Spectre.css Icons will be moved to a new 
          a(href="https://github.com/picturepan2/icons.css" target="_blank") GitHub Repo
          |  while Spectre will only include basic icons.
    p
      | Icons.css are single-element, responsive and pure CSS icons.
      | You can include #[code spectre-icons.css] located in the #[code dist] folder to your web #{'<head>'} to have these CSS icons.

    +docs-subheading('icons-navigation', 'Navigation icons')

    .docs-demo.columns
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-arrow-up
        p icon-arrow-up
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-arrow-right
        p icon-arrow-right
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-arrow-down
        p icon-arrow-down
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-arrow-left
        p icon-arrow-left
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-upward
        p icon-upward
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-forward
        p icon-forward
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-downward
        p icon-downward
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-back
        p icon-back
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-caret
        p icon-caret
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-menu
        p icon-menu
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-apps
        p icon-apps
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-more-horiz
        p icon-more-horiz
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-more-vert
        p icon-more-vert

    +docs-subheading('icons-action', 'Action icons')

    .docs-demo.columns
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-resize-horiz
        p icon-resize-horiz
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-resize-vert
        p icon-resize-vert
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-plus
        p icon-plus
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-minus
        p icon-minus
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-cross
        p icon-cross
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-check
        p icon-check
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-stop
        p icon-stop
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-shutdown
        p icon-shutdown
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-refresh
        p icon-refresh
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-search
        p icon-search
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-flag
        p icon-flag
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-bookmark
        p icon-bookmark
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-edit
        p icon-edit
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-delete
        p icon-delete
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-share
        p icon-share
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-download
        p icon-download
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-upload
        p icon-upload
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-copy
        p icon-copy

    +docs-subheading('icons-object', 'Object icons')

    .docs-demo.columns
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-mail
        p icon-mail
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-people
        p icon-people
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-message
        p icon-message
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-photo
        p icon-photo
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-time
        p icon-time
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-location
        p icon-location
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-link
        p icon-link
      .column.col-3.col-md-6
        button.btn.btn-primary.btn-action.btn-lg
          i.icon.icon-emoji
        p icon-emoji

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <i class="icon icon-menu"></i>

    +docs-subheading('icons-sizes', 'Icon sizes')

    p
      | Use #[code icon-2x], #[code icon-3x] and #[code icon-4x] classes to increase icon sizes.
      | You can set #[code font-size] to have different icon sizes.

    .docs-demo.columns
      .column.col-3.col-md-6
        p
          i.icon.icon-2x.icon-mail
        p icon-2x (32px)
      .column.col-3.col-md-6
        p
          i.icon.icon-3x.icon-mail
        p icon-3x (48px)
      .column.col-3.col-md-6
        p
          i.icon.icon-4x.icon-mail
        p icon-4x (64px)

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <i class="icon icon-2x icon-mail"></i>

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug