@xenknight/framework7 0.0.2

package/components/timeline/timeline.less

@@ -0,0 +1,413 @@
+/* === Timeline === */
+@import './timeline-vars.less';
+
+.timeline {
+  box-sizing: border-box;
+  margin: var(--f7-timeline-margin-vertical) 0;
+  padding: 0 var(--f7-timeline-padding-horizontal);
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));
+  padding-right: calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right));
+  .block-strong & {
+    padding: 0;
+    margin: 0;
+  }
+}
+.timeline-item {
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  position: relative;
+  padding: 2px 0px var(--f7-timeline-padding-horizontal);
+  &:last-child {
+    padding-bottom: 2px;
+  }
+}
+.timeline-item-date {
+  flex-shrink: 0;
+  width: 50px;
+  text-align: right;
+  box-sizing: border-box;
+  small {
+    font-size: 10px;
+  }
+}
+.timeline-item-content {
+  margin: 2px;
+  min-width: 0;
+  position: relative;
+  flex-shrink: 10;
+  .card,
+  &.card,
+  .list,
+  &.list,
+  .block,
+  &.block {
+    margin: 0;
+    width: 100%;
+  }
+  .card,
+  .list,
+  .block {
+    + .card,
+    + .list,
+    + .block {
+      margin: var(--f7-timeline-inner-block-margin-vertical) 0 0;
+    }
+  }
+  p,
+  ul,
+  ol,
+  h1,
+  h2,
+  h3,
+  h4 {
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+.timeline-item-inner {
+  background: var(--f7-timeline-item-inner-bg-color);
+  box-sizing: border-box;
+  border-radius: var(--f7-timeline-item-inner-border-radius);
+  padding: 8px var(--f7-timeline-padding-horizontal);
+
+  + .timeline-item-inner {
+    margin-top: var(--f7-timeline-inner-block-margin-vertical);
+  }
+  .block {
+    padding: 0;
+    color: inherit;
+  }
+  .block-strong {
+    .hairline-remove-top-bottom();
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0;
+  }
+  .list {
+    ul {
+      .hairline-remove-top-bottom();
+    }
+  }
+}
+.timeline-item-divider {
+  width: 1px;
+  position: relative;
+  width: 10px;
+  height: 10px;
+  background: var(--f7-timeline-divider-color);
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin: 3px var(--f7-timeline-divider-margin-horizontal) 0;
+  &:after,
+  &:before {
+    content: ' ';
+    width: 1px;
+    height: 100vh;
+    position: absolute;
+    left: 50%;
+    background: inherit;
+    transform: translate3d(-50%, 0, 0);
+  }
+  &:after {
+    top: 100%;
+  }
+  &:before {
+    bottom: 100%;
+  }
+  .timeline-item:last-child &:after {
+    display: none;
+  }
+  .timeline-item:first-child &:before {
+    display: none;
+  }
+}
+.timeline-item-time {
+  font-size: var(--f7-timeline-item-time-font-size);
+  margin-top: var(--f7-timeline-inner-block-margin-vertical);
+  color: var(--f7-timeline-item-time-text-color);
+  &:first-child,
+  &:last-child {
+    margin-top: 0;
+  }
+  .timeline-item-title + & {
+    margin-top: 0;
+  }
+}
+.timeline-item-title {
+  font-size: var(--f7-timeline-item-title-font-size);
+  font-weight: var(--f7-timeline-item-title-font-weight);
+  line-height: var(--f7-timeline-item-title-line-height);
+}
+.timeline-item-subtitle {
+  font-size: var(--f7-timeline-item-subtitle-font-size);
+  font-weight: var(--f7-timeline-item-subtitle-font-weight);
+  line-height: var(--f7-timeline-item-subtitle-line-height);
+}
+.timeline-item-text {
+  color: var(--f7-timeline-item-text-color);
+  font-size: var(--f7-timeline-item-text-font-size);
+  font-weight: var(--f7-timeline-item-text-font-weight);
+  line-height: var(--f7-timeline-item-text-line-height);
+}
+.timelineItemLeft() {
+  flex-direction: row-reverse;
+  .ltr({
+    margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
+    margin-left: 0;
+    .timeline-item-date {
+      text-align: left;
+    }
+  });
+  .rtl({
+    margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
+    margin-right: 0;
+    .timeline-item-date {
+      text-align: right;
+    }
+  });
+}
+.timelineItemRight() {
+  .ltr({
+    margin-left: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
+    margin-right: 0;
+    .timeline-item-date {
+      text-align: right;
+    }
+  });
+  .rtl({
+    margin-right: calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px) / 2 - 50px);
+    margin-left: 0;
+    .timeline-item-date {
+      text-align: left;
+    }
+  });
+}
+.timeline-sides {
+  .timeline-item-right,
+  .timeline-item {
+    .timelineItemRight();
+  }
+  .timeline-item-left,
+  .timeline-item:not(.timeline-item-right):nth-child(2n) {
+    .timelineItemLeft();
+  }
+}
+each(@breakpoints, {
+  @media (min-width:@value) {
+    .@{key}-sides {
+      .timeline-sides;
+    }
+  }
+});
+
+.timeline-horizontal {
+  height: 100%;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  padding-left: var(--f7-safe-area-left);
+  padding-right: 0;
+  .timeline-item {
+    display: block;
+    width: 100/3vw;
+    margin: 0;
+    padding: 0;
+    flex-shrink: 0;
+    position: relative;
+    height: 100%;
+    padding-top: var(--f7-timeline-horizontal-date-height) !important;
+    padding-bottom: var(--f7-timeline-horizontal-item-padding);
+    .hairline(right, var(--f7-timeline-horizontal-item-border-color));
+  }
+  .timeline-item-date {
+    padding: 0px var(--f7-timeline-horizontal-item-padding);
+    width: auto;
+    text-align: left;
+    line-height: var(--f7-timeline-horizontal-date-height);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: var(--f7-timeline-horizontal-date-height);
+    background-color: var(--f7-bars-bg-color);
+    color: var(--f7-bars-text-color);
+    .ios-translucent-bars(var(--f7-bars-bg-color-rgb));
+    .hairline(bottom, var(--f7-timeline-horizontal-item-date-border-color));
+    .ltr({
+      text-align: left;
+    });
+    .rtl({
+      text-align: right;
+    });
+  }
+
+  .timeline-item-content {
+    padding: var(--f7-timeline-horizontal-item-padding);
+    height: calc(100vw - var(--f7-timeline-horizontal-item-padding));
+    .scrollable();
+    margin: 0;
+  }
+  .timeline-item-divider {
+    display: none;
+  }
+  > .timeline-item:last-child,
+  .timeline-month:last-child .timeline-item:last-child {
+    .hairline-remove(right);
+  }
+  @cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20;
+  each(@cols, {
+    @className: floor((@value));
+    &.timeline-cols-@{className} .timeline-item {
+      width: ~"calc(100vw / @{value})";
+    }
+  });
+  @media (min-width: @breakpoints[xsmall]) {
+    each(@cols, {
+      &.xsmall-timeline-cols-@{value} .timeline-item {
+         width: ~"calc(100vw / @{value})";
+      }
+    });
+  }
+  @media (min-width: @breakpoints[small]) {
+    each(@cols, {
+      &.small-timeline-cols-@{value} .timeline-item {
+         width: ~"calc(100vw / @{value})";
+      }
+    });
+  }
+  @media (min-width: @breakpoints[medium]) {
+    each(@cols, {
+      &.medium-timeline-cols-@{value} .timeline-item {
+         width: ~"calc(100vw / @{value})";
+      }
+    });
+  }
+  @media (min-width: @breakpoints[large]) {
+    each(@cols, {
+      &.large-timeline-cols-@{value} .timeline-item {
+         width: ~"calc(100vw / @{value})";
+      }
+    });
+  }
+  @media (min-width: @breakpoints[xlarge]) {
+    each(@cols, {
+      &.xlarge-timeline-cols-@{value} .timeline-item {
+         width: ~"calc(100vw / @{value})";
+      }
+    });
+  }
+}
+.timeline-year {
+  padding-top: var(--f7-timeline-year-height);
+  .hairline(right, var(--f7-timeline-horizontal-item-border-color));
+  &:last-child {
+    .hairline-remove(right);
+  }
+}
+.timeline-month {
+  padding-top: var(--f7-timeline-month-height);
+  .timeline-item {
+    .hairline(top, var(--f7-timeline-horizontal-item-border-color));
+  }
+}
+.timeline-year,
+.timeline-month {
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+  height: 100%;
+}
+.timeline-year-title {
+  line-height: var(--f7-timeline-year-height);
+  height: var(--f7-timeline-year-height);
+  font-size: var(--f7-timeline-year-font-size);
+  font-weight: var(--f7-timeline-year-font-weight);
+}
+.timeline-month-title {
+  line-height: var(--f7-timeline-month-height);
+  height: var(--f7-timeline-month-height);
+  font-size: var(--f7-timeline-month-font-size);
+  font-weight: var(--f7-timeline-month-font-weight);
+}
+.timeline-year-title,
+.timeline-month-title {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 var(--f7-timeline-horizontal-item-padding);
+  background-color: var(--f7-bars-bg-color);
+  color: var(--f7-bars-text-color);
+  .ios-translucent-bars(var(--f7-bars-bg-color-rgb));
+  span {
+    display: inline-block;
+    position: sticky;
+    .ltr({
+      left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
+    });
+    .rtl({
+      right: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-right));
+    });
+  }
+}
+.timeline-month-title {
+  span {
+    margin-top: -2px;
+  }
+}
+.timeline-year:first-child .timeline-year-title,
+.timeline-year:first-child .timeline-month:first-child .timeline-month-title,
+.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
+  left: calc(var(--f7-safe-area-left) * -1);
+  right: 0;
+  width: auto;
+}
+.timeline-horizontal .timeline-item:first-child,
+.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
+.timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
+.timeline-year:first-child
+  .timeline-year-title
+  + .timeline-month
+  .timeline-month-title
+  + .timeline-item {
+  overflow: visible;
+  .timeline-item-date {
+    width: auto;
+    padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
+    left: calc(0px - var(--f7-safe-area-left));
+    right: 0;
+  }
+}
+.timeline-year:last-child .timeline-year-title,
+.timeline-year:last-child .timeline-month:last-child .timeline-month-title {
+  width: auto;
+  right: calc(0px - var(--f7-safe-area-right));
+}
+.timeline-horizontal .timeline-item:last-child,
+.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
+  overflow: visible;
+  .timeline-item-date {
+    width: auto;
+    right: calc(0px - var(--f7-safe-area-right));
+    left: 0;
+  }
+}
+
+.if-ios-theme({
+  @import './timeline-ios.less';
+});
+.if-md-theme({
+  @import './timeline-md.less';
+});

