diff options
2 files changed, 34 insertions, 0 deletions
| -rw-r--r-- | src/_viewer-360.scss | 33 | ||||
| -rw-r--r-- | src/spectre-exp.scss | 1 |
diff --git a/src/_viewer-360.scss b/src/_viewer-360.scss new file mode 100644 index 0000000..8d5fd61 --- /dev/null +++ b/src/_viewer-360.scss @@ -0,0 +1,33 @@ +// 360 Degree Viewer +// The number of images options +$image-height: 9rem; +$image-number: 36 !default; +$image-width: 24rem; + +.viewer-360 { + display: flex; + flex-direction: column; + align-items: center; + + @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"; |