framework7 8.0.0 → 8.0.2

package/framework7-bundle-rtl.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 8.0.0
+ * Framework7 8.0.2
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: April 3, 2023
+ * Released on: April 12, 2023
  */
 
 /*====================
@@ -138,6 +138,9 @@
   font-weight: 400;
   font-style: normal;
 }
+html {
+  overscroll-behavior: none;
+}
 html {
   direction: rtl;
 }
@@ -155,6 +158,7 @@ body {
   width: 100%;
   background: #fff;
   overflow: hidden;
+  overflow-y: scroll;
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;
   font-family: var(--f7-font-family);
@@ -162,6 +166,21 @@ body {
   line-height: var(--f7-line-height);
   color: var(--f7-text-color);
 }
+body::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+  position: relative;
+}
+body::-webkit-scrollbar-track {
+  box-shadow: none;
+  background: transparent;
+}
+body::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  outline: none;
+  border-radius: 9999px;
+  position: relative;
+}
 .dark body,
 body.dark {
   background: #000;
@@ -671,6 +690,10 @@ html.device-full-viewport body {
   background: var(--f7-page-bg-color);
   z-index: 100;
 }
+.router-transition-f7-circle-forward .page,
+.router-transition-f7-circle-backward .page {
+  pointer-events: none;
+}
 .router-transition-f7-circle-forward:after {
   transform: scale(0);
   border-radius: 50%;
@@ -756,6 +779,10 @@ html.device-full-viewport body {
   background: #000;
   perspective: 1200px;
 }
+.router-transition-f7-cover-v-forward .page,
+.router-transition-f7-cover-v-backward .page {
+  pointer-events: none;
+}
 .router-transition-f7-cover-v-forward .page-next {
   animation: f7-cover-v-next-to-current var(--f7-page-cover-transition-duration) forwards;
 }
@@ -809,6 +836,10 @@ html.device-full-viewport body {
   background: #000;
   perspective: 1200px;
 }
+.router-transition-f7-cover-forward .page,
+.router-transition-f7-cover-backward .page {
+  pointer-events: none;
+}
 .router-transition-f7-cover-forward .page-next {
   animation: f7-cover-next-to-current var(--f7-page-cover-transition-duration) forwards;
 }
@@ -862,6 +893,10 @@ html.device-full-viewport body {
   background: var(--f7-page-bg-color);
   perspective: 1200px;
 }
+.router-transition-f7-dive-forward .page,
+.router-transition-f7-dive-backward .page {
+  pointer-events: none;
+}
 .router-transition-f7-dive-forward .page-next {
   animation: f7-dive-next-to-current var(--f7-page-dive-transition-duration) forwards;
 }
@@ -930,6 +965,10 @@ html.device-full-viewport body {
 .router-transition-f7-fade-backward {
   background: var(--f7-page-bg-color);
 }
+.router-transition-f7-fade-forward .page,
+.router-transition-f7-fade-backward .page {
+  pointer-events: none;
+}
 .ios .router-transition-f7-fade-forward .page-next,
 .md .router-transition-f7-fade-forward .page-next {
   opacity: 0;
@@ -979,6 +1018,7 @@ html.device-full-viewport body {
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   overflow: hidden;
+  pointer-events: none;
 }
 .router-transition-f7-flip-forward .page-next {
   transform-style: preserve-3d;
@@ -1036,12 +1076,18 @@ html.device-full-viewport body {
     transform: translateZ(0px) rotateY(0deg);
   }
 }
+.router-transition-f7-parallax-forward .page {
+  pointer-events: none;
+}
 .router-transition-f7-parallax-forward .page-next {
   animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;
 }
 .router-transition-f7-parallax-forward .page-current {
   animation: f7-parallax-current-to-prev var(--f7-page-parallax-transition-duration) forwards;
 }
+.router-transition-f7-parallax-backward .page {
+  pointer-events: none;
+}
 .router-transition-f7-parallax-backward .page-current {
   animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;
 }
@@ -1080,12 +1126,18 @@ html.device-full-viewport body {
     transform: translateX(0%);
   }
 }
+.router-transition-f7-push-forward .page {
+  pointer-events: none;
+}
 .router-transition-f7-push-forward .page-next {
   animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;
 }
 .router-transition-f7-push-forward .page-current {
   animation: f7-push-current-to-prev var(--f7-page-push-transition-duration) forwards;
 }
+.router-transition-f7-push-backward .page {
+  pointer-events: none;
+}
 .router-transition-f7-push-backward .page-current {
   animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;
 }
@@ -5004,7 +5056,9 @@ button .ripple-wave,
 .stepper-button .ripple-wave,
 .stepper-button-minus .ripple-wave,
 .stepper-button-plus .ripple-wave,
-.list.accordion-list .accordion-item-toggle .ripple-wave {
+.list.accordion-list .accordion-item-toggle .ripple-wave,
+.photo-browser .toolbar .link .ripple-wave,
+.ripple-blur .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;
@@ -5247,11 +5301,6 @@ i.icon {
   --f7-dialog-input-border-width: 0px;
   --f7-dialog-preloader-size: 32px;
   --f7-dialog-input-bg-color: transparent;
-  --f7-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
-}
-.md .dark,
-.md.dark {
-  --f7-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
 }
 .md,
 .md .dark,
@@ -5261,6 +5310,7 @@ i.icon {
   --f7-dialog-button-strong-text-color: var(--f7-md-on-primary);
   --f7-dialog-button-strong-pressed-bg-color: transparent;
   --f7-dialog-bg-color: var(--f7-md-surface-3);
+  --f7-dialog-input-placeholder-color: var(--f7-md-on-surface-variant);
   --f7-dialog-text-color: var(--f7-md-on-surface-variant);
   --f7-dialog-title-text-color: var(--f7-md-on-surface);
 }
@@ -10170,17 +10220,16 @@ html.with-modal-sheet-push-closing .framework7-root > .panel-in.panel-push.panel
   */
   --f7-floating-label-scale: calc(16 / 12);
   --f7-input-clear-button-size: 24px;
