framework7 8.0.0-beta.1 → 8.0.0-beta.3

package/framework7-bundle.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 8.0.0-beta.1
+ * Framework7 8.0.0-beta.3
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2022 Vladimir Kharlampidi
+ * Copyright 2014-2023 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 16, 2022
+ * Released on: March 9, 2023
  */
 
 /*====================
@@ -2594,6 +2594,7 @@ html.device-full-viewport body {
 .ios .tabbar-icons .tab-link i + span,
 .ios .tabbar-icons .link i + span {
   margin: 0;
+  margin-top: 4px;
 }
 @media (min-width: 768px) and (min-height: 600px) {
   .ios .tabbar .tab-link,
@@ -5591,6 +5592,7 @@ html.with-modal-dialog .page-content {
 }
 .md .dialog-buttons-vertical .dialog-button + .dialog-button {
   margin-top: 8px;
+  margin-left: 0;
 }
 .md .dialog-input {
   padding: 0;
@@ -6022,6 +6024,10 @@ html.with-modal-popup-push-closing .framework7-root > .view.dark:after {
   background-color: var(--f7-popover-bg-color);
   border-radius: var(--f7-popover-border-radius);
   will-change: transform, opacity;
+  --f7-safe-area-top: 0px;
+  --f7-safe-area-left: 0px;
+  --f7-safe-area-right: 0px;
+  --f7-safe-area-bottom: 0px;
 }
 .popover .list {
   margin: 0;
@@ -10805,6 +10811,14 @@ label.item-checkbox.disabled,
   opacity: 0.55 !important;
   pointer-events: none !important;
 }
+label.item-checkbox.item-checkbox-icon-end .item-inner {
+  padding-right: 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;
+  right: calc(var(--f7-safe-area-right) + 16px);
+  margin-right: 0;
+}
 .ios .icon-checkbox:after,
 .ios .checkbox i:after {
   content: 'checkbox_ios';
@@ -13153,26 +13167,46 @@ label.item-radio.disabled,
   text-align: right;
   height: 100%;
   position: relative;
-  -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, white 20%, white 80%, transparent 95%, transparent);
   font-size: var(--f7-picker-column-font-size);
+  --f7-picker-mask-bg-color: transparent;
 }
-.picker-column {
-  position: relative;
-  max-height: 100%;
+.popover .picker-columns {
+  border-radius: 0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius);
 }
-.picker-column.picker-column-first:before,
-.picker-column.picker-column-last:after {
-  height: 100%;
-  width: 100vw;
-  position: absolute;
+.picker-columns::before,
+.picker-columns::after {
   content: '';
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 20%;
+  z-index: 100;
+  pointer-events: none;
+}
+.page .picker-columns {
+  --f7-picker-mask-bg-color: var(--f7-page-bg-color);
+}
+.block-strong .picker-columns {
+  --f7-picker-mask-bg-color: var(--f7-block-strong-bg-color);
+}
+.picker-sheet .picker-columns {
+  --f7-picker-mask-bg-color: var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color));
+}
+.picker-popover .picker-columns {
+  --f7-picker-mask-bg-color: var(--f7-popover-bg-color);
+}
+.picker-columns::before {
   top: 0;
+  background-image: linear-gradient(to bottom, var(--f7-picker-mask-bg-color), transparent);
 }
-.picker-column.picker-column-first:before {
-  right: 100%;
+.picker-columns::after {
+  bottom: 0;
+  background-image: linear-gradient(to top, var(--f7-picker-mask-bg-color), transparent);
 }
-.picker-column.picker-column-last:after {
-  left: 100%;
+.picker-column {
+  position: relative;
+  max-height: 100%;
+  z-index: 10;
 }
 .picker-column.picker-column-left {
   text-align: left;
@@ -16251,15 +16285,15 @@ table.data-table {
 }
 /* === Swiper === */
 /**
- * Swiper 9.0.0-beta.21
+ * Swiper 9.0.3
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
- * Copyright 2014-2022 Vladimir Kharlampidi
+ * Copyright 2014-2023 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 16, 2022
+ * Released on: February 6, 2023
  */
 
 /* FONT_START */
@@ -16412,6 +16446,7 @@ swiper-slide {
 }
 .swiper-centered > .swiper-wrapper > .swiper-slide {
   scroll-snap-align: center center;
+  scroll-snap-stop: always;
 }
 .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
   margin-inline-start: var(--swiper-centered-offset-before);
