Merge pull request #155 from picturepan2/feature/carousels v0.2.6

Feature/carousels

1 files changed, 173 insertions, 0 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index a45451a..0eb7560 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -1,4 +1,177 @@
 /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
+.carousel {
+  background: #f8f8f8;
+  display: block;
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.carousel .carousel-container {
+  height: 100%;
+  left: 0;
+  position: relative;
+}
+.carousel .carousel-container .carousel-item {
+  -webkit-animation: carousel-slideout 1s 1;
+  animation: carousel-slideout 1s 1;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.carousel .carousel-locator {
+  display: none;
+}
+.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),
+.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;
+  opacity: 1;
+  z-index: 99;
+}
+.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;
+}
+.carousel .carousel-nav {
+  bottom: 1rem;
+  display: -webkit-flex;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 20rem;
+  z-index: 999;
+}
+.carousel .carousel-nav .nav-item {
+  color: rgba(204, 204, 204, .5);
+  display: block;
+  -webkit-flex: 1 0 auto;
+  -ms-flex: 1 0 auto;
+  flex: 1 0 auto;
+  height: 4rem;
+  margin: .4rem;
+  max-width: 5rem;
+  position: relative;
+}
+.carousel .carousel-nav .nav-item::before {
+  background: currentColor;
+  content: "";
+  display: block;
+  height: .3rem;
+  position: absolute;
+  top: 2rem;
+  width: 100%;
+}
+@supports (object-fit: cover) {
+  .carousel-item img {
+    height: 100%;
+    object-fit: cover;
+    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%);
+    transform: translateX(100%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+@keyframes carousel-slidein {
+  0% {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+@-webkit-keyframes carousel-slideout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0) scale(1);
+    transform: translateX(0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-50%) scale(.95);
+    transform: translateX(-50%) scale(.95);
+  }
+}
+@keyframes carousel-slideout {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0) scale(1);
+    transform: translateX(0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-50%) scale(.95);
+    transform: translateX(-50%) scale(.95);
+  }
+}
 .meter {
   -webkit-appearance: none;
   -moz-appearance: none;