@xenknight/framework7 0.0.2

package/components/dialog/dialog.js

@@ -0,0 +1,242 @@
+import { extend, iosPreloaderContent, mdPreloaderContent } from '../../shared/utils.js';
+import Dialog from './dialog-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'dialog',
+  params: {
+    dialog: {
+      title: undefined,
+      buttonOk: 'OK',
+      buttonCancel: 'Cancel',
+      usernamePlaceholder: 'Username',
+      passwordPlaceholder: 'Password',
+      preloaderTitle: 'Loading... ',
+      progressTitle: 'Loading... ',
+      backdrop: true,
+      closeByBackdropClick: false,
+      destroyPredefinedDialogs: true,
+      keyboardActions: true,
+      autoFocus: true
+    }
+  },
+  static: {
+    Dialog
+  },
+  create() {
+    const app = this;
+    function defaultDialogTitle() {
+      return app.params.dialog.title || app.name;
+    }
+    const destroyOnClose = app.params.dialog.destroyPredefinedDialogs;
+    const keyboardActions = app.params.dialog.keyboardActions;
+    const autoFocus = app.params.dialog.autoFocus;
+    const autoFocusHandler = autoFocus ? {
+      on: {
+        opened(dialog) {
+          dialog.$el.find('input').eq(0).focus();
+        }
+      }
+    } : {};
+    const isIosTheme = app.theme === 'ios';
+    app.dialog = extend(ModalMethods({
+      app,
+      constructor: Dialog,
+      defaultSelector: '.dialog.modal-in'
+    }), {
+      // Shortcuts
+      alert() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        let [text, title, callbackOk] = args;
+        if (args.length === 2 && typeof args[1] === 'function') {
+          [text, callbackOk, title] = args;
+        }
+        return new Dialog(app, {
+          title: typeof title === 'undefined' ? defaultDialogTitle() : title,
+          text,
+          buttons: [{
+            text: app.params.dialog.buttonOk,
+            strong: isIosTheme,
+            onClick: callbackOk,
+            keyCodes: keyboardActions ? [13, 27] : null
+          }],
+          destroyOnClose
+        }).open();
+      },
+      prompt() {
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
+        }
+        let [text, title, callbackOk, callbackCancel, defaultValue] = args;
+        if (typeof args[1] === 'function') {
+          [text, callbackOk, callbackCancel, defaultValue, title] = args;
+        }
+        defaultValue = typeof defaultValue === 'undefined' || defaultValue === null ? '' : defaultValue;
+        return new Dialog(app, {
+          title: typeof title === 'undefined' ? defaultDialogTitle() : title,
+          text,
+          content: `<div class="dialog-input-field input"><input type="text" class="dialog-input" value="${defaultValue}"></div>`,
+          buttons: [{
+            text: app.params.dialog.buttonCancel,
+            keyCodes: keyboardActions ? [27] : null,
+            color: null
+          }, {
+            text: app.params.dialog.buttonOk,
+            strong: isIosTheme,
+            keyCodes: keyboardActions ? [13] : null
+          }],
+          onClick(dialog, index) {
+            const inputValue = dialog.$el.find('.dialog-input').val();
+            if (index === 0 && callbackCancel) callbackCancel(inputValue);
+            if (index === 1 && callbackOk) callbackOk(inputValue);
+          },
+          destroyOnClose,
+          ...autoFocusHandler
+        }).open();
+      },
+      confirm() {
+        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+          args[_key3] = arguments[_key3];
+        }
+        let [text, title, callbackOk, callbackCancel] = args;
+        if (typeof args[1] === 'function') {
+          [text, callbackOk, callbackCancel, title] = args;
+        }
+        return new Dialog(app, {
+          title: typeof title === 'undefined' ? defaultDialogTitle() : title,
+          text,
+          buttons: [{
+            text: app.params.dialog.buttonCancel,
+            onClick: callbackCancel,
+            keyCodes: keyboardActions ? [27] : null,
+            color: null
+          }, {
+            text: app.params.dialog.buttonOk,
+            strong: isIosTheme,
+            onClick: callbackOk,
+            keyCodes: keyboardActions ? [13] : null
+          }],
+          destroyOnClose
+        }).open();
+      },
+      login() {
+        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+          args[_key4] = arguments[_key4];
+        }
+        let [text, title, callbackOk, callbackCancel] = args;
+        if (typeof args[1] === 'function') {
+          [text, callbackOk, callbackCancel, title] = args;
+        }
+        return new Dialog(app, {
+          title: typeof title === 'undefined' ? defaultDialogTitle() : title,
+          text,
+          // prettier-ignore
+          content: `
+              <div class="dialog-input-field dialog-input-double input">
+                <input type="text" name="dialog-username" placeholder="${app.params.dialog.usernamePlaceholder}" class="dialog-input">
+              </div>
+              <div class="dialog-input-field dialog-input-double input">
+                <input type="password" name="dialog-password" placeholder="${app.params.dialog.passwordPlaceholder}" class="dialog-input">
+              </div>`,
+          buttons: [{
+            text: app.params.dialog.buttonCancel,
+            keyCodes: keyboardActions ? [27] : null,
+            color: null
+          }, {
+            text: app.params.dialog.buttonOk,
+            strong: isIosTheme,
+            keyCodes: keyboardActions ? [13] : null
+          }],
+          onClick(dialog, index) {
+            const username = dialog.$el.find('[name="dialog-username"]').val();
+            const password = dialog.$el.find('[name="dialog-password"]').val();
+            if (index === 0 && callbackCancel) callbackCancel(username, password);
+            if (index === 1 && callbackOk) callbackOk(username, password);
+          },
+          destroyOnClose,
+          ...autoFocusHandler
+        }).open();
+      },
+      password() {
+        for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+          args[_key5] = arguments[_key5];
+        }
+        let [text, title, callbackOk, callbackCancel] = args;
+        if (typeof args[1] === 'function') {
+          [text, callbackOk, callbackCancel, title] = args;
+        }
+        return new Dialog(app, {
+          title: typeof title === 'undefined' ? defaultDialogTitle() : title,
+          text,
+          // prettier-ignore
+          content: `
+              <div class="dialog-input-field input">
+                <input type="password" name="dialog-password" placeholder="${app.params.dialog.passwordPlaceholder}" class="dialog-input">
+              </div>`,
+          buttons: [{
+            text: app.params.dialog.buttonCancel,
+            keyCodes: keyboardActions ? [27] : null,
+            color: null
+          }, {
+            text: app.params.dialog.buttonOk,
+            strong: isIosTheme,
+            keyCodes: keyboardActions ? [13] : null
+          }],
+          onClick(dialog, index) {
+            const password = dialog.$el.find('[name="dialog-password"]').val();
+            if (index === 0 && callbackCancel) callbackCancel(password);
+            if (index === 1 && callbackOk) callbackOk(password);
+          },
+          destroyOnClose,
+          ...autoFocusHandler
+        }).open();
+      },
+      preloader(title, color) {
+        const preloaders = {
+          iosPreloaderContent,
+          mdPreloaderContent
+        };
+        const preloaderInner = preloaders[`${app.theme}PreloaderContent`] || '';
+        return new Dialog(app, {
+          title: typeof title === 'undefined' || title === null ? app.params.dialog.preloaderTitle : title,
+          // prettier-ignore
+          content: `<div class="preloader${color ? ` color-${color}` : ''}">${preloaderInner}</div>`,
+          cssClass: 'dialog-preloader',
+          destroyOnClose
+        }).open();
+      },
+      progress() {
+        for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+          args[_key6] = arguments[_key6];
+        }
+        let [title, progress, color] = args;
+        if (args.length === 2) {
+          if (typeof args[0] === 'number') {
+            [progress, color, title] = args;
+          } else if (typeof args[0] === 'string' && typeof args[1] === 'string') {
+            [title, color, progress] = args;
+          }
+        } else if (args.length === 1) {
+          if (typeof args[0] === 'number') {
+            [progress, title, color] = args;
+          }
+        }
+        const infinite = typeof progress === 'undefined';
+        const dialog = new Dialog(app, {
+          title: typeof title === 'undefined' ? app.params.dialog.progressTitle : title,
+          cssClass: 'dialog-progress',
+          // prettier-ignore
+          content: `
+              <div class="progressbar${infinite ? '-infinite' : ''}${color ? ` color-${color}` : ''}">
+                ${!infinite ? '<span></span>' : ''}
+              </div>
+            `,
+          destroyOnClose
+        });
+        if (!infinite) dialog.setProgress(progress);
+        return dialog.open();
+      }
+    });
+  }
+};

