extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'calendars'
  - var parent = 'experimentals'
  - var title = 'Calendars - Experimentals - Spectre.css CSS Framework'
  - var description = 'Spectre.css 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('calendars', 'Calendars')
    include ../_layout/_ad-g.pug

    p
      | Calendars are designed for date or date range picker and events display. It is made with flex layout.

    .docs-demo.columns
      .column.col-4.col-md-12
        .calendar
          .calendar-nav.navbar
            button.btn.btn-action.btn-link.btn-lg
              i.icon.icon-arrow-left
            .navbar-primary March 2017
            button.btn.btn-action.btn-link.btn-lg
              i.icon.icon-arrow-right
          .calendar-container
            .calendar-header
              .calendar-date Sun
              .calendar-date Mon
              .calendar-date Tue
              .calendar-date Wed
              .calendar-date Thu
              .calendar-date Fri
              .calendar-date Sat
            .calendar-body
              .calendar-date.prev-month
                button.date-item 26
              .calendar-date.prev-month
                button.date-item 27
              .calendar-date.prev-month
                button.date-item 28
              .calendar-date
                button.date-item 1
              .calendar-date
                button.date-item 2
              .calendar-date
                button.date-item 3
              .calendar-date.tooltip(data-tooltip="Today")
                button.date-item.date-today 4
              .calendar-date.tooltip(data-tooltip="Not available")
                button.date-item(disabled="") 5
              .calendar-date
                button.date-item 6
              .calendar-date
                button.date-item 7
              .calendar-date.tooltip(data-tooltip="You have appointments")
                button.date-item.badge 8
              .calendar-date
                button.date-item 9
              .calendar-date
                button.date-item 10
              .calendar-date
                button.date-item 11
              .calendar-date
                button.date-item 12
              .calendar-date
                button.date-item 13
              .calendar-date
                button.date-item 14
              .calendar-date
                button.date-item 15
              .calendar-date.calendar-range.range-start
                button.date-item 16
              .calendar-date.calendar-range
                button.date-item 17
              .calendar-date.calendar-range
                button.date-item 18
              .calendar-date.calendar-range
                button.date-item 19
              .calendar-date.calendar-range.range-end
                button.date-item 20
              .calendar-date
                button.date-item 21
              .calendar-date
                button.date-item 22
              .calendar-date
                button.date-item 23
              .calendar-date
                button.date-item 24
              .calendar-date
                button.date-item 25
              .calendar-date
                button.date-item 26
              .calendar-date
                button.date-item 27
              .calendar-date
                button.date-item 28
              .calendar-date
                button.date-item 29
              .calendar-date
                button.date-item 30
              .calendar-date
                button.date-item 31
              .calendar-date.next-month
                button.date-item 1

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="calendar">
            <!-- calendar navbar -->
            <div class="calendar-nav navbar">
              <button class="btn btn-action btn-link btn-lg">
                <i class="icon icon-arrow-left"></i>
              </button>
              <div class="navbar-primary">March 2017</div>
              <button class="btn btn-action btn-link btn-lg">
                <i class="icon icon-arrow-right"></i>
              </button>
            </div>

            <div class="calendar-container">
              <div class="calendar-header">
                <div class="calendar-date">Sun</div>
                <div class="calendar-date">Mon</div>
                <div class="calendar-date">Tue</div>
                <div class="calendar-date">Wed</div>
                <div class="calendar-date">Thu</div>
                <div class="calendar-date">Fri</div>
                <div class="calendar-date">Sat</div>
              </div>

              <div class="calendar-body">
                <!-- calendar previous month -->
                <div class="calendar-date prev-month">
                  <button class="date-item">26</button>
                </div>
                ...
                <div class="calendar-date prev-month">
                  <button class="date-item">28</button>
                </div>

                <!-- calendar current month -->
                <div class="calendar-date">
                  <button class="date-item">1</button>
                </div>
                <div class="calendar-date">
                  <button class="date-item">2</button>
                </div>
                <div class="calendar-date">
                  <button class="date-item">3</button>
                </div>
                <!-- calendar date: today -->
                <div class="calendar-date">
                  <button class="date-item date-today">4</button>
                </div>
                <!-- calendar date: tooltip -->
                <div class="calendar-date tooltip" data-tooltip="You have appointments">
                  <button class="date-item">5</button>
                </div>
                <!-- calendar date: not available -->
                <div class="calendar-date tooltip" data-tooltip="Not available">
                  <button class="date-item" disabled="">6</button>
                </div>

                <!-- calendar range -->
                <div class="calendar-date calendar-range range-start">
                  <button class="date-item">7</button>
                </div>
                <div class="calendar-date calendar-range">
                  <button class="date-item">8</button>
                </div>
                <div class="calendar-date calendar-range range-end">
                  <button class="date-item">9</button>
                </div>
                ...
                <div class="calendar-date">
                  <button class="date-item">31</button>
                </div>

                <!-- calendar next month -->
                <div class="calendar-date next-month">
                  <button class="date-item">1</button>
                </div>
              </div>
            </div>
          </div>

    +docs-subheading('calendars-sizes', 'Calendars sizes')

    .docs-demo.columns
      .column.col-12
        .calendar.calendar-lg
          .calendar-nav.navbar
            button.btn.btn-action.btn-link.btn-lg
              i.icon.icon-arrow-left
            .navbar-primary March 2017
            button.btn.btn-action.btn-link.btn-lg
              i.icon.icon-arrow-right
          .calendar-container
            .calendar-header
              .calendar-date Sun
              .calendar-date Mon
              .calendar-date Tue
              .calendar-date Wed
              .calendar-date Thu
              .calendar-date Fri
              .calendar-date Sat
            .calendar-body
              .calendar-date.prev-month
                button.date-item 26
              .calendar-date.prev-month
                button.date-item 27
                .calendar-events
                  a.calendar-event.bg-error.text-light(href="#calendars") Zhonghe Festival
              .calendar-date.prev-month
                button.date-item 28
              .calendar-date
                button.date-item 1
              .calendar-date
                button.date-item 2
              .calendar-date
                button.date-item 3
              .calendar-date.tooltip(data-tooltip="Today")
                button.date-item.date-today 4
              .calendar-date
                button.date-item(disabled="") 5
              .calendar-date
                button.date-item 6
              .calendar-date
                button.date-item 7
              .calendar-date.tooltip(data-tooltip="You have appointments")
                button.date-item.badge 8
                .calendar-events
                  a.calendar-event.bg-primary.text-light(href="#calendars") Product launch event
                  a.calendar-event.bg-error.text-light(href="#calendars") International Women's Day
              .calendar-date
                button.date-item 9
              .calendar-date
                button.date-item 10
              .calendar-date
                button.date-item 11
              .calendar-date
                button.date-item 12
                .calendar-events
                  a.calendar-event.bg-error.text-light(href="#calendars") Arbor Day
              .calendar-date
                button.date-item 13
              .calendar-date
                button.date-item 14
              .calendar-date
                button.date-item 15
              .calendar-date.calendar-range.range-start
                button.date-item 16
              .calendar-date.calendar-range
                button.date-item 17
              .calendar-date.calendar-range
                button.date-item 18
              .calendar-date.calendar-range
                button.date-item 19
              .calendar-date.calendar-range.range-end
                button.date-item 20
                .calendar-events
                  a.calendar-event.bg-success.text-light(href="#calendars") Spring Equinox
              .calendar-date
                button.date-item 21
              .calendar-date
                button.date-item 22
              .calendar-date
                button.date-item 23
              .calendar-date
                button.date-item 24
              .calendar-date
                button.date-item 25
              .calendar-date
                button.date-item 26
              .calendar-date
                button.date-item 27
              .calendar-date
                button.date-item 28
              .calendar-date
                button.date-item 29
              .calendar-date
                button.date-item 30
              .calendar-date
                button.date-item 31
              .calendar-date.next-month.disabled
                button.date-item 1
                .calendar-events
                  a.calendar-event.bg-error.text-light(href="#calendars") April Fools' Day

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <div class="calendar calendar-lg">
            <!-- calendar navbar structure -->

            <div class="calendar-container">
              <!-- calendar header structure -->

              <div class="calendar-body">
                <!-- calendar date with events -->
                <div class="calendar-date">
                  <button class="date-item active">20</button>
                  <div class="calendar-events">
                    <a class="calendar-event bg-success text-light" href="#calendars">Spring Equinox</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
    
    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug