Namespace for sass variable #68

fkhadra · Nov 3, 2017 · 74ed722 · 74ed722
1 parent 6edd990
commit 74ed722
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -428,21 +428,21 @@ If you use a sass loader you could replace the default variable to suits your ne
 
 ```css
 /* Below the variable you can replace */
-$toast-width: 320px !default;
-$toast-background: #ffffff !default;
-$font-color: #999 !default;
-$font-size: 13px !default;
-$animation-duration: 0.75s !default;
+$rt-toast-width: 320px !default;
+$rt-toast-background: #ffffff !default;
+$rt-font-color: #999 !default;
+$rt-font-size: 13px !default;
+$rt-animation-duration: 0.75s !default;
 
-$color-default: #fff !default;
-$color-info: #3498db !default;
-$color-success: #07bc0c !default;
-$color-warning: #f1c40f !default;
-$color-error: #e74c3c !default;
+$rt-color-default: #fff !default;
+$rt-color-info: #3498db !default;
+$rt-color-success: #07bc0c !default;
+$rt-color-warning: #f1c40f !default;
+$rt-color-error: #e74c3c !default;
 
-$color-progress-default: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55) !default;
+$rt-color-progress-default: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55) !default;
 
-$smartphone-portrait: "only screen and (max-width : 480px)" !default;
+$rt-smartphone-portrait: "only screen and (max-width : 480px)" !default;
 ```
 
 - Include the file and voila!

diff --git a/dist/ReactToastify.css.map b/dist/ReactToastify.css.map
diff --git a/src/scss/_animation.scss b/src/scss/_animation.scss
@@ -1,7 +1,7 @@
 @import "animations/bounce";
 
 .toastify-animated {
-  animation-duration: $animation-duration;
+  animation-duration: $rt-animation-duration;
   animation-fill-mode: both;
 }
 

diff --git a/src/scss/_container.scss b/src/scss/_container.scss
@@ -3,7 +3,7 @@
   z-index: 999;
   position: fixed;
   padding: 4px;
-  width: $toast-width;
+  width: $rt-toast-width;
   box-sizing: border-box;
   color: #fff;
   &--top-left {
@@ -13,7 +13,7 @@
   &--top-center {
     top: 1em;
     left: 50%;
-    margin-left: -($toast-width / 2);
+    margin-left: -($rt-toast-width / 2);
   }
   &--top-right {
     top: 1em;
@@ -27,7 +27,7 @@
   &--bottom-center {
     bottom: 1em;
     left: 50%;
-    margin-left: -($toast-width / 2);
+    margin-left: -($rt-toast-width / 2);
   }
   &--bottom-right {
     bottom: 1em;
@@ -36,7 +36,7 @@
 
 }
 
-@media #{$smartphone-portrait} {
+@media #{$rt-smartphone-portrait} {
   .toastify{
     width: 100vw;
     padding: 0;

diff --git a/src/scss/_content.scss b/src/scss/_content.scss
@@ -13,20 +13,20 @@
   font-family: sans-serif;
   cursor: pointer;
   &--default {
-    background: $color-default;
+    background: $rt-color-default;
     color: #aaa;
   }
   &--info {
-    background: $color-info;
+    background: $rt-color-info;
   }
   &--success {
-    background: $color-success;
+    background: $rt-color-success;
   }
   &--warning {
-    background: $color-warning;
+    background: $rt-color-warning;
   }
   &--error {
-    background: $color-error;
+    background: $rt-color-error;
   }
 }
 
@@ -35,7 +35,7 @@
   flex: 1;
 }
 
-@media #{$smartphone-portrait} {
+@media #{$rt-smartphone-portrait} {
   .toastify-content{
     margin-bottom: 0;  
   }

diff --git a/src/scss/_progress.scss b/src/scss/_progress.scss
@@ -18,7 +18,7 @@
   animation: track-progress linear 1;
   background-color: rgba(255,255,255,.7);
   &--default{
-    background: $color-progress-default;
+    background: $rt-color-progress-default;
   }
   &--info{}
   &--success{}

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -1,16 +1,16 @@
-$toast-width: 320px !default;
-$toast-background: #ffffff !default;
-$font-color: #999 !default;
-$font-size: 13px !default;
-$animation-duration: 0.75s !default;
+$rt-toast-width: 320px !default;
+$rt-toast-background: #ffffff !default;
+$rt-font-color: #999 !default;
+$rt-font-size: 13px !default;
+$rt-animation-duration: 0.75s !default;
 
-$color-default: #fff !default;
-$color-info: #3498db !default;
-$color-success: #07bc0c !default;
-$color-warning: #f1c40f !default;
-$color-error: #e74c3c !default;
+$rt-color-default: #fff !default;
+$rt-color-info: #3498db !default;
+$rt-color-success: #07bc0c !default;
+$rt-color-warning: #f1c40f !default;
+$rt-color-error: #e74c3c !default;
 
-$color-progress-default: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55) !default;
+$rt-color-progress-default: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55) !default;
 
-$smartphone-portrait: "only screen and (max-width : 480px)" !default;
+$rt-smartphone-portrait: "only screen and (max-width : 480px)" !default;