#30 add variables namespace

artemsky · May 18, 2018 · bd09ef7 · bd09ef7
1 parent e638c6a
commit bd09ef7
Show file tree

Hide file tree

Showing 17 changed files with 202 additions and 328 deletions.
diff --git a/src/styles/_shared/animations.scss b/src/styles/_shared/animations.scss
@@ -1,4 +1,4 @@
-$animation-name: 'fade';
+$snotify-animation-name: 'fade';
 
 .snotifyToast {
   animation-fill-mode: both;
@@ -7,53 +7,53 @@ $animation-name: 'fade';
 .snotify-leftTop,
 .snotify-leftCenter,
 .snotify-leftBottom {
-  .#{$animation-name}In {
+  .#{$snotify-animation-name}In {
     animation-name: fadeInLeft;
   }
 
-  .#{$animation-name}Out {
+  .#{$snotify-animation-name}Out {
     animation-name: fadeOutLeft;
   }
 }
 
 .snotify-rightTop,
 .snotify-rightCenter,
 .snotify-rightBottom {
-  .#{$animation-name}In {
+  .#{$snotify-animation-name}In {
     animation-name: fadeInRight;
   }
 
-  .#{$animation-name}Out {
+  .#{$snotify-animation-name}Out {
     animation-name: fadeOutRight;
   }
 }
 
 .snotify-centerTop {
-  .#{$animation-name}In {
+  .#{$snotify-animation-name}In {
     animation-name: fadeInDown;
   }
 
-  .#{$animation-name}Out {
+  .#{$snotify-animation-name}Out {
     animation-name: fadeOutUp;
   }
 }
 
 .snotify-centerCenter {
-  .#{$animation-name}In {
+  .#{$snotify-animation-name}In {
     animation-name: fadeIn;
   }
 
-  .#{$animation-name}Out {
+  .#{$snotify-animation-name}Out {
     animation-name: fadeOut;
   }
 }
 
 .snotify-centerBottom {
-  .#{$animation-name}In {
+  .#{$snotify-animation-name}In {
     animation-name: fadeInUp;
   }
 
-  .#{$animation-name}Out {
+  .#{$snotify-animation-name}Out {
     animation-name: fadeOutDown;
   }
 }

diff --git a/src/styles/_shared/icons.scss b/src/styles/_shared/icons.scss
@@ -1,53 +1,53 @@
-/// Replace `$search` with `$replace` in `$string`
+/// Replace `$snotify-search` with `$snotify-replace` in `$snotify-string`
 /// @author Hugo Giraudel
-/// @param {String} $string - Initial string
-/// @param {String} $search - Substring to replace
-/// @param {String} $replace ('') - New value
+/// @param {String} $snotify-string - Initial string
+/// @param {String} $snotify-search - Substring to replace
+/// @param {String} $snotify-replace ('') - New value
 /// @return {String} - Updated string
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+@function str-replace($snotify-string, $snotify-search, $snotify-replace: '') {
+  $snotify-index: str-index($snotify-string, $snotify-search);
 
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  @if $snotify-index {
+    @return str-slice($snotify-string, 1, $snotify-index - 1) + $snotify-replace + str-replace(str-slice($snotify-string, $snotify-index + str-length($snotify-search)), $snotify-search, $snotify-replace);
   }
 
-  @return $string;
+  @return $snotify-string;
 }
 
