framework7 7.0.8 → 8.0.0-beta.1

package/components/messagebar/messagebar-rtl.css

@@ -1 +1 @@
-:root{--f7-messagebar-shadow-image:none;--f7-messagebar-textarea-bg-color:transparent;--f7-messagebar-attachments-height:155px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}:root .dark,:root.dark{--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.ios{--f7-messagebar-height:44px;--f7-messagebar-font-size:17px;--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-attachment-border-radius:12px;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd}.ios .dark,.ios.dark{--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)}.md{--f7-messagebar-height:48px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:0px;--f7-messagebar-textarea-padding:5px 8px;--f7-messagebar-textarea-height:32px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid transparent;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-attachment-border-radius:4px;--f7-messagebar-link-color:#333;--f7-messagebar-border-color:#d1d1d1;--f7-messagebar-textarea-text-color:#333;--f7-messagebar-attachments-border-color:#ddd}.md .dark,.md.dark{--f7-messagebar-border-color:transparent;--f7-messagebar-link-color:rgba(255, 255, 255, 0.87);--f7-messagebar-textarea-text-color:rgba(255, 255, 255, 0.87);--f7-messagebar-attachments-border-color:rgba(255, 255, 255, 0.2)}.aurora{--f7-messagebar-height:48px;--f7-messagebar-font-size:16px;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:8px;--f7-messagebar-textarea-padding:4px 8px;--f7-messagebar-textarea-height:32px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-attachment-border-radius:8px;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd}.aurora .dark,.aurora.dark{--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)}.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)))}.messagebar:after{content:'';position:absolute;right:0;width:100%;bottom:100%;height:8px;top:auto;pointer-events:none;background:var(--f7-messagebar-shadow-image);transform:translate3d(0,0,0)}@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-border:before,.messagebar.no-hairline:before{display:none!important}.messagebar.no-shadow:after,.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 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-attachment+.messagebar-attachment{margin-right:8px}.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);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,.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){.messagebar-sheet-image,.messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2)}}.messagebar-sheet-image .icon-checkbox,.messagebar-sheet-image .icon-radio,.messagebar-sheet-item .icon-checkbox,.messagebar-sheet-item .icon-radio{position:absolute;right:8px;bottom:8px}.messagebar-sheet-image{background-size:cover;background-position:center;background-repeat:no-repeat}.messagebar-attachment-delete{display:block;position:absolute;border-radius:50%;box-sizing:border-box;cursor:pointer;box-shadow:0px 0px 2px rgba(0,0,0,.2)}.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-delete{right:5px;top:5px;width:20px;height:20px;background:#7d7e80;border:2px solid #fff}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{width:10px;height:2px;background:#fff;margin-left:-5px;margin-top:-1px}.md .messagebar-attachments{padding:8px;border-bottom:1px solid var(--f7-messagebar-attachments-border-color)}.md .messagebar-area{margin-top:8px;margin-bottom:8px}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-item .icon-checkbox{border-color:#fff;background:rgba(255,255,255,.25);box-shadow:0px 0px 10px rgba(0,0,0,.5)}.md .messagebar-attachment-delete{right:8px;top:8px;width:24px;height:24px;background-color:var(--f7-theme-color);border-radius:4px}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{width:14px;height:2px;background:#fff;margin-left:-7px;margin-top:-1px}.aurora .messagebar a.link+.messagebar-area{margin-left:8px}.aurora .messagebar .messagebar-area+a.link{margin-left:8px}.aurora .messagebar-area{margin-top:8px;margin-bottom:8px}.aurora .messagebar-sheet-image .icon-checkbox,.aurora .messagebar-sheet-item .icon-checkbox{border-color:#fff;background:rgba(255,255,255,.25);box-shadow:0px 0px 10px rgba(0,0,0,.5)}.aurora .messagebar-attachments{padding:8px;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}.aurora .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.aurora .messagebar-attachment{font-size:14px}.aurora .messagebar-attachment-delete{right:8px;top:8px;width:24px;height:24px;background-color:var(--f7-theme-color)}.aurora .messagebar-attachment-delete:after,.aurora .messagebar-attachment-delete:before{width:14px;height:2px;background:#fff;margin-left:-7px;margin-top:-1px}
+: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-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-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-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 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}

package/components/messagebar/messagebar-vars.less

