feat(core): notifications on mobile (#606)

Co-authored-by: anastasiia_glushkova <anastasiia.glushkova@haiilo.com>
haiilo · Nov 18, 2024 · 46f982f · 46f982f
1 parent dd8b800
commit 46f982f
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/core/src/styles/core/_notification.scss b/core/src/styles/core/_notification.scss
@@ -1,6 +1,8 @@
 @use '../variables' as *;
 @use '../mixins' as *;
 
+$mobile-side-padding: 0.5rem;
+
 .cat-toastify {
   display: flex;
   border-radius: cat-border-radius('l');
@@ -24,6 +26,16 @@
     --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.textActive', $wrap: false)};
     background: cat-token('color.ui.background.surfaceInverted');
   }
+
+  @include until('xs') {
+    transform: translate($mobile-side-padding, -1rem) !important;
+    width: calc(100% - #{$mobile-side-padding * 2});
+    max-width: calc(100% - #{$mobile-side-padding * 2});
+    margin-left: 0;
+    margin-right: 0;
+    left: 0;
+    right: 0;
+  }
 }
 
 .cat-toastify-wrapper {