Fix #48 and Fix #49 clean SCSS variables

mistic100 · May 31, 2016 · 8c70dc8 · 8c70dc8
1 parent fb721a9
commit 8c70dc8
Show file tree

Hide file tree

Showing 11 changed files with 198 additions and 198 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Photo Sphere Viewer
 
 [![Bower version](https://img.shields.io/bower/v/Photo-Sphere-Viewer.svg?style=flat-square)](http://photo-sphere-viewer.js.org)
-[![Build Status](https://img.shields.io/travis/mistic100/Photo-Sphere-Viewer.svg?style=flat-square)](https://travis-ci.org/mistic100/Photo-Sphere-Viewer)
+[![Build Status](https://img.shields.io/travis/mistic100/Photo-Sphere-Viewer/master.svg?style=flat-square)](https://travis-ci.org/mistic100/Photo-Sphere-Viewer)
 
 Photo Sphere Viewer is a JavaScript library that allows you to display 360×180 degrees panoramas on any web page. Panoramas must use the equirectangular projection and they can be taken with Photo Sphere, the camera mode brought by Android 4.2 Jelly Bean.
 

diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
@@ -0,0 +1,82 @@
+// scss-lint:disable ColorVariable
+$psv-main-background: radial-gradient(#ffffff, #fdfdfd 16%, #fbfbfb 33%, #f8f8f8 49%, #efefef 66%, #dfdfdf 82%, #bfbfbf 100%) !default !default;
+
+$psv-loader-color: rgba(61, 61, 61, .7) !default !default;
+$psv-loader-width: 150px !default !default;
+$psv-loader-tickness: 10px !default !default;
+$psv-loader-font: 14px sans-serif !default !default;
+
+$psv-navbar-height: 40px !default !default;
+$psv-navbar-background: rgba(61, 61, 61, .5) !default !default;
+
+$psv-caption-font: sans-serif !default !default;
+$psv-caption-color: rgba(255, 255, 255, .7) !default;
+
+$psv-buttons-height: 20px !default;
+$psv-buttons-padding: 10px !default;
+$psv-buttons-background: transparent !default;
+$psv-buttons-active-background: rgba(255, 255, 255, .1) !default;
+$psv-buttons-color: rgba(255, 255, 255, .7) !default;
+$psv-buttons-disabled-opacity: .5 !default;
+
+$psv-zoom-range-width: 80px !default;
+$psv-zoom-range-tickness: 1px !default;
+$psv-zoom-disk-diameter: 7px !default;
+$psv-zoom-buttons-width: 16px !default;
+
+$psv-tooltip-background-color: rgba(61, 61, 61, .8) !default;
+
+// set tooltip.offset JS config to the same value
+$psv-tooltip-animate-offset: 5px !default;
+// set tooltip.delay JS config to the same value
+$psv-tooltip-animate-delay: .1s !default;
+$psv-tooltip-radius: 4px !default;
+$psv-tooltip-padding: .5em 1em !default;
+// set tooltip.arrow_size JS config to the same value
+$psv-tooltip-arrow-size: 7px !default;
+$psv-tooltip-max-width: 200px !default;
+
+$psv-tooltip-text-color: rgb(255, 255, 255) !default;
+$psv-tooltip-font: 14px sans-serif !default;
+$psv-tooltip-text-shadow: 0 1px #000000 !default;
+
+$psv-tooltip-shadow-color: rgba(90, 90, 90, .7) !default;
+// the shadow is always at the opposite side of the arrow
+$psv-tooltip-shadow-offset: 3px !default;
+
+$psv-panel-background: rgba(10, 10, 10, .7) !default;
+$psv-panel-text-color: rgb(220, 220, 220) !default;
+
+$psv-panel-width: 400px !default;
+$psv-panel-padding: 1em !default;
+
+// must be odd
+$psv-panel-resizer-width: 9px !default;
+$psv-panel-resizer-background: rgba(0, 0, 0, .9) !default;
+$psv-panel-resizer-grip-color: #ffffff !default;
+// must be odd
+$psv-panel-resizer-grip-height: 29px !default;
+$psv-panel-close-button-width: 24px !default;
+$psv-panel-close-button-background: $psv-panel-resizer-background !default;
+$psv-panel-close-button-color: #ffffff !default;
+
+$psv-panel-font: 16px sans-serif !default;
+
+$psv-markers-list-image-size: 20px !default;
+$psv-markers-list-padding: .5em 1em !default;
+$psv-markers-list-hover-translation: 10px !default;
+
+$psv-markers-list-odd-background: rgba(255, 255, 255, .1) !default;
+$psv-markers-list-even-background: transparent !default;
+
+$psv-markers-list-title-shadow: 2px 1px #000000 !default;
+$psv-markers-list-title-font: 24px sans-serif !default;
+
+$psv-canvas-zindex: 0 !default;
+$psv-hud-zindex: 10 !default;
+$psv-polygon-marker-zindex: 20 !default;
+$psv-marker-zindex: 30 !default;
+$psv-tooltip-zindex: 50 !default;
+$psv-panel-zindex: 90 !default;
+$psv-navbar-zindex: 90 !default;
+$psv-loader-zindex: 100 !default;
diff --git a/src/scss/buttons/autorotate.scss b/src/scss/buttons/autorotate.scss
@@ -1,5 +1,5 @@
 .psv-navbar .autorotate-button {
-  width: #{$buttons-height + $buttons-padding / 2};
-  height: #{$buttons-height + $buttons-padding / 2};
-  padding: #{$buttons-padding / 4 * 3};
+  width: #{$psv-buttons-height + $psv-buttons-padding / 2};
+  height: #{$psv-buttons-height + $psv-buttons-padding / 2};
+  padding: #{$psv-buttons-padding / 4 * 3};
 }
diff --git a/src/scss/buttons/markers.scss b/src/scss/buttons/markers.scss
@@ -1,9 +1,9 @@
 .psv-markers-list {
   h1 {
-    font: $markers-list-title-font;
+    font: $psv-markers-list-title-font;
     margin: 1em 0;
     text-align: center;
-    text-shadow: $markers-list-title-shadow;
+    text-shadow: $psv-markers-list-title-shadow;
   }
 
   ul {
@@ -15,8 +15,8 @@
 
   li {
     clear: both;
-    min-height: $markers-list-image-size;
-    padding: $markers-list-padding;
+    min-height: $psv-markers-list-image-size;
+    padding: $psv-markers-list-padding;
     cursor: pointer;
     transform: translateX(0);
     transition: transform .3s ease-in-out;
@@ -28,33 +28,33 @@
       top: 0;
       left: 0;
       height: 100%;
-      width: $markers-list-hover-translation;
-      margin-left: -$markers-list-hover-translation;
+      width: $psv-markers-list-hover-translation;
+      margin-left: -$psv-markers-list-hover-translation;
     }
 
     &:nth-child(odd), &:nth-child(odd)::before {
-      background: $markers-list-odd-background;
+      background: $psv-markers-list-odd-background;
     }
 
     &:nth-child(even), &:nth-child(even)::before {
-      background: $markers-list-even-background;
+      background: $psv-markers-list-even-background;
     }
 
     &:hover {
-      transform: translateX($markers-list-hover-translation);
+      transform: translateX($psv-markers-list-hover-translation);
       transition: transform .1s ease-in-out;
     }
   }
 
   .marker-image {
     float: left;
-    width: $markers-list-image-size;
+    width: $psv-markers-list-image-size;
   }
 
   .marker-name {
     margin: 0;
     padding: 0;
-    padding-left: calc(#{$markers-list-image-size} + #{nth($markers-list-padding, 1)});
+    padding-left: calc(#{$psv-markers-list-image-size} + #{nth($psv-markers-list-padding, 1)});
 
     &.no-image {
       padding-left: 0;

diff --git a/src/scss/buttons/zoom.scss b/src/scss/buttons/zoom.scss
@@ -1,13 +1,13 @@
 .psv-navbar .zoom-button {
   cursor: default;
-  width: #{$zoom-buttons-width * 3 + $zoom-range-width};
+  width: #{$psv-zoom-buttons-width * 3 + $psv-zoom-range-width};
 
   .minus, .plus {
     float: left;
     position: relative;
     cursor: pointer;
-    width: $zoom-buttons-width;
-    height: $zoom-buttons-width;
+    width: $psv-zoom-buttons-width;
+    height: $psv-zoom-buttons-width;
 
     svg {
       position: relative;
@@ -17,24 +17,24 @@
 
   .range {
     float: left;
-    padding: #{($buttons-height - $zoom-range-tickness) / 2} #{$zoom-buttons-width / 2};
+    padding: #{($psv-buttons-height - $psv-zoom-range-tickness) / 2} #{$psv-zoom-buttons-width / 2};
 
     .line {
       position: relative;
       cursor: pointer;
-      width: $zoom-range-width;
-      height: $zoom-range-tickness;
-      background: $buttons-color;
+      width: $psv-zoom-range-width;
+      height: $psv-zoom-range-tickness;
+      background: $psv-buttons-color;
       transition: all .3s ease;
     }
 
     .handle {
       position: absolute;
       border-radius: 50%;
-      top: #{($zoom-range-tickness - $zoom-disk-diameter) / 2};
-      width: $zoom-disk-diameter;
-      height: $zoom-disk-diameter;
-      background: $buttons-color;
+      top: #{($psv-zoom-range-tickness - $psv-zoom-disk-diameter) / 2};
+      width: $psv-zoom-disk-diameter;
+      height: $psv-zoom-disk-diameter;
+      background: $psv-buttons-color;
       transform: scale(1);
       transition: transform .3s ease;
     }
@@ -43,7 +43,7 @@
   &:not(.disabled):hover {
     .range {
       .line {
-        box-shadow: 0 0 2px $buttons-color;
+        box-shadow: 0 0 2px $psv-buttons-color;
       }
 
       .handle {
@@ -63,9 +63,9 @@
     }
 
     .minus, .plus {
-      width: $buttons-height;
-      height: $buttons-height;
-      padding: $buttons-padding;
+      width: $psv-buttons-height;
+      height: $psv-buttons-height;
+      padding: $psv-buttons-padding;
 
       svg {
         top: 0;

diff --git a/src/scss/hud.scss b/src/scss/hud.scss
@@ -1,15 +1,15 @@
 .psv-hud {
   @include user-select(none);
   position: absolute;
-  z-index: $hud-zindex;
+  z-index: $psv-hud-zindex;
   width: 100%;
   height: 100%;
 
   .psv-marker:not(.svg-marker) {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: $marker-zindex;
+    z-index: $psv-marker-zindex;
     background-size: contain;
     background-repeat: no-repeat;
     cursor: pointer;
@@ -31,7 +31,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: $polygon-marker-zindex;
+    z-index: $psv-polygon-marker-zindex;
 
     .svg-marker {
       cursor: pointer;

diff --git a/src/scss/loader.scss b/src/scss/loader.scss
@@ -7,16 +7,16 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: $loader-zindex;
+  z-index: $psv-loader-zindex;
 
   // Pseudo element trick to vertically center elements
   .psv-loader {
     position: relative;
     text-align: center;
-    color: $loader-color;
-    width: $loader-width;
-    height: $loader-width;
-    border: $loader-tickness solid transparent;
+    color: $psv-loader-color;
+    width: $psv-loader-width;
+    height: $psv-loader-width;
+    border: $psv-loader-tickness solid transparent;
 
     &::before {
       content: '';
@@ -37,7 +37,7 @@
     }
 
     .loader-text {
-      font: $loader-font;
+      font: $psv-loader-font;
     }
   }
 }
diff --git a/src/scss/navbar.scss b/src/scss/navbar.scss
@@ -1,12 +1,12 @@
 .psv-navbar {
   @include flexbox();
   position: absolute;
-  z-index: $navbar-zindex;
-  bottom: -$navbar-height;
+  z-index: $psv-navbar-zindex;
+  bottom: -$psv-navbar-height;
   left: 0;
   width: 100%;
-  height: $navbar-height;
-  background: $navbar-background;
+  height: $psv-navbar-height;
+  background: $psv-navbar-background;
   transition: bottom ease-in-out .1s;
 
   &.open {
@@ -20,12 +20,12 @@
 
   .psv-caption {
     @include flex-grow(10);
-    color: $caption-color;
-    margin: $buttons-padding;
+    color: $psv-caption-color;
+    margin: $psv-buttons-padding;
     white-space: nowrap;
     overflow: hidden;
     text-align: center;
-    font-family: $caption-font;
+    font-family: $psv-caption-font;
   }
 
   @media (max-width: 800px) {
@@ -45,21 +45,21 @@
   .psv-button {
     @include flex-grow(0);
     @include flex-shrink(0);
-    padding: $buttons-padding;
+    padding: $psv-buttons-padding;
     position: relative;
     cursor: pointer;
-    height: $buttons-height;
-    width: $buttons-height;
-    background: $buttons-background;
-    color: $buttons-color;
+    height: $psv-buttons-height;
+    width: $psv-buttons-height;
+    background: $psv-buttons-background;
+    color: $psv-buttons-color;
 
     &.active {
-      background: $buttons-active-background;
+      background: $psv-buttons-active-background;
     }
 
     &.disabled {
       pointer-events: none;
-      opacity: $buttons-disabled-opacity;
+      opacity: $psv-buttons-disabled-opacity;
     }
 
     svg {
@@ -68,7 +68,7 @@
       transition: transform .3s ease;
 
       * {
-        fill: $buttons-color;
+        fill: $psv-buttons-color;
       }
     }