diff options
1 files changed, 0 insertions, 298 deletions
| -rw-r--r-- | docs/src/contents/calendars.pug | 298 |
diff --git a/docs/src/contents/calendars.pug b/docs/src/contents/calendars.pug deleted file mode 100644 index d7bf30c..0000000 --- a/docs/src/contents/calendars.pug +++ /dev/null @@ -1,298 +0,0 @@ -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>
\ No newline at end of file |