@xenknight/framework7 0.0.2

package/components/navbar/navbar.less

@@ -0,0 +1,311 @@
+/* === Navbar === */
+@import './navbar-vars.less';
+
+.navbars,
+.navbar {
+  z-index: 500;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+.navbars {
+  position: absolute;
+  .navbar {
+    z-index: auto;
+  }
+  .navbar-transitioning {
+    z-index: 500;
+  }
+}
+.navbar {
+  --f7-navbar-large-collapse-progress: 0;
+  position: relative;
+  backface-visibility: hidden;
+  box-sizing: border-box;
+  margin: 0;
+  // transform: translate3d(0,0,0);
+  height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
+  color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
+  font-size: var(--f7-navbar-font-size);
+
+  b {
+    font-weight: 500;
+  }
+  a {
+    color: var(--f7-navbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  }
+  a.link {
+    display: flex;
+    justify-content: flex-start;
+    line-height: var(--f7-navbar-link-line-height, var(--f7-navbar-height));
+    height: var(--f7-navbar-link-height, var(--f7-navbar-height));
+  }
+  .title,
+  .left,
+  .right {
+    position: relative;
+    z-index: 10;
+  }
+  .title {
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 10;
+    font-weight: var(--f7-navbar-title-font-weight);
+    display: inline-block;
+    line-height: var(--f7-navbar-title-line-height);
+    text-align: var(--f7-navbar-title-text-align);
+    font-size: var(--f7-navbar-title-font-size);
+    .ltr({
+      margin-left: var(--f7-navbar-title-margin-left);
+      margin-right: var(--f7-navbar-title-margin-left);
+    });
+    .rtl({
+      margin-right: var(--f7-navbar-title-margin-left);
+      margin-left: var(--f7-navbar-title-margin-left);
+    });
+  }
+  .subtitle {
+    display: block;
+    color: var(--f7-navbar-subtitle-text-color);
+    font-weight: normal;
+    font-size: var(--f7-navbar-subtitle-font-size);
+    line-height: var(--f7-navbar-subtitle-line-height);
+    text-align: var(--f7-navbar-subtitle-text-align);
+  }
+  .left,
+  .right {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    // transform: translate3d(0,0,0);
+  }
+  .right:first-child {
+    position: absolute;
+    height: 100%;
+  }
+
+  &.no-outline,
+  .no-outline {
+    .navbar-bg:after {
+      display: none !important;
+    }
+    .title-large:after {
+      display: none !important;
+    }
+  }
+
+  &.navbar-hidden,
+  .navbar-hidden & {
+    .navbar-bg:before {
+      opacity: 0 !important;
+    }
+  }
+}
+.navbar-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+  background: var(--f7-navbar-bg-color);
+  background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
+  transition-property: transform;
+  .ios-translucent-bars(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
+  &:after,
+  &:before {
+    backface-visibility: hidden;
+  }
+  .hairline(bottom, var(--f7-navbar-border-color, var(--f7-bars-border-color)));
+  &:after {
+    z-index: 1;
+  }
+}
+// Transitions
+.navbar-transitioning {
+  &,
+  & .left,
+  & .title,
+  & .right,
+  & .title-large-text,
+  & .navbar-bg,
+  & .subnavbar,
+  & .navbar-bg:before {
+    transition-duration: var(--f7-navbar-hide-show-transition-duration);
+  }
+}
+.navbar-page-transitioning {
+  transition-duration: var(--f7-page-swipeback-transition-duration) !important;
+  .title-large-text,
+  .navbar-bg {
+    transition-duration: var(--f7-page-swipeback-transition-duration) !important;
+  }
+}
+// Hidden
+.navbar-hidden {
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-height)), 0);
+  .navbar-inner {
+    pointer-events: none;
+    > .left,
+    > .title,
+    > .right {
+      opacity: 0 !important;
+    }
+  }
+  .subnavbar {
+    pointer-events: auto;
+  }
+}
+.navbar-hidden-statusbar {
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-height) - var(--f7-safe-area-top)), 0);
+}
+.navbar-large-hidden .navbar-large {
+  --f7-navbar-large-collapse-progress: 1;
+}
+.navbar-inner {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--f7-safe-area-top)
+    calc(var(--f7-navbar-inner-padding-right) + var(--f7-safe-area-right)) 0
+    calc(var(--f7-navbar-inner-padding-left) + var(--f7-safe-area-left));
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.views,
+.view,
+.page,
+.navbars {
+  > .navbar {
+    position: absolute;
+  }
+}
+
+// Transparent navbar
+.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(
+    .with-searchbar-expandable-enabled
+  ) {
+  .navbar-bg,
+  .title {
+    opacity: 0;
+  }
+}
+
+// Large Title Navbar
+.navbar-large .navbar-bg {
+  height: calc(100% + var(--f7-navbar-large-title-height));
+  transform: translate3d(
+    0px,
+    calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),
+    0
+  );
+}
+
+.navbar-large-transparent .navbar-bg,
+.navbar-large.navbar-transparent .navbar-bg {
+  opacity: var(--f7-navbar-large-collapse-progress);
+}
+.ios .router-navbar-transition-to-large .navbar-bg,
+.ios .router-navbar-transition-from-large .navbar-bg,
+.navbar-bg.ios-swipeback-navbar-bg-large,
+.navbar-large-transparent .navbar-bg.ios-swipeback-navbar-bg-large,
+.navbar-large.navbar-transparent .navbar-bg.ios-swipeback-navbar-bg-large {
+  height: calc(100% + var(--f7-navbar-large-title-height));
+  transform: translate3d(
+    0px,
+    calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),
+    0
+  );
+}
+
+.ios .navbar:not(.navbar-large) .navbar-bg {
+  --f7-navbar-large-collapse-progress: 1;
+}
+.navbar-large .title {
+  opacity: var(--f7-navbar-large-collapse-progress);
+}
+.navbar-large-collapsed {
+  --f7-navbar-large-collapse-progress: 1;
+  .title-large {
+    pointer-events: none;
+  }
+}
+.navbar .title-large {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  display: flex;
+  white-space: nowrap;
+  overflow: hidden;
+  height: var(--f7-navbar-large-title-height);
+  z-index: 5;
+}
+.navbar .title-large-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--f7-navbar-large-title-text-color);
+  letter-spacing: var(--f7-navbar-large-title-letter-spacing);
+  font-size: var(--f7-navbar-large-title-font-size);
+  font-weight: var(--f7-navbar-large-title-font-weight);
+  line-height: var(--f7-navbar-large-title-line-height);
+  padding-left: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left));
+  padding-right: calc(var(--f7-navbar-large-title-padding-right) + var(--f7-safe-area-right));
+  padding-top: var(--f7-navbar-large-title-padding-vertical);
+  padding-bottom: var(--f7-navbar-large-title-padding-vertical);
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+  transform: translate3d(
+    0px,
+    calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),
+    0
+  );
+  .ltr({
+    transform-origin: calc(var(--f7-navbar-large-title-padding-left) + var(--f7-safe-area-left)) center;
+  });
+  .rtl({
+    transform-origin: calc(100% - var(--f7-navbar-large-title-padding-left) - var(--f7-safe-area-left)) center;
+  });
+}
+.navbar-no-title-large-transition {
+  .title-large-text {
+    transition-duration: 0ms;
+  }
+}
+
+// Relation with page
+.navbar ~ *,
+.navbars ~ * {
+  --f7-page-navbar-offset: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
+}
+.navbar ~ * .page-with-navbar-large,
+.navbar ~ .page-with-navbar-large,
+.navbars ~ * .page-with-navbar-large,
+.navbars ~ .page-with-navbar-large,
+.page-with-navbar-large .navbar ~ * {
+  --f7-page-navbar-offset: calc(
+    var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top)
+  );
+}
+.page.no-navbar,
+.page.no-navbar .navbar ~ * {
+  --f7-page-navbar-offset: var(--f7-safe-area-top);
+}
+
+.if-ios-theme({
+  @import './navbar-ios.less';
+});
+.if-md-theme({
+  @import './navbar-md.less';
+});

