framework7 7.1.5 → 8.0.0-beta.2

package/components/list-index/list-index-class.js

@@ -2,13 +2,11 @@ import $ from '../../shared/dom7.js';
 import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 import { getSupport } from '../../shared/get-support.js';
-
 class ListIndex extends Framework7Class {
   constructor(app, params) {
     if (params === void 0) {
       params = {};
     }
-
     super(params, [app]);
     const index = this;
     const defaults = {
@@ -20,66 +18,54 @@ class ListIndex extends Framework7Class {
       // or array of indexes
       iosItemHeight: 14,
       mdItemHeight: 14,
-      auroraItemHeight: 14,
       scrollList: true,
       label: false,
-
       // eslint-disable-next-line
       renderItem(itemContent, itemIndex) {
         return `
           <li>${itemContent}</li>
         `.trim();
       },
-
       renderSkipPlaceholder() {
         return '<li class="list-index-skip-placeholder"></li>';
       },
-
       on: {}
-    }; // Extend defaults with modules params
+    };
 
+    // Extend defaults with modules params
     index.useModulesParams(defaults);
     index.params = extend(defaults, params);
     let $el;
     let $listEl;
     let $pageContentEl;
     let $ul;
-
     if (index.params.el) {
       $el = $(index.params.el);
     } else {
       return index;
     }
-
     if ($el[0].f7ListIndex) {
       return $el[0].f7ListIndex;
     }
-
     $ul = $el.find('ul');
-
     if ($ul.length === 0) {
       $ul = $('<ul></ul>');
       $el.append($ul);
     }
-
     if (index.params.listEl) {
       $listEl = $(index.params.listEl);
     }
-
     if (index.params.indexes === 'auto' && !$listEl) {
       return index;
     }
-
     if ($listEl) {
       $pageContentEl = $listEl.parents('.page-content').eq(0);
     } else {
       $pageContentEl = $el.siblings('.page-content').eq(0);
-
       if ($pageContentEl.length === 0) {
         $pageContentEl = $el.parents('.page').eq(0).find('.page-content').eq(0);
       }
     }
-
     $el[0].f7ListIndex = index;
     extend(index, {
       app,
@@ -94,31 +80,29 @@ class ListIndex extends Framework7Class {
       indexes: params.indexes,
       height: 0,
       skipRate: 0
-    }); // Install Modules
+    });
 
-    index.useModules(); // Attach events
+    // Install Modules
+    index.useModules();
 
+    // Attach events
     function handleResize() {
       const height = {
         index
       };
       index.calcSize();
-
       if (height !== index.height) {
         index.render();
       }
     }
-
     function handleClick(e) {
       const $clickedLi = $(e.target).closest('li');
       if (!$clickedLi.length) return;
       let itemIndex = $clickedLi.index();
-
       if (index.skipRate > 0) {
         const percentage = itemIndex / ($clickedLi.siblings('li').length - 1);
         itemIndex = Math.round((index.indexes.length - 1) * percentage);
       }
-
       const itemContent = index.indexes[itemIndex];
       index.$el.trigger('listindex:click', {
         content: itemContent,
@@ -130,12 +114,10 @@ class ListIndex extends Framework7Class {
         index: itemIndex
       });
       index.emit('local::select listIndexSelect', index, itemContent, itemIndex);
-
       if (index.$listEl && index.params.scrollList) {
         index.scrollListToIndex(itemContent, itemIndex);
       }
     }
-
     const touchesStart = {};
     let isTouched;
     let isMoved;
@@ -143,7 +125,6 @@ class ListIndex extends Framework7Class {
     let bottomPoint;
     let $labelEl;
     let previousIndex = null;
-
     function handleTouchStart(e) {
       const $children = $ul.children();
       if (!$children.length) return;
@@ -155,15 +136,12 @@ class ListIndex extends Framework7Class {
       isMoved = false;
       previousIndex = null;
     }
-
     function handleTouchMove(e) {
       if (!isTouched) return;
-
       if (!isMoved && index.params.label) {
         $labelEl = $('<span class="list-index-label"></span>');
         $el.append($labelEl);
       }
-
       isMoved = true;
       const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
       e.preventDefault();
@@ -173,37 +151,30 @@ class ListIndex extends Framework7Class {
       const itemContent = index.indexes[itemIndex];
       const ulHeight = bottomPoint - topPoint;
       const bubbleBottom = (index.height - ulHeight) / 2 + (1 - percentage) * ulHeight;
-
       if (itemIndex !== previousIndex) {
         if (index.params.label) {
           $labelEl.html(itemContent).transform(`translateY(-${bubbleBottom}px)`);
         }
-
         if (index.$listEl && index.params.scrollList) {
           index.scrollListToIndex(itemContent, itemIndex);
         }
       }
-
       previousIndex = itemIndex;
       index.$el.trigger('listindex:select');
       index.emit('local::select listIndexSelect', index, itemContent, itemIndex);
     }
-
     function handleTouchEnd() {
       if (!isTouched) return;
       isTouched = false;
       isMoved = false;
-
       if (index.params.label) {
         if ($labelEl) $labelEl.remove();
         $labelEl = undefined;
       }
     }
-
     const passiveListener = getSupport().passiveListener ? {
       passive: true
     } : false;
-
     index.attachEvents = function attachEvents() {
       $el.parents('.tab').on('tab:show', handleResize);
       $el.parents('.page').on('page:reinit', handleResize);
@@ -215,7 +186,6 @@ class ListIndex extends Framework7Class {
       app.on('touchmove:active', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
     };
-
     index.detachEvents = function attachEvents() {
       $el.parents('.tab').off('tab:show', handleResize);
       $el.parents('.page').off('page:reinit', handleResize);
@@ -226,14 +196,12 @@ class ListIndex extends Framework7Class {
       $el.off(app.touchEvents.start, handleTouchStart, passiveListener);
       app.off('touchmove:active', handleTouchMove);
       app.off('touchend:passive', handleTouchEnd);
-    }; // Init
-
-
+    };
+    // Init
     index.init();
     return index;
-  } // eslint-disable-next-line
-
-
+  }
+  // eslint-disable-next-line
   scrollListToIndex(itemContent, itemIndex) {
     const index = this;
     const {
@@ -243,10 +211,9 @@ class ListIndex extends Framework7Class {
     } = index;
     if (!$listEl || !$pageContentEl || $pageContentEl.length === 0) return index;
     let $scrollToEl;
-    $listEl.find('.list-group-title, .item-divider').each(el => {
+    $listEl.find('.list-group-title').each(el => {
       if ($scrollToEl) return;
       const $el = $(el);
-
       if ($el.text() === itemContent) {
         $scrollToEl = $el;
       }
@@ -256,35 +223,28 @@ class ListIndex extends Framework7Class {
     let paddingTop = parseInt($pageContentEl.css('padding-top'), 10);
     const scrollTop = $pageContentEl[0].scrollTop;
     const scrollToElTop = $scrollToEl.offset().top;
-
     if ($pageContentEl.parents('.page-with-navbar-large').length) {
       const navbarInnerEl = app.navbar.getElByPage($pageContentEl.parents('.page-with-navbar-large').eq(0));
       const $titleLargeEl = $(navbarInnerEl).find('.title-large');
-
       if ($titleLargeEl.length) {
         paddingTop -= $titleLargeEl[0].offsetHeight || 0;
       }
     }
-
     if (parentTop <= paddingTop) {
       $pageContentEl.scrollTop(parentTop + scrollTop - paddingTop);
     } else {
       $pageContentEl.scrollTop(scrollToElTop + scrollTop - paddingTop);
     }
-
     return index;
   }
-
   renderSkipPlaceholder() {
     const index = this;
     return index.params.renderSkipPlaceholder.call(index);
   }
-
   renderItem(itemContent, itemIndex) {
     const index = this;
     return index.params.renderItem.call(index, itemContent, itemIndex);
   }
-
   render() {
     const index = this;
     const {
@@ -298,20 +258,16 @@ class ListIndex extends Framework7Class {
         wasSkipped = true;
         return '';
       }
-
       let itemHtml = index.renderItem(itemContent, itemIndex);
-
       if (wasSkipped) {
         itemHtml = index.renderSkipPlaceholder() + itemHtml;
       }
-
       wasSkipped = false;
       return itemHtml;
     }).join('');
     $ul.html(html);
     return index;
   }
-
   calcSize() {
     const index = this;
     const {
@@ -325,24 +281,19 @@ class ListIndex extends Framework7Class {
     const maxItems = Math.floor(height / itemHeight);
     const items = indexes.length;
     let skipRate = 0;
-
     if (items > maxItems) {
       skipRate = Math.ceil((items * 2 - 1) / maxItems);
     }
-
     index.height = height;
     index.skipRate = skipRate;
     return index;
   }
-
   calcIndexes() {
     const index = this;
-
     if (index.params.indexes === 'auto') {
       index.indexes = [];
-      index.$listEl.find('.list-group-title, .item-divider').each(el => {
+      index.$listEl.find('.list-group-title').each(el => {
         const elContent = $(el).text();
-
         if (index.indexes.indexOf(elContent) < 0) {
           index.indexes.push(elContent);
         }
@@ -350,10 +301,8 @@ class ListIndex extends Framework7Class {
     } else {
       index.indexes = index.params.indexes;
     }
-
     return index;
   }
-
   update() {
     const index = this;
     index.calcIndexes();
@@ -361,7 +310,6 @@ class ListIndex extends Framework7Class {
     index.render();
     return index;
   }
-
   init() {
     const index = this;
     index.calcIndexes();
@@ -369,22 +317,17 @@ class ListIndex extends Framework7Class {
     index.render();
     index.attachEvents();
   }
-
   destroy() {
     let index = this;
     index.$el.trigger('listindex:beforedestroy', index);
     index.emit('local::beforeDestroy listIndexBeforeDestroy');
     index.detachEvents();
-
     if (index.$el[0]) {
       index.$el[0].f7ListIndex = null;
       delete index.$el[0].f7ListIndex;
     }
-
     deleteProps(index);
     index = null;
   }
-
 }
-
 export default ListIndex;

package/components/list-index/list-index-rtl.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-text-color:#fff;--f7-list-index-label-font-weight:500}.ios{--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}.aurora{--f7-list-index-font-size:12px;--f7-list-index-label-size:32px;--f7-list-index-label-font-size:12px;--f7-list-index-label-font-weight:600;--f7-list-index-skip-dot-size:4px}.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;left:var(--f7-safe-area-left)}.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-labels~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-labels~.list-index,.navbars~.toolbar-top.tabbar-labels~.list-index,.navbar~.toolbar-top.tabbar-labels~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-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-labels~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.page>.list-index,.md .toolbar-bottom-md.tabbar-labels~* .page>.list-index,.md .toolbar-bottom-md.tabbar-labels~.list-index,.md .toolbar-bottom-md.tabbar-labels~.page>.list-index,.toolbar-bottom.tabbar-labels~* .page>.list-index,.toolbar-bottom.tabbar-labels~.list-index,.toolbar-bottom.tabbar-labels~.page>.list-index{bottom:calc(var(--f7-tabbar-labels-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%}.aurora .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%}.aurora .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 1px 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-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-text-color:#fff;--f7-list-index-label-font-weight:500}.ios{--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}.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;left:var(--f7-safe-area-left)}.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%}

package/components/list-index/list-index-vars.less

@@ -18,10 +18,3 @@
   --f7-list-index-label-font-size: 20px;
   --f7-list-index-skip-dot-size: 4px;
 });
-.aurora-vars({
-  --f7-list-index-font-size: 12px;
-  --f7-list-index-label-size: 32px;
-  --f7-list-index-label-font-size: 12px;
-  --f7-list-index-label-font-weight: 600;
-  --f7-list-index-skip-dot-size: 4px;
-});

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-text-color:#fff;--f7-list-index-label-font-weight:500}.ios{--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}.aurora{--f7-list-index-font-size:12px;--f7-list-index-label-size:32px;--f7-list-index-label-font-size:12px;--f7-list-index-label-font-weight:600;--f7-list-index-skip-dot-size:4px}.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-labels~.list-index,.ios .navbar~.toolbar-top-ios.tabbar-labels~.list-index,.navbars~.toolbar-top.tabbar-labels~.list-index,.navbar~.toolbar-top.tabbar-labels~.list-index{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-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-labels~* .page>.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.list-index,.ios .toolbar-bottom-ios.tabbar-labels~.page>.list-index,.md .toolbar-bottom-md.tabbar-labels~* .page>.list-index,.md .toolbar-bottom-md.tabbar-labels~.list-index,.md .toolbar-bottom-md.tabbar-labels~.page>.list-index,.toolbar-bottom.tabbar-labels~* .page>.list-index,.toolbar-bottom.tabbar-labels~.list-index,.toolbar-bottom.tabbar-labels~.page>.list-index{bottom:calc(var(--f7-tabbar-labels-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%}.aurora .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%}.aurora .list-index .list-index-label:before{position:absolute;width:100%;height:100%;border-radius:50% 1px 50% 50%;content:'';background-color:inherit;left:0;top:0;transform:rotate(45deg);z-index:-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-text-color:#fff;--f7-list-index-label-font-weight:500}.ios{--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}.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%}

package/components/list-index/list-index.d.ts

@@ -39,7 +39,7 @@ export namespace ListIndex {
     el?: HTMLElement | CSSSelector;
     /** Related List View element. HTMLElement or string with CSS selector of List View element. */
     listEl?: HTMLElement | CSSSelector;
-    /** Array with indexes. If not passed then it will automatically generate it based on item-divider and list-group-title elements inside of passed List View element in listEl parameter. (default auto) */
+    /** Array with indexes. If not passed then it will automatically generate it based on list-group-title elements inside of passed List View element in listEl parameter. (default auto) */
     indexes?: string[] | string; // ??
     /** Will automatically scroll related List View to the selected index. (default true) */
     scrollList?: boolean;
@@ -49,8 +49,6 @@ export namespace ListIndex {
     iosItemHeight?: number;
     /** Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For MD theme. (default 14) */
     mdItemHeight?: number;
-    /** Single index item height. It is required to calculate dynamic index and how many indexes fit on the screen. For Aurora theme. (default 14) */
-    auroraItemHeight?: number;
     /** Object with events handlers.. */
     on: {
       [event in keyof Events]?: Events[event];

package/components/list-index/list-index.js

@@ -7,7 +7,6 @@ export default {
   static: {
     ListIndex
   },
-
   create() {
     const app = this;
     app.listIndex = ConstructorMethods({
@@ -17,7 +16,6 @@ export default {
       domProp: 'f7ListIndex'
     });
   },
-
   on: {
     tabMounted(tabEl) {
       const app = this;
@@ -28,13 +26,11 @@ export default {
         app.listIndex.create(params);
       });
     },
-
     tabBeforeRemove(tabEl) {
       $(tabEl).find('.list-index-init').each(listIndexEl => {
         if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();
       });
     },
-
     pageInit(page) {
       const app = this;
       page.$el.find('.list-index-init').each(listIndexEl => {
@@ -44,13 +40,11 @@ export default {
         app.listIndex.create(params);
       });
     },
-
     pageBeforeRemove(page) {
       page.$el.find('.list-index-init').each(listIndexEl => {
         if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();
       });
     }
-
   },
   vnode: {
     'list-index-init': {
@@ -62,12 +56,10 @@ export default {
         });
         app.listIndex.create(params);
       },
-
       destroy(vnode) {
         const listIndexEl = vnode.elm;
         if (listIndexEl.f7ListIndex) listIndexEl.f7ListIndex.destroy();
       }
-
     }
   }
 };

package/components/list-index/list-index.less

@@ -92,9 +92,9 @@
   ~ .list-index {
     top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
   }
-  &.tabbar-labels {
+  &.tabbar-icons {
     ~ .list-index {
-      top: calc(var(--f7-navbar-height) + var(--f7-tabbar-labels-height));
+      top: calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height));
     }
   }
 }
@@ -113,11 +113,11 @@
   ~ .list-index {
     bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
   }
-  &.tabbar-labels {
+  &.tabbar-icons {
     ~ .page > .list-index,
     ~ * .page > .list-index,
     ~ .list-index {
-      bottom: calc(var(--f7-tabbar-labels-height) + var(--f7-safe-area-bottom));
+      bottom: calc(var(--f7-tabbar-icons-height) + var(--f7-safe-area-bottom));
     }
   }
 }
@@ -128,6 +128,3 @@
 .if-md-theme({
   @import './list-index-md.less';
 });
-.if-aurora-theme({
-  @import './list-index-aurora.less';
-});

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

@@ -1,33 +1,30 @@
 import $ from '../../shared/dom7.js';
 import { extend } from '../../shared/utils.js';
 import Modal from '../modal/modal-class.js';
-
 class LoginScreen extends Modal {
   constructor(app, params) {
     const extendedParams = extend({
       on: {}
-    }, params); // Extends with open/close Modal methods;
+    }, params);
 
+    // Extends with open/close Modal methods;
     super(app, extendedParams);
     const loginScreen = this;
-    loginScreen.params = extendedParams; // Find Element
+    loginScreen.params = extendedParams;
 
+    // Find Element
     let $el;
-
     if (!loginScreen.params.el) {
       $el = $(loginScreen.params.content).filter(node => node.nodeType === 1).eq(0);
     } else {
       $el = $(loginScreen.params.el).eq(0);
     }
-
     if ($el && $el.length > 0 && $el[0].f7Modal) {
       return $el[0].f7Modal;
     }
-
     if ($el.length === 0) {
       return loginScreen.destroy();
     }
-
     extend(loginScreen, {
       app,
       $el,
@@ -37,7 +34,5 @@ class LoginScreen extends Modal {
     $el[0].f7Modal = loginScreen;
     return loginScreen;
   }
-
 }
-
 export default LoginScreen;

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;--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-vars.less

@@ -1,32 +1,33 @@
 :root {
   --f7-login-screen-blocks-max-width: 480px;
-  /*
-   --f7-login-screen-list-button-text-color: var(--f7-theme-color);
-   */
   --f7-login-screen-title-text-align: center;
   --f7-login-screen-title-text-color: inherit;
   --f7-login-screen-title-letter-spacing: 0;
+}
+.ios-vars({
+  --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;
   .light-vars({
     --f7-login-screen-content-bg-color: #fff;
     --f7-login-screen-bg-color: #fff;
   });
-  .dark-vars({
-    --f7-login-screen-bg-color: #121212;
-    --f7-login-screen-content-bg-color: #121212;
-  });
-}
-.ios-vars({
-  --f7-login-screen-blocks-margin-vertical: 25px;
   .dark-vars({
     --f7-login-screen-bg-color: #000;
     --f7-login-screen-content-bg-color: #000;
   });
 });
 .md-vars({
+  --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;
 });
-.aurora-vars({
-  --f7-login-screen-blocks-margin-vertical: 16px;
+
+.md-color-vars({
+  --f7-login-screen-content-bg-color: var(--f7-md-surface);
+  --f7-login-screen-bg-color: var(--f7-md-surface);
 });

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);
     }