chore: add branding animation

2 files changed, 16 insertions, 1 deletions

diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
index fd526d6..c970b71 100644
--- a/src/components/organisms/toolbar/toolbar-items.module.scss
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -26,6 +26,7 @@
 
   @include mix.media("screen") {
     @include mix.dimensions(null, "sm") {
+      position: fixed;
       left: 0;
       right: 0;
     }
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss
index cda9b37..4bcabcb 100644
--- a/src/components/organisms/toolbar/toolbar.module.scss
+++ b/src/components/organisms/toolbar/toolbar.module.scss
@@ -23,6 +23,18 @@
   box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
     var(--color-shadow-dark);
 
+  :global {
+    animation: slide-in-from-bottom 0.8s ease-in-out 0s 1;
+  }
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      :global {
+        animation: slide-in-from-top 1s ease-in-out 0s 1;
+      }
+    }
+  }
+
   .modal {
     &--search,
     &--settings {
@@ -52,8 +64,10 @@
       }
 
       .tooltip {
+        padding: calc(var(--title-height) / 2 + var(--spacing-2xs))
+          var(--spacing-2xs) var(--spacing-2xs);
         top: unset;
-        bottom: calc(100% + var(--spacing-xs));
+        bottom: calc(100% + var(--spacing-2xs));
         transform-origin: bottom right;
       }
     }