package/components/notification/notification-class.js

@@ -0,0 +1,212 @@
+import $ from '../../shared/dom7.js';
+import { extend, now, nextTick } from '../../shared/utils.js';
+import Modal from '../modal/modal-class.js';
+/** @jsx $jsx */
+import $jsx from '../../shared/$jsx.js';
+class Notification extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      on: {}
+    }, app.params.notification, params);
+
+    // Extends with open/close Modal methods;
+    super(app, extendedParams);
+    const notification = this;
+    notification.app = app;
+    notification.params = extendedParams;
+    const {
+      icon,
+      title,
+      titleRightText,
+      subtitle,
+      text,
+      closeButton,
+      closeTimeout,
+      cssClass,
+      closeOnClick
+    } = notification.params;
+    let $el;
+    if (!notification.params.el) {
+      // Find Element
+      const notificationHtml = notification.render({
+        icon,
+        title,
+        titleRightText,
+        subtitle,
+        text,
+        closeButton,
+        cssClass
+      });
+      $el = $(notificationHtml);
+    } else {
+      $el = $(notification.params.el);
+    }
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+    if ($el.length === 0) {
+      return notification.destroy();
+    }
+    extend(notification, {
+      $el,
+      el: $el[0],
+      type: 'notification'
+    });
+    $el[0].f7Modal = notification;
+    if (closeButton) {
+      $el.find('.notification-close-button').on('click', () => {
+        notification.close();
+      });
+    }
+    $el.on('click', e => {
+      if (closeButton && $(e.target).closest('.notification-close-button').length) {
+        return;
+      }
+      notification.emit('local::click notificationClick', notification);
+      if (closeOnClick) notification.close();
+    });
+    notification.on('beforeDestroy', () => {
+      $el.off('click');
+    });
+
+    /* Touch Events */
+    let isTouched;
+    let isMoved;
+    let isScrolling;
+    let touchesDiff;
+    let touchStartTime;
+    let notificationHeight;
+    const touchesStart = {};
+    function handleTouchStart(e) {
+      if (isTouched) return;
+      isTouched = true;
+      isMoved = false;
+      isScrolling = undefined;
+      touchStartTime = now();
+      touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
+      touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+    }
+    function handleTouchMove(e) {
+      if (!isTouched) return;
+      const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      if (typeof isScrolling === 'undefined') {
+        isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) < Math.abs(pageX - touchesStart.x));
+      }
+      if (isScrolling) {
+        isTouched = false;
+        return;
+      }
+      e.preventDefault();
+      if (!isMoved) {
+        notification.$el.removeClass('notification-transitioning');
+        notification.$el.transition(0);
+        notificationHeight = notification.$el[0].offsetHeight / 2;
+      }
+      isMoved = true;
+      touchesDiff = pageY - touchesStart.y;
+      let newTranslate = touchesDiff;
+      if (touchesDiff > 0) {
+        newTranslate = touchesDiff ** 0.8;
+      }
+      notification.$el.transform(`translate3d(0, ${newTranslate}px, 0)`);
+    }
+    function handleTouchEnd() {
+      if (!isTouched || !isMoved) {
+        isTouched = false;
+        isMoved = false;
+        return;
+      }
+      isTouched = false;
+      isMoved = false;
+      if (touchesDiff === 0) {
+        return;
+      }
+      const timeDiff = now() - touchStartTime;
+      notification.$el.transition('');
+      notification.$el.addClass('notification-transitioning');
+      notification.$el.transform('');
+      if (touchesDiff < -10 && timeDiff < 300 || -touchesDiff >= notificationHeight / 1) {
+        notification.close();
+      }
+    }
+    function attachTouchEvents() {
+      notification.$el.on(app.touchEvents.start, handleTouchStart, {
+        passive: true
+      });
+      app.on('touchmove:active', handleTouchMove);
+      app.on('touchend:passive', handleTouchEnd);
+    }
+    function detachTouchEvents() {
+      notification.$el.off(app.touchEvents.start, handleTouchStart, {
+        passive: true
+      });
+      app.off('touchmove:active', handleTouchMove);
+      app.off('touchend:passive', handleTouchEnd);
+    }
+    let timeoutId;
+    function closeOnTimeout() {
+      timeoutId = nextTick(() => {
+        if (isTouched && isMoved) {
+          closeOnTimeout();
+          return;
+        }
+        notification.close();
+      }, closeTimeout);
+    }
+    notification.on('open', () => {
+      if (notification.params.swipeToClose) {
+        attachTouchEvents();
+      }
+      $('.notification.modal-in').each(openedEl => {
+        const notificationInstance = app.notification.get(openedEl);
+        if (openedEl !== notification.el && notificationInstance) {
+          notificationInstance.close();
+        }
+      });
+      if (closeTimeout) {
+        closeOnTimeout();
+      }
+    });
+    notification.on('close beforeDestroy', () => {
+      if (notification.params.swipeToClose) {
+        detachTouchEvents();
+      }
+      clearTimeout(timeoutId);
+    });
+    return notification;
+  }
+  render() {
+    const notification = this;
+    if (notification.params.render) return notification.params.render.call(notification, notification);
+    const {
+      icon,
+      title,
+      titleRightText,
+      subtitle,
+      text,
+      closeButton,
+      cssClass
+    } = notification.params;
+    return $jsx("div", {
+      class: `notification ${icon ? 'notification-with-icon' : ''} ${cssClass || ''}`
+    }, $jsx("div", {
+      class: "notification-header"
+    }, icon && $jsx("div", {
+      class: "notification-icon"
+    }, icon), title && $jsx("div", {
+      class: "notification-title"
+    }, title), titleRightText && $jsx("div", {
+      class: "notification-title-right-text"
+    }, titleRightText), closeButton && $jsx("span", {
+      class: "notification-close-button"
+    })), $jsx("div", {
+      class: "notification-content"
+    }, subtitle && $jsx("div", {
+      class: "notification-subtitle"
+    }, subtitle), text && $jsx("div", {
+      class: "notification-text"
+    }, text)));
+  }
+}
+export default Notification;

