Merge pull request #170 from picturepan2/feature/0.2.10 v0.2.10

Feature/0.2.10

1 files changed, 96 insertions, 112 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index 64e2b75..7fecc56 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -1,24 +1,22 @@
 /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
 .calendar {
-  border: .1rem solid #efefef;
+  border: .1rem solid #f0f1f4;
   border-radius: .2rem;
   display: block;
+  min-width: 28rem;
   text-align: center;
 }
 .calendar .calendar-nav {
-  -webkit-align-content: space-between;
-  align-content: space-between;
   -webkit-align-items: center;
   align-items: center;
-  background: #f8f8f8;
+  background: #f8f9fa;
   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;
+  font-size: 1.6rem;
   padding: 1rem;
 }
 .calendar .calendar-header,
@@ -39,103 +37,104 @@
   -webkit-flex: 0 0 14.28%;
   -ms-flex: 0 0 14.28%;
   flex: 0 0 14.28%;
+  width: 14.28%;
 }
 .calendar .calendar-header {
-  background: #f8f8f8;
-  border-bottom: .1rem solid #efefef;
-  color: #999;
+  background: #f8f9fa;
+  border-bottom: .1rem solid #f0f1f4;
+  color: #acb3c2;
   font-size: 1.2rem;
 }
 .calendar .calendar-body {
-  color: #666;
+  color: #727e96;
 }