@@ -1,9 +1,6 @@
 :root {
-  --f7-messagebar-shadow-image: none;
-  --f7-messagebar-textarea-bg-color: transparent;
   --f7-messagebar-attachments-height: 155px;
-  --f7-messagebar-attachment-height: 155px;
-  --f7-messagebar-attachment-landscape-height: 120px;
+
   --f7-messagebar-sheet-height: 252px;
   --f7-messagebar-sheet-landscape-height: 192px;
   /*
@@ -11,17 +8,16 @@
   --f7-messagebar-inner-padding-right: var(--f7-toolbar-inner-padding-right);
   */
   .light-vars({
-    --f7-messagebar-bg-color: #fff;
-    --f7-messagebar-bg-color-rgb: 255, 255, 255;
+
   });
   .dark-vars({
-    --f7-messagebar-bg-color: var(--f7-bars-bg-color);
-    --f7-messagebar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+
   });
 }
 .ios-vars({
   --f7-messagebar-height: 44px;
   --f7-messagebar-font-size: 17px;
+  --f7-messagebar-textarea-bg-color: transparent;
   /*
   --f7-messagebar-link-color: var(--f7-theme-color);
   */
@@ -32,64 +28,45 @@
   --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;
   .light-vars({
     --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-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-vars({
-  --f7-messagebar-height: 48px;
+  --f7-messagebar-height: 64px;
   --f7-messagebar-font-size: 16px;
-  --f7-messagebar-textarea-border-radius: 0px;
-  --f7-messagebar-textarea-padding: 5px 8px;
-  --f7-messagebar-textarea-height: 32px;
+  --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-sheet-bg-color: #fff;
-  --f7-messagebar-attachment-border-radius: 4px;
-  .light-vars({
-    --f7-messagebar-link-color: #333;
-    --f7-messagebar-border-color: #d1d1d1;
-    --f7-messagebar-textarea-text-color: #333;
-    --f7-messagebar-attachments-border-color: #ddd;
-  });
-  .dark-vars({
-    --f7-messagebar-border-color: transparent;
-    --f7-messagebar-link-color: rgba(255,255,255,0.87);
-    --f7-messagebar-textarea-text-color: rgba(255,255,255,0.87);
-    --f7-messagebar-attachments-border-color: rgba(255,255,255,0.2);
-  });
-});
-.aurora-vars({
-  --f7-messagebar-height: 48px;
-  --f7-messagebar-font-size: 16px;
-  /*
-  --f7-messagebar-link-color: var(--f7-theme-color);
-  */
+  --f7-messagebar-attachment-border-radius: 12px;
+  --f7-messagebar-attachment-height: 72px;
+  --f7-messagebar-attachment-landscape-height: 72px;
   --f7-messagebar-border-color: transparent;
-  --f7-messagebar-textarea-border-radius: 8px;
-  --f7-messagebar-textarea-padding: 4px 8px;
-  --f7-messagebar-textarea-height: 32px;
-  --f7-messagebar-textarea-font-size: 16px;
-  --f7-messagebar-textarea-line-height: 22px;
-  --f7-messagebar-sheet-bg-color: #fff;
-  --f7-messagebar-attachment-border-radius: 8px;
-  .light-vars({
-    --f7-messagebar-textarea-text-color: #000;
-    --f7-messagebar-textarea-border: 1px solid #c8c8cd;
-    --f7-messagebar-attachments-border-color: #c8c8cd;
-  });
-  .dark-vars({
-    --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-attachments-border-color: transparent;
+});
+.md-color-vars({
+  --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);
 });

package/components/messagebar/messagebar.css

@@ -1 +1 @@
-:root{--f7-messagebar-shadow-image:none;--f7-messagebar-textarea-bg-color:transparent;--f7-messagebar-attachments-height:155px;--f7-messagebar-attachment-height:155px;--f7-messagebar-attachment-landscape-height:120px;--f7-messagebar-sheet-height:252px;--f7-messagebar-sheet-landscape-height:192px;--f7-messagebar-bg-color:#fff;--f7-messagebar-bg-color-rgb:255,255,255}:root .dark,:root.dark{--f7-messagebar-bg-color:var(--f7-bars-bg-color);--f7-messagebar-bg-color-rgb:var(--f7-bars-bg-color-rgb)}.ios{--f7-messagebar-height:44px;--f7-messagebar-font-size:17px;--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-attachment-border-radius:12px;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd}.ios .dark,.ios.dark{--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)}.md{--f7-messagebar-height:48px;--f7-messagebar-font-size:16px;--f7-messagebar-textarea-border-radius:0px;--f7-messagebar-textarea-padding:5px 8px;--f7-messagebar-textarea-height:32px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-textarea-border:1px solid transparent;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-attachment-border-radius:4px;--f7-messagebar-link-color:#333;--f7-messagebar-border-color:#d1d1d1;--f7-messagebar-textarea-text-color:#333;--f7-messagebar-attachments-border-color:#ddd}.md .dark,.md.dark{--f7-messagebar-border-color:transparent;--f7-messagebar-link-color:rgba(255, 255, 255, 0.87);--f7-messagebar-textarea-text-color:rgba(255, 255, 255, 0.87);--f7-messagebar-attachments-border-color:rgba(255, 255, 255, 0.2)}.aurora{--f7-messagebar-height:48px;--f7-messagebar-font-size:16px;--f7-messagebar-border-color:transparent;--f7-messagebar-textarea-border-radius:8px;--f7-messagebar-textarea-padding:4px 8px;--f7-messagebar-textarea-height:32px;--f7-messagebar-textarea-font-size:16px;--f7-messagebar-textarea-line-height:22px;--f7-messagebar-sheet-bg-color:#fff;--f7-messagebar-attachment-border-radius:8px;--f7-messagebar-textarea-text-color:#000;--f7-messagebar-textarea-border:1px solid #c8c8cd;--f7-messagebar-attachments-border-color:#c8c8cd}.aurora .dark,.aurora.dark{--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)}.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)))}.messagebar:after{content:'';position:absolute;right:0;width:100%;bottom:100%;height:8px;top:auto;pointer-events:none;background:var(--f7-messagebar-shadow-image);transform:translate3d(0,0,0)}@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-border:before,.messagebar.no-hairline:before{display:none!important}.messagebar.no-shadow:after,.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 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-attachment+.messagebar-attachment{margin-left:8px}.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);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,.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){.messagebar-sheet-image,.messagebar-sheet-item{width:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2);height:calc((var(--f7-messagebar-sheet-landscape-height) - 2px)/ 2)}}.messagebar-sheet-image .icon-checkbox,.messagebar-sheet-image .icon-radio,.messagebar-sheet-item .icon-checkbox,.messagebar-sheet-item .icon-radio{position:absolute;right:8px;bottom:8px}.messagebar-sheet-image{background-size:cover;background-position:center;background-repeat:no-repeat}.messagebar-attachment-delete{display:block;position:absolute;border-radius:50%;box-sizing:border-box;cursor:pointer;box-shadow:0px 0px 2px rgba(0,0,0,.2)}.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-delete{right:5px;top:5px;width:20px;height:20px;background:#7d7e80;border:2px solid #fff}.ios .messagebar-attachment-delete:after,.ios .messagebar-attachment-delete:before{width:10px;height:2px;background:#fff;margin-left:-5px;margin-top:-1px}.md .messagebar-attachments{padding:8px;border-bottom:1px solid var(--f7-messagebar-attachments-border-color)}.md .messagebar-area{margin-top:8px;margin-bottom:8px}.md .messagebar-sheet-image .icon-checkbox,.md .messagebar-sheet-item .icon-checkbox{border-color:#fff;background:rgba(255,255,255,.25);box-shadow:0px 0px 10px rgba(0,0,0,.5)}.md .messagebar-attachment-delete{right:8px;top:8px;width:24px;height:24px;background-color:var(--f7-theme-color);border-radius:4px}.md .messagebar-attachment-delete:after,.md .messagebar-attachment-delete:before{width:14px;height:2px;background:#fff;margin-left:-7px;margin-top:-1px}.aurora .messagebar a.link+.messagebar-area{margin-left:8px}.aurora .messagebar .messagebar-area+a.link{margin-left:8px}.aurora .messagebar-area{margin-top:8px;margin-bottom:8px}.aurora .messagebar-sheet-image .icon-checkbox,.aurora .messagebar-sheet-item .icon-checkbox{border-color:#fff;background:rgba(255,255,255,.25);box-shadow:0px 0px 10px rgba(0,0,0,.5)}.aurora .messagebar-attachments{padding:8px;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}.aurora .messagebar-attachments-visible .messagebar-attachments+textarea{border-radius:0 0 var(--f7-messagebar-textarea-border-radius) var(--f7-messagebar-textarea-border-radius)}.aurora .messagebar-attachment{font-size:14px}.aurora .messagebar-attachment-delete{right:8px;top:8px;width:24px;height:24px;background-color:var(--f7-theme-color)}.aurora .messagebar-attachment-delete:after,.aurora .messagebar-attachment-delete:before{width:14px;height:2px;background:#fff;margin-left:-7px;margin-top:-1px}
+: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-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-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-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 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}

package/components/messagebar/messagebar.js

@@ -7,7 +7,6 @@ export default {
   static: {
     Messagebar
   },
-
   create() {
     const app = this;
     app.messagebar = ConstructorMethods({
@@ -18,7 +17,6 @@ export default {
       addMethods: 'clear getValue setValue setPlaceholder resizePage focus blur attachmentsCreate attachmentsShow attachmentsHide attachmentsToggle renderAttachments sheetCreate sheetShow sheetHide sheetToggle'.split(' ')
     });
   },
-
   on: {
     tabBeforeRemove(tabEl) {
       const app = this;
@@ -26,7 +24,6 @@ export default {
         app.messagebar.destroy(messagebarEl);
       });
     },
-
     tabMounted(tabEl) {
       const app = this;
       $(tabEl).find('.messagebar-init').each(messagebarEl => {
@@ -35,14 +32,12 @@ export default {
         }, $(messagebarEl).dataset()));
       });
     },
-
     pageBeforeRemove(page) {
       const app = this;
       page.$el.find('.messagebar-init').each(messagebarEl => {
         app.messagebar.destroy(messagebarEl);
       });
     },
-
     pageInit(page) {
       const app = this;
       page.$el.find('.messagebar-init').each(messagebarEl => {
@@ -51,7 +46,6 @@ export default {
         }, $(messagebarEl).dataset()));
       });
     }
-
   },
   vnode: {
     'messagebar-init': {
@@ -62,13 +56,11 @@ export default {
           el: messagebarEl
         }, $(messagebarEl).dataset()));
       },
-
       destroy(vnode) {
         const app = this;
         const messagebarEl = vnode.elm;
         app.messagebar.destroy(messagebarEl);
       }
-
     }
   }
 };

