framework7 7.0.9 → 8.0.0-beta.1

package/components/toast/toast.css

@@ -1 +1 @@
-:root{--f7-toast-text-color:#fff;--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-bg-color:#323232;--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:4px;--f7-toast-button-min-width:64px}.aurora{--f7-toast-bg-color:#323232;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:16px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:32px}.toast{--f7-touch-ripple-color:var(--f7-touch-ripple-white);transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}.aurora .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);left:16px;width:calc(100% - 32px);transform:scale(.9)}.aurora .toast.modal-in{transform:scale(1)}.aurora .toast.modal-out{transform:scale(1)}.aurora .toast.toast-top{top:16px}.aurora .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.aurora .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.aurora .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.aurora .toast.toast-bottom{bottom:calc(16px + var(--f7-safe-area-bottom))}@media (min-width:584px){.aurora .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.aurora .toast.toast-center{margin-left:0}}@media (min-width:1024px){.aurora .toast{margin-left:0;width:auto}.aurora .toast.toast-horizontal-left{left:16px}.aurora .toast.toast-horizontal-right{left:auto;right:16px}.aurora .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.aurora .toast-button{margin-left:16px}
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{--f7-touch-ripple-color:var(--f7-touch-ripple-white);transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}

package/components/toast/toast.js

@@ -6,7 +6,6 @@ export default {
   static: {
     Toast
   },
-
   create() {
     const app = this;
     app.toast = extend({}, ModalMethods({
@@ -21,10 +20,8 @@ export default {
         });
         return new Toast(app, params).open();
       }
-
     });
   },
-
   params: {
     toast: {
       icon: null,

package/components/toast/toast.less

@@ -61,6 +61,3 @@
 .if-md-theme({
   @import './toast-md.less';
 });
-.if-aurora-theme({
-  @import './toast-aurora.less';
-});

package/components/toggle/toggle-class.js

@@ -2,18 +2,17 @@ import $ from '../../shared/dom7.js';
 import { extend, now, nextTick, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 import { getSupport } from '../../shared/get-support.js';
-
 class Toggle extends Framework7Class {
   constructor(app, params) {
     if (params === void 0) {
       params = {};
     }
-
     super(params, [app]);
     const toggle = this;
     const support = getSupport();
-    const defaults = {}; // Extend defaults with modules params
+    const defaults = {};
 
+    // Extend defaults with modules params
     toggle.useModulesParams(defaults);
     toggle.params = extend(defaults, params);
     const el = toggle.params.el;
@@ -33,18 +32,15 @@ class Toggle extends Framework7Class {
     Object.defineProperty(toggle, 'checked', {
       enumerable: true,
       configurable: true,
-
       set(checked) {
         if (!toggle || typeof toggle.$inputEl === 'undefined') return;
         if (toggle.checked === checked) return;
         $inputEl[0].checked = checked;
         toggle.$inputEl.trigger('change');
       },
-
       get() {
         return $inputEl[0].checked;
       }
-
     });
     $el[0].f7Toggle = toggle;
     let isTouched;
@@ -54,7 +50,6 @@ class Toggle extends Framework7Class {
     let toggleWidth;
     let touchStartTime;
     let touchStartChecked;
-
     function handleTouchStart(e) {
       if (isTouched || toggle.disabled) return;
       touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
@@ -71,73 +66,59 @@ class Toggle extends Framework7Class {
         }
       });
     }
-
     function handleTouchMove(e) {
       if (!isTouched || toggle.disabled) return;
       const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
       const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
       const inverter = app.rtl ? -1 : 1;
-
       if (typeof isScrolling === 'undefined') {
         isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
       }
-
       if (isScrolling) {
         isTouched = false;
         return;
       }
-
       e.preventDefault();
       touchesDiff = pageX - touchesStart.x;
       let changed;
-
       if (touchesDiff * inverter < 0 && Math.abs(touchesDiff) > toggleWidth / 3 && touchStartChecked) {
         changed = true;
       }
-
       if (touchesDiff * inverter > 0 && Math.abs(touchesDiff) > toggleWidth / 3 && !touchStartChecked) {
         changed = true;
       }
-
       if (changed) {
         touchesStart.x = pageX;
         toggle.checked = !touchStartChecked;
         touchStartChecked = !touchStartChecked;
       }
     }
-
     function handleTouchEnd() {
       if (!isTouched || toggle.disabled) {
         if (isScrolling) $el.removeClass('toggle-active-state');
         isTouched = false;
         return;
       }
-
       const inverter = app.rtl ? -1 : 1;
       isTouched = false;
       $el.removeClass('toggle-active-state');
       let changed;
-
       if (now() - touchStartTime < 300) {
         if (touchesDiff * inverter < 0 && touchStartChecked) {
           changed = true;
         }
-
         if (touchesDiff * inverter > 0 && !touchStartChecked) {
           changed = true;
         }
-
         if (changed) {
           toggle.checked = !touchStartChecked;
         }
       }
     }
-
     function handleInputChange() {
       toggle.$el.trigger('toggle:change');
       toggle.emit('local::change toggleChange', toggle);
     }
-
     toggle.attachEvents = function attachEvents() {
       const passive = support.passiveListener ? {
         passive: true
@@ -147,7 +128,6 @@ class Toggle extends Framework7Class {
       app.on('touchend:passive', handleTouchEnd);
       toggle.$inputEl.on('change', handleInputChange);
     };
-
     toggle.detachEvents = function detachEvents() {
       const passive = support.passiveListener ? {
         passive: true
@@ -156,24 +136,22 @@ class Toggle extends Framework7Class {
       app.off('touchmove', handleTouchMove);
       app.off('touchend:passive', handleTouchEnd);
       toggle.$inputEl.off('change', handleInputChange);
-    }; // Install Modules
-
+    };
 
-    toggle.useModules(); // Init
+    // Install Modules
+    toggle.useModules();
 
+    // Init
     toggle.init();
   }
-
   toggle() {
     const toggle = this;
     toggle.checked = !toggle.checked;
   }
-
   init() {
     const toggle = this;
     toggle.attachEvents();
   }
-
   destroy() {
     let toggle = this;
     toggle.$el.trigger('toggle:beforedestroy');
@@ -183,7 +161,5 @@ class Toggle extends Framework7Class {
     deleteProps(toggle);
     toggle = null;
   }
-
 }
-
 export default Toggle;

package/components/toggle/toggle-ios.less

@@ -1,11 +1,14 @@
 .ios {
   .toggle {
+    background: var(--f7-toggle-inactive-border-color);
     input[type='checkbox']:checked + .toggle-icon {
       background: var(--f7-toggle-active-color, var(--f7-theme-color));
       &:before {
+        background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
         transform: scale(0);
       }
       &:after {
+        background: var(--f7-toggle-active-knob-bg-color);
         .ltr({
           transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
         });
@@ -26,12 +29,13 @@
       height: calc(var(--f7-toggle-height) - 4px);
       border-radius: var(--f7-toggle-height);
       box-sizing: border-box;
-      background: var(--f7-toggle-inactive-color);
+      background: var(--f7-toggle-inactive-bg-color);
       z-index: 1;
       transition-duration: 300ms;
       transform: scale(1);
     }
     &:after {
+      background: var(--f7-toggle-inactive-knob-bg-color);
       height: calc(var(--f7-toggle-height) - 4px);
       width: calc(var(--f7-toggle-height) - 4px);
       top: 2px;

package/components/toggle/toggle-md.less

@@ -1,28 +1,44 @@
 .md {
   .toggle {
     input[type='checkbox']:checked + .toggle-icon {
-      background: var(--f7-toggle-active-color, rgba(var(--f7-theme-color-rgb), 0.5));
+      background: var(--f7-toggle-active-bg-color);
+      border-color: var(--f7-toggle-active-border-color);
       &:after {
         .ltr({
-          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px));
+          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1);
         });
         .rtl({
-          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));
+          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);
+        });
+        background: var(--f7-toggle-active-knob-bg-color);
+      }
+    }
+    &.active-state input[type='checkbox']:checked + .toggle-icon {
+      &:after {
+        .ltr({
+          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1.1);
+        });
+        .rtl({
+          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1);
         });
-        background: var(--f7-toggle-active-color, var(--f7-theme-color));
       }
     }
   }
   .toggle-icon {
-    background: var(--f7-toggle-inactive-color);
+    background: var(--f7-toggle-inactive-bg-color);
+    border: 2px solid var(--f7-toggle-inactive-border-color);
     &:after {
-      height: calc(var(--f7-toggle-height) + 6px);
-      width: calc(var(--f7-toggle-height) + 6px);
-      top: -3px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
+      background: var(--f7-toggle-inactive-knob-bg-color);
+      height: calc(var(--f7-toggle-height) - 8px);
+      width: calc(var(--f7-toggle-height) - 8px);
+      top: 2px;
       border-radius: var(--f7-toggle-height);
-      .ltr({ left: 0; });
-      .rtl({ right: 0; });
+      transform: scale(0.666);
+      .ltr({ left: 2px; });
+      .rtl({ right: 2px; });
+    }
+    &.active-state:after {
+      transform: scale(1.1);
     }
   }
 }

package/components/toggle/toggle-rtl.css

@@ -1 +1 @@
-:root{--f7-toggle-handle-color:#fff}:root .dark,:root.dark{--f7-toggle-inactive-color:#555}.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-border-color:#e5e5e5;--f7-toggle-inactive-color:#fff}.ios .dark,.ios.dark{--f7-toggle-border-color:#555}.md{--f7-toggle-width:36px;--f7-toggle-height:14px;--f7-toggle-inactive-color:#b0afaf}.aurora{--f7-toggle-width:40px;--f7-toggle-height:20px;--f7-toggle-inactive-color:#aaa}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{background:var(--f7-toggle-handle-color);position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,rgba(var(--f7-theme-color-rgb),.5))}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 6px)));background:var(--f7-toggle-active-color,var(--f7-theme-color))}.md .toggle-icon{background:var(--f7-toggle-inactive-color)}.md .toggle-icon:after{height:calc(var(--f7-toggle-height) + 6px);width:calc(var(--f7-toggle-height) + 6px);top:-3px;box-shadow:0 2px 5px rgba(0,0,0,.4);border-radius:var(--f7-toggle-height);right:0}.aurora .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.aurora .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.aurora .toggle-icon{background:var(--f7-toggle-inactive-color)}.aurora .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;border-radius:calc(var(--f7-toggle-height) - 4px)}
+.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-bg-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);right:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}

package/components/toggle/toggle-vars.less

@@ -1,32 +1,30 @@
-:root {
-  --f7-toggle-handle-color: #fff;
-  .dark-vars({
-    --f7-toggle-inactive-color: #555;
-
-  });
-}
 .ios-vars({
   --f7-toggle-width: 52px;
   --f7-toggle-height: 32px;
+  /*
+  --f7-toggle-active-bg-color: var(--f7-theme-color);
+  */
+  --f7-toggle-inactive-knob-bg-color: #fff;
+  --f7-toggle-active-knob-bg-color: #fff;
+
   .light-vars({
-    --f7-toggle-border-color: #e5e5e5;
-    --f7-toggle-inactive-color: #fff;
+    --f7-toggle-inactive-border-color: #e5e5e5;
+    --f7-toggle-inactive-bg-color: #fff;
   });
   .dark-vars({
-    --f7-toggle-border-color: #555;
+    --f7-toggle-inactive-border-color: #555;
+    --f7-toggle-inactive-bg-color: #555;
   });
 });
 .md-vars({
-  --f7-toggle-width: 36px;
-  --f7-toggle-height: 14px;
-  .light-vars({
-    --f7-toggle-inactive-color: #b0afaf;
-  });
+  --f7-toggle-width: 52px;
+  --f7-toggle-height: 32px;
 });
-.aurora-vars({
-  --f7-toggle-width: 40px;
-  --f7-toggle-height: 20px;
-  .light-vars({
-    --f7-toggle-inactive-color: #aaa;
-  });
+.md-color-vars({
+  --f7-toggle-inactive-bg-color: var(--f7-md-surface-variant);
+  --f7-toggle-active-bg-color: var(--f7-theme-color);
+  --f7-toggle-inactive-knob-bg-color: var(--f7-md-outline);
+  --f7-toggle-active-knob-bg-color: var(--f7-md-on-primary);
+  --f7-toggle-inactive-border-color: var(--f7-md-outline);
+  --f7-toggle-active-border-color: var(--f7-theme-color);
 });

package/components/toggle/toggle.css

@@ -1 +1 @@
-:root{--f7-toggle-handle-color:#fff}:root .dark,:root.dark{--f7-toggle-inactive-color:#555}.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-border-color:#e5e5e5;--f7-toggle-inactive-color:#fff}.ios .dark,.ios.dark{--f7-toggle-border-color:#555}.md{--f7-toggle-width:36px;--f7-toggle-height:14px;--f7-toggle-inactive-color:#b0afaf}.aurora{--f7-toggle-width:40px;--f7-toggle-height:20px;--f7-toggle-inactive-color:#aaa}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{background:var(--f7-toggle-handle-color);position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;left:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,rgba(var(--f7-theme-color-rgb),.5))}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 6px));background:var(--f7-toggle-active-color,var(--f7-theme-color))}.md .toggle-icon{background:var(--f7-toggle-inactive-color)}.md .toggle-icon:after{height:calc(var(--f7-toggle-height) + 6px);width:calc(var(--f7-toggle-height) + 6px);top:-3px;box-shadow:0 2px 5px rgba(0,0,0,.4);border-radius:var(--f7-toggle-height);left:0}.aurora .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.aurora .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.aurora .toggle-icon{background:var(--f7-toggle-inactive-color)}.aurora .toggle-icon:after{height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;border-radius:calc(var(--f7-toggle-height) - 4px)}
+.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;left:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-bg-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;left:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);left:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}

package/components/toggle/toggle.js

@@ -3,7 +3,6 @@ import ConstructorMethods from '../../shared/constructor-methods.js';
 import Toggle from './toggle-class.js';
 export default {
   name: 'toggle',
-
   create() {
     const app = this;
     app.toggle = ConstructorMethods({
@@ -13,7 +12,6 @@ export default {
       domProp: 'f7Toggle'
     });
   },
-
   static: {
     Toggle
   },
@@ -24,26 +22,22 @@ export default {
         el: toggleEl
       }));
     },
-
     tabBeforeRemove(tabEl) {
       $(tabEl).find('.toggle-init').each(toggleEl => {
         if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
       });
     },
-
     pageInit(page) {
       const app = this;
       page.$el.find('.toggle-init').each(toggleEl => app.toggle.create({
         el: toggleEl
       }));
     },
-
     pageBeforeRemove(page) {
       page.$el.find('.toggle-init').each(toggleEl => {
         if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
       });
     }
-
   },
   vnode: {
     'toggle-init': {
@@ -54,12 +48,10 @@ export default {
           el: toggleEl
         });
       },
-
       destroy(vnode) {
         const toggleEl = vnode.elm;
         if (toggleEl.f7Toggle) toggleEl.f7Toggle.destroy();
       }
-
     }
   }
 };

