framework7 8.0.0-beta.8 → 8.0.0

package/framework7-lite-bundle.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.8
+ * Framework7 8.0.0
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: March 27, 2023
+ * Released on: April 3, 2023
  */
 
 import $ from './shared/dom7.js';

package/framework7-lite.esm.js

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.8
+ * Framework7 8.0.0
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: March 27, 2023
+ * Released on: April 3, 2023
  */
 
 import $ from './shared/dom7.js';

package/framework7-rtl.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0-beta.8
+ * Framework7 8.0.0
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: March 27, 2023
+ * Released on: April 3, 2023
  */
 
 /*====================
@@ -1421,8 +1421,12 @@ html.device-full-viewport body {
 .navbars > .navbar {
   position: absolute;
 }
-.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .navbar-bg,
-.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
+.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(
+    .with-searchbar-expandable-enabled
+  ) .navbar-bg,
+.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(
+    .with-searchbar-expandable-enabled
+  ) .title {
   opacity: 0;
 }
 .navbar-large .navbar-bg {
@@ -2095,37 +2099,6 @@ html.device-full-viewport body {
   padding: 0 12px;
   min-width: 48px;
 }
-.md .navbar a.link:before {
-  content: '';
-  width: 152%;
-  height: 152%;
-  left: -26%;
-  top: -26%;
-  position: absolute;
-  background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-  opacity: 0;
-  pointer-events: none;
-  transition-duration: 300ms;
-  transition-property: opacity;
-}
-.md .navbar a.link.icon-only:before,
-.md .navbar a.link.ripple-inset:before,
-.md .navbar a.link.searchbar-disable-button:before,
-.md .navbar a.link.input-clear-button:before,
-.md .navbar a.link.notification-close-button:before {
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
-}
-.md .navbar a.link.active-state:before {
-  opacity: 1;
-  transition-duration: 150ms;
-}
 .md .navbar a.icon-only {
   min-width: 0;
   flex-shrink: 0;
@@ -2629,37 +2602,6 @@ html.device-full-viewport body {
   padding: 0 12px;
   min-width: 48px;
 }
-.md .toolbar .link:before {
-  content: '';
-  width: 152%;
-  height: 152%;
-  left: -26%;
-  top: -26%;
-  position: absolute;
-  background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-  opacity: 0;
-  pointer-events: none;
-  transition-duration: 300ms;
-  transition-property: opacity;
-}
-.md .toolbar .link.icon-only:before,
-.md .toolbar .link.ripple-inset:before,
-.md .toolbar .link.searchbar-disable-button:before,
-.md .toolbar .link.input-clear-button:before,
-.md .toolbar .link.notification-close-button:before {
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
-}
-.md .toolbar .link.active-state:before {
-  opacity: 1;
-  transition-duration: 150ms;
-}
 .md .toolbar a.icon-only {
   min-width: 0;
   flex-shrink: 0;
@@ -2925,37 +2867,6 @@ html.device-full-viewport body {
   justify-content: center;
   padding: 0 12px;
 }
-.md .subnavbar a.link:before {
-  content: '';
-  width: 152%;
-  height: 152%;
-  left: -26%;
-  top: -26%;
-  position: absolute;
-  background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-  opacity: 0;
-  pointer-events: none;
-  transition-duration: 300ms;
-  transition-property: opacity;
-}
-.md .subnavbar a.link.icon-only:before,
-.md .subnavbar a.link.ripple-inset:before,
-.md .subnavbar a.link.searchbar-disable-button:before,
-.md .subnavbar a.link.input-clear-button:before,
-.md .subnavbar a.link.notification-close-button:before {
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background-image: radial-gradient(circle at center, var(--f7-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
-}
-.md .subnavbar a.link.active-state:before {
-  opacity: 1;
-  transition-duration: 150ms;
-}
 .md .subnavbar a.icon-only {
   flex-shrink: 0;
   padding: 0 12px;
@@ -3438,7 +3349,6 @@ html.device-full-viewport body {
   --f7-list-item-footer-line-height: 1.2;
   /*
   --f7-list-button-text-color: var(--f7-theme-color);
-  --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   */
   --f7-list-button-font-size: inherit;
   --f7-list-button-font-weight: 400;