package/components/messagebar/messagebar.less

@@ -10,15 +10,12 @@
   padding-bottom: var(--f7-safe-area-bottom);
   bottom: 0;
   .hairline(top, var(--f7-messagebar-border-color));
-  .bar-shadow-top(var(--f7-messagebar-shadow-image));
   .ios-translucent-bars(var(--f7-messagebar-bg-color-rgb));
-  &.no-hairline,
-  &.no-border {
+  &.no-outline {
     &:before {
       display: none !important;
     }
   }
-  &.no-shadow,
   &.toolbar-hidden {
     &:after {
       display: none !important;
@@ -98,14 +95,6 @@
     height: 100%;
     border-radius: var(--f7-messagebar-attachment-border-radius);
   }
-  + .messagebar-attachment {
-    .ltr({
-      margin-left: 8px;
-    });
-    .rtl({
-      margin-right: 8px;
-    });
-  }
 }
 .messagebar-sheet {
   .scrollable();
@@ -115,42 +104,26 @@
   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) {
     height: var(--f7-messagebar-sheet-landscape-height);
   }
 }
-.messagebar-sheet-image,
-.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);
-  .ltr({
-    margin-left: 1px;
-  });
-  .rtl({
-    margin-right: 1px;
-  });
-  @media (orientation: landscape) {
-    width: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
-    height: calc((var(--f7-messagebar-sheet-landscape-height) - 2px) / 2);
-  }
-  .icon-checkbox,
-  .icon-radio {
-    position: absolute;
-    right: 8px;
-    bottom: 8px;
-  }
-}
+
 .messagebar-sheet-image {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
+  > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    border-radius: inherit;
+    transition-duration: 200ms;
+  }
 }
 .messagebar-attachment-delete {
   display: block;
@@ -158,7 +131,6 @@
   border-radius: 50%;
   box-sizing: border-box;
   cursor: pointer;
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
   &:after,
   &:before {
     position: absolute;
@@ -185,6 +157,3 @@
 .if-md-theme({
   @import './messagebar-md.less';
 });
-.if-aurora-theme({
-  @import './messagebar-aurora.less';
-});