From 1d1d8defdaf3e3fd666583a551db8e5742aaebbb Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Fri, 11 Nov 2016 18:52:36 +0200
Subject: [PATCH] Updated calculation of offset

---
 css/_filmstrip.scss | 10 +++++-----
 css/_toastr.scss    |  3 ++-
 css/_variables.scss |  4 ++++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss
index 3fbbcd7f5a..13e0edb40c 100644
--- a/css/_filmstrip.scss
+++ b/css/_filmstrip.scss
@@ -18,7 +18,7 @@
         flex-wrap: nowrap;
         position: relative;
         z-index: 1;                     // Set z-index to make element visible
-        width: 17px;
+        width: $hideFilmstripButtonWidth;
 
         button {
             font-size: 14px;
@@ -53,7 +53,7 @@
         padding-left: 17px;
         bottom: 0;
         width:auto;
-        border: 2px solid transparent;
+        border: $thumbnailsBorder solid transparent;
         z-index: 5;
         transition: bottom 2s;
         overflow: visible !important;
@@ -67,7 +67,7 @@
             display: none;
             position: relative;
             background-size: contain;
-            border: 2px solid transparent;
+            border: $thumbnailVideoBorder solid transparent;
             border-radius:1px;
             margin: 0 $thumbnailVideoMargin;
 
@@ -84,7 +84,7 @@
                 -webkit-animation-name: greyPulse;
                 -webkit-animation-duration: 2s;
                 -webkit-animation-iteration-count: 1;
-                border: 2px solid $videoThumbnailSelected !important;
+                border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
                 box-shadow: inset 0 0 3px $videoThumbnailSelected,
                 0 0 3px $videoThumbnailSelected !important;
             }
@@ -98,7 +98,7 @@
             */
             &:hover {
                 cursor: hand;
-                border: 2px solid $videoThumbnailHovered;
+                border: $thumbnailVideoBorder solid $videoThumbnailHovered;
                 box-shadow: inset 0 0 3px $videoThumbnailHovered,
                 0 0 3px $videoThumbnailHovered;
 
diff --git a/css/_toastr.scss b/css/_toastr.scss
index f72fcabcae..b657322a3a 100644
--- a/css/_toastr.scss
+++ b/css/_toastr.scss
@@ -92,8 +92,9 @@
 }
 
 #toast-container.notification-bottom-right {
+  $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
   bottom: 135px;
-  right: 28px;
+  right: $hideFilmstripButtonWidth + $videoOffset;
 }
 
 #toast-container * {
diff --git a/css/_variables.scss b/css/_variables.scss
index 3a752f9e68..054e596b1f 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -17,6 +17,10 @@ $thumbnailToolbarHeight: 22px;
 $thumbnailIndicatorBorder: 0px;
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
 $thumbnailVideoMargin: 2px;
+$thumbnailsBorder: 2px;
+$thumbnailVideoBorder: 2px;
+$hideFilmstripButtonWidth: 17px;
+
 
 /**
  * Color variables.