fix(styles): Don't leak SASS vars and mixins to global namespace

talamaska · Nov 5, 2017 · 67e43dc · 67e43dc
1 parent e93108f
commit 67e43dc
Showing 1 changed file with 31 additions and 31 deletions.
diff --git a/src/scss/color-picker.scss b/src/scss/color-picker.scss
@@ -1,38 +1,38 @@
-$white: #ffffff !default;
-$default-color: rgb(110, 0, 255) !default;
-$button-stable-border: #b2b2b2  !default;
-
-$material-curve-angular: cubic-bezier(0.35,0,0.25,1) !default;
-$material-curve-shadows: cubic-bezier(0.4, 0, 0.2, 1) !default;
-$material-curve-input:  cubic-bezier(0.62, 0.28, 0.23, 0.99) !default;
-$material-curve-lite-1:  cubic-bezier(0.4, 0, 1, 1) !default;
-$material-curve-lite-2:  cubic-bezier(0, 0, 0.2, 1) !default;
-
-@function z-depth-all($depth: 1) {
-    $color1:    0.12, 0.19, 0.19, 0.21, 0.22;
-    $blur1:     10px, 20px, 50px, 55px, 77px;
-
-    $color2:    0.16, 0.2, 0.24, 0.22, 0.2;
-    $blur2:     5px, 17px, 15px, 28px, 24px;
-    @return 0 0 nth($blur1, $depth) rgba(0, 0, 0, nth($color1, $depth)), 0 0 nth($blur2, $depth) rgba(0, 0, 0, nth($color2, $depth));
-}
+color-picker {
+    $white: #ffffff !default;
+    $default-color: rgb(110, 0, 255) !default;
+    $button-stable-border: #b2b2b2  !default;
+
+    $material-curve-angular: cubic-bezier(0.35,0,0.25,1) !default;
+    $material-curve-shadows: cubic-bezier(0.4, 0, 0.2, 1) !default;
+    $material-curve-input:  cubic-bezier(0.62, 0.28, 0.23, 0.99) !default;
+    $material-curve-lite-1:  cubic-bezier(0.4, 0, 1, 1) !default;
+    $material-curve-lite-2:  cubic-bezier(0, 0, 0.2, 1) !default;
+
+    @function z-depth-all($depth: 1) {
+        $color1:    0.12, 0.19, 0.19, 0.21, 0.22;
+        $blur1:     10px, 20px, 50px, 55px, 77px;
+
+        $color2:    0.16, 0.2, 0.24, 0.22, 0.2;
+        $blur2:     5px, 17px, 15px, 28px, 24px;
+        @return 0 0 nth($blur1, $depth) rgba(0, 0, 0, nth($color1, $depth)), 0 0 nth($blur2, $depth) rgba(0, 0, 0, nth($color2, $depth));
+    }
 
-@mixin z-depth-all($depth: 1) {
-    box-shadow: z-depth-all($depth);
-}
+    @mixin z-depth-all($depth: 1) {
+        box-shadow: z-depth-all($depth);
+    }
 
-@mixin disable-user-select() {
-    -webkit-touch-callout: none;
-      -webkit-user-select: none;
-       -khtml-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
-              user-select: none;
+    @mixin disable-user-select() {
+        -webkit-touch-callout: none;
+          -webkit-user-select: none;
+           -khtml-user-select: none;
+             -moz-user-select: none;
+              -ms-user-select: none;
+                  user-select: none;
 
-    -webkit-tap-highlight-color: transparent;
-}
+        -webkit-tap-highlight-color: transparent;
+    }
 
-color-picker {
     display: block;
     overflow: hidden;
     width: 280px; // default size