diff options
Diffstat (limited to 'docs/src/experimentals/calendars.pug')
| -rw-r--r-- | docs/src/experimentals/calendars.pug | 314 |
1 files changed, 314 insertions, 0 deletions
diff --git a/docs/src/experimentals/calendars.pug b/docs/src/experimentals/calendars.pug new file mode 100644 index 0000000..3c543d2 --- /dev/null +++ b/docs/src/experimentals/calendars.pug @@ -0,0 +1,314 @@ +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
\ No newline at end of file |