-  --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
   --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
 }
 .md .dark,
 .md.dark {
-  --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
   --f7-input-info-text-color: rgba(255, 255, 255, 0.45);
 }
 .md,
 .md .dark,
 .md [class*='color-'] {
+  --f7-input-placeholder-color: var(--f7-md-on-surface-variant);
   --f7-input-item-bg-color: var(--f7-md-surface-variant);
   --f7-input-border-color: var(--f7-md-outline);
   --f7-input-clear-button-color: var(--f7-md-on-surface-variant);
@@ -14372,20 +14421,20 @@ table.data-table {
 :root {
   --f7-fab-margin: 16px;
   --f7-fab-extended-text-font-size: 14px;
-  --f7-fab-extended-text-padding: 0 20px;
   --f7-fab-label-padding: 4px 12px;
   --f7-fab-label-font-size: inherit;
   --f7-fab-button-size: 40px;
-  /* --f7-fab-bg-color: var(--f7-theme-color)); */
 }
 .ios {
   /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
+  /* --f7-fab-bg-color: var(--f7-theme-color)); */
   --f7-fab-text-color: #fff;
   --f7-fab-border-radius: 50px;
   --f7-fab-size: 50px;
   --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
   --f7-fab-extended-text-transform: uppercase;
   --f7-fab-extended-size: 50px;
+  --f7-fab-extended-text-padding: 0 20px;
   --f7-fab-extended-text-font-weight: 600;
   --f7-fab-extended-text-letter-spacing: 0;
   --f7-fab-label-border-radius: 4px;
@@ -14399,22 +14448,20 @@ table.data-table {
   */
   --f7-fab-border-radius: 16px;
   --f7-fab-size: 56px;
-  --f7-fab-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-                       0px 6px 10px 0px rgba(0, 0, 0, 0.14),
-                       0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-  --f7-fab-extended-size: 48px;
+  --f7-fab-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  --f7-fab-extended-size: 56px;
+  --f7-fab-extended-text-padding: 0 16px;
   --f7-fab-extended-text-font-weight: 500;
   --f7-fab-extended-text-letter-spacing: 0;
   --f7-fab-extended-text-transform: none;
   --f7-fab-label-border-radius: 8px;
-  --f7-fab-label-box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-                             0px 3px 4px 0px rgba(0, 0, 0, 0.14),
-                             0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
 }
 .md,
 .md .dark,
 .md [class*='color-'] {
-  --f7-fab-text-color: var(--f7-md-on-primary);
+  --f7-fab-bg-color: var(--f7-md-primary-container);
+  --f7-fab-text-color: var(--f7-md-on-primary-container);
   --f7-fab-label-text-color: var(--f7-md-on-surface);
   --f7-fab-label-bg-color: var(--f7-md-surface-5);
 }
@@ -14934,10 +14981,10 @@ table.data-table {
 }
 .ios .dark,
 .ios.dark {
+  --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
   --f7-searchbar-input-text-color: #fff;
   --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
   --f7-searchbar-input-bg-color: #2a2a2a;
-  --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
 }
 .md {
   --f7-searchbar-border-color: transparent;
@@ -16019,6 +16066,7 @@ table.data-table {
   --f7-messagebar-attachment-border-radius: 12px;
   --f7-messagebar-attachment-height: 155px;
   --f7-messagebar-attachment-landscape-height: 120px;
+  --f7-messagebar-textarea-placeholder-color: rgba(0, 0, 0, 0.4);
   --f7-messagebar-textarea-text-color: #000;
   --f7-messagebar-textarea-border: 1px solid #c8c8cd;
   --f7-messagebar-attachments-border-color: #c8c8cd;
@@ -16027,6 +16075,7 @@ table.data-table {
 }
 .ios .dark,
 .ios.dark {
+  --f7-messagebar-textarea-placeholder-color: rgba(255, 255, 255, 0.4);
   --f7-messagebar-textarea-text-color: #fff;
   --f7-messagebar-textarea-border: 1px solid var(--f7-bars-border-color);
   --f7-messagebar-attachments-border-color: var(--f7-bars-border-color);
@@ -16051,6 +16100,7 @@ table.data-table {
 .md,
 .md .dark,
 .md [class*='color-'] {
+  --f7-messagebar-textarea-placeholder-color: var(--f7-md-on-surface-variant);
   --f7-messagebar-textarea-bg-color: var(--f7-md-surface-variant);
   --f7-messagebar-bg-color: var(--f7-md-surface);
   --f7-messagebar-textarea-text-color: var(--f7-md-on-surface);
@@ -16125,6 +16175,9 @@ table.data-table {
   line-height: var(--f7-messagebar-textarea-line-height);
   border: var(--f7-messagebar-textarea-border);
 }
+.messagebar textarea::placeholder {
+  color: var(--f7-messagebar-textarea-placeholder-color);
+}
 .messagebar a.link {
   align-self: flex-end;
   flex-shrink: 0;
@@ -18760,18 +18813,17 @@ a.treeview-item-root.active-state {
   --f7-text-editor-text-color: #000;
   --f7-text-editor-bg-color: #fff;
   --f7-text-editor-button-divider-color: rgba(0, 0, 0, 0.15);
-  --f7-text-editor-placeholder-color: rgba(0, 0, 0, 0.35);
 }
 :root .dark,
 :root.dark {
   --f7-text-editor-bg-color: #121212;
   --f7-text-editor-text-color: #fff;
-  --f7-text-editor-placeholder-color: rgba(255, 255, 255, 0.35);
   --f7-text-editor-button-divider-color: rgba(255, 255, 255, 0.15);
 }
 .ios {
   --f7-text-editor-toolbar-padding: 6px;
   --f7-text-editor-button-border-radius: 2px;
+  --f7-text-editor-placeholder-color: rgba(0, 0, 0, 0.35);
   --f7-text-editor-toolbar-border-color: rgba(0, 0, 0, 0.25);
   --f7-text-editor-toolbar-bg-color: #fff;
   --f7-text-editor-border-color: rgba(0, 0, 0, 0.1);
@@ -18779,6 +18831,7 @@ a.treeview-item-root.active-state {
 }
 .ios .dark,
 .ios.dark {
+  --f7-text-editor-placeholder-color: rgba(255, 255, 255, 0.35);
   --f7-text-editor-toolbar-bg-color: #121212;
   --f7-text-editor-toolbar-border-color: rgba(255, 255, 255, 0.1);
   --f7-text-editor-toolbar-bg-color: #202020;
@@ -18792,6 +18845,7 @@ a.treeview-item-root.active-state {
 .md,
 .md .dark,
 .md [class*='color-'] {
+  --f7-text-editor-placeholder-color: var(--f7-md-on-surface-variant);
   --f7-text-editor-toolbar-bg-color: var(--f7-md-surface-1);
   --f7-text-editor-border-color: var(--f7-md-outline);
   --f7-text-editor-button-text-color: var(--f7-md-on-surface);