Fix LESS to SASS issues. Add Examples.

4 files changed, 21 insertions, 22 deletions

diff --git a/src/_carousels.scss b/src/_carousels.scss
index 788d351..d68c40a 100644
--- a/src/_carousels.scss
+++ b/src/_carousels.scss
@@ -36,8 +36,8 @@
 
     .item-prev,
     .item-next {
-      background: fade($gray-color-light, 25%);
-      border-color: fade($gray-color-light, 50%);
+      background: rgba($gray-color-light, .25);
+      border-color: rgba($gray-color-light, .5);
       color: $gray-color-light;
       opacity: 0;
       position: absolute;
@@ -82,7 +82,7 @@
     z-index: $zindex-2;
 
     .nav-item {
-      color: fade($gray-color-light, 50%);
+      color: rgba($gray-color-light, .5);
       display: block;
       flex: 1 0 auto;
       height: $unit-8;
diff --git a/src/_chips.scss b/src/_chips.scss
index 3fc0d73..0610470 100644
--- a/src/_chips.scss
+++ b/src/_chips.scss
@@ -6,7 +6,6 @@
   color: $gray-color-dark;
   display: inline-flex;
   height: $unit-6;
-  line-height: 1rem;
   margin: $unit-h;
   max-width: 100%;
   padding: $unit-h ($unit-2 + $unit-h);
diff --git a/src/_comparison-sliders.scss b/src/_comparison-sliders.scss
index 153bb0a..a219863 100644
--- a/src/_comparison-sliders.scss
+++ b/src/_comparison-sliders.scss
@@ -86,7 +86,7 @@
   }
 
   .comparison-label {
-    background: fade($dark-color, 50%);
+    background: rgba($dark-color, .5);
     bottom: $unit-4;
     color: $light-color;
     padding: $unit-1 $unit-2;
diff --git a/src/_parallax.scss b/src/_parallax.scss
index c097e1f..00897bf 100644
--- a/src/_parallax.scss
+++ b/src/_parallax.scss
@@ -1,16 +1,16 @@
 // Parallax
 $parallax-deg: 3deg;
-$parallax-offset: 6.5px;
-$parallax-offset-z: 100px;
+$parallax-offset: 4.5px;
+$parallax-offset-z: 50px;
 $parallax-perspective: 1000px;
-$parallax-scale: 1 - unit($parallax-offset-z / $parallax-perspective);
+$parallax-scale: .95;
 
 // Mixin: Parallax direction
 @mixin parallax-dir() {
   height: 50%;
   position: absolute;
   width: 50%;
-  z-index: $zindex-3;
+  z-index: $zindex-1;
 }
 
 .parallax {
@@ -47,7 +47,7 @@ $parallax-scale: 1 - unit($parallax-offset-z / $parallax-perspective);
     left: 0;
     position: absolute;
     text-align: center;
-    text-shadow: 0 0 20px fade($dark-color, 50%);
+    text-shadow: 0 0 20px rgba($dark-color, .75);
     top: 0;
     transform: translateZ($parallax-offset-z) scale($parallax-scale);
     transition: all .4s ease;
@@ -61,14 +61,14 @@ $parallax-scale: 1 - unit($parallax-offset-z / $parallax-perspective);
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
 
       &::before {
-        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
       }
     }
   }
@@ -79,14 +79,14 @@ $parallax-scale: 1 - unit($parallax-offset-z / $parallax-perspective);
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
 
       &::before {
-        background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+        background: linear-gradient(-135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
       }
     }
   }
@@ -97,14 +97,14 @@ $parallax-scale: 1 - unit($parallax-offset-z / $parallax-perspective);
     left: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
 
       &::before {
-        background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+        background: linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
       }
     }
   }
@@ -115,14 +115,14 @@ $parallax-scale: 1 - unit($parallax-offset-z / $parallax-perspective);
     right: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
 
       &::before {
-        background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+        background: linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%);
       }
 
       .parallax-front {
-        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
       }
     }
   }