framework7 8.3.4 → 9.0.0

package/components/list-index/list-index.css

@@ -1 +1 @@
-:root{--f7-list-index-width:16px;--f7-list-index-font-size:11px;--f7-list-index-font-weight:600;--f7-list-index-item-height:14px;--f7-list-index-label-font-weight:500}.ios{--f7-list-index-label-text-color:#fff;--f7-list-index-label-size:44px;--f7-list-index-label-font-size:17px;--f7-list-index-skip-dot-size:6px}.md{--f7-list-index-label-size:56px;--f7-list-index-label-font-size:20px;--f7-list-index-skip-dot-size:4px}.md,.md .dark,.md [class*=color-]{--f7-list-index-label-bg-color:var(--f7-md-primary);--f7-list-index-label-text-color:var(--f7-md-on-primary)}.list-index{position:absolute;top:0;bottom:0;text-align:center;z-index:10;width:var(--f7-list-index-width);cursor:pointer;-webkit-user-select:none;user-select:none;right:var(--f7-safe-area-right)}.list-index:before{content:'';position:absolute;width:20px;top:0;right:100%;height:100%}.list-index ul{color:var(--f7-list-index-text-color,var(--f7-theme-color));font-size:var(--f7-list-index-font-size);font-weight:var(--f7-list-index-font-weight);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;height:100%;width:100%;position:relative}.list-index li{margin:0;padding:0;list-style:none;position:relative;height:var(--f7-list-index-item-height);line-height:var(--f7-list-index-item-height);flex-shrink:0;display:block;width:100%}.list-index .list-index-skip-placeholder:after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;width:var(--f7-list-index-skip-dot-size);height:var(--f7-list-index-skip-dot-size);margin-left:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);margin-top:calc(-1 * var(--f7-list-index-skip-dot-size)/ 2);background:var(--f7-list-index-text-color,var(--f7-theme-color))}.list-index .list-index-label{position:absolute;bottom:0;right:100%;text-align:center;background-color:var(--f7-list-index-label-bg-color,var(--f7-theme-color));color:var(--f7-list-index-label-text-color);width:var(--f7-list-index-label-size);height:var(--f7-list-index-label-size);line-height:var(--f7-list-index-label-size);font-size:var(--f7-list-index-label-font-size);font-weight:var(--f7-list-index-label-font-weight)}.navbars~.page>.list-index,.navbar~.list-index,.navbar~.page>.list-index{top:var(--f7-navbar-height)}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md~.list-index,.ios .navbar~.toolbar-top-ios~.list-index,.navbars~.toolbar-top~.list-index,.navbar~.toolbar-top~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height))}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md.tabbar-icons~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-icons~.list-index,.navbars~.toolbar-top.tabbar-icons~.list-index,.navbar~.toolbar-top.tabbar-icons~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height))}.navbars~.subnavbar~.list-index,.navbar~.subnavbar~.list-index,.page-with-subnavbar .navbar~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-subnavbar-height))}.ios .toolbar-bottom-ios~* .page>.list-index,.ios .toolbar-bottom-ios~.list-index,.ios .toolbar-bottom-ios~.page>.list-index,.md .toolbar-bottom-md~* .page>.list-index,.md .toolbar-bottom-md~.list-index,.md .toolbar-bottom-md~.page>.list-index,.toolbar-bottom~* .page>.list-index,.toolbar-bottom~.list-index,.toolbar-bottom~.page>.list-index{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.ios .toolbar-bottom-ios.tabbar-icons~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.page>.list-index,.md .toolbar-bottom-md.tabbar-icons~* .page>.list-index,.md .toolbar-bottom-md.tabbar-icons~.list-index,.md .toolbar-bottom-md.tabbar-icons~.page>.list-index,.toolbar-bottom.tabbar-icons~* .page>.list-index,.toolbar-bottom.tabbar-icons~.list-index,.toolbar-bottom.tabbar-icons~.page>.list-index{bottom:calc(var(--f7-tabbar-icons-height) + var(--f7-safe-area-bottom))}.ios .list-index .list-index-label{margin-bottom:calc(-1 * var(--f7-list-index-label-size)/ 2);margin-right:calc(var(--f7-list-index-width) - 1px);border-radius:50%}.ios .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 0% 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-1}.md .list-index .list-index-label{border-radius:50% 50% 0 50%}
+:root{--f7-list-index-width:16px;--f7-list-index-font-size:11px;--f7-list-index-font-weight:600;--f7-list-index-item-height:14px;--f7-list-index-label-font-weight:500}.ios{--f7-list-index-label-text-color:#fff;--f7-list-index-label-size:44px;--f7-list-index-label-font-size:17px;--f7-list-index-skip-dot-size:6px}.md{--f7-list-index-label-size:56px;--f7-list-index-label-font-size:20px;--f7-list-index-skip-dot-size:4px}.md,.md .dark,.md [class*=color-]{--f7-list-index-label-bg-color:var(--f7-md-primary);--f7-list-index-label-text-color:var(--f7-md-on-primary)}.list-index{bottom:0;cursor:pointer;position:absolute;right:var(--f7-safe-area-right);text-align:center;top:0;-webkit-user-select:none;user-select:none;width:var(--f7-list-index-width);z-index:10}.list-index:before{content:"";height:100%;position:absolute;right:100%;top:0;width:20px}.list-index ul{align-items:center;color:var(--f7-list-index-text-color,var(--f7-theme-color));display:flex;flex-direction:column;font-size:var(--f7-list-index-font-size);font-weight:var(--f7-list-index-font-weight);height:100%;justify-content:center}.list-index li,.list-index ul{flex-shrink:0;list-style:none;margin:0;padding:0;position:relative;width:100%}.list-index li{display:block;height:var(--f7-list-index-item-height);line-height:var(--f7-list-index-item-height)}.list-index .list-index-skip-placeholder:after{background:var(--f7-list-index-text-color,var(--f7-theme-color));border-radius:50%;content:"";height:var(--f7-list-index-skip-dot-size);left:50%;margin-left:calc(var(--f7-list-index-skip-dot-size)*-1/2);margin-top:calc(var(--f7-list-index-skip-dot-size)*-1/2);position:absolute;top:50%;width:var(--f7-list-index-skip-dot-size)}.list-index .list-index-label{background-color:var(--f7-list-index-label-bg-color,var(--f7-theme-color));bottom:0;color:var(--f7-list-index-label-text-color);font-size:var(--f7-list-index-label-font-size);font-weight:var(--f7-list-index-label-font-weight);height:var(--f7-list-index-label-size);line-height:var(--f7-list-index-label-size);position:absolute;right:100%;text-align:center;width:var(--f7-list-index-label-size)}.navbars~.page>.list-index,.navbar~.list-index,.navbar~.page>.list-index{top:var(--f7-navbar-height)}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md~.list-index,.ios .navbar~.toolbar-top-ios~.list-index,.navbars~.toolbar-top~.list-index,.navbar~.toolbar-top~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height))}.ios .navbars~.toolbar-top-ios .md .navbar~.toolbar-top-md.tabbar-icons~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-icons~.list-index,.navbars~.toolbar-top.tabbar-icons~.list-index,.navbar~.toolbar-top.tabbar-icons~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height))}.navbars~.subnavbar~.list-index,.navbar~.subnavbar~.list-index,.page-with-subnavbar .navbar~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-subnavbar-height))}.ios .toolbar-bottom-ios~* .page>.list-index,.ios .toolbar-bottom-ios~.list-index,.ios .toolbar-bottom-ios~.page>.list-index,.md .toolbar-bottom-md~* .page>.list-index,.md .toolbar-bottom-md~.list-index,.md .toolbar-bottom-md~.page>.list-index,.toolbar-bottom~* .page>.list-index,.toolbar-bottom~.list-index,.toolbar-bottom~.page>.list-index{bottom:calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom))}.ios .toolbar-bottom-ios.tabbar-icons~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.list-index,.ios .toolbar-bottom-ios.tabbar-icons~.page>.list-index,.md .toolbar-bottom-md.tabbar-icons~* .page>.list-index,.md .toolbar-bottom-md.tabbar-icons~.list-index,.md .toolbar-bottom-md.tabbar-icons~.page>.list-index,.toolbar-bottom.tabbar-icons~* .page>.list-index,.toolbar-bottom.tabbar-icons~.list-index,.toolbar-bottom.tabbar-icons~.page>.list-index{bottom:calc(var(--f7-tabbar-icons-height) + var(--f7-safe-area-bottom))}.ios .list-index .list-index-label{border-radius:50%;margin-bottom:calc(var(--f7-list-index-label-size)*-1/2);margin-right:calc(var(--f7-list-index-width) - 1px)}.ios .list-index .list-index-label:before{background-color:inherit;border-radius:50% 0 50% 50%;content:"";height:100%;left:0;position:absolute;top:0;transform:rotate(45deg);width:100%;z-index:-1}.md .list-index .list-index-label{border-radius:50% 50% 0 50%}

package/components/login-screen/login-screen-rtl.css

@@ -1 +1 @@
-:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0}.ios{--f7-login-screen-blocks-margin-vertical:25px;--f7-login-screen-transition-timing-function:initial;--f7-login-screen-transition-duration:400ms;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-transition-duration:600ms;--f7-login-screen-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-login-screen-blocks-margin-vertical:24px;--f7-login-screen-title-font-weight:400;--f7-login-screen-title-font-size:28px}.md,.md .dark,.md [class*=color-]{--f7-login-screen-content-bg-color:var(--f7-md-surface);--f7-login-screen-bg-color:var(--f7-md-surface)}.login-screen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:var(--f7-login-screen-bg-color);transition-timing-function:var(--f7-login-screen-transition-timing-function);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:var(--f7-login-screen-transition-duration)}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translate3d(0,0,0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:0 0}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{text-align:center;margin-left:auto;margin-right:auto}.login-screen-title{text-align:var(--f7-login-screen-title-text-align);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);color:var(--f7-login-screen-title-text-color);letter-spacing:var(--f7-login-screen-title-letter-spacing)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{margin-top:auto;margin-bottom:auto;height:auto;max-height:100%;width:100%}.dark .login-screen-content .block-strong,.dark .login-screen-content .list ul,.dark .login-screen-page .block-strong,.dark .login-screen-page .list ul,.dark.login-screen-page .block-strong,.dark.login-screen-page .list ul{background-color:transparent}
+:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0}.ios{--f7-login-screen-blocks-margin-vertical:25px;--f7-login-screen-transition-timing-function:initial;--f7-login-screen-transition-duration:400ms;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-transition-duration:600ms;--f7-login-screen-transition-timing-function:cubic-bezier(0,1,0.2,1);--f7-login-screen-blocks-margin-vertical:24px;--f7-login-screen-title-font-weight:400;--f7-login-screen-title-font-size:28px}.md,.md .dark,.md [class*=color-]{--f7-login-screen-content-bg-color:var(--f7-md-surface);--f7-login-screen-bg-color:var(--f7-md-surface)}.login-screen{background:var(--f7-login-screen-bg-color);box-sizing:border-box;display:none;height:100%;left:0;position:absolute;top:0;transform:translate3d(0,100vh,0);transition-property:transform;transition-timing-function:var(--f7-login-screen-transition-timing-function);width:100%;z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:var(--f7-login-screen-transition-duration)}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translateZ(0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:none}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{margin-left:auto;margin-right:auto;text-align:center}.login-screen-title{color:var(--f7-login-screen-title-text-color);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);letter-spacing:var(--f7-login-screen-title-letter-spacing);text-align:var(--f7-login-screen-title-text-align)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{height:auto;margin-bottom:auto;margin-top:auto;max-height:100%;width:100%}.dark .login-screen-content .block-strong,.dark .login-screen-content .list ul,.dark .login-screen-page .block-strong,.dark .login-screen-page .list ul,.dark.login-screen-page .block-strong,.dark.login-screen-page .list ul{background-color:initial}

