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

0.5.7

1 files changed, 33 insertions, 0 deletions

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;
+  }
+}