framework7 7.0.8 → 8.0.0-beta.1

package/components/dialog/dialog.css

@@ -1 +1 @@
-:root{--f7-dialog-button-text-color:var(--f7-theme-color);--f7-dialog-button-text-align:center;--f7-dialog-input-bg-color:#fff}:root .dark,:root.dark{--f7-dialog-text-color:#fff}.ios{--f7-dialog-box-shadow:none;--f7-dialog-width:270px;--f7-dialog-inner-padding:16px;--f7-dialog-border-radius:13px;--f7-dialog-text-align:center;--f7-dialog-font-size:14px;--f7-dialog-title-text-color:inherit;--f7-dialog-title-font-size:18px;--f7-dialog-title-font-weight:600;--f7-dialog-title-line-height:inherit;--f7-dialog-button-font-size:17px;--f7-dialog-button-height:44px;--f7-dialog-button-letter-spacing:0;--f7-dialog-button-font-weight:400;--f7-dialog-button-text-transform:none;--f7-dialog-input-border-radius:4px;--f7-dialog-input-font-size:14px;--f7-dialog-input-height:32px;--f7-dialog-input-border-width:1px;--f7-dialog-input-placeholder-color:#a9a9a9;--f7-dialog-preloader-size:34px;--f7-dialog-bg-color:rgba(255, 255, 255, 0.95);--f7-dialog-bg-color-rgb:255,255,255;--f7-dialog-text-color:#000;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-input-border-color:rgba(0, 0, 0, 0.3);--f7-dialog-border-divider-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-dialog-bg-color:rgba(45, 45, 45, 0.95);--f7-dialog-bg-color-rgb:45,45,45;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-border-divider-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-border-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-bg-color:rgba(0, 0, 0, 0.5)}.md{--f7-dialog-box-shadow:var(--f7-elevation-24);--f7-dialog-width:280px;--f7-dialog-inner-padding:24px;--f7-dialog-border-radius:4px;--f7-dialog-text-align:left;--f7-dialog-font-size:16px;--f7-dialog-title-font-size:20px;--f7-dialog-title-font-weight:500;--f7-dialog-title-line-height:1.3;--f7-dialog-button-font-size:14px;--f7-dialog-button-height:36px;--f7-dialog-button-letter-spacing:0.05em;--f7-dialog-button-font-weight:500;--f7-dialog-button-text-transform:uppercase;--f7-dialog-button-pressed-bg-color:rgba(var(--f7-theme-color-rgb), 0.15);--f7-dialog-input-border-radius:0px;--f7-dialog-input-font-size:16px;--f7-dialog-input-height:36px;--f7-dialog-input-border-color:transparent;--f7-dialog-input-border-width:0px;--f7-dialog-preloader-size:32px;--f7-dialog-bg-color:#fff;--f7-dialog-text-color:rgba(0, 0, 0, 0.54);--f7-dialog-title-text-color:#212121;--f7-dialog-input-placeholder-color:rgba(0, 0, 0, 0.35)}.md .dark,.md.dark{--f7-dialog-bg-color:#1c1c1d;--f7-dialog-title-text-color:#fff;--f7-dialog-input-bg-color:transparent;--f7-dialog-input-placeholder-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-dialog-box-shadow:0 0 20px 0 rgba(0, 0, 0, 0.15),0 25px 30px 0 rgba(0,0,0,0.35);--f7-dialog-width:300px;--f7-dialog-inner-padding:20px;--f7-dialog-border-radius:8px;--f7-dialog-text-align:left;--f7-dialog-font-size:14px;--f7-dialog-title-font-size:18px;--f7-dialog-title-font-weight:700;--f7-dialog-title-line-height:inherit;--f7-dialog-button-font-size:14px;--f7-dialog-button-height:36px;--f7-dialog-button-letter-spacing:0;--f7-dialog-button-font-weight:600;--f7-dialog-button-text-transform:uppercase;--f7-dialog-input-border-radius:8px;--f7-dialog-input-font-size:16px;--f7-dialog-input-height:32px;--f7-dialog-input-border-width:1px;--f7-dialog-preloader-size:24px;--f7-dialog-bg-color:#fff;--f7-dialog-title-text-color:inherit;--f7-dialog-text-color:#000;--f7-dialog-button-text-color:#fff;--f7-dialog-input-border-color:rgba(0, 0, 0, 0.2);--f7-dialog-input-placeholder-color:rgba(0, 0, 0, 0.32)}.aurora .dark,.aurora.dark{--f7-dialog-bg-color:#1c1c1d;--f7-dialog-title-text-color:#fff;--f7-dialog-input-bg-color:rgba(0, 0, 0, 0.25);--f7-dialog-input-placeholder-color:rgba(255, 255, 255, 0.54);--f7-dialog-input-border-color:rgba(255, 255, 255, 0.15)}.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:.4s;box-shadow:var(--f7-dialog-box-shadow);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}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .dialog{background-color:rgba(var(--f7-dialog-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.dialog.modal-in{opacity:1;transform:translate3d(0,-50%,0) scale(1)}.dialog.modal-out{opacity:0;z-index:13499}.dialog.not-animated{transition-duration:0s}.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)}.dialog-buttons{position:relative;display:flex}.dialog-buttons-vertical .dialog-buttons{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}.dialog-button.active-state{background-color:var(--f7-dialog-button-pressed-bg-color)}.dialog-no-buttons .dialog-buttons{display:none}.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);-webkit-appearance:none;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)}input.dialog-input[type]::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+.dialog-input-double input.dialog-input{border-radius:0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius)}.dialog-preloader .preloader{--f7-preloader-size:var(--f7-dialog-preloader-size)}html.with-modal-dialog .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.ios .dialog.modal-out{transform:translate3d(0,-50%,0) scale(1)}.ios .dialog-inner{border-radius:var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0}.ios .dialog-inner:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-title+.dialog-text{margin-top:5px}.ios .dialog-buttons{height:44px;justify-content:center}.ios .dialog-button{width:100%;padding:0 5px;-webkit-box-flex:1;-ms-flex:1}.ios .dialog-button:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-button:first-child{border-radius:0 0 0 var(--f7-dialog-border-radius)}.ios .dialog-button:last-child{border-radius:0 0 var(--f7-dialog-border-radius) 0}.ios .dialog-button:last-child:after{display:none!important}.ios .dialog-button:first-child:last-child{border-radius:0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius)}.ios .dialog-button.dialog-button-bold{font-weight:500}.ios .dialog-button[class*=color-]{--f7-dialog-button-text-color:var(--f7-theme-color)}.ios .dialog-buttons-vertical .dialog-buttons{height:auto}.ios .dialog-buttons-vertical .dialog-button{border-radius:0}.ios .dialog-buttons-vertical .dialog-button:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-buttons-vertical .dialog-button:last-child{border-radius:0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius)}.ios .dialog-buttons-vertical .dialog-button:last-child:after{display:none!important}.ios .dialog-no-buttons .dialog-inner{border-radius:var(--f7-dialog-border-radius)}.ios .dialog-no-buttons .dialog-inner:after{display:none!important}.ios .dialog-input-field{margin-top:15px}.ios .dialog-input{padding:0 5px}.ios .dialog-input+.dialog-input{margin-top:5px}.ios .dialog-input-double+.dialog-input-double{margin-top:0}.ios .dialog-input-double+.dialog-input-double .dialog-input{border-top:0;margin-top:0}.ios .dialog-preloader .dialog-text~.preloader,.ios .dialog-preloader .dialog-title~.preloader{margin-top:15px}.ios .dialog-progress .dialog-text~.progressbar,.ios .dialog-progress .dialog-text~.progressbar-infinite,.ios .dialog-progress .dialog-title~.progressbar,.ios .dialog-progress .dialog-title~.progressbar-infinite{margin-top:15px}.md .dialog.modal-out{transform:translate3d(0,-50%,0) scale(.815)}.md .dialog-title+.dialog-text{margin-top:20px}.md .dialog-text{line-height:1.5}.md .dialog-buttons{height:48px;padding:6px 8px;overflow:hidden;box-sizing:border-box;justify-content:flex-end}.md .dialog-button{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);border-radius:4px;min-width:64px;padding:0 8px;border:none;transition-duration:.3s;transform:translate3d(0,0,0)}.md .dialog-button.dialog-button-bold{font-weight:700}.md .dialog-button+.dialog-button{margin-left:4px}.md .dialog-button[class*=color-]{--f7-dialog-button-text-color:var(--f7-theme-color)}.md .dialog-buttons-vertical .dialog-buttons{display:flex;flex-direction:column;align-items:flex-end}.md .dialog-buttons-vertical .dialog-button+.dialog-button{margin-top:12px}.md .dialog-input{padding:0;transition-duration:.2s;position:relative}.md .dialog-input+.dialog-input{margin-top:16px}.md .dialog-preloader .dialog-inner,.md .dialog-preloader .dialog-title,.md .dialog-progress .dialog-inner,.md .dialog-progress .dialog-title{text-align:center}.md .dialog-preloader .dialog-text~.preloader,.md .dialog-preloader .dialog-title~.preloader{margin-top:20px}.md .dialog-progress .dialog-text~.progressbar,.md .dialog-progress .dialog-text~.progressbar-infinite,.md .dialog-progress .dialog-title~.progressbar,.md .dialog-progress .dialog-title~.progressbar-infinite{margin-top:16px}.aurora .dialog.modal-out{transform:translate3d(0,-50%,0) scale(.815)}.aurora .dialog-title+.dialog-text{margin-top:16px}.aurora .dialog-text{line-height:1.5}.aurora .dialog-buttons{padding:var(--f7-dialog-inner-padding);padding-top:0;overflow:hidden;box-sizing:border-box;justify-content:flex-end}.aurora .dialog-button{border-radius:8px;min-width:64px;padding:0 10px;border:none;transition-duration:.3s;transform:translate3d(0,0,0);background:var(--f7-theme-color)}.aurora .dialog-button.dialog-button-bold{font-weight:600}.aurora .dialog-button+.dialog-button{margin-left:16px}.aurora .dialog-button.active-state{background-color:var(--f7-dialog-button-pressed-bg-color,var(--f7-theme-color-shade))}.aurora.device-desktop .dialog-button:not(.active-state):not(.no-hover):hover{background-color:var(--f7-dialog-button-hover-bg-color,var(--f7-theme-color-tint))}.aurora .dialog-buttons-vertical .dialog-buttons{display:flex;flex-direction:column;align-items:stretch}.aurora .dialog-buttons-vertical .dialog-button{margin-left:0;flex-shrink:0}.aurora .dialog-buttons-vertical .dialog-button+.dialog-button{margin-top:8px}.aurora div.dialog-input-field{margin-top:16px}.aurora div.dialog-input-field input.dialog-input{margin-top:0}.aurora div.dialog-input-field.input:after{display:none!important}.aurora .dialog-input{padding:0 8px;transition-duration:.2s;position:relative}.aurora .dialog-input+.dialog-input{margin-top:8px}.aurora .dialog-input-double+.dialog-input-double{margin-top:0}.aurora .dialog-input-double+.dialog-input-double .dialog-input{border-top:0;margin-top:0}.aurora .dialog-preloader .dialog-inner,.aurora .dialog-preloader .dialog-title,.aurora .dialog-progress .dialog-inner,.aurora .dialog-progress .dialog-title{text-align:center}.aurora .dialog-preloader .dialog-text~.preloader,.aurora .dialog-preloader .dialog-title~.preloader{margin-top:16px}.aurora .dialog-progress .dialog-text~.progressbar,.aurora .dialog-progress .dialog-text~.progressbar-infinite,.aurora .dialog-progress .dialog-title~.progressbar,.aurora .dialog-progress .dialog-title~.progressbar-infinite{margin-top:16px}
+:root{--f7-dialog-button-text-color:var(--f7-theme-color);--f7-dialog-button-text-align:center}.ios{--f7-dialog-width:270px;--f7-dialog-inner-padding:16px;--f7-dialog-border-radius:13px;--f7-dialog-text-align:center;--f7-dialog-font-size:14px;--f7-dialog-title-text-color:inherit;--f7-dialog-title-font-size:18px;--f7-dialog-title-font-weight:600;--f7-dialog-title-line-height:inherit;--f7-dialog-button-font-size:17px;--f7-dialog-button-height:44px;--f7-dialog-button-letter-spacing:0;--f7-dialog-button-font-weight:400;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-bg-color:transparent;--f7-dialog-button-strong-text-color:var(--f7-theme-color);--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:4px;--f7-dialog-input-font-size:14px;--f7-dialog-input-height:32px;--f7-dialog-input-border-width:1px;--f7-dialog-input-placeholder-color:#a9a9a9;--f7-dialog-preloader-size:34px;--f7-dialog-input-bg-color:#fff;--f7-dialog-bg-color:rgba(255, 255, 255, 0.95);--f7-dialog-bg-color-rgb:255,255,255;--f7-dialog-text-color:#000;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-input-border-color:rgba(0, 0, 0, 0.3);--f7-dialog-border-divider-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-dialog-text-color:#fff;--f7-dialog-bg-color:rgba(45, 45, 45, 0.95);--f7-dialog-bg-color-rgb:45,45,45;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-border-divider-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-border-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-bg-color:rgba(0, 0, 0, 0.5)}.md{--f7-dialog-width:280px;--f7-dialog-inner-padding:24px;--f7-dialog-border-radius:28px;--f7-dialog-text-align:left;--f7-dialog-font-size:14px;--f7-dialog-title-font-size:24px;--f7-dialog-title-font-weight:400;--f7-dialog-title-line-height:1.3;--f7-dialog-button-font-size:14px;--f7-dialog-button-height:40px;--f7-dialog-button-letter-spacing:normal;--f7-dialog-button-font-weight:500;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:0px;--f7-dialog-input-font-size:16px;--f7-dialog-input-height:36px;--f7-dialog-input-border-color:transparent;--f7-dialog-input-border-width:0px;--f7-dialog-preloader-size:32px;--f7-dialog-input-bg-color:transparent;--f7-dialog-input-placeholder-color:rgba(0, 0, 0, 0.35)}.md .dark,.md.dark{--f7-dialog-input-placeholder-color:rgba(255, 255, 255, 0.54)}.md,.md .dark,.md [class*=color-]{--f7-dialog-button-pressed-bg-color:rgba(var(--f7-theme-color-rgb), 0.15);--f7-dialog-button-strong-bg-color:var(--f7-theme-color);--f7-dialog-button-strong-text-color:var(--f7-md-on-primary);--f7-dialog-button-strong-pressed-bg-color:var(--f7-theme-color-shade);--f7-dialog-bg-color:var(--f7-md-surface-3);--f7-dialog-text-color:var(--f7-md-on-surface-variant);--f7-dialog-title-text-color:var(--f7-md-on-surface)}.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:.4s;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}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .dialog{background-color:rgba(var(--f7-dialog-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.dialog.modal-in{opacity:1;transform:translate3d(0,-50%,0) scale(1)}.dialog.modal-out{opacity:0;z-index:13499}.dialog.not-animated{transition-duration:0s}.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)}.dialog-buttons{position:relative;display:flex}.dialog-buttons-vertical .dialog-buttons{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}.dialog-button.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)}.dialog-button-strong.active-state{background-color:var(--f7-dialog-button-strong-pressed-bg-color)}.dialog-no-buttons .dialog-buttons{display:none}.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);-webkit-appearance:none;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)}input.dialog-input[type]::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+.dialog-input-double input.dialog-input{border-radius:0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius)}.dialog-preloader .preloader{--f7-preloader-size:var(--f7-dialog-preloader-size)}html.with-modal-dialog .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.ios .dialog.modal-out{transform:translate3d(0,-50%,0) scale(1)}.ios .dialog-inner{border-radius:var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0}.ios .dialog-inner:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-title+.dialog-text{margin-top:5px}.ios .dialog-buttons{height:44px;justify-content:center}.ios .dialog-button{width:100%;padding:0 5px;-webkit-box-flex:1;-ms-flex:1}.ios .dialog-button:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-button:first-child{border-radius:0 0 0 var(--f7-dialog-border-radius)}.ios .dialog-button:last-child{border-radius:0 0 var(--f7-dialog-border-radius) 0}.ios .dialog-button:last-child:after{display:none!important}.ios .dialog-button:first-child:last-child{border-radius:0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius)}.ios .dialog-button[class*=color-]{--f7-dialog-button-text-color:var(--f7-theme-color)}.ios .dialog-buttons-vertical .dialog-buttons{height:auto}.ios .dialog-buttons-vertical .dialog-button{border-radius:0}.ios .dialog-buttons-vertical .dialog-button:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-buttons-vertical .dialog-button:last-child{border-radius:0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius)}.ios .dialog-buttons-vertical .dialog-button:last-child:after{display:none!important}.ios .dialog-no-buttons .dialog-inner{border-radius:var(--f7-dialog-border-radius)}.ios .dialog-no-buttons .dialog-inner:after{display:none!important}.ios .dialog-input-field{margin-top:15px}.ios .dialog-input{padding:0 5px}.ios .dialog-input+.dialog-input{margin-top:5px}.ios .dialog-input-double+.dialog-input-double{margin-top:0}.ios .dialog-input-double+.dialog-input-double .dialog-input{border-top:0;margin-top:0}.ios .dialog-preloader .dialog-text~.preloader,.ios .dialog-preloader .dialog-title~.preloader{margin-top:15px}.ios .dialog-progress .dialog-text~.progressbar,.ios .dialog-progress .dialog-text~.progressbar-infinite,.ios .dialog-progress .dialog-title~.progressbar,.ios .dialog-progress .dialog-title~.progressbar-infinite{margin-top:15px}.md .dialog.modal-out{transform:translate3d(0,-50%,0) scale(.815)}.md .dialog-title+.dialog-text{margin-top:20px}.md .dialog-text{line-height:1.5}.md .dialog-buttons{height:64px;padding:0px 24px 24px;overflow:hidden;box-sizing:border-box;justify-content:flex-end}.md .dialog-button{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);border-radius:99px;min-width:64px;padding:0px 16px;border:none;transition-duration:.3s;transform:translate3d(0,0,0)}.md .dialog-button+.dialog-button{margin-left:8px}.md .dialog-button-strong{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.md .dialog-button[class*=color-]{--f7-dialog-button-text-color:var(--f7-theme-color)}.md .dialog-buttons-vertical .dialog-buttons{display:flex;flex-direction:column;align-items:flex-end}.md .dialog-buttons-vertical .dialog-button+.dialog-button{margin-top:8px}.md .dialog-input{padding:0;transition-duration:.2s;position:relative}.md .dialog-input+.dialog-input{margin-top:16px}.md .dialog-preloader .dialog-inner,.md .dialog-preloader .dialog-title,.md .dialog-progress .dialog-inner,.md .dialog-progress .dialog-title{text-align:center}.md .dialog-preloader .dialog-text~.preloader,.md .dialog-preloader .dialog-title~.preloader{margin-top:20px}.md .dialog-progress .dialog-text~.progressbar,.md .dialog-progress .dialog-text~.progressbar-infinite,.md .dialog-progress .dialog-title~.progressbar,.md .dialog-progress .dialog-title~.progressbar-infinite{margin-top:16px}

package/components/dialog/dialog.d.ts

@@ -44,8 +44,8 @@ export namespace Dialog {
   interface DialogButton {
     /** String with Button's text (could be HTML string). */
     text: string;
-    /** Enables bold button text. (default false) */
-    bold?: boolean;
+    /** Enables strong button style. (default false) */
+    strong?: boolean;
     /** Button color, one of default colors. */
     color?: string;
     /** If enabled then button click will close Dialog. (default true) */

package/components/dialog/dialog.js

@@ -1,4 +1,4 @@
-import { extend, iosPreloaderContent, mdPreloaderContent, auroraPreloaderContent } from '../../shared/utils.js';
+import { extend, iosPreloaderContent, mdPreloaderContent } from '../../shared/utils.js';
 import Dialog from './dialog-class.js';
 import ModalMethods from '../../shared/modal-methods.js';
 export default {
@@ -22,14 +22,11 @@ export default {
   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;
@@ -38,9 +35,9 @@ export default {
         opened(dialog) {
           dialog.$el.find('input').eq(0).focus();
         }
-
       }
     } : {};
+    const isIosTheme = app.theme === 'ios';
     app.dialog = extend(ModalMethods({
       app,
       constructor: Dialog,
@@ -51,37 +48,30 @@ export default {
         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,
-            bold: true,
+            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,
@@ -90,35 +80,29 @@ export default {
           buttons: [{
             text: app.params.dialog.buttonCancel,
             keyCodes: keyboardActions ? [27] : null,
-            color: app.theme === 'aurora' ? 'gray' : null
+            color: null
           }, {
             text: app.params.dialog.buttonOk,
-            bold: true,
+            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,
@@ -126,28 +110,24 @@ export default {
             text: app.params.dialog.buttonCancel,
             onClick: callbackCancel,
             keyCodes: keyboardActions ? [27] : null,
-            color: app.theme === 'aurora' ? 'gray' : null
+            color: null
           }, {
             text: app.params.dialog.buttonOk,
-            bold: true,
+            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,
@@ -162,36 +142,30 @@ export default {
           buttons: [{
             text: app.params.dialog.buttonCancel,
             keyCodes: keyboardActions ? [27] : null,
-            color: app.theme === 'aurora' ? 'gray' : null
+            color: null
           }, {
             text: app.params.dialog.buttonOk,
-            bold: true,
+            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,
@@ -203,29 +177,25 @@ export default {
           buttons: [{
             text: app.params.dialog.buttonCancel,
             keyCodes: keyboardActions ? [27] : null,
-            color: app.theme === 'aurora' ? 'gray' : null
+            color: null
           }, {
             text: app.params.dialog.buttonOk,
-            bold: true,
+            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,
-          auroraPreloaderContent
+          mdPreloaderContent
         };
         const preloaderInner = preloaders[`${app.theme}PreloaderContent`] || '';
         return new Dialog(app, {
@@ -236,14 +206,11 @@ export default {
           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;
@@ -255,7 +222,6 @@ export default {
             [progress, title, color] = args;
           }
         }
-
         const infinite = typeof progress === 'undefined';
         const dialog = new Dialog(app, {
           title: typeof title === 'undefined' ? app.params.dialog.progressTitle : title,
@@ -271,8 +237,6 @@ export default {
         if (!infinite) dialog.setProgress(progress);
         return dialog.open();
       }
-
     });
   }
-
 };

package/components/dialog/dialog.lazy.js

@@ -1 +1 @@
-(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var t=o.$,l=o.utils,a=o.getDevice,n=(o.getSupport,o.Class,o.Modal),s=(o.ConstructorMethods,o.ModalMethods),r=o.$jsx,i=l.extend,d=l.iosPreloaderContent,c=l.mdPreloaderContent,p=l.auroraPreloaderContent;class u extends n{constructor(o,e){const l=i({title:o.params.dialog.title,text:void 0,content:"",buttons:[],verticalButtons:!1,onClick:void 0,cssClass:void 0,destroyOnClose:!1,on:{}},e);void 0===l.closeByBackdropClick&&(l.closeByBackdropClick=o.params.dialog.closeByBackdropClick),void 0===l.backdrop&&(l.backdrop=o.params.dialog.backdrop),super(o,l);const n=this,s=a(),{title:d,text:c,content:p,buttons:u,verticalButtons:g,cssClass:m,backdrop:k}=l;let f,C,y;if(n.params=l,n.params.el)f=t(n.params.el);else{const o=["dialog"];0===u.length&&o.push("dialog-no-buttons"),u.length>0&&o.push(`dialog-buttons-${u.length}`),g&&o.push("dialog-buttons-vertical"),m&&o.push(m);let e="";u.length>0&&(e=r("div",{class:"dialog-buttons"},u.map((o=>r("span",{class:`dialog-button${o.bold?" dialog-button-bold":""}${o.color?` color-${o.color}`:""}${o.cssClass?` ${o.cssClass}`:""}`},o.text)))));const l=r("div",{class:o.join(" ")},r("div",{class:"dialog-inner"},d&&r("div",{class:"dialog-title"},d),c&&r("div",{class:"dialog-text"},c),p),e);f=t(l)}if(f&&f.length>0&&f[0].f7Modal)return f[0].f7Modal;if(0===f.length)return n.destroy();function v(o){const e=t(this).index(),l=u[e];l.onClick&&l.onClick(n,o),n.params.onClick&&n.params.onClick(n,e),!1!==l.close&&n.close()}function b(o){const e=o.keyCode;u.forEach(((t,l)=>{t.keyCodes&&t.keyCodes.indexOf(e)>=0&&(document.activeElement&&document.activeElement.blur(),t.onClick&&t.onClick(n,o),n.params.onClick&&n.params.onClick(n,l),!1!==t.close&&n.close())}))}function h(o){const e=o.target;0===t(e).closest(n.el).length&&n.params.closeByBackdropClick&&n.backdropEl&&n.backdropEl===e&&n.close()}return k&&(C=o.$el.children(".dialog-backdrop"),0===C.length&&(C=t('<div class="dialog-backdrop"></div>'),o.$el.append(C))),u&&u.length>0&&(n.on("open",(()=>{f.find(".dialog-button").each(((o,e)=>{u[e].keyCodes&&(y=!0),t(o).on("click",v)})),!y||s.ios||s.android||s.cordova||s.capacitor||t(document).on("keydown",b)})),n.on("close",(()=>{f.find(".dialog-button").each((o=>{t(o).off("click",v)})),!y||s.ios||s.android||s.cordova||s.capacitor||t(document).off("keydown",b),y=!1}))),i(n,{app:o,$el:f,el:f[0],$backdropEl:C,backdropEl:C&&C[0],type:"dialog",setProgress:(e,t)=>(o.progressbar.set(f.find(".progressbar"),e,t),n),setText(o){let e=f.find(".dialog-text");return 0===e.length&&(e=t('<div class="dialog-text"></div>'),void 0!==d?e.insertAfter(f.find(".dialog-title")):f.find(".dialog-inner").prepend(e)),e.html(o),n.params.text=o,n},setTitle(o){let e=f.find(".dialog-title");return 0===e.length&&(e=t('<div class="dialog-title"></div>'),f.find(".dialog-inner").prepend(e)),e.html(o),n.params.title=o,n}}),n.on("opened",(()=>{n.params.closeByBackdropClick&&o.on("click",h)})),n.on("close",(()=>{n.params.closeByBackdropClick&&o.off("click",h)})),f[0].f7Modal=n,n.params.destroyOnClose&&n.once("closed",(()=>{setTimeout((()=>{n.destroy()}),0)})),n}}var g={name:"dialog",params:{dialog:{title:void 0,buttonOk:"OK",buttonCancel:"Cancel",usernamePlaceholder:"Username",passwordPlaceholder:"Password",preloaderTitle:"Loading... ",progressTitle:"Loading... ",backdrop:!0,closeByBackdropClick:!1,destroyPredefinedDialogs:!0,keyboardActions:!0,autoFocus:!0}},static:{Dialog:u},create(){const o=this;function e(){return o.params.dialog.title||o.name}const t=o.params.dialog.destroyPredefinedDialogs,l=o.params.dialog.keyboardActions,a=o.params.dialog.autoFocus?{on:{opened(o){o.$el.find("input").eq(0).focus()}}}:{};o.dialog=i(s({app:o,constructor:u,defaultSelector:".dialog.modal-in"}),{alert(){for(var a=arguments.length,n=new Array(a),s=0;s<a;s++)n[s]=arguments[s];let[r,i,d]=n;return 2===n.length&&"function"==typeof n[1]&&([r,d,i]=n),new u(o,{title:void 0===i?e():i,text:r,buttons:[{text:o.params.dialog.buttonOk,bold:!0,onClick:d,keyCodes:l?[13,27]:null}],destroyOnClose:t}).open()},prompt(){for(var n=arguments.length,s=new Array(n),r=0;r<n;r++)s[r]=arguments[r];let[i,d,c,p,g]=s;return"function"==typeof s[1]&&([i,c,p,g,d]=s),g=null==g?"":g,new u(o,{title:void 0===d?e():d,text:i,content:`<div class="dialog-input-field input"><input type="text" class="dialog-input" value="${g}"></div>`,buttons:[{text:o.params.dialog.buttonCancel,keyCodes:l?[27]:null,color:"aurora"===o.theme?"gray":null},{text:o.params.dialog.buttonOk,bold:!0,keyCodes:l?[13]:null}],onClick(o,e){const t=o.$el.find(".dialog-input").val();0===e&&p&&p(t),1===e&&c&&c(t)},destroyOnClose:t,...a}).open()},confirm(){for(var a=arguments.length,n=new Array(a),s=0;s<a;s++)n[s]=arguments[s];let[r,i,d,c]=n;return"function"==typeof n[1]&&([r,d,c,i]=n),new u(o,{title:void 0===i?e():i,text:r,buttons:[{text:o.params.dialog.buttonCancel,onClick:c,keyCodes:l?[27]:null,color:"aurora"===o.theme?"gray":null},{text:o.params.dialog.buttonOk,bold:!0,onClick:d,keyCodes:l?[13]:null}],destroyOnClose:t}).open()},login(){for(var n=arguments.length,s=new Array(n),r=0;r<n;r++)s[r]=arguments[r];let[i,d,c,p]=s;return"function"==typeof s[1]&&([i,c,p,d]=s),new u(o,{title:void 0===d?e():d,text:i,content:`\n                <div class="dialog-input-field dialog-input-double input">\n                  <input type="text" name="dialog-username" placeholder="${o.params.dialog.usernamePlaceholder}" class="dialog-input">\n                </div>\n                <div class="dialog-input-field dialog-input-double input">\n                  <input type="password" name="dialog-password" placeholder="${o.params.dialog.passwordPlaceholder}" class="dialog-input">\n                </div>`,buttons:[{text:o.params.dialog.buttonCancel,keyCodes:l?[27]:null,color:"aurora"===o.theme?"gray":null},{text:o.params.dialog.buttonOk,bold:!0,keyCodes:l?[13]:null}],onClick(o,e){const t=o.$el.find('[name="dialog-username"]').val(),l=o.$el.find('[name="dialog-password"]').val();0===e&&p&&p(t,l),1===e&&c&&c(t,l)},destroyOnClose:t,...a}).open()},password(){for(var n=arguments.length,s=new Array(n),r=0;r<n;r++)s[r]=arguments[r];let[i,d,c,p]=s;return"function"==typeof s[1]&&([i,c,p,d]=s),new u(o,{title:void 0===d?e():d,text:i,content:`\n                <div class="dialog-input-field input">\n                  <input type="password" name="dialog-password" placeholder="${o.params.dialog.passwordPlaceholder}" class="dialog-input">\n                </div>`,buttons:[{text:o.params.dialog.buttonCancel,keyCodes:l?[27]:null,color:"aurora"===o.theme?"gray":null},{text:o.params.dialog.buttonOk,bold:!0,keyCodes:l?[13]:null}],onClick(o,e){const t=o.$el.find('[name="dialog-password"]').val();0===e&&p&&p(t),1===e&&c&&c(t)},destroyOnClose:t,...a}).open()},preloader(e,l){const a={iosPreloaderContent:d,mdPreloaderContent:c,auroraPreloaderContent:p}[`${o.theme}PreloaderContent`]||"";return new u(o,{title:null==e?o.params.dialog.preloaderTitle:e,content:`<div class="preloader${l?` color-${l}`:""}">${a}</div>`,cssClass:"dialog-preloader",destroyOnClose:t}).open()},progress(){for(var e=arguments.length,l=new Array(e),a=0;a<e;a++)l[a]=arguments[a];let[n,s,r]=l;2===l.length?"number"==typeof l[0]?[s,r,n]=l:"string"==typeof l[0]&&"string"==typeof l[1]&&([n,r,s]=l):1===l.length&&"number"==typeof l[0]&&([s,n,r]=l);const i=void 0===s,d=new u(o,{title:void 0===n?o.params.dialog.progressTitle:n,cssClass:"dialog-progress",content:`\n                <div class="progressbar${i?"-infinite":""}${r?` color-${r}`:""}">\n                  ${i?"":"<span></span>"}\n                </div>\n              `,destroyOnClose:t});return i||d.setProgress(s),d.open()}})}};if(e){if(o.prototype.modules&&o.prototype.modules[g.name])return;o.use(g),o.instance&&(o.instance.useModuleParams(g,o.instance.params),o.instance.useModule(g))}return g}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(o,e){void 0===e&&(e=!0);var t=o.$,n=o.utils,l=o.getDevice,a=(o.getSupport,o.Class,o.Modal),s=(o.ConstructorMethods,o.ModalMethods),i=o.$jsx,r=n.extend,d=n.iosPreloaderContent,c=n.mdPreloaderContent;class p extends a{constructor(o,e){const n=r({title:o.params.dialog.title,text:void 0,content:"",buttons:[],verticalButtons:!1,onClick:void 0,cssClass:void 0,destroyOnClose:!1,on:{}},e);void 0===n.closeByBackdropClick&&(n.closeByBackdropClick=o.params.dialog.closeByBackdropClick),void 0===n.backdrop&&(n.backdrop=o.params.dialog.backdrop),super(o,n);const a=this,s=l(),{title:d,text:c,content:p,buttons:u,verticalButtons:g,cssClass:m,backdrop:k}=n;let f,C,v;if(a.params=n,a.params.el)f=t(a.params.el);else{const o=["dialog"];0===u.length&&o.push("dialog-no-buttons"),u.length>0&&o.push(`dialog-buttons-${u.length}`),g&&o.push("dialog-buttons-vertical"),m&&o.push(m);let e="";u.length>0&&(e=i("div",{class:"dialog-buttons"},u.map((o=>i("span",{class:`dialog-button${o.strong?" dialog-button-strong":""}${o.color?` color-${o.color}`:""}${o.cssClass?` ${o.cssClass}`:""}`},o.text)))));const n=i("div",{class:o.join(" ")},i("div",{class:"dialog-inner"},d&&i("div",{class:"dialog-title"},d),c&&i("div",{class:"dialog-text"},c),p),e);f=t(n)}if(f&&f.length>0&&f[0].f7Modal)return f[0].f7Modal;if(0===f.length)return a.destroy();function y(o){const e=t(this).index(),n=u[e];n.onClick&&n.onClick(a,o),a.params.onClick&&a.params.onClick(a,e),!1!==n.close&&a.close()}function b(o){const e=o.keyCode;u.forEach(((t,n)=>{t.keyCodes&&t.keyCodes.indexOf(e)>=0&&(document.activeElement&&document.activeElement.blur(),t.onClick&&t.onClick(a,o),a.params.onClick&&a.params.onClick(a,n),!1!==t.close&&a.close())}))}function h(o){const e=o.target;0===t(e).closest(a.el).length&&a.params.closeByBackdropClick&&a.backdropEl&&a.backdropEl===e&&a.close()}return k&&(C=o.$el.children(".dialog-backdrop"),0===C.length&&(C=t('<div class="dialog-backdrop"></div>'),o.$el.append(C))),u&&u.length>0&&(a.on("open",(()=>{f.find(".dialog-button").each(((o,e)=>{u[e].keyCodes&&(v=!0),t(o).on("click",y)})),!v||s.ios||s.android||s.cordova||s.capacitor||t(document).on("keydown",b)})),a.on("close",(()=>{f.find(".dialog-button").each((o=>{t(o).off("click",y)})),!v||s.ios||s.android||s.cordova||s.capacitor||t(document).off("keydown",b),v=!1}))),r(a,{app:o,$el:f,el:f[0],$backdropEl:C,backdropEl:C&&C[0],type:"dialog",setProgress:(e,t)=>(o.progressbar.set(f.find(".progressbar"),e,t),a),setText(o){let e=f.find(".dialog-text");return 0===e.length&&(e=t('<div class="dialog-text"></div>'),void 0!==d?e.insertAfter(f.find(".dialog-title")):f.find(".dialog-inner").prepend(e)),e.html(o),a.params.text=o,a},setTitle(o){let e=f.find(".dialog-title");return 0===e.length&&(e=t('<div class="dialog-title"></div>'),f.find(".dialog-inner").prepend(e)),e.html(o),a.params.title=o,a}}),a.on("opened",(()=>{a.params.closeByBackdropClick&&o.on("click",h)})),a.on("close",(()=>{a.params.closeByBackdropClick&&o.off("click",h)})),f[0].f7Modal=a,a.params.destroyOnClose&&a.once("closed",(()=>{setTimeout((()=>{a.destroy()}),0)})),a}}var u={name:"dialog",params:{dialog:{title:void 0,buttonOk:"OK",buttonCancel:"Cancel",usernamePlaceholder:"Username",passwordPlaceholder:"Password",preloaderTitle:"Loading... ",progressTitle:"Loading... ",backdrop:!0,closeByBackdropClick:!1,destroyPredefinedDialogs:!0,keyboardActions:!0,autoFocus:!0}},static:{Dialog:p},create(){const o=this;function e(){return o.params.dialog.title||o.name}const t=o.params.dialog.destroyPredefinedDialogs,n=o.params.dialog.keyboardActions,l=o.params.dialog.autoFocus?{on:{opened(o){o.$el.find("input").eq(0).focus()}}}:{},a="ios"===o.theme;o.dialog=r(s({app:o,constructor:p,defaultSelector:".dialog.modal-in"}),{alert(){for(var l=arguments.length,s=new Array(l),i=0;i<l;i++)s[i]=arguments[i];let[r,d,c]=s;return 2===s.length&&"function"==typeof s[1]&&([r,c,d]=s),new p(o,{title:void 0===d?e():d,text:r,buttons:[{text:o.params.dialog.buttonOk,strong:a,onClick:c,keyCodes:n?[13,27]:null}],destroyOnClose:t}).open()},prompt(){for(var s=arguments.length,i=new Array(s),r=0;r<s;r++)i[r]=arguments[r];let[d,c,u,g,m]=i;return"function"==typeof i[1]&&([d,u,g,m,c]=i),m=null==m?"":m,new p(o,{title:void 0===c?e():c,text:d,content:`<div class="dialog-input-field input"><input type="text" class="dialog-input" value="${m}"></div>`,buttons:[{text:o.params.dialog.buttonCancel,keyCodes:n?[27]:null,color:null},{text:o.params.dialog.buttonOk,strong:a,keyCodes:n?[13]:null}],onClick(o,e){const t=o.$el.find(".dialog-input").val();0===e&&g&&g(t),1===e&&u&&u(t)},destroyOnClose:t,...l}).open()},confirm(){for(var l=arguments.length,s=new Array(l),i=0;i<l;i++)s[i]=arguments[i];let[r,d,c,u]=s;return"function"==typeof s[1]&&([r,c,u,d]=s),new p(o,{title:void 0===d?e():d,text:r,buttons:[{text:o.params.dialog.buttonCancel,onClick:u,keyCodes:n?[27]:null,color:null},{text:o.params.dialog.buttonOk,strong:a,onClick:c,keyCodes:n?[13]:null}],destroyOnClose:t}).open()},login(){for(var s=arguments.length,i=new Array(s),r=0;r<s;r++)i[r]=arguments[r];let[d,c,u,g]=i;return"function"==typeof i[1]&&([d,u,g,c]=i),new p(o,{title:void 0===c?e():c,text:d,content:`\n                <div class="dialog-input-field dialog-input-double input">\n                  <input type="text" name="dialog-username" placeholder="${o.params.dialog.usernamePlaceholder}" class="dialog-input">\n                </div>\n                <div class="dialog-input-field dialog-input-double input">\n                  <input type="password" name="dialog-password" placeholder="${o.params.dialog.passwordPlaceholder}" class="dialog-input">\n                </div>`,buttons:[{text:o.params.dialog.buttonCancel,keyCodes:n?[27]:null,color:null},{text:o.params.dialog.buttonOk,strong:a,keyCodes:n?[13]:null}],onClick(o,e){const t=o.$el.find('[name="dialog-username"]').val(),n=o.$el.find('[name="dialog-password"]').val();0===e&&g&&g(t,n),1===e&&u&&u(t,n)},destroyOnClose:t,...l}).open()},password(){for(var s=arguments.length,i=new Array(s),r=0;r<s;r++)i[r]=arguments[r];let[d,c,u,g]=i;return"function"==typeof i[1]&&([d,u,g,c]=i),new p(o,{title:void 0===c?e():c,text:d,content:`\n                <div class="dialog-input-field input">\n                  <input type="password" name="dialog-password" placeholder="${o.params.dialog.passwordPlaceholder}" class="dialog-input">\n                </div>`,buttons:[{text:o.params.dialog.buttonCancel,keyCodes:n?[27]:null,color:null},{text:o.params.dialog.buttonOk,strong:a,keyCodes:n?[13]:null}],onClick(o,e){const t=o.$el.find('[name="dialog-password"]').val();0===e&&g&&g(t),1===e&&u&&u(t)},destroyOnClose:t,...l}).open()},preloader(e,n){const l={iosPreloaderContent:d,mdPreloaderContent:c}[`${o.theme}PreloaderContent`]||"";return new p(o,{title:null==e?o.params.dialog.preloaderTitle:e,content:`<div class="preloader${n?` color-${n}`:""}">${l}</div>`,cssClass:"dialog-preloader",destroyOnClose:t}).open()},progress(){for(var e=arguments.length,n=new Array(e),l=0;l<e;l++)n[l]=arguments[l];let[a,s,i]=n;2===n.length?"number"==typeof n[0]?[s,i,a]=n:"string"==typeof n[0]&&"string"==typeof n[1]&&([a,i,s]=n):1===n.length&&"number"==typeof n[0]&&([s,a,i]=n);const r=void 0===s,d=new p(o,{title:void 0===a?o.params.dialog.progressTitle:a,cssClass:"dialog-progress",content:`\n                <div class="progressbar${r?"-infinite":""}${i?` color-${i}`:""}">\n                  ${r?"":"<span></span>"}\n                </div>\n              `,destroyOnClose:t});return r||d.setProgress(s),d.open()}})}};if(e){if(o.prototype.modules&&o.prototype.modules[u.name])return;o.use(u),o.instance&&(o.instance.useModuleParams(u,o.instance.params),o.instance.useModule(u))}return u}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/dialog/dialog.less

@@ -15,7 +15,6 @@
   transition-property: transform, opacity;
   display: none;
   transition-duration: 400ms;
-  box-shadow: var(--f7-dialog-box-shadow);
   width: var(--f7-dialog-width);
   margin-left: calc(-1 * var(--f7-dialog-width) / 2);
   border-radius: var(--f7-dialog-border-radius);
@@ -79,6 +78,14 @@
     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;
@@ -133,6 +140,3 @@ html.with-modal-dialog {
 .if-md-theme({
   @import './dialog-md.less';
 });
-.if-aurora-theme({
-  @import './dialog-aurora.less';
-});

package/components/fab/fab-rtl.css

@@ -1 +1 @@
-:root{--f7-fab-margin:16px;--f7-fab-text-color:#fff;--f7-fab-extended-text-font-size:14px;--f7-fab-extended-text-padding:0 20px;--f7-fab-label-bg-color:#fff;--f7-fab-label-text-color:#333;--f7-fab-label-border-radius:4px;--f7-fab-label-padding:4px 12px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.4);--f7-fab-extended-size:50px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4)}.md{--f7-fab-size:56px;--f7-fab-box-shadow:var(--f7-elevation-6);--f7-fab-extended-size:48px;--f7-fab-extended-text-font-weight:500;--f7-fab-extended-text-letter-spacing:0.05em;--f7-fab-label-box-shadow:var(--f7-elevation-3)}.aurora{--f7-fab-size:56px;--f7-fab-box-shadow:var(--f7-elevation-6);--f7-fab-extended-size:48px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4)}.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:calc(var(--f7-fab-size)/ 2);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-buttons a.active-state,.fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.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:calc(var(--f7-fab-button-size)/ 2);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:calc(var(--f7-fab-size)/ 2);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:uppercase}.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-labels.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-labels.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-labels.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-labels.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-labels.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-labels.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-labels.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-labels.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-labels.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-labels.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-labels.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-labels.toolbar-bottom-md~.fab-right-bottom,.tabbar-labels.toolbar-bottom~* .fab-center-bottom,.tabbar-labels.toolbar-bottom~* .fab-left-bottom,.tabbar-labels.toolbar-bottom~* .fab-right-bottom,.tabbar-labels.toolbar-bottom~.fab-center-bottom,.tabbar-labels.toolbar-bottom~.fab-left-bottom,.tabbar-labels.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-labels-height)}.ios .tabbar-labels.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-labels.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-labels.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-labels.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-labels.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-labels.toolbar-top-ios~.fab-right-bottom,.md .tabbar-labels.toolbar-top-md~* .fab-center-bottom,.md .tabbar-labels.toolbar-top-md~* .fab-left-bottom,.md .tabbar-labels.toolbar-top-md~* .fab-right-bottom,.md .tabbar-labels.toolbar-top-md~.fab-center-bottom,.md .tabbar-labels.toolbar-top-md~.fab-left-bottom,.md .tabbar-labels.toolbar-top-md~.fab-right-bottom,.tabbar-labels.toolbar-top~* .fab-center-bottom,.tabbar-labels.toolbar-top~* .fab-left-bottom,.tabbar-labels.toolbar-top~* .fab-right-bottom,.tabbar-labels.toolbar-top~.fab-center-bottom,.tabbar-labels.toolbar-top~.fab-left-bottom,.tabbar-labels.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-labels-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-labels~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-labels~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-labels~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-labels~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-labels~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-labels~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-labels~.fab-right-top,.navbar+.toolbar-top.tabbar-labels~* .fab-center-top,.navbar+.toolbar-top.tabbar-labels~* .fab-left-top,.navbar+.toolbar-top.tabbar-labels~* .fab-right-top,.navbar+.toolbar-top.tabbar-labels~.fab-center-top,.navbar+.toolbar-top.tabbar-labels~.fab-left-top,.navbar+.toolbar-top.tabbar-labels~.fab-right-top{margin-top:calc(var(--f7-tabbar-labels-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-labels~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~.fab-right-top,.navbars+.toolbar-top.tabbar-labels~* .fab-center-top,.navbars+.toolbar-top.tabbar-labels~* .fab-left-top,.navbars+.toolbar-top.tabbar-labels~* .fab-right-top,.navbars+.toolbar-top.tabbar-labels~.fab-center-top,.navbars+.toolbar-top.tabbar-labels~.fab-left-top,.navbars+.toolbar-top.tabbar-labels~.fab-right-top{margin-top:calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{transition-duration:0s}
+:root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-extended-text-padding:0 20px;--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-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 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12);--f7-fab-extended-size:48px;--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 3px 3px -2px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 1px 8px 0px rgba(0, 0, 0, 0.12)}.md,.md .dark,.md [class*=color-]{--f7-fab-text-color:var(--f7-md-on-primary);--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-buttons a.active-state,.fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.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}

package/components/fab/fab-vars.less

@@ -1,37 +1,43 @@
 :root {
   --f7-fab-margin: 16px;
-  --f7-fab-text-color: #fff;
   --f7-fab-extended-text-font-size: 14px;
   --f7-fab-extended-text-padding: 0 20px;
-  --f7-fab-label-bg-color: #fff;
-  --f7-fab-label-text-color: #333;
-  --f7-fab-label-border-radius: 4px;
   --f7-fab-label-padding: 4px 12px;
   --f7-fab-label-font-size: inherit;
   --f7-fab-button-size: 40px;
   /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
 }
 .ios-vars({
+  --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-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-border-radius: 16px;
   --f7-fab-size: 56px;
-  --f7-fab-box-shadow: var(--f7-elevation-6);
+  --f7-fab-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+                       0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+                       0px 1px 18px 0px rgba(0, 0, 0, 0.12);
   --f7-fab-extended-size: 48px;
   --f7-fab-extended-text-font-weight: 500;
-  --f7-fab-extended-text-letter-spacing: 0.05em;
-  --f7-fab-label-box-shadow: var(--f7-elevation-3);
-});
-.aurora-vars({
-  --f7-fab-size: 56px;
-  --f7-fab-box-shadow: var(--f7-elevation-6);
-  --f7-fab-extended-size: 48px;
-  --f7-fab-extended-text-font-weight: 600;
   --f7-fab-extended-text-letter-spacing: 0;
-  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
+  --f7-fab-extended-text-transform: none;
+  --f7-fab-label-border-radius: 8px;
+  --f7-fab-label-box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+                             0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+                             0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+});
+.md-color-vars({
+  --f7-fab-text-color: var(--f7-md-on-primary);
+  --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

@@ -1 +1 @@
-:root{--f7-fab-margin:16px;--f7-fab-text-color:#fff;--f7-fab-extended-text-font-size:14px;--f7-fab-extended-text-padding:0 20px;--f7-fab-label-bg-color:#fff;--f7-fab-label-text-color:#333;--f7-fab-label-border-radius:4px;--f7-fab-label-padding:4px 12px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.4);--f7-fab-extended-size:50px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4)}.md{--f7-fab-size:56px;--f7-fab-box-shadow:var(--f7-elevation-6);--f7-fab-extended-size:48px;--f7-fab-extended-text-font-weight:500;--f7-fab-extended-text-letter-spacing:0.05em;--f7-fab-label-box-shadow:var(--f7-elevation-3)}.aurora{--f7-fab-size:56px;--f7-fab-box-shadow:var(--f7-elevation-6);--f7-fab-extended-size:48px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4)}.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:calc(var(--f7-fab-size)/ 2);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-buttons a.active-state,.fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.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:calc(var(--f7-fab-button-size)/ 2);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:calc(var(--f7-fab-size)/ 2);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:uppercase}.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-labels.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-labels.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-labels.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-labels.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-labels.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-labels.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-labels.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-labels.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-labels.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-labels.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-labels.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-labels.toolbar-bottom-md~.fab-right-bottom,.tabbar-labels.toolbar-bottom~* .fab-center-bottom,.tabbar-labels.toolbar-bottom~* .fab-left-bottom,.tabbar-labels.toolbar-bottom~* .fab-right-bottom,.tabbar-labels.toolbar-bottom~.fab-center-bottom,.tabbar-labels.toolbar-bottom~.fab-left-bottom,.tabbar-labels.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-labels-height)}.ios .tabbar-labels.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-labels.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-labels.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-labels.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-labels.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-labels.toolbar-top-ios~.fab-right-bottom,.md .tabbar-labels.toolbar-top-md~* .fab-center-bottom,.md .tabbar-labels.toolbar-top-md~* .fab-left-bottom,.md .tabbar-labels.toolbar-top-md~* .fab-right-bottom,.md .tabbar-labels.toolbar-top-md~.fab-center-bottom,.md .tabbar-labels.toolbar-top-md~.fab-left-bottom,.md .tabbar-labels.toolbar-top-md~.fab-right-bottom,.tabbar-labels.toolbar-top~* .fab-center-bottom,.tabbar-labels.toolbar-top~* .fab-left-bottom,.tabbar-labels.toolbar-top~* .fab-right-bottom,.tabbar-labels.toolbar-top~.fab-center-bottom,.tabbar-labels.toolbar-top~.fab-left-bottom,.tabbar-labels.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-labels-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-labels~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-labels~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-labels~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-labels~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-labels~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-labels~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-labels~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-labels~.fab-right-top,.navbar+.toolbar-top.tabbar-labels~* .fab-center-top,.navbar+.toolbar-top.tabbar-labels~* .fab-left-top,.navbar+.toolbar-top.tabbar-labels~* .fab-right-top,.navbar+.toolbar-top.tabbar-labels~.fab-center-top,.navbar+.toolbar-top.tabbar-labels~.fab-left-top,.navbar+.toolbar-top.tabbar-labels~.fab-right-top{margin-top:calc(var(--f7-tabbar-labels-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-labels~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-labels~.fab-right-top,.navbars+.toolbar-top.tabbar-labels~* .fab-center-top,.navbars+.toolbar-top.tabbar-labels~* .fab-left-top,.navbars+.toolbar-top.tabbar-labels~* .fab-right-top,.navbars+.toolbar-top.tabbar-labels~.fab-center-top,.navbars+.toolbar-top.tabbar-labels~.fab-left-top,.navbars+.toolbar-top.tabbar-labels~.fab-right-top{margin-top:calc(var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{transition-duration:0s}
+:root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-extended-text-padding:0 20px;--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-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 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12);--f7-fab-extended-size:48px;--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 3px 3px -2px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 1px 8px 0px rgba(0, 0, 0, 0.12)}.md,.md .dark,.md [class*=color-]{--f7-fab-text-color:var(--f7-md-on-primary);--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-buttons a.active-state,.fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.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}