@@ -3479,6 +3389,9 @@ html.device-full-viewport body {
   --f7-list-media-item-padding-vertical: 10px;
   --f7-list-media-item-title-font-weight: 600;
   --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
+  /*
+  --f7-list-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
+  */
   --f7-list-group-title-border-color: rgba(0, 0, 0, 0.22);
   --f7-list-group-title-height: 31px;
   --f7-list-group-title-font-size: inherit;
@@ -3531,6 +3444,9 @@ html.device-full-viewport body {
   --f7-list-media-item-padding-vertical: 12px;
   --f7-list-media-item-title-font-weight: 500;
   --f7-list-button-border-color: transparent;
+  /*
+  --f7-list-button-pressed-bg-color: transparent;
+  */
   --f7-list-group-title-border-color: transparent;
   --f7-list-group-title-height: 48px;
   --f7-list-group-title-font-size: 16px;
@@ -3538,11 +3454,7 @@ html.device-full-viewport body {
   --f7-menu-list-offset: 16px;
   --f7-menu-list-border-radius: 999px;
   --f7-menu-list-item-min-height: 56px;
-  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
-}
-.md .dark,
-.md.dark {
-  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
+  --f7-list-link-pressed-bg-color: transparent;
 }
 .md,
 .md .dark,
@@ -3815,9 +3727,12 @@ html.device-full-viewport body {
   font-weight: var(--f7-list-button-font-weight);
   text-align: var(--f7-list-button-text-align);
 }
-.list-button.active-state {
+.ios .list-button.active-state {
   background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
 }
+.md .list-button.active-state {
+  background-color: var(--f7-list-button-pressed-bg-color, transparent);
+}
 .list-dividers .list-button:after,
 .ios .list-dividers-ios .list-button:after,
 .md .list-dividers-md .list-button:after {
@@ -4479,6 +4394,9 @@ li.list-group-title:after,
 .ios .list .list-button.active-state {
   transition-duration: 0ms;
 }
+.md .menu-list .item-link.active-state {
+  background-color: var(--f7-menu-list-item-bg-color);
+}
 /* === Badge === */
 :root {
   --f7-badge-text-color: #fff;
@@ -4539,7 +4457,6 @@ li.list-group-title:after,
   --f7-button-border-width: 0px;
   /*
   --f7-button-text-color: var(--f7-theme-color);
-  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
   --f7-button-border-color: var(--f7-theme-color);
   --f7-button-fill-bg-color: var(--f7-theme-color);
@@ -4554,14 +4471,12 @@ li.list-group-title:after,
   --f7-segmented-strong-button-font-weight: 500;
   --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
   --f7-segmented-strong-button-text-color: #000;
-  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
   --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
   --f7-segmented-strong-button-active-text-color: #000;
   --f7-segmented-strong-button-active-bg-color: #fff;
 }
 :root .dark,
 :root.dark {
-  --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
   --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
   --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
   --f7-segmented-strong-button-text-color: #fff;
@@ -4578,6 +4493,7 @@ li.list-group-title:after,
   --f7-button-outline-border-color: var(--f7-theme-color);
   --f7-button-outline-border-width: 2px;
   /*
+  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
   --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
   */
   --f7-button-large-text-transform: uppercase;
@@ -4595,12 +4511,17 @@ li.list-group-title:after,
   --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
   --f7-button-tonal-text-color: var(--f7-theme-color);
   --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
+  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
 }
 .ios .dark,
 .ios.dark {
   --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
+  --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
 }
 .md {
+  /*
+  --f7-button-pressed-bg-color: transparent;
+  */
   --f7-button-text-transform: none;
   --f7-button-height: 40px;
   --f7-button-padding-horizontal: 16px;
@@ -4619,16 +4540,17 @@ li.list-group-title:after,
   --f7-button-small-font-weight: 500;
   --f7-segmented-strong-button-text-transform: none;
   --f7-segmented-strong-button-active-font-weight: 500;
+  --f7-segmented-strong-button-pressed-bg-color: transparent;
 }
 .md,
 .md .dark,
 .md [class*='color-'] {
-  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
+  --f7-button-fill-pressed-bg-color: transparent;
   --f7-button-fill-text-color: var(--f7-md-on-primary);
   --f7-button-outline-border-color: var(--f7-md-outline);
   --f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
   --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
-  --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
+  --f7-button-tonal-pressed-bg-color: transparent;
   --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
 }
 button {
@@ -4671,7 +4593,6 @@ button {
   box-shadow: var(--f7-button-box-shadow);
 }
 .button.active-state {
-  background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
   color: var(--f7-button-pressed-text-color, var(--f7-button-text-color, var(--f7-theme-color)));
 }
 input[type='submit'].button,
@@ -5003,6 +4924,9 @@ input[type='reset'].button {
 .ios .button {
   transition-duration: 100ms;
 }
+.ios .button.active-state {
+  background-color: var(--f7-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
+}
 .ios .button-fill,
 .ios .button-fill-ios {
   --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-tint));
@@ -5017,12 +4941,12 @@ input[type='reset'].button {
 }
 .md .button-fill,
 .md .button-fill-md {
-  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
+  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, transparent);
 }
 /* === Touch Ripple === */
 :root {
   --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
-  --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
+  --f7-touch-ripple-white: rgba(255, 255, 255, 0.15);
   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
 }
 .dark {
@@ -5057,13 +4981,33 @@ input[type='reset'].button {
   background-color: var(--f7-touch-ripple-color);
   animation: touch-ripple-in 200ms forwards;
 }
+.ripple-wave.ripple-wave-inset {
+  background-image: none;
+  background-color: var(--f7-touch-ripple-color);
+}
 .ripple-wave.ripple-wave-out {
   transform: var(--f7-ripple-transform);
-  animation: touch-ripple-out 300ms forwards;
-}
-.button-fill .ripple-wave,
-.picker-calendar-day .ripple-wave {
-  z-index: 1;
+  animation: touch-ripple-out 250ms forwards !important;
+}
+.item-link .ripple-wave,
+.list label.item-content .ripple-wave,
+.list-button .ripple-wave,
+.links-list a .ripple-wave,
+.button .ripple-wave,
+button .ripple-wave,
+.dialog-button .ripple-wave,
+.tab-link .ripple-wave,
+.item-radio .ripple-wave,
+.item-checkbox .ripple-wave,
+.actions-button .ripple-wave,
+.fab a .ripple-wave,
+.stepper-button .ripple-wave,
+.stepper-button-minus .ripple-wave,
+.stepper-button-plus .ripple-wave,
+.list.accordion-list .accordion-item-toggle .ripple-wave {
+  animation: touch-ripple-in-blurred 250ms forwards;
+  background-image: radial-gradient(closest-side circle at 50% 50%, var(--f7-touch-ripple-color) 50%, rgba(255, 255, 255, 0));
+  background-color: transparent;
 }
 .checkbox .ripple-wave,
 .radio .ripple-wave,
@@ -5073,6 +5017,14 @@ input[type='reset'].button {
 [class*='ripple-color-'] {
   --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
 }
+@keyframes touch-ripple-in-blurred {
+  from {
+    transform: translate3d(0px, 0px, 0) scale(0.5);
+  }
+  to {
+    transform: var(--f7-ripple-transform);
+  }
+}
 @keyframes touch-ripple-in {
   from {
     transform: translate3d(0px, 0px, 0) scale(0);