calendar ui

pages/_includes/parts/calendar.html

@@ -0,0 +1,42 @@
+{% assign day-names = "Sun,Mon,Tue,Wed,Thu,Fri,Sat" | split: "," %}
+{% assign start-day = include.start-day | default: -2 %}
+{% assign today = include.today | default: 8 %}
+{% assign days = include.days | default: 30 %}
+{% assign all-days = days | minus: start-day | plus: 1 | divide: 7.0 | ceil | times: 7 %}
+{% assign end-day = all-days | plus: start-day | minus: 1 %}
+{% assign range-start = include.range-start | default: 14 %}
+{% assign range-end = include.range-end | default: 21 %}
+
+<div class="calendar{% if include.class %} {{ include.class }}{% endif %}">
+   <div class="calendar-nav">
+      <button class="btn btn-action btn-link btn-lg">
+         {% include ui/icon.html icon="chevron-left" %}
+      </button>
+      <div class="calendar-title">{{ include.title | default: 'March 2017' }}</div>
+      <button class="btn btn-action btn-link btn-lg">
+         {% include ui/icon.html icon="chevron-right" %}
+      </button>
+   </div>
+   <div class="calendar-container">
+      <div class="calendar-header">
+         {% for col in (1..7) %}
+         <div class="calendar-date">{{ day-names[forloop.index0] }}</div>
+         {% endfor %}
+      </div>
+      <div class="calendar-body">
+         {% for day in (start-day..end-day) %}
+            {% if day <= 0 %}
+            {% assign d = 31 | plus: day %}
+            {% elsif day > days %}
+            {% assign d = day | minus: days %}
+            {% else %}
+            {% assign d = day %}
+            {% endif %}
+
+            <div class="calendar-date{% if day <= 0 %} prev-month{% elsif day > days %} next-month{% endif %}{% if range-start and day >= range-start and range-end and day <= range-end %} calendar-range{% if day == range-start %} range-start{% endif %}{% if day == range-end %} range-end{% endif %}{% endif %}">
+               <a href="#" class="date-item{% if day == today %} date-today{% endif %}">{{ d }}</a>
+            </div>
+         {% endfor %}
+      </div>
+   </div>
+</div>

pages/calendars.html

@@ -0,0 +1,19 @@
+---
+---
+
+<div class="row">
+   <div class="col-md-4">
+      <div class="card">
+         <div class="card-body">
+            {% include parts/calendar.html class="border-0" %}
+         </div>
+      </div>
+   </div>
+   <div class="col-md-8">
+      <div class="card">
+         <div class="card-body">
+            {% include parts/calendar.html class="border-0" %}
+         </div>
+      </div>
+   </div>
+</div>

scss/ui-kit.scss

@@ -50,6 +50,7 @@
 @import "ui/lists";
 @import "ui/ribbons";
 @import "ui/nav";
+@import "ui/calendars";
 
 @import "ui/highlight";
 @import "ui/examples";

scss/ui/_calendars.scss

@@ -0,0 +1,104 @@
+.calendar {
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  display: block;
+  font-size: $font-size-sm;
+}
+
+.calendar-nav {
+  display: flex;
+  align-items: center;
+}
+
+.calendar-title {
+  flex: 1;
+  text-align: center;
+}
+
+.calendar-body,
+.calendar-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding: .5rem 0
+}
+
+.calendar-header {
+  color: $text-muted-light;
+}
+
+.calendar-date {
+  text-align: center;
+  flex: 0 0 (100% / 7);
+  max-width: (100% / 7);
+  border: 0;
+  padding: .2rem;
+
+  &.prev-month,
+  &.next-month {
+    opacity: .25;
+  }
+
+  .date-item {
+    display: inline-block;
+    background: 0 0;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    color: #66758c;
+    cursor: pointer;
+    height: 1.4rem;
+    line-height: 1.4rem;
+    width: 1.4rem;
+    outline: 0;
+    position: relative;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    transition: background .3s, border .3s, box-shadow .32s, color .3s;
+
+    &:hover {
+      background: #fefeff;
+      border-color: $border-color;
+      color: $primary;
+      text-decoration: none;
+    }
+  }
+
+  .date-today {
+    border-color: $border-color;
+    color: $primary;
+  }
+}
+
+.calendar-range {
+  position: relative;
+
+  &:before {
+    content: "";
+    background: rgba($primary, .1);
+    height: 1.4rem;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &.range-start,
+  &.range-end {
+    .date-item {
+      background: $primary;
+      border-color: $primary;
+      color: #fff;
+    }
+  }
+
+  &.range-start::before {
+    left: 50%;
+  }
+
+  &.range-end::before {
+    right: 50%;
+  }
+}