package/components/notification/notification-ios.less

@@ -0,0 +1,55 @@
+.ios {
+  .notification {
+    transition-duration: 450ms;
+    transform: translate3d(0%, -200%, 0);
+    &.modal-in {
+      transform: translate3d(0%, 0%, 0);
+      opacity: 1;
+    }
+    &.modal-out {
+      transform: translate3d(0%, -200%, 0);
+    }
+  }
+
+  .notification-icon {
+    margin-right: 8px;
+  }
+  .notification-header + .notification-content {
+    margin-top: 10px;
+  }
+  .notification-title-right-text {
+    margin-right: 6px;
+    margin-left: auto;
+    + .notification-close-button {
+      margin-left: 10px;
+    }
+  }
+  .notification-close-button {
+    font-size: 14px;
+    width: 20px;
+    height: 20px;
+    opacity: 0.3;
+    transition-duration: 300ms;
+    &.active-state {
+      transition-duration: 0ms;
+      opacity: 0.1;
+    }
+    &:after {
+      color: #000;
+      content: 'notification_close_ios';
+      font-size: 0.65em;
+      line-height: 44px;
+      width: 44px;
+      height: 44px;
+      margin-left: -22px;
+      margin-top: -22px;
+    }
+  }
+  .if-dark-theme({
+    .dark, &.dark {
+      .notification-close-button:after {
+        color: #fff;
+      }
+    }
+  });
+}

