Merge pull request #54 from iconicsammy/master

Make width, title and body font-size customazible during imports in SCSS
artemsky · Aug 2, 2018 · 7f71589 · 7f71589
2 parents 81c8990 + f6c48fc
commit 7f71589
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 12 deletions.
diff --git a/src/styles/dark/snotify.scss b/src/styles/dark/snotify.scss
@@ -1,9 +1,14 @@
 $backdrop-color: #000000;
+$snotify-width:auto !default;
+
+@if $snotify-width == auto {
+  $snotify-width:300px;
+}
 
 .snotify {
   display: block;
   position: fixed;
-  width: 300px;
+  width: $snotify-width;
   z-index: 9999;
   box-sizing: border-box;
   pointer-events: none;
@@ -27,7 +32,7 @@ $backdrop-color: #000000;
 .snotify-centerTop,
 .snotify-centerCenter,
 .snotify-centerBottom {
-  left: calc(50% - 300px/2);
+  left: calc(50% - $snotify-width/2);
 }
 
 .snotify-leftTop,

diff --git a/src/styles/dark/toast.scss b/src/styles/dark/toast.scss
@@ -3,6 +3,17 @@ $toast-color: #fff;
 $toast-progressBar: #000;
 $toast-progressBarPercentage: #4c4c4c;
 
+$snotify-title-font-size:auto !default;
+$snotify-body-font-size:auto !default;
+
+@if $snotify-title-font-size == auto {
+  $snotify-title-font-size:1.8em;
+}
+
+@if $snotify-body-font-size == auto {
+  $snotify-body-font-size:1em;
+}
+
 .snotifyToast {
   display: block;
   cursor: pointer;
@@ -51,14 +62,14 @@ $toast-progressBarPercentage: #4c4c4c;
   }
 
   &__title {
-    font-size: 1.8em;
+    font-size: $snotify-title-font-size;
     line-height: 1.2em;
     margin-bottom: 5px;
     color: $toast-color;
   }
 
   &__body {
-    font-size: 1em;
+    font-size: $snotify-body-font-size;
     color: $toast-color;
   }
 

diff --git a/src/styles/material/snotify.scss b/src/styles/material/snotify.scss
@@ -1,9 +1,15 @@
 $backdrop-color: #000000;
+$snotify-width:auto !default;
+
+@if $snotify-width == auto {
+  $snotify-width:300px;
+}
+
 
 .snotify {
   display: block;
   position: fixed;
-  width: 300px;
+  width: $snotify-width;
   z-index: 9999;
   box-sizing: border-box;
   pointer-events: none;
@@ -27,7 +33,7 @@ $backdrop-color: #000000;
 .snotify-centerTop,
 .snotify-centerCenter,
 .snotify-centerBottom {
-  left: calc(50% - 300px/2);
+  left: calc(50% - $snotify-width/2);
 }
 
 .snotify-leftTop,

diff --git a/src/styles/material/toast.scss b/src/styles/material/toast.scss
@@ -36,6 +36,17 @@ $confirm-progressBarPercentage: #80cbc4;
 $prompt-bg: #009688;
 $prompt-color: #e0f2f1;
 
+$snotify-title-font-size:auto !default;
+$snotify-body-font-size:auto !default;
+
+@if $snotify-title-font-size == auto {
+  $snotify-title-font-size:1.8em;
+}
+
+@if $snotify-body-font-size == auto {
+  $snotify-body-font-size:1em;
+}
+
 .snotifyToast {
   display: block;
   cursor: pointer;
@@ -84,14 +95,14 @@ $prompt-color: #e0f2f1;
   }
 
   &__title {
-    font-size: 1.8em;
+    font-size: $snotify-title-font-size;
     line-height: 1.2em;
     margin-bottom: 5px;
     color: #fff;
   }
 
   &__body {
-    font-size: 1em;
+    font-size: $snotify-body-font-size;
   }
 
 }

diff --git a/src/styles/simple/snotify.scss b/src/styles/simple/snotify.scss
@@ -1,9 +1,14 @@
 $backdrop-color: #000000;
+$snotify-width:auto !default;
+
+@if $snotify-width == auto {
+  $snotify-width:300px;
+}
 
 .snotify {
   display: block;
   position: fixed;
-  width: 300px;
+  width: $snotify-width;
   z-index: 9999;
   box-sizing: border-box;
   pointer-events: none;
@@ -27,7 +32,7 @@ $backdrop-color: #000000;
 .snotify-centerTop,
 .snotify-centerCenter,
 .snotify-centerBottom {
-  left: calc(50% - 300px/2);
+  left: calc(50% - $snotify-width/2);
 }
 
 .snotify-leftTop,

diff --git a/src/styles/simple/toast.scss b/src/styles/simple/toast.scss
@@ -13,6 +13,19 @@ $async-border-color: $info-border-color;
 $confirm-border-color: #009688;
 $prompt-border-color: $confirm-border-color;
 
+$snotify-title-font-size:auto !default;
+$snotify-body-font-size:auto !default;
+
+@if $snotify-title-font-size == auto {
+  $snotify-title-font-size:1.8em;
+}
+
+@if $snotify-body-font-size == auto {
+  $snotify-body-font-size:1em;
+}
+
+
+
 .snotifyToast {
   display: block;
   cursor: pointer;
@@ -61,14 +74,14 @@ $prompt-border-color: $confirm-border-color;
   }
 
   &__title {
-    font-size: 1.8em;
+    font-size: $snotify-title-font-size;
     line-height: 1.2em;
     margin-bottom: 5px;
     color: $toast-color;
   }
 
   &__body {
-    font-size: 1em;
+    font-size: $snotify-body-font-size;
     color: $toast-color;
   }