package/components/toggle/toggle.less

@@ -38,7 +38,6 @@
     content: '';
   }
   &:after {
-    background: var(--f7-toggle-handle-color);
     position: absolute;
     z-index: 2;
     transform: translateX(0px);
@@ -51,6 +50,3 @@
 .if-md-theme({
   @import './toggle-md.less';
 });
-.if-aurora-theme({
-  @import './toggle-aurora.less';
-});

package/components/toolbar/toolbar-ios.less

@@ -9,7 +9,7 @@
       min-width: 44px;
     }
   }
-  .tabbar-labels {
+  .tabbar-icons {
     .tab-link,
     .link {
       padding-top: 4px;
@@ -21,7 +21,7 @@
   }
   @media (min-width: 768px) and (min-height: 600px) {
     .tabbar,
-    .tabbar-labels {
+    .tabbar-icons {
       .tab-link,
       .link {
         justify-content: center;

package/components/toolbar/toolbar-md.less

@@ -12,7 +12,7 @@
     }
   }
   .tabbar,
-  .tabbar-labels {
+  .tabbar-icons {
     .tab-link,
     .link {
       padding-left: 0;
@@ -26,13 +26,37 @@
       overflow: hidden;
       position: relative;
     }
+    i.icon {
+      position: relative;
+      &::before {
+        content: '';
+        width: 64px;
+        height: 32px;
+        border-radius: 32px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%) scaleX(0.5);
+        background: var(--f7-tabbar-link-active-icon-bg-color);
+        opacity: 0;
+        transition-duration: 200ms;
+        z-index: -1;
+      }
+      + .tabbar-label {
+        margin-top: 8px;
+      }
+    }
+    .tab-link-active i.icon::before {
+      opacity: 1;
+      transform: translateX(-50%) translateY(-50%) scaleX(1);
+    }
   }
 
-  .tabbar-labels {
+  .tabbar-icons {
     .tab-link,
     .link {
-      padding-top: 7px;
-      padding-bottom: 7px;
+      padding-top: 8px;
+      padding-bottom: 8px;
     }
   }
   .tabbar-label {

package/components/toolbar/toolbar-vars.less

@@ -2,11 +2,9 @@
   /*
   --f7-toolbar-bg-color: var(--f7-bars-bg-color);
   --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
-  --f7-toolbar-bg-image: var(--f7-bars-bg-image);
   --f7-toolbar-border-color: var(--f7-bars-border-color);
   --f7-toolbar-link-color: var(--f7-bars-link-color);
   --f7-toolbar-text-color: var(--f7-bars-text-color);
-  --f7-tabbar-link-active-color: var(--f7-theme-color);
   */
   --f7-tabbar-link-active-bg-color: transparent;
   --f7-tabbar-label-text-transform: none;
@@ -17,14 +15,14 @@
   --f7-toolbar-font-size: 17px;
   --f7-toolbar-inner-padding-left: 8px;
   --f7-toolbar-inner-padding-right: 8px;
+  --f7-toolbar-link-font-weight: 400;
   /*
   --f7-toolbar-link-height: var(--f7-toolbar-height);
   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
+  --f7-tabbar-link-active-color: var(--f7-theme-color);
   */
-  --f7-tabbar-labels-height: 50px;
-  --f7-tabbar-labels-tablet-height: 50px;
-  --f7-toolbar-top-shadow-image: none;
-  --f7-toolbar-bottom-shadow-image: none;
+  --f7-tabbar-icons-height: 50px;
+  --f7-tabbar-icons-tablet-height: 50px;
   --f7-tabbar-icon-size: 28px;
   --f7-tabbar-link-text-transform: none;
   --f7-tabbar-link-font-weight: 400;
@@ -43,7 +41,7 @@
 
 });
 .md-vars({
-  --f7-toolbar-height: 48px;
+  --f7-toolbar-height: 56px;
   --f7-toolbar-font-size: 14px;
   --f7-toolbar-inner-padding-left: 0px;
   --f7-toolbar-inner-padding-right: 0px;
@@ -51,56 +49,23 @@
   --f7-toolbar-link-height: var(--f7-toolbar-height);
   --f7-toolbar-link-line-height: var(--f7-toolbar-height);
   */
-  --f7-tabbar-labels-height: 56px;
-  --f7-tabbar-labels-tablet-height: 56px;
-  /*
-  --f7-tabbar-link-active-border-color: var(--f7-theme-color);
-  */
-  --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
-  --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
-  --f7-tabbar-icon-size: 24px;
-  --f7-tabbar-link-text-transform: uppercase;
-  --f7-tabbar-link-font-weight: 500;
-  --f7-tabbar-link-letter-spacing: 0.05em;
-
-  --f7-tabbar-label-font-size: 14px;
-  --f7-tabbar-label-tablet-font-size: 14px;
-  --f7-tabbar-label-font-weight: 400;
-  --f7-tabbar-label-letter-spacing: 0;
-  .light-vars({
-    --f7-tabbar-link-inactive-color: rgba(0,0,0,0.54);
-  });
-  .dark-vars({
-    --f7-tabbar-link-inactive-color: rgba(255,255,255,0.54);
-  });
-});
-.aurora-vars({
-  --f7-toolbar-height: 48px;
-  --f7-toolbar-font-size: 16px;
-  --f7-toolbar-inner-padding-left: 16px;
-  --f7-toolbar-inner-padding-right: 16px;
-  --f7-toolbar-link-height: auto;
-  --f7-toolbar-link-line-height: inherit;
-  --f7-tabbar-labels-height: 52px;
-  --f7-tabbar-labels-tablet-height: 52px;
-  /*
-  --f7-tabbar-link-active-border-color: var(--f7-theme-color);
-  */
-  --f7-toolbar-top-shadow-image: none;
-  --f7-toolbar-bottom-shadow-image: none;
+  --f7-tabbar-icons-height: 80px;
+  --f7-tabbar-icons-tablet-height: 80px;
   --f7-tabbar-icon-size: 24px;
   --f7-tabbar-link-text-transform: none;
   --f7-tabbar-link-font-weight: 500;
   --f7-tabbar-link-letter-spacing: 0;
+  --f7-toolbar-link-font-weight: 500;
 
-  --f7-tabbar-label-font-size: 14px;
-  --f7-tabbar-label-tablet-font-size: 14px;
+  --f7-tabbar-label-font-size: 12px;
+  --f7-tabbar-label-tablet-font-size: 12px;
   --f7-tabbar-label-font-weight: 500;
   --f7-tabbar-label-letter-spacing: 0;
-  .light-vars({
-    --f7-tabbar-link-inactive-color: rgba(0,0,0,0.5);
-  });
-  .dark-vars({
-    --f7-tabbar-link-inactive-color: rgba(255,255,255,0.5);
-  });
+
+});
+.md-color-vars({
+  --f7-tabbar-link-active-color: var(--f7-md-on-secondary-container);
+  --f7-tabbar-link-active-border-color: var(--f7-md-primary);
+  --f7-tabbar-link-inactive-color: var(--f7-md-on-surface-variant);
+  --f7-tabbar-link-active-icon-bg-color: var(--f7-md-secondary-container);
 });