package/components/dialog/dialog.less

@@ -0,0 +1,142 @@
+/* === Dialog === */
+@import './dialog-vars.less';
+
+.dialog-backdrop {
+}
+.dialog {
+  position: absolute;
+  z-index: 13500;
+  left: 50%;
+  margin-top: 0;
+  top: 50%;
+  overflow: hidden;
+  opacity: 0;
+  transform: translate3d(0, -50%, 0) scale(1.185);
+  transition-property: transform, opacity;
+  display: none;
+  transition-duration: 400ms;
+  width: var(--f7-dialog-width);
+  margin-left: calc(-1 * var(--f7-dialog-width) / 2);
+  border-radius: var(--f7-dialog-border-radius);
+  text-align: var(--f7-dialog-text-align);
+  color: var(--f7-dialog-text-color);
+  font-size: var(--f7-dialog-font-size);
+  background: var(--f7-dialog-bg-color);
+  will-change: transform, opacity;
+  .ios-translucent-modals(var(--f7-dialog-bg-color-rgb));
+  &.modal-in {
+    opacity: 1;
+    transform: translate3d(0, -50%, 0) scale(1);
+  }
+  &.modal-out {
+    opacity: 0;
+    z-index: 13500 - 1;
+  }
+  &.not-animated {
+    transition-duration: 0ms;
+  }
+}
+.dialog-inner {
+  position: relative;
+  padding: var(--f7-dialog-inner-padding);
+}
+.dialog-title {
+  color: var(--f7-dialog-title-text-color);
+  font-size: var(--f7-dialog-title-font-size);
+  font-weight: var(--f7-dialog-title-font-weight);
+  line-height: var(--f7-dialog-title-line-height);
+}
+// Buttons
+.dialog-buttons {
+  position: relative;
+  display: flex;
+  .rtl({
+    flex-direction: row-reverse;
+  });
+  .dialog-buttons-vertical & {
+    display: block;
+    height: auto !important;
+  }
+}
+.dialog-button {
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--f7-dialog-button-text-color);
+  font-size: var(--f7-dialog-button-font-size);
+  height: var(--f7-dialog-button-height);
+  line-height: var(--f7-dialog-button-height);
+  letter-spacing: var(--f7-dialog-button-letter-spacing);
+  text-align: var(--f7-dialog-button-text-align);
+  font-weight: var(--f7-dialog-button-font-weight);
+  text-transform: var(--f7-dialog-button-text-transform);
+  display: block;
+  cursor: pointer;
+  &.active-state {
+    background-color: var(--f7-dialog-button-pressed-bg-color);
+  }
+}
+.dialog-button-strong {
+  background-color: var(--f7-dialog-button-strong-bg-color);
+  color: var(--f7-dialog-button-strong-text-color);
+  font-weight: var(--f7-dialog-button-strong-font-weight);
+  &.active-state {
+    background-color: var(--f7-dialog-button-strong-pressed-bg-color);
+  }
+}
+.dialog-no-buttons {
+  .dialog-buttons {
+    display: none;
+  }
+}
+// Inputs
+.dialog-input-field {
+  position: relative;
+}
+input.dialog-input[type] {
+  box-sizing: border-box;
+  margin: 0;
+  margin-top: 15px;
+  border-radius: var(--f7-dialog-input-border-radius);
+  appearance: none;
+  width: 100%;
+  display: block;
+  font-family: inherit;
+  box-shadow: none;
+  font-size: var(--f7-dialog-input-font-size);
+  height: var(--f7-dialog-input-height);
+  background-color: var(--f7-dialog-input-bg-color);
+  border: var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color);
+  &::placeholder {
+    color: var(--f7-dialog-input-placeholder-color);
+  }
+}
+.dialog-input-double {
+  input.dialog-input {
+    border-radius: var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0;
+  }
+  + .dialog-input-double input.dialog-input {
+    border-radius: 0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius);
+  }
+}
+// Preloader
+.dialog-preloader {
+  .preloader {
+    --f7-preloader-size: var(--f7-dialog-preloader-size);
+  }
+}
+
+html.with-modal-dialog {
+  .page-content {
+    .not-scrollable();
+  }
+}
+
+.if-ios-theme({
+  @import './dialog-ios.less';
+});
+.if-md-theme({
+  @import './dialog-md.less';
+});

