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

Feature/carousels

4 files changed, 132 insertions, 3 deletions

diff --git a/src/buttons.less b/src/buttons.less
index baf40ca..da831ea 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -107,7 +107,7 @@
     }
 
     &.btn-lg {
-      width: 4.2rem;
+      width: 4rem;
     }
   }
 
diff --git a/src/carousels.less b/src/carousels.less
new file mode 100644
index 0000000..e826840
--- /dev/null
+++ b/src/carousels.less
@@ -0,0 +1,123 @@
+// Carousels
+.carousel {
+  background: @bg-color;
+  display: block;
+  height: 50vh;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .carousel-container {
+    height: 100%;
+    left: 0;
+    position: relative;
+    //animation: carousel-autoplay 15s infinite;
+
+    .carousel-item {
+      animation: carousel-slideout 1s 1;
+      height: 100%;
+      left: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .carousel-locator {
+    display: none;
+
+    &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
+    &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
+    &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
+    &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
+      animation: carousel-slidein .75s 1;
+      opacity: 1;
+      z-index: 99;
+    }
+    &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
+    &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
+    &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
+    &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
+      color: @light-gray-color;
+    }
+  }
+
+  .carousel-nav {
+    bottom: 1rem;
+    display: flex;
+    justify-content: center;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    width: 20rem;
+    z-index: 999;
+
+    .nav-item {
+      color: fade(@light-gray-color, 50%);
+      display: block;
+      flex: 1 0 auto;
+      height: 4rem;
+      margin: .4rem;
+      max-width: 5rem;
+      position: relative;
+
+      &::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%;
+    }
+  }
+}
+
+@keyframes carousel-autoplay {
+  0% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-25%);
+  }
+  50% {
+    transform: translateX(-50%);
+  }
+  75% {
+    transform: translateX(-75%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes carousel-slidein {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes carousel-slideout {
+  0% {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-50%) scale(.95);
+  }
+}
diff --git a/src/forms.less b/src/forms.less
index 8214be1..0f33fb5 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -57,11 +57,17 @@
   .has-success &,
   &.is-success {
     border-color: @control-color-success;
+    &:focus {
+      .control-shadow(@control-color-success);
+    }
   }
 
   .has-danger &,
   &.is-danger {
     border-color: @control-color-danger;
+    &:focus {
+      .control-shadow(@control-color-danger);
+    }
   }
 
   // Input types
diff --git a/src/mixins.less b/src/mixins.less
index 283df97..d2c5c7a 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -6,8 +6,8 @@
     display: table;
   }
 }
-.control-shadow() {
-  box-shadow: 0 0 0 .2rem fade(@primary-color, 15%);
+.control-shadow(@color: @primary-color) {
+  box-shadow: 0 0 0 .2rem fade(@color, 15%);
 }
 .control-transition() {
   transition: all .2s ease;