-.calendar .calendar-body .calendar-date {
+.calendar .calendar-date {
   border: 0;
-  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 .date-item:disabled {
-  cursor: default;
-  opacity: .25;
-  pointer-events: none;
+  padding: .4rem;
 }
-.calendar .calendar-body .date-item {
+.calendar .calendar-date .date-item {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: transparent;
   border: .1rem solid transparent;
   border-radius: 50%;
+  color: #727e96;
   cursor: pointer;
-  display: inline-block;
-  height: 3.2rem;
+  height: 2.8rem;
   line-height: 2rem;
-  padding: .5rem;
+  padding: .3rem;
+  position: relative;
   text-align: center;
   text-decoration: none;
   transition: all .2s ease;
   vertical-align: middle;
   white-space: nowrap;
-  width: 3.2rem;
+  width: 2.8rem;
 }
-.calendar .calendar-body .date-item.date-today {
-  background: #eff1fa;
+.calendar .calendar-date .date-item.date-today {
+  border-color: #e4e6f6;
   color: #5764c6;
 }
-.calendar .calendar-body .date-item:focus,
-.calendar .calendar-body .date-item:hover {
-  background: #f7f8fc;
-  border-color: #dcdff3;
+.calendar .calendar-date .date-item:focus,
+.calendar .calendar-date .date-item:hover {
+  background: #fbfbfe;
+  border-color: #e4e6f6;
   color: #5764c6;
   text-decoration: none;
 }
-.calendar .calendar-body .date-item:active,
-.calendar .calendar-body .date-item.active {
-  background: #4452c0;
-  border-color: #3b49af;
+.calendar .calendar-date .date-item:active,
+.calendar .calendar-date .date-item.active {
+  background: #4c59c2;
+  border-color: #3e4cb6;
   color: #fff;
 }
-.calendar .calendar-body .date-item.badge::after {
+.calendar .calendar-date .date-item.badge::after {
   position: absolute;
-  right: .4rem;
-  top: .4rem;
+  right: .3rem;
+  top: .3rem;
   -webkit-transform: translate(50%, -50%);
   -ms-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
 }
+.calendar .calendar-date.disabled .date-item,
+.calendar .calendar-date.disabled .calendar-event,
+.calendar .calendar-date .date-item:disabled,
+.calendar .calendar-date .calendar-event:disabled {
+  cursor: default;
+  opacity: .25;
+  pointer-events: none;
+}
 .calendar .calendar-range {
   position: relative;
 }
-.calendar .calendar-range .date-item::before {
+.calendar .calendar-range::before {
   background: #eff1fa;
   content: "";
-  height: 3.2rem;
-  left: 50%;
+  height: 2.8rem;
+  left: 0;
   position: absolute;
+  right: 0;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
-  width: 50%;
-  z-index: -9;
 }
-.calendar .calendar-range + .calendar-range .date-item::before {
-  left: 0;
-  width: 100%;
+.calendar .calendar-range.range-start::before {
+  left: 50%;
 }
-.calendar .calendar-range + .calendar-range .date-item.active::before {
-  width: 50%;
+.calendar .calendar-range.range-end::before {
+  right: 50%;
+}
+.calendar .calendar-range .date-item {
+  color: #5764c6;
 }
 .calendar.calendar-lg .calendar-body {
   padding: 0;
 }
 .calendar.calendar-lg .calendar-body .calendar-date {
-  border-bottom: .1rem solid #efefef;
-  border-right: .1rem solid #efefef;
+  border-bottom: .1rem solid #f0f1f4;
+  border-right: .1rem solid #f0f1f4;
   display: flex;
   display: -ms-flexbox;
   display: -webkit-flex;
@@ -143,7 +142,6 @@
   -ms-flex-direction: column;
   flex-direction: column;
   height: 11rem;
-  overflow: hidden;
   padding: 0;
 }
 .calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) {
@@ -152,37 +150,23 @@
 .calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) {
   border-bottom: 0;
 }
-.calendar.calendar-lg .calendar-body .date-item {
+.calendar.calendar-lg .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;
+  height: 2.8rem;
   margin-right: .5rem;
   margin-top: .5rem;
-  padding: .1rem;
-  width: 2.4rem;
 }
-.calendar.calendar-lg .calendar-body .date-item.badge::after {
-  right: .2rem;
-  top: .2rem;
+.calendar.calendar-lg .calendar-range::before {
+  top: 1.9rem;
 }
-.calendar.calendar-lg .calendar-body .calendar-range .date-item::before {
-  height: 2.4rem;
+.calendar.calendar-lg .calendar-range.range-start::before {
   left: auto;
-  right: 0;
-  top: 1.7rem;
-  width: 2.2rem;
-}
-.calendar.calendar-lg .calendar-body .calendar-range + .calendar-range .date-item::before {
-  left: 0;
-  width: 100%;
+  width: 1.9rem;
 }
-.calendar.calendar-lg .calendar-body .calendar-range + .calendar-range .date-item.active::before {
-  right: 1.7rem;
-  width: auto;
+.calendar.calendar-lg .calendar-range.range-end::before {
+  right: 1.9rem;
 }
 .calendar.calendar-lg .calendar-events {
   -webkit-flex-grow: 1;
@@ -207,7 +191,7 @@
   white-space: nowrap;
 }
 .carousel {
-  background: #f8f8f8;
+  background: #f8f9fa;
   display: block;
   height: 50vh;
   overflow: hidden;
@@ -220,8 +204,8 @@
   position: relative;
 }
 .carousel .carousel-container .carousel-item {
-  -webkit-animation: carousel-slideout 1s 1;
-  animation: carousel-slideout 1s 1;
+  -webkit-animation: carousel-slideout 1s ease-in-out 1;
+  animation: carousel-slideout 1s ease-in-out 1;
   height: 100%;
   left: 0;
   margin: 0;
@@ -236,9 +220,9 @@
 }
 .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;
+  background: rgba(231, 233, 237, .25);
+  border-color: rgba(231, 233, 237, .5);
+  color: #e7e9ed;
   opacity: 0;
   position: absolute;
   top: 50%;
@@ -246,7 +230,7 @@
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   transition: all .4s ease;
-  z-index: 99;
+  z-index: 200;
 }
 .carousel .carousel-container .item-prev {
   left: 2rem;
@@ -258,16 +242,16 @@
 .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
 .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
 .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
-  -webkit-animation: carousel-slidein .75s 1;
-  animation: carousel-slidein .75s 1;
+  -webkit-animation: carousel-slidein .75s ease-in 1;
+  animation: carousel-slidein .75s ease-in 1;
   opacity: 1;
-  z-index: 99;
+  z-index: 100;
 }
 .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
 .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
 .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
 .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
-  color: #ccc;
+  color: #e7e9ed;
 }
 .carousel .carousel-nav {
   bottom: 1rem;
@@ -283,10 +267,10 @@
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   width: 20rem;
-  z-index: 999;
+  z-index: 200;
 }
 .carousel .carousel-nav .nav-item {
-  color: rgba(204, 204, 204, .5);
+  color: rgba(231, 233, 237, .5);
   display: block;
   -webkit-flex: 1 0 auto;
   -ms-flex: 1 0 auto;
@@ -335,32 +319,32 @@
 @-webkit-keyframes carousel-slideout {
   0% {
     opacity: 1;
-    -webkit-transform: translateX(0) scale(1);
-    transform: translateX(0) scale(1);
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
   }
   100% {
-    opacity: 0;
-    -webkit-transform: translateX(-50%) scale(.95);
-    transform: translateX(-50%) scale(.95);
+    opacity: 1;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
   }
 }
 @keyframes carousel-slideout {
   0% {
     opacity: 1;
-    -webkit-transform: translateX(0) scale(1);
-    transform: translateX(0) scale(1);
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
   }
   100% {
-    opacity: 0;
-    -webkit-transform: translateX(-50%) scale(.95);
-    transform: translateX(-50%) scale(.95);
+    opacity: 1;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
   }
 }
 .meter {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #f8f8f8;
+  background: #f8f9fa;
   border: 0;
   border-radius: .2rem;
   display: block;
@@ -377,7 +361,7 @@
   border-radius: .2rem;
 }
 .meter::-webkit-meter-bar {
-  background: #f8f8f8;
+  background: #f8f9fa;
 }
 .meter::-webkit-meter-optimum-value {
   background: #32b643;
@@ -434,7 +418,7 @@
   position: absolute;
   top: 0;
   width: 50%;
-  z-index: 99;
+  z-index: 1;
 }
 .parallax .parallax-top-left:hover ~ .parallax-content {
   -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
@@ -449,7 +433,7 @@
   right: 0;
   top: 0;
   width: 50%;
-  z-index: 99;
+  z-index: 1;
 }
 .parallax .parallax-top-right:hover ~ .parallax-content {
   -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
@@ -464,7 +448,7 @@
   left: 0;
   position: absolute;
   width: 50%;
-  z-index: 99;
+  z-index: 1;
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content {
   -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
@@ -479,7 +463,7 @@
   position: absolute;
   right: 0;
   width: 50%;
-  z-index: 99;
+  z-index: 1;
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content {
   -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
@@ -492,7 +476,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #efefef;
+  background: #f0f1f4;
   border: 0;
   border-radius: .2rem;
   color: #5764c6;
@@ -515,7 +499,7 @@
 .progress:indeterminate {
   -webkit-animation: progress-indeterminate 1.5s linear infinite;
   animation: progress-indeterminate 1.5s linear infinite;
-  background: #efefef linear-gradient(to right, #5764c6 30%, #efefef 30%) top left / 150% 150% no-repeat;
+  background: #f0f1f4 linear-gradient(to right, #5764c6 30%, #f0f1f4 30%) top left / 150% 150% no-repeat;
 }
 .progress:indeterminate::-moz-progress-bar {
   background: transparent;
@@ -590,35 +574,35 @@
 }
 .slider:disabled::-webkit-slider-thumb,
 .slider.disabled::-webkit-slider-thumb {
-  background: #ccc;
+  background: #e7e9ed;
   -webkit-transform: scale(1);
   transform: scale(1);
 }
 .slider:disabled::-moz-range-thumb,
 .slider.disabled::-moz-range-thumb {
-  background: #ccc;
+  background: #e7e9ed;
   transform: scale(1);
 }
 .slider:disabled::-ms-thumb,
 .slider.disabled::-ms-thumb {
-  background: #ccc;
+  background: #e7e9ed;
   -ms-transform: scale(1);
   transform: scale(1);
 }
 .slider::-webkit-slider-runnable-track {
-  background: #efefef;
+  background: #f0f1f4;
   border-radius: .2rem;
   height: .4rem;
   width: 100%;
 }
 .slider::-moz-range-track {
-  background: #efefef;
+  background: #f0f1f4;
   border-radius: .2rem;
   height: .4rem;
   width: 100%;
 }
 .slider::-ms-track {
-  background: #efefef;
+  background: #f0f1f4;
   border-radius: .2rem;
   height: .4rem;
   width: 100%;