package/components/fab/fab-ios.less

@@ -0,0 +1,9 @@
+.ios {
+  .fab > a,
+  .fab-buttons a {
+    &.active-state {
+      transition-duration: 0ms;
+      background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
+    }
+  }
+}

package/components/fab/fab-md.less

@@ -0,0 +1,11 @@
+.md {
+  .fab > a,
+  .fab-buttons a {
+    &.active-state {
+      background-color: var(
+        --f7-fab-pressed-bg-color,
+        var(--f7-fab-bg-color, var(--f7-theme-color))
+      );
+    }
+  }
+}

package/components/fab/fab-rtl.css

@@ -0,0 +1 @@
+:root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-padding:4px 12px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-text-color:#fff;--f7-fab-border-radius:50px;--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.4);--f7-fab-extended-text-transform:uppercase;--f7-fab-extended-size:50px;--f7-fab-extended-text-padding:0 20px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-border-radius:4px;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);--f7-fab-label-text-color:#333;--f7-fab-label-bg-color:#fff}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--f7-fab-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);--f7-fab-extended-size:56px;--f7-fab-extended-text-padding:0 16px;--f7-fab-extended-text-font-weight:500;--f7-fab-extended-text-letter-spacing:0;--f7-fab-extended-text-transform:none;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25)}.md,.md .dark,.md [class*=color-]{--f7-fab-bg-color:var(--f7-md-primary-container);--f7-fab-text-color:var(--f7-md-on-primary-container);--f7-fab-label-text-color:var(--f7-md-on-surface);--f7-fab-label-bg-color:var(--f7-md-surface-5)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{background-color:var(--f7-fab-bg-color,var(--f7-theme-color));width:var(--f7-fab-size);height:var(--f7-fab-size);box-shadow:var(--f7-fab-box-shadow);border-radius:var(--f7-fab-border-radius);position:relative;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;color:var(--f7-fab-text-color)}.fab>a i{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5);opacity:0}.fab-buttons a{border-radius:var(--f7-fab-border-radius);width:var(--f7-fab-button-size);height:var(--f7-fab-button-size)}.fab-buttons{display:flex;visibility:hidden;pointer-events:none;position:absolute}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5);opacity:0}.fab-opened:not(.fab-morph)>a i+i{transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);opacity:1}.fab-opened .fab-buttons{visibility:visible;pointer-events:auto}.fab-opened .fab-buttons a{opacity:1;transform:translate3d(0,0px,0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:0.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:150ms}.fab-opened .fab-buttons a:nth-child(5){transition-delay:0.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:250ms}.fab-buttons-bottom,.fab-buttons-top{left:50%;width:var(--f7-fab-button-size);margin-left:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-top{bottom:100%;margin-bottom:16px;flex-direction:column-reverse}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{top:100%;margin-top:16px;flex-direction:column}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{top:50%;height:var(--f7-fab-button-size);margin-top:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-left{right:100%;margin-right:16px}.fab-buttons-left a{transform:translate3d(8px,0px,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px;flex-direction:row-reverse}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{left:0%;top:0%;width:100%;height:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);bottom:100%;margin-bottom:16px;transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-left:16px;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);top:100%;margin-top:16px;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){right:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-right:16px;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{border-radius:var(--f7-fab-border-radius);background:var(--f7-fab-bg-color,var(--f7-theme-color));box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{box-shadow:none;background:0 0!important}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:250ms}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{width:auto;min-width:var(--f7-fab-extended-size)}.fab-extended>a{width:100%;height:var(--f7-fab-extended-size)}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/ 2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);padding:var(--f7-fab-extended-text-padding);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{position:absolute;top:50%;padding:var(--f7-fab-label-padding);border-radius:var(--f7-fab-label-border-radius);background:var(--f7-fab-label-bg-color);color:var(--f7-fab-label-text-color);box-shadow:var(--f7-fab-label-box-shadow);white-space:nowrap;transform:translateY(-50%);pointer-events:none;font-size:var(--f7-fab-label-font-size)}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{right:100%;margin-right:8px}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{transition-duration:0s;background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}

