Merge pull request #155 from picturepan2/feature/carousels

Feature/carousels

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",

dist/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;

dist/spectre.css

@@ -704,7 +704,7 @@ abbr[title] {
   width: 2.4rem;
 }
 .btn.btn-action.btn-lg {
-  width: 4.2rem;
+  width: 4rem;
 }
 .btn.btn-clear {
   background: transparent;
@@ -816,10 +816,18 @@ textarea.form-input {
 .form-input.is-success {
   border-color: #32b643;
 }
+.has-success .form-input:focus,
+.form-input.is-success:focus {
+  box-shadow: 0 0 0 .2rem rgba(50, 182, 67, .15);
+}
 .has-danger .form-input,
 .form-input.is-danger {
   border-color: #e85600;
 }
+.has-danger .form-input:focus,
+.form-input.is-danger:focus {
+  box-shadow: 0 0 0 .2rem rgba(232, 86, 0, .15);
+}
 .form-input[type=file] {
   height: auto;
 }