Merge pull request #536 from picturepan2/0.5.7 v0.5.7

0.5.7

5 files changed, 62 insertions, 14 deletions

diff --git a/src/_carousels.scss b/src/_carousels.scss
index 5b4eaf5..66dc51b 100644
--- a/src/_carousels.scss
+++ b/src/_carousels.scss
@@ -1,4 +1,17 @@
 // Carousels
+// The number of carousel images
+$carousel-number: 8;
+
+%carousel-image-checked { 
+  animation: carousel-slidein .75s ease-in-out 1;
+  opacity: 1;
+  z-index: $zindex-1;
+}
+
+%carousel-nav-checked { 
+  color: $gray-color-light;
+}
+
 .carousel {
   background: $bg-color;
   display: block;
@@ -57,19 +70,16 @@
   }
 
   .carousel-locator {
-    &: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 ease-in-out 1;
-      opacity: 1;
-      z-index: $zindex-1;
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-container .carousel-item:nth-of-type(#{$i}) {
+        @extend %carousel-image-checked;
+      }
     }
-    &: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: $gray-color-light;
+
+    @for $i from 1 through ($carousel-number) {
+      &:nth-of-type(#{$i}):checked ~ .carousel-nav .nav-item:nth-of-type(#{$i}) {
+        @extend %carousel-nav-checked;
+      }
     }
   }
 
diff --git a/src/_forms.scss b/src/_forms.scss
index 2c60dfc..c9f011a 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -85,7 +85,11 @@ legend {
 
 // Form element: Textarea
 textarea.form-input {
-  height: auto;
+  &,
+  &.input-lg,
+  &.input-sm {
+    height: auto;
+  }
 }
 
 // Form element: Input hint
diff --git a/src/_variables.scss b/src/_variables.scss
index e2cf715..e8c846c 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,5 +1,5 @@
 // Core variables
-$version: "0.5.6";
+$version: "0.5.7";
 
 // Core features
 $rtl: false !default;
diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss
new file mode 100644
index 0000000..add0cf6
--- /dev/null
+++ b/src/_viewer-360.scss
@@ -0,0 +1,33 @@
+// 360 Degree Viewer
+// The number of images 
+$image-height: 9rem;
+$image-number: 36 !default;
+$image-width: 24rem;
+
+.viewer-360 {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  
+  @for $s from 1 through ($image-number) {
+    .viewer-slider[value='#{$s}'] + .viewer-image {
+      background-position-y: percentage((($s)-1) * 1/(($image-number)-1));
+    }
+  }
+
+  .viewer-slider {
+    cursor: ew-resize;
+    margin: 1rem;
+    order: 2;
+    width: 60%;
+  }
+
+  .viewer-image {
+    background-position-y: 0;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    height: $image-height;
+    order: 1;
+    width: $image-width;
+  }
+}
diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss
index 9ba75ff..33ed3fe 100644
--- a/src/spectre-exp.scss
+++ b/src/spectre-exp.scss
@@ -15,3 +15,4 @@
 @import "progress";
 @import "sliders";
 @import "timelines";
+@import "viewer-360";