Fixed up notification styling a little

diff --git a/resources/assets/js/components/notification.js b/resources/assets/js/components/notification.js
index daef5bd6f4e178e8b66df8c6eefecdfc859bcf08..c352a9c85328d7f9f412d83eb736f08569db48d7 100644 (file)
--- a/resources/assets/js/components/notification.js
+++ b/resources/assets/js/components/notification.js
@@ -18,7 +18,7 @@ class Notification {
     show(textToShow = '') {
         this.elem.removeEventListener('transitionend', this.hideCleanup);
         this.textElem.textContent = textToShow;
-        this.elem.style.display = 'block';
+        this.elem.style.display = 'grid';
         setTimeout(() => {
             this.elem.classList.add('showing');
         }, 1);

diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index 70cfaf2b494e032ce154385e6e05dc0de510eb28..f15528167939ac76b3684aa80aed50c1332a00fa 100644 (file)
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -10,8 +10,8 @@
   box-shadow: $bs-med;
   z-index: 999999;
   cursor: pointer;
-  max-width: 480px;
-  transition: transform ease-in-out 360ms;
+  max-width: 360px;
+  transition: transform ease-in-out 280ms;
   transform: translate3d(580px, 0, 0);
   display: grid;
   grid-template-columns: 64px 1fr;
@@ -27,6 +27,7 @@
   }
   span {
     vertical-align: middle;
+    line-height: 1.3;
   }
   &.pos {
     background-color: $positive;
@@ -43,6 +44,9 @@
   &.showing {
     transform: translate3d(0, 0, 0);
   }
+  &.showing:hover {
+    transform: translate3d(0, -2px, 0);
+  }
 }
 
 [chapter-toggle] {