feat(notification): m3 styles

nolimits4web · nolimits4web · commit d68621dcf3b0 · 2022-10-05T14:33:38.000+03:00
diff --git a/src/core/components/notification/notification-class.js b/src/core/components/notification/notification-class.js
@@ -204,7 +204,7 @@ class Notification extends Modal {
     const { icon, title, titleRightText, subtitle, text, closeButton, cssClass } =
       notification.params;
     return (
-      <div class={`notification ${cssClass || ''}`}>
+      <div class={`notification ${icon ? 'notification-with-icon' : ''} ${cssClass || ''}`}>
         <div class="notification-header">
           {icon && <div class="notification-icon">{icon}</div>}
           {title && <div class="notification-title">{title}</div>}
diff --git a/src/core/components/notification/notification-md.less b/src/core/components/notification/notification-md.less
@@ -2,9 +2,9 @@
   .notification {
     transform: translate3d(0, -150%, 0);
     &.modal-in {
-      transition-duration: 0ms;
-      animation: notification-md-in 400ms ease-out;
+      transition-duration: 200ms;
       transform: translate3d(0, 0%, 0);
+      transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
       &.notification-transitioning {
         transition-duration: 200ms;
       }
@@ -16,17 +16,28 @@
       transform: translate3d(0, -150%, 0);
     }
   }
+  .notification-with-icon {
+    .notification-icon {
+      position: absolute;
+      left: var(--f7-notification-padding);
+      top: var(--f7-notification-padding);
+    }
+    .notification-content,
+    .notification-header {
+      margin-left: calc(var(--f7-notification-icon-size) + 16px);
+    }
+  }
 
   .notification-icon {
     margin-right: 8px;
   }
   .notification-subtitle {
     + .notification-text {
-      margin-top: 2px;
+      margin-top: 4px;
     }
   }
   .notification-header + .notification-content {
-    margin-top: 6px;
+    margin-top: 4px;
   }
   .notification-title-right-text {
     margin-left: 4px;
@@ -45,7 +56,6 @@
     width: 16px;
     height: 16px;
     transition-duration: 300ms;
-    .link-highlight();
 
     &:before,
     &:after {
diff --git a/src/core/components/notification/notification-vars.less b/src/core/components/notification/notification-vars.less
@@ -4,9 +4,6 @@
   --f7-notification-subtitle-line-height: 1.35;
   --f7-notification-text-text-transform: none;
   --f7-notification-text-font-weight: 400;
-  .dark-vars({
-    --f7-notification-subtitle-color: #fff;
-  });
 }
 .ios-vars({
   --f7-notification-margin: 8px;
@@ -41,21 +38,22 @@
     --f7-notification-bg-color-rgb: 30, 30, 30;
     --f7-notification-title-color: #fff;
     --f7-notification-text-color: #fff;
+    --f7-notification-subtitle-color: #fff;
     --f7-notification-title-right-color: rgba(255,255,255,0.55);
   });
 });
 .md-vars({
-  --f7-notification-margin: 0px;
+  --f7-notification-margin: 16px;
   --f7-notification-padding: 16px;
-  --f7-notification-border-radius: 0px;
-  --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
-  --f7-notification-icon-size: 16px;
+  --f7-notification-border-radius: 16px;
+  --f7-notification-box-shadow: none;
+  --f7-notification-icon-size: 24px;
 
-  --f7-notification-title-color: var(--f7-theme-color);
-  --f7-notification-title-font-size: 12px;
+  --f7-notification-title-color: var(--f7-md-on-surface);
+  --f7-notification-title-font-size: 16px;
   --f7-notification-title-text-transform: none;
-  --f7-notification-title-line-height: 1;
-  --f7-notification-title-font-weight: 400;
+  --f7-notification-title-line-height: 1.35;
+  --f7-notification-title-font-weight: 500;
 
   --f7-notification-title-right-font-size: 12px;
 
@@ -64,15 +62,9 @@
 
   --f7-notification-text-font-size: 14px;
   --f7-notification-text-line-height: 1.35;
-  .light-vars({
-    --f7-notification-bg-color: #fff;
-    --f7-notification-title-right-color: rgba(0,0,0,0.54);
-    --f7-notification-subtitle-color: #212121;
-    --f7-notification-text-color: rgba(0,0,0,0.54);
-  });
-  .dark-vars({
-    --f7-notification-bg-color: #242424;
-    --f7-notification-title-right-color: rgba(255,255,255,0.54);
-    --f7-notification-text-color: rgba(255,255,255,0.54);
-  });
+
+  --f7-notification-bg-color: var(--f7-md-surface-5);
+  --f7-notification-text-color: var(--f7-md-on-surface-variant);
+  --f7-notification-title-right-color: var(--f7-md-on-surface-variant);
+  --f7-notification-subtitle-color: var(--f7-md-on-surface);
 });
