framework7 7.0.8 → 8.0.0-beta.1

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;--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}:root .dark,:root.dark{--f7-login-screen-bg-color:#121212;--f7-login-screen-content-bg-color:#121212}.ios{--f7-login-screen-blocks-margin-vertical:25px}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-blocks-margin-vertical:24px}.aurora{--f7-login-screen-blocks-margin-vertical:16px}.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);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:.4s}.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 .list-button,.login-screen-page .list-button{text-align:center;color:var(--f7-login-screen-list-button-text-color,var(--f7-theme-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{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}

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

@@ -5,7 +5,6 @@ export default {
   static: {
     LoginScreen
   },
-
   create() {
     const app = this;
     app.loginScreen = ModalMethods({
@@ -14,13 +13,11 @@ export default {
       defaultSelector: '.login-screen.modal-in'
     });
   },
-
   clicks: {
     '.login-screen-open': function openLoginScreen($clickedEl, data) {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.loginScreen.open(data.loginScreen, data.animate, $clickedEl);
     },
@@ -28,7 +25,6 @@ export default {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.loginScreen.close(data.loginScreen, data.animate, $clickedEl);
     }

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

@@ -12,10 +12,11 @@
   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;
   &.modal-in,
   &.modal-out {
-    transition-duration: 400ms;
+    transition-duration: var(--f7-login-screen-transition-duration);
   }
   &.not-animated {
     transition-duration: 0ms;
@@ -35,10 +36,6 @@
 }
 .login-screen-content,
 .login-screen-page {
-  .list-button {
-    text-align: center;
-    color: var(--f7-login-screen-list-button-text-color, var(--f7-theme-color));
-  }
   .login-screen-title,
   .list,
   .block {
@@ -101,6 +98,3 @@
 .if-md-theme({
   @import './login-screen-md.less';
 });
-.if-aurora-theme({
-  @import './login-screen-aurora.less';
-});

package/components/messagebar/messagebar-class.js

@@ -1,13 +1,11 @@
 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 = {};
     }
-
     super(params, [app]);
     const messagebar = this;
     const defaults = {
@@ -19,37 +17,39 @@ class Messagebar extends Framework7Class {
       renderAttachment: undefined,
       maxHeight: null,
       resizePage: true
-    }; // Extend defaults with modules params
+    };
 
+    // Extend defaults with modules params
     messagebar.useModulesParams(defaults);
-    messagebar.params = extend(defaults, params); // El
+    messagebar.params = extend(defaults, params);
 
+    // El
     const $el = $(messagebar.params.el);
     if ($el.length === 0) return messagebar;
     if ($el[0].f7Messagebar) return $el[0].f7Messagebar;
-    $el[0].f7Messagebar = messagebar; // Page and PageContent
+    $el[0].f7Messagebar = messagebar;
 
+    // Page and PageContent
     const $pageEl = $el.parents('.page').eq(0);
-    const $pageContentEl = $pageEl.find('.page-content').eq(0); // Area
+    const $pageContentEl = $pageEl.find('.page-content').eq(0);
 
-    const $areaEl = $el.find('.messagebar-area'); // Textarea
+    // Area
+    const $areaEl = $el.find('.messagebar-area');
 
+    // Textarea
     let $textareaEl;
-
     if (messagebar.params.textareaEl) {
       $textareaEl = $(messagebar.params.textareaEl);
     } else {
       $textareaEl = $el.find('textarea');
-    } // Attachments & Library
-
+    }
 
+    // Attachments & Library
     const $attachmentsEl = $el.find('.messagebar-attachments');
     const $sheetEl = $el.find('.messagebar-sheet');
-
     if (messagebar.params.top) {
       $el.addClass('messagebar-top');
     }
-
     extend(messagebar, {
       $el,
       el: $el[0],
@@ -69,21 +69,19 @@ class Messagebar extends Framework7Class {
       pageContentEl: $pageContentEl,
       top: $el.hasClass('messagebar-top') || messagebar.params.top,
       attachments: []
-    }); // Events
+    });
 
+    // Events
     function onAppResize() {
       if (messagebar.params.resizePage) {
         messagebar.resizePage();
       }
     }
-
     function onSubmit(e) {
       e.preventDefault();
     }
-
     function onAttachmentClick(e) {
       const index = $(this).index();
-
       if ($(e.target).closest('.messagebar-attachment-delete').length) {
         $(this).trigger('messagebar:attachmentdelete', index);
         messagebar.emit('local::attachmentDelete messagebarAttachmentDelete', messagebar, this, index);
@@ -92,26 +90,22 @@ class Messagebar extends Framework7Class {
         messagebar.emit('local::attachmentClick messagebarAttachmentClick', messagebar, this, index);
       }
     }
-
     function onTextareaChange() {
       messagebar.checkEmptyState();
       messagebar.$el.trigger('messagebar:change');
       messagebar.emit('local::change messagebarChange', messagebar);
     }
-
     function onTextareaFocus() {
       messagebar.sheetHide();
       messagebar.$el.addClass('messagebar-focused');
       messagebar.$el.trigger('messagebar:focus');
       messagebar.emit('local::focus messagebarFocus', messagebar);
     }
-
     function onTextareaBlur() {
       messagebar.$el.removeClass('messagebar-focused');
       messagebar.$el.trigger('messagebar:blur');
       messagebar.emit('local::blur messagebarBlur', messagebar);
     }
-
     messagebar.attachEvents = function attachEvents() {
       $el.on('textarea:resize', onAppResize);
       $el.on('submit', onSubmit);
@@ -121,7 +115,6 @@ class Messagebar extends Framework7Class {
       $textareaEl.on('blur', onTextareaBlur);
       app.on('resize', onAppResize);
     };
-
     messagebar.detachEvents = function detachEvents() {
       $el.off('textarea:resize', onAppResize);
       $el.off('submit', onSubmit);
@@ -130,50 +123,44 @@ class Messagebar extends Framework7Class {
       $textareaEl.off('focus', onTextareaFocus);
       $textareaEl.off('blur', onTextareaBlur);
       app.off('resize', onAppResize);
-    }; // Install Modules
-
+    };
 
-    messagebar.useModules(); // Init
+    // Install Modules
+    messagebar.useModules();
 
+    // Init
     messagebar.init();
     return messagebar;
   }
-
   focus() {
     const messagebar = this;
     messagebar.$textareaEl.focus();
     return messagebar;
   }
-
   blur() {
     const messagebar = this;
     messagebar.$textareaEl.blur();
     return messagebar;
   }
-
   clear() {
     const messagebar = this;
     messagebar.$textareaEl.val('').trigger('change');
     return messagebar;
   }
-
   getValue() {
     const messagebar = this;
     return messagebar.$textareaEl.val().trim();
   }
-
   setValue(value) {
     const messagebar = this;
     messagebar.$textareaEl.val(value).trigger('change');
     return messagebar;
   }
-
   setPlaceholder(placeholder) {
     const messagebar = this;
     messagebar.$textareaEl.attr('placeholder', placeholder);
     return messagebar;
   }
-
   resizePage() {
     const messagebar = this;
     const {
@@ -189,7 +176,6 @@ class Messagebar extends Framework7Class {
     } = messagebar;
     const elHeight = $el[0].offsetHeight;
     let maxHeight = params.maxHeight;
-
     if (top) {
       /*
       Disable at the moment
@@ -208,31 +194,25 @@ class Messagebar extends Framework7Class {
     } else {
       const currentPaddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10);
       const requiredPaddingBottom = elHeight + params.bottomOffset;
-
       if (requiredPaddingBottom !== currentPaddingBottom && $pageContentEl.length) {
         const currentPaddingTop = parseInt($pageContentEl.css('padding-top'), 10);
         const pageScrollHeight = $pageContentEl[0].scrollHeight;
         const pageOffsetHeight = $pageContentEl[0].offsetHeight;
         const pageScrollTop = $pageContentEl[0].scrollTop;
         const scrollOnBottom = pageScrollTop === pageScrollHeight - pageOffsetHeight;
-
         if (!maxHeight) {
           maxHeight = $pageEl[0].offsetHeight - currentPaddingTop - $sheetEl.outerHeight() - $attachmentsEl.outerHeight() - parseInt($areaEl.css('margin-top'), 10) - parseInt($areaEl.css('margin-bottom'), 10);
         }
-
         $textareaEl.css('max-height', `${maxHeight}px`);
         $pageContentEl.css('padding-bottom', `${requiredPaddingBottom}px`);
-
         if (scrollOnBottom) {
           $pageContentEl.scrollTop($pageContentEl[0].scrollHeight - pageOffsetHeight);
         }
-
         $el.trigger('messagebar:resizepage');
         messagebar.emit('local::resizePage messagebarResizePage', messagebar);
       }
     }
   }
-
   checkEmptyState() {
     const messagebar = this;
     const {
@@ -240,19 +220,16 @@ class Messagebar extends Framework7Class {
       $textareaEl
     } = messagebar;
     const value = $textareaEl.val().trim();
-
     if (value && value.length) {
       $el.addClass('messagebar-with-value');
     } else {
       $el.removeClass('messagebar-with-value');
     }
   }
-
   attachmentsCreate(innerHTML) {
     if (innerHTML === void 0) {
       innerHTML = '';
     }
-
     const messagebar = this;
     const $attachmentsEl = $(`<div class="messagebar-attachments">${innerHTML}</div>`);
     $attachmentsEl.insertBefore(messagebar.$textareaEl);
@@ -262,60 +239,45 @@ class Messagebar extends Framework7Class {
     });
     return messagebar;
   }
-
   attachmentsShow(innerHTML) {
     if (innerHTML === void 0) {
       innerHTML = '';
     }
-
     const messagebar = this;
     messagebar.$attachmentsEl = messagebar.$el.find('.messagebar-attachments');
-
     if (messagebar.$attachmentsEl.length === 0) {
       messagebar.attachmentsCreate(innerHTML);
     }
-
     messagebar.$el.addClass('messagebar-attachments-visible');
     messagebar.attachmentsVisible = true;
-
     if (messagebar.params.resizePage) {
       messagebar.resizePage();
     }
-
     return messagebar;
   }
-
   attachmentsHide() {
     const messagebar = this;
     messagebar.$el.removeClass('messagebar-attachments-visible');
     messagebar.attachmentsVisible = false;
-
     if (messagebar.params.resizePage) {
       messagebar.resizePage();
     }
-
     return messagebar;
   }
-
   attachmentsToggle() {
     const messagebar = this;
-
     if (messagebar.attachmentsVisible) {
       messagebar.attachmentsHide();
     } else {
       messagebar.attachmentsShow();
     }
-
     return messagebar;
   }
-
   renderAttachment(attachment) {
     const messagebar = this;
-
     if (messagebar.params.renderAttachment) {
       return messagebar.params.renderAttachment.call(messagebar, attachment);
     }
-
     return `
       <div class="messagebar-attachment">
         <img src="${attachment}">
@@ -323,29 +285,24 @@ class Messagebar extends Framework7Class {
       </div>
     `;
   }
-
   renderAttachments() {
     const messagebar = this;
     let html;
-
     if (messagebar.params.renderAttachments) {
       html = messagebar.params.renderAttachments.call(messagebar, messagebar.attachments);
     } else {
       html = `${messagebar.attachments.map(attachment => messagebar.renderAttachment(attachment)).join('')}`;
     }
-
     if (messagebar.$attachmentsEl.length === 0) {
       messagebar.attachmentsCreate(html);
     } else {
       messagebar.$attachmentsEl.html(html);
     }
   }
-
   sheetCreate(innerHTML) {
     if (innerHTML === void 0) {
       innerHTML = '';
     }
-
     const messagebar = this;
     const $sheetEl = $(`<div class="messagebar-sheet">${innerHTML}</div>`);
     messagebar.$el.append($sheetEl);
@@ -355,74 +312,56 @@ class Messagebar extends Framework7Class {
     });
     return messagebar;
   }
-
   sheetShow(innerHTML) {
     if (innerHTML === void 0) {
       innerHTML = '';
     }
-
     const messagebar = this;
     messagebar.$sheetEl = messagebar.$el.find('.messagebar-sheet');
-
     if (messagebar.$sheetEl.length === 0) {
       messagebar.sheetCreate(innerHTML);
     }
-
     messagebar.$el.addClass('messagebar-sheet-visible');
     messagebar.sheetVisible = true;
-
     if (messagebar.params.resizePage) {
       messagebar.resizePage();
     }
-
     return messagebar;
   }
-
   sheetHide() {
     const messagebar = this;
     messagebar.$el.removeClass('messagebar-sheet-visible');
     messagebar.sheetVisible = false;
-
     if (messagebar.params.resizePage) {
       messagebar.resizePage();
     }
-
     return messagebar;
   }
-
   sheetToggle() {
     const messagebar = this;
-
     if (messagebar.sheetVisible) {
       messagebar.sheetHide();
     } else {
       messagebar.sheetShow();
     }
-
     return messagebar;
   }
-
   init() {
     const messagebar = this;
     messagebar.attachEvents();
     messagebar.checkEmptyState();
     return messagebar;
   }
-
   destroy() {
     const messagebar = this;
     messagebar.emit('local::beforeDestroy messagebarBeforeDestroy', messagebar);
     messagebar.$el.trigger('messagebar:beforedestroy');
     messagebar.detachEvents();
-
     if (messagebar.$el[0]) {
       messagebar.$el[0].f7Messagebar = null;
       delete messagebar.$el[0].f7Messagebar;
     }
-
     deleteProps(messagebar);
   }
-
 }
-
 export default Messagebar;

package/components/messagebar/messagebar-ios.less

@@ -32,6 +32,14 @@
   }
   .messagebar-attachment {
     font-size: 14px;
+    + .messagebar-attachment {
+      .ltr({
+        margin-left: 8px;
+      });
+      .rtl({
+        margin-right: 8px;
+      });
+    }
   }
   .messagebar-attachment-delete {
     right: 5px;
@@ -40,6 +48,7 @@
     height: 20px;
     background: #7d7e80;
     border: 2px solid #fff;
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
     &:after,
     &:before {
       width: 10px;
@@ -49,4 +58,31 @@
       margin-top: -1px;
     }
   }
+  .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;
+      z-index: 1;
+    }
+  }
 }

package/components/messagebar/messagebar-md.less

@@ -1,34 +1,114 @@
 .md {
+  .messagebar {
+    --f7-toolbar-link-height: var(--f7-messagebar-height);
+  }
   .messagebar-attachments {
-    padding: 8px;
+    padding: 16px 16px 0;
     border-bottom: 1px solid var(--f7-messagebar-attachments-border-color);
   }
+
+  .messagebar-attachment {
+    img {
+      width: var(--f7-messagebar-attachment-height);
+      height: var(--f7-messagebar-attachment-height);
+      object-fit: cover;
+      object-position: center;
+    }
+    + .messagebar-attachment {
+      .ltr({
+        margin-left: 16px;
+      });
+      .rtl({
+        margin-right: 16px;
+      });
+    }
+  }
+  .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;
+    }
+    textarea {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
   .messagebar-area {
     margin-top: 8px;
     margin-bottom: 8px;
   }
-  .messagebar-sheet-image,
-  .messagebar-sheet-item {
-    .icon-checkbox {
-      border-color: #fff;
-      background: rgba(255, 255, 255, 0.25);
-      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-    }
-  }
+
   .messagebar-attachment-delete {
-    right: 8px;
-    top: 8px;
+    right: -6px;
+    top: -6px;
     width: 24px;
     height: 24px;
-    background-color: var(--f7-theme-color);
-    border-radius: 4px;
+    background-color: var(--f7-md-inverse-surface);
+    border-radius: 24px;
+    border: 2px solid var(--f7-messagebar-textarea-bg-color);
     &:after,
     &:before {
-      width: 14px;
+      width: 12px;
       height: 2px;
-      background: #fff;
-      margin-left: -7px;
+      background: var(--f7-messagebar-textarea-bg-color);
+      margin-left: -6px;
       margin-top: -1px;
     }
   }
+  .messagebar-sheet-image,
+  .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;
+    .ltr({
+      margin-left: 8px;
+    });
+    .rtl({
+      margin-right: 8px;
+    });
+    @media (orientation: landscape) {
+      width: calc((var(--f7-messagebar-sheet-landscape-height) - 8px) / 2);
+      height: calc((var(--f7-messagebar-sheet-landscape-height) - 24px) / 2);
+    }
+    input:checked ~ img {
+      transform: scale(0.85);
+    }
+    input:checked ~ .icon-checkbox,
+    input:checked ~ .icon-radio {
+      transform: translate(-50%, -50%) scale(1);
+    }
+    .icon-checkbox,
+    .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(0.85);
+      border: none;
+      z-index: 1;
+      --f7-checkbox-inactive-color: var(--f7-md-surface);
+      --f7-checkbox-active-color: var(--f7-md-surface);
+      &::after {
+        color: var(--f7-md-on-surface);
+        font-size: 18px;
+        width: auto;
+        height: 100%;
+        line-height: 32px;
+        left: 0;
+        position: static;
+      }
+    }
+  }
 }