framework7 8.3.3 → 9.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (307) hide show
  1. package/components/actions/actions-ios.less +22 -15
  2. package/components/actions/actions-rtl.css +1 -1
  3. package/components/actions/actions-vars.less +4 -7
  4. package/components/actions/actions.css +1 -1
  5. package/components/actions/actions.js +2 -8
  6. package/components/actions/actions.less +0 -3
  7. package/components/app/app-class.d.ts +2 -0
  8. package/components/app/app-class.js +19 -15
  9. package/components/app/app-vars.less +41 -6
  10. package/components/app/app.less +1 -1
  11. package/components/area-chart/area-chart-class.js +18 -31
  12. package/components/area-chart/area-chart-rtl.css +1 -1
  13. package/components/area-chart/area-chart.css +1 -1
  14. package/components/autocomplete/autocomplete-class.js +13 -14
  15. package/components/autocomplete/autocomplete-ios.less +16 -0
  16. package/components/autocomplete/autocomplete-rtl.css +1 -1
  17. package/components/autocomplete/autocomplete.css +1 -1
  18. package/components/autocomplete/autocomplete.d.ts +3 -3
  19. package/components/autocomplete/autocomplete.js +3 -3
  20. package/components/autocomplete/autocomplete.less +7 -1
  21. package/components/block/block-vars.less +6 -6
  22. package/components/breadcrumbs/breadcrumbs-rtl.css +1 -1
  23. package/components/breadcrumbs/breadcrumbs.css +1 -1
  24. package/components/button/button-vars.less +13 -12
  25. package/components/button/button.less +2 -1
  26. package/components/calendar/calendar-class.js +20 -17
  27. package/components/calendar/calendar-ios.less +43 -0
  28. package/components/calendar/calendar-md.less +3 -0
  29. package/components/calendar/calendar-rtl.css +1 -1
  30. package/components/calendar/calendar-vars.less +24 -19
  31. package/components/calendar/calendar.css +1 -1
  32. package/components/calendar/calendar.d.ts +1 -1
  33. package/components/calendar/calendar.js +5 -8
  34. package/components/calendar/calendar.less +4 -2
  35. package/components/card/card-rtl.css +1 -1
  36. package/components/card/card-vars.less +5 -5
  37. package/components/card/card.css +1 -1
  38. package/components/card/card.js +3 -18
  39. package/components/card/card.less +1 -1
  40. package/components/color-picker/color-picker-class.js +11 -23
  41. package/components/color-picker/color-picker-ios.less +9 -0
  42. package/components/color-picker/color-picker-md.less +15 -0
  43. package/components/color-picker/color-picker-rtl.css +1 -1
  44. package/components/color-picker/color-picker-vars.less +9 -3
  45. package/components/color-picker/color-picker.css +1 -1
  46. package/components/color-picker/color-picker.d.ts +1 -2
  47. package/components/color-picker/color-picker.js +3 -7
  48. package/components/color-picker/color-picker.less +5 -25
  49. package/components/color-picker/modules/alpha-slider.js +2 -0
  50. package/components/color-picker/modules/brightness-slider.js +2 -0
  51. package/components/color-picker/modules/hs-spectrum.js +1 -2
  52. package/components/color-picker/modules/hsb-sliders.js +6 -0
  53. package/components/color-picker/modules/hue-slider.js +2 -0
  54. package/components/color-picker/modules/rgb-bars.js +6 -0
  55. package/components/color-picker/modules/rgb-sliders.js +6 -0
  56. package/components/color-picker/modules/sb-spectrum.js +1 -2
  57. package/components/color-picker/modules/wheel.js +1 -2
  58. package/components/data-table/data-table-class.js +1 -4
  59. package/components/data-table/data-table-ios.less +1 -1
  60. package/components/data-table/data-table-md.less +4 -2
  61. package/components/data-table/data-table-rtl.css +1 -1
  62. package/components/data-table/data-table.css +1 -1
  63. package/components/data-table/data-table.less +4 -4
  64. package/components/dialog/dialog-class.js +6 -3
  65. package/components/dialog/dialog-ios.less +10 -34
  66. package/components/dialog/dialog-md.less +2 -22
  67. package/components/dialog/dialog-rtl.css +1 -1
  68. package/components/dialog/dialog-vars.less +8 -10
  69. package/components/dialog/dialog.css +1 -1
  70. package/components/dialog/dialog.js +9 -27
  71. package/components/dialog/dialog.less +6 -25
  72. package/components/fab/fab-ios.less +2 -0
  73. package/components/fab/fab-rtl.css +1 -1
  74. package/components/fab/fab-vars.less +30 -6
  75. package/components/fab/fab.css +1 -1
  76. package/components/fab/fab.js +3 -12
  77. package/components/gauge/gauge-class.js +2 -8
  78. package/components/icon/icon-ios.less +10 -0
  79. package/components/icon/icon-md.less +9 -0
  80. package/components/icon/icon.less +2 -1
  81. package/components/input/input-ios.less +3 -2
  82. package/components/input/input-rtl.css +1 -1
  83. package/components/input/input.css +1 -1
  84. package/components/input/input.js +2 -5
  85. package/components/list/list-vars.less +7 -5
  86. package/components/list/list.less +1 -1
  87. package/components/list-index/list-index-class.js +3 -7
  88. package/components/login-screen/login-screen.js +2 -8
  89. package/components/login-screen/login-screen.less +1 -0
  90. package/components/messagebar/messagebar-class.js +5 -20
  91. package/components/messagebar/messagebar-ios.less +19 -14
  92. package/components/messagebar/messagebar-md.less +3 -0
  93. package/components/messagebar/messagebar-rtl.css +1 -1
  94. package/components/messagebar/messagebar-vars.less +12 -15
  95. package/components/messagebar/messagebar.css +1 -1
  96. package/components/messagebar/messagebar.less +4 -5
  97. package/components/messages/messages-class.js +25 -52
  98. package/components/messages/messages-ios.less +6 -2
  99. package/components/messages/messages-rtl.css +1 -1
  100. package/components/messages/messages-vars.less +1 -1
  101. package/components/messages/messages.css +1 -1
  102. package/components/navbar/navbar-ios.less +48 -672
  103. package/components/navbar/navbar-md.less +41 -1
  104. package/components/navbar/navbar-vars.less +4 -3
  105. package/components/navbar/navbar.js +28 -185
  106. package/components/navbar/navbar.less +8 -66
  107. package/components/notification/notification-class.js +6 -6
  108. package/components/notification/notification-ios.less +3 -8
  109. package/components/notification/notification-md.less +1 -20
  110. package/components/notification/notification-rtl.css +1 -1
  111. package/components/notification/notification-vars.less +13 -16
  112. package/components/notification/notification.css +1 -1
  113. package/components/notification/notification.less +8 -1
  114. package/components/page/page-ios.less +1 -8
  115. package/components/page/page-md.less +12 -11
  116. package/components/page/page.less +14 -12
  117. package/components/panel/panel-class.js +7 -28
  118. package/components/panel/panel-ios.less +4 -0
  119. package/components/panel/panel-rtl.css +2 -2
  120. package/components/panel/panel-vars.less +8 -5
  121. package/components/panel/panel.css +2 -2
  122. package/components/panel/panel.js +8 -32
  123. package/components/panel/panel.less +9 -9
  124. package/components/panel/resizable-panel.js +2 -4
  125. package/components/photo-browser/photo-browser-class.js +12 -47
  126. package/components/photo-browser/photo-browser-rtl.css +1 -1
  127. package/components/photo-browser/photo-browser-vars.less +8 -10
  128. package/components/photo-browser/photo-browser.css +1 -1
  129. package/components/photo-browser/photo-browser.d.ts +2 -4
  130. package/components/photo-browser/photo-browser.js +1 -3
  131. package/components/photo-browser/photo-browser.less +15 -71
  132. package/components/picker/picker-class.js +4 -5
  133. package/components/picker/picker-ios.less +6 -1
  134. package/components/picker/picker-md.less +9 -0
  135. package/components/picker/picker-rtl.css +1 -1
  136. package/components/picker/picker-vars.less +1 -1
  137. package/components/picker/picker.css +1 -1
  138. package/components/picker/picker.d.ts +1 -1
  139. package/components/picker/picker.js +2 -5
  140. package/components/picker/picker.less +0 -4
  141. package/components/pie-chart/pie-chart-class.js +7 -14
  142. package/components/popover/popover-class.js +22 -62
  143. package/components/popover/popover-ios.less +66 -2
  144. package/components/popover/popover-md.less +2 -27
  145. package/components/popover/popover-rtl.css +1 -1
  146. package/components/popover/popover-vars.less +2 -3
  147. package/components/popover/popover.css +1 -1
  148. package/components/popover/popover.d.ts +0 -2
  149. package/components/popover/popover.js +2 -9
  150. package/components/popover/popover.less +28 -50
  151. package/components/popup/popup-class.js +15 -9
  152. package/components/popup/popup-rtl.css +1 -1
  153. package/components/popup/popup-vars.less +2 -2
  154. package/components/popup/popup.css +1 -1
  155. package/components/popup/popup.js +2 -8
  156. package/components/popup/popup.less +6 -6
  157. package/components/preloader/preloader.js +2 -8
  158. package/components/progressbar/progressbar-md.less +12 -0
  159. package/components/progressbar/progressbar-rtl.css +1 -1
  160. package/components/progressbar/progressbar-vars.less +6 -5
  161. package/components/progressbar/progressbar.css +1 -1
  162. package/components/progressbar/progressbar.js +3 -12
  163. package/components/progressbar/progressbar.less +6 -0
  164. package/components/pull-to-refresh/pull-to-refresh-class.js +5 -12
  165. package/components/range/range-class.js +34 -27
  166. package/components/range/range-ios.less +60 -0
  167. package/components/range/range-md.less +67 -4
  168. package/components/range/range-rtl.css +1 -1
  169. package/components/range/range-vars.less +18 -13
  170. package/components/range/range.css +1 -1
  171. package/components/range/range.d.ts +3 -1
  172. package/components/range/range.js +2 -8
  173. package/components/range/range.less +11 -24
  174. package/components/searchbar/searchbar-class.js +7 -8
  175. package/components/searchbar/searchbar-ios.less +37 -13
  176. package/components/searchbar/searchbar-md.less +5 -0
  177. package/components/searchbar/searchbar-rtl.css +1 -1
  178. package/components/searchbar/searchbar-vars.less +13 -16
  179. package/components/searchbar/searchbar.css +1 -1
  180. package/components/searchbar/searchbar.js +4 -32
  181. package/components/searchbar/searchbar.less +4 -5
  182. package/components/sheet/sheet-class.js +21 -17
  183. package/components/sheet/sheet-ios.less +10 -0
  184. package/components/sheet/sheet-md.less +14 -0
  185. package/components/sheet/sheet-rtl.css +1 -1
  186. package/components/sheet/sheet-vars.less +5 -9
  187. package/components/sheet/sheet.css +1 -1
  188. package/components/sheet/sheet.js +2 -8
  189. package/components/sheet/sheet.less +5 -17
  190. package/components/skeleton/skeleton-rtl.css +1 -1
  191. package/components/skeleton/skeleton.css +1 -1
  192. package/components/smart-select/smart-select-class.js +15 -20
  193. package/components/smart-select/smart-select.d.ts +5 -7
  194. package/components/smart-select/smart-select.js +4 -4
  195. package/components/sortable/sortable.js +8 -27
  196. package/components/statusbar/statusbar.js +1 -4
  197. package/components/stepper/stepper-rtl.css +1 -1
  198. package/components/stepper/stepper-vars.less +3 -3
  199. package/components/stepper/stepper.css +1 -1
  200. package/components/stepper/stepper.js +2 -8
  201. package/components/subnavbar/subnavbar-ios.less +16 -1
  202. package/components/subnavbar/subnavbar-md.less +1 -1
  203. package/components/subnavbar/subnavbar-vars.less +12 -6
  204. package/components/subnavbar/subnavbar.less +5 -6
  205. package/components/swipeout/swipeout-ios.less +37 -0
  206. package/components/swipeout/swipeout-md.less +56 -0
  207. package/components/swipeout/swipeout-rtl.css +1 -1
  208. package/components/swipeout/swipeout-vars.less +13 -2
  209. package/components/swipeout/swipeout.css +1 -1
  210. package/components/swipeout/swipeout.js +102 -35
  211. package/components/swipeout/swipeout.less +20 -44
  212. package/components/swiper/swiper-rtl.css +1 -1
  213. package/components/swiper/swiper.css +1 -1
  214. package/components/tabs/tabs.js +3 -9
  215. package/components/text-editor/text-editor-class.js +1 -1
  216. package/components/text-editor/text-editor-rtl.css +1 -1
  217. package/components/text-editor/text-editor.css +1 -1
  218. package/components/timeline/timeline-ios.less +0 -5
  219. package/components/timeline/timeline-md.less +0 -5
  220. package/components/timeline/timeline-rtl.css +1 -1
  221. package/components/timeline/timeline-vars.less +1 -17
  222. package/components/timeline/timeline.css +1 -1
  223. package/components/timeline/timeline.less +0 -196
  224. package/components/toast/toast-class.js +2 -2
  225. package/components/toast/toast-ios.less +2 -0
  226. package/components/toast/toast-rtl.css +1 -1
  227. package/components/toast/toast-vars.less +2 -4
  228. package/components/toast/toast.css +1 -1
  229. package/components/toast/toast.less +1 -1
  230. package/components/toggle/toggle-class.js +5 -12
  231. package/components/toggle/toggle-ios.less +68 -50
  232. package/components/toggle/toggle-rtl.css +1 -1
  233. package/components/toggle/toggle-vars.less +2 -2
  234. package/components/toggle/toggle.css +1 -1
  235. package/components/toolbar/tabbar-highlight.js +134 -0
  236. package/components/toolbar/toolbar-ios.less +152 -14
  237. package/components/toolbar/toolbar-md.less +77 -3
  238. package/components/toolbar/toolbar-vars.less +14 -10
  239. package/components/toolbar/toolbar.js +32 -13
  240. package/components/toolbar/toolbar.less +8 -56
  241. package/components/tooltip/tooltip-class.js +13 -16
  242. package/components/tooltip/tooltip.js +0 -16
  243. package/components/touch-highlight/touch-highlight-ios.less +17 -0
  244. package/components/touch-highlight/touch-highlight-md.less +2 -0
  245. package/components/touch-highlight/touch-highlight-vars.less +8 -0
  246. package/components/touch-highlight/touch-highlight.d.ts +25 -0
  247. package/components/touch-highlight/touch-highlight.js +123 -0
  248. package/components/touch-highlight/touch-highlight.less +9 -0
  249. package/components/touch-ripple/touch-ripple.js +1 -4
  250. package/components/view/resizable-view.js +2 -4
  251. package/components/view/view-class.js +1 -15
  252. package/components/view/view.d.ts +0 -4
  253. package/components/view/view.js +1 -5
  254. package/components/virtual-list/virtual-list-class.js +2 -8
  255. package/framework7-bundle-rtl.css +2284 -3019
  256. package/framework7-bundle-rtl.min.css +9 -7
  257. package/framework7-bundle.css +2245 -2978
  258. package/framework7-bundle.esm.js +5 -4
  259. package/framework7-bundle.js +7170 -6469
  260. package/framework7-bundle.js.map +1 -1
  261. package/framework7-bundle.less +4 -3
  262. package/framework7-bundle.min.css +9 -7
  263. package/framework7-bundle.min.js +4 -4
  264. package/framework7-bundle.min.js.map +1 -1
  265. package/framework7-lite-bundle.esm.js +5 -4
  266. package/framework7-lite.esm.js +5 -4
  267. package/framework7-rtl.css +509 -844
  268. package/framework7-rtl.min.css +8 -6
  269. package/framework7-types.d.ts +5 -1
  270. package/framework7.css +509 -843
  271. package/framework7.d.ts +4 -0
  272. package/framework7.esm.js +5 -4
  273. package/framework7.less +4 -3
  274. package/framework7.min.css +8 -6
  275. package/less/mixins.less +10 -12
  276. package/modules/component/$h.js +1 -4
  277. package/modules/component/$jsx.js +1 -4
  278. package/modules/component/component-class.js +49 -114
  279. package/modules/component/component.js +6 -7
  280. package/modules/component/eventslisteners.js +1 -4
  281. package/modules/component/snabbdom/modules/hero.js +0 -1
  282. package/modules/component/snabbdom/modules/style.js +1 -1
  283. package/modules/component/vdom.js +17 -29
  284. package/modules/router/back.js +22 -96
  285. package/modules/router/clear-previous-history.js +1 -7
  286. package/modules/router/component-loader.js +23 -32
  287. package/modules/router/modal.js +1 -4
  288. package/modules/router/navigate.js +28 -167
  289. package/modules/router/redirect.js +1 -5
  290. package/modules/router/router-class.js +21 -288
  291. package/modules/router/swipe-back.js +10 -318
  292. package/modules/router/tab.js +1 -4
  293. package/modules/store/create-store.js +2 -8
  294. package/modules/touch/touch.d.ts +5 -3
  295. package/modules/touch/touch.js +22 -36
  296. package/package.json +4 -4
  297. package/shared/$jsx.js +1 -4
  298. package/shared/class.js +5 -26
  299. package/shared/constructor-methods.js +4 -19
  300. package/shared/events-class.js +3 -12
  301. package/shared/get-device.js +4 -11
  302. package/shared/get-support.d.ts +0 -6
  303. package/shared/get-support.js +1 -20
  304. package/shared/material-color-utils.js +2102 -693
  305. package/shared/material-colors.js +94 -23
  306. package/shared/modal-methods.js +2 -8
  307. package/shared/utils.js +23 -45
