reduce the size of the bottom save button

src/mobile-ltr.scss

@@ -22,6 +22,7 @@
 @import 'framework7/components/range/css';
 @import 'framework7/components/grid/css';
 @import 'framework7/components/picker/css';
+@import 'framework7/components/fab/css';
 @import 'framework7/components/infinite-scroll/css';
 @import 'framework7/components/pull-to-refresh/css';
 @import 'framework7/components/searchbar/css';

src/mobile-main.ts

@@ -26,6 +26,7 @@ import Framework7Toggle from 'framework7/components/toggle';
 import Framework7Range from 'framework7/components/range';
 import Framework7Grid from 'framework7/components/grid';
 import Framework7Picker from 'framework7/components/picker';
+import Framework7Fab from 'framework7/components/fab';
 import Framework7InfiniteScroll from 'framework7/components/infinite-scroll';
 import Framework7PullToRefresh from 'framework7/components/pull-to-refresh';
 import Framework7Searchbar from 'framework7/components/searchbar';
@@ -119,6 +120,7 @@ Framework7.use([
     Framework7Range,
     Framework7Grid,
     Framework7Picker,
+    Framework7Fab,
     Framework7InfiniteScroll,
     Framework7PullToRefresh,
     Framework7Searchbar,

src/mobile-rtl.scss

@@ -22,6 +22,7 @@
 @import '../node_modules/framework7/components/range/range-rtl.css';
 @import '../node_modules/framework7/components/grid/grid-rtl.css';
 @import '../node_modules/framework7/components/picker/picker-rtl.css';
+@import '../node_modules/framework7/components/fab/fab-rtl.css';
 @import '../node_modules/framework7/components/infinite-scroll/infinite-scroll-rtl.css';
 @import '../node_modules/framework7/components/pull-to-refresh/pull-to-refresh-rtl.css';
 @import '../node_modules/framework7/components/searchbar/searchbar-rtl.css';

src/styles/mobile/global.scss

@@ -92,6 +92,15 @@ input[type=number] {
     --f7-toolbar-inner-padding-left: 8px;
     --f7-toolbar-inner-padding-right: 8px;
     --f7-toolbar-height: 48px;
+    --f7-fab-size: 44px;
+    --f7-fab-extended-size: 44px;
+    --f7-fab-bg-color: var(--f7-glass-bg-color);
+    --f7-fab-pressed-bg-color: var(--f7-glass-bg-color);
+    --f7-fab-text-color: var(--f7-theme-color);
+    --f7-fab-extended-text-font-size: var(--f7-navbar-font-size);
+    --f7-fab-extended-text-font-weight: inherit;
+    --f7-fab-extended-text-transform: inherit;
+    --f7-glass-shadow-fab: var(--f7-glass-shadow);
     --f7-popup-push-offset: 5px;
     --f7-color-gray: #8e8e93;
     --f7-color-gray-rgb: 142, 142, 147;
@@ -100,6 +109,13 @@ input[type=number] {
     --f7-notification-title-text-transform: unset;
 }
 
+:root.dark {
+    --f7-fab-bg-color: var(--f7-glass-bg-color);
+    --f7-fab-pressed-bg-color: var(--f7-glass-bg-color);
+    --f7-fab-text-color: var(--f7-theme-color);
+    --f7-glass-shadow-fab: var(--f7-glass-shadow);
+}
+
 .color-gray {
     --f7-theme-color: var(--f7-color-gray);
     --f7-theme-color-rgb: var(--f7-color-gray-rgb);

src/views/mobile/transactions/EditPage.vue

@@ -469,11 +469,12 @@
             </f7-actions-group>
         </f7-actions>
 
-        <f7-toolbar tabbar bottom v-if="mode !== TransactionEditPageMode.View">
-            <f7-link :class="{ 'disabled': inputIsEmpty || submitting }" @click="save">
-                <span class="tabbar-primary-link">{{ tt(saveButtonTitle) }}</span>
-            </f7-link>
-        </f7-toolbar>
+        <template #fixed>
+            <f7-fab position="right-bottom" :class="{ 'disabled': inputIsEmpty || submitting }"
+                    :text="tt(saveButtonTitle)"
+                    @click="save" v-if="mode !== TransactionEditPageMode.View">
+            </f7-fab>
+        </template>
 
         <f7-photo-browser ref="pictureBrowser" type="popup" navbar-of-text="/"
                           :navbar-show-count="true" :exposition="false"