package/components/notification/notification-md.less

@@ -0,0 +1,87 @@
+.md {
+  .notification {
+    transform: translate3d(0, -150%, 0);
+    &.modal-in {
+      transition-duration: 500ms;
+      transform: translate3d(0, 0%, 0);
+      transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+      &.notification-transitioning {
+        transition-duration: 200ms;
+      }
+    }
+    &.modal-out {
+      animation: none;
+      transition-duration: 200ms;
+      transition-timing-function: ease-in;
+      transform: translate3d(0, -150%, 0);
+    }
+  }
+  .notification-with-icon {
+    .notification-icon {
+      position: absolute;
+      left: var(--f7-notification-padding-horizontal);
+      top: var(--f7-notification-padding-vertical);
+    }
+    .notification-content,
+    .notification-header {
+      margin-left: calc(var(--f7-notification-icon-size) + 16px);
+    }
+  }
+
+  .notification-icon {
+    margin-right: 8px;
+  }
+  .notification-subtitle {
+    + .notification-text {
+      margin-top: 4px;
+    }
+  }
+  .notification-header + .notification-content {
+    margin-top: 8px;
+  }
+  .notification-title-right-text {
+    margin-left: 4px;
+    &:before {
+      content: '';
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 4px;
+      background: var(--f7-notification-title-right-color);
+    }
+  }
+  .notification-close-button {
+    width: 16px;
+    height: 16px;
+    transition-duration: 300ms;
+
+    &:before,
+    &:after {
+      width: 48px;
+      height: 48px;
+      left: 50%;
+      top: 50%;
+      margin-left: -24px;
+      margin-top: -24px;
+    }
+    &:after {
+      color: var(--f7-md-on-surface-variant);
+      content: 'delete_round_md';
+      line-height: 48px;
+      font-size: 24px;
+    }
+  }
+}
+@keyframes notification-md-in {
+  0% {
+    transform: translate3d(0, -150%, 0);
+  }
+  50% {
+    transform: translate3d(0, 10%, 0);
+  }
+  100% {
+    transform: translate3d(0, 0%, 0);
+  }
+}

package/components/notification/notification-rtl.css

