Merge pull request #160 from picturepan2/feature/0.2.8 v0.2.8

Feature/0.2.8

1 files changed, 72 insertions, 55 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index ee9744a..64e2b75 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -51,15 +51,17 @@
 }
 .calendar .calendar-body .calendar-date {
   border: 0;
-  overflow: hidden;
-  padding: .5rem;
+  padding: .6rem;
 }
 .calendar .calendar-body .calendar-date .date-item {
   color: #666;
 }
 .calendar .calendar-body .calendar-date.prev-month .date-item,
-.calendar .calendar-body .calendar-date.next-month .date-item {
+.calendar .calendar-body .calendar-date.next-month .date-item,
+.calendar .calendar-body .calendar-date .date-item:disabled {
+  cursor: default;
   opacity: .25;
+  pointer-events: none;
 }
 .calendar .calendar-body .date-item {
   -webkit-appearance: none;
@@ -134,8 +136,15 @@
 .calendar.calendar-lg .calendar-body .calendar-date {
   border-bottom: .1rem solid #efefef;
   border-right: .1rem solid #efefef;
-  height: 10rem;
-  text-align: right;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  height: 11rem;
+  overflow: hidden;
+  padding: 0;
 }
 .calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) {
   border-right: 0;
@@ -144,13 +153,21 @@
   border-bottom: 0;
 }
 .calendar.calendar-lg .calendar-body .date-item {
+  -webkit-align-self: flex-end;
+  align-self: flex-end;
+  -webkit-flex: 0 0 2.4rem;
+  -ms-flex: 0 0 2.4rem;
+  flex: 0 0 2.4rem;
+  -ms-flex-item-align: end;
   height: 2.4rem;
+  margin-right: .5rem;
+  margin-top: .5rem;
   padding: .1rem;
   width: 2.4rem;
 }
 .calendar.calendar-lg .calendar-body .date-item.badge::after {
-  right: .25rem;
-  top: .25rem;
+  right: .2rem;
+  top: .2rem;
 }
 .calendar.calendar-lg .calendar-body .calendar-range .date-item::before {
   height: 2.4rem;
@@ -167,14 +184,20 @@
   right: 1.7rem;
   width: auto;
 }
+.calendar.calendar-lg .calendar-events {
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+  -ms-flex-positive: 1;
+  line-height: 1;
+  overflow-y: auto;
+  padding: .5rem;
+}
 .calendar.calendar-lg .calendar-event {
   background: #eff1fa;
   border-radius: .2rem;
   color: #5764c6;
-  display: inline-block;
   display: block;
   font-size: 1.2rem;
-  line-height: 1;
   margin: .2rem auto;
   overflow: hidden;
   padding: .3rem .4rem;
@@ -207,8 +230,29 @@
   top: 0;
   width: 100%;
 }
-.carousel .carousel-locator {
-  display: none;
+.carousel .carousel-container .carousel-item:hover .item-prev,
+.carousel .carousel-container .carousel-item:hover .item-next {
+  opacity: 1;
+}
+.carousel .carousel-container .item-prev,
+.carousel .carousel-container .item-next {
+  background: rgba(204, 204, 204, .25);
+  border-color: rgba(204, 204, 204, .5);
+  color: #ccc;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  transition: all .4s ease;
+  z-index: 99;
+}
+.carousel .carousel-container .item-prev {
+  left: 2rem;
+}
+.carousel .carousel-container .item-next {
+  right: 2rem;
 }
 .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
 .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
@@ -268,50 +312,6 @@
     width: 100%;
   }
 }
-@-webkit-keyframes carousel-autoplay {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  25% {
-    -webkit-transform: translateX(-25%);
-    transform: translateX(-25%);
-  }
-  50% {
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-  75% {
-    -webkit-transform: translateX(-75%);
-    transform: translateX(-75%);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-@keyframes carousel-autoplay {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  25% {
-    -webkit-transform: translateX(-25%);
-    transform: translateX(-25%);
-  }
-  50% {
-    -webkit-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-  75% {
-    -webkit-transform: translateX(-75%);
-    transform: translateX(-75%);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
 @-webkit-keyframes carousel-slidein {
   0% {
     -webkit-transform: translateX(100%);
@@ -588,6 +588,23 @@
   -ms-transform: scale(1.25);
   transform: scale(1.25);
 }
+.slider:disabled::-webkit-slider-thumb,
+.slider.disabled::-webkit-slider-thumb {
+  background: #ccc;
+  -webkit-transform: scale(1);
+  transform: scale(1);
+}
+.slider:disabled::-moz-range-thumb,
+.slider.disabled::-moz-range-thumb {
+  background: #ccc;
+  transform: scale(1);
+}
+.slider:disabled::-ms-thumb,
+.slider.disabled::-ms-thumb {
+  background: #ccc;
+  -ms-transform: scale(1);
+  transform: scale(1);
+}
 .slider::-webkit-slider-runnable-track {
   background: #efefef;
   border-radius: .2rem;