package/components/fab/fab-vars.less

@@ -0,0 +1,46 @@
+:root {
+  --f7-fab-margin: 16px;
+  --f7-fab-extended-text-font-size: 14px;
+  --f7-fab-label-padding: 4px 12px;
+  --f7-fab-label-font-size: inherit;
+  --f7-fab-button-size: 40px;
+}
+.ios-vars({
+  /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
+  /* --f7-fab-bg-color: var(--f7-theme-color)); */
+  --f7-fab-text-color: #fff;
+  --f7-fab-border-radius: 50px;
+  --f7-fab-size: 50px;
+  --f7-fab-box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
+  --f7-fab-extended-text-transform: uppercase;
+  --f7-fab-extended-size: 50px;
+  --f7-fab-extended-text-padding: 0 20px;
+  --f7-fab-extended-text-font-weight: 600;
+  --f7-fab-extended-text-letter-spacing: 0;
+  --f7-fab-label-border-radius: 4px;
+  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
+  --f7-fab-label-text-color: #333;
+  --f7-fab-label-bg-color: #fff;
+});
+.md-vars({
+  /*
+  --f7-fab-pressed-bg-color: var(--f7-fab-bg-color, var(--f7-theme-color));
+  */
+
+  --f7-fab-border-radius: 16px;
+  --f7-fab-size: 56px;
+  --f7-fab-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  --f7-fab-extended-size: 56px;
+  --f7-fab-extended-text-padding: 0 16px;
+  --f7-fab-extended-text-font-weight: 500;
+  --f7-fab-extended-text-letter-spacing: 0;
+  --f7-fab-extended-text-transform: none;
+  --f7-fab-label-border-radius: 8px;
+  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+});
+.md-color-vars({
+  --f7-fab-bg-color: var(--f7-md-primary-container);
+  --f7-fab-text-color: var(--f7-md-on-primary-container);
+  --f7-fab-label-text-color: var(--f7-md-on-surface);
+  --f7-fab-label-bg-color: var(--f7-md-surface-5);
+});