@@ -16485,14 +16520,15 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 :root {
   --swiper-navigation-size: 44px;
   /*
-  --swiper-navigation-offset: 10px;
+  --swiper-navigation-top-offset: 50%;
+  --swiper-navigation-sides-offset: 10px;
   --swiper-navigation-color: var(--swiper-theme-color);
   */
 }
 .swiper-button-prev,
 .swiper-button-next {
   position: absolute;
-  top: 50%;
+  top: var(--swiper-navigation-top-offset, 50%);
   width: calc(var(--swiper-navigation-size) / 44 * 27);
   height: var(--swiper-navigation-size);
   margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
@@ -16530,7 +16566,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 }
 .swiper-button-prev,
 .swiper-rtl .swiper-button-next {
-  left: var(--swiper-navigation-offset, 10px);
+  left: var(--swiper-navigation-sides-offset, 10px);
   right: auto;
 }
 .swiper-button-prev:after,
@@ -16539,7 +16575,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 }
 .swiper-button-next,
 .swiper-rtl .swiper-button-prev {
-  right: var(--swiper-navigation-offset, 10px);
+  right: var(--swiper-navigation-sides-offset, 10px);
   left: auto;
 }
 .swiper-button-next:after,
@@ -16552,7 +16588,11 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 :root {
   /*
   --swiper-pagination-color: var(--swiper-theme-color);
-  --swiper-pagination-offset: 10px;
+  --swiper-pagination-left: auto;
+  --swiper-pagination-right: 8px;
+  --swiper-pagination-bottom: 8px;
+  --swiper-pagination-top: auto;
+  --swiper-pagination-fraction-color: inherit;
   --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
   --swiper-pagination-progressbar-size: 4px;
   --swiper-pagination-bullet-size: 8px;
@@ -16584,7 +16624,8 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
 .swiper-pagination-custom,
 .swiper-horizontal > .swiper-pagination-bullets,
 .swiper-pagination-bullets.swiper-pagination-horizontal {
-  bottom: var(--swiper-pagination-offset, 10px);
+  bottom: var(--swiper-pagination-bottom, 8px);
+  top: var(--swiper-pagination-top, auto);
   left: 0;
   width: 100%;
 }
@@ -16643,7 +16684,8 @@ button.swiper-pagination-bullet {
 }
 .swiper-vertical > .swiper-pagination-bullets,
 .swiper-pagination-vertical.swiper-pagination-bullets {
-  right: var(--swiper-pagination-offset, 10px);
+  right: var(--swiper-pagination-right, 8px);
+  left: var(--swiper-pagination-left, auto);
   top: 50%;
   transform: translate3d(0px, -50%, 0);
 }
@@ -16681,6 +16723,10 @@ button.swiper-pagination-bullet {
 :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
   transition: 200ms transform, 200ms right;
 }
+/* Fraction */
+.swiper-pagination-fraction {
+  color: var(--swiper-pagination-fraction-color, inherit);
+}
 /* Progress */
 .swiper-pagination-progressbar {
   background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
@@ -16724,10 +16770,14 @@ button.swiper-pagination-bullet {
 :root {
   /*
   --swiper-scrollbar-border-radius: 10px;
-  --swiper-scrollbar-offset: 3px;
+  --swiper-scrollbar-top: auto;
+  --swiper-scrollbar-bottom: 4px;
+  --swiper-scrollbar-left: auto;
+  --swiper-scrollbar-right: 4px;
+  --swiper-scrollbar-sides-offset: 1%;
   --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
   --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
-  --swiper-scrollbar-size: 5px;
+  --swiper-scrollbar-size: 4px;
   */
 }
 .swiper-scrollbar {
@@ -16743,20 +16793,22 @@ button.swiper-pagination-bullet {
 .swiper-horizontal > .swiper-scrollbar,
 .swiper-scrollbar.swiper-scrollbar-horizontal {
   position: absolute;
-  left: 1%;
-  bottom: var(--swiper-scrollbar-offset, 3px);
+  left: var(--swiper-scrollbar-sides-offset, 1%);
+  bottom: var(--swiper-scrollbar-bottom, 4px);
+  top: var(--swiper-scrollbar-top, auto);
   z-index: 50;
-  height: var(--swiper-scrollbar-size, 5px);
-  width: 98%;
+  height: var(--swiper-scrollbar-size, 4px);
+  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
 }
 .swiper-vertical > .swiper-scrollbar,
 .swiper-scrollbar.swiper-scrollbar-vertical {
   position: absolute;
-  right: var(--swiper-scrollbar-offset, 3px);
-  top: 1%;
+  left: var(--swiper-scrollbar-left, auto);
+  right: var(--swiper-scrollbar-right, 4px);
+  top: var(--swiper-scrollbar-sides-offset, 1%);
   z-index: 50;
-  width: var(--swiper-scrollbar-size, 5px);
-  height: 98%;
+  width: var(--swiper-scrollbar-size, 4px);
+  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
 }
 .swiper-scrollbar-drag {
   height: 100%;

package/framework7-bundle.esm.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 8.0.0-beta.1
+ * Framework7 8.0.0-beta.3
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2022 Vladimir Kharlampidi
+ * Copyright 2014-2023 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: December 16, 2022
+ * Released on: March 9, 2023
  */
 
 import $ from './shared/dom7.js';