Add Calendars experimental support

1 files changed, 126 insertions, 0 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index 0eb7560..5755d5f 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -1,4 +1,130 @@
 /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
+.calendar {
+  border: .1rem solid #efefef;
+  border-radius: .2rem;
+  display: block;
+  text-align: center;
+}
+.calendar .calendar-nav {
+  -webkit-align-content: space-between;
+  align-content: space-between;
+  -webkit-align-items: center;
+  align-items: center;
+  background: #f8f8f8;
+  border-top-left-radius: .2rem;
+  border-top-right-radius: .2rem;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-align: center;
+  -ms-flex-line-pack: justify;
+  font-size: 2rem;
+  padding: 1rem;
+}
+.calendar .calendar-header,
+.calendar .calendar-body {
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-pack: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-justify-content: center;
+  justify-content: center;
+  padding: 1rem 0;
+}
+.calendar .calendar-header .calendar-date,
+.calendar .calendar-body .calendar-date {
+  -webkit-flex: 0 0 14%;
+  -ms-flex: 0 0 14%;
+  flex: 0 0 14%;
+}
+.calendar .calendar-header {
+  border-bottom: .1rem solid #efefef;
+  color: #999;
+}
+.calendar .calendar-body {
+  color: #666;
+}
+.calendar .calendar-body .calendar-date {
+  border: 0;
+  padding: .5rem;
+}
+.calendar .calendar-body .calendar-date .date-item {
+  color: #666;
+}
+.calendar .calendar-body .calendar-date.calendar-range {
+  position: relative;
+}
+.calendar .calendar-body .calendar-date.calendar-range .date-item::before {
+  background: #eff1fa;
+  content: "";
+  height: 3.2rem;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  width: 50%;
+  z-index: -9;
+}
+.calendar .calendar-body .calendar-date.calendar-range + .calendar-range .date-item::before {
+  left: 0;
+  width: 100%;
+}
+.calendar .calendar-body .calendar-date.calendar-range + .calendar-range .date-item.active::before {
+  width: 50%;
+}
+.calendar .calendar-body .calendar-date.prev-month .date-item,
+.calendar .calendar-body .calendar-date.next-month .date-item {
+  opacity: .25;
+}
+.calendar .calendar-body .date-item {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: .1rem solid transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  display: inline-block;
+  height: 3.2rem;
+  line-height: 2rem;
+  padding: .5rem;
+  text-align: center;
+  text-decoration: none;
+  transition: all .2s ease;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 3.2rem;
+}
+.calendar .calendar-body .date-item:focus,
+.calendar .calendar-body .date-item:hover {
+  background: #f7f8fc;
+  border-color: #dcdff3;
+  color: #5764c6;
+  text-decoration: none;
+}
+.calendar .calendar-body .date-item:active,
+.calendar .calendar-body .date-item.active {
+  background: #4452c0;
+  border-color: #3b49af;
+  color: #fff;
+}
+.calendar .calendar-body .date-item.date-today {
+  background: #eff1fa;
+  color: #5764c6;
+}
+.calendar .calendar-body .date-item.badge::after {
+  position: absolute;
+  right: .4rem;
+  top: .4rem;
+  -webkit-transform: translate(50%, -50%);
+  -ms-transform: translate(50%, -50%);
+  transform: translate(50%, -50%);
+}
 .carousel {
   background: #f8f8f8;
   display: block;