-@function -svg($svg, $color, $viewBox: '0 0 512 512') {
-  $result: 'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="#{$viewBox}" fill="#{$color}">#{$svg}</svg>';
-  $result: str-replace($result, '%', '%25');
-  $result: str-replace($result, '"', '%22');
-  $result: str-replace($result, "'", '%27');
-  $result: str-replace($result, ' ', '%20');
-  $result: str-replace($result, '<', '%3C');
-  $result: str-replace($result, '>', '%3E');
-  $result: str-replace($result, '#', '%23');
+@function -svg($snotify-svg, $snotify-color, $snotify-viewBox: '0 0 512 512') {
+  $snotify-result: 'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="#{$snotify-viewBox}" fill="#{$snotify-color}">#{$snotify-svg}</svg>';
+  $snotify-result: str-replace($snotify-result, '%', '%25');
+  $snotify-result: str-replace($snotify-result, '"', '%22');
+  $snotify-result: str-replace($snotify-result, "'", '%27');
+  $snotify-result: str-replace($snotify-result, ' ', '%20');
+  $snotify-result: str-replace($snotify-result, '<', '%3C');
+  $snotify-result: str-replace($snotify-result, '>', '%3E');
+  $snotify-result: str-replace($snotify-result, '#', '%23');
 
-  @return $result;
+  @return $snotify-result;
 }
 
-@function -generate-icons($colors-map) {
+@function -generate-icons($snotify-colors-map) {
   @return (
     error: -svg(
       '<g><path d="M437,75A256,256,0,1,0,75,437,256,256,0,1,0,437,75ZM416.43,416.43a226.82,226.82,0,0,1-320.86,0C7.11,328,7.11,184,95.57,95.57a226.82,226.82,0,0,1,320.86,0C504.89,184,504.89,328,416.43,416.43Z"/><path d="M368.81,143.19a14.5,14.5,0,0,0-20.58,0L256,235.42l-92.23-92.23a14.55,14.55,0,0,0-20.58,20.58L235.42,256l-92.23,92.23a14.6,14.6,0,0,0,10.24,24.89,14.19,14.19,0,0,0,10.24-4.31l92.23-92.23,92.23,92.23a14.64,14.64,0,0,0,10.24,4.31,14,14,0,0,0,10.24-4.31,14.5,14.5,0,0,0,0-20.58l-92-92.23,92.23-92.23A14.5,14.5,0,0,0,368.81,143.19Z"/></g>',
-      map-get($colors-map, error)
+      map-get($snotify-colors-map, error)
     ),
     warning: -svg(
       '<g><path d="M256,512c141.15,0,256-114.84,256-256S397.15,0,256,0,0,114.84,0,256,114.85,512,256,512Zm0-480.49c123.79,0,224.49,100.71,224.49,224.49S379.79,480.49,256,480.49,31.51,379.79,31.51,256,132.21,31.51,256,31.51Z"/><circle cx="260.08" cy="343.87" r="26.35"/><path d="M254.68,278.39a15.76,15.76,0,0,0,15.75-15.75V128.72a15.75,15.75,0,1,0-31.51,0V262.63A15.76,15.76,0,0,0,254.68,278.39Z"/></g>',
-      map-get($colors-map, warning)
+      map-get($snotify-colors-map, warning)
     ),
     info: -svg(
       '<g><path d="M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z"/><path d="M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z"/><path d="M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z"/></g>',
-      map-get($colors-map, info)
+      map-get($snotify-colors-map, info)
     ),
     success: -svg(
       '<g><path d="M256,0C114.85,0,0,114.84,0,256S114.85,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,492.31c-130.29,0-236.31-106-236.31-236.31S125.71,19.69,256,19.69,492.31,125.71,492.31,256,386.29,492.31,256,492.31Z"/><path class="cls-1" d="M376.64,151,225.31,321.24l-91.17-72.93a9.85,9.85,0,0,0-12.3,15.38l98.46,78.77a9.86,9.86,0,0,0,13.52-1.15L391.36,164.08A9.85,9.85,0,0,0,376.64,151Z"/></g>',
-      map-get($colors-map, success)
+      map-get($snotify-colors-map, success)
     ),
     async: -svg(
       '<g><path d="M256,0a32,32,0,0,0-32,32V96a32,32,0,0,0,64,0V32A32,32,0,0,0,256,0Zm0,384a32,32,0,0,0-32,32v64a32,32,0,0,0,64,0V416A32,32,0,0,0,256,384ZM391.74,165.5,437,120.22A32,32,0,0,0,391.74,75L346.5,120.22a32,32,0,0,0,45.25,45.28Zm-271.52,181L75,391.74A32,32,0,0,0,120.22,437l45.25-45.25a32,32,0,0,0-45.25-45.25Zm0-271.52A32,32,0,1,0,75,120.22l45.25,45.28a32,32,0,1,0,45.25-45.28ZM391.74,346.5a32,32,0,0,0-45.25,45.25L391.74,437A32,32,0,0,0,437,391.74ZM480,224H416a32,32,0,0,0,0,64h64a32,32,0,0,0,0-64ZM128,256a32,32,0,0,0-32-32H32a32,32,0,0,0,0,64H96A32,32,0,0,0,128,256Z"/></g>',
-      map-get($colors-map, async)
+      map-get($snotify-colors-map, async)
     )
   );
 }
diff --git a/src/styles/dark/snotify.scss → src/styles/_shared/snotify.scss b/src/styles/dark/snotify.scss → src/styles/_shared/snotify.scss
@@ -1,4 +1,4 @@
-$backdrop-color: #000;
+$snotify-backdrop-color: #000;
 
 .snotify {
   display: block;
@@ -56,7 +56,7 @@ $backdrop-color: #000;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: $backdrop-color;
+  background-color: $snotify-backdrop-color;
   opacity: 0;
   z-index: 9998;
   transition: opacity .3s;

diff --git a/src/styles/dark.scss b/src/styles/dark.scss
@@ -1,6 +1,6 @@
 @import "_shared/icons";
 @import "_shared/animations";
-@import "dark/snotify";
+@import "_shared/snotify";
 @import "dark/toast";
 @import "dark/buttons";
 @import "dark/icon";

diff --git a/src/styles/dark/icon.scss b/src/styles/dark/icon.scss
@@ -1,16 +1,16 @@
-$success: #4caf50;
-$info: #1e88e5;
-$warning: #ff9800;
-$error: #f44336;
-$async: $info;
+$snotify-success: #4caf50;
+$snotify-info: #1e88e5;
+$snotify-warning: #ff9800;
+$snotify-error: #f44336;
+$snotify-async: $snotify-info;
 
-$icons: -generate-icons(
+$snotify-icons: -generate-icons(
   (
-    error: $error,
-    warning: $warning,
-    info: $info,
-    success: $success,
-    async: $async
+    error: $snotify-error,
+    warning: $snotify-warning,
+    info: $snotify-info,
+    success: $snotify-success,
+    async: $snotify-async
   )
 );
 
@@ -27,23 +27,23 @@ $icons: -generate-icons(
 }
 
 .snotify-icon--error {
-  background-image: url('#{map-get($icons, error)}');
+  background-image: url('#{map-get($snotify-icons, error)}');
 }
 
 .snotify-icon--warning {
-  background-image: url('#{map-get($icons, warning)}');
+  background-image: url('#{map-get($snotify-icons, warning)}');
 }
 
 .snotify-icon--info {
-  background-image: url('#{map-get($icons, info)}');
+  background-image: url('#{map-get($snotify-icons, info)}');
 }
 
 .snotify-icon--success {
-  background-image: url('#{map-get($icons, success)}');
+  background-image: url('#{map-get($snotify-icons, success)}');
 }
 
 .snotify-icon--async {
-  background-image: url('#{map-get($icons, async)}');
+  background-image: url('#{map-get($snotify-icons, async)}');
   animation: async 3s infinite linear;
   transform-origin: 50% 50%;
 }
diff --git a/src/styles/dark/prompt.scss b/src/styles/dark/prompt.scss
@@ -121,13 +121,13 @@
 .snotifyToast {
   &--invalid {
     .snotifyToast__input__label::before {
-      border-color: $error;
+      border-color: $snotify-error;
     }
   }
 
   &--valid {
     .snotifyToast__input__label::before {
-      border-color: $success;
+      border-color: $snotify-success;
     }
   }
 }
diff --git a/src/styles/dark/toast.scss b/src/styles/dark/toast.scss
@@ -1,12 +1,12 @@
-$toast-bg: rgba(0, 0, 0, .9);
-$toast-color: #fff;
-$toast-progressBar: #000;
-$toast-progressBarPercentage: #4c4c4c;
+$snotify-toast-bg: rgba(0, 0, 0, .9);
+$snotify-toast-color: #fff;
+$snotify-toast-progressBar: #000;
+$snotify-toast-progressBarPercentage: #4c4c4c;
 
 .snotifyToast {
   display: block;
   cursor: pointer;
-  background-color: $toast-bg;
+  background-color: $snotify-toast-bg;
   max-height: 300px;
   height: 100%;
   margin: 5px;
@@ -31,21 +31,21 @@ $toast-progressBarPercentage: #4c4c4c;
     padding: 5px 65px 5px 15px;
     min-height: 78px;
     font-size: 16px;
-    color: $toast-color;
+    color: $snotify-toast-color;
   }
 
   &__progressBar {
     position: relative;
     width: 100%;
     height: 5px;
-    background-color: $toast-progressBar;
+    background-color: $snotify-toast-progressBar;
 
     &__percentage {
       position: absolute;
       top: 0;
       left: 0;
       height: 5px;
-      background-color: $toast-progressBarPercentage;
+      background-color: $snotify-toast-progressBarPercentage;
       max-width: 100%;
     }
   }
@@ -54,12 +54,12 @@ $toast-progressBarPercentage: #4c4c4c;
     font-size: 1.8em;
     line-height: 1.2em;
     margin-bottom: 5px;
-    color: $toast-color;
+    color: $snotify-toast-color;
   }
 
   &__body {
     font-size: 1em;
-    color: $toast-color;
+    color: $snotify-toast-color;
   }
 }
 

diff --git a/src/styles/material.scss b/src/styles/material.scss
@@ -1,6 +1,6 @@
 @import "_shared/icons";
 @import "_shared/animations";
-@import "material/snotify";
+@import "_shared/snotify";
 @import "material/toast";
 @import "material/prompt";
 @import "material/buttons";

diff --git a/src/styles/material/icon.scss b/src/styles/material/icon.scss
@@ -1,16 +1,16 @@
-$success: #c8e6c9;
-$info: #bbdefb;
-$warning: #ffccbc;
-$error: #ffcdd2;
-$async: $info;
+$snotify-success: #c8e6c9;
+$snotify-info: #bbdefb;
+$snotify-warning: #ffccbc;
+$snotify-error: #ffcdd2;
+$snotify-async: $snotify-info;
 
-$icons: -generate-icons(
+$snotify-icons: -generate-icons(
   (
-    error: $error,
-    warning: $warning,
-    info: $info,
-    success: $success,
-    async: $async
+    error: $snotify-error,
+    warning: $snotify-warning,
+    info: $snotify-info,
+    success: $snotify-success,
+    async: $snotify-async
   )
 );
 
@@ -27,23 +27,23 @@ $icons: -generate-icons(
 }
 
 .snotify-icon--error {
-  background-image: url('#{map-get($icons, error)}');
+  background-image: url('#{map-get($snotify-icons, error)}');
 }
 
 .snotify-icon--warning {
-  background-image: url('#{map-get($icons, warning)}');
+  background-image: url('#{map-get($snotify-icons, warning)}');
 }
 
 .snotify-icon--info {
-  background-image: url('#{map-get($icons, info)}');
+  background-image: url('#{map-get($snotify-icons, info)}');
 }
 
 .snotify-icon--success {
-  background-image: url('#{map-get($icons, success)}');
+  background-image: url('#{map-get($snotify-icons, success)}');
 }
 
 .snotify-icon--async {
-  background-image: url('#{map-get($icons, async)}');
+  background-image: url('#{map-get($snotify-icons, async)}');
   animation: async 3s infinite linear;
   transform-origin: 50% 50%;
 }
diff --git a/src/styles/material/prompt.scss b/src/styles/material/prompt.scss
@@ -121,13 +121,13 @@
 .snotifyToast {
   &--invalid {
     .snotifyToast__input__label::before {
-      border-color: $error-bg;
+      border-color: $snotify-error-bg;
     }
   }
 
   &--valid {
     .snotifyToast__input__label::before {
-      border-color: $success-bg;
+      border-color: $snotify-success-bg;
     }
   }
 }