feat(notitication): increase notifiaction transition duration and pad…

…dings in MD theme
framework7io · Jun 7, 2023 · 27f211e · 27f211e
1 parent b014a34
commit 27f211e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/core/components/notification/notification-md.less b/src/core/components/notification/notification-md.less
@@ -2,7 +2,7 @@
   .notification {
     transform: translate3d(0, -150%, 0);
     &.modal-in {
-      transition-duration: 200ms;
+      transition-duration: 500ms;
       transform: translate3d(0, 0%, 0);
       transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
       &.notification-transitioning {
@@ -19,8 +19,8 @@
   .notification-with-icon {
     .notification-icon {
       position: absolute;
-      left: var(--f7-notification-padding);
-      top: var(--f7-notification-padding);
+      left: var(--f7-notification-padding-horizontal);
+      top: var(--f7-notification-padding-vertical);
     }
     .notification-content,
     .notification-header {
@@ -37,7 +37,7 @@
     }
   }
   .notification-header + .notification-content {
-    margin-top: 4px;
+    margin-top: 8px;
   }
   .notification-title-right-text {
     margin-left: 4px;

diff --git a/src/core/components/notification/notification-vars.less b/src/core/components/notification/notification-vars.less
@@ -7,7 +7,8 @@
 }
 .ios-vars({
   --f7-notification-margin: 8px;
-  --f7-notification-padding: 10px;
+  --f7-notification-padding-horizontal: 10px;
+  --f7-notification-padding-vertical: 10px;
   --f7-notification-border-radius: 12px;
   --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
   --f7-notification-icon-size: 20px;
@@ -44,7 +45,8 @@
 });
 .md-vars({
   --f7-notification-margin: 16px;
-  --f7-notification-padding: 16px;
+  --f7-notification-padding-vertical: 20px;
+  --f7-notification-padding-horizontal: 16px;
   --f7-notification-border-radius: 16px;
   --f7-notification-box-shadow: none;
   --f7-notification-icon-size: 24px;

diff --git a/src/core/components/notification/notification.less b/src/core/components/notification/notification.less
@@ -15,7 +15,7 @@
   transition-property: transform;
   direction: ltr;
   max-width: var(--f7-notification-max-width);
-  padding: var(--f7-notification-padding);
+  padding: var(--f7-notification-padding-vertical) var(--f7-notification-padding-horizontal);
   border-radius: var(--f7-notification-border-radius);
   box-shadow: var(--f7-notification-box-shadow);
   background: var(--f7-notification-bg-color);