framework7 7.1.5 → 8.0.0-beta.2

package/components/card/card.js

@@ -9,11 +9,9 @@ const CardExpandable = {
     if (cardEl === void 0) {
       cardEl = '.card-expandable';
     }
-
     if (animate === void 0) {
       animate = true;
     }
-
     const app = this;
     const device = getDevice();
     const document = getDocument();
@@ -23,17 +21,13 @@ const CardExpandable = {
     if ($cardEl.hasClass('card-opened') || $cardEl.hasClass('card-opening') || $cardEl.hasClass('card-closing')) return;
     const $pageEl = $cardEl.parents('.page').eq(0);
     if (!$pageEl.length) return;
-
     if ($pageEl.find('.card-opened').length) {
       return;
     }
-
     let prevented;
-
     function prevent() {
       prevented = true;
     }
-
     $cardEl.trigger('card:beforeopen', {
       prevent
     });
@@ -44,50 +38,38 @@ const CardExpandable = {
     }, app.params.card, $cardEl.dataset());
     const $pageContentEl = $cardEl.parents('.page-content');
     let $backdropEl;
-
     if ($cardEl.attr('data-backdrop-el')) {
       $backdropEl = $($cardEl.attr('data-backdrop-el'));
     }
-
     if (!$backdropEl && cardParams.backdrop) {
       $backdropEl = $pageContentEl.find('.card-backdrop');
-
       if (!$backdropEl.length) {
         $backdropEl = $('<div class="card-backdrop"></div>');
         $pageContentEl.append($backdropEl);
       }
     }
-
     let $navbarEl;
     let $toolbarEl;
-
     if (cardParams.hideNavbarOnOpen) {
       $navbarEl = $pageEl.children('.navbar');
-
       if (!$navbarEl.length) {
         if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;
       }
     }
-
     if (cardParams.hideToolbarOnOpen) {
       $toolbarEl = $pageEl.children('.toolbar');
-
       if (!$toolbarEl.length) {
         $toolbarEl = $pageEl.parents('.view').children('.toolbar');
       }
-
       if (!$toolbarEl.length) {
         $toolbarEl = $pageEl.parents('.views').children('.toolbar');
       }
     }
-
     const currTransform = $cardEl.css('transform');
     let hasTransform;
-
     if (currTransform && currTransform.match(/[2-9]/)) {
       hasTransform = true;
     }
-
     const $cardContentEl = $cardEl.children('.card-content');
     const $cardSizeEl = $(document.createElement('div')).addClass('card-expandable-size');
     $cardEl.append($cardSizeEl);
@@ -98,32 +80,25 @@ const CardExpandable = {
     let maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;
     let maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;
     let statusbarHeight;
-
     if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {
       statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);
       if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;
     }
-
     if (statusbarHeight) {
       maxHeight -= statusbarHeight;
     }
-
     let scaleX = maxWidth / cardWidth;
     let scaleY = maxHeight / cardHeight;
     let offset = $cardEl.offset();
     let pageOffset = $pageEl.offset();
-
     if (statusbarHeight) {
       pageOffset.top += statusbarHeight / 2;
     }
-
     offset.left -= pageOffset.left;
     let cardLeftOffset;
     let cardTopOffset;
-
     if (hasTransform) {
       const transformValues = currTransform.replace(/matrix\(|\)/g, '').split(',').map(el => el.trim());
-
       if (transformValues && transformValues.length > 1) {
         const scale = parseFloat(transformValues[0]);
         cardLeftOffset = offset.left - cardWidth * (1 - scale) / 2;
@@ -138,19 +113,15 @@ const CardExpandable = {
       cardTopOffset = offset.top - pageOffset.top;
       if (app.rtl) cardLeftOffset -= $cardEl[0].scrollLeft;
     }
-
     cardLeftOffset -= (pageWidth - maxWidth) / 2;
     cardTopOffset -= (pageHeight - maxHeight) / 2;
     let cardRightOffset = maxWidth - cardWidth - cardLeftOffset;
-
     if (app.rtl) {
       [cardLeftOffset, cardRightOffset] = [cardRightOffset, cardLeftOffset];
     }
-
     let cardBottomOffset = maxHeight - cardHeight - cardTopOffset;
     let translateX = (cardRightOffset - cardLeftOffset) / 2;
     let translateY = (cardBottomOffset - cardTopOffset) / 2;
-
     if (cardParams.hideNavbarOnOpen && $navbarEl && $navbarEl.length) {
       if ($navbarEl.closest('.navbar-hidden').length) {
         // Was hidden
@@ -160,7 +131,6 @@ const CardExpandable = {
         app.navbar.hide($navbarEl, cardParams.animate, cardParams.hideStatusbarOnOpen, true);
       }
     }
-
     if (cardParams.hideToolbarOnOpen && $toolbarEl && $toolbarEl.length) {
       if ($toolbarEl.closest('.toolbar-hidden').length) {
         // Was hidden
@@ -170,42 +140,33 @@ const CardExpandable = {
         app.toolbar.hide($toolbarEl, cardParams.animate);
       }
     }
-
     if ($backdropEl) {
       $backdropEl.removeClass('card-backdrop-out').addClass('card-backdrop-in');
     }
-
     $cardEl.removeClass('card-transitioning');
-
     if (cardParams.animate) {
       $cardEl.addClass('card-opening');
     }
-
     $cardEl.trigger('card:open');
     app.emit('cardOpen', $cardEl[0]);
-
     function transitionEnd() {
       $pageEl.addClass('page-with-card-opened');
-
       if (device.ios && $pageContentEl.length) {
         $pageContentEl.css('height', `${$pageContentEl[0].offsetHeight + 1}px`);
         setTimeout(() => {
           $pageContentEl.css('height', '');
         });
       }
-
       $cardEl.addClass('card-opened');
       $cardEl.removeClass('card-opening');
       $cardEl.trigger('card:opened');
       app.emit('cardOpened', $cardEl[0], $pageEl[0]);
     }
-
     $cardContentEl.css({
       width: `${maxWidth}px`,
       height: `${maxHeight}px`
     }).transform(`translate3d(${app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX}px, 0px, 0) scale(${1 / scaleX}, ${1 / scaleY})`);
     $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);
-
     if (cardParams.animate) {
       $cardEl.transitionEnd(() => {
         transitionEnd();
@@ -213,7 +174,6 @@ const CardExpandable = {
     } else {
       transitionEnd();
     }
-
     function onResize() {
       $cardEl.removeClass('card-transitioning');
       cardWidth = $cardEl[0].offsetWidth;
@@ -223,26 +183,21 @@ const CardExpandable = {
       maxWidth = $cardSizeEl[0].offsetWidth || pageWidth;
       maxHeight = $cardSizeEl[0].offsetHeight || pageHeight;
       statusbarHeight = 0;
-
       if ($navbarEl && !cardParams.hideStatusbarOnOpen && maxHeight === pageHeight) {
         statusbarHeight = parseInt($navbarEl.css('--f7-safe-area-top'), 10);
         if (Number.isNaN(statusbarHeight)) statusbarHeight = 0;
       }
-
       if (statusbarHeight) {
         maxHeight -= statusbarHeight;
       }
-
       scaleX = maxWidth / cardWidth;
       scaleY = maxHeight / cardHeight;
       $cardEl.transform('translate3d(0px, 0px, 0) scale(1)');
       offset = $cardEl.offset();
       pageOffset = $pageEl.offset();
-
       if (statusbarHeight) {
         pageOffset.top += statusbarHeight / 2;
       }
-
       offset.left -= pageOffset.left;
       offset.top -= pageOffset.top;
       cardLeftOffset = offset.left - (pageWidth - maxWidth) / 2;
@@ -250,11 +205,9 @@ const CardExpandable = {
       cardTopOffset = offset.top - (pageHeight - maxHeight) / 2;
       cardRightOffset = maxWidth - cardWidth - cardLeftOffset;
       cardBottomOffset = maxHeight - cardHeight - cardTopOffset;
-
       if (app.rtl) {
         [cardLeftOffset, cardRightOffset] = [cardRightOffset, cardLeftOffset];
       }
-
       translateX = (cardRightOffset - cardLeftOffset) / 2;
       translateY = (cardBottomOffset - cardTopOffset) / 2;
       $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);
@@ -263,7 +216,6 @@ const CardExpandable = {
         height: `${maxHeight}px`
       }).transform(`translate3d(${app.rtl ? cardLeftOffset + translateX : -cardLeftOffset - translateX}px, 0px, 0) scale(${1 / scaleX}, ${1 / scaleY})`);
     }
-
     let cardScrollTop;
     let isTouched;
     let isMoved;
@@ -276,18 +228,15 @@ const CardExpandable = {
     let isV;
     let isH;
     let $cardScrollableEl;
-
     function onTouchStart(e) {
       if (!$(e.target).closest($cardEl).length) return;
       if (!$cardEl.hasClass('card-opened')) return;
       $cardScrollableEl = $cardEl.find(cardParams.scrollableEl);
-
       if ($cardScrollableEl[0] && $cardScrollableEl[0] !== $cardContentEl[0] && !$cardScrollableEl[0].contains(e.target)) {
         cardScrollTop = 0;
       } else {
         cardScrollTop = $cardScrollableEl.scrollTop();
       }
-
       isTouched = true;
       touchStartX = e.targetTouches[0].pageX;
       touchStartY = e.targetTouches[0].pageY;
@@ -295,16 +244,13 @@ const CardExpandable = {
       isV = false;
       isH = false;
     }
-
     function onTouchMove(e) {
       if (!isTouched) return;
       touchEndX = e.targetTouches[0].pageX;
       touchEndY = e.targetTouches[0].pageY;
-
       if (typeof isScrolling === 'undefined') {
         isScrolling = !!(isScrolling || Math.abs(touchEndY - touchStartY) > Math.abs(touchEndX - touchStartX));
       }
-
       if (!isH && !isV) {
         if (!isScrolling && e.targetTouches[0].clientX <= 50) {
           isH = true;
@@ -312,31 +258,24 @@ const CardExpandable = {
           isV = true;
         }
       }
-
       if (!(isH || isV) || isV && cardScrollTop !== 0) {
         isTouched = true;
         isMoved = true;
         return;
       }
-
       if (!isMoved) {
         $cardEl.removeClass('card-transitioning');
       }
-
       isMoved = true;
       progress = isV ? Math.max((touchEndY - touchStartY) / 150, 0) : Math.max((touchEndX - touchStartX) / (cardWidth / 2), 0);
-
       if (progress > 0 && isV || isH) {
         if (isV && device.ios && $cardScrollableEl[0] === $cardContentEl[0]) {
           $cardScrollableEl.css('-webkit-overflow-scrolling', 'auto');
           $cardScrollableEl.scrollTop(0);
         }
-
         e.preventDefault();
       }
-
       if (progress > 1) progress **= 0.3;
-
       if (progress > (isV ? 1.3 : 1.1)) {
         isTouched = false;
         isMoved = false;
@@ -345,51 +284,41 @@ const CardExpandable = {
         $cardEl.transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX * (1 - progress * 0.2)}, ${scaleY * (1 - progress * 0.2)})`);
       }
     }
-
     function onTouchEnd() {
       if (!isTouched || !isMoved) return;
       isTouched = false;
       isMoved = false;
-
       if (device.ios) {
         $cardScrollableEl.css('-webkit-overflow-scrolling', '');
       }
-
       if (progress >= 0.8) {
         app.card.close($cardEl);
       } else {
         $cardEl.addClass('card-transitioning').transform(`translate3d(${app.rtl ? -translateX : translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`);
       }
     }
-
     $cardEl[0].detachEventHandlers = function detachEventHandlers() {
       app.off('resize', onResize);
-
       if (support.touch && cardParams.swipeToClose) {
         app.off('touchstart:passive', onTouchStart);
         app.off('touchmove:active', onTouchMove);
         app.off('touchend:passive', onTouchEnd);
       }
     };
-
     app.on('resize', onResize);
-
     if (support.touch && cardParams.swipeToClose) {
       app.on('touchstart:passive', onTouchStart);
       app.on('touchmove:active', onTouchMove);
       app.on('touchend:passive', onTouchEnd);
     }
   },
-
   close(cardEl, animate) {
     if (cardEl === void 0) {
       cardEl = '.card-expandable.card-opened';
     }
-
     if (animate === void 0) {
       animate = true;
     }
-
     const app = this;
     const device = getDevice();
     const $cardEl = $(cardEl).eq(0);
@@ -406,69 +335,53 @@ const CardExpandable = {
     let $navbarEl;
     let $toolbarEl;
     let $backdropEl;
-
     if ($cardEl.attr('data-backdrop-el')) {
       $backdropEl = $($cardEl.attr('data-backdrop-el'));
     }
-
     if (cardParams.backdrop) {
       $backdropEl = $cardEl.parents('.page-content').find('.card-backdrop');
     }
-
     if (cardParams.hideNavbarOnOpen) {
       $navbarEl = $pageEl.children('.navbar');
-
       if (!$navbarEl.length) {
         if ($pageEl[0].f7Page) $navbarEl = $pageEl[0].f7Page.$navbarEl;
       }
-
       if ($navbarEl && $navbarEl.length && !$cardEl[0].f7KeepNavbarOnClose) {
         app.navbar.show($navbarEl, cardParams.animate, true);
       }
     }
-
     if (cardParams.hideToolbarOnOpen) {
       $toolbarEl = $pageEl.children('.toolbar');
-
       if (!$toolbarEl.length) {
         $toolbarEl = $pageEl.parents('.view').children('.toolbar');
       }
-
       if (!$toolbarEl.length) {
         $toolbarEl = $pageEl.parents('.views').children('.toolbar');
       }
-
       if ($toolbarEl && $toolbarEl.length && !$cardEl[0].f7KeepToolbarOnClose) {
         app.toolbar.show($toolbarEl, cardParams.animate);
       }
     }
-
     $pageEl.removeClass('page-with-card-opened');
-
     if (device.ios && $pageContentEl.length) {
       $pageContentEl.css('height', `${$pageContentEl[0].offsetHeight + 1}px`);
       setTimeout(() => {
         $pageContentEl.css('height', '');
       });
     }
-
     if ($backdropEl && $backdropEl.length) {
       $backdropEl.removeClass('card-backdrop-in').addClass('card-backdrop-out');
     }
-
     $cardEl.removeClass('card-opened card-transitioning');
-
     if (cardParams.animate) {
       $cardEl.addClass('card-closing');
     } else {
       $cardEl.addClass('card-no-transition');
     }
-
     $cardEl.transform('');
     $cardEl.trigger('card:close');
     app.emit('cardClose', $cardEl[0], $pageEl[0]);
     const animateWidth = $cardEl.hasClass('card-expandable-animate-width');
-
     function transitionEnd() {
       if (!animateWidth) {
         $cardContentEl.css({
@@ -476,30 +389,24 @@ const CardExpandable = {
           height: ''
         });
       }
-
       if ($backdropEl && $backdropEl.length) {
         $backdropEl.removeClass('card-backdrop-in card-backdrop-out');
       }
-
       $cardEl.removeClass('card-closing card-no-transition');
       $cardEl.trigger('card:closed');
       $cardEl.find('.card-expandable-size').remove();
       app.emit('cardClosed', $cardEl[0], $pageEl[0]);
     }
-
     if (animateWidth) {
       $cardContentEl.css({
         width: '',
         height: ''
       });
     }
-
     $cardContentEl.transform('').scrollTop(0, animate ? 300 : 0);
-
     if ($cardScrollableEl.length && $cardScrollableEl[0] !== $cardContentEl[0]) {
       $cardScrollableEl.scrollTop(0, animate ? 300 : 0);
     }
-
     if (animate) {
       $cardContentEl.transitionEnd(() => {
         transitionEnd();
@@ -507,29 +414,24 @@ const CardExpandable = {
     } else {
       transitionEnd();
     }
-
     if ($cardEl[0].detachEventHandlers) {
       $cardEl[0].detachEventHandlers();
       delete $cardEl[0].detachEventHandlers;
     }
   },
-
   toggle(cardEl, animate) {
     if (cardEl === void 0) {
       cardEl = '.card-expandable';
     }
-
     const app = this;
     const $cardEl = $(cardEl).eq(0);
     if (!$cardEl.length) return;
-
     if ($cardEl.hasClass('card-opened')) {
       app.card.close($cardEl, animate);
     } else {
       app.card.open($cardEl, animate);
     }
   }
-
 };
 export default {
   name: 'card',
@@ -544,39 +446,31 @@ export default {
       backdrop: true
     }
   },
-
   create() {
     const app = this;
     bindMethods(app, {
       card: CardExpandable
     });
   },
-
   on: {
     pageBeforeIn(page) {
       const app = this;
-
       if (app.params.card.hideNavbarOnOpen && page.navbarEl && page.$el.find('.card-opened.card-expandable').length) {
         app.navbar.hide(page.navbarEl, true, app.params.card.hideStatusbarOnOpen, true);
       }
-
       if (app.params.card.hideToolbarOnOpen && page.$el.find('.card-opened.card-expandable').length) {
         let $toolbarEl = page.$el.children('.toolbar');
-
         if (!$toolbarEl.length) {
           $toolbarEl = page.$el.parents('.view').children('.toolbar');
         }
-
         if (!$toolbarEl.length) {
           $toolbarEl = page.$el.parents('.views').children('.toolbar');
         }
-
         if ($toolbarEl && $toolbarEl.length) {
           app.toolbar.hide($toolbarEl);
         }
       }
     }
-
   },
   clicks: {
     '.card-close': function closeCard($clickedEl, data) {
@@ -599,13 +493,11 @@ export default {
       if (app.params.card.closeByBackdropClick) needToClose = true;
       const $openedCardEl = $('.card-opened');
       if (!$openedCardEl.length) return;
-
       if ($openedCardEl.attr('data-close-by-backdrop-click') === 'true') {
         needToClose = true;
       } else if ($openedCardEl.attr('data-close-by-backdrop-click') === 'false') {
         needToClose = false;
       }
-
       if (needToClose) app.card.close($openedCardEl);
     }
   }

package/components/card/card.less

@@ -19,7 +19,7 @@
   margin-bottom: var(--f7-card-margin-vertical);
   margin-left: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-left));
   margin-right: calc(var(--f7-card-margin-horizontal) + var(--f7-safe-area-right));
-  box-shadow: var(--f7-card-box-shadow);
+  color: var(--f7-card-text-color);
   .list,
   .block {
     margin: 0;
@@ -28,20 +28,14 @@
     margin-left: 0;
     margin-right: 0;
   }
-  &.no-shadow {
-    box-shadow: none;
-  }
+}
+.card-raised {
+  box-shadow: var(--f7-card-box-shadow);
 }
 .card-outline,
 .ios .card-outline-ios,
-.md .card-outline-md,
-.aurora .card-outline-aurora {
-  box-shadow: none;
+.md .card-outline-md {
   border: 1px solid var(--f7-card-outline-border-color);
-  &.no-border,
-  &.no-hairlines {
-    border: none;
-  }
 }
 .card-content {
   position: relative;
@@ -67,6 +61,11 @@
   font-size: var(--f7-card-header-font-size);
   font-weight: var(--f7-card-header-font-weight);
   padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
+  &.card-header-divider,
+  .card-header-divider &,
+  .card-dividers & {
+    border-bottom: 1px solid var(--f7-card-header-border-color);
+  }
 }
 .card-footer {
   min-height: var(--f7-card-footer-min-height);
@@ -74,6 +73,11 @@
   font-size: var(--f7-card-footer-font-size);
   font-weight: var(--f7-card-footer-font-weight);
   padding: var(--f7-card-footer-padding-vertical) var(--f7-card-footer-padding-horizontal);
+  &.card-footer-divider,
+  .card-footer-divider &,
+  .card-dividers & {
+    border-top: 1px solid var(--f7-card-header-border-color);
+  }
   a.link {
     overflow: hidden;
   }
@@ -106,17 +110,9 @@
 }
 .card-header {
   border-radius: var(--f7-card-border-radius) var(--f7-card-border-radius) 0 0;
-  .hairline(bottom, var(--f7-card-header-border-color));
-  &.no-hairline {
-    .hairline-remove(bottom);
-  }
 }
 .card-footer {
   border-radius: 0 0 var(--f7-card-border-radius) var(--f7-card-border-radius);
-  .hairline(top, var(--f7-card-footer-border-color));
-  &.no-hairline {
-    .hairline-remove(top);
-  }
 }
 .card-expandable {
   overflow: hidden;
@@ -132,8 +128,10 @@
   margin-right: calc(var(--f7-card-expandable-margin-horizontal) + var(--f7-safe-area-right));
   margin-top: var(--f7-card-expandable-margin-vertical);
   margin-bottom: var(--f7-card-expandable-margin-vertical);
-  box-shadow: var(--f7-card-expandable-box-shadow);
   font-size: var(--f7-card-expandable-font-size);
+  &.card-raised {
+    box-shadow: var(--f7-card-expandable-box-shadow);
+  }
   &:not(.card-opened) {
     user-select: none;
   }
@@ -224,7 +222,6 @@
   .card-header {
     font-size: var(--f7-card-expandable-header-font-size);
     font-weight: var(--f7-card-expandable-header-font-weight);
-    .hairline-remove(bottom);
   }
 }
 .card-prevent-open {
@@ -308,6 +305,3 @@
 .if-md-theme({
   @import './card-md.less';
 });
-.if-aurora-theme({
-  @import './card-aurora.less';
-});

package/components/checkbox/checkbox-rtl.css

@@ -1 +1 @@
-:root{--f7-checkbox-icon-color:#fff;--f7-checkbox-extra-margin:0px}:root .dark,:root.dark{--f7-checkbox-inactive-color:rgba(255, 255, 255, 0.3);--f7-checkbox-icon-color:#000}.ios{--f7-checkbox-size:22px;--f7-checkbox-border-radius:50%;--f7-checkbox-border-width:1px;--f7-checkbox-inactive-color:#c7c7cc}.md{--f7-checkbox-size:18px;--f7-checkbox-border-radius:2px;--f7-checkbox-border-width:2px;--f7-checkbox-inactive-color:#6d6d6d}.aurora{--f7-checkbox-size:16px;--f7-checkbox-border-radius:4px;--f7-checkbox-border-width:1px;--f7-checkbox-inactive-color:rgba(0, 0, 0, 0.25)}.checkbox{position:relative;display:inline-block;vertical-align:middle;z-index:1;background-color:transparent;--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.5)}.checkbox i,.icon-checkbox{flex-shrink:0;border:var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);width:var(--f7-checkbox-size);height:var(--f7-checkbox-size);border-radius:var(--f7-checkbox-border-radius);box-sizing:border-box;position:relative;display:block}.checkbox i:after,.icon-checkbox:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;width:var(--f7-checkbox-size);height:var(--f7-checkbox-size);line-height:var(--f7-checkbox-size);top:calc(0px - var(--f7-checkbox-border-width));opacity:0;color:var(--f7-checkbox-icon-color);position:relative;transition-property:opacity;right:calc(0px - var(--f7-checkbox-border-width))}.checkbox input[type=checkbox]:not(:checked)~i:after,label.item-checkbox input[type=checkbox]:not(:checked)~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:not(:checked)~.icon-checkbox:after{font-size:0}.checkbox input[type=checkbox]:checked~i,.checkbox input[type=checkbox]:indeterminate~i,label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,label.item-checkbox input[type=checkbox]:checked~.icon-checkbox,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox{border-color:var(--f7-checkbox-active-color,var(--f7-theme-color));background-color:var(--f7-checkbox-active-color,var(--f7-theme-color))}.checkbox input[type=checkbox]:checked~i:after,.checkbox input[type=checkbox]:indeterminate~i:after,label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:checked~.icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{opacity:1}.checkbox input[type=checkbox]:indeterminate~i:after,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{font-size:0;content:'';position:absolute;top:50%;width:70%;background:var(--f7-checkbox-icon-color);height:2px;border-radius:2px;margin-top:-1px;transition:0s;right:15%}.checkbox,label.item-checkbox{cursor:pointer}.checkbox input[type=checkbox],.checkbox input[type=radio],label.item-checkbox input[type=checkbox],label.item-checkbox input[type=radio]{display:none}label.item-checkbox{transition-duration:.3s}label.item-checkbox .item-content .item-media,label.item-checkbox.item-content .item-media{align-self:center}label.item-checkbox>.icon-checkbox{margin-left:calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin))}label.item-checkbox.active-state{background-color:var(--f7-list-link-pressed-bg-color)}label.item-checkbox.active-state:after{background-color:transparent}.disabled label.item-checkbox,label.item-checkbox.disabled{opacity:.55;pointer-events:none}.ios .checkbox i:after,.ios .icon-checkbox:after{content:'checkbox_ios';font-size:21px}.ios label.item-checkbox.active-state{transition-duration:0s}.ios .checkbox input[type=checkbox]:indeterminate~i:after,.ios label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,.ios label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{height:2px;margin-top:-1px}.md .checkbox i,.md .icon-checkbox{transition-duration:.2s}.md .checkbox i:after,.md .icon-checkbox:after{content:'checkbox_md';transition-duration:.2s;font-size:15px}.md label.item-checkbox{position:relative;overflow:hidden;z-index:0}.aurora .checkbox i,.aurora .icon-checkbox{transition-duration:150ms}.aurora .checkbox i:after,.aurora .icon-checkbox:after{content:'checkbox_aurora';transition-duration:150ms;font-size:21px}.aurora .checkbox i:before,.aurora .icon-checkbox:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.1);opacity:0;transition-duration:150ms}.aurora .checkbox.active-state i:before{opacity:1}.aurora label.item-checkbox{position:relative;overflow:hidden;z-index:0}.aurora.device-desktop label.item-checkbox:hover:not(.active-state):not(.no-hover){background-color:var(--f7-list-link-hover-bg-color)}
+:root{--f7-checkbox-icon-color:#fff;--f7-checkbox-extra-margin:0px}:root .dark,:root.dark{--f7-checkbox-inactive-color:rgba(255, 255, 255, 0.3);--f7-checkbox-icon-color:#000}.ios{--f7-checkbox-size:22px;--f7-checkbox-border-radius:50%;--f7-checkbox-border-width:1px;--f7-checkbox-inactive-color:#c7c7cc}.md{--f7-checkbox-size:18px;--f7-checkbox-border-radius:2px;--f7-checkbox-border-width:2px;--f7-checkbox-inactive-color:#6d6d6d}.checkbox{position:relative;display:inline-block;vertical-align:middle;z-index:1;background-color:transparent;--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.5)}.checkbox i,.icon-checkbox{flex-shrink:0;border:var(--f7-checkbox-border-width) solid var(--f7-checkbox-inactive-color);width:var(--f7-checkbox-size);height:var(--f7-checkbox-size);border-radius:var(--f7-checkbox-border-radius);box-sizing:border-box;position:relative;display:block}.checkbox i:after,.icon-checkbox:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';text-align:center;display:block;width:100%;height:100%;font-size:20px;width:var(--f7-checkbox-size);height:var(--f7-checkbox-size);line-height:var(--f7-checkbox-size);top:calc(0px - var(--f7-checkbox-border-width));opacity:0;color:var(--f7-checkbox-icon-color);position:relative;transition-property:opacity;right:calc(0px - var(--f7-checkbox-border-width))}.checkbox i.color-white,.color-white .checkbox i,.color-white .icon-checkbox,.icon-checkbox.color-white{--f7-theme-color:#fff;--f7-checkbox-icon-color:#000}.checkbox i.color-black,.color-black .checkbox i,.color-black .icon-checkbox,.icon-checkbox.color-black{--f7-theme-color:#000;--f7-checkbox-icon-color:#fff}.checkbox input[type=checkbox]:not(:checked)~i:after,label.item-checkbox input[type=checkbox]:not(:checked)~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:not(:checked)~.icon-checkbox:after{font-size:0}.checkbox input[type=checkbox]:checked~i,.checkbox input[type=checkbox]:indeterminate~i,label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox,label.item-checkbox input[type=checkbox]:checked~.icon-checkbox,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox{border-color:var(--f7-checkbox-active-color,var(--f7-theme-color));background-color:var(--f7-checkbox-active-color,var(--f7-theme-color))}.checkbox input[type=checkbox]:checked~i:after,.checkbox input[type=checkbox]:indeterminate~i:after,label.item-checkbox input[type=checkbox]:checked~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:checked~.icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{opacity:1}.checkbox input[type=checkbox]:indeterminate~i:after,label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{font-size:0;content:'';position:absolute;top:50%;width:70%;background:var(--f7-checkbox-icon-color);height:2px;border-radius:2px;margin-top:-1px;transition:0s;right:15%}.checkbox,label.item-checkbox{cursor:pointer}.checkbox input[type=checkbox],.checkbox input[type=radio],label.item-checkbox input[type=checkbox],label.item-checkbox input[type=radio]{display:none}label.item-checkbox{transition-duration:.3s}label.item-checkbox .item-content .item-media,label.item-checkbox.item-content .item-media{align-self:center}label.item-checkbox>.icon-checkbox{margin-left:calc(var(--f7-list-item-media-margin) + var(--f7-checkbox-extra-margin))}label.item-checkbox.active-state{background-color:var(--f7-list-link-pressed-bg-color)}label.item-checkbox.active-state:after{background-color:transparent}.disabled label.item-checkbox,label.item-checkbox.disabled{opacity:.55;pointer-events:none}label.item-checkbox.item-checkbox-icon-end .item-inner{padding-left:calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) + var(--f7-checkbox-size) + 16px)}label.item-checkbox.item-checkbox-icon-end input[type=checkbox]~.icon-checkbox{position:absolute;left:calc(var(--f7-safe-area-left) + 16px);margin-left:0}.ios .checkbox i:after,.ios .icon-checkbox:after{content:'checkbox_ios';font-size:21px}.ios label.item-checkbox.active-state{transition-duration:0s}.ios .checkbox input[type=checkbox]:indeterminate~i:after,.ios label.item-checkbox input[type=checkbox]:indeterminate~* .icon-checkbox:after,.ios label.item-checkbox input[type=checkbox]:indeterminate~.icon-checkbox:after{height:2px;margin-top:-1px}.md .checkbox i,.md .icon-checkbox{transition-duration:.2s}.md .checkbox i:after,.md .icon-checkbox:after{content:'checkbox_md';transition-duration:.2s;font-size:15px}.md label.item-checkbox{position:relative;overflow:hidden;z-index:0}

package/components/checkbox/checkbox-vars.less

@@ -23,11 +23,3 @@
     --f7-checkbox-inactive-color: #6d6d6d;
   });
 });
-.aurora-vars({
-  --f7-checkbox-size: 16px;
-  --f7-checkbox-border-radius: 4px;
-  --f7-checkbox-border-width: 1px;
-  .light-vars({
-    --f7-checkbox-inactive-color: rgba(0,0,0,0.25);
-  });
-});