package/components/toast/toast-class.js

@@ -0,0 +1,105 @@
+import { getWindow } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, nextTick } from '../../shared/utils.js';
+import Modal from '../modal/modal-class.js';
+/** @jsx $jsx */
+import $jsx from '../../shared/$jsx.js';
+class Toast extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      on: {}
+    }, app.params.toast, params);
+
+    // Extends with open/close Modal methods;
+    super(app, extendedParams);
+    const toast = this;
+    const window = getWindow();
+    toast.app = app;
+    toast.params = extendedParams;
+    const {
+      closeButton,
+      closeTimeout
+    } = toast.params;
+    let $el;
+    if (!toast.params.el) {
+      // Find Element
+      const toastHtml = toast.render();
+      $el = $(toastHtml);
+    } else {
+      $el = $(toast.params.el);
+    }
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+    if ($el.length === 0) {
+      return toast.destroy();
+    }
+    extend(toast, {
+      $el,
+      el: $el[0],
+      type: 'toast'
+    });
+    $el[0].f7Modal = toast;
+    if (closeButton) {
+      $el.find('.toast-button').on('click', () => {
+        toast.emit('local::closeButtonClick toastCloseButtonClick', toast);
+        toast.close();
+      });
+      toast.on('beforeDestroy', () => {
+        $el.find('.toast-button').off('click');
+      });
+    }
+    let timeoutId;
+    toast.on('open', () => {
+      $('.toast.modal-in').each(openedEl => {
+        const toastInstance = app.toast.get(openedEl);
+        if (openedEl !== toast.el && toastInstance) {
+          toastInstance.close();
+        }
+      });
+      if (closeTimeout) {
+        timeoutId = nextTick(() => {
+          toast.close();
+        }, closeTimeout);
+      }
+    });
+    toast.on('close', () => {
+      window.clearTimeout(timeoutId);
+    });
+    if (toast.params.destroyOnClose) {
+      toast.once('closed', () => {
+        setTimeout(() => {
+          toast.destroy();
+        }, 0);
+      });
+    }
+    return toast;
+  }
+  render() {
+    const toast = this;
+    if (toast.params.render) return toast.params.render.call(toast, toast);
+    const {
+      position,
+      horizontalPosition,
+      cssClass,
+      icon,
+      text,
+      closeButton,
+      closeButtonColor,
+      closeButtonText
+    } = toast.params;
+    const horizontalClass = position === 'top' || position === 'bottom' ? `toast-horizontal-${horizontalPosition}` : '';
+    return $jsx("div", {
+      class: `toast toast-${position} ${horizontalClass} ${cssClass || ''} ${icon ? 'toast-with-icon' : ''}`
+    }, $jsx("div", {
+      class: "toast-content"
+    }, icon && $jsx("div", {
+      class: "toast-icon"
+    }, icon), $jsx("div", {
+      class: "toast-text"
+    }, text), closeButton && !icon && $jsx("a", {
+      class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}`
+    }, closeButtonText)));
+  }
+}
+export default Toast;

package/components/toast/toast-ios.less

@@ -0,0 +1,81 @@
+.ios {
+  .toast {
+    transition-duration: 300ms;
+    width: 100%;
+    left: 0;
+    &.toast-top {
+      top: 0;
+      transform: translate3d(0, -100%, 0);
+      &.modal-in {
+        transform: translate3d(0, 0%, 0);
+      }
+    }
+    &.toast-center {
+      width: auto;
+      left: 50%;
+      border-radius: var(--f7-toast-border-radius);
+      transform: translate3d(-50%, -50%, 0);
+      &.modal-in {
+        transform: translate3d(-50%, -50%, 0);
+      }
+    }
+    &.toast-bottom {
+      bottom: 0;
+      transform: translate3d(0, 100%, 0);
+      &.modal-in {
+        transform: translate3d(0, 0%, 0);
+      }
+    }
+    @media (max-width: 568px) {
+      &.toast-top {
+        margin-top: 0;
+      }
+      &.toast-top .toast-content {
+        padding-top: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top));
+      }
+      &.toast-bottom .toast-content {
+        padding-bottom: calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom));
+      }
+    }
+    @media (min-width: 569px) {
+      left: 50%;
+      margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
+      border-radius: var(--f7-toast-border-radius);
+      &.toast-top {
+        top: 16px;
+      }
+      &.toast-center {
+        margin-left: 0;
+      }
+      &.toast-bottom {
+        margin-bottom: calc(16px + var(--f7-safe-area-bottom));
+      }
+    }
+    @media (min-width: 1024px) {
+      margin-left: 0;
+      width: auto;
+      &.toast-horizontal-left {
+        left: 16px;
+      }
+      &.toast-horizontal-right {
+        left: auto;
+        right: 16px;
+      }
+      &.toast-horizontal-center {
+        left: 50%;
+        width: var(--f7-toast-max-width);
+        margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
+      }
+    }
+  }
+  .toast-button {
+    .ltr({
+      margin-left: 16px;
+      margin-right: calc(-1 * var(--f7-button-padding-horizontal));
+    });
+    .rtl({
+      margin-right: 16px;
+      margin-left: calc(-1 * var(--f7-button-padding-horizontal));
+    });
+  }
+}

package/components/toast/toast-md.less

@@ -0,0 +1,72 @@
+.md {
+  .toast {
+    transition-duration: 200ms;
+    border-radius: var(--f7-toast-border-radius);
+    width: calc(100% - 16px);
+    transform: scale(0.9);
+    left: 8px;
+    &.modal-in {
+      transform: scale(1);
+    }
+    &.modal-out {
+      transform: scale(1);
+    }
+    &.toast-top {
+      top: 8px;
+    }
+    &.toast-center {
+      left: 50%;
+      width: auto;
+      transform: scale(0.9) translate3d(-55%, -55%, 0);
+      &.modal-in {
+        transform: scale(1) translate3d(-50%, -50%, 0);
+      }
+      &.modal-out {
+        transform: scale(1) translate3d(-50%, -50%, 0);
+      }
+    }
+    &.toast-bottom {
+      bottom: calc(8px + var(--f7-safe-area-bottom));
+    }
+    // 568 + 16
+    @media (min-width: 584px) {
+      left: 50%;
+      margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
+      &.toast-center {
+        margin-left: 0;
+      }
+    }
+    @media (min-width: 1024px) {
+      margin-left: 0;
+      width: auto;
+      &.toast-horizontal-left {
+        left: 24px;
+      }
+      &.toast-horizontal-right {
+        left: auto;
+        right: 24px;
+      }
+      &.toast-horizontal-center {
+        left: 50%;
+        width: var(--f7-toast-max-width);
+        margin-left: calc(-1 * var(--f7-toast-max-width) / 2);
+      }
+      &.toast-bottom {
+        bottom: calc(24px + var(--f7-safe-area-bottom));
+      }
+      &.toast-top {
+        top: 24px;
+      }
+    }
+  }
+  .toast-button {
+    .ltr({
+      margin-left: 16px;
+      margin-right: -8px;
+    });
+    .rtl({
+      margin-right: 16px;
+      margin-left: -8px;
+    });
+  }
+}

package/components/toast/toast-rtl.css

@@ -0,0 +1 @@
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-right:16px;margin-left:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-right:16px;margin-left:-8px}

package/components/toast/toast-vars.less

@@ -0,0 +1,24 @@
+:root {
+  --f7-toast-font-size: 14px;
+  --f7-toast-icon-size: 48px;
+  --f7-toast-max-width: 568px;
+}
+.ios-vars({
+  --f7-toast-text-color: #fff;
+  --f7-toast-bg-color: rgba(0,0,0,0.75);
+  --f7-toast-bg-color-rgb: 0, 0, 0;
+  --f7-toast-padding-horizontal: 16px;
+  --f7-toast-padding-vertical: 12px;
+  --f7-toast-border-radius: 8px;
+  --f7-toast-button-min-width: 64px;
+});
+.md-vars({
+  --f7-toast-padding-horizontal: 24px;
+  --f7-toast-padding-vertical: 14px;
+  --f7-toast-border-radius: 16px;
+  --f7-toast-button-min-width: 64px;
+});
+.md-color-vars({
+  --f7-toast-text-color: var(--f7-md-on-surface);
+  --f7-toast-bg-color: var(--f7-md-surface-5);
+});