package/components/fab/fab.css

@@ -0,0 +1 @@
+:root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-padding:4px 12px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-text-color:#fff;--f7-fab-border-radius:50px;--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.4);--f7-fab-extended-text-transform:uppercase;--f7-fab-extended-size:50px;--f7-fab-extended-text-padding:0 20px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-border-radius:4px;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);--f7-fab-label-text-color:#333;--f7-fab-label-bg-color:#fff}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--f7-fab-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);--f7-fab-extended-size:56px;--f7-fab-extended-text-padding:0 16px;--f7-fab-extended-text-font-weight:500;--f7-fab-extended-text-letter-spacing:0;--f7-fab-extended-text-transform:none;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25)}.md,.md .dark,.md [class*=color-]{--f7-fab-bg-color:var(--f7-md-primary-container);--f7-fab-text-color:var(--f7-md-on-primary-container);--f7-fab-label-text-color:var(--f7-md-on-surface);--f7-fab-label-bg-color:var(--f7-md-surface-5)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{background-color:var(--f7-fab-bg-color,var(--f7-theme-color));width:var(--f7-fab-size);height:var(--f7-fab-size);box-shadow:var(--f7-fab-box-shadow);border-radius:var(--f7-fab-border-radius);position:relative;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;color:var(--f7-fab-text-color)}.fab>a i{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5);opacity:0}.fab-buttons a{border-radius:var(--f7-fab-border-radius);width:var(--f7-fab-button-size);height:var(--f7-fab-button-size)}.fab-buttons{display:flex;visibility:hidden;pointer-events:none;position:absolute}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5);opacity:0}.fab-opened:not(.fab-morph)>a i+i{transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);opacity:1}.fab-opened .fab-buttons{visibility:visible;pointer-events:auto}.fab-opened .fab-buttons a{opacity:1;transform:translate3d(0,0px,0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:0.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:150ms}.fab-opened .fab-buttons a:nth-child(5){transition-delay:0.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:250ms}.fab-buttons-bottom,.fab-buttons-top{left:50%;width:var(--f7-fab-button-size);margin-left:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-top{bottom:100%;margin-bottom:16px;flex-direction:column-reverse}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{top:100%;margin-top:16px;flex-direction:column}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{top:50%;height:var(--f7-fab-button-size);margin-top:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-left{right:100%;margin-right:16px;flex-direction:row-reverse}.fab-buttons-left a{transform:translate3d(8px,0px,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{left:0%;top:0%;width:100%;height:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);bottom:100%;margin-bottom:16px;transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-left:16px;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);top:100%;margin-top:16px;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){right:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-right:16px;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{border-radius:var(--f7-fab-border-radius);background:var(--f7-fab-bg-color,var(--f7-theme-color));box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{box-shadow:none;background:0 0!important}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:250ms}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{width:auto;min-width:var(--f7-fab-extended-size)}.fab-extended>a{width:100%;height:var(--f7-fab-extended-size)}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/ 2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);padding:var(--f7-fab-extended-text-padding);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{position:absolute;top:50%;padding:var(--f7-fab-label-padding);border-radius:var(--f7-fab-label-border-radius);background:var(--f7-fab-label-bg-color);color:var(--f7-fab-label-text-color);box-shadow:var(--f7-fab-label-box-shadow);white-space:nowrap;transform:translateY(-50%);pointer-events:none;font-size:var(--f7-fab-label-font-size)}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{right:100%;margin-right:8px}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{transition-duration:0s;background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}

package/components/fab/fab.d.ts

@@ -0,0 +1,32 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Fab {
+  interface DomEvents {
+    /** Event will be triggered on FAB open or when it morphs to target element */
+    'fab:open': () => void;
+    /** Event will be triggered on FAB close or when it morphs back from target element */
+    'fab:close': () => void;
+  }
+  interface AppMethods {
+    fab: {
+      /** currently opened FAB HTML Element */
+      openedEl: HTMLElement;
+      /** Open FAB speed dial actions/buttons, or morph it to specified target */
+      open(fabEl?: HTMLElement | CSSSelector, morphTargetEl?: HTMLElement | CSSSelector): void;
+      /** Close FAB speed dial actions/buttons, or morph it back from specified target */
+      close(fabEl?: HTMLElement | CSSSelector): void;
+      /** Toggle FAB speed dial actions/buttons */
+      toggle(fabEl?: HTMLElement | CSSSelector): void;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const FabComponent: Framework7Plugin;
+
+export default FabComponent;