@@ -0,0 +1 @@
+:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}.ios{--f7-notification-margin:8px;--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;--f7-notification-title-font-size:13px;--f7-notification-title-text-transform:uppercase;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:400;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:13px;--f7-notification-subtitle-font-size:15px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:15px;--f7-notification-text-line-height:1.2;--f7-notification-bg-color:rgba(250, 250, 250, 0.95);--f7-notification-bg-color-rgb:255,255,255;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.45);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.ios .dark,.ios.dark{--f7-notification-bg-color:rgba(30, 30, 30, 0.95);--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{--f7-notification-margin: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;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.35;--f7-notification-title-font-weight:500;--f7-notification-title-right-font-size:12px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:400;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35}.md,.md .dark,.md [class*=color-]{--f7-notification-title-color:var(--f7-md-on-surface);--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)}.notification{position:absolute;left:var(--f7-notification-margin);top:var(--f7-notification-margin);width:calc(100% - var(--f7-notification-margin) * 2);z-index:20000;font-size:14px;margin:0;border:none;display:none;box-sizing:border-box;transition-property:transform;direction:ltr;max-width:var(--f7-notification-max-width);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);margin-top:var(--f7-safe-area-top)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .notification{background-color:rgba(var(--f7-notification-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}@media (min-width:568px){.notification{left:50%;width:var(--f7-notification-max-width);margin-left:calc(-1 * var(--f7-notification-max-width)/ 2)}}.notification-title{color:var(--f7-notification-title-color,var(--f7-theme-color));font-size:var(--f7-notification-title-font-size);text-transform:var(--f7-notification-title-text-transform);line-height:var(--f7-notification-title-line-height);font-weight:var(--f7-notification-title-font-weight);letter-spacing:var(--f7-notification-title-letter-spacing)}.notification-subtitle{color:var(--f7-notification-subtitle-color);font-size:var(--f7-notification-subtitle-font-size);text-transform:var(--f7-notification-subtitle-text-transform);line-height:var(--f7-notification-subtitle-line-height);font-weight:var(--f7-notification-subtitle-font-weight)}.notification-text{color:var(--f7-notification-text-color);font-size:var(--f7-notification-text-font-size);text-transform:var(--f7-notification-text-text-transform);line-height:var(--f7-notification-text-line-height);font-weight:var(--f7-notification-text-font-weight)}.notification-title-right-text{color:var(--f7-notification-title-right-color);font-size:var(--f7-notification-title-right-font-size)}.notification-icon{font-size:0;line-height:var(--f7-notification-icon-size)}.notification-icon,.notification-icon i{width:var(--f7-notification-icon-size)!important;height:var(--f7-notification-icon-size)!important}.notification-icon i{font-size:var(--f7-notification-icon-size)}.notification-icon img{height:var(--f7-notification-icon-size)}.notification-header{display:flex;justify-content:flex-start;align-items:center}.notification-close-button{margin-left:auto;cursor:pointer;position:relative}.notification-close-button:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';display:block;width:100%;height:100%;font-size:20px;position:absolute;left:50%;top:50%;text-align:center}.ios .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.ios .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.ios .notification.modal-out{transform:translate3d(0%,-200%,0)}.ios .notification-icon{margin-right:8px}.ios .notification-header+.notification-content{margin-top:10px}.ios .notification-title-right-text{margin-right:6px;margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:10px}.ios .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.3;transition-duration:.3s}.ios .notification-close-button.active-state{transition-duration:0s;opacity:.1}.ios .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.ios .dark .notification-close-button:after,.ios.dark .notification-close-button:after{color:#fff}.md .notification{transform:translate3d(0,-150%,0)}.md .notification.modal-in{transition-duration:.5s;transform:translate3d(0,0%,0);transition-timing-function:cubic-bezier(0,0.8,0.34,1)}.md .notification.modal-in.notification-transitioning{transition-duration:.2s}.md .notification.modal-out{animation:none;transition-duration:.2s;transition-timing-function:ease-in;transform:translate3d(0,-150%,0)}.md .notification-with-icon .notification-icon{position:absolute;left:var(--f7-notification-padding-horizontal);top:var(--f7-notification-padding-vertical)}.md .notification-with-icon .notification-content,.md .notification-with-icon .notification-header{margin-left:calc(var(--f7-notification-icon-size) + 16px)}.md .notification-icon{margin-right:8px}.md .notification-subtitle+.notification-text{margin-top:4px}.md .notification-header+.notification-content{margin-top:8px}.md .notification-title-right-text{margin-left:4px}.md .notification-title-right-text:before{content:'';width:3px;height:3px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px;background:var(--f7-notification-title-right-color)}.md .notification-close-button{width:16px;height:16px;transition-duration:.3s}.md .notification-close-button:after,.md .notification-close-button:before{width:48px;height:48px;left:50%;top:50%;margin-left:-24px;margin-top:-24px}.md .notification-close-button:after{color:var(--f7-md-on-surface-variant);content:'delete_round_md';line-height:48px;font-size:24px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}100%{transform:translate3d(0,0%,0)}}