package/components/dialog/dialog-rtl.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-dialog-button-text-color:var(--f7-theme-color);--f7-dialog-button-text-align:center}.ios{--f7-dialog-width:270px;--f7-dialog-inner-padding:16px;--f7-dialog-border-radius:13px;--f7-dialog-text-align:center;--f7-dialog-font-size:14px;--f7-dialog-title-text-color:inherit;--f7-dialog-title-font-size:18px;--f7-dialog-title-font-weight:600;--f7-dialog-title-line-height:inherit;--f7-dialog-button-font-size:17px;--f7-dialog-button-height:44px;--f7-dialog-button-letter-spacing:0;--f7-dialog-button-font-weight:400;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-bg-color:transparent;--f7-dialog-button-strong-text-color:var(--f7-theme-color);--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:4px;--f7-dialog-input-font-size:14px;--f7-dialog-input-height:32px;--f7-dialog-input-border-width:1px;--f7-dialog-input-placeholder-color:#a9a9a9;--f7-dialog-preloader-size:34px;--f7-dialog-input-bg-color:#fff;--f7-dialog-bg-color:rgba(255, 255, 255, 0.95);--f7-dialog-bg-color-rgb:255,255,255;--f7-dialog-text-color:#000;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-input-border-color:rgba(0, 0, 0, 0.3);--f7-dialog-border-divider-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-dialog-text-color:#fff;--f7-dialog-bg-color:rgba(45, 45, 45, 0.95);--f7-dialog-bg-color-rgb:45,45,45;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-border-divider-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-border-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-bg-color:rgba(0, 0, 0, 0.5)}.md{--f7-dialog-width:280px;--f7-dialog-inner-padding:24px;--f7-dialog-border-radius:28px;--f7-dialog-text-align:right;--f7-dialog-font-size:14px;--f7-dialog-title-font-size:24px;--f7-dialog-title-font-weight:400;--f7-dialog-title-line-height:1.3;--f7-dialog-button-font-size:14px;--f7-dialog-button-height:40px;--f7-dialog-button-letter-spacing:normal;--f7-dialog-button-font-weight:500;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:0px;--f7-dialog-input-font-size:16px;--f7-dialog-input-height:36px;--f7-dialog-input-border-color:transparent;--f7-dialog-input-border-width:0px;--f7-dialog-preloader-size:32px;--f7-dialog-input-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-dialog-button-pressed-bg-color:transparent;--f7-dialog-button-strong-bg-color:var(--f7-theme-color);--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)}.dialog{position:absolute;z-index:13500;left:50%;margin-top:0;top:50%;overflow:hidden;opacity:0;transform:translate3d(0,-50%,0) scale(1.185);transition-property:transform,opacity;display:none;transition-duration:.4s;width:var(--f7-dialog-width);margin-left:calc(-1 * var(--f7-dialog-width)/ 2);border-radius:var(--f7-dialog-border-radius);text-align:var(--f7-dialog-text-align);color:var(--f7-dialog-text-color);font-size:var(--f7-dialog-font-size);background:var(--f7-dialog-bg-color);will-change:transform,opacity}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .dialog{background-color:rgba(var(--f7-dialog-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.dialog.modal-in{opacity:1;transform:translate3d(0,-50%,0) scale(1)}.dialog.modal-out{opacity:0;z-index:13499}.dialog.not-animated{transition-duration:0s}.dialog-inner{position:relative;padding:var(--f7-dialog-inner-padding)}.dialog-title{color:var(--f7-dialog-title-text-color);font-size:var(--f7-dialog-title-font-size);font-weight:var(--f7-dialog-title-font-weight);line-height:var(--f7-dialog-title-line-height)}.dialog-buttons{position:relative;display:flex;flex-direction:row-reverse}.dialog-buttons-vertical .dialog-buttons{display:block;height:auto!important}.dialog-button{box-sizing:border-box;overflow:hidden;position:relative;white-space:nowrap;text-overflow:ellipsis;color:var(--f7-dialog-button-text-color);font-size:var(--f7-dialog-button-font-size);height:var(--f7-dialog-button-height);line-height:var(--f7-dialog-button-height);letter-spacing:var(--f7-dialog-button-letter-spacing);text-align:var(--f7-dialog-button-text-align);font-weight:var(--f7-dialog-button-font-weight);text-transform:var(--f7-dialog-button-text-transform);display:block;cursor:pointer}.dialog-button.active-state{background-color:var(--f7-dialog-button-pressed-bg-color)}.dialog-button-strong{background-color:var(--f7-dialog-button-strong-bg-color);color:var(--f7-dialog-button-strong-text-color);font-weight:var(--f7-dialog-button-strong-font-weight)}.dialog-button-strong.active-state{background-color:var(--f7-dialog-button-strong-pressed-bg-color)}.dialog-no-buttons .dialog-buttons{display:none}.dialog-input-field{position:relative}input.dialog-input[type]{box-sizing:border-box;margin:0;margin-top:15px;border-radius:var(--f7-dialog-input-border-radius);-webkit-appearance:none;appearance:none;width:100%;display:block;font-family:inherit;box-shadow:none;font-size:var(--f7-dialog-input-font-size);height:var(--f7-dialog-input-height);background-color:var(--f7-dialog-input-bg-color);border:var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color)}input.dialog-input[type]::placeholder{color:var(--f7-dialog-input-placeholder-color)}.dialog-input-double input.dialog-input{border-radius:var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0}.dialog-input-double+.dialog-input-double input.dialog-input{border-radius:0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius)}.dialog-preloader .preloader{--f7-preloader-size:var(--f7-dialog-preloader-size)}html.with-modal-dialog .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.ios .dialog.modal-out{transform:translate3d(0,-50%,0) scale(1)}.ios .dialog-inner{border-radius:var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0}.ios .dialog-inner:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-title+.dialog-text{margin-top:5px}.ios .dialog-buttons{height:44px;justify-content:center}.ios .dialog-button{width:100%;padding:0 5px;-webkit-box-flex:1;-ms-flex:1}.ios .dialog-button:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-button:first-child{border-radius:0 0 0 var(--f7-dialog-border-radius)}.ios .dialog-button:last-child{border-radius:0 0 var(--f7-dialog-border-radius) 0}.ios .dialog-button:last-child:after{display:none!important}.ios .dialog-button:first-child:last-child{border-radius:0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius)}.ios .dialog-button[class*=color-]{--f7-dialog-button-text-color:var(--f7-theme-color)}.ios .dialog-buttons-vertical .dialog-buttons{height:auto}.ios .dialog-buttons-vertical .dialog-button{border-radius:0}.ios .dialog-buttons-vertical .dialog-button:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-buttons-vertical .dialog-button:last-child{border-radius:0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius)}.ios .dialog-buttons-vertical .dialog-button:last-child:after{display:none!important}.ios .dialog-no-buttons .dialog-inner{border-radius:var(--f7-dialog-border-radius)}.ios .dialog-no-buttons .dialog-inner:after{display:none!important}.ios .dialog-input-field{margin-top:15px}.ios .dialog-input{padding:0 5px}.ios .dialog-input+.dialog-input{margin-top:5px}.ios .dialog-input-double+.dialog-input-double{margin-top:0}.ios .dialog-input-double+.dialog-input-double .dialog-input{border-top:0;margin-top:0}.ios .dialog-preloader .dialog-text~.preloader,.ios .dialog-preloader .dialog-title~.preloader{margin-top:15px}.ios .dialog-progress .dialog-text~.progressbar,.ios .dialog-progress .dialog-text~.progressbar-infinite,.ios .dialog-progress .dialog-title~.progressbar,.ios .dialog-progress .dialog-title~.progressbar-infinite{margin-top:15px}.md .dialog.modal-out{transform:translate3d(0,-50%,0) scale(.815)}.md .dialog-title+.dialog-text{margin-top:20px}.md .dialog-text{line-height:1.5}.md .dialog-buttons{height:64px;padding:0px 24px 24px;overflow:hidden;box-sizing:border-box;justify-content:flex-end}.md .dialog-button{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);border-radius:99px;min-width:64px;padding:0px 16px;border:none;transition-duration:.3s;transform:translate3d(0,0,0)}.md .dialog-button+.dialog-button{margin-left:8px}.md .dialog-button-strong{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.md .dialog-button[class*=color-]{--f7-dialog-button-text-color:var(--f7-theme-color)}.md .dialog-buttons-vertical .dialog-buttons{display:flex;flex-direction:column;align-items:flex-end}.md .dialog-buttons-vertical .dialog-button+.dialog-button{margin-top:8px;margin-left:0}.md .dialog-input{padding:0;transition-duration:.2s;position:relative}.md .dialog-input+.dialog-input{margin-top:16px}.md .dialog-preloader .dialog-inner,.md .dialog-preloader .dialog-title,.md .dialog-progress .dialog-inner,.md .dialog-progress .dialog-title{text-align:center}.md .dialog-preloader .dialog-text~.preloader,.md .dialog-preloader .dialog-title~.preloader{margin-top:20px}.md .dialog-progress .dialog-text~.progressbar,.md .dialog-progress .dialog-text~.progressbar-infinite,.md .dialog-progress .dialog-title~.progressbar,.md .dialog-progress .dialog-title~.progressbar-infinite{margin-top:16px}
1
+ :root{--f7-dialog-button-text-color:var(--f7-theme-color);--f7-dialog-button-text-align:center;--f7-dialog-text-line-height:1.5}.ios{--f7-dialog-width:270px;--f7-dialog-inner-padding:24px;--f7-dialog-border-radius:32px;--f7-dialog-text-align:left;--f7-dialog-font-size:14px;--f7-dialog-title-text-color:inherit;--f7-dialog-title-font-size:17px;--f7-dialog-title-font-weight:600;--f7-dialog-title-line-height:inherit;--f7-dialog-button-font-size:17px;--f7-dialog-button-height:44px;--f7-dialog-button-letter-spacing:0;--f7-dialog-button-font-weight:400;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-bg-color:transparent;--f7-dialog-button-strong-text-color:var(--f7-theme-color);--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:16px;--f7-dialog-input-font-size:14px;--f7-dialog-input-height:40px;--f7-dialog-input-border-width:1px;--f7-dialog-input-placeholder-color:#a9a9a9;--f7-dialog-preloader-size:34px;--f7-dialog-bg-color:var(--f7-glass-bg-color);--f7-dialog-input-bg-color:#fff;--f7-dialog-bg-color-rgb:255,255,255;--f7-dialog-text-color:#000;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-input-border-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-dialog-text-color:#fff;--f7-dialog-bg-color-rgb:45,45,45;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-input-border-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-bg-color:rgba(0, 0, 0, 0.5)}.md{--f7-dialog-width:280px;--f7-dialog-inner-padding:24px;--f7-dialog-border-radius:28px;--f7-dialog-text-align:right;--f7-dialog-font-size:14px;--f7-dialog-title-font-size:24px;--f7-dialog-title-font-weight:400;--f7-dialog-title-line-height:1.3;--f7-dialog-button-font-size:14px;--f7-dialog-button-height:40px;--f7-dialog-button-letter-spacing:normal;--f7-dialog-button-font-weight:500;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:0px;--f7-dialog-input-font-size:16px;--f7-dialog-input-height:36px;--f7-dialog-input-border-color:transparent;--f7-dialog-input-border-width:0px;--f7-dialog-preloader-size:32px;--f7-dialog-input-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-dialog-button-pressed-bg-color:transparent;--f7-dialog-button-strong-bg-color:var(--f7-theme-color);--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)}.dialog{position:absolute;z-index:13500;left:50%;margin-top:0;top:50%;overflow:hidden;opacity:0;transform:translate3d(0,-50%,0) scale(1.185);transition-property:transform,opacity;display:none;transition-duration:.4s;width:var(--f7-dialog-width);margin-left:calc(-1 * var(--f7-dialog-width)/ 2);border-radius:var(--f7-dialog-border-radius);text-align:var(--f7-dialog-text-align);color:var(--f7-dialog-text-color);font-size:var(--f7-dialog-font-size);background:var(--f7-dialog-bg-color);will-change:transform,opacity}.dialog.modal-in{opacity:1;transform:translate3d(0,-50%,0) scale(1)}.dialog.modal-out{opacity:0;z-index:13499}.dialog.not-animated{transition-duration:0s}.dialog-inner{position:relative;padding:var(--f7-dialog-inner-padding)}.dialog-title{color:var(--f7-dialog-title-text-color);font-size:var(--f7-dialog-title-font-size);font-weight:var(--f7-dialog-title-font-weight);line-height:var(--f7-dialog-title-line-height)}.dialog-text{line-height:var(--f7-dialog-text-line-height)}.dialog-buttons{position:relative;display:flex;flex-direction:row-reverse}.dialog-buttons-vertical .dialog-buttons{flex-direction:column;height:auto!important}.dialog-button{overflow:hidden;position:relative;white-space:nowrap;text-overflow:ellipsis}.dialog-no-buttons .dialog-buttons{display:none}.dialog-input-field{position:relative}input.dialog-input[type]{box-sizing:border-box;margin:0;margin-top:15px;border-radius:var(--f7-dialog-input-border-radius);appearance:none;width:100%;display:block;font-family:inherit;box-shadow:none;font-size:var(--f7-dialog-input-font-size);height:var(--f7-dialog-input-height);background-color:var(--f7-dialog-input-bg-color);border:var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color)}input.dialog-input[type]::placeholder{color:var(--f7-dialog-input-placeholder-color)}.dialog-input-double input.dialog-input{border-radius:var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0}.dialog-input-double+.dialog-input-double input.dialog-input{border-radius:0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius)}.dialog-preloader .preloader{--f7-preloader-size:var(--f7-dialog-preloader-size)}html:has(.dialog.modal-in) .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.ios .dialog{box-shadow:var(--f7-glass-shadow);backdrop-filter:saturate(180%) blur(16px);border-radius:var(--f7-dialog-border-radius)}.ios .dialog.modal-out{transform:translate3d(0,-50%,0) scale(1)}.ios .dialog-inner{border-radius:var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0}.ios .dialog-title+.dialog-text{margin-top:12px}.ios .dialog-buttons{padding:0 14px 14px 14px;justify-content:center;gap:8px}.ios .dialog-button{width:100%;-webkit-box-flex:1;-ms-flex:1}.ios .dialog-no-buttons .dialog-inner{border-radius:var(--f7-dialog-border-radius)}.ios .dialog-input-field{margin-top:15px}.ios .dialog-input{padding:0 12px}.ios .dialog-input+.dialog-input{margin-top:12px}.ios .dialog-input-double+.dialog-input-double{margin-top:0}.ios .dialog-input-double+.dialog-input-double .dialog-input{border-top:0;margin-top:0}.ios .dialog-preloader{text-align:center}.ios .dialog-preloader .dialog-text~.preloader,.ios .dialog-preloader .dialog-title~.preloader{margin-top:15px}.ios .dialog-progress .dialog-text~.progressbar,.ios .dialog-progress .dialog-text~.progressbar-infinite,.ios .dialog-progress .dialog-title~.progressbar,.ios .dialog-progress .dialog-title~.progressbar-infinite{margin-top:15px}.md .dialog.modal-out{transform:translate3d(0,-50%,0) scale(.815)}.md .dialog-title+.dialog-text{margin-top:20px}.md .dialog-text{line-height:1.5}.md .dialog-buttons{padding:0px 24px 24px;overflow:hidden;box-sizing:border-box;justify-content:flex-end;gap:8px}.md .dialog-button{width:auto}.md .dialog-buttons-vertical .dialog-buttons{display:flex;flex-direction:column;align-items:flex-end}.md .dialog-input{padding:0;transition-duration:.2s;position:relative}.md .dialog-input+.dialog-input{margin-top:16px}.md .dialog-preloader .dialog-inner,.md .dialog-preloader .dialog-title,.md .dialog-progress .dialog-inner,.md .dialog-progress .dialog-title{text-align:center}.md .dialog-preloader .dialog-text~.preloader,.md .dialog-preloader .dialog-title~.preloader{margin-top:20px}.md .dialog-progress .dialog-text~.progressbar,.md .dialog-progress .dialog-text~.progressbar-infinite,.md .dialog-progress .dialog-title~.progressbar,.md .dialog-progress .dialog-title~.progressbar-infinite{margin-top:16px}
package/components/dialog/dialog-vars.less CHANGED
@@ -1,16 +1,17 @@
1
1
  :root {
2
2
  --f7-dialog-button-text-color: var(--f7-theme-color);
3
3
  --f7-dialog-button-text-align: center;
4
+ --f7-dialog-text-line-height: 1.5;
4
5
  }
5
6
  .ios-vars({
6
7
 
7
8
  --f7-dialog-width: 270px;
8
- --f7-dialog-inner-padding: 16px;
9
- --f7-dialog-border-radius: 13px;
10
- --f7-dialog-text-align: center;
9
+ --f7-dialog-inner-padding: 24px;
10
+ --f7-dialog-border-radius: 32px;
11
+ --f7-dialog-text-align: left;
11
12
  --f7-dialog-font-size: 14px;
12
13
  --f7-dialog-title-text-color: inherit;
13
- --f7-dialog-title-font-size: 18px;
14
+ --f7-dialog-title-font-size: 17px;
14
15
  --f7-dialog-title-font-weight: 600;
15
16
  --f7-dialog-title-line-height: inherit;
16
17
 
@@ -23,31 +24,28 @@
23
24
  --f7-dialog-button-strong-text-color: var(--f7-theme-color);
24
25
  --f7-dialog-button-strong-font-weight: 500;
25
26
 
26
- --f7-dialog-input-border-radius: 4px;
27
+ --f7-dialog-input-border-radius: 16px;
27
28
  --f7-dialog-input-font-size: 14px;
28
- --f7-dialog-input-height: 32px;
29
+ --f7-dialog-input-height: 40px;
29
30
  --f7-dialog-input-border-width: 1px;
30
31
  --f7-dialog-input-placeholder-color: #a9a9a9;
31
32
 
32
33
  --f7-dialog-preloader-size: 34px;
33
34
 
35
+ --f7-dialog-bg-color: var(--f7-glass-bg-color);
34
36
  .light-vars({
35
37
  --f7-dialog-input-bg-color: #fff;
36
- --f7-dialog-bg-color: rgba(255,255,255,0.95);
37
38
  --f7-dialog-bg-color-rgb: 255, 255, 255;
38
39
  --f7-dialog-text-color: #000;
39
40
  --f7-dialog-button-pressed-bg-color: rgba(0,0,0,0.1);
40
41
  --f7-dialog-button-strong-pressed-bg-color: rgba(0,0,0,0.1);
41
42
  --f7-dialog-input-border-color: rgba(0,0,0,0.3);
42
- --f7-dialog-border-divider-color: rgba(0,0,0,0.2);
43
43
  });
44
44
  .dark-vars({
45
45
  --f7-dialog-text-color: #fff;
46
- --f7-dialog-bg-color: rgba(45,45,45,0.95);
47
46
  --f7-dialog-bg-color-rgb: 45, 45, 45;
48
47
  --f7-dialog-button-pressed-bg-color: rgba(0,0,0,0.2);
49
48
  --f7-dialog-button-strong-pressed-bg-color: rgba(0,0,0,0.2);
50
- --f7-dialog-border-divider-color: rgba(255,255,255,0.15);
51
49
  --f7-dialog-input-border-color: rgba(255,255,255,0.15);
52
50
  --f7-dialog-input-bg-color: rgba(0,0,0,0.5);
53
51
  });
package/components/dialog/dialog.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-dialog-button-text-color:var(--f7-theme-color);--f7-dialog-button-text-align:center}.ios{--f7-dialog-width:270px;--f7-dialog-inner-padding:16px;--f7-dialog-border-radius:13px;--f7-dialog-text-align:center;--f7-dialog-font-size:14px;--f7-dialog-title-text-color:inherit;--f7-dialog-title-font-size:18px;--f7-dialog-title-font-weight:600;--f7-dialog-title-line-height:inherit;--f7-dialog-button-font-size:17px;--f7-dialog-button-height:44px;--f7-dialog-button-letter-spacing:0;--f7-dialog-button-font-weight:400;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-bg-color:transparent;--f7-dialog-button-strong-text-color:var(--f7-theme-color);--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:4px;--f7-dialog-input-font-size:14px;--f7-dialog-input-height:32px;--f7-dialog-input-border-width:1px;--f7-dialog-input-placeholder-color:#a9a9a9;--f7-dialog-preloader-size:34px;--f7-dialog-input-bg-color:#fff;--f7-dialog-bg-color:rgba(255, 255, 255, 0.95);--f7-dialog-bg-color-rgb:255,255,255;--f7-dialog-text-color:#000;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-input-border-color:rgba(0, 0, 0, 0.3);--f7-dialog-border-divider-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-dialog-text-color:#fff;--f7-dialog-bg-color:rgba(45, 45, 45, 0.95);--f7-dialog-bg-color-rgb:45,45,45;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-border-divider-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-border-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-bg-color:rgba(0, 0, 0, 0.5)}.md{--f7-dialog-width:280px;--f7-dialog-inner-padding:24px;--f7-dialog-border-radius:28px;--f7-dialog-text-align:left;--f7-dialog-font-size:14px;--f7-dialog-title-font-size:24px;--f7-dialog-title-font-weight:400;--f7-dialog-title-line-height:1.3;--f7-dialog-button-font-size:14px;--f7-dialog-button-height:40px;--f7-dialog-button-letter-spacing:normal;--f7-dialog-button-font-weight:500;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:0px;--f7-dialog-input-font-size:16px;--f7-dialog-input-height:36px;--f7-dialog-input-border-color:transparent;--f7-dialog-input-border-width:0px;--f7-dialog-preloader-size:32px;--f7-dialog-input-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-dialog-button-pressed-bg-color:transparent;--f7-dialog-button-strong-bg-color:var(--f7-theme-color);--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)}.dialog{position:absolute;z-index:13500;left:50%;margin-top:0;top:50%;overflow:hidden;opacity:0;transform:translate3d(0,-50%,0) scale(1.185);transition-property:transform,opacity;display:none;transition-duration:.4s;width:var(--f7-dialog-width);margin-left:calc(-1 * var(--f7-dialog-width)/ 2);border-radius:var(--f7-dialog-border-radius);text-align:var(--f7-dialog-text-align);color:var(--f7-dialog-text-color);font-size:var(--f7-dialog-font-size);background:var(--f7-dialog-bg-color);will-change:transform,opacity}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .dialog{background-color:rgba(var(--f7-dialog-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.dialog.modal-in{opacity:1;transform:translate3d(0,-50%,0) scale(1)}.dialog.modal-out{opacity:0;z-index:13499}.dialog.not-animated{transition-duration:0s}.dialog-inner{position:relative;padding:var(--f7-dialog-inner-padding)}.dialog-title{color:var(--f7-dialog-title-text-color);font-size:var(--f7-dialog-title-font-size);font-weight:var(--f7-dialog-title-font-weight);line-height:var(--f7-dialog-title-line-height)}.dialog-buttons{position:relative;display:flex}.dialog-buttons-vertical .dialog-buttons{display:block;height:auto!important}.dialog-button{box-sizing:border-box;overflow:hidden;position:relative;white-space:nowrap;text-overflow:ellipsis;color:var(--f7-dialog-button-text-color);font-size:var(--f7-dialog-button-font-size);height:var(--f7-dialog-button-height);line-height:var(--f7-dialog-button-height);letter-spacing:var(--f7-dialog-button-letter-spacing);text-align:var(--f7-dialog-button-text-align);font-weight:var(--f7-dialog-button-font-weight);text-transform:var(--f7-dialog-button-text-transform);display:block;cursor:pointer}.dialog-button.active-state{background-color:var(--f7-dialog-button-pressed-bg-color)}.dialog-button-strong{background-color:var(--f7-dialog-button-strong-bg-color);color:var(--f7-dialog-button-strong-text-color);font-weight:var(--f7-dialog-button-strong-font-weight)}.dialog-button-strong.active-state{background-color:var(--f7-dialog-button-strong-pressed-bg-color)}.dialog-no-buttons .dialog-buttons{display:none}.dialog-input-field{position:relative}input.dialog-input[type]{box-sizing:border-box;margin:0;margin-top:15px;border-radius:var(--f7-dialog-input-border-radius);-webkit-appearance:none;appearance:none;width:100%;display:block;font-family:inherit;box-shadow:none;font-size:var(--f7-dialog-input-font-size);height:var(--f7-dialog-input-height);background-color:var(--f7-dialog-input-bg-color);border:var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color)}input.dialog-input[type]::placeholder{color:var(--f7-dialog-input-placeholder-color)}.dialog-input-double input.dialog-input{border-radius:var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0}.dialog-input-double+.dialog-input-double input.dialog-input{border-radius:0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius)}.dialog-preloader .preloader{--f7-preloader-size:var(--f7-dialog-preloader-size)}html.with-modal-dialog .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.ios .dialog.modal-out{transform:translate3d(0,-50%,0) scale(1)}.ios .dialog-inner{border-radius:var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0}.ios .dialog-inner:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-title+.dialog-text{margin-top:5px}.ios .dialog-buttons{height:44px;justify-content:center}.ios .dialog-button{width:100%;padding:0 5px;-webkit-box-flex:1;-ms-flex:1}.ios .dialog-button:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-button:first-child{border-radius:0 0 0 var(--f7-dialog-border-radius)}.ios .dialog-button:last-child{border-radius:0 0 var(--f7-dialog-border-radius) 0}.ios .dialog-button:last-child:after{display:none!important}.ios .dialog-button:first-child:last-child{border-radius:0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius)}.ios .dialog-button[class*=color-]{--f7-dialog-button-text-color:var(--f7-theme-color)}.ios .dialog-buttons-vertical .dialog-buttons{height:auto}.ios .dialog-buttons-vertical .dialog-button{border-radius:0}.ios .dialog-buttons-vertical .dialog-button:after{content:'';position:absolute;background-color:var(--f7-dialog-border-divider-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.ios .dialog-buttons-vertical .dialog-button:last-child{border-radius:0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius)}.ios .dialog-buttons-vertical .dialog-button:last-child:after{display:none!important}.ios .dialog-no-buttons .dialog-inner{border-radius:var(--f7-dialog-border-radius)}.ios .dialog-no-buttons .dialog-inner:after{display:none!important}.ios .dialog-input-field{margin-top:15px}.ios .dialog-input{padding:0 5px}.ios .dialog-input+.dialog-input{margin-top:5px}.ios .dialog-input-double+.dialog-input-double{margin-top:0}.ios .dialog-input-double+.dialog-input-double .dialog-input{border-top:0;margin-top:0}.ios .dialog-preloader .dialog-text~.preloader,.ios .dialog-preloader .dialog-title~.preloader{margin-top:15px}.ios .dialog-progress .dialog-text~.progressbar,.ios .dialog-progress .dialog-text~.progressbar-infinite,.ios .dialog-progress .dialog-title~.progressbar,.ios .dialog-progress .dialog-title~.progressbar-infinite{margin-top:15px}.md .dialog.modal-out{transform:translate3d(0,-50%,0) scale(.815)}.md .dialog-title+.dialog-text{margin-top:20px}.md .dialog-text{line-height:1.5}.md .dialog-buttons{height:64px;padding:0px 24px 24px;overflow:hidden;box-sizing:border-box;justify-content:flex-end}.md .dialog-button{--f7-touch-ripple-color:rgba(var(--f7-theme-color-rgb), 0.25);border-radius:99px;min-width:64px;padding:0px 16px;border:none;transition-duration:.3s;transform:translate3d(0,0,0)}.md .dialog-button+.dialog-button{margin-left:8px}.md .dialog-button-strong{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.md .dialog-button[class*=color-]{--f7-dialog-button-text-color:var(--f7-theme-color)}.md .dialog-buttons-vertical .dialog-buttons{display:flex;flex-direction:column;align-items:flex-end}.md .dialog-buttons-vertical .dialog-button+.dialog-button{margin-top:8px;margin-left:0}.md .dialog-input{padding:0;transition-duration:.2s;position:relative}.md .dialog-input+.dialog-input{margin-top:16px}.md .dialog-preloader .dialog-inner,.md .dialog-preloader .dialog-title,.md .dialog-progress .dialog-inner,.md .dialog-progress .dialog-title{text-align:center}.md .dialog-preloader .dialog-text~.preloader,.md .dialog-preloader .dialog-title~.preloader{margin-top:20px}.md .dialog-progress .dialog-text~.progressbar,.md .dialog-progress .dialog-text~.progressbar-infinite,.md .dialog-progress .dialog-title~.progressbar,.md .dialog-progress .dialog-title~.progressbar-infinite{margin-top:16px}
1
+ :root{--f7-dialog-button-text-color:var(--f7-theme-color);--f7-dialog-button-text-align:center;--f7-dialog-text-line-height:1.5}.ios{--f7-dialog-width:270px;--f7-dialog-inner-padding:24px;--f7-dialog-border-radius:32px;--f7-dialog-text-align:left;--f7-dialog-font-size:14px;--f7-dialog-title-text-color:inherit;--f7-dialog-title-font-size:17px;--f7-dialog-title-font-weight:600;--f7-dialog-title-line-height:inherit;--f7-dialog-button-font-size:17px;--f7-dialog-button-height:44px;--f7-dialog-button-letter-spacing:0;--f7-dialog-button-font-weight:400;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-bg-color:transparent;--f7-dialog-button-strong-text-color:var(--f7-theme-color);--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:16px;--f7-dialog-input-font-size:14px;--f7-dialog-input-height:40px;--f7-dialog-input-border-width:1px;--f7-dialog-input-placeholder-color:#a9a9a9;--f7-dialog-preloader-size:34px;--f7-dialog-bg-color:var(--f7-glass-bg-color);--f7-dialog-input-bg-color:#fff;--f7-dialog-bg-color-rgb:255,255,255;--f7-dialog-text-color:#000;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.1);--f7-dialog-input-border-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-dialog-text-color:#fff;--f7-dialog-bg-color-rgb:45,45,45;--f7-dialog-button-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-button-strong-pressed-bg-color:rgba(0, 0, 0, 0.2);--f7-dialog-input-border-color:rgba(255, 255, 255, 0.15);--f7-dialog-input-bg-color:rgba(0, 0, 0, 0.5)}.md{--f7-dialog-width:280px;--f7-dialog-inner-padding:24px;--f7-dialog-border-radius:28px;--f7-dialog-text-align:left;--f7-dialog-font-size:14px;--f7-dialog-title-font-size:24px;--f7-dialog-title-font-weight:400;--f7-dialog-title-line-height:1.3;--f7-dialog-button-font-size:14px;--f7-dialog-button-height:40px;--f7-dialog-button-letter-spacing:normal;--f7-dialog-button-font-weight:500;--f7-dialog-button-text-transform:none;--f7-dialog-button-strong-font-weight:500;--f7-dialog-input-border-radius:0px;--f7-dialog-input-font-size:16px;--f7-dialog-input-height:36px;--f7-dialog-input-border-color:transparent;--f7-dialog-input-border-width:0px;--f7-dialog-preloader-size:32px;--f7-dialog-input-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-dialog-button-pressed-bg-color:transparent;--f7-dialog-button-strong-bg-color:var(--f7-theme-color);--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)}.dialog{position:absolute;z-index:13500;left:50%;margin-top:0;top:50%;overflow:hidden;opacity:0;transform:translate3d(0,-50%,0) scale(1.185);transition-property:transform,opacity;display:none;transition-duration:.4s;width:var(--f7-dialog-width);margin-left:calc(-1 * var(--f7-dialog-width)/ 2);border-radius:var(--f7-dialog-border-radius);text-align:var(--f7-dialog-text-align);color:var(--f7-dialog-text-color);font-size:var(--f7-dialog-font-size);background:var(--f7-dialog-bg-color);will-change:transform,opacity}.dialog.modal-in{opacity:1;transform:translate3d(0,-50%,0) scale(1)}.dialog.modal-out{opacity:0;z-index:13499}.dialog.not-animated{transition-duration:0s}.dialog-inner{position:relative;padding:var(--f7-dialog-inner-padding)}.dialog-title{color:var(--f7-dialog-title-text-color);font-size:var(--f7-dialog-title-font-size);font-weight:var(--f7-dialog-title-font-weight);line-height:var(--f7-dialog-title-line-height)}.dialog-text{line-height:var(--f7-dialog-text-line-height)}.dialog-buttons{position:relative;display:flex}.dialog-buttons-vertical .dialog-buttons{flex-direction:column;height:auto!important}.dialog-button{overflow:hidden;position:relative;white-space:nowrap;text-overflow:ellipsis}.dialog-no-buttons .dialog-buttons{display:none}.dialog-input-field{position:relative}input.dialog-input[type]{box-sizing:border-box;margin:0;margin-top:15px;border-radius:var(--f7-dialog-input-border-radius);appearance:none;width:100%;display:block;font-family:inherit;box-shadow:none;font-size:var(--f7-dialog-input-font-size);height:var(--f7-dialog-input-height);background-color:var(--f7-dialog-input-bg-color);border:var(--f7-dialog-input-border-width) solid var(--f7-dialog-input-border-color)}input.dialog-input[type]::placeholder{color:var(--f7-dialog-input-placeholder-color)}.dialog-input-double input.dialog-input{border-radius:var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius) 0 0}.dialog-input-double+.dialog-input-double input.dialog-input{border-radius:0 0 var(--f7-dialog-input-border-radius) var(--f7-dialog-input-border-radius)}.dialog-preloader .preloader{--f7-preloader-size:var(--f7-dialog-preloader-size)}html:has(.dialog.modal-in) .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}.ios .dialog{box-shadow:var(--f7-glass-shadow);backdrop-filter:saturate(180%) blur(16px);border-radius:var(--f7-dialog-border-radius)}.ios .dialog.modal-out{transform:translate3d(0,-50%,0) scale(1)}.ios .dialog-inner{border-radius:var(--f7-dialog-border-radius) var(--f7-dialog-border-radius) 0 0}.ios .dialog-title+.dialog-text{margin-top:12px}.ios .dialog-buttons{padding:0 14px 14px 14px;justify-content:center;gap:8px}.ios .dialog-button{width:100%;-webkit-box-flex:1;-ms-flex:1}.ios .dialog-no-buttons .dialog-inner{border-radius:var(--f7-dialog-border-radius)}.ios .dialog-input-field{margin-top:15px}.ios .dialog-input{padding:0 12px}.ios .dialog-input+.dialog-input{margin-top:12px}.ios .dialog-input-double+.dialog-input-double{margin-top:0}.ios .dialog-input-double+.dialog-input-double .dialog-input{border-top:0;margin-top:0}.ios .dialog-preloader{text-align:center}.ios .dialog-preloader .dialog-text~.preloader,.ios .dialog-preloader .dialog-title~.preloader{margin-top:15px}.ios .dialog-progress .dialog-text~.progressbar,.ios .dialog-progress .dialog-text~.progressbar-infinite,.ios .dialog-progress .dialog-title~.progressbar,.ios .dialog-progress .dialog-title~.progressbar-infinite{margin-top:15px}.md .dialog.modal-out{transform:translate3d(0,-50%,0) scale(.815)}.md .dialog-title+.dialog-text{margin-top:20px}.md .dialog-text{line-height:1.5}.md .dialog-buttons{padding:0px 24px 24px;overflow:hidden;box-sizing:border-box;justify-content:flex-end;gap:8px}.md .dialog-button{width:auto}.md .dialog-buttons-vertical .dialog-buttons{display:flex;flex-direction:column;align-items:flex-end}.md .dialog-input{padding:0;transition-duration:.2s;position:relative}.md .dialog-input+.dialog-input{margin-top:16px}.md .dialog-preloader .dialog-inner,.md .dialog-preloader .dialog-title,.md .dialog-progress .dialog-inner,.md .dialog-progress .dialog-title{text-align:center}.md .dialog-preloader .dialog-text~.preloader,.md .dialog-preloader .dialog-title~.preloader{margin-top:20px}.md .dialog-progress .dialog-text~.progressbar,.md .dialog-progress .dialog-text~.progressbar-infinite,.md .dialog-progress .dialog-title~.progressbar,.md .dialog-progress .dialog-title~.progressbar-infinite{margin-top:16px}
package/components/dialog/dialog.js CHANGED
@@ -44,10 +44,7 @@ export default {
44
44
  defaultSelector: '.dialog.modal-in'
45
45
  }), {
46
46
  // Shortcuts
47
- alert() {
48
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
49
- args[_key] = arguments[_key];
50
- }
47
+ alert(...args) {
51
48
  let [text, title, callbackOk] = args;
52
49
  if (args.length === 2 && typeof args[1] === 'function') {
53
50
  [text, callbackOk, title] = args;
@@ -64,10 +61,7 @@ export default {
64
61
  destroyOnClose
65
62
  }).open();
66
63
  },
67
- prompt() {
68
- for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
69
- args[_key2] = arguments[_key2];
70
- }
64
+ prompt(...args) {
71
65
  let [text, title, callbackOk, callbackCancel, defaultValue] = args;
72
66
  if (typeof args[1] === 'function') {
73
67
  [text, callbackOk, callbackCancel, defaultValue, title] = args;
@@ -83,7 +77,7 @@ export default {
83
77
  color: null
84
78
  }, {
85
79
  text: app.params.dialog.buttonOk,
86
- strong: isIosTheme,
80
+ strong: true,
87
81
  keyCodes: keyboardActions ? [13] : null
88
82
  }],
89
83
  onClick(dialog, index) {
@@ -95,10 +89,7 @@ export default {
95
89
  ...autoFocusHandler
96
90
  }).open();
97
91
  },
98
- confirm() {
99
- for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
100
- args[_key3] = arguments[_key3];
101
- }
92
+ confirm(...args) {
102
93
  let [text, title, callbackOk, callbackCancel] = args;
103
94
  if (typeof args[1] === 'function') {
104
95
  [text, callbackOk, callbackCancel, title] = args;
@@ -113,17 +104,14 @@ export default {
113
104
  color: null
114
105
  }, {
115
106
  text: app.params.dialog.buttonOk,
116
- strong: isIosTheme,
107
+ strong: true,
117
108
  onClick: callbackOk,
118
109
  keyCodes: keyboardActions ? [13] : null
119
110
  }],
120
111
  destroyOnClose
121
112
  }).open();
122
113
  },
123
- login() {
124
- for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
125
- args[_key4] = arguments[_key4];
126
- }
114
+ login(...args) {
127
115
  let [text, title, callbackOk, callbackCancel] = args;
128
116
  if (typeof args[1] === 'function') {
129
117
  [text, callbackOk, callbackCancel, title] = args;
@@ -158,10 +146,7 @@ export default {
158
146
  ...autoFocusHandler
159
147
  }).open();
160
148
  },
161
- password() {
162
- for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
163
- args[_key5] = arguments[_key5];
164
- }
149
+ password(...args) {
165
150
  let [text, title, callbackOk, callbackCancel] = args;
166
151
  if (typeof args[1] === 'function') {
167
152
  [text, callbackOk, callbackCancel, title] = args;
@@ -180,7 +165,7 @@ export default {
180
165
  color: null
181
166
  }, {
182
167
  text: app.params.dialog.buttonOk,
183
- strong: isIosTheme,
168
+ strong: true,
184
169
  keyCodes: keyboardActions ? [13] : null
185
170
  }],
186
171
  onClick(dialog, index) {
@@ -206,10 +191,7 @@ export default {
206
191
  destroyOnClose
207
192
  }).open();
208
193
  },
209
- progress() {
210
- for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
211
- args[_key6] = arguments[_key6];
212
- }
194
+ progress(...args) {
213
195
  let [title, progress, color] = args;
214
196
  if (args.length === 2) {
215
197
  if (typeof args[0] === 'number') {
package/components/dialog/dialog.less CHANGED
@@ -23,7 +23,6 @@
23
23
  font-size: var(--f7-dialog-font-size);
24
24
  background: var(--f7-dialog-bg-color);
25
25
  will-change: transform, opacity;
26
- .ios-translucent-modals(var(--f7-dialog-bg-color-rgb));
27
26
  &.modal-in {
28
27
  opacity: 1;
29
28
  transform: translate3d(0, -50%, 0) scale(1);
@@ -46,6 +45,9 @@
46
45
  font-weight: var(--f7-dialog-title-font-weight);
47
46
  line-height: var(--f7-dialog-title-line-height);
48
47
  }
48
+ .dialog-text {
49
+ line-height: var(--f7-dialog-text-line-height);
50
+ }
49
51
  // Buttons
50
52
  .dialog-buttons {
51
53
  position: relative;
@@ -54,38 +56,17 @@
54
56
  flex-direction: row-reverse;
55
57
  });
56
58
  .dialog-buttons-vertical & {
57
- display: block;
59
+ flex-direction: column;
58
60
  height: auto !important;
59
61
  }
60
62
  }
61
63
  .dialog-button {
62
- box-sizing: border-box;
63
64
  overflow: hidden;
64
65
  position: relative;
65
66
  white-space: nowrap;
66
67
  text-overflow: ellipsis;
67
- color: var(--f7-dialog-button-text-color);
68
- font-size: var(--f7-dialog-button-font-size);
69
- height: var(--f7-dialog-button-height);
70
- line-height: var(--f7-dialog-button-height);
71
- letter-spacing: var(--f7-dialog-button-letter-spacing);
72
- text-align: var(--f7-dialog-button-text-align);
73
- font-weight: var(--f7-dialog-button-font-weight);
74
- text-transform: var(--f7-dialog-button-text-transform);
75
- display: block;
76
- cursor: pointer;
77
- &.active-state {
78
- background-color: var(--f7-dialog-button-pressed-bg-color);
79
- }
80
- }
81
- .dialog-button-strong {
82
- background-color: var(--f7-dialog-button-strong-bg-color);
83
- color: var(--f7-dialog-button-strong-text-color);
84
- font-weight: var(--f7-dialog-button-strong-font-weight);
85
- &.active-state {
86
- background-color: var(--f7-dialog-button-strong-pressed-bg-color);
87
- }
88
68
  }
69
+
89
70
  .dialog-no-buttons {
90
71
  .dialog-buttons {
91
72
  display: none;
@@ -128,7 +109,7 @@ input.dialog-input[type] {
128
109
  }
129
110
  }
130
111
 
131
- html.with-modal-dialog {
112
+ html:has(.dialog.modal-in) {
132
113
  .page-content {
133
114
  .not-scrollable();
134
115
  }
package/components/fab/fab-ios.less CHANGED
@@ -1,6 +1,8 @@
1
1
  .ios {
2
2
  .fab > a,
3
3
  .fab-buttons a {
4
+ .ios-glass-backdrop();
5
+ box-shadow: var(--f7-glass-shadow-fab);
4
6
  &.active-state {
5
7
  transition-duration: 0ms;
6
8
  background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
package/components/fab/fab-rtl.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-padding:4px 12px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--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;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);--f7-fab-label-text-color:#333;--f7-fab-label-bg-color:#fff}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--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 1px 2px rgba(0, 0, 0, 0.25)}.md,.md .dark,.md [class*=color-]{--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)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{background-color:var(--f7-fab-bg-color,var(--f7-theme-color));width:var(--f7-fab-size);height:var(--f7-fab-size);box-shadow:var(--f7-fab-box-shadow);border-radius:var(--f7-fab-border-radius);position:relative;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;color:var(--f7-fab-text-color)}.fab>a i{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5);opacity:0}.fab-buttons a{border-radius:var(--f7-fab-border-radius);width:var(--f7-fab-button-size);height:var(--f7-fab-button-size)}.fab-buttons{display:flex;visibility:hidden;pointer-events:none;position:absolute}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5);opacity:0}.fab-opened:not(.fab-morph)>a i+i{transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);opacity:1}.fab-opened .fab-buttons{visibility:visible;pointer-events:auto}.fab-opened .fab-buttons a{opacity:1;transform:translate3d(0,0px,0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:0.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:150ms}.fab-opened .fab-buttons a:nth-child(5){transition-delay:0.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:250ms}.fab-buttons-bottom,.fab-buttons-top{left:50%;width:var(--f7-fab-button-size);margin-left:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-top{bottom:100%;margin-bottom:16px;flex-direction:column-reverse}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{top:100%;margin-top:16px;flex-direction:column}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{top:50%;height:var(--f7-fab-button-size);margin-top:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-left{right:100%;margin-right:16px}.fab-buttons-left a{transform:translate3d(8px,0px,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px;flex-direction:row-reverse}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{left:0%;top:0%;width:100%;height:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);bottom:100%;margin-bottom:16px;transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-left:16px;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);top:100%;margin-top:16px;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){right:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-right:16px;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{border-radius:var(--f7-fab-border-radius);background:var(--f7-fab-bg-color,var(--f7-theme-color));box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{box-shadow:none;background:0 0!important}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:250ms}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{width:auto;min-width:var(--f7-fab-extended-size)}.fab-extended>a{width:100%;height:var(--f7-fab-extended-size)}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/ 2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);padding:var(--f7-fab-extended-text-padding);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{position:absolute;top:50%;padding:var(--f7-fab-label-padding);border-radius:var(--f7-fab-label-border-radius);background:var(--f7-fab-label-bg-color);color:var(--f7-fab-label-text-color);box-shadow:var(--f7-fab-label-box-shadow);white-space:nowrap;transform:translateY(-50%);pointer-events:none;font-size:var(--f7-fab-label-font-size)}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{right:100%;margin-right:8px}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{transition-duration:0s;background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}
1
+ :root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-bg-color:var(--f7-theme-color);--f7-glass-shadow-fab:inset -3px -3px 0px -3.5px #fff,inset 3px 3px 0px -3.5px #fff,inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),inset 3px 3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),inset -3px -3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),inset 0 0 5px 1px #fff,0 0 15px 4px rgba(0, 0, 0, 0.2);--f7-fab-label-text-color:#000;--f7-fab-label-bg-color:#fff;--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:8px;--f7-fab-label-box-shadow:var(--f7-glass-shadow);--f7-fab-label-padding:8px 16px}.ios .dark,.ios.dark{--f7-fab-bg-color:color-mix(in oklab, var(--f7-theme-color-shade) 50%, transparent 0%);--f7-glass-shadow-fab:inset 3px 3px 0px -3.5px var(--f7-theme-color),inset -3px -3px 0px -3.5px var(--f7-theme-color),inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),inset 0px -5px 0px -3.5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),inset 0px -5px 5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),0 0 15px 4px rgba(0, 0, 0, 0.2);--f7-fab-label-text-color:#fff;--f7-fab-label-bg-color:#151515}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--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 1px 2px rgba(0, 0, 0, 0.25);--f7-fab-label-padding:4px 12px}.md,.md .dark,.md [class*=color-]{--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)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{background-color:var(--f7-fab-bg-color,var(--f7-theme-color));width:var(--f7-fab-size);height:var(--f7-fab-size);box-shadow:var(--f7-fab-box-shadow);border-radius:var(--f7-fab-border-radius);position:relative;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;color:var(--f7-fab-text-color)}.fab>a i{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5);opacity:0}.fab-buttons a{border-radius:var(--f7-fab-border-radius);width:var(--f7-fab-button-size);height:var(--f7-fab-button-size)}.fab-buttons{display:flex;visibility:hidden;pointer-events:none;position:absolute}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5);opacity:0}.fab-opened:not(.fab-morph)>a i+i{transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);opacity:1}.fab-opened .fab-buttons{visibility:visible;pointer-events:auto}.fab-opened .fab-buttons a{opacity:1;transform:translate3d(0,0px,0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:0.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:150ms}.fab-opened .fab-buttons a:nth-child(5){transition-delay:0.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:250ms}.fab-buttons-bottom,.fab-buttons-top{left:50%;width:var(--f7-fab-button-size);margin-left:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-top{bottom:100%;margin-bottom:16px;flex-direction:column-reverse}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{top:100%;margin-top:16px;flex-direction:column}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{top:50%;height:var(--f7-fab-button-size);margin-top:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-left{right:100%;margin-right:16px}.fab-buttons-left a{transform:translate3d(8px,0px,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px;flex-direction:row-reverse}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{left:0%;top:0%;width:100%;height:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);bottom:100%;margin-bottom:16px;transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-left:16px;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);top:100%;margin-top:16px;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){right:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-right:16px;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{border-radius:var(--f7-fab-border-radius);background:var(--f7-fab-bg-color,var(--f7-theme-color));box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{box-shadow:none;background:0 0!important}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:250ms}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{width:auto;min-width:var(--f7-fab-extended-size)}.fab-extended>a{width:100%;height:var(--f7-fab-extended-size)}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/ 2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);padding:var(--f7-fab-extended-text-padding);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{position:absolute;top:50%;padding:var(--f7-fab-label-padding);border-radius:var(--f7-fab-label-border-radius);background:var(--f7-fab-label-bg-color);color:var(--f7-fab-label-text-color);box-shadow:var(--f7-fab-label-box-shadow);white-space:nowrap;transform:translateY(-50%);pointer-events:none;font-size:var(--f7-fab-label-font-size)}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{right:100%;margin-right:8px}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a,.ios .fab>a{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow-fab)}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{transition-duration:0s;background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}
package/components/fab/fab-vars.less CHANGED
@@ -1,13 +1,37 @@
1
1
  :root {
2
2
  --f7-fab-margin: 16px;
3
3
  --f7-fab-extended-text-font-size: 14px;
4
- --f7-fab-label-padding: 4px 12px;
5
4
  --f7-fab-label-font-size: inherit;
6
5
  --f7-fab-button-size: 40px;
7
6
  }
8
7
  .ios-vars({
9
8
  /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
10
- /* --f7-fab-bg-color: var(--f7-theme-color)); */
9
+ .light-vars({
10
+ --f7-fab-bg-color: var(--f7-theme-color);
11
+ --f7-glass-shadow-fab: inset -3px -3px 0px -3.5px #fff,
12
+ inset 3px 3px 0px -3.5px #fff,
13
+ inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),
14
+ inset 3px 3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),
15
+ inset -3px -3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),
16
+ inset 0 0 5px 1px #fff,
17
+ 0 0 15px 4px rgba(0, 0, 0, 0.2);
18
+ --f7-fab-label-text-color: #000;
19
+ --f7-fab-label-bg-color: #fff;
20
+ });
21
+ .dark-vars({
22
+ --f7-fab-bg-color: color-mix(in oklab, var(--f7-theme-color-shade) 50%, transparent 0%);
23
+
24
+ --f7-glass-shadow-fab: inset 3px 3px 0px -3.5px var(--f7-theme-color),
25
+ inset -3px -3px 0px -3.5px var(--f7-theme-color),
26
+ inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
27
+ inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),
28
+ inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),
29
+ inset 0px -5px 0px -3.5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),
30
+ inset 0px -5px 5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),
31
+ 0 0 15px 4px rgba(0, 0, 0, 0.2);
32
+ --f7-fab-label-text-color: #fff;
33
+ --f7-fab-label-bg-color: #151515;
34
+ });
11
35
  --f7-fab-text-color: #fff;
12
36
  --f7-fab-border-radius: 50px;
13
37
  --f7-fab-size: 50px;
@@ -17,10 +41,9 @@
17
41
  --f7-fab-extended-text-padding: 0 20px;
18
42
  --f7-fab-extended-text-font-weight: 600;
19
43
  --f7-fab-extended-text-letter-spacing: 0;
20
- --f7-fab-label-border-radius: 4px;
21
- --f7-fab-label-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
22
- --f7-fab-label-text-color: #333;
23
- --f7-fab-label-bg-color: #fff;
44
+ --f7-fab-label-border-radius: 8px;
45
+ --f7-fab-label-box-shadow: var(--f7-glass-shadow);
46
+ --f7-fab-label-padding: 8px 16px;
24
47
  });
25
48
  .md-vars({
26
49
  /*
@@ -37,6 +60,7 @@
37
60
  --f7-fab-extended-text-transform: none;
38
61
  --f7-fab-label-border-radius: 8px;
39
62
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
63
+ --f7-fab-label-padding: 4px 12px;
40
64
  });
41
65
  .md-color-vars({
42
66
  --f7-fab-bg-color: var(--f7-md-primary-container);
package/components/fab/fab.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-padding:4px 12px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--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;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);--f7-fab-label-text-color:#333;--f7-fab-label-bg-color:#fff}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--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 1px 2px rgba(0, 0, 0, 0.25)}.md,.md .dark,.md [class*=color-]{--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)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{background-color:var(--f7-fab-bg-color,var(--f7-theme-color));width:var(--f7-fab-size);height:var(--f7-fab-size);box-shadow:var(--f7-fab-box-shadow);border-radius:var(--f7-fab-border-radius);position:relative;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;color:var(--f7-fab-text-color)}.fab>a i{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5);opacity:0}.fab-buttons a{border-radius:var(--f7-fab-border-radius);width:var(--f7-fab-button-size);height:var(--f7-fab-button-size)}.fab-buttons{display:flex;visibility:hidden;pointer-events:none;position:absolute}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5);opacity:0}.fab-opened:not(.fab-morph)>a i+i{transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);opacity:1}.fab-opened .fab-buttons{visibility:visible;pointer-events:auto}.fab-opened .fab-buttons a{opacity:1;transform:translate3d(0,0px,0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:0.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:150ms}.fab-opened .fab-buttons a:nth-child(5){transition-delay:0.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:250ms}.fab-buttons-bottom,.fab-buttons-top{left:50%;width:var(--f7-fab-button-size);margin-left:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-top{bottom:100%;margin-bottom:16px;flex-direction:column-reverse}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{top:100%;margin-top:16px;flex-direction:column}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{top:50%;height:var(--f7-fab-button-size);margin-top:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-left{right:100%;margin-right:16px;flex-direction:row-reverse}.fab-buttons-left a{transform:translate3d(8px,0px,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{left:0%;top:0%;width:100%;height:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);bottom:100%;margin-bottom:16px;transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-left:16px;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);top:100%;margin-top:16px;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){right:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-right:16px;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{border-radius:var(--f7-fab-border-radius);background:var(--f7-fab-bg-color,var(--f7-theme-color));box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{box-shadow:none;background:0 0!important}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:250ms}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{width:auto;min-width:var(--f7-fab-extended-size)}.fab-extended>a{width:100%;height:var(--f7-fab-extended-size)}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/ 2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);padding:var(--f7-fab-extended-text-padding);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{position:absolute;top:50%;padding:var(--f7-fab-label-padding);border-radius:var(--f7-fab-label-border-radius);background:var(--f7-fab-label-bg-color);color:var(--f7-fab-label-text-color);box-shadow:var(--f7-fab-label-box-shadow);white-space:nowrap;transform:translateY(-50%);pointer-events:none;font-size:var(--f7-fab-label-font-size)}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{right:100%;margin-right:8px}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{transition-duration:0s;background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}
1
+ :root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-bg-color:var(--f7-theme-color);--f7-glass-shadow-fab:inset -3px -3px 0px -3.5px #fff,inset 3px 3px 0px -3.5px #fff,inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),inset 3px 3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),inset -3px -3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),inset 0 0 5px 1px #fff,0 0 15px 4px rgba(0, 0, 0, 0.2);--f7-fab-label-text-color:#000;--f7-fab-label-bg-color:#fff;--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:8px;--f7-fab-label-box-shadow:var(--f7-glass-shadow);--f7-fab-label-padding:8px 16px}.ios .dark,.ios.dark{--f7-fab-bg-color:color-mix(in oklab, var(--f7-theme-color-shade) 50%, transparent 0%);--f7-glass-shadow-fab:inset 3px 3px 0px -3.5px var(--f7-theme-color),inset -3px -3px 0px -3.5px var(--f7-theme-color),inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),inset 0px -5px 0px -3.5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),inset 0px -5px 5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),0 0 15px 4px rgba(0, 0, 0, 0.2);--f7-fab-label-text-color:#fff;--f7-fab-label-bg-color:#151515}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--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 1px 2px rgba(0, 0, 0, 0.25);--f7-fab-label-padding:4px 12px}.md,.md .dark,.md [class*=color-]{--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)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{background-color:var(--f7-fab-bg-color,var(--f7-theme-color));width:var(--f7-fab-size);height:var(--f7-fab-size);box-shadow:var(--f7-fab-box-shadow);border-radius:var(--f7-fab-border-radius);position:relative;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;color:var(--f7-fab-text-color)}.fab>a i{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5);opacity:0}.fab-buttons a{border-radius:var(--f7-fab-border-radius);width:var(--f7-fab-button-size);height:var(--f7-fab-button-size)}.fab-buttons{display:flex;visibility:hidden;pointer-events:none;position:absolute}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5);opacity:0}.fab-opened:not(.fab-morph)>a i+i{transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);opacity:1}.fab-opened .fab-buttons{visibility:visible;pointer-events:auto}.fab-opened .fab-buttons a{opacity:1;transform:translate3d(0,0px,0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:0.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:150ms}.fab-opened .fab-buttons a:nth-child(5){transition-delay:0.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:250ms}.fab-buttons-bottom,.fab-buttons-top{left:50%;width:var(--f7-fab-button-size);margin-left:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-top{bottom:100%;margin-bottom:16px;flex-direction:column-reverse}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{top:100%;margin-top:16px;flex-direction:column}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{top:50%;height:var(--f7-fab-button-size);margin-top:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-left{right:100%;margin-right:16px;flex-direction:row-reverse}.fab-buttons-left a{transform:translate3d(8px,0px,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{left:0%;top:0%;width:100%;height:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);bottom:100%;margin-bottom:16px;transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-left:16px;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);top:100%;margin-top:16px;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){right:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-right:16px;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{border-radius:var(--f7-fab-border-radius);background:var(--f7-fab-bg-color,var(--f7-theme-color));box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{box-shadow:none;background:0 0!important}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:250ms}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{width:auto;min-width:var(--f7-fab-extended-size)}.fab-extended>a{width:100%;height:var(--f7-fab-extended-size)}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/ 2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);padding:var(--f7-fab-extended-text-padding);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{position:absolute;top:50%;padding:var(--f7-fab-label-padding);border-radius:var(--f7-fab-label-border-radius);background:var(--f7-fab-label-bg-color);color:var(--f7-fab-label-text-color);box-shadow:var(--f7-fab-label-box-shadow);white-space:nowrap;transform:translateY(-50%);pointer-events:none;font-size:var(--f7-fab-label-font-size)}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{right:100%;margin-right:8px}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a,.ios .fab>a{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow-fab)}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{transition-duration:0s;background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}
package/components/fab/fab.js CHANGED
@@ -109,10 +109,7 @@ const Fab = {
109
109
  $fabEl.siblings('.fab-backdrop').addClass('backdrop-in');
110
110
  $fabEl.trigger('fab:open');
111
111
  },
112
- close(fabEl) {
113
- if (fabEl === void 0) {
114
- fabEl = '.fab-opened';
115
- }
112
+ close(fabEl = '.fab-opened') {
116
113
  const app = this;
117
114
  const $fabEl = $(fabEl).eq(0);
118
115
  const $buttonsEl = $fabEl.find('.fab-buttons');
@@ -150,17 +147,11 @@ export default {
150
147
  const app = this;
151
148
  app.fab.toggle($clickedEl.parents('.fab'));
152
149
  },
153
- '.fab-open': function open($clickedEl, data) {
154
- if (data === void 0) {
155
- data = {};
156
- }
150
+ '.fab-open': function open($clickedEl, data = {}) {
157
151
  const app = this;
158
152
  app.fab.open(data.fab);
159
153
  },
160
- '.fab-close': function close($clickedEl, data) {
161
- if (data === void 0) {
162
- data = {};
163
- }
154
+ '.fab-close': function close($clickedEl, data = {}) {
164
155
  const app = this;
165
156
  app.fab.close(data.fab);
166
157
  },
package/components/gauge/gauge-class.js CHANGED
@@ -6,10 +6,7 @@ import Framework7Class from '../../shared/class.js';
6
6
  /** @jsx $jsx */
7
7
  import $jsx from '../../shared/$jsx.js';
8
8
  class Gauge extends Framework7Class {
9
- constructor(app, params) {
10
- if (params === void 0) {
11
- params = {};
12
- }
9
+ constructor(app, params = {}) {
13
10
  super(params, [app]);
14
11
  const self = this;
15
12
  const defaults = extend({}, app.params.gauge);
@@ -133,10 +130,7 @@ class Gauge extends Framework7Class {
133
130
  "dominant-baseline": !semiCircle && 'middle'
134
131
  }, labelText));
135
132
  }
136
- update(newParams) {
137
- if (newParams === void 0) {
138
- newParams = {};
139
- }
133
+ update(newParams = {}) {
140
134
  const self = this;
141
135
  const document = getDocument();
142
136
  const {
package/components/icon/icon-ios.less CHANGED
@@ -17,6 +17,16 @@
17
17
  }
18
18
  }
19
19
 
20
+ .icon-close {
21
+ width: 20px;
22
+ height: 20px;
23
+ line-height: 20px;
24
+ font-size: 20px;
25
+ &:after {
26
+ content: 'close_ios';
27
+ }
28
+ }
29
+
20
30
  .ltr({
21
31
  .icon-back, .icon-prev {
22
32
  &:after {
package/components/icon/icon-md.less CHANGED
@@ -9,6 +9,15 @@
9
9
  line-height: 1.2;
10
10
  }
11
11
  }
12
+ .icon-close {
13
+ width: 24px;
14
+ height: 24px;
15
+ line-height: 24px;
16
+ font-size: 24px;
17
+ &:after {
18
+ content: 'close_md';
19
+ }
20
+ }
12
21
  .ltr({
13
22
  .icon-back {
14
23
  &:after {
package/components/icon/icon.less CHANGED
@@ -16,7 +16,8 @@ i.icon {
16
16
  .icon-back,
17
17
  .icon-prev,
18
18
  .icon-forward,
19
- .icon-next {
19
+ .icon-next,
20
+ .icon-close {
20
21
  &:after {
21
22
  .core-icons-font();
22
23
  }
package/components/input/input-ios.less CHANGED
@@ -112,7 +112,7 @@
112
112
  margin-top: 2px;
113
113
  }
114
114
  .item-title + .item-input-wrap {
115
- margin-top: -22px;
115
+ margin-top: -18px;
116
116
  }
117
117
 
118
118
  .item-label,
@@ -123,7 +123,8 @@
123
123
  }
124
124
 
125
125
  .item-floating-label {
126
- transform: scale(var(--f7-floating-label-scale)) translateY(calc(var(--f7-label-height)));
126
+ transform: scale(var(--f7-floating-label-scale))
127
+ translateY(calc(var(--f7-label-height) + 4px));
127
128
  }
128
129
  }
129
130
  }