package/components/login-screen/login-screen.css

@@ -1 +1 @@
-:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0}.ios{--f7-login-screen-blocks-margin-vertical:25px;--f7-login-screen-transition-timing-function:initial;--f7-login-screen-transition-duration:400ms;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-transition-duration:600ms;--f7-login-screen-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-login-screen-blocks-margin-vertical:24px;--f7-login-screen-title-font-weight:400;--f7-login-screen-title-font-size:28px}.md,.md .dark,.md [class*=color-]{--f7-login-screen-content-bg-color:var(--f7-md-surface);--f7-login-screen-bg-color:var(--f7-md-surface)}.login-screen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:var(--f7-login-screen-bg-color);transition-timing-function:var(--f7-login-screen-transition-timing-function);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:var(--f7-login-screen-transition-duration)}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translate3d(0,0,0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:0 0}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{text-align:center;margin-left:auto;margin-right:auto}.login-screen-title{text-align:var(--f7-login-screen-title-text-align);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);color:var(--f7-login-screen-title-text-color);letter-spacing:var(--f7-login-screen-title-letter-spacing)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{margin-top:auto;margin-bottom:auto;height:auto;max-height:100%;width:100%}.dark .login-screen-content .block-strong,.dark .login-screen-content .list ul,.dark .login-screen-page .block-strong,.dark .login-screen-page .list ul,.dark.login-screen-page .block-strong,.dark.login-screen-page .list ul{background-color:transparent}
+:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0}.ios{--f7-login-screen-blocks-margin-vertical:25px;--f7-login-screen-transition-timing-function:initial;--f7-login-screen-transition-duration:400ms;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-transition-duration:600ms;--f7-login-screen-transition-timing-function:cubic-bezier(0,1,0.2,1);--f7-login-screen-blocks-margin-vertical:24px;--f7-login-screen-title-font-weight:400;--f7-login-screen-title-font-size:28px}.md,.md .dark,.md [class*=color-]{--f7-login-screen-content-bg-color:var(--f7-md-surface);--f7-login-screen-bg-color:var(--f7-md-surface)}.login-screen{background:var(--f7-login-screen-bg-color);box-sizing:border-box;display:none;height:100%;left:0;position:absolute;top:0;transform:translate3d(0,100vh,0);transition-property:transform;transition-timing-function:var(--f7-login-screen-transition-timing-function);width:100%;z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:var(--f7-login-screen-transition-duration)}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translateZ(0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:none}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{margin-left:auto;margin-right:auto;text-align:center}.login-screen-title{color:var(--f7-login-screen-title-text-color);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);letter-spacing:var(--f7-login-screen-title-letter-spacing);text-align:var(--f7-login-screen-title-text-align)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{height:auto;margin-bottom:auto;margin-top:auto;max-height:100%;width:100%}.dark .login-screen-content .block-strong,.dark .login-screen-content .list ul,.dark .login-screen-page .block-strong,.dark .login-screen-page .list ul,.dark.login-screen-page .block-strong,.dark.login-screen-page .list ul{background-color:initial}

package/components/login-screen/login-screen.js

@@ -14,17 +14,11 @@ export default {
     });
   },
   clicks: {
-    '.login-screen-open': function openLoginScreen($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.login-screen-open': function openLoginScreen($clickedEl, data = {}) {
       const app = this;
       app.loginScreen.open(data.loginScreen, data.animate, $clickedEl);
     },
-    '.login-screen-close': function closeLoginScreen($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.login-screen-close': function closeLoginScreen($clickedEl, data = {}) {
       const app = this;
       app.loginScreen.close(data.loginScreen, data.animate, $clickedEl);
     }

package/components/login-screen/login-screen.less

@@ -41,6 +41,7 @@
   .block {
     margin: var(--f7-login-screen-blocks-margin-vertical) auto;
   }
+
   .login-screen-title,
   .list,
   .block,

package/components/messagebar/messagebar-class.js

@@ -2,10 +2,7 @@ import $ from '../../shared/dom7.js';
 import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 class Messagebar extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const messagebar = this;
     const defaults = {
@@ -226,10 +223,7 @@ class Messagebar extends Framework7Class {
       $el.removeClass('messagebar-with-value');
     }
   }
-  attachmentsCreate(innerHTML) {
-    if (innerHTML === void 0) {
-      innerHTML = '';
-    }
+  attachmentsCreate(innerHTML = '') {
     const messagebar = this;
     const $attachmentsEl = $(`<div class="messagebar-attachments">${innerHTML}</div>`);
     $attachmentsEl.insertBefore(messagebar.$textareaEl);
@@ -239,10 +233,7 @@ class Messagebar extends Framework7Class {
     });
     return messagebar;
   }
-  attachmentsShow(innerHTML) {
-    if (innerHTML === void 0) {
-      innerHTML = '';
-    }
+  attachmentsShow(innerHTML = '') {
     const messagebar = this;
     messagebar.$attachmentsEl = messagebar.$el.find('.messagebar-attachments');
     if (messagebar.$attachmentsEl.length === 0) {
@@ -299,10 +290,7 @@ class Messagebar extends Framework7Class {
       messagebar.$attachmentsEl.html(html);
     }
   }
-  sheetCreate(innerHTML) {
-    if (innerHTML === void 0) {
-      innerHTML = '';
-    }
+  sheetCreate(innerHTML = '') {
     const messagebar = this;
     const $sheetEl = $(`<div class="messagebar-sheet">${innerHTML}</div>`);
     messagebar.$el.append($sheetEl);
@@ -312,10 +300,7 @@ class Messagebar extends Framework7Class {
     });
     return messagebar;
   }
-  sheetShow(innerHTML) {
-    if (innerHTML === void 0) {
-      innerHTML = '';
-    }
+  sheetShow(innerHTML = '') {
     const messagebar = this;
     messagebar.$sheetEl = messagebar.$el.find('.messagebar-sheet');
     if (messagebar.$sheetEl.length === 0) {

package/components/messagebar/messagebar-ios.less

@@ -1,21 +1,14 @@
 .ios {
   .messagebar {
-    a.link.icon-only:first-child {
-      margin-left: -8px;
+    *:is(a, button):is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
+      min-height: var(--f7-messagebar-textarea-height);
+      min-width: var(--f7-messagebar-textarea-height);
     }
-    a.link.icon-only:last-child {
-      margin-right: -8px;
+    textarea {
+      box-shadow: var(--f7-glass-shadow);
+      backdrop-filter: var(--f7-glass-backdrop);
+      min-height: var(--f7-messagebar-textarea-height);
     }
-    a.link:not(.icon-only) + .messagebar-area {
-      margin-left: 8px;
-    }
-    .messagebar-area + a.link:not(.icon-only) {
-      margin-left: 8px;
-    }
-  }
-  .messagebar-area {
-    margin-top: 5px;
-    margin-bottom: 5px;
   }
   .messagebar-attachments {
     padding: 5px;
@@ -24,8 +17,20 @@
     border: 1px solid var(--f7-messagebar-attachments-border-color);
     border-bottom: none;
   }
+  .messagebar-area {
+    border-radius: var(--f7-messagebar-textarea-border-radius);
+  }
   .messagebar-attachments-visible {
+    .messagebar-area {
+      background: var(--f7-messagebar-textarea-bg-color);
+      box-shadow: var(--f7-glass-shadow);
+      border-radius: var(--f7-messagebar-textarea-border-radius);
+      .ios-glass-backdrop();
+    }
     .messagebar-attachments + textarea {
+      background: transparent;
+      box-shadow: none;
+      backdrop-filter: none;
       border-radius: 0 0 var(--f7-messagebar-textarea-border-radius)
         var(--f7-messagebar-textarea-border-radius);
     }

package/components/messagebar/messagebar-md.less

@@ -1,6 +1,8 @@
 .md {
   .messagebar {
     --f7-toolbar-link-height: var(--f7-messagebar-height);
+    .hairline(top, var(--f7-messagebar-border-color));
+    background: var(--f7-messagebar-bg-color);
   }
   .messagebar-attachments {
     padding: 16px 16px 0;
@@ -37,6 +39,7 @@
   .messagebar-area {
     margin-top: 8px;
     margin-bottom: 8px;
+    overflow: hidden;
   }
 
   .messagebar-attachment-delete {

package/components/messagebar/messagebar-rtl.css

@@ -1 +1 @@
-:root{--f7-messagebar-attachments-height:155px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px}.ios{--f7-messagebar-height:44px;--f7-messagebar-font-size:17px;--f7-messagebar-textarea-bg-color:transparent;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:17px;--f7-messagebar-textarea-padding:6px 16px;--f7-messagebar-textarea-height:34px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-bg-color:#d1d5da;--f7-messagebar-sheet-border-color:transparent;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-textarea-placeholder-color:rgba(0, 0, 0, 0.4);--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}.ios .dark,.ios.dark{--f7-messagebar-textarea-placeholder-color:rgba(255, 255, 255, 0.4);--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-textarea-border:1px solid var(--f7-bars-border-color);--f7-messagebar-attachments-border-color:var(--f7-bars-border-color);--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.md{--f7-messagebar-height:64px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:12px 16px;--f7-messagebar-textarea-height:48px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid transparent;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:72px;--f7-messagebar-attachment-landscape-height:72px;--f7-messagebar-border-color:transparent;--f7-messagebar-attachments-border-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-messagebar-textarea-placeholder-color:var(--f7-md-on-surface-variant);--f7-messagebar-textarea-bg-color:var(--f7-md-surface-variant);--f7-messagebar-bg-color:var(--f7-md-surface);--f7-messagebar-textarea-text-color:var(--f7-md-on-surface);--f7-messagebar-sheet-bg-color:var(--f7-md-surface);--f7-messagebar-sheet-border-color:var(--f7-md-outline-variant);--f7-messagebar-link-color:var(--f7-md-on-surface)}.messagebar{transform:translate3d(0,0,0);background:var(--f7-messagebar-bg-color);height:auto;min-height:var(--f7-messagebar-height);font-size:var(--f7-messagebar-font-size);padding-bottom:var(--f7-safe-area-bottom);bottom:0}.messagebar:before{content:'';position:absolute;background-color:var(--f7-messagebar-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .messagebar{background-color:rgba(var(--f7-messagebar-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.messagebar.no-outline:before{display:none!important}.messagebar.toolbar-hidden:after{display:none!important}.messagebar .toolbar-inner{top:auto;position:relative;height:auto;bottom:auto;padding-left:calc(var(--f7-messagebar-inner-padding-left,var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));padding-right:calc(var(--f7-messagebar-inner-padding-right,var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));flex-direction:row-reverse}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{width:100%;flex-shrink:1;overflow:hidden;position:relative}.messagebar textarea{width:100%;flex-shrink:1;background-color:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius);padding:var(--f7-messagebar-textarea-padding);height:var(--f7-messagebar-textarea-height);color:var(--f7-messagebar-textarea-text-color);font-size:var(--f7-messagebar-textarea-font-size);line-height:var(--f7-messagebar-textarea-line-height);border:var(--f7-messagebar-textarea-border)}.messagebar textarea::placeholder{color:var(--f7-messagebar-textarea-placeholder-color)}.messagebar a.link{align-self:flex-end;flex-shrink:0;color:var(--f7-messagebar-link-color,var(--f7-theme-color))}.messagebar-attachments{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-size:0;white-space:nowrap;box-sizing:border-box;position:relative}.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments{display:none}.messagebar-attachment{background-size:cover;background-position:center;background-repeat:no-repeat;display:inline-block;vertical-align:middle;white-space:normal;height:var(--f7-messagebar-attachment-height);position:relative;border-radius:var(--f7-messagebar-attachment-border-radius)}@media (orientation:landscape){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{display:block;width:auto;height:100%;border-radius:var(--f7-messagebar-attachment-border-radius)}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:wrap;flex-direction:column;align-content:flex-start;height:var(--f7-messagebar-sheet-height);background-color:var(--f7-messagebar-sheet-bg-color);border-top:1px solid var(--f7-messagebar-sheet-border-color);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}@media (orientation:landscape){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image{background-size:cover;background-position:center;background-repeat:no-repeat}.messagebar-sheet-image>img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;transition-duration:.2s}.messagebar-attachment-delete{display:block;position:absolute;border-radius:50%;box-sizing:border-box;cursor:pointer}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{position:absolute;content:'';left:50%;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar a.link.icon-only:first-child{margin-left:-8px}.ios .messagebar a.link.icon-only:last-child{margin-right:-8px}.ios .messagebar a.link:not(.icon-only)+.messagebar-area{margin-left:8px}.ios .messagebar .messagebar-area+a.link:not(.icon-only){margin-left:8px}.ios .messagebar-area{margin-top:5px;margin-bottom:5px}.ios .messagebar-attachments{padding:5px;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment+.messagebar-attachment{margin-right:8px}.ios .messagebar-attachment-delete{right:5px;top:5px;width:20px;height:20px;background:#7d7e80;border:2px solid #fff;box-shadow:0px 0px 2px rgba(0,0,0,.2)}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{width:10px;height:2px;background:#fff;margin-left:-5px;margin-top:-1px}.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;margin-top:1px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);margin-right:1px}@media (orientation:landscape){.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2)}}.ios .messagebar-sheet-image .icon-checkbox,.ios .messagebar-sheet-image .icon-radio,.ios .messagebar-sheet-item .icon-checkbox,.ios .messagebar-sheet-item .icon-radio{position:absolute;right:8px;bottom:8px;z-index:1}.md .messagebar{--f7-toolbar-link-height:var(--f7-messagebar-height)}.md .messagebar-attachments{padding:16px 16px 0;border-bottom:1px solid var(--f7-messagebar-attachments-border-color)}.md .messagebar-attachment img{width:var(--f7-messagebar-attachment-height);height:var(--f7-messagebar-attachment-height);object-fit:cover;object-position:center}.md .messagebar-attachment+.messagebar-attachment{margin-right:16px}.md .messagebar-attachments-visible .messagebar-attachments{background:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0}.md .messagebar-attachments-visible textarea{border-top-left-radius:0;border-top-right-radius:0}.md .messagebar-area{margin-top:8px;margin-bottom:8px}.md .messagebar-attachment-delete{right:-6px;top:-6px;width:24px;height:24px;background-color:var(--f7-md-inverse-surface);border-radius:24px;border:2px solid var(--f7-messagebar-textarea-bg-color)}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{width:12px;height:2px;background:var(--f7-messagebar-textarea-bg-color);margin-left:-6px;margin-top:-1px}.md .messagebar-sheet-image,.md .messagebar-sheet-item{--f7-touch-ripple-color:transparent;box-sizing:border-box;flex-shrink:0;margin-top:8px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 24px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 24px)/ 2);border-radius:4px;margin-right:8px}@media (orientation:landscape){.md .messagebar-sheet-image,.md .messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 8px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 24px)/ 2)}}.md .messagebar-sheet-image input:checked~img,.md .messagebar-sheet-item input:checked~img{transform:scale(.85)}.md .messagebar-sheet-image input:checked~.icon-checkbox,.md .messagebar-sheet-image input:checked~.icon-radio,.md .messagebar-sheet-item input:checked~.icon-checkbox,.md .messagebar-sheet-item input:checked~.icon-radio{transform:translate(-50%,-50%) scale(1)}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-image .icon-radio,.md .messagebar-sheet-item .icon-checkbox,.md .messagebar-sheet-item .icon-radio{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);border:none;z-index:1;--f7-checkbox-inactive-color:var(--f7-md-surface);--f7-checkbox-active-color:var(--f7-md-surface)}.md .messagebar-sheet-image .icon-checkbox::after,.md .messagebar-sheet-image .icon-radio::after,.md .messagebar-sheet-item .icon-checkbox::after,.md .messagebar-sheet-item .icon-radio::after{color:var(--f7-md-on-surface);font-size:18px;width:auto;height:100%;line-height:32px;left:0;position:static}
+:root{--f7-messagebar-attachments-height:155px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px}.ios{--f7-messagebar-height:60px;--f7-messagebar-font-size:17px;--f7-messagebar-textarea-bg-color:var(--f7-glass-bg-color);--f7-messagebar-link-color:var(--f7-bars-text-color);--f7-messagebar-border-color:#0000;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:10px 16px 6px;--f7-messagebar-textarea-height:40px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-border-color:#0000;--f7-messagebar-attachment-border-radius:20px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-attachments-border-color:#0000;--f7-messagebar-textarea-border:none;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-textarea-placeholder-color:#0006;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}.ios .dark,.ios.dark{--f7-messagebar-sheet-bg-color:#000;--f7-messagebar-textarea-placeholder-color:#fff6;--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.md{--f7-messagebar-height:64px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:12px 16px;--f7-messagebar-textarea-height:48px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid #0000;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:72px;--f7-messagebar-attachment-landscape-height:72px;--f7-messagebar-border-color:#0000;--f7-messagebar-attachments-border-color:#0000}.md,.md .dark,.md [class*=color-]{--f7-messagebar-textarea-placeholder-color:var(--f7-md-on-surface-variant);--f7-messagebar-textarea-bg-color:var(--f7-md-surface-variant);--f7-messagebar-bg-color:var(--f7-md-surface);--f7-messagebar-textarea-text-color:var(--f7-md-on-surface);--f7-messagebar-sheet-bg-color:var(--f7-md-surface);--f7-messagebar-sheet-border-color:var(--f7-md-outline-variant);--f7-messagebar-link-color:var(--f7-md-on-surface)}.messagebar{bottom:0;font-size:var(--f7-messagebar-font-size);height:auto;min-height:var(--f7-messagebar-height);padding-bottom:var(--f7-safe-area-bottom);transform:translateZ(0)}.messagebar.no-outline:before,.messagebar.toolbar-hidden:after{display:none!important}.messagebar .toolbar-inner{bottom:auto;flex-direction:row-reverse;height:auto;padding-left:calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));padding-right:calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));position:relative;top:auto}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{flex-shrink:1;min-width:0;position:relative;width:100%}.messagebar textarea{background-color:var(--f7-messagebar-textarea-bg-color);border:var(--f7-messagebar-textarea-border);border-radius:var(--f7-messagebar-textarea-border-radius);color:var(--f7-messagebar-textarea-text-color);flex-shrink:1;font-size:var(--f7-messagebar-textarea-font-size);height:var(--f7-messagebar-textarea-height);line-height:var(--f7-messagebar-textarea-line-height);padding:var(--f7-messagebar-textarea-padding);width:100%}.messagebar textarea::placeholder{color:var(--f7-messagebar-textarea-placeholder-color)}.messagebar .toolbar-pane,.messagebar a.link{align-self:flex-end;color:var(--f7-messagebar-link-color,var(--f7-theme-color));flex-shrink:0}.messagebar-attachments{overflow:auto;width:100%;-webkit-overflow-scrolling:touch;box-sizing:border-box;font-size:0;position:relative;white-space:nowrap}.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments{display:none}.messagebar-attachment{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:var(--f7-messagebar-attachment-border-radius);display:inline-block;height:var(--f7-messagebar-attachment-height);position:relative;vertical-align:middle;white-space:normal}@media (orientation:landscape){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{border-radius:var(--f7-messagebar-attachment-border-radius);display:block;height:100%;width:auto}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;align-content:flex-start;background-color:var(--f7-messagebar-sheet-bg-color);border-top:1px solid var(--f7-messagebar-sheet-border-color);display:flex;flex-direction:column;flex-wrap:wrap;height:var(--f7-messagebar-sheet-height);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}@media (orientation:landscape){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image{background-position:50%;background-repeat:no-repeat;background-size:cover}.messagebar-sheet-image>img{border-radius:inherit;height:100%;object-fit:cover;object-position:center;transition-duration:.2s;width:100%}.messagebar-attachment-delete{border-radius:50%;box-sizing:border-box;cursor:pointer;display:block;position:absolute}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{content:"";left:50%;position:absolute;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar :is(a,button):is(.icon-only,:has(i:only-child),:has(svg:only-child)){min-height:var(--f7-messagebar-textarea-height);min-width:var(--f7-messagebar-textarea-height)}.ios .messagebar textarea{backdrop-filter:var(--f7-glass-backdrop);box-shadow:var(--f7-glass-shadow);min-height:var(--f7-messagebar-textarea-height)}.ios .messagebar-attachments{border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;padding:5px}.ios .messagebar-area,.ios .messagebar-attachments-visible .messagebar-area{border-radius:var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachments-visible .messagebar-area{backdrop-filter:saturate(180%) blur(16px);background:var(--f7-messagebar-textarea-bg-color);box-shadow:var(--f7-glass-shadow)}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{backdrop-filter:none;background:#0000;border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);box-shadow:none}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment+.messagebar-attachment{margin-right:8px}.ios .messagebar-attachment-delete{background:#7d7e80;border:2px solid #fff;box-shadow:0 0 2px #0003;height:20px;right:5px;top:5px;width:20px}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{background:#fff;height:2px;margin-left:-5px;margin-top:-1px;width:10px}.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;height:calc((var(--f7-messagebar-sheet-height) - 2px)/2);margin-right:1px;margin-top:1px;overflow:hidden;position:relative;width:calc((var(--f7-messagebar-sheet-height) - 2px)/2)}@media (orientation:landscape){.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/2);width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/2)}}.ios .messagebar-sheet-image .icon-checkbox,.ios .messagebar-sheet-image .icon-radio,.ios .messagebar-sheet-item .icon-checkbox,.ios .messagebar-sheet-item .icon-radio{bottom:8px;position:absolute;right:8px;z-index:1}.md .messagebar{--f7-toolbar-link-height:var(--f7-messagebar-height);background:var(--f7-messagebar-bg-color)}.md .messagebar:before{background-color:var(--f7-messagebar-border-color);bottom:auto;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:0;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 0;width:100%;z-index:15}.md .messagebar-attachments{border-bottom:1px solid var(--f7-messagebar-attachments-border-color);padding:16px 16px 0}.md .messagebar-attachment img{height:var(--f7-messagebar-attachment-height);object-fit:cover;object-position:center;width:var(--f7-messagebar-attachment-height)}.md .messagebar-attachment+.messagebar-attachment{margin-right:16px}.md .messagebar-attachments-visible .messagebar-attachments{background:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0}.md .messagebar-attachments-visible textarea{border-top-left-radius:0;border-top-right-radius:0}.md .messagebar-area{margin-bottom:8px;margin-top:8px;overflow:hidden}.md .messagebar-attachment-delete{background-color:var(--f7-md-inverse-surface);border:2px solid var(--f7-messagebar-textarea-bg-color);border-radius:24px;height:24px;right:-6px;top:-6px;width:24px}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{background:var(--f7-messagebar-textarea-bg-color);height:2px;margin-left:-6px;margin-top:-1px;width:12px}.md .messagebar-sheet-image,.md .messagebar-sheet-item{--f7-touch-ripple-color:#0000;border-radius:4px;box-sizing:border-box;flex-shrink:0;height:calc((var(--f7-messagebar-sheet-height) - 24px)/2);margin-right:8px;margin-top:8px;overflow:hidden;position:relative;width:calc((var(--f7-messagebar-sheet-height) - 24px)/2)}@media (orientation:landscape){.md .messagebar-sheet-image,.md .messagebar-sheet-item{height:calc((var(--f7-messagebar-sheet-landscape-height) - 24px)/2);width:calc((var(--f7-messagebar-sheet-landscape-height) - 8px)/2)}}.md .messagebar-sheet-image input:checked~img,.md .messagebar-sheet-item input:checked~img{transform:scale(.85)}.md .messagebar-sheet-image input:checked~.icon-checkbox,.md .messagebar-sheet-image input:checked~.icon-radio,.md .messagebar-sheet-item input:checked~.icon-checkbox,.md .messagebar-sheet-item input:checked~.icon-radio{transform:translate(-50%,-50%) scale(1)}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-image .icon-radio,.md .messagebar-sheet-item .icon-checkbox,.md .messagebar-sheet-item .icon-radio{align-items:center;border:none;border-radius:50%;display:flex;height:32px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.85);width:32px;z-index:1;--f7-checkbox-inactive-color:var(--f7-md-surface);--f7-checkbox-active-color:var(--f7-md-surface)}.md .messagebar-sheet-image .icon-checkbox:after,.md .messagebar-sheet-image .icon-radio:after,.md .messagebar-sheet-item .icon-checkbox:after,.md .messagebar-sheet-item .icon-radio:after{color:var(--f7-md-on-surface);font-size:18px;height:100%;left:0;line-height:32px;position:static;width:auto}

package/components/messagebar/messagebar-vars.less

@@ -1,6 +1,5 @@
 :root {
   --f7-messagebar-attachments-height: 155px;
-
   --f7-messagebar-sheet-height: 252px;
   --f7-messagebar-sheet-landscape-height: 192px;
   /*
@@ -15,36 +14,34 @@
   });
 }
 .ios-vars({
-  --f7-messagebar-height: 44px;
+  --f7-messagebar-height: 60px;
   --f7-messagebar-font-size: 17px;
-  --f7-messagebar-textarea-bg-color: transparent;
-  /*
-  --f7-messagebar-link-color: var(--f7-theme-color);
-  */
+  --f7-messagebar-textarea-bg-color: var(--f7-glass-bg-color);
+  --f7-messagebar-link-color: var(--f7-bars-text-color);
   --f7-messagebar-border-color: transparent;
-  --f7-messagebar-textarea-border-radius: 17px;
-  --f7-messagebar-textarea-padding: 6px 16px;
-  --f7-messagebar-textarea-height: 34px;
+  --f7-messagebar-textarea-border-radius: 24px;
+  --f7-messagebar-textarea-padding: 10px 16px 6px;
+  --f7-messagebar-textarea-height: 40px;
   --f7-messagebar-textarea-font-size: 17px;
   --f7-messagebar-textarea-line-height: 20px;
-  --f7-messagebar-sheet-bg-color: #d1d5da;
   --f7-messagebar-sheet-border-color: transparent;
-  --f7-messagebar-attachment-border-radius: 12px;
+  --f7-messagebar-attachment-border-radius: 20px;
   --f7-messagebar-attachment-height: 155px;
   --f7-messagebar-attachment-landscape-height: 120px;
+    --f7-messagebar-attachments-border-color: transparent;
+    --f7-messagebar-textarea-border: none;
   .light-vars({
+    --f7-messagebar-sheet-bg-color: #fff;
     --f7-messagebar-textarea-placeholder-color: rgba(0,0,0,0.4);
     --f7-messagebar-textarea-text-color: #000;
-    --f7-messagebar-textarea-border: 1px solid #c8c8cd;
-    --f7-messagebar-attachments-border-color: #c8c8cd;
+
     --f7-messagebar-bg-color: #fff;
     --f7-messagebar-bg-color-rgb: 255, 255, 255;
   });
   .dark-vars({
+    --f7-messagebar-sheet-bg-color: #000;
     --f7-messagebar-textarea-placeholder-color: rgba(255, 255, 255, 0.4);
     --f7-messagebar-textarea-text-color: #fff;
-    --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
-    --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
     --f7-messagebar-bg-color: var(--f7-bars-bg-color);
     --f7-messagebar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
   });

package/components/messagebar/messagebar.css

@@ -1 +1 @@
-:root{--f7-messagebar-attachments-height:155px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px}.ios{--f7-messagebar-height:44px;--f7-messagebar-font-size:17px;--f7-messagebar-textarea-bg-color:transparent;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:17px;--f7-messagebar-textarea-padding:6px 16px;--f7-messagebar-textarea-height:34px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-bg-color:#d1d5da;--f7-messagebar-sheet-border-color:transparent;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-textarea-placeholder-color:rgba(0, 0, 0, 0.4);--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}.ios .dark,.ios.dark{--f7-messagebar-textarea-placeholder-color:rgba(255, 255, 255, 0.4);--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-textarea-border:1px solid var(--f7-bars-border-color);--f7-messagebar-attachments-border-color:var(--f7-bars-border-color);--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.md{--f7-messagebar-height:64px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:12px 16px;--f7-messagebar-textarea-height:48px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid transparent;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:72px;--f7-messagebar-attachment-landscape-height:72px;--f7-messagebar-border-color:transparent;--f7-messagebar-attachments-border-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-messagebar-textarea-placeholder-color:var(--f7-md-on-surface-variant);--f7-messagebar-textarea-bg-color:var(--f7-md-surface-variant);--f7-messagebar-bg-color:var(--f7-md-surface);--f7-messagebar-textarea-text-color:var(--f7-md-on-surface);--f7-messagebar-sheet-bg-color:var(--f7-md-surface);--f7-messagebar-sheet-border-color:var(--f7-md-outline-variant);--f7-messagebar-link-color:var(--f7-md-on-surface)}.messagebar{transform:translate3d(0,0,0);background:var(--f7-messagebar-bg-color);height:auto;min-height:var(--f7-messagebar-height);font-size:var(--f7-messagebar-font-size);padding-bottom:var(--f7-safe-area-bottom);bottom:0}.messagebar:before{content:'';position:absolute;background-color:var(--f7-messagebar-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .messagebar{background-color:rgba(var(--f7-messagebar-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.messagebar.no-outline:before{display:none!important}.messagebar.toolbar-hidden:after{display:none!important}.messagebar .toolbar-inner{top:auto;position:relative;height:auto;bottom:auto;padding-left:calc(var(--f7-messagebar-inner-padding-left,var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));padding-right:calc(var(--f7-messagebar-inner-padding-right,var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right))}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{width:100%;flex-shrink:1;overflow:hidden;position:relative}.messagebar textarea{width:100%;flex-shrink:1;background-color:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius);padding:var(--f7-messagebar-textarea-padding);height:var(--f7-messagebar-textarea-height);color:var(--f7-messagebar-textarea-text-color);font-size:var(--f7-messagebar-textarea-font-size);line-height:var(--f7-messagebar-textarea-line-height);border:var(--f7-messagebar-textarea-border)}.messagebar textarea::placeholder{color:var(--f7-messagebar-textarea-placeholder-color)}.messagebar a.link{align-self:flex-end;flex-shrink:0;color:var(--f7-messagebar-link-color,var(--f7-theme-color))}.messagebar-attachments{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;font-size:0;white-space:nowrap;box-sizing:border-box;position:relative}.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments{display:none}.messagebar-attachment{background-size:cover;background-position:center;background-repeat:no-repeat;display:inline-block;vertical-align:middle;white-space:normal;height:var(--f7-messagebar-attachment-height);position:relative;border-radius:var(--f7-messagebar-attachment-border-radius)}@media (orientation:landscape){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{display:block;width:auto;height:100%;border-radius:var(--f7-messagebar-attachment-border-radius)}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:wrap;flex-direction:column;align-content:flex-start;height:var(--f7-messagebar-sheet-height);background-color:var(--f7-messagebar-sheet-bg-color);border-top:1px solid var(--f7-messagebar-sheet-border-color);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}@media (orientation:landscape){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image{background-size:cover;background-position:center;background-repeat:no-repeat}.messagebar-sheet-image>img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;transition-duration:.2s}.messagebar-attachment-delete{display:block;position:absolute;border-radius:50%;box-sizing:border-box;cursor:pointer}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{position:absolute;content:'';left:50%;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar a.link.icon-only:first-child{margin-left:-8px}.ios .messagebar a.link.icon-only:last-child{margin-right:-8px}.ios .messagebar a.link:not(.icon-only)+.messagebar-area{margin-left:8px}.ios .messagebar .messagebar-area+a.link:not(.icon-only){margin-left:8px}.ios .messagebar-area{margin-top:5px;margin-bottom:5px}.ios .messagebar-attachments{padding:5px;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment+.messagebar-attachment{margin-left:8px}.ios .messagebar-attachment-delete{right:5px;top:5px;width:20px;height:20px;background:#7d7e80;border:2px solid #fff;box-shadow:0px 0px 2px rgba(0,0,0,.2)}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{width:10px;height:2px;background:#fff;margin-left:-5px;margin-top:-1px}.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;margin-top:1px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 2px)/ 2);margin-left:1px}@media (orientation:landscape){.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2)}}.ios .messagebar-sheet-image .icon-checkbox,.ios .messagebar-sheet-image .icon-radio,.ios .messagebar-sheet-item .icon-checkbox,.ios .messagebar-sheet-item .icon-radio{position:absolute;right:8px;bottom:8px;z-index:1}.md .messagebar{--f7-toolbar-link-height:var(--f7-messagebar-height)}.md .messagebar-attachments{padding:16px 16px 0;border-bottom:1px solid var(--f7-messagebar-attachments-border-color)}.md .messagebar-attachment img{width:var(--f7-messagebar-attachment-height);height:var(--f7-messagebar-attachment-height);object-fit:cover;object-position:center}.md .messagebar-attachment+.messagebar-attachment{margin-left:16px}.md .messagebar-attachments-visible .messagebar-attachments{background:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0}.md .messagebar-attachments-visible textarea{border-top-left-radius:0;border-top-right-radius:0}.md .messagebar-area{margin-top:8px;margin-bottom:8px}.md .messagebar-attachment-delete{right:-6px;top:-6px;width:24px;height:24px;background-color:var(--f7-md-inverse-surface);border-radius:24px;border:2px solid var(--f7-messagebar-textarea-bg-color)}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{width:12px;height:2px;background:var(--f7-messagebar-textarea-bg-color);margin-left:-6px;margin-top:-1px}.md .messagebar-sheet-image,.md .messagebar-sheet-item{--f7-touch-ripple-color:transparent;box-sizing:border-box;flex-shrink:0;margin-top:8px;position:relative;overflow:hidden;height:calc((var(--f7-messagebar-sheet-height) - 24px)/ 2);width:calc((var(--f7-messagebar-sheet-height) - 24px)/ 2);border-radius:4px;margin-left:8px}@media (orientation:landscape){.md .messagebar-sheet-image,.md .messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 8px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 24px)/ 2)}}.md .messagebar-sheet-image input:checked~img,.md .messagebar-sheet-item input:checked~img{transform:scale(.85)}.md .messagebar-sheet-image input:checked~.icon-checkbox,.md .messagebar-sheet-image input:checked~.icon-radio,.md .messagebar-sheet-item input:checked~.icon-checkbox,.md .messagebar-sheet-item input:checked~.icon-radio{transform:translate(-50%,-50%) scale(1)}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-image .icon-radio,.md .messagebar-sheet-item .icon-checkbox,.md .messagebar-sheet-item .icon-radio{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);border:none;z-index:1;--f7-checkbox-inactive-color:var(--f7-md-surface);--f7-checkbox-active-color:var(--f7-md-surface)}.md .messagebar-sheet-image .icon-checkbox::after,.md .messagebar-sheet-image .icon-radio::after,.md .messagebar-sheet-item .icon-checkbox::after,.md .messagebar-sheet-item .icon-radio::after{color:var(--f7-md-on-surface);font-size:18px;width:auto;height:100%;line-height:32px;left:0;position:static}
+:root{--f7-messagebar-attachments-height:155px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px}.ios{--f7-messagebar-height:60px;--f7-messagebar-font-size:17px;--f7-messagebar-textarea-bg-color:var(--f7-glass-bg-color);--f7-messagebar-link-color:var(--f7-bars-text-color);--f7-messagebar-border-color:#0000;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:10px 16px 6px;--f7-messagebar-textarea-height:40px;--f7-messagebar-textarea-font-size:17px;--f7-messagebar-textarea-line-height:20px;--f7-messagebar-sheet-border-color:#0000;--f7-messagebar-attachment-border-radius:20px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-attachments-border-color:#0000;--f7-messagebar-textarea-border:none;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-textarea-placeholder-color:#0006;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}.ios .dark,.ios.dark{--f7-messagebar-sheet-bg-color:#000;--f7-messagebar-textarea-placeholder-color:#fff6;--f7-messagebar-textarea-text-color:#fff;--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.md{--f7-messagebar-height:64px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:24px;--f7-messagebar-textarea-padding:12px 16px;--f7-messagebar-textarea-height:48px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid #0000;--f7-messagebar-attachment-border-radius:12px;--f7-messagebar-attachment-height:72px;--f7-messagebar-attachment-landscape-height:72px;--f7-messagebar-border-color:#0000;--f7-messagebar-attachments-border-color:#0000}.md,.md .dark,.md [class*=color-]{--f7-messagebar-textarea-placeholder-color:var(--f7-md-on-surface-variant);--f7-messagebar-textarea-bg-color:var(--f7-md-surface-variant);--f7-messagebar-bg-color:var(--f7-md-surface);--f7-messagebar-textarea-text-color:var(--f7-md-on-surface);--f7-messagebar-sheet-bg-color:var(--f7-md-surface);--f7-messagebar-sheet-border-color:var(--f7-md-outline-variant);--f7-messagebar-link-color:var(--f7-md-on-surface)}.messagebar{bottom:0;font-size:var(--f7-messagebar-font-size);height:auto;min-height:var(--f7-messagebar-height);padding-bottom:var(--f7-safe-area-bottom);transform:translateZ(0)}.messagebar.no-outline:before,.messagebar.toolbar-hidden:after{display:none!important}.messagebar .toolbar-inner{bottom:auto;height:auto;padding-left:calc(var(--f7-messagebar-inner-padding-left, var(--f7-toolbar-inner-padding-left)) + var(--f7-safe-area-left));padding-right:calc(var(--f7-messagebar-inner-padding-right, var(--f7-toolbar-inner-padding-right)) + var(--f7-safe-area-right));position:relative;top:auto}.messagebar.messagebar-sheet-visible>.toolbar-inner{bottom:0}.messagebar .messagebar-area{flex-shrink:1;min-width:0;position:relative;width:100%}.messagebar textarea{background-color:var(--f7-messagebar-textarea-bg-color);border:var(--f7-messagebar-textarea-border);border-radius:var(--f7-messagebar-textarea-border-radius);color:var(--f7-messagebar-textarea-text-color);flex-shrink:1;font-size:var(--f7-messagebar-textarea-font-size);height:var(--f7-messagebar-textarea-height);line-height:var(--f7-messagebar-textarea-line-height);padding:var(--f7-messagebar-textarea-padding);width:100%}.messagebar textarea::placeholder{color:var(--f7-messagebar-textarea-placeholder-color)}.messagebar .toolbar-pane,.messagebar a.link{align-self:flex-end;color:var(--f7-messagebar-link-color,var(--f7-theme-color));flex-shrink:0}.messagebar-attachments{overflow:auto;width:100%;-webkit-overflow-scrolling:touch;box-sizing:border-box;font-size:0;position:relative;white-space:nowrap}.messagebar:not(.messagebar-attachments-visible) .messagebar-attachments{display:none}.messagebar-attachment{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:var(--f7-messagebar-attachment-border-radius);display:inline-block;height:var(--f7-messagebar-attachment-height);position:relative;vertical-align:middle;white-space:normal}@media (orientation:landscape){.messagebar-attachment{height:var(--f7-messagebar-attachment-landscape-height)}}.messagebar-attachment img{border-radius:var(--f7-messagebar-attachment-border-radius);display:block;height:100%;width:auto}.messagebar-sheet{overflow:auto;-webkit-overflow-scrolling:touch;align-content:flex-start;background-color:var(--f7-messagebar-sheet-bg-color);border-top:1px solid var(--f7-messagebar-sheet-border-color);display:flex;flex-direction:column;flex-wrap:wrap;height:var(--f7-messagebar-sheet-height);padding-left:var(--f7-safe-area-left);padding-right:var(--f7-safe-area-right)}@media (orientation:landscape){.messagebar-sheet{height:var(--f7-messagebar-sheet-landscape-height)}}.messagebar-sheet-image{background-position:50%;background-repeat:no-repeat;background-size:cover}.messagebar-sheet-image>img{border-radius:inherit;height:100%;object-fit:cover;object-position:center;transition-duration:.2s;width:100%}.messagebar-attachment-delete{border-radius:50%;box-sizing:border-box;cursor:pointer;display:block;position:absolute}.messagebar-attachment-delete:after,.messagebar-attachment-delete:before{content:"";left:50%;position:absolute;top:50%}.messagebar-attachment-delete:after{transform:rotate(45deg)}.messagebar-attachment-delete:before{transform:rotate(-45deg)}.messagebar:not(.messagebar-sheet-visible) .messagebar-sheet{display:none}.messagebar~*{--f7-page-toolbar-bottom-offset:var(--f7-messagebar-height)}.ios .messagebar :is(a,button):is(.icon-only,:has(i:only-child),:has(svg:only-child)){min-height:var(--f7-messagebar-textarea-height);min-width:var(--f7-messagebar-textarea-height)}.ios .messagebar textarea{backdrop-filter:var(--f7-glass-backdrop);box-shadow:var(--f7-glass-shadow);min-height:var(--f7-messagebar-textarea-height)}.ios .messagebar-attachments{border:1px solid var(--f7-messagebar-attachments-border-color);border-bottom:none;border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0;padding:5px}.ios .messagebar-area,.ios .messagebar-attachments-visible .messagebar-area{border-radius:var(--f7-messagebar-textarea-border-radius)}.ios .messagebar-attachments-visible .messagebar-area{backdrop-filter:saturate(180%) blur(16px);background:var(--f7-messagebar-textarea-bg-color);box-shadow:var(--f7-glass-shadow)}.ios .messagebar-attachments-visible .messagebar-attachments+textarea{backdrop-filter:none;background:#0000;border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius);box-shadow:none}.ios .messagebar-attachment{font-size:14px}.ios .messagebar-attachment+.messagebar-attachment{margin-left:8px}.ios .messagebar-attachment-delete{background:#7d7e80;border:2px solid #fff;box-shadow:0 0 2px #0003;height:20px;right:5px;top:5px;width:20px}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{background:#fff;height:2px;margin-left:-5px;margin-top:-1px;width:10px}.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{box-sizing:border-box;flex-shrink:0;height:calc((var(--f7-messagebar-sheet-height) - 2px)/2);margin-left:1px;margin-top:1px;overflow:hidden;position:relative;width:calc((var(--f7-messagebar-sheet-height) - 2px)/2)}@media (orientation:landscape){.ios .messagebar-sheet-image,.ios .messagebar-sheet-item{height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/2);width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/2)}}.ios .messagebar-sheet-image .icon-checkbox,.ios .messagebar-sheet-image .icon-radio,.ios .messagebar-sheet-item .icon-checkbox,.ios .messagebar-sheet-item .icon-radio{bottom:8px;position:absolute;right:8px;z-index:1}.md .messagebar{--f7-toolbar-link-height:var(--f7-messagebar-height);background:var(--f7-messagebar-bg-color)}.md .messagebar:before{background-color:var(--f7-messagebar-border-color);bottom:auto;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:0;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 0;width:100%;z-index:15}.md .messagebar-attachments{border-bottom:1px solid var(--f7-messagebar-attachments-border-color);padding:16px 16px 0}.md .messagebar-attachment img{height:var(--f7-messagebar-attachment-height);object-fit:cover;object-position:center;width:var(--f7-messagebar-attachment-height)}.md .messagebar-attachment+.messagebar-attachment{margin-left:16px}.md .messagebar-attachments-visible .messagebar-attachments{background:var(--f7-messagebar-textarea-bg-color);border-radius:var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius) 0 0}.md .messagebar-attachments-visible textarea{border-top-left-radius:0;border-top-right-radius:0}.md .messagebar-area{margin-bottom:8px;margin-top:8px;overflow:hidden}.md .messagebar-attachment-delete{background-color:var(--f7-md-inverse-surface);border:2px solid var(--f7-messagebar-textarea-bg-color);border-radius:24px;height:24px;right:-6px;top:-6px;width:24px}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{background:var(--f7-messagebar-textarea-bg-color);height:2px;margin-left:-6px;margin-top:-1px;width:12px}.md .messagebar-sheet-image,.md .messagebar-sheet-item{--f7-touch-ripple-color:#0000;border-radius:4px;box-sizing:border-box;flex-shrink:0;height:calc((var(--f7-messagebar-sheet-height) - 24px)/2);margin-left:8px;margin-top:8px;overflow:hidden;position:relative;width:calc((var(--f7-messagebar-sheet-height) - 24px)/2)}@media (orientation:landscape){.md .messagebar-sheet-image,.md .messagebar-sheet-item{height:calc((var(--f7-messagebar-sheet-landscape-height) - 24px)/2);width:calc((var(--f7-messagebar-sheet-landscape-height) - 8px)/2)}}.md .messagebar-sheet-image input:checked~img,.md .messagebar-sheet-item input:checked~img{transform:scale(.85)}.md .messagebar-sheet-image input:checked~.icon-checkbox,.md .messagebar-sheet-image input:checked~.icon-radio,.md .messagebar-sheet-item input:checked~.icon-checkbox,.md .messagebar-sheet-item input:checked~.icon-radio{transform:translate(-50%,-50%) scale(1)}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-image .icon-radio,.md .messagebar-sheet-item .icon-checkbox,.md .messagebar-sheet-item .icon-radio{align-items:center;border:none;border-radius:50%;display:flex;height:32px;justify-content:center;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.85);width:32px;z-index:1;--f7-checkbox-inactive-color:var(--f7-md-surface);--f7-checkbox-active-color:var(--f7-md-surface)}.md .messagebar-sheet-image .icon-checkbox:after,.md .messagebar-sheet-image .icon-radio:after,.md .messagebar-sheet-item .icon-checkbox:after,.md .messagebar-sheet-item .icon-radio:after{color:var(--f7-md-on-surface);font-size:18px;height:100%;left:0;line-height:32px;position:static;width:auto}

package/components/messagebar/messagebar.less

@@ -3,14 +3,12 @@
 
 .messagebar {
   transform: translate3d(0, 0, 0);
-  background: var(--f7-messagebar-bg-color);
   height: auto;
   min-height: var(--f7-messagebar-height);
   font-size: var(--f7-messagebar-font-size);
   padding-bottom: var(--f7-safe-area-bottom);
   bottom: 0;
-  .hairline(top, var(--f7-messagebar-border-color));
-  .ios-translucent-bars(var(--f7-messagebar-bg-color-rgb));
+
   &.no-outline {
     &:before {
       display: none !important;
@@ -44,7 +42,7 @@
   .messagebar-area {
     width: 100%;
     flex-shrink: 1;
-    overflow: hidden;
+    min-width: 0;
     position: relative;
   }
   textarea {
@@ -62,7 +60,8 @@
       color: var(--f7-messagebar-textarea-placeholder-color);
     }
   }
-  a.link {
+  a.link,
+  .toolbar-pane {
     align-self: flex-end;
     flex-shrink: 0;
     color: var(--f7-messagebar-link-color, var(--f7-theme-color));

package/components/messages/messages-class.js

@@ -1,14 +1,11 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import $ from '../../shared/dom7.js';
 import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
 import $jsx from '../../shared/$jsx.js';
 class Messages extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const m = this;
     const defaults = {
@@ -136,55 +133,49 @@ class Messages extends Framework7Class {
       class: "message-footer"
     }, message.footer)));
   }
-  renderMessages(messagesToRender, method) {
-    if (messagesToRender === void 0) {
-      messagesToRender = this.messages;
-    }
-    if (method === void 0) {
-      method = this.params.newMessagesFirst ? 'prepend' : 'append';
-    }
+  renderMessages(messagesToRender = this.messages, method = this.params.newMessagesFirst ? 'prepend' : 'append') {
     const m = this;
     const html = messagesToRender.map(message => m.renderMessage(message)).join('');
     m.$el[method](html);
   }
-  isFirstMessage() {
+  isFirstMessage(...args) {
     const m = this;
-    if (m.params.firstMessageRule) return m.params.firstMessageRule(...arguments);
+    if (m.params.firstMessageRule) return m.params.firstMessageRule(...args);
     return false;
   }
-  isLastMessage() {
+  isLastMessage(...args) {
     const m = this;
-    if (m.params.lastMessageRule) return m.params.lastMessageRule(...arguments);
+    if (m.params.lastMessageRule) return m.params.lastMessageRule(...args);
     return false;
   }
-  isTailMessage() {
+  isTailMessage(...args) {
     const m = this;
-    if (m.params.tailMessageRule) return m.params.tailMessageRule(...arguments);
+    if (m.params.tailMessageRule) return m.params.tailMessageRule(...args);
     return false;
   }
-  isSameNameMessage() {
+  isSameNameMessage(...args) {
     const m = this;
-    if (m.params.sameNameMessageRule) return m.params.sameNameMessageRule(...arguments);
+    if (m.params.sameNameMessageRule) return m.params.sameNameMessageRule(...args);
     return false;
   }
-  isSameHeaderMessage() {
+  isSameHeaderMessage(...args) {
     const m = this;
-    if (m.params.sameHeaderMessageRule) return m.params.sameHeaderMessageRule(...arguments);
+    if (m.params.sameHeaderMessageRule) return m.params.sameHeaderMessageRule(...args);
     return false;
   }
-  isSameFooterMessage() {
+  isSameFooterMessage(...args) {
     const m = this;
-    if (m.params.sameFooterMessageRule) return m.params.sameFooterMessageRule(...arguments);
+    if (m.params.sameFooterMessageRule) return m.params.sameFooterMessageRule(...args);
     return false;
   }
-  isSameAvatarMessage() {
+  isSameAvatarMessage(...args) {
     const m = this;
-    if (m.params.sameAvatarMessageRule) return m.params.sameAvatarMessageRule(...arguments);
+    if (m.params.sameAvatarMessageRule) return m.params.sameAvatarMessageRule(...args);
     return false;
   }
-  isCustomClassMessage() {
+  isCustomClassMessage(...args) {
     const m = this;
-    if (m.params.customClassMessageRule) return m.params.customClassMessageRule(...arguments);
+    if (m.params.customClassMessageRule) return m.params.customClassMessageRule(...args);
     return undefined;
   }
   layout() {
@@ -239,10 +230,7 @@ class Messages extends Framework7Class {
     m.messages = [];
     m.$el.html('');
   }
-  removeMessage(messageToRemove, layout) {
-    if (layout === void 0) {
-      layout = true;
-    }
+  removeMessage(messageToRemove, layout = true) {
     const m = this;
     // Index or El
     let index;
@@ -265,10 +253,7 @@ class Messages extends Framework7Class {
     if (m.params.autoLayout && layout) m.layout();
     return m;
   }
-  removeMessages(messagesToRemove, layout) {
-    if (layout === void 0) {
-      layout = true;
-    }
+  removeMessages(messagesToRemove, layout = true) {
     const m = this;
     if (Array.isArray(messagesToRemove)) {
       const messagesToRemoveEls = [];
@@ -286,14 +271,11 @@ class Messages extends Framework7Class {
     if (m.params.autoLayout && layout) m.layout();
     return m;
   }
-  addMessage() {
+  addMessage(...args) {
     const m = this;
     let messageToAdd;
     let animate;
     let method;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
     if (typeof args[1] === 'boolean') {
       [messageToAdd, animate, method] = args;
     } else {
@@ -324,14 +306,11 @@ class Messages extends Framework7Class {
       scrollBefore
     };
   }
-  addMessages() {
+  addMessages(...args) {
     const m = this;
     let messagesToAdd;
     let animate;
     let method;
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
     if (typeof args[1] === 'boolean') {
       [messagesToAdd, animate, method] = args;
     } else {
@@ -392,10 +371,7 @@ class Messages extends Framework7Class {
     }
     return m;
   }
-  showTyping(message) {
-    if (message === void 0) {
-      message = {};
-    }
+  showTyping(message = {}) {
     const m = this;
     const typingMessage = m.messages.filter(el => el.isTyping)[0];
     if (typingMessage) {
@@ -448,10 +424,7 @@ class Messages extends Framework7Class {
       m.scroll(animate ? undefined : 0);
     }
   }
-  scroll(duration, scrollTop) {
-    if (duration === void 0) {
-      duration = 300;
-    }
+  scroll(duration = 300, scrollTop) {
     const m = this;
     const currentScroll = m.pageContentEl.scrollTop;
     let newScrollTop;

package/components/messages/messages-ios.less

@@ -1,4 +1,8 @@
 .ios {
+  .messages {
+    padding-bottom: 16px;
+    box-sizing: border-box;
+  }
   .messages-title,
   .message-header,
   .message-footer,
@@ -42,7 +46,7 @@
     margin-top: 3px;
   }
   .message-received {
-    margin-left: calc(10px + var(--f7-safe-area-left));
+    margin-left: calc(16px + var(--f7-safe-area-left));
     .message-header,
     .message-footer,
     .message-name {
@@ -70,7 +74,7 @@
     }
   }
   .message-sent {
-    margin-right: calc(10px + var(--f7-safe-area-right));
+    margin-right: calc(16px + var(--f7-safe-area-right));
     .message-header,
     .message-footer,
     .message-name {