framework7 7.0.8 → 8.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 (579) hide show
  1. package/components/accordion/accordion.js +2 -16
  2. package/components/accordion/accordion.less +0 -3
  3. package/components/actions/actions-class.js +13 -58
  4. package/components/actions/actions-ios.less +42 -0
  5. package/components/actions/actions-md.less +12 -0
  6. package/components/actions/actions-rtl.css +1 -1
  7. package/components/actions/actions-vars.less +17 -42
  8. package/components/actions/actions.css +1 -1
  9. package/components/actions/actions.d.ts +2 -2
  10. package/components/actions/actions.js +0 -4
  11. package/components/actions/actions.lazy.js +1 -1
  12. package/components/actions/actions.less +5 -35
  13. package/components/app/app-class.d.ts +14 -12
  14. package/components/app/app-class.js +93 -75
  15. package/components/app/app-ios.less +0 -2
  16. package/components/app/app-md.less +0 -2
  17. package/components/app/app-vars.less +13 -96
  18. package/components/app/app.less +1 -4
  19. package/components/app/load-module.js +17 -36
  20. package/components/area-chart/area-chart-class.js +8 -64
  21. package/components/area-chart/area-chart.js +0 -3
  22. package/components/area-chart/area-chart.less +0 -3
  23. package/components/autocomplete/autocomplete-class.js +30 -175
  24. package/components/autocomplete/autocomplete-ios.less +0 -8
  25. package/components/autocomplete/autocomplete-rtl.css +1 -1
  26. package/components/autocomplete/autocomplete-vars.less +8 -22
  27. package/components/autocomplete/autocomplete.css +1 -1
  28. package/components/autocomplete/autocomplete.d.ts +1 -3
  29. package/components/autocomplete/autocomplete.js +1 -6
  30. package/components/autocomplete/autocomplete.lazy.js +1 -1
  31. package/components/autocomplete/autocomplete.less +6 -18
  32. package/components/badge/badge-vars.less +3 -6
  33. package/components/badge/badge.less +1 -3
  34. package/components/block/block-vars.less +25 -52
  35. package/components/block/block.less +37 -12
  36. package/components/breadcrumbs/breadcrumbs-rtl.css +1 -1
  37. package/components/breadcrumbs/breadcrumbs-vars.less +31 -15
  38. package/components/breadcrumbs/breadcrumbs.css +1 -1
  39. package/components/breadcrumbs/breadcrumbs.js +0 -2
  40. package/components/breadcrumbs/breadcrumbs.less +4 -10
  41. package/components/button/button-vars.less +42 -43
  42. package/components/button/button.less +24 -26
  43. package/components/calendar/calendar-class.js +81 -401
  44. package/components/calendar/calendar-rtl.css +1 -1
  45. package/components/calendar/calendar-vars.less +32 -46
  46. package/components/calendar/calendar.css +1 -1
  47. package/components/calendar/calendar.js +6 -4
  48. package/components/calendar/calendar.lazy.js +1 -1
  49. package/components/calendar/calendar.less +10 -21
  50. package/components/card/card-rtl.css +1 -1
  51. package/components/card/card-vars.less +41 -44
  52. package/components/card/card.css +1 -1
  53. package/components/card/card.js +0 -108
  54. package/components/card/card.less +18 -24
  55. package/components/checkbox/checkbox-rtl.css +1 -1
  56. package/components/checkbox/checkbox-vars.less +0 -8
  57. package/components/checkbox/checkbox.css +1 -1
  58. package/components/checkbox/checkbox.less +10 -3
  59. package/components/chip/chip-ios.less +3 -0
  60. package/components/chip/chip-md.less +4 -3
  61. package/components/chip/chip-rtl.css +1 -1
  62. package/components/chip/chip-vars.less +17 -20
  63. package/components/chip/chip.css +1 -1
  64. package/components/chip/chip.less +16 -21
  65. package/components/color-picker/color-picker-class.js +27 -158
  66. package/components/color-picker/color-picker-rtl.css +1 -1
  67. package/components/color-picker/color-picker.css +1 -1
  68. package/components/color-picker/color-picker.js +0 -4
  69. package/components/color-picker/color-picker.lazy.js +1 -1
  70. package/components/color-picker/color-picker.less +18 -8
  71. package/components/color-picker/modules/alpha-slider.js +0 -12
  72. package/components/color-picker/modules/brightness-slider.js +0 -8
  73. package/components/color-picker/modules/current-color.js +0 -2
  74. package/components/color-picker/modules/hex.js +0 -12
  75. package/components/color-picker/modules/hs-spectrum.js +0 -20
  76. package/components/color-picker/modules/hsb-sliders.js +0 -18
  77. package/components/color-picker/modules/hue-slider.js +0 -7
  78. package/components/color-picker/modules/initial-current-colors.js +0 -7
  79. package/components/color-picker/modules/palette.js +2 -10
  80. package/components/color-picker/modules/rgb-bars.js +0 -17
  81. package/components/color-picker/modules/rgb-sliders.js +0 -17
  82. package/components/color-picker/modules/sb-spectrum.js +0 -20
  83. package/components/color-picker/modules/wheel.js +0 -28
  84. package/components/contacts-list/contacts-list-md.less +4 -3
  85. package/components/contacts-list/contacts-list-rtl.css +1 -1
  86. package/components/contacts-list/contacts-list-vars.less +3 -15
  87. package/components/contacts-list/contacts-list.css +1 -1
  88. package/components/contacts-list/contacts-list.less +0 -3
  89. package/components/data-table/data-table-class.js +10 -32
  90. package/components/data-table/data-table-rtl.css +1 -1
  91. package/components/data-table/data-table-vars.less +6 -39
  92. package/components/data-table/data-table.css +1 -1
  93. package/components/data-table/data-table.js +0 -8
  94. package/components/data-table/data-table.less +0 -3
  95. package/components/dialog/dialog-class.js +7 -41
  96. package/components/dialog/dialog-ios.less +0 -3
  97. package/components/dialog/dialog-md.less +9 -9
  98. package/components/dialog/dialog-rtl.css +1 -1
  99. package/components/dialog/dialog-vars.less +25 -70
  100. package/components/dialog/dialog.css +1 -1
  101. package/components/dialog/dialog.d.ts +2 -2
  102. package/components/dialog/dialog.js +12 -48
  103. package/components/dialog/dialog.lazy.js +1 -1
  104. package/components/dialog/dialog.less +8 -4
  105. package/components/fab/fab-rtl.css +1 -1
  106. package/components/fab/fab-vars.less +20 -14
  107. package/components/fab/fab.css +1 -1
  108. package/components/fab/fab.js +0 -21
  109. package/components/fab/fab.less +50 -53
  110. package/components/form/form.d.ts +4 -4
  111. package/components/form/form.js +58 -94
  112. package/components/form/form.lazy.js +1 -1
  113. package/components/form/form.less +0 -3
  114. package/components/gauge/gauge-class.js +4 -20
  115. package/components/gauge/gauge.js +0 -9
  116. package/components/gauge/gauge.less +0 -3
  117. package/components/grid/grid-rtl.css +1 -1
  118. package/components/grid/grid-vars.less +0 -7
  119. package/components/grid/grid.css +1 -1
  120. package/components/grid/grid.d.ts +2 -8
  121. package/components/grid/grid.js +1 -225
  122. package/components/grid/grid.lazy.js +1 -1
  123. package/components/grid/grid.less +54 -184
  124. package/components/icon/icon.less +0 -3
  125. package/components/infinite-scroll/infinite-scroll-rtl.css +1 -1
  126. package/components/infinite-scroll/infinite-scroll.css +1 -1
  127. package/components/infinite-scroll/infinite-scroll.js +0 -16
  128. package/components/infinite-scroll/infinite-scroll.less +0 -3
  129. package/components/input/input-ios.less +49 -41
  130. package/components/input/input-md.less +87 -19
  131. package/components/input/input-rtl.css +1 -1
  132. package/components/input/input-vars.less +26 -60
  133. package/components/input/input.css +1 -1
  134. package/components/input/input.js +8 -67
  135. package/components/input/input.less +67 -153
  136. package/components/link/link-vars.less +0 -5
  137. package/components/link/link.less +3 -3
  138. package/components/list/list-md.less +0 -7
  139. package/components/list/list-vars.less +59 -108
  140. package/components/list/list.less +122 -90
  141. package/components/list-index/list-index-class.js +12 -69
  142. package/components/list-index/list-index-rtl.css +1 -1
  143. package/components/list-index/list-index-vars.less +0 -7
  144. package/components/list-index/list-index.css +1 -1
  145. package/components/list-index/list-index.d.ts +1 -3
  146. package/components/list-index/list-index.js +0 -8
  147. package/components/list-index/list-index.lazy.js +1 -1
  148. package/components/list-index/list-index.less +4 -7
  149. package/components/login-screen/login-screen-class.js +4 -9
  150. package/components/login-screen/login-screen-rtl.css +1 -1
  151. package/components/login-screen/login-screen-vars.less +13 -12
  152. package/components/login-screen/login-screen.css +1 -1
  153. package/components/login-screen/login-screen.js +0 -4
  154. package/components/login-screen/login-screen.less +2 -8
  155. package/components/messagebar/messagebar-class.js +18 -79
  156. package/components/messagebar/messagebar-ios.less +36 -0
  157. package/components/messagebar/messagebar-md.less +96 -16
  158. package/components/messagebar/messagebar-rtl.css +1 -1
  159. package/components/messagebar/messagebar-vars.less +27 -50
  160. package/components/messagebar/messagebar.css +1 -1
  161. package/components/messagebar/messagebar.js +0 -8
  162. package/components/messagebar/messagebar.less +11 -42
  163. package/components/messages/messages-class.js +17 -110
  164. package/components/messages/messages-ios.less +9 -0
  165. package/components/messages/messages-md.less +63 -28
  166. package/components/messages/messages-rtl.css +1 -1
  167. package/components/messages/messages-vars.less +43 -50
  168. package/components/messages/messages.css +1 -1
  169. package/components/messages/messages.js +0 -8
  170. package/components/messages/messages.lazy.js +1 -1
  171. package/components/messages/messages.less +0 -11
  172. package/components/modal/custom-modal-class.js +4 -14
  173. package/components/modal/modal-class.js +19 -55
  174. package/components/modal/modal.js +0 -3
  175. package/components/navbar/navbar-ios.less +3 -39
  176. package/components/navbar/navbar-md.less +12 -0
  177. package/components/navbar/navbar-vars.less +20 -49
  178. package/components/navbar/navbar.d.ts +0 -2
  179. package/components/navbar/navbar.js +37 -166
  180. package/components/navbar/navbar.less +4 -26
  181. package/components/notification/notification-class.js +4 -39
  182. package/components/notification/notification-md.less +18 -8
  183. package/components/notification/notification-rtl.css +1 -1
  184. package/components/notification/notification-vars.less +15 -54
  185. package/components/notification/notification.css +1 -1
  186. package/components/notification/notification.js +0 -2
  187. package/components/notification/notification.lazy.js +1 -1
  188. package/components/notification/notification.less +0 -3
  189. package/components/page/page-md.less +40 -10
  190. package/components/page/page-transitions/circle.less +15 -9
  191. package/components/page/page-transitions/fade.less +17 -11
  192. package/components/page/page-transitions/flip.less +9 -4
  193. package/components/page/page-vars.less +3 -19
  194. package/components/page/page.less +2 -10
  195. package/components/panel/panel-class.js +23 -127
  196. package/components/panel/panel-md.less +9 -0
  197. package/components/panel/panel-rtl.css +1 -1
  198. package/components/panel/panel-vars.less +7 -21
  199. package/components/panel/panel.css +1 -1
  200. package/components/panel/panel.d.ts +2 -2
  201. package/components/panel/panel.js +0 -34
  202. package/components/panel/panel.lazy.js +1 -1
  203. package/components/panel/panel.less +56 -48
  204. package/components/panel/resizable-panel.js +2 -32
  205. package/components/panel/swipe-panel.js +16 -71
  206. package/components/photo-browser/photo-browser-class.js +41 -171
  207. package/components/photo-browser/photo-browser-rtl.css +1 -1
  208. package/components/photo-browser/photo-browser-vars.less +0 -3
  209. package/components/photo-browser/photo-browser.css +1 -1
  210. package/components/photo-browser/photo-browser.d.ts +2 -4
  211. package/components/photo-browser/photo-browser.js +1 -6
  212. package/components/photo-browser/photo-browser.lazy.js +1 -1
  213. package/components/photo-browser/photo-browser.less +0 -4
  214. package/components/picker/picker-class.js +26 -133
  215. package/components/picker/picker-column.js +11 -31
  216. package/components/picker/picker-ios.less +10 -0
  217. package/components/picker/picker-md.less +6 -0
  218. package/components/picker/picker-rtl.css +1 -1
  219. package/components/picker/picker-vars.less +9 -25
  220. package/components/picker/picker.css +1 -1
  221. package/components/picker/picker.js +0 -4
  222. package/components/picker/picker.lazy.js +1 -1
  223. package/components/picker/picker.less +0 -11
  224. package/components/pie-chart/pie-chart-class.js +8 -31
  225. package/components/pie-chart/pie-chart.js +0 -3
  226. package/components/pie-chart/pie-chart.less +0 -3
  227. package/components/popover/popover-class.js +72 -126
  228. package/components/popover/popover-ios.less +0 -50
  229. package/components/popover/popover-rtl.css +1 -1
  230. package/components/popover/popover-vars.less +6 -23
  231. package/components/popover/popover.css +1 -1
  232. package/components/popover/popover.d.ts +2 -0
  233. package/components/popover/popover.js +1 -12
  234. package/components/popover/popover.lazy.js +1 -1
  235. package/components/popover/popover.less +62 -5
  236. package/components/popup/popup-class.js +12 -78
  237. package/components/popup/popup-rtl.css +1 -1
  238. package/components/popup/popup-vars.less +7 -9
  239. package/components/popup/popup.css +1 -1
  240. package/components/popup/popup.js +0 -4
  241. package/components/popup/popup.lazy.js +1 -1
  242. package/components/popup/popup.less +4 -4
  243. package/components/preloader/preloader-ios.less +3 -1
  244. package/components/preloader/preloader-md.less +5 -1
  245. package/components/preloader/preloader-rtl.css +1 -1
  246. package/components/preloader/preloader-vars.less +0 -6
  247. package/components/preloader/preloader.css +1 -1
  248. package/components/preloader/preloader.js +8 -25
  249. package/components/preloader/preloader.lazy.js +1 -1
  250. package/components/preloader/preloader.less +6 -3
  251. package/components/progressbar/progressbar-rtl.css +1 -1
  252. package/components/progressbar/progressbar-vars.less +2 -12
  253. package/components/progressbar/progressbar.css +1 -1
  254. package/components/progressbar/progressbar.js +2 -31
  255. package/components/progressbar/progressbar.less +0 -3
  256. package/components/pull-to-refresh/pull-to-refresh-class.js +15 -107
  257. package/components/pull-to-refresh/pull-to-refresh-md.less +2 -1
  258. package/components/pull-to-refresh/pull-to-refresh-rtl.css +1 -1
  259. package/components/pull-to-refresh/pull-to-refresh-vars.less +0 -4
  260. package/components/pull-to-refresh/pull-to-refresh.css +1 -1
  261. package/components/pull-to-refresh/pull-to-refresh.js +0 -8
  262. package/components/pull-to-refresh/pull-to-refresh.lazy.js +1 -1
  263. package/components/pull-to-refresh/pull-to-refresh.less +0 -3
  264. package/components/radio/radio-rtl.css +1 -1
  265. package/components/radio/radio-vars.less +0 -7
  266. package/components/radio/radio.css +1 -1
  267. package/components/radio/radio.less +12 -5
  268. package/components/range/range-class.js +27 -112
  269. package/components/range/range-rtl.css +1 -1
  270. package/components/range/range-vars.less +10 -32
  271. package/components/range/range.css +1 -1
  272. package/components/range/range.js +0 -12
  273. package/components/range/range.less +0 -3
  274. package/components/searchbar/remove-diacritics.js +0 -4
  275. package/components/searchbar/searchbar-class.js +17 -138
  276. package/components/searchbar/searchbar-md.less +41 -16
  277. package/components/searchbar/searchbar-rtl.css +1 -1
  278. package/components/searchbar/searchbar-vars.less +25 -76
  279. package/components/searchbar/searchbar.css +1 -1
  280. package/components/searchbar/searchbar.d.ts +2 -2
  281. package/components/searchbar/searchbar.js +0 -15
  282. package/components/searchbar/searchbar.lazy.js +1 -1
  283. package/components/searchbar/searchbar.less +14 -28
  284. package/components/sheet/sheet-class.js +15 -110
  285. package/components/sheet/sheet-rtl.css +1 -1
  286. package/components/sheet/sheet-vars.less +17 -6
  287. package/components/sheet/sheet.css +1 -1
  288. package/components/sheet/sheet.js +0 -9
  289. package/components/sheet/sheet.lazy.js +1 -1
  290. package/components/sheet/sheet.less +10 -3
  291. package/components/skeleton/skeleton.less +1 -4
  292. package/components/smart-select/smart-select-class.js +36 -173
  293. package/components/smart-select/smart-select.d.ts +1 -3
  294. package/components/smart-select/smart-select.js +1 -14
  295. package/components/smart-select/smart-select.lazy.js +1 -1
  296. package/components/smart-select/smart-select.less +0 -3
  297. package/components/sortable/sortable-rtl.css +1 -1
  298. package/components/sortable/sortable-vars.less +8 -8
  299. package/components/sortable/sortable.css +1 -1
  300. package/components/sortable/sortable.js +0 -44
  301. package/components/sortable/sortable.less +0 -3
  302. package/components/statusbar/statusbar.js +0 -36
  303. package/components/statusbar/statusbar.less +0 -3
  304. package/components/stepper/stepper-class.js +10 -83
  305. package/components/stepper/stepper-rtl.css +1 -1
  306. package/components/stepper/stepper-vars.less +12 -24
  307. package/components/stepper/stepper.css +1 -1
  308. package/components/stepper/stepper.js +0 -12
  309. package/components/stepper/stepper.less +12 -23
  310. package/components/subnavbar/subnavbar-vars.less +3 -18
  311. package/components/subnavbar/subnavbar.js +0 -3
  312. package/components/subnavbar/subnavbar.less +1 -11
  313. package/components/swipeout/swipeout-rtl.css +1 -1
  314. package/components/swipeout/swipeout-vars.less +7 -6
  315. package/components/swipeout/swipeout.css +1 -1
  316. package/components/swipeout/swipeout.js +2 -99
  317. package/components/swipeout/swipeout.less +2 -7
  318. package/components/swiper/swiper-rtl.css +1 -1
  319. package/components/swiper/swiper.css +1 -1
  320. package/components/swiper/swiper.js +9 -30
  321. package/components/swiper/swiper.lazy.js +1 -1
  322. package/components/swiper/swiper.less +1 -16
  323. package/components/tabs/tabs-rtl.css +1 -1
  324. package/components/tabs/tabs.css +1 -1
  325. package/components/tabs/tabs.js +23 -60
  326. package/components/tabs/tabs.lazy.js +1 -1
  327. package/components/tabs/tabs.less +1 -3
  328. package/components/text-editor/text-editor-class.js +16 -102
  329. package/components/text-editor/text-editor-rtl.css +1 -1
  330. package/components/text-editor/text-editor-vars.less +12 -16
  331. package/components/text-editor/text-editor.css +1 -1
  332. package/components/text-editor/text-editor.js +0 -8
  333. package/components/text-editor/text-editor.lazy.js +1 -1
  334. package/components/text-editor/text-editor.less +0 -6
  335. package/components/timeline/timeline-rtl.css +1 -1
  336. package/components/timeline/timeline-vars.less +13 -47
  337. package/components/timeline/timeline.css +1 -1
  338. package/components/timeline/timeline.less +2 -9
  339. package/components/toast/toast-class.js +2 -16
  340. package/components/toast/toast-rtl.css +1 -1
  341. package/components/toast/toast-vars.less +5 -9
  342. package/components/toast/toast.css +1 -1
  343. package/components/toast/toast.js +0 -3
  344. package/components/toast/toast.less +0 -3
  345. package/components/toggle/toggle-class.js +6 -30
  346. package/components/toggle/toggle-ios.less +5 -1
  347. package/components/toggle/toggle-md.less +27 -11
  348. package/components/toggle/toggle-rtl.css +1 -1
  349. package/components/toggle/toggle-vars.less +19 -21
  350. package/components/toggle/toggle.css +1 -1
  351. package/components/toggle/toggle.js +0 -8
  352. package/components/toggle/toggle.less +0 -4
  353. package/components/toolbar/toolbar-ios.less +2 -2
  354. package/components/toolbar/toolbar-md.less +28 -4
  355. package/components/toolbar/toolbar-vars.less +17 -52
  356. package/components/toolbar/toolbar.js +5 -43
  357. package/components/toolbar/toolbar.less +27 -45
  358. package/components/tooltip/tooltip-class.js +10 -64
  359. package/components/tooltip/tooltip-rtl.css +1 -1
  360. package/components/tooltip/tooltip-vars.less +12 -3
  361. package/components/tooltip/tooltip.css +1 -1
  362. package/components/tooltip/tooltip.js +0 -15
  363. package/components/tooltip/tooltip.less +0 -3
  364. package/components/touch-ripple/touch-ripple-class.js +0 -13
  365. package/components/touch-ripple/touch-ripple.js +0 -4
  366. package/components/touch-ripple/touch-ripple.less +1 -5
  367. package/components/treeview/treeview-rtl.css +1 -1
  368. package/components/treeview/treeview-vars.less +0 -3
  369. package/components/treeview/treeview.css +1 -1
  370. package/components/treeview/treeview.js +2 -11
  371. package/components/treeview/treeview.lazy.js +1 -1
  372. package/components/treeview/treeview.less +0 -3
  373. package/components/typography/typography-rtl.css +1 -1
  374. package/components/typography/typography.css +1 -1
  375. package/components/typography/typography.less +25 -3
  376. package/components/view/resizable-view.js +2 -24
  377. package/components/view/view-class.js +28 -53
  378. package/components/view/view.d.ts +0 -14
  379. package/components/view/view.js +8 -32
  380. package/components/view/view.less +1 -4
  381. package/components/virtual-list/virtual-list-class.js +58 -146
  382. package/components/virtual-list/virtual-list.d.ts +1 -1
  383. package/components/virtual-list/virtual-list.js +0 -2
  384. package/components/virtual-list/virtual-list.lazy.js +1 -1
  385. package/components/virtual-list/virtual-list.less +0 -3
  386. package/framework7-bundle-rtl.css +3593 -5977
  387. package/framework7-bundle-rtl.min.css +3 -3
  388. package/framework7-bundle.css +3591 -5978
  389. package/framework7-bundle.esm.js +4 -10
  390. package/framework7-bundle.js +6063 -12044
  391. package/framework7-bundle.js.map +1 -1
  392. package/framework7-bundle.less +2 -27
  393. package/framework7-bundle.min.css +3 -3
  394. package/framework7-bundle.min.js +3 -3
  395. package/framework7-bundle.min.js.map +1 -1
  396. package/framework7-lite-bundle.esm.js +4 -10
  397. package/framework7-lite.esm.js +4 -6
  398. package/framework7-lite.js +31 -0
  399. package/framework7-rtl.css +803 -1591
  400. package/framework7-rtl.min.css +3 -3
  401. package/framework7-types.d.ts +1 -32
  402. package/framework7.css +803 -1594
  403. package/framework7.d.ts +1 -32
  404. package/framework7.esm.js +4 -6
  405. package/framework7.js +1770 -3407
  406. package/framework7.js.map +1 -1
  407. package/framework7.less +2 -23
  408. package/framework7.min.css +3 -3
  409. package/framework7.min.js +3 -3
  410. package/framework7.min.js.map +1 -1
  411. package/less/mixins.less +7 -88
  412. package/less/plugin.js +15 -0
  413. package/modules/clicks/clicks.js +10 -22
  414. package/modules/component/$h.js +0 -3
  415. package/modules/component/$jsx.js +0 -5
  416. package/modules/component/component-class.js +13 -66
  417. package/modules/component/component.d.ts +1 -2
  418. package/modules/component/component.js +0 -8
  419. package/modules/component/eventslisteners.js +12 -20
  420. package/modules/component/parse-component.js +18 -20
  421. package/modules/component/snabbdom/h.js +3 -12
  422. package/modules/component/snabbdom/helpers/attachto.js +9 -14
  423. package/modules/component/snabbdom/htmldomapi.js +0 -16
  424. package/modules/component/snabbdom/modules/attributes.js +7 -11
  425. package/modules/component/snabbdom/modules/class.js +4 -8
  426. package/modules/component/snabbdom/modules/dataset.js +3 -7
  427. package/modules/component/snabbdom/modules/eventlisteners.js +16 -22
  428. package/modules/component/snabbdom/modules/hero.js +4 -44
  429. package/modules/component/snabbdom/modules/props.js +5 -9
  430. package/modules/component/snabbdom/modules/style.js +13 -30
  431. package/modules/component/snabbdom/snabbdom.bundle.js +0 -6
  432. package/modules/component/snabbdom/snabbdom.js +13 -72
  433. package/modules/component/snabbdom/thunk.js +3 -11
  434. package/modules/component/snabbdom/tovnode.js +1 -6
  435. package/modules/component/vdom.js +4 -62
  436. package/modules/demo-module.js +0 -8
  437. package/modules/device/device.js +6 -11
  438. package/modules/history/history.js +0 -1
  439. package/modules/resize/resize.js +8 -11
  440. package/modules/router/async-component.js +0 -3
  441. package/modules/router/back.js +86 -275
  442. package/modules/router/clear-previous-history.js +5 -18
  443. package/modules/router/component-loader.js +4 -25
  444. package/modules/router/modal.js +16 -43
  445. package/modules/router/navigate.js +80 -249
  446. package/modules/router/process-route-queue.js +0 -12
  447. package/modules/router/redirect.js +0 -8
  448. package/modules/router/router-class.js +92 -315
  449. package/modules/router/router.d.ts +3 -5
  450. package/modules/router/router.js +0 -3
  451. package/modules/router/swipe-back.js +35 -139
  452. package/modules/router/tab.js +14 -43
  453. package/modules/service-worker/service-worker.js +0 -11
  454. package/modules/store/create-store.js +10 -29
  455. package/modules/touch/touch.d.ts +2 -4
  456. package/modules/touch/touch.js +13 -108
  457. package/package.json +4 -18
  458. package/shared/$jsx.js +0 -6
  459. package/shared/class.js +18 -43
  460. package/shared/constructor-methods.js +0 -11
  461. package/shared/events-class.js +0 -17
  462. package/shared/get-device.js +18 -34
  463. package/shared/get-support.js +2 -8
  464. package/shared/history.js +2 -30
  465. package/shared/material-color-utils.js +728 -0
  466. package/shared/material-colors.js +75 -0
  467. package/shared/modal-methods.js +0 -18
  468. package/shared/utils.d.ts +0 -4
  469. package/shared/utils.js +191 -71
  470. package/components/accordion/accordion-aurora.less +0 -2
  471. package/components/actions/actions-aurora.less +0 -9
  472. package/components/app/app-aurora.less +0 -10
  473. package/components/appbar/appbar-aurora.less +0 -2
  474. package/components/appbar/appbar-ios.less +0 -2
  475. package/components/appbar/appbar-md.less +0 -2
  476. package/components/appbar/appbar-rtl.css +0 -1
  477. package/components/appbar/appbar-vars.less +0 -28
  478. package/components/appbar/appbar.css +0 -1
  479. package/components/appbar/appbar.d.ts +0 -14
  480. package/components/appbar/appbar.js +0 -3
  481. package/components/appbar/appbar.lazy.js +0 -1
  482. package/components/appbar/appbar.less +0 -106
  483. package/components/area-chart/area-chart-aurora.less +0 -2
  484. package/components/autocomplete/autocomplete-aurora.less +0 -17
  485. package/components/badge/badge-aurora.less +0 -2
  486. package/components/block/block-aurora.less +0 -2
  487. package/components/breadcrumbs/breadcrumbs-aurora.less +0 -2
  488. package/components/button/button-aurora.less +0 -25
  489. package/components/calendar/calendar-aurora.less +0 -2
  490. package/components/card/card-aurora.less +0 -2
  491. package/components/checkbox/checkbox-aurora.less +0 -39
  492. package/components/chip/chip-aurora.less +0 -14
  493. package/components/color-picker/color-picker-aurora.less +0 -2
  494. package/components/contacts-list/contacts-list-aurora.less +0 -2
  495. package/components/data-table/data-table-aurora.less +0 -64
  496. package/components/dialog/dialog-aurora.less +0 -112
  497. package/components/elevation/elevation-aurora.less +0 -2
  498. package/components/elevation/elevation-ios.less +0 -2
  499. package/components/elevation/elevation-md.less +0 -2
  500. package/components/elevation/elevation-rtl.css +0 -1
  501. package/components/elevation/elevation-vars.less +0 -51
  502. package/components/elevation/elevation.css +0 -1
  503. package/components/elevation/elevation.d.ts +0 -14
  504. package/components/elevation/elevation.js +0 -3
  505. package/components/elevation/elevation.lazy.js +0 -1
  506. package/components/elevation/elevation.less +0 -54
  507. package/components/fab/fab-aurora.less +0 -2
  508. package/components/form/form-aurora.less +0 -0
  509. package/components/gauge/gauge-aurora.less +0 -2
  510. package/components/grid/grid-aurora.less +0 -2
  511. package/components/icon/icon-aurora.less +0 -49
  512. package/components/infinite-scroll/infinite-scroll-aurora.less +0 -6
  513. package/components/input/input-aurora.less +0 -120
  514. package/components/lazy/lazy-aurora.less +0 -2
  515. package/components/lazy/lazy-ios.less +0 -2
  516. package/components/lazy/lazy-md.less +0 -2
  517. package/components/lazy/lazy-rtl.css +0 -1
  518. package/components/lazy/lazy.css +0 -1
  519. package/components/lazy/lazy.d.ts +0 -57
  520. package/components/lazy/lazy.js +0 -283
  521. package/components/lazy/lazy.lazy.js +0 -1
  522. package/components/lazy/lazy.less +0 -23
  523. package/components/link/link-aurora.less +0 -15
  524. package/components/list/list-aurora.less +0 -25
  525. package/components/list-index/list-index-aurora.less +0 -21
  526. package/components/login-screen/login-screen-aurora.less +0 -2
  527. package/components/menu/menu-aurora.less +0 -8
  528. package/components/menu/menu-ios.less +0 -2
  529. package/components/menu/menu-md.less +0 -2
  530. package/components/menu/menu-rtl.css +0 -1
  531. package/components/menu/menu-vars.less +0 -27
  532. package/components/menu/menu.css +0 -1
  533. package/components/menu/menu.d.ts +0 -32
  534. package/components/menu/menu.js +0 -87
  535. package/components/menu/menu.lazy.js +0 -1
  536. package/components/menu/menu.less +0 -232
  537. package/components/messagebar/messagebar-aurora.less +0 -53
  538. package/components/messages/messages-aurora.less +0 -137
  539. package/components/navbar/navbar-aurora.less +0 -70
  540. package/components/notification/notification-aurora.less +0 -59
  541. package/components/page/page-aurora.less +0 -49
  542. package/components/panel/panel-aurora.less +0 -2
  543. package/components/photo-browser/photo-browser-aurora.less +0 -2
  544. package/components/picker/picker-aurora.less +0 -2
  545. package/components/pie-chart/pie-chart-aurora.less +0 -2
  546. package/components/popover/popover-aurora.less +0 -56
  547. package/components/popup/popup-aurora.less +0 -2
  548. package/components/preloader/preloader-aurora.less +0 -53
  549. package/components/progressbar/progressbar-aurora.less +0 -72
  550. package/components/pull-to-refresh/pull-to-refresh-aurora.less +0 -122
  551. package/components/radio/radio-aurora.less +0 -86
  552. package/components/range/range-aurora.less +0 -9
  553. package/components/searchbar/searchbar-aurora.less +0 -86
  554. package/components/sheet/sheet-aurora.less +0 -2
  555. package/components/skeleton/skeleton-aurora.less +0 -2
  556. package/components/smart-select/smart-select-aurora.less +0 -2
  557. package/components/sortable/sortable-aurora.less +0 -7
  558. package/components/statusbar/statusbar-aurora.less +0 -2
  559. package/components/stepper/stepper-aurora.less +0 -32
  560. package/components/subnavbar/subnavbar-aurora.less +0 -51
  561. package/components/swipeout/swipeout-aurora.less +0 -2
  562. package/components/swiper/swiper-aurora.less +0 -2
  563. package/components/tabs/tabs-aurora.less +0 -2
  564. package/components/text-editor/text-editor-aurora.less +0 -9
  565. package/components/timeline/timeline-aurora.less +0 -7
  566. package/components/toast/toast-aurora.less +0 -64
  567. package/components/toggle/toggle-aurora.less +0 -26
  568. package/components/toolbar/toolbar-aurora.less +0 -43
  569. package/components/tooltip/tooltip-aurora.less +0 -2
  570. package/components/touch-ripple/touch-ripple-aurora.less +0 -2
  571. package/components/treeview/treeview-aurora.less +0 -31
  572. package/components/typography/typography-aurora.less +0 -2
  573. package/components/view/view-aurora.less +0 -2
  574. package/components/virtual-list/virtual-list-aurora.less +0 -2
  575. package/modules/request/request.d.ts +0 -15
  576. package/modules/request/request.js +0 -11
  577. package/postinstall.js +0 -3
  578. package/shared/request.d.ts +0 -115
  579. package/shared/request.js +0 -512
package/framework7.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Framework7 7.0.8
2
+ * Framework7 8.0.0-beta.1
3
3
  * Full featured mobile HTML framework for building iOS & Android apps
4
4
  * https://framework7.io/
5
5
  *
@@ -7,17 +7,13 @@
7
7
  *
8
8
  * Released under the MIT License
9
9
  *
10
- * Released on: September 14, 2022
10
+ * Released on: December 16, 2022
11
11
  */
12
12
 
13
13
  /*====================
14
14
  Core
15
15
  ==================== */
16
16
  :root {
17
- --f7-theme-color: #007aff;
18
- --f7-theme-color-rgb: 0, 122, 255;
19
- --f7-theme-color-shade: #0066d6;
20
- --f7-theme-color-tint: #298fff;
21
17
  --f7-safe-area-left: 0px;
22
18
  --f7-safe-area-right: 0px;
23
19
  --f7-safe-area-top: 0px;
@@ -81,30 +77,24 @@
81
77
  ==================== */
82
78
  :root {
83
79
  --f7-font-size: 14px;
84
- /*
85
- --f7-bars-link-color: var(--f7-theme-color);
86
- */
87
- --f7-bars-bg-image: none;
88
80
  --f7-bars-translucent-opacity: 0.8;
89
81
  --f7-bars-translucent-blur: 20px;
90
- --f7-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
91
- --f7-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
92
- --f7-bars-text-color: #000;
93
- --f7-bars-bg-color: #f7f7f8;
94
- --f7-bars-bg-color-rgb: 247, 247, 248;
95
- }
96
- :root .dark,
97
- :root.dark {
98
- --f7-bars-text-color: #fff;
99
82
  }
100
83
  .ios {
101
84
  --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
102
85
  --f7-line-height: 1.4;
86
+ /*
87
+ --f7-bars-link-color: var(--f7-theme-color);
88
+ */
89
+ --f7-bars-text-color: #000;
103
90
  --f7-text-color: #000;
91
+ --f7-bars-bg-color: #f7f7f8;
92
+ --f7-bars-bg-color-rgb: 247, 247, 248;
104
93
  --f7-bars-border-color: rgba(0, 0, 0, 0.25);
105
94
  }
106
95
  .ios .dark,
107
96
  .ios.dark {
97
+ --f7-bars-text-color: #fff;
108
98
  --f7-text-color: #fff;
109
99
  --f7-bars-bg-color: #121212;
110
100
  --f7-bars-bg-color-rgb: 22, 22, 22;
@@ -119,19 +109,13 @@
119
109
  .md .dark,
120
110
  .md.dark {
121
111
  --f7-text-color: rgba(255, 255, 255, 0.87);
122
- --f7-bars-bg-color: #202020;
123
- }
124
- .aurora {
125
- --f7-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
126
- --f7-line-height: 1.5;
127
- --f7-text-color: #000;
128
- --f7-bars-border-color: rgba(0, 0, 0, 0.2);
129
112
  }
130
- .aurora .dark,
131
- .aurora.dark {
132
- --f7-text-color: #fff;
133
- --f7-bars-bg-color: #202020;
134
- --f7-bars-border-color: rgba(255, 255, 255, 0.1);
113
+ .md,
114
+ .md .dark,
115
+ .md [class*='color-'] {
116
+ --f7-bars-link-color: var(--f7-md-on-surface);
117
+ --f7-bars-bg-color: var(--f7-md-surface-2);
118
+ --f7-bars-bg-color-rgb: var(--f7-md-surface-2-rgb);
135
119
  }
136
120
  /*====================
137
121
  Color Themes
@@ -148,446 +132,9 @@
148
132
  .ripple-color-primary {
149
133
  --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
150
134
  }
151
- :root {
152
- --f7-color-red: #ff3b30;
153
- --f7-color-red-rgb: 255, 59, 48;
154
- --f7-color-red-shade: #ff1407;
155
- --f7-color-red-tint: #ff6259;
156
- --f7-color-green: #4cd964;
157
- --f7-color-green-rgb: 76, 217, 100;
158
- --f7-color-green-shade: #2cd048;
159
- --f7-color-green-tint: #6ee081;
160
- --f7-color-blue: #2196f3;
161
- --f7-color-blue-rgb: 33, 150, 243;
162
- --f7-color-blue-shade: #0c82df;
163
- --f7-color-blue-tint: #48a8f5;
164
- --f7-color-pink: #ff2d55;
165
- --f7-color-pink-rgb: 255, 45, 85;
166
- --f7-color-pink-shade: #ff0434;
167
- --f7-color-pink-tint: #ff5676;
168
- --f7-color-yellow: #ffcc00;
169
- --f7-color-yellow-rgb: 255, 204, 0;
170
- --f7-color-yellow-shade: #d6ab00;
171
- --f7-color-yellow-tint: #ffd429;
172
- --f7-color-orange: #ff9500;
173
- --f7-color-orange-rgb: 255, 149, 0;
174
- --f7-color-orange-shade: #d67d00;
175
- --f7-color-orange-tint: #ffa629;
176
- --f7-color-purple: #9c27b0;
177
- --f7-color-purple-rgb: 156, 39, 176;
178
- --f7-color-purple-shade: #7e208f;
179
- --f7-color-purple-tint: #b92fd1;
180
- --f7-color-deeppurple: #673ab7;
181
- --f7-color-deeppurple-rgb: 103, 58, 183;
182
- --f7-color-deeppurple-shade: #563098;
183
- --f7-color-deeppurple-tint: #7c52c8;
184
- --f7-color-lightblue: #5ac8fa;
185
- --f7-color-lightblue-rgb: 90, 200, 250;
186
- --f7-color-lightblue-shade: #32bbf9;
187
- --f7-color-lightblue-tint: #82d5fb;
188
- --f7-color-teal: #009688;
189
- --f7-color-teal-rgb: 0, 150, 136;
190
- --f7-color-teal-shade: #006d63;
191
- --f7-color-teal-tint: #00bfad;
192
- --f7-color-lime: #cddc39;
193
- --f7-color-lime-rgb: 205, 220, 57;
194
- --f7-color-lime-shade: #bac923;
195
- --f7-color-lime-tint: #d6e25c;
196
- --f7-color-deeporange: #ff6b22;
197
- --f7-color-deeporange-rgb: 255, 107, 34;
198
- --f7-color-deeporange-shade: #f85200;
199
- --f7-color-deeporange-tint: #ff864b;
200
- --f7-color-gray: #8e8e93;
201
- --f7-color-gray-rgb: 142, 142, 147;
202
- --f7-color-gray-shade: #79797f;
203
- --f7-color-gray-tint: #a3a3a7;
204
- --f7-color-white: #ffffff;
205
- --f7-color-white-rgb: 255, 255, 255;
206
- --f7-color-white-shade: #ebebeb;
207
- --f7-color-white-tint: #ffffff;
208
- --f7-color-black: #000000;
209
- --f7-color-black-rgb: 0, 0, 0;
210
- --f7-color-black-shade: #000000;
211
- --f7-color-black-tint: #141414;
212
- }
213
- .color-theme-red {
214
- --f7-theme-color: #ff3b30;
215
- --f7-theme-color-rgb: 255, 59, 48;
216
- --f7-theme-color-shade: #ff1407;
217
- --f7-theme-color-tint: #ff6259;
218
- }
219
- .color-theme-green {
220
- --f7-theme-color: #4cd964;
221
- --f7-theme-color-rgb: 76, 217, 100;
222
- --f7-theme-color-shade: #2cd048;
223
- --f7-theme-color-tint: #6ee081;
224
- }
225
- .color-theme-blue {
226
- --f7-theme-color: #2196f3;
227
- --f7-theme-color-rgb: 33, 150, 243;
228
- --f7-theme-color-shade: #0c82df;
229
- --f7-theme-color-tint: #48a8f5;
230
- }
231
- .color-theme-pink {
232
- --f7-theme-color: #ff2d55;
233
- --f7-theme-color-rgb: 255, 45, 85;
234
- --f7-theme-color-shade: #ff0434;
235
- --f7-theme-color-tint: #ff5676;
236
- }
237
- .color-theme-yellow {
238
- --f7-theme-color: #ffcc00;
239
- --f7-theme-color-rgb: 255, 204, 0;
240
- --f7-theme-color-shade: #d6ab00;
241
- --f7-theme-color-tint: #ffd429;
242
- }
243
- .color-theme-orange {
244
- --f7-theme-color: #ff9500;
245
- --f7-theme-color-rgb: 255, 149, 0;
246
- --f7-theme-color-shade: #d67d00;
247
- --f7-theme-color-tint: #ffa629;
248
- }
249
- .color-theme-purple {
250
- --f7-theme-color: #9c27b0;
251
- --f7-theme-color-rgb: 156, 39, 176;
252
- --f7-theme-color-shade: #7e208f;
253
- --f7-theme-color-tint: #b92fd1;
254
- }
255
- .color-theme-deeppurple {
256
- --f7-theme-color: #673ab7;
257
- --f7-theme-color-rgb: 103, 58, 183;
258
- --f7-theme-color-shade: #563098;
259
- --f7-theme-color-tint: #7c52c8;
260
- }
261
- .color-theme-lightblue {
262
- --f7-theme-color: #5ac8fa;
263
- --f7-theme-color-rgb: 90, 200, 250;
264
- --f7-theme-color-shade: #32bbf9;
265
- --f7-theme-color-tint: #82d5fb;
266
- }
267
- .color-theme-teal {
268
- --f7-theme-color: #009688;
269
- --f7-theme-color-rgb: 0, 150, 136;
270
- --f7-theme-color-shade: #006d63;
271
- --f7-theme-color-tint: #00bfad;
272
- }
273
- .color-theme-lime {
274
- --f7-theme-color: #cddc39;
275
- --f7-theme-color-rgb: 205, 220, 57;
276
- --f7-theme-color-shade: #bac923;
277
- --f7-theme-color-tint: #d6e25c;
278
- }
279
- .color-theme-deeporange {
280
- --f7-theme-color: #ff6b22;
281
- --f7-theme-color-rgb: 255, 107, 34;
282
- --f7-theme-color-shade: #f85200;
283
- --f7-theme-color-tint: #ff864b;
284
- }
285
- .color-theme-gray {
286
- --f7-theme-color: #8e8e93;
287
- --f7-theme-color-rgb: 142, 142, 147;
288
- --f7-theme-color-shade: #79797f;
289
- --f7-theme-color-tint: #a3a3a7;
290
- }
291
- .color-theme-white {
292
- --f7-theme-color: #ffffff;
293
- --f7-theme-color-rgb: 255, 255, 255;
294
- --f7-theme-color-shade: #ebebeb;
295
- --f7-theme-color-tint: #ffffff;
296
- }
297
- .color-theme-black {
298
- --f7-theme-color: #000000;
299
- --f7-theme-color-rgb: 0, 0, 0;
300
- --f7-theme-color-shade: #000000;
301
- --f7-theme-color-tint: #141414;
302
- }
303
- .color-red {
304
- --f7-theme-color: #ff3b30;
305
- --f7-theme-color-rgb: 255, 59, 48;
306
- --f7-theme-color-shade: #ff1407;
307
- --f7-theme-color-tint: #ff6259;
308
- }
309
- .text-color-red {
310
- --f7-theme-color-text-color: #ff3b30;
311
- }
312
- .bg-color-red {
313
- --f7-theme-color-bg-color: #ff3b30;
314
- }
315
- .border-color-red {
316
- --f7-theme-color-border-color: #ff3b30;
317
- }
318
- .ripple-color-red,
319
- .ripple-red {
320
- --f7-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
321
- }
322
- .color-green {
323
- --f7-theme-color: #4cd964;
324
- --f7-theme-color-rgb: 76, 217, 100;
325
- --f7-theme-color-shade: #2cd048;
326
- --f7-theme-color-tint: #6ee081;
327
- }
328
- .text-color-green {
329
- --f7-theme-color-text-color: #4cd964;
330
- }
331
- .bg-color-green {
332
- --f7-theme-color-bg-color: #4cd964;
333
- }
334
- .border-color-green {
335
- --f7-theme-color-border-color: #4cd964;
336
- }
337
- .ripple-color-green,
338
- .ripple-green {
339
- --f7-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
340
- }
341
- .color-blue {
342
- --f7-theme-color: #2196f3;
343
- --f7-theme-color-rgb: 33, 150, 243;
344
- --f7-theme-color-shade: #0c82df;
345
- --f7-theme-color-tint: #48a8f5;
346
- }
347
- .text-color-blue {
348
- --f7-theme-color-text-color: #2196f3;
349
- }
350
- .bg-color-blue {
351
- --f7-theme-color-bg-color: #2196f3;
352
- }
353
- .border-color-blue {
354
- --f7-theme-color-border-color: #2196f3;
355
- }
356
- .ripple-color-blue,
357
- .ripple-blue {
358
- --f7-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
359
- }
360
- .color-pink {
361
- --f7-theme-color: #ff2d55;
362
- --f7-theme-color-rgb: 255, 45, 85;
363
- --f7-theme-color-shade: #ff0434;
364
- --f7-theme-color-tint: #ff5676;
365
- }
366
- .text-color-pink {
367
- --f7-theme-color-text-color: #ff2d55;
368
- }
369
- .bg-color-pink {
370
- --f7-theme-color-bg-color: #ff2d55;
371
- }
372
- .border-color-pink {
373
- --f7-theme-color-border-color: #ff2d55;
374
- }
375
- .ripple-color-pink,
376
- .ripple-pink {
377
- --f7-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
378
- }
379
- .color-yellow {
380
- --f7-theme-color: #ffcc00;
381
- --f7-theme-color-rgb: 255, 204, 0;
382
- --f7-theme-color-shade: #d6ab00;
383
- --f7-theme-color-tint: #ffd429;
384
- }
385
- .text-color-yellow {
386
- --f7-theme-color-text-color: #ffcc00;
387
- }
388
- .bg-color-yellow {
389
- --f7-theme-color-bg-color: #ffcc00;
390
- }
391
- .border-color-yellow {
392
- --f7-theme-color-border-color: #ffcc00;
393
- }
394
- .ripple-color-yellow,
395
- .ripple-yellow {
396
- --f7-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
397
- }
398
- .color-orange {
399
- --f7-theme-color: #ff9500;
400
- --f7-theme-color-rgb: 255, 149, 0;
401
- --f7-theme-color-shade: #d67d00;
402
- --f7-theme-color-tint: #ffa629;
403
- }
404
- .text-color-orange {
405
- --f7-theme-color-text-color: #ff9500;
406
- }
407
- .bg-color-orange {
408
- --f7-theme-color-bg-color: #ff9500;
409
- }
410
- .border-color-orange {
411
- --f7-theme-color-border-color: #ff9500;
412
- }
413
- .ripple-color-orange,
414
- .ripple-orange {
415
- --f7-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
416
- }
417
- .color-purple {
418
- --f7-theme-color: #9c27b0;
419
- --f7-theme-color-rgb: 156, 39, 176;
420
- --f7-theme-color-shade: #7e208f;
421
- --f7-theme-color-tint: #b92fd1;
422
- }
423
- .text-color-purple {
424
- --f7-theme-color-text-color: #9c27b0;
425
- }
426
- .bg-color-purple {
427
- --f7-theme-color-bg-color: #9c27b0;
428
- }
429
- .border-color-purple {
430
- --f7-theme-color-border-color: #9c27b0;
431
- }
432
- .ripple-color-purple,
433
- .ripple-purple {
434
- --f7-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
435
- }
436
- .color-deeppurple {
437
- --f7-theme-color: #673ab7;
438
- --f7-theme-color-rgb: 103, 58, 183;
439
- --f7-theme-color-shade: #563098;
440
- --f7-theme-color-tint: #7c52c8;
441
- }
442
- .text-color-deeppurple {
443
- --f7-theme-color-text-color: #673ab7;
444
- }
445
- .bg-color-deeppurple {
446
- --f7-theme-color-bg-color: #673ab7;
447
- }
448
- .border-color-deeppurple {
449
- --f7-theme-color-border-color: #673ab7;
450
- }
451
- .ripple-color-deeppurple,
452
- .ripple-deeppurple {
453
- --f7-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
454
- }
455
- .color-lightblue {
456
- --f7-theme-color: #5ac8fa;
457
- --f7-theme-color-rgb: 90, 200, 250;
458
- --f7-theme-color-shade: #32bbf9;
459
- --f7-theme-color-tint: #82d5fb;
460
- }
461
- .text-color-lightblue {
462
- --f7-theme-color-text-color: #5ac8fa;
463
- }
464
- .bg-color-lightblue {
465
- --f7-theme-color-bg-color: #5ac8fa;
466
- }
467
- .border-color-lightblue {
468
- --f7-theme-color-border-color: #5ac8fa;
469
- }
470
- .ripple-color-lightblue,
471
- .ripple-lightblue {
472
- --f7-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
473
- }
474
- .color-teal {
475
- --f7-theme-color: #009688;
476
- --f7-theme-color-rgb: 0, 150, 136;
477
- --f7-theme-color-shade: #006d63;
478
- --f7-theme-color-tint: #00bfad;
479
- }
480
- .text-color-teal {
481
- --f7-theme-color-text-color: #009688;
482
- }
483
- .bg-color-teal {
484
- --f7-theme-color-bg-color: #009688;
485
- }
486
- .border-color-teal {
487
- --f7-theme-color-border-color: #009688;
488
- }
489
- .ripple-color-teal,
490
- .ripple-teal {
491
- --f7-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
492
- }
493
- .color-lime {
494
- --f7-theme-color: #cddc39;
495
- --f7-theme-color-rgb: 205, 220, 57;
496
- --f7-theme-color-shade: #bac923;
497
- --f7-theme-color-tint: #d6e25c;
498
- }
499
- .text-color-lime {
500
- --f7-theme-color-text-color: #cddc39;
501
- }
502
- .bg-color-lime {
503
- --f7-theme-color-bg-color: #cddc39;
504
- }
505
- .border-color-lime {
506
- --f7-theme-color-border-color: #cddc39;
507
- }
508
- .ripple-color-lime,
509
- .ripple-lime {
510
- --f7-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
511
- }
512
- .color-deeporange {
513
- --f7-theme-color: #ff6b22;
514
- --f7-theme-color-rgb: 255, 107, 34;
515
- --f7-theme-color-shade: #f85200;
516
- --f7-theme-color-tint: #ff864b;
517
- }
518
- .text-color-deeporange {
519
- --f7-theme-color-text-color: #ff6b22;
520
- }
521
- .bg-color-deeporange {
522
- --f7-theme-color-bg-color: #ff6b22;
523
- }
524
- .border-color-deeporange {
525
- --f7-theme-color-border-color: #ff6b22;
526
- }
527
- .ripple-color-deeporange,
528
- .ripple-deeporange {
529
- --f7-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
530
- }
531
- .color-gray {
532
- --f7-theme-color: #8e8e93;
533
- --f7-theme-color-rgb: 142, 142, 147;
534
- --f7-theme-color-shade: #79797f;
535
- --f7-theme-color-tint: #a3a3a7;
536
- }
537
- .text-color-gray {
538
- --f7-theme-color-text-color: #8e8e93;
539
- }
540
- .bg-color-gray {
541
- --f7-theme-color-bg-color: #8e8e93;
542
- }
543
- .border-color-gray {
544
- --f7-theme-color-border-color: #8e8e93;
545
- }
546
- .ripple-color-gray,
547
- .ripple-gray {
548
- --f7-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
549
- }
550
- .color-white {
551
- --f7-theme-color: #ffffff;
552
- --f7-theme-color-rgb: 255, 255, 255;
553
- --f7-theme-color-shade: #ebebeb;
554
- --f7-theme-color-tint: #ffffff;
555
- }
556
- .text-color-white {
557
- --f7-theme-color-text-color: #ffffff;
558
- }
559
- .bg-color-white {
560
- --f7-theme-color-bg-color: #ffffff;
561
- }
562
- .border-color-white {
563
- --f7-theme-color-border-color: #ffffff;
564
- }
565
- .ripple-color-white,
566
- .ripple-white {
567
- --f7-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
568
- }
569
- .color-black {
570
- --f7-theme-color: #000000;
571
- --f7-theme-color-rgb: 0, 0, 0;
572
- --f7-theme-color-shade: #000000;
573
- --f7-theme-color-tint: #141414;
574
- }
575
- .text-color-black {
576
- --f7-theme-color-text-color: #000000;
577
- }
578
- .bg-color-black {
579
- --f7-theme-color-bg-color: #000000;
580
- }
581
- .border-color-black {
582
- --f7-theme-color-border-color: #000000;
583
- }
584
- .ripple-color-black,
585
- .ripple-black {
586
- --f7-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
587
- }
588
135
  @font-face {
589
136
  font-family: 'framework7-core-icons';
590
- src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
137
+ src: url('data:application/font-woff;charset=utf-8;base64, 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') format('woff');
591
138
  font-weight: 400;
592
139
  font-style: normal;
593
140
  }
@@ -681,8 +228,6 @@ html.device-full-viewport body {
681
228
  }
682
229
  .ios .md-only,
683
230
  .ios .if-md,
684
- .ios .aurora-only,
685
- .ios .if-aurora,
686
231
  .ios .if-not-ios,
687
232
  .ios .not-ios {
688
233
  display: none !important;
@@ -703,20 +248,10 @@ html.device-full-viewport body {
703
248
  }
704
249
  .md .ios-only,
705
250
  .md .if-ios,
706
- .md .aurora-only,
707
- .md .if-aurora,
708
251
  .md .if-not-md,
709
252
  .md .not-md {
710
253
  display: none !important;
711
254
  }
712
- .aurora .ios-only,
713
- .aurora .if-ios,
714
- .aurora .md-only,
715
- .aurora .if-md,
716
- .aurora .if-not-aurora,
717
- .aurora .not-aurora {
718
- display: none !important;
719
- }
720
255
  /* === Statusbar === */
721
256
  /* === Views === */
722
257
  .views,
@@ -729,7 +264,7 @@ html.device-full-viewport body {
729
264
  }
730
265
  .framework7-root > .view,
731
266
  .framework7-root > .views {
732
- height: calc(100% - var(--f7-appbar-app-offset, 0px));
267
+ height: 100%;
733
268
  }
734
269
  .view-resize-handler {
735
270
  width: 6px;
@@ -779,28 +314,16 @@ html.device-full-viewport body {
779
314
  --f7-page-bg-color: #000;
780
315
  }
781
316
  .md {
782
- --f7-page-transition-duration: 250ms;
317
+ --f7-page-transition-duration: 400ms;
783
318
  --f7-page-title-font-size: 34px;
784
319
  --f7-page-title-font-weight: 500;
785
320
  --f7-page-title-letter-spacing: 0;
786
321
  --f7-page-title-padding-vertical: 8px;
787
- --f7-page-bg-color: #fff;
788
322
  }
323
+ .md,
789
324
  .md .dark,
790
- .md.dark {
791
- --f7-page-bg-color: #121212;
792
- }
793
- .aurora {
794
- --f7-page-transition-duration: 250ms;
795
- --f7-page-title-font-size: 28px;
796
- --f7-page-title-font-weight: bold;
797
- --f7-page-title-letter-spacing: 0;
798
- --f7-page-title-padding-vertical: 7px;
799
- --f7-page-bg-color: #f3f4f6;
800
- }
801
- .aurora .dark,
802
- .aurora.dark {
803
- --f7-page-bg-color: #121212;
325
+ .md [class*='color-'] {
326
+ --f7-page-bg-color: var(--f7-md-surface);
804
327
  }
805
328
  .dark {
806
329
  --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
@@ -822,9 +345,6 @@ html.device-full-viewport body {
822
345
  background-color: var(--f7-page-bg-color);
823
346
  z-index: 1;
824
347
  }
825
- .page.stacked {
826
- display: none;
827
- }
828
348
  .page-with-navbar-large-collapsed {
829
349
  --f7-navbar-large-collapse-progress: 1;
830
350
  }
@@ -854,9 +374,7 @@ html.device-full-viewport body {
854
374
  .router-transition-forward .page-next,
855
375
  .router-transition-backward .page-next,
856
376
  .router-transition-forward .page-current,
857
- .router-transition-backward .page-current,
858
- .router-transition-forward .page-previous:not(.stacked),
859
- .router-transition-backward .page-previous:not(.stacked) {
377
+ .router-transition-backward .page-current {
860
378
  pointer-events: none;
861
379
  }
862
380
  .page-shadow-effect {
@@ -1004,80 +522,69 @@ html.device-full-viewport body {
1004
522
  opacity: 0;
1005
523
  }
1006
524
  }
525
+ .md .page-previous {
526
+ transform: translate3d(0, -20px, 0);
527
+ }
1007
528
  .md .page-next {
1008
- opacity: 0;
1009
529
  pointer-events: none;
1010
- transform: translate3d(0, 56px, 0);
530
+ transform: translate3d(0, 128px, 0);
531
+ opacity: 0;
1011
532
  }
1012
533
  .md .page-next.page-next-on-right {
1013
534
  transform: translate3d(100%, 0, 0);
535
+ opacity: 1;
1014
536
  }
1015
537
  .md .router-transition-forward .page-next {
1016
- animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
538
+ opacity: 1;
539
+ animation: md-page-next-to-current var(--f7-page-transition-duration) forwards cubic-bezier(0, 0.8, 0.3, 1);
1017
540
  }
1018
541
  .md .router-transition-forward .page-current {
1019
- animation: none;
542
+ animation: md-page-current-to-previous var(--f7-page-transition-duration) forwards cubic-bezier(0, 0.8, 0.3, 1);
1020
543
  }
1021
544
  .md .router-transition-backward .page-current {
1022
- animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
545
+ animation: md-page-current-to-next calc(var(--f7-page-transition-duration) / 4) forwards cubic-bezier(0.8, 0, 1, 0.3), md-page-current-to-next-opacity 0ms calc(var(--f7-page-transition-duration) / 4) forwards;
1023
546
  }
1024
547
  .md .router-transition-backward .page-previous {
1025
- animation: none;
548
+ animation: md-page-previous-to-current var(--f7-page-transition-duration) forwards;
1026
549
  }
1027
550
  @keyframes md-page-next-to-current {
1028
551
  from {
1029
- transform: translate3d(0, 56px, 0);
1030
- opacity: 0;
552
+ transform: translate3d(0, 128px, 0);
1031
553
  }
1032
554
  to {
1033
555
  transform: translate3d(0, 0px, 0);
1034
- opacity: 1;
1035
556
  }
1036
557
  }
1037
558
  @keyframes md-page-current-to-next {
1038
559
  from {
1039
560
  transform: translate3d(0, 0, 0);
561
+ }
562
+ to {
563
+ transform: translate3d(0, 128px, 0);
564
+ }
565
+ }
566
+ @keyframes md-page-current-to-next-opacity {
567
+ from {
1040
568
  opacity: 1;
1041
569
  }
1042
570
  to {
1043
- transform: translate3d(0, 56px, 0);
1044
571
  opacity: 0;
1045
572
  }
1046
573
  }
1047
- .aurora .page-next {
1048
- opacity: 0;
1049
- pointer-events: none;
1050
- transform: translate3d(0, 0px, 0);
1051
- }
1052
- .aurora .page-next.page-next-on-right {
1053
- transform: translate3d(100%, 0, 0);
1054
- }
1055
- .aurora .router-transition-forward .page-next {
1056
- animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
1057
- }
1058
- .aurora .router-transition-forward .page-current {
1059
- animation: none;
1060
- }
1061
- .aurora .router-transition-backward .page-current {
1062
- animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
1063
- }
1064
- .aurora .router-transition-backward .page-previous {
1065
- animation: none;
1066
- }
1067
- @keyframes aurora-page-next-to-current {
574
+ @keyframes md-page-current-to-previous {
1068
575
  from {
1069
- opacity: 0;
576
+ transform: translate3d(0, 0, 0);
1070
577
  }
1071
578
  to {
1072
- opacity: 1;
579
+ transform: translate3d(0, -20px, 0);
1073
580
  }
1074
581
  }
1075
- @keyframes aurora-page-current-to-next {
582
+ @keyframes md-page-previous-to-current {
1076
583
  from {
1077
- opacity: 1;
584
+ transform: translate3d(0, -20px, 0);
1078
585
  }
1079
586
  to {
1080
- opacity: 0;
587
+ transform: translate3d(0, 0px, 0);
1081
588
  }
1082
589
  }
1083
590
  .view:not(.view-master-detail) .page-master-stacked {
@@ -1119,16 +626,13 @@ html.device-full-viewport body {
1119
626
  }
1120
627
  .md .router-transition-custom .page-previous,
1121
628
  .ios .router-transition-custom .page-previous,
1122
- .aurora .router-transition-custom .page-previous,
1123
629
  .md .router-transition-custom .page-next,
1124
- .ios .router-transition-custom .page-next,
1125
- .aurora .router-transition-custom .page-next {
630
+ .ios .router-transition-custom .page-next {
1126
631
  opacity: 1;
1127
632
  transform: none;
1128
633
  }
1129
634
  .md .router-transition-custom.view-master-detail .page-master,
1130
- .ios .router-transition-custom.view-master-detail .page-master,
1131
- .aurora .router-transition-custom.view-master-detail .page-master {
635
+ .ios .router-transition-custom.view-master-detail .page-master {
1132
636
  animation: none;
1133
637
  }
1134
638
  .page-title {
@@ -1167,9 +671,10 @@ html.device-full-viewport body {
1167
671
  border-radius: 50%;
1168
672
  animation: f7-circle-circle-in 400ms forwards;
1169
673
  }
1170
- .router-transition-f7-circle-forward .page-next {
1171
- opacity: 0 !important;
1172
- transform: scale(0.9) !important;
674
+ .ios .router-transition-f7-circle-forward .page-next,
675
+ .md .router-transition-f7-circle-forward .page-next {
676
+ opacity: 0;
677
+ transform: scale(0.9);
1173
678
  animation: f7-circle-next-to-current 300ms forwards;
1174
679
  animation-delay: 300ms;
1175
680
  z-index: 150;
@@ -1178,7 +683,8 @@ html.device-full-viewport body {
1178
683
  animation: f7-circle-circle-out 300ms forwards;
1179
684
  animation-delay: 350ms;
1180
685
  }
1181
- .router-transition-f7-circle-backward .page-current {
686
+ .ios .router-transition-f7-circle-backward .page-current,
687
+ .md .router-transition-f7-circle-backward .page-current {
1182
688
  animation: f7-circle-current-to-next 700ms forwards;
1183
689
  z-index: 150;
1184
690
  }
@@ -1419,17 +925,21 @@ html.device-full-viewport body {
1419
925
  .router-transition-f7-fade-backward {
1420
926
  background: var(--f7-page-bg-color);
1421
927
  }
1422
- .router-transition-f7-fade-forward .page-next {
1423
- opacity: 0 !important;
928
+ .ios .router-transition-f7-fade-forward .page-next,
929
+ .md .router-transition-f7-fade-forward .page-next {
930
+ opacity: 0;
1424
931
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
1425
932
  }
1426
- .router-transition-f7-fade-forward .page-current {
933
+ .ios .router-transition-f7-fade-forward .page-current,
934
+ .md .router-transition-f7-fade-forward .page-current {
1427
935
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
1428
936
  }
1429
- .router-transition-f7-fade-backward .page-current {
937
+ .ios .router-transition-f7-fade-backward .page-current,
938
+ .md .router-transition-f7-fade-backward .page-current {
1430
939
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
1431
940
  }
1432
- .router-transition-f7-fade-backward .page-previous {
941
+ .ios .router-transition-f7-fade-backward .page-previous,
942
+ .md .router-transition-f7-fade-backward .page-previous {
1433
943
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
1434
944
  }
1435
945
  @keyframes f7-fade-in {
@@ -1463,22 +973,27 @@ html.device-full-viewport body {
1463
973
  .router-transition-f7-flip-backward .page {
1464
974
  -webkit-backface-visibility: hidden;
1465
975
  backface-visibility: hidden;
976
+ overflow: hidden;
1466
977
  }
1467
978
  .router-transition-f7-flip-forward .page-next {
979
+ transform-style: preserve-3d;
1468
980
  animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
1469
981
  }
1470
982
  .router-transition-f7-flip-forward .page-current {
983
+ transform-style: preserve-3d;
1471
984
  animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
1472
985
  }
1473
986
  .router-transition-f7-flip-backward .page-current {
987
+ transform-style: preserve-3d;
1474
988
  animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
1475
989
  }
1476
990
  .router-transition-f7-flip-backward .page-previous {
991
+ transform-style: preserve-3d;
1477
992
  animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
1478
993
  }
1479
994
  @keyframes f7-flip-next-to-current {
1480
995
  from {
1481
- border-radius: 30px;
996
+ border-radius: 32px;
1482
997
  transform: translateZ(-100vmax) rotateY(180deg);
1483
998
  }
1484
999
  to {
@@ -1492,7 +1007,7 @@ html.device-full-viewport body {
1492
1007
  transform: translateZ(0px) rotateY(0deg);
1493
1008
  }
1494
1009
  to {
1495
- border-radius: 30px;
1010
+ border-radius: 32px;
1496
1011
  transform: translateZ(-100vmax) rotateY(180deg);
1497
1012
  }
1498
1013
  }
@@ -1502,13 +1017,13 @@ html.device-full-viewport body {
1502
1017
  transform: translateZ(0px) rotateY(0deg);
1503
1018
  }
1504
1019
  to {
1505
- border-radius: 30px;
1020
+ border-radius: 32px;
1506
1021
  transform: translateZ(-100vmax) rotateY(-180deg);
1507
1022
  }
1508
1023
  }
1509
1024
  @keyframes f7-flip-prev-to-current {
1510
1025
  from {
1511
- border-radius: 30px;
1026
+ border-radius: 32px;
1512
1027
  transform: translateZ(-100vmax) rotateY(-180deg);
1513
1028
  }
1514
1029
  to {
@@ -1613,10 +1128,6 @@ html.device-full-viewport body {
1613
1128
  .ios {
1614
1129
  --f7-link-pressed-opacity: 0.3;
1615
1130
  }
1616
- .aurora {
1617
- --f7-link-pressed-opacity: 0.3;
1618
- --f7-link-hover-opacity: 0.65;
1619
- }
1620
1131
  .link,
1621
1132
  .tab-link {
1622
1133
  display: inline-flex;
@@ -1634,6 +1145,9 @@ html.device-full-viewport body {
1634
1145
  .link span + span {
1635
1146
  margin-left: 4px;
1636
1147
  }
1148
+ .link[class*='color-'] {
1149
+ color: var(--f7-theme-color);
1150
+ }
1637
1151
  .ios .link {
1638
1152
  transition: opacity 300ms;
1639
1153
  }
@@ -1641,30 +1155,15 @@ html.device-full-viewport body {
1641
1155
  opacity: var(--f7-link-pressed-opacity);
1642
1156
  transition-duration: 0ms;
1643
1157
  }
1644
- .aurora .link {
1645
- transition: opacity 300ms;
1646
- }
1647
- .aurora .link.active-state {
1648
- opacity: var(--f7-link-pressed-opacity);
1649
- transition-duration: 0ms;
1650
- }
1651
- .aurora.device-desktop .link:not(.active-state):not(.no-hover):hover {
1652
- opacity: var(--f7-link-hover-opacity);
1653
- transition-duration: 0ms;
1654
- }
1655
1158
  /* === Navbar === */
1656
1159
  :root {
1657
1160
  /*
1658
1161
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
1659
1162
  --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
1660
- --f7-navbar-bg-image: var(--f7-bars-bg-image);
1661
1163
  --f7-navbar-border-color: var(--f7-bars-border-color);
1662
- --f7-navbar-link-color: var(--f7-bars-link-color);
1663
- --f7-navbar-text-color: var(--f7-bars-text-color);
1664
1164
  */
1665
1165
  --f7-navbar-hide-show-transition-duration: 400ms;
1666
1166
  --f7-navbar-title-line-height: 1.2;
1667
- --f7-navbar-title-font-size: inherit;
1668
1167
  --f7-navbar-subtitle-text-align: inherit;
1669
1168
  --f7-navbar-large-title-line-height: 1.2;
1670
1169
  --f7-navbar-large-title-text-color: inherit;
@@ -1672,9 +1171,13 @@ html.device-full-viewport body {
1672
1171
  --f7-navbar-large-title-padding-right: 16px;
1673
1172
  }
1674
1173
  .ios {
1174
+ /*
1175
+ --f7-navbar-link-color: var(--f7-bars-link-color);
1176
+ --f7-navbar-text-color: var(--f7-bars-text-color);
1177
+ */
1675
1178
  --f7-navbar-height: 44px;
1676
- --f7-navbar-tablet-height: 44px;
1677
1179
  --f7-navbar-font-size: 17px;
1180
+ --f7-navbar-title-font-size: inherit;
1678
1181
  --f7-navbar-inner-padding-left: 8px;
1679
1182
  --f7-navbar-inner-padding-right: 8px;
1680
1183
  --f7-navbar-title-font-weight: 600;
@@ -1683,7 +1186,6 @@ html.device-full-viewport body {
1683
1186
  --f7-navbar-title-text-align: center;
1684
1187
  --f7-navbar-subtitle-font-size: 10px;
1685
1188
  --f7-navbar-subtitle-line-height: 1;
1686
- --f7-navbar-shadow-image: none;
1687
1189
  --f7-navbar-large-title-height: 52px;
1688
1190
  --f7-navbar-large-title-font-size: 34px;
1689
1191
  --f7-navbar-large-title-font-weight: 700;
@@ -1700,56 +1202,31 @@ html.device-full-viewport body {
1700
1202
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
1701
1203
  }
1702
1204
  .md {
1703
- --f7-navbar-height: 56px;
1704
- --f7-navbar-tablet-height: 64px;
1705
- --f7-navbar-font-size: 20px;
1706
- --f7-navbar-inner-padding-left: 4px;
1707
- --f7-navbar-inner-padding-right: 4px;
1708
- --f7-navbar-title-font-weight: 500;
1709
- --f7-navbar-title-margin-left: 20px;
1205
+ --f7-navbar-height: 64px;
1206
+ --f7-navbar-font-size: 16px;
1207
+ --f7-navbar-title-font-size: 22px;
1208
+ --f7-navbar-inner-padding-left: 0px;
1209
+ --f7-navbar-inner-padding-right: 0px;
1210
+ --f7-navbar-title-font-weight: 400;
1211
+ --f7-navbar-title-margin-left: 0px;
1710
1212
  --f7-navbar-title-margin-right: 16px;
1711
1213
  --f7-navbar-title-text-align: left;
1712
1214
  --f7-navbar-subtitle-font-size: 14px;
1713
1215
  --f7-navbar-subtitle-line-height: 1.2;
1714
- --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1715
- --f7-navbar-large-title-font-size: 34px;
1716
- --f7-navbar-large-title-height: 56px;
1717
- --f7-navbar-large-title-font-weight: 500;
1216
+ --f7-navbar-large-title-font-size: 28px;
1217
+ --f7-navbar-large-title-height: 88px;
1218
+ --f7-navbar-large-title-font-weight: 400;
1718
1219
  --f7-navbar-large-title-letter-spacing: 0;
1719
1220
  --f7-navbar-large-title-padding-vertical: 8px;
1720
1221
  --f7-navbar-link-height: 48px;
1721
1222
  --f7-navbar-link-line-height: 48px;
1722
- --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1723
1223
  }
1224
+ .md,
1724
1225
  .md .dark,
1725
- .md.dark {
1726
- --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1727
- }
1728
- .aurora {
1729
- --f7-navbar-height: 56px;
1730
- --f7-navbar-tablet-height: 56px;
1731
- --f7-navbar-font-size: 18px;
1732
- --f7-navbar-inner-padding-left: 16px;
1733
- --f7-navbar-inner-padding-right: 16px;
1734
- --f7-navbar-title-font-weight: bold;
1735
- --f7-navbar-title-margin-left: 0;
1736
- --f7-navbar-title-margin-right: 0;
1737
- --f7-navbar-title-text-align: center;
1738
- --f7-navbar-subtitle-font-size: 14px;
1739
- --f7-navbar-subtitle-line-height: 1;
1740
- --f7-navbar-shadow-image: none;
1741
- --f7-navbar-large-title-height: 48px;
1742
- --f7-navbar-large-title-font-size: 28px;
1743
- --f7-navbar-large-title-font-weight: bold;
1744
- --f7-navbar-large-title-letter-spacing: 0;
1745
- --f7-navbar-large-title-padding-vertical: 7px;
1746
- --f7-navbar-link-height: auto;
1747
- --f7-navbar-link-line-height: inherit;
1748
- --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
1749
- }
1750
- .aurora .dark,
1751
- .aurora.dark {
1752
- --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
1226
+ .md [class*='color-'] {
1227
+ --f7-navbar-link-color: var(--f7-md-on-surface);
1228
+ --f7-navbar-text-color: var(--f7-md-on-surface);
1229
+ --f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant);
1753
1230
  }
1754
1231
  .navbars,
1755
1232
  .navbar {
@@ -1778,9 +1255,6 @@ html.device-full-viewport body {
1778
1255
  color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1779
1256
  font-size: var(--f7-navbar-font-size);
1780
1257
  }
1781
- .navbar.stacked {
1782
- display: none;
1783
- }
1784
1258
  .navbar b {
1785
1259
  font-weight: 500;
1786
1260
  }
@@ -1832,20 +1306,12 @@ html.device-full-viewport body {
1832
1306
  position: absolute;
1833
1307
  height: 100%;
1834
1308
  }
1835
- .navbar.no-hairline .navbar-bg:after,
1836
- .navbar.no-border .navbar-bg:after,
1837
- .navbar .no-hairline .navbar-bg:after,
1838
- .navbar .no-border .navbar-bg:after {
1839
- display: none !important;
1840
- }
1841
- .navbar.no-hairline .title-large:after,
1842
- .navbar.no-border .title-large:after,
1843
- .navbar .no-hairline .title-large:after,
1844
- .navbar .no-border .title-large:after {
1309
+ .navbar.no-outline .navbar-bg:after,
1310
+ .navbar .no-outline .navbar-bg:after {
1845
1311
  display: none !important;
1846
1312
  }
1847
- .navbar.no-shadow .navbar-bg:before,
1848
- .navbar .no-shadow .navbar-bg:before {
1313
+ .navbar.no-outline .title-large:after,
1314
+ .navbar .no-outline .title-large:after {
1849
1315
  display: none !important;
1850
1316
  }
1851
1317
  .navbar.navbar-hidden .navbar-bg:before,
@@ -1861,7 +1327,6 @@ html.device-full-viewport body {
1861
1327
  pointer-events: none;
1862
1328
  z-index: 0;
1863
1329
  background: var(--f7-navbar-bg-color);
1864
- background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1865
1330
  background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
1866
1331
  transition-property: transform;
1867
1332
  }
@@ -1892,25 +1357,9 @@ html.device-full-viewport body {
1892
1357
  transform-origin: 50% 100%;
1893
1358
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1894
1359
  }
1895
- .navbar-bg:before {
1896
- content: '';
1897
- position: absolute;
1898
- right: 0;
1899
- width: 100%;
1900
- top: 100%;
1901
- bottom: auto;
1902
- height: 8px;
1903
- pointer-events: none;
1904
- background: var(--f7-navbar-shadow-image);
1905
- }
1906
1360
  .navbar-bg:after {
1907
1361
  z-index: 1;
1908
1362
  }
1909
- @media (min-width: 768px) and (min-height: 600px) {
1910
- :root {
1911
- --f7-navbar-height: var(--f7-navbar-tablet-height);
1912
- }
1913
- }
1914
1363
  .navbar-transitioning,
1915
1364
  .navbar-transitioning .left,
1916
1365
  .navbar-transitioning .title,
@@ -1978,8 +1427,6 @@ html.device-full-viewport body {
1978
1427
  .navbar-large-transparent .navbar-bg,
1979
1428
  .navbar-large.navbar-transparent .navbar-bg {
1980
1429
  opacity: var(--f7-navbar-large-collapse-progress);
1981
- height: 100%;
1982
- transform: none;
1983
1430
  }
1984
1431
  .ios .router-navbar-transition-to-large .navbar-bg,
1985
1432
  .ios .router-navbar-transition-from-large .navbar-bg,
@@ -2008,7 +1455,6 @@ html.device-full-viewport body {
2008
1455
  right: 0;
2009
1456
  top: 100%;
2010
1457
  display: flex;
2011
- align-items: flex-end;
2012
1458
  white-space: nowrap;
2013
1459
  overflow: hidden;
2014
1460
  height: var(--f7-navbar-large-title-height);
@@ -2053,15 +1499,16 @@ html.device-full-viewport body {
2053
1499
  .ios {
2054
1500
  --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
2055
1501
  --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
2056
- --f7-navbar-large-transparent-bg-center: translateX(0);
2057
1502
  --f7-navbar-large-bg-center-top: translateX(0) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2058
1503
  --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
2059
- --f7-navbar-large-transparent-bg-left: translateX(-100%);
2060
1504
  --f7-navbar-large-bg-left-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2061
1505
  --f7-navbar-large-bg-left-bottom: translateX(-100%) translateY(0);
2062
1506
  --f7-navbar-large-bg-right-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2063
1507
  --f7-navbar-large-bg-right-bottom: translateX(100%) translateY(0);
2064
1508
  }
1509
+ .ios .navbar .title-large {
1510
+ align-items: flex-end;
1511
+ }
2065
1512
  .ios .navbar a.icon-only {
2066
1513
  width: 44px;
2067
1514
  margin: 0;
@@ -2317,10 +1764,6 @@ html.device-full-viewport body {
2317
1764
  .ios .router-transition-forward .navbar-current.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
2318
1765
  animation-name: ios-navbar-bg-from-ct-to-lt;
2319
1766
  }
2320
- .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large) .navbar-bg,
2321
- .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large) .navbar-bg {
2322
- animation-name: ios-navbar-transparent-bg-from-c-to-l;
2323
- }
2324
1767
  .ios .router-transition-forward .navbar-next .navbar-bg {
2325
1768
  animation-name: ios-navbar-bg-from-rb-to-cb;
2326
1769
  }
@@ -2345,10 +1788,6 @@ html.device-full-viewport body {
2345
1788
  .ios .router-transition-backward .navbar-current.navbar-large-collapsed .navbar-bg {
2346
1789
  animation-name: ios-navbar-bg-from-ct-to-rt;
2347
1790
  }
2348
- .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
2349
- .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
2350
- animation-name: ios-navbar-bg-from-cb-to-rb;
2351
- }
2352
1791
  .ios .router-transition-backward .navbar-current.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
2353
1792
  animation-name: ios-navbar-bg-from-ct-to-rb;
2354
1793
  }
@@ -2364,14 +1803,6 @@ html.device-full-viewport body {
2364
1803
  .ios .router-transition-backward .navbar-previous.navbar-large-collapsed .navbar-bg {
2365
1804
  animation-name: ios-navbar-bg-from-lt-to-ct;
2366
1805
  }
2367
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
2368
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
2369
- animation-name: ios-navbar-transparent-bg-from-l-to-c;
2370
- }
2371
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large .navbar-bg,
2372
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large .navbar-bg {
2373
- animation-name: ios-navbar-bg-from-lb-to-ct;
2374
- }
2375
1806
  .view-master-detail .navbars {
2376
1807
  z-index: auto;
2377
1808
  }
@@ -2648,21 +2079,12 @@ html.device-full-viewport body {
2648
2079
  transform: var(--f7-navbar-large-bg-center-top);
2649
2080
  }
2650
2081
  }
2651
- @keyframes ios-navbar-transparent-bg-from-l-to-c {
2652
- from {
2653
- transform: var(--f7-navbar-large-transparent-bg-left);
2654
- }
2655
- to {
2656
- transform: var(--f7-navbar-large-transparent-bg-center);
2657
- }
2082
+ .md .navbar .title-large {
2083
+ align-items: center;
2658
2084
  }
2659
- @keyframes ios-navbar-transparent-bg-from-c-to-l {
2660
- from {
2661
- transform: var(--f7-navbar-large-transparent-bg-center);
2662
- }
2663
- to {
2664
- transform: var(--f7-navbar-large-transparent-bg-left);
2665
- }
2085
+ .md .navbar .left {
2086
+ margin-left: 4px;
2087
+ margin-right: 4px;
2666
2088
  }
2667
2089
  .md .navbar a.link {
2668
2090
  padding: 0 12px;
@@ -2706,6 +2128,7 @@ html.device-full-viewport body {
2706
2128
  }
2707
2129
  .md .navbar .right {
2708
2130
  margin-left: auto;
2131
+ margin-right: 4px;
2709
2132
  }
2710
2133
  .md .navbar .right:first-child {
2711
2134
  right: var(--f7-safe-area-right);
@@ -2720,6 +2143,9 @@ html.device-full-viewport body {
2720
2143
  .md .page.page-with-subnavbar .navbar-inner {
2721
2144
  overflow: visible;
2722
2145
  }
2146
+ .md .navbar-inner:not(.navbar-inner-centered-title) .title:first-child {
2147
+ margin-left: 16px;
2148
+ }
2723
2149
  .md .navbar-inner-centered-title {
2724
2150
  justify-content: space-between;
2725
2151
  }
@@ -2729,49 +2155,14 @@ html.device-full-viewport body {
2729
2155
  .md .navbar-inner-centered-title .title {
2730
2156
  text-align: center;
2731
2157
  }
2732
- .aurora .navbar a.icon-only {
2733
- margin: 0;
2734
- justify-content: center;
2735
- }
2736
- .aurora .navbar .left a + a,
2737
- .aurora .navbar .right a + a {
2738
- margin-left: 10px;
2739
- }
2740
- .aurora .navbar b {
2741
- font-weight: bold;
2742
- }
2743
- .aurora .navbar .left {
2744
- margin-right: 16px;
2745
- }
2746
- .aurora .navbar .right {
2747
- margin-left: 16px;
2748
- }
2749
- .aurora .navbar .right:first-child {
2750
- right: calc(16px + var(--f7-safe-area-right));
2751
- }
2752
- .aurora .navbar-inner {
2753
- justify-content: space-between;
2754
- }
2755
- .aurora .navbar-inner-left-title {
2756
- justify-content: flex-start;
2757
- }
2758
- .aurora .navbar-inner-left-title .right {
2759
- margin-left: auto;
2760
- }
2761
- .aurora .navbar-inner-left-title .title {
2762
- text-align: left;
2763
- margin-right: 16px;
2764
- }
2765
2158
  /* === Toolbar === */
2766
2159
  :root {
2767
2160
  /*
2768
2161
  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2769
2162
  --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
2770
- --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2771
2163
  --f7-toolbar-border-color: var(--f7-bars-border-color);
2772
2164
  --f7-toolbar-link-color: var(--f7-bars-link-color);
2773
2165
  --f7-toolbar-text-color: var(--f7-bars-text-color);
2774
- --f7-tabbar-link-active-color: var(--f7-theme-color);
2775
2166
  */
2776
2167
  --f7-tabbar-link-active-bg-color: transparent;
2777
2168
  --f7-tabbar-label-text-transform: none;
@@ -2782,14 +2173,14 @@ html.device-full-viewport body {
2782
2173
  --f7-toolbar-font-size: 17px;
2783
2174
  --f7-toolbar-inner-padding-left: 8px;
2784
2175
  --f7-toolbar-inner-padding-right: 8px;
2176
+ --f7-toolbar-link-font-weight: 400;
2785
2177
  /*
2786
2178
  --f7-toolbar-link-height: var(--f7-toolbar-height);
2787
2179
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2180
+ --f7-tabbar-link-active-color: var(--f7-theme-color);
2788
2181
  */
2789
- --f7-tabbar-labels-height: 50px;
2790
- --f7-tabbar-labels-tablet-height: 50px;
2791
- --f7-toolbar-top-shadow-image: none;
2792
- --f7-toolbar-bottom-shadow-image: none;
2182
+ --f7-tabbar-icons-height: 50px;
2183
+ --f7-tabbar-icons-tablet-height: 50px;
2793
2184
  --f7-tabbar-icon-size: 28px;
2794
2185
  --f7-tabbar-link-text-transform: none;
2795
2186
  --f7-tabbar-link-font-weight: 400;
@@ -2805,7 +2196,7 @@ html.device-full-viewport body {
2805
2196
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2806
2197
  }
2807
2198
  .md {
2808
- --f7-toolbar-height: 48px;
2199
+ --f7-toolbar-height: 56px;
2809
2200
  --f7-toolbar-font-size: 14px;
2810
2201
  --f7-toolbar-inner-padding-left: 0px;
2811
2202
  --f7-toolbar-inner-padding-right: 0px;
@@ -2813,54 +2204,25 @@ html.device-full-viewport body {
2813
2204
  --f7-toolbar-link-height: var(--f7-toolbar-height);
2814
2205
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2815
2206
  */
2816
- --f7-tabbar-labels-height: 56px;
2817
- --f7-tabbar-labels-tablet-height: 56px;
2818
- /*
2819
- --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2820
- */
2821
- --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
2822
- --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
2823
- --f7-tabbar-icon-size: 24px;
2824
- --f7-tabbar-link-text-transform: uppercase;
2825
- --f7-tabbar-link-font-weight: 500;
2826
- --f7-tabbar-link-letter-spacing: 0.05em;
2827
- --f7-tabbar-label-font-size: 14px;
2828
- --f7-tabbar-label-tablet-font-size: 14px;
2829
- --f7-tabbar-label-font-weight: 400;
2830
- --f7-tabbar-label-letter-spacing: 0;
2831
- --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
2832
- }
2833
- .md .dark,
2834
- .md.dark {
2835
- --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2836
- }
2837
- .aurora {
2838
- --f7-toolbar-height: 48px;
2839
- --f7-toolbar-font-size: 16px;
2840
- --f7-toolbar-inner-padding-left: 16px;
2841
- --f7-toolbar-inner-padding-right: 16px;
2842
- --f7-toolbar-link-height: auto;
2843
- --f7-toolbar-link-line-height: inherit;
2844
- --f7-tabbar-labels-height: 52px;
2845
- --f7-tabbar-labels-tablet-height: 52px;
2846
- /*
2847
- --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2848
- */
2849
- --f7-toolbar-top-shadow-image: none;
2850
- --f7-toolbar-bottom-shadow-image: none;
2207
+ --f7-tabbar-icons-height: 80px;
2208
+ --f7-tabbar-icons-tablet-height: 80px;
2851
2209
  --f7-tabbar-icon-size: 24px;
2852
2210
  --f7-tabbar-link-text-transform: none;
2853
2211
  --f7-tabbar-link-font-weight: 500;
2854
2212
  --f7-tabbar-link-letter-spacing: 0;
2855
- --f7-tabbar-label-font-size: 14px;
2856
- --f7-tabbar-label-tablet-font-size: 14px;
2213
+ --f7-toolbar-link-font-weight: 500;
2214
+ --f7-tabbar-label-font-size: 12px;
2215
+ --f7-tabbar-label-tablet-font-size: 12px;
2857
2216
  --f7-tabbar-label-font-weight: 500;
2858
2217
  --f7-tabbar-label-letter-spacing: 0;
2859
- --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
2860
2218
  }
2861
- .aurora .dark,
2862
- .aurora.dark {
2863
- --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
2219
+ .md,
2220
+ .md .dark,
2221
+ .md [class*='color-'] {
2222
+ --f7-tabbar-link-active-color: var(--f7-md-on-secondary-container);
2223
+ --f7-tabbar-link-active-border-color: var(--f7-md-primary);
2224
+ --f7-tabbar-link-inactive-color: var(--f7-md-on-surface-variant);
2225
+ --f7-tabbar-link-active-icon-bg-color: var(--f7-md-secondary-container);
2864
2226
  }
2865
2227
  .toolbar {
2866
2228
  width: 100%;
@@ -2873,7 +2235,6 @@ html.device-full-viewport body {
2873
2235
  box-sizing: border-box;
2874
2236
  left: 0;
2875
2237
  height: var(--f7-toolbar-height);
2876
- background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2877
2238
  background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
2878
2239
  color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2879
2240
  font-size: var(--f7-toolbar-font-size);
@@ -2900,6 +2261,7 @@ html.device-full-viewport body {
2900
2261
  display: flex;
2901
2262
  line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
2902
2263
  height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
2264
+ font-weight: var(--f7-toolbar-link-font-weight);
2903
2265
  }
2904
2266
  .toolbar i.icon {
2905
2267
  display: block;
@@ -2916,51 +2278,36 @@ html.device-full-viewport body {
2916
2278
  }
2917
2279
  .toolbar-top,
2918
2280
  .ios .toolbar-top-ios,
2919
- .md .toolbar-top-md,
2920
- .aurora .toolbar-top-aurora {
2281
+ .md .toolbar-top-md {
2921
2282
  top: 0;
2922
2283
  }
2923
2284
  .toolbar-top .tab-link-highlight,
2924
2285
  .ios .toolbar-top-ios .tab-link-highlight,
2925
- .md .toolbar-top-md .tab-link-highlight,
2926
- .aurora .toolbar-top-aurora .tab-link-highlight {
2286
+ .md .toolbar-top-md .tab-link-highlight {
2927
2287
  bottom: 0;
2928
2288
  }
2929
- .toolbar-top.no-hairline:after,
2930
- .ios .toolbar-top-ios.no-hairline:after,
2931
- .md .toolbar-top-md.no-hairline:after,
2932
- .aurora .toolbar-top-aurora.no-hairline:after,
2933
- .toolbar-top.no-border:after,
2934
- .ios .toolbar-top-ios.no-border:after,
2935
- .md .toolbar-top-md.no-border:after,
2936
- .aurora .toolbar-top-aurora.no-border:after {
2289
+ .toolbar-top.no-outline:after,
2290
+ .ios .toolbar-top-ios.no-outline:after,
2291
+ .md .toolbar-top-md.no-outline:after {
2937
2292
  display: none !important;
2938
2293
  }
2939
- .toolbar-top.no-shadow:before,
2940
- .ios .toolbar-top-ios.no-shadow:before,
2941
- .md .toolbar-top-md.no-shadow:before,
2942
- .aurora .toolbar-top-aurora.no-shadow:before,
2943
2294
  .toolbar-top.toolbar-hidden:before,
2944
2295
  .ios .toolbar-top-ios.toolbar-hidden:before,
2945
- .md .toolbar-top-md.toolbar-hidden:before,
2946
- .aurora .toolbar-top-aurora.toolbar-hidden:before {
2296
+ .md .toolbar-top-md.toolbar-hidden:before {
2947
2297
  display: none !important;
2948
2298
  }
2949
2299
  .toolbar-top:after,
2950
2300
  .ios .toolbar-top-ios:after,
2951
2301
  .md .toolbar-top-md:after,
2952
- .aurora .toolbar-top-aurora:after,
2953
2302
  .toolbar-top:before,
2954
2303
  .ios .toolbar-top-ios:before,
2955
- .md .toolbar-top-md:before,
2956
- .aurora .toolbar-top-aurora:before {
2304
+ .md .toolbar-top-md:before {
2957
2305
  -webkit-backface-visibility: hidden;
2958
2306
  backface-visibility: hidden;
2959
2307
  }
2960
2308
  .toolbar-top:after,
2961
2309
  .ios .toolbar-top-ios:after,
2962
- .md .toolbar-top-md:after,
2963
- .aurora .toolbar-top-aurora:after {
2310
+ .md .toolbar-top-md:after {
2964
2311
  content: '';
2965
2312
  position: absolute;
2966
2313
  background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
@@ -2975,65 +2322,37 @@ html.device-full-viewport body {
2975
2322
  transform-origin: 50% 100%;
2976
2323
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2977
2324
  }
2978
- .toolbar-top:before,
2979
- .ios .toolbar-top-ios:before,
2980
- .md .toolbar-top-md:before,
2981
- .aurora .toolbar-top-aurora:before {
2982
- content: '';
2983
- position: absolute;
2984
- right: 0;
2985
- width: 100%;
2986
- top: 100%;
2987
- bottom: auto;
2988
- height: 8px;
2989
- pointer-events: none;
2990
- background: var(--f7-toolbar-top-shadow-image);
2991
- }
2992
2325
  .toolbar-bottom,
2993
2326
  .ios .toolbar-bottom-ios,
2994
- .md .toolbar-bottom-md,
2995
- .aurora .toolbar-bottom-aurora {
2327
+ .md .toolbar-bottom-md {
2996
2328
  bottom: 0;
2997
2329
  height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
2998
2330
  }
2999
2331
  .toolbar-bottom .tab-link-highlight,
3000
2332
  .ios .toolbar-bottom-ios .tab-link-highlight,
3001
- .md .toolbar-bottom-md .tab-link-highlight,
3002
- .aurora .toolbar-bottom-aurora .tab-link-highlight {
2333
+ .md .toolbar-bottom-md .tab-link-highlight {
3003
2334
  top: 0;
3004
2335
  }
3005
2336
  .toolbar-bottom .toolbar-inner,
3006
2337
  .ios .toolbar-bottom-ios .toolbar-inner,
3007
- .md .toolbar-bottom-md .toolbar-inner,
3008
- .aurora .toolbar-bottom-aurora .toolbar-inner {
2338
+ .md .toolbar-bottom-md .toolbar-inner {
3009
2339
  height: auto;
3010
2340
  top: 0;
3011
2341
  bottom: var(--f7-safe-area-bottom);
3012
2342
  }
3013
- .toolbar-bottom.no-hairline:before,
3014
- .ios .toolbar-bottom-ios.no-hairline:before,
3015
- .md .toolbar-bottom-md.no-hairline:before,
3016
- .aurora .toolbar-bottom-aurora.no-hairline:before,
3017
- .toolbar-bottom.no-border:before,
3018
- .ios .toolbar-bottom-ios.no-border:before,
3019
- .md .toolbar-bottom-md.no-border:before,
3020
- .aurora .toolbar-bottom-aurora.no-border:before {
2343
+ .toolbar-bottom.no-outline:before,
2344
+ .ios .toolbar-bottom-ios.no-outline:before,
2345
+ .md .toolbar-bottom-md.no-outline:before {
3021
2346
  display: none !important;
3022
2347
  }
3023
- .toolbar-bottom.no-shadow:after,
3024
- .ios .toolbar-bottom-ios.no-shadow:after,
3025
- .md .toolbar-bottom-md.no-shadow:after,
3026
- .aurora .toolbar-bottom-aurora.no-shadow:after,
3027
2348
  .toolbar-bottom.toolbar-hidden:after,
3028
2349
  .ios .toolbar-bottom-ios.toolbar-hidden:after,
3029
- .md .toolbar-bottom-md.toolbar-hidden:after,
3030
- .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
2350
+ .md .toolbar-bottom-md.toolbar-hidden:after {
3031
2351
  display: none !important;
3032
2352
  }
3033
2353
  .toolbar-bottom:before,
3034
2354
  .ios .toolbar-bottom-ios:before,
3035
- .md .toolbar-bottom-md:before,
3036
- .aurora .toolbar-bottom-aurora:before {
2355
+ .md .toolbar-bottom-md:before {
3037
2356
  content: '';
3038
2357
  position: absolute;
3039
2358
  background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
@@ -3048,21 +2367,6 @@ html.device-full-viewport body {
3048
2367
  transform-origin: 50% 0%;
3049
2368
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3050
2369
  }
3051
- .toolbar-bottom:after,
3052
- .ios .toolbar-bottom-ios:after,
3053
- .md .toolbar-bottom-md:after,
3054
- .aurora .toolbar-bottom-aurora:after {
3055
- content: '';
3056
- position: absolute;
3057
- right: 0;
3058
- width: 100%;
3059
- bottom: 100%;
3060
- height: 8px;
3061
- top: auto;
3062
- pointer-events: none;
3063
- background: var(--f7-toolbar-bottom-shadow-image);
3064
- transform: translate3d(0, 0, 0);
3065
- }
3066
2370
  .toolbar-inner {
3067
2371
  position: absolute;
3068
2372
  left: 0;
@@ -3078,21 +2382,21 @@ html.device-full-viewport body {
3078
2382
  padding: 0 calc(var(--f7-toolbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-toolbar-inner-padding-left) + var(--f7-safe-area-left));
3079
2383
  }
3080
2384
  .views > .tabbar,
3081
- .views > .tabbar-labels {
2385
+ .views > .tabbar-icons {
3082
2386
  z-index: 5001;
3083
2387
  }
3084
2388
  .tabbar a,
3085
- .tabbar-labels a {
2389
+ .tabbar-icons a {
3086
2390
  color: var(--f7-tabbar-link-inactive-color);
3087
2391
  }
3088
2392
  .tabbar .link,
3089
- .tabbar-labels .link {
2393
+ .tabbar-icons .link {
3090
2394
  line-height: 1.4;
3091
2395
  }
3092
2396
  .tabbar .tab-link,
3093
- .tabbar-labels .tab-link,
2397
+ .tabbar-icons .tab-link,
3094
2398
  .tabbar .link,
3095
- .tabbar-labels .link {
2399
+ .tabbar-icons .link {
3096
2400
  height: 100%;
3097
2401
  width: 100%;
3098
2402
  box-sizing: border-box;
@@ -3106,34 +2410,38 @@ html.device-full-viewport body {
3106
2410
  overflow: hidden;
3107
2411
  }
3108
2412
  .tabbar .tab-link-active,
3109
- .tabbar-labels .tab-link-active {
2413
+ .tabbar-icons .tab-link-active {
3110
2414
  color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
3111
2415
  background-color: var(--f7-tabbar-link-active-bg-color, transparent);
3112
2416
  }
3113
2417
  .tabbar i.icon,
3114
- .tabbar-labels i.icon {
2418
+ .tabbar-icons i.icon {
3115
2419
  font-size: var(--f7-tabbar-icon-size);
3116
2420
  height: var(--f7-tabbar-icon-size);
3117
2421
  line-height: var(--f7-tabbar-icon-size);
3118
2422
  }
3119
- .tabbar .tab-link-highlight,
3120
- .tabbar-labels .tab-link-highlight {
2423
+ .md .tabbar.tabbar-icons .tab-link-highlight,
2424
+ .md .tabbar-icons.tabbar-icons .tab-link-highlight {
2425
+ display: none;
2426
+ }
2427
+ .md .tabbar:not(.tabbar-icons) .tab-link-highlight,
2428
+ .md .tabbar-icons:not(.tabbar-icons) .tab-link-highlight {
3121
2429
  position: absolute;
3122
2430
  height: 2px;
3123
2431
  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
3124
2432
  transition-duration: 300ms;
3125
2433
  left: 0;
3126
2434
  }
3127
- .tabbar-labels {
3128
- --f7-toolbar-height: var(--f7-tabbar-labels-height);
2435
+ .tabbar-icons {
2436
+ --f7-toolbar-height: var(--f7-tabbar-icons-height);
3129
2437
  }
3130
- .tabbar-labels .tab-link,
3131
- .tabbar-labels .link {
2438
+ .tabbar-icons .tab-link,
2439
+ .tabbar-icons .link {
3132
2440
  height: 100%;
3133
- justify-content: space-between;
2441
+ justify-content: center;
3134
2442
  align-items: center;
3135
2443
  }
3136
- .tabbar-labels .tabbar-label {
2444
+ .tabbar-icons .tabbar-label {
3137
2445
  display: block;
3138
2446
  line-height: 1;
3139
2447
  margin: 0;
@@ -3147,7 +2455,7 @@ html.device-full-viewport body {
3147
2455
  }
3148
2456
  @media (min-width: 768px) and (min-height: 600px) {
3149
2457
  :root {
3150
- --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
2458
+ --f7-tabbar-icons-height: var(--f7-tabbar-icons-tablet-height);
3151
2459
  --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
3152
2460
  }
3153
2461
  }
@@ -3175,38 +2483,32 @@ html.device-full-viewport body {
3175
2483
  }
3176
2484
  .toolbar-bottom ~ *,
3177
2485
  .ios .toolbar-bottom-ios ~ *,
3178
- .md .toolbar-bottom-md ~ *,
3179
- .aurora .toolbar-bottom-aurora ~ * {
2486
+ .md .toolbar-bottom-md ~ * {
3180
2487
  --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
3181
2488
  }
3182
- .toolbar-bottom.tabbar-labels ~ *,
3183
- .ios .toolbar-bottom-ios.tabbar-labels ~ *,
3184
- .md .toolbar-bottom-md.tabbar-labels ~ *,
3185
- .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
3186
- --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
2489
+ .toolbar-bottom.tabbar-icons ~ *,
2490
+ .ios .toolbar-bottom-ios.tabbar-icons ~ *,
2491
+ .md .toolbar-bottom-md.tabbar-icons ~ * {
2492
+ --f7-page-toolbar-bottom-offset: var(--f7-tabbar-icons-height);
3187
2493
  }
3188
2494
  .toolbar-bottom.toolbar-hidden,
3189
2495
  .ios .toolbar-bottom-ios.toolbar-hidden,
3190
- .md .toolbar-bottom-md.toolbar-hidden,
3191
- .aurora .toolbar-bottom-aurora.toolbar-hidden {
2496
+ .md .toolbar-bottom-md.toolbar-hidden {
3192
2497
  transform: translate3d(0, 100%, 0);
3193
2498
  }
3194
2499
  .toolbar-top ~ *,
3195
2500
  .ios .toolbar-top-ios ~ *,
3196
- .md .toolbar-top-md ~ *,
3197
- .aurora .toolbar-top-aurora ~ * {
2501
+ .md .toolbar-top-md ~ * {
3198
2502
  --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
3199
2503
  }
3200
- .toolbar-top.tabbar-labels ~ *,
3201
- .ios .toolbar-top-ios.tabbar-labels ~ *,
3202
- .md .toolbar-top-md.tabbar-labels ~ *,
3203
- .aurora .toolbar-top-aurora.tabbar-labels ~ * {
3204
- --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
2504
+ .toolbar-top.tabbar-icons ~ *,
2505
+ .ios .toolbar-top-ios.tabbar-icons ~ *,
2506
+ .md .toolbar-top-md.tabbar-icons ~ * {
2507
+ --f7-page-toolbar-top-offset: var(--f7-tabbar-icons-height);
3205
2508
  }
3206
2509
  .toolbar-top.toolbar-hidden,
3207
2510
  .ios .toolbar-top-ios.toolbar-hidden,
3208
- .md .toolbar-top-md.toolbar-hidden,
3209
- .aurora .toolbar-top-aurora.toolbar-hidden {
2511
+ .md .toolbar-top-md.toolbar-hidden {
3210
2512
  transform: translate3d(0, -100%, 0);
3211
2513
  }
3212
2514
  .navbar ~ .toolbar-top,
@@ -3214,19 +2516,16 @@ html.device-full-viewport body {
3214
2516
  .ios .navbar ~ .toolbar-top-ios,
3215
2517
  .ios .navbars ~ .toolbar-top-ios,
3216
2518
  .md .navbar ~ .toolbar-top-md,
3217
- .aurora .navbar ~ .toolbar-top-aurora,
3218
2519
  .navbar ~ * .toolbar-top,
3219
2520
  .navbars ~ * .toolbar-top,
3220
2521
  .ios .navbar ~ * .toolbar-top-ios,
3221
2522
  .ios .navbars ~ * .toolbar-top-ios,
3222
2523
  .md .navbar ~ * .toolbar-top-md,
3223
- .aurora .navbar ~ * .toolbar-top-aurora,
3224
2524
  .navbar ~ .page:not(.no-navbar) .toolbar-top,
3225
2525
  .navbars ~ .page:not(.no-navbar) .toolbar-top,
3226
2526
  .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
3227
2527
  .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
3228
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
3229
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
2528
+ .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
3230
2529
  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
3231
2530
  }
3232
2531
  .navbar ~ .toolbar-top.toolbar-hidden,
@@ -3234,49 +2533,41 @@ html.device-full-viewport body {
3234
2533
  .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
3235
2534
  .ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
3236
2535
  .md .navbar ~ .toolbar-top-md.toolbar-hidden,
3237
- .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
3238
2536
  .navbar ~ * .toolbar-top.toolbar-hidden,
3239
2537
  .navbars ~ * .toolbar-top.toolbar-hidden,
3240
2538
  .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
3241
2539
  .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
3242
2540
  .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
3243
- .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
3244
2541
  .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
3245
2542
  .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
3246
2543
  .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
3247
2544
  .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
3248
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
3249
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
2545
+ .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden {
3250
2546
  transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
3251
2547
  }
3252
- .navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
3253
- .navbars ~ .toolbar-top.toolbar-hidden.tabbar-labels,
3254
- .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3255
- .ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3256
- .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
3257
- .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
3258
- .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
3259
- .navbars ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
3260
- .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3261
- .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3262
- .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
3263
- .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
3264
- .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
3265
- .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
3266
- .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3267
- .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3268
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
3269
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
3270
- transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top))), 0);
2548
+ .navbar ~ .toolbar-top.toolbar-hidden.tabbar-icons,
2549
+ .navbars ~ .toolbar-top.toolbar-hidden.tabbar-icons,
2550
+ .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2551
+ .ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2552
+ .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-icons,
2553
+ .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-icons,
2554
+ .navbars ~ * .toolbar-top.toolbar-hidden.tabbar-icons,
2555
+ .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2556
+ .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2557
+ .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-icons,
2558
+ .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
2559
+ .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
2560
+ .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2561
+ .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2562
+ .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-icons {
2563
+ transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))), 0);
3271
2564
  }
3272
2565
  .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
3273
2566
  .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
3274
2567
  .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
3275
- .aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
3276
2568
  .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
3277
2569
  .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
3278
- .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
3279
- .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2570
+ .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
3280
2571
  transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
3281
2572
  }
3282
2573
  .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
@@ -3284,8 +2575,7 @@ html.device-full-viewport body {
3284
2575
  .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
3285
2576
  .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
3286
2577
  .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
3287
- .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
3288
- .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2578
+ .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
3289
2579
  transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
3290
2580
  }
3291
2581
  .ios .toolbar a.icon-only {
@@ -3296,27 +2586,27 @@ html.device-full-viewport body {
3296
2586
  margin: 0;
3297
2587
  min-width: 44px;
3298
2588
  }
3299
- .ios .tabbar-labels .tab-link,
3300
- .ios .tabbar-labels .link {
2589
+ .ios .tabbar-icons .tab-link,
2590
+ .ios .tabbar-icons .link {
3301
2591
  padding-top: 4px;
3302
2592
  padding-bottom: 4px;
3303
2593
  }
3304
- .ios .tabbar-labels .tab-link i + span,
3305
- .ios .tabbar-labels .link i + span {
2594
+ .ios .tabbar-icons .tab-link i + span,
2595
+ .ios .tabbar-icons .link i + span {
3306
2596
  margin: 0;
3307
2597
  }
3308
2598
  @media (min-width: 768px) and (min-height: 600px) {
3309
2599
  .ios .tabbar .tab-link,
3310
- .ios .tabbar-labels .tab-link,
2600
+ .ios .tabbar-icons .tab-link,
3311
2601
  .ios .tabbar .link,
3312
- .ios .tabbar-labels .link {
2602
+ .ios .tabbar-icons .link {
3313
2603
  justify-content: center;
3314
2604
  flex-direction: row;
3315
2605
  }
3316
2606
  .ios .tabbar .tab-link i + span,
3317
- .ios .tabbar-labels .tab-link i + span,
2607
+ .ios .tabbar-icons .tab-link i + span,
3318
2608
  .ios .tabbar .link i + span,
3319
- .ios .tabbar-labels .link i + span {
2609
+ .ios .tabbar-icons .link i + span {
3320
2610
  margin-left: 5px;
3321
2611
  }
3322
2612
  }
@@ -3368,26 +2658,54 @@ html.device-full-viewport body {
3368
2658
  flex-shrink: 0;
3369
2659
  }
3370
2660
  .md .tabbar .tab-link,
3371
- .md .tabbar-labels .tab-link,
2661
+ .md .tabbar-icons .tab-link,
3372
2662
  .md .tabbar .link,
3373
- .md .tabbar-labels .link {
2663
+ .md .tabbar-icons .link {
3374
2664
  padding-left: 0;
3375
2665
  padding-right: 0;
3376
2666
  }
3377
2667
  .md .tabbar a.icon-only,
3378
- .md .tabbar-labels a.icon-only {
2668
+ .md .tabbar-icons a.icon-only {
3379
2669
  flex-shrink: initial;
3380
2670
  }
3381
2671
  .md .tabbar .tab-link,
3382
- .md .tabbar-labels .tab-link {
2672
+ .md .tabbar-icons .tab-link {
3383
2673
  transition-duration: 300ms;
3384
2674
  overflow: hidden;
3385
2675
  position: relative;
3386
2676
  }
3387
- .md .tabbar-labels .tab-link,
3388
- .md .tabbar-labels .link {
3389
- padding-top: 7px;
3390
- padding-bottom: 7px;
2677
+ .md .tabbar i.icon,
2678
+ .md .tabbar-icons i.icon {
2679
+ position: relative;
2680
+ }
2681
+ .md .tabbar i.icon::before,
2682
+ .md .tabbar-icons i.icon::before {
2683
+ content: '';
2684
+ width: 64px;
2685
+ height: 32px;
2686
+ border-radius: 32px;
2687
+ position: absolute;
2688
+ left: 50%;
2689
+ top: 50%;
2690
+ transform: translateX(-50%) translateY(-50%) scaleX(0.5);
2691
+ background: var(--f7-tabbar-link-active-icon-bg-color);
2692
+ opacity: 0;
2693
+ transition-duration: 200ms;
2694
+ z-index: -1;
2695
+ }
2696
+ .md .tabbar i.icon + .tabbar-label,
2697
+ .md .tabbar-icons i.icon + .tabbar-label {
2698
+ margin-top: 8px;
2699
+ }
2700
+ .md .tabbar .tab-link-active i.icon::before,
2701
+ .md .tabbar-icons .tab-link-active i.icon::before {
2702
+ opacity: 1;
2703
+ transform: translateX(-50%) translateY(-50%) scaleX(1);
2704
+ }
2705
+ .md .tabbar-icons .tab-link,
2706
+ .md .tabbar-icons .link {
2707
+ padding-top: 8px;
2708
+ padding-bottom: 8px;
3391
2709
  }
3392
2710
  .md .tabbar-label {
3393
2711
  max-width: 100%;
@@ -3401,44 +2719,9 @@ html.device-full-viewport body {
3401
2719
  .md .tabbar-scrollable .link {
3402
2720
  padding: 0 12px;
3403
2721
  }
3404
- .aurora .toolbar a.icon-only {
3405
- min-height: var(--f7-toolbar-height);
3406
- display: flex;
3407
- justify-content: center;
3408
- align-items: center;
3409
- margin: 0;
3410
- }
3411
- .aurora .tabbar .toolbar-inner,
3412
- .aurora .tabbar-labels .toolbar-inner {
3413
- padding-left: 0;
3414
- padding-right: 0;
3415
- }
3416
- .aurora .tabbar .tab-link,
3417
- .aurora .tabbar-labels .tab-link,
3418
- .aurora .tabbar .link,
3419
- .aurora .tabbar-labels .link {
3420
- transition-duration: 200ms;
3421
- }
3422
- .aurora .tabbar-labels .tab-link,
3423
- .aurora .tabbar-labels .link {
3424
- padding-top: 5px;
3425
- padding-bottom: 5px;
3426
- }
3427
- .aurora .tabbar-labels .tab-link i + span,
3428
- .aurora .tabbar-labels .link i + span {
3429
- margin: 0;
3430
- }
3431
- .aurora .tabbar-scrollable .toolbar-inner {
3432
- justify-content: flex-start;
3433
- }
3434
- .aurora .tabbar-scrollable .tab-link,
3435
- .aurora .tabbar-scrollable .link {
3436
- padding: 0 16px;
3437
- }
3438
2722
  /* === Subnavbar === */
3439
2723
  :root {
3440
2724
  /*
3441
- --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
3442
2725
  --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
3443
2726
  --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
3444
2727
  --f7-subnavbar-border-color: var(--f7-bars-border-color);
@@ -3455,38 +2738,24 @@ html.device-full-viewport body {
3455
2738
  --f7-subnavbar-title-font-weight: 700;
3456
2739
  --f7-subnavbar-title-letter-spacing: -0.03em;
3457
2740
  --f7-subnavbar-title-margin-left: 8px;
3458
- --f7-subnavbar-shadow-image: none;
3459
2741
  /*
3460
2742
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
3461
2743
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
3462
2744
  */
3463
2745
  }
3464
2746
  .md {
3465
- --f7-subnavbar-height: 48px;
2747
+ --f7-subnavbar-height: 64px;
3466
2748
  --f7-subnavbar-inner-padding-left: 16px;
3467
2749
  --f7-subnavbar-inner-padding-right: 16px;
3468
- --f7-subnavbar-title-font-size: 20px;
3469
- --f7-subnavbar-title-font-weight: 500;
2750
+ --f7-subnavbar-title-font-size: 22px;
2751
+ --f7-subnavbar-title-font-weight: 400;
3470
2752
  --f7-subnavbar-title-letter-spacing: 0;
3471
2753
  --f7-subnavbar-title-margin-left: 0px;
3472
- --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
3473
2754
  /*
3474
2755
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
3475
2756
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
3476
2757
  */
3477
2758
  }
3478
- .aurora {
3479
- --f7-subnavbar-height: 48px;
3480
- --f7-subnavbar-inner-padding-left: 16px;
3481
- --f7-subnavbar-inner-padding-right: 16px;
3482
- --f7-subnavbar-title-font-size: 28px;
3483
- --f7-subnavbar-title-font-weight: bold;
3484
- --f7-subnavbar-title-letter-spacing: 0em;
3485
- --f7-subnavbar-title-margin-left: 0px;
3486
- --f7-subnavbar-shadow-image: none;
3487
- --f7-subnavbar-link-height: auto;
3488
- --f7-subnavbar-link-line-height: inherit;
3489
- }
3490
2759
  .subnavbar {
3491
2760
  width: 100%;
3492
2761
  position: absolute;
@@ -3497,7 +2766,6 @@ html.device-full-viewport body {
3497
2766
  display: flex;
3498
2767
  justify-content: space-between;
3499
2768
  align-items: center;
3500
- background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
3501
2769
  background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
3502
2770
  color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
3503
2771
  }
@@ -3542,11 +2810,9 @@ html.device-full-viewport body {
3542
2810
  .subnavbar a.icon-only {
3543
2811
  min-width: var(--f7-subnavbar-height);
3544
2812
  }
3545
- .subnavbar.no-hairline:after,
3546
- .subnavbar.no-border:after {
2813
+ .subnavbar.no-outline:after {
3547
2814
  display: none !important;
3548
2815
  }
3549
- .subnavbar.no-shadow:before,
3550
2816
  .subnavbar.navbar-hidden:before {
3551
2817
  display: none !important;
3552
2818
  }
@@ -3570,17 +2836,6 @@ html.device-full-viewport body {
3570
2836
  transform-origin: 50% 100%;
3571
2837
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3572
2838
  }
3573
- .subnavbar:before {
3574
- content: '';
3575
- position: absolute;
3576
- right: 0;
3577
- width: 100%;
3578
- top: 100%;
3579
- bottom: auto;
3580
- height: 8px;
3581
- pointer-events: none;
3582
- background: var(--f7-subnavbar-shadow-image);
3583
- }
3584
2839
  .subnavbar-inner {
3585
2840
  width: 100%;
3586
2841
  height: 100%;
@@ -3591,9 +2846,6 @@ html.device-full-viewport body {
3591
2846
  overflow: hidden;
3592
2847
  padding: 0 calc(var(--f7-subnavbar-inner-padding-left) + var(--f7-safe-area-right)) 0 calc(var(--f7-subnavbar-inner-padding-right) + var(--f7-safe-area-left));
3593
2848
  }
3594
- .subnavbar-inner.stacked {
3595
- display: none;
3596
- }
3597
2849
  .navbar .subnavbar {
3598
2850
  top: 100%;
3599
2851
  }
@@ -3707,41 +2959,11 @@ html.device-full-viewport body {
3707
2959
  .md .subnavbar-inner > a.link:last-child {
3708
2960
  margin-right: calc(-1 * var(--f7-subnavbar-inner-padding-right));
3709
2961
  }
3710
- .aurora .subnavbar {
3711
- height: calc(var(--f7-subnavbar-height) + 1px);
3712
- margin-top: -1px;
3713
- padding-top: 1px;
3714
- }
3715
- .aurora .subnavbar .title {
3716
- align-self: flex-start;
3717
- flex-shrink: 10;
3718
- }
3719
- .aurora .subnavbar .left a + a,
3720
- .aurora .subnavbar .right a + a {
3721
- margin-left: 10px;
3722
- }
3723
- .aurora .subnavbar .left {
3724
- margin-right: 10px;
3725
- }
3726
- .aurora .subnavbar .right {
3727
- margin-left: 10px;
3728
- }
3729
- .aurora .subnavbar .right:first-child {
3730
- right: 16px;
3731
- }
3732
- .aurora .subnavbar a.link {
3733
- justify-content: flex-start;
3734
- }
3735
- .aurora .subnavbar a.icon-only {
3736
- justify-content: center;
3737
- margin: 0;
3738
- }
3739
2962
  /* === Content Block === */
3740
2963
  :root {
3741
2964
  --f7-block-padding-horizontal: 16px;
3742
2965
  --f7-block-padding-vertical: 16px;
3743
2966
  --f7-block-font-size: inherit;
3744
- --f7-block-text-color: inherit;
3745
2967
  --f7-block-header-margin: 10px;
3746
2968
  --f7-block-footer-margin: 10px;
3747
2969
  --f7-block-header-font-size: 14px;
@@ -3751,22 +2973,15 @@ html.device-full-viewport body {
3751
2973
  --f7-block-title-medium-text-transform: none;
3752
2974
  --f7-block-title-large-text-transform: none;
3753
2975
  --f7-block-inset-side-margin: 16px;
3754
- --f7-block-title-medium-text-color: #000;
3755
- --f7-block-title-large-text-color: #000;
3756
- --f7-block-strong-bg-color: #fff;
3757
2976
  }
3758
2977
  :root .dark,
3759
2978
  :root.dark {
3760
- --f7-block-title-text-color: #fff;
3761
- --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
3762
- --f7-block-title-medium-text-color: #fff;
3763
- --f7-block-title-large-text-color: #fff;
3764
- --f7-block-strong-bg-color: #1c1c1d;
2979
+ --f7-block-outline-border-color: rgba(255, 255, 255, 0.15);
3765
2980
  }
3766
2981
  .ios {
2982
+ --f7-block-text-color: inherit;
3767
2983
  --f7-block-margin-vertical: 35px;
3768
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
3769
- --f7-block-title-text-color: #000;
2984
+ --f7-block-outline-border-color: rgba(0, 0, 0, 0.22);
3770
2985
  --f7-block-title-font-size: 16px;
3771
2986
  --f7-block-title-font-weight: 600;
3772
2987
  --f7-block-title-line-height: 20px;
@@ -3778,64 +2993,50 @@ html.device-full-viewport body {
3778
2993
  --f7-block-title-large-font-weight: bold;
3779
2994
  --f7-block-title-large-line-height: 1.3;
3780
2995
  --f7-block-inset-border-radius: 8px;
2996
+ --f7-block-title-text-color: #000;
3781
2997
  --f7-block-strong-text-color: #000;
3782
2998
  --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
3783
2999
  --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
3000
+ --f7-block-strong-bg-color: #fff;
3001
+ --f7-block-title-medium-text-color: #000;
3002
+ --f7-block-title-large-text-color: #000;
3784
3003
  }
3785
3004
  .ios .dark,
3786
3005
  .ios.dark {
3006
+ --f7-block-title-text-color: #fff;
3787
3007
  --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
3788
3008
  --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
3789
3009
  --f7-block-strong-text-color: #fff;
3010
+ --f7-block-strong-bg-color: #1c1c1d;
3011
+ --f7-block-title-medium-text-color: #fff;
3012
+ --f7-block-title-large-text-color: #fff;
3790
3013
  }
3791
3014
  .md {
3792
3015
  --f7-block-margin-vertical: 32px;
3793
- --f7-block-strong-text-color: inherit;
3794
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3795
3016
  --f7-block-title-font-size: inherit;
3796
- --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
3797
3017
  --f7-block-title-font-weight: 500;
3798
3018
  --f7-block-title-line-height: 16px;
3799
3019
  --f7-block-title-margin-bottom: 16px;
3800
- --f7-block-title-medium-font-size: 24px;
3020
+ --f7-block-title-medium-font-size: 16px;
3801
3021
  --f7-block-title-medium-font-weight: 500;
3802
3022
  --f7-block-title-medium-line-height: 1.3;
3803
- --f7-block-title-large-font-size: 34px;
3023
+ --f7-block-title-large-font-size: 22px;
3804
3024
  --f7-block-title-large-font-weight: 500;
3805
3025
  --f7-block-title-large-line-height: 1.2;
3806
- --f7-block-inset-border-radius: 4px;
3807
- --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
3808
- --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
3026
+ --f7-block-inset-border-radius: 16px;
3809
3027
  }
3028
+ .md,
3810
3029
  .md .dark,
3811
- .md.dark {
3812
- --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3813
- --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3814
- }
3815
- .aurora {
3816
- --f7-block-margin-vertical: 32px;
3817
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3818
- --f7-block-title-font-size: 16px;
3819
- --f7-block-title-text-color: #000;
3820
- --f7-block-title-font-weight: 600;
3821
- --f7-block-title-line-height: 1.5;
3822
- --f7-block-title-margin-bottom: 10px;
3823
- --f7-block-title-medium-font-size: 22px;
3824
- --f7-block-title-medium-font-weight: bold;
3825
- --f7-block-title-medium-line-height: 1.4;
3826
- --f7-block-title-large-font-size: 28px;
3827
- --f7-block-title-large-font-weight: bold;
3828
- --f7-block-title-large-line-height: 1.3;
3829
- --f7-block-inset-border-radius: 8px;
3830
- --f7-block-strong-text-color: inherit;
3831
- --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
3832
- --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
3833
- }
3834
- .aurora .dark,
3835
- .aurora.dark {
3836
- --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3837
- --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3838
- --f7-block-strong-text-color: #fff;
3030
+ .md [class*='color-'] {
3031
+ --f7-block-text-color: var(--f7-md-on-surface);
3032
+ --f7-block-strong-text-color: var(--f7-md-on-surface);
3033
+ --f7-block-outline-border-color: var(--f7-md-outline);
3034
+ --f7-block-title-text-color: var(--f7-theme-color);
3035
+ --f7-block-title-medium-text-color: var(--f7-theme-color);
3036
+ --f7-block-title-large-text-color: var(--f7-theme-color);
3037
+ --f7-block-strong-bg-color: var(--f7-md-surface-1);
3038
+ --f7-block-header-text-color: var(--f7-md-on-surface-variant);
3039
+ --f7-block-footer-text-color: var(--f7-md-on-surface-variant);
3839
3040
  }
3840
3041
  .block {
3841
3042
  box-sizing: border-box;
@@ -3849,44 +3050,6 @@ html.device-full-viewport body {
3849
3050
  padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3850
3051
  font-size: var(--f7-block-font-size);
3851
3052
  }
3852
- .block.no-hairlines:before,
3853
- .block.no-hairlines ul:before,
3854
- .md .block.no-hairlines-md:before,
3855
- .md .block.no-hairlines-md ul:before,
3856
- .ios .block.no-hairlines-ios:before,
3857
- .ios .block.no-hairlines-ios ul:before,
3858
- .aurora .block.no-hairlines-aurora:before,
3859
- .aurora .block.no-hairlines-aurora ul:before,
3860
- .block.no-hairlines:after,
3861
- .block.no-hairlines ul:after,
3862
- .md .block.no-hairlines-md:after,
3863
- .md .block.no-hairlines-md ul:after,
3864
- .ios .block.no-hairlines-ios:after,
3865
- .ios .block.no-hairlines-ios ul:after,
3866
- .aurora .block.no-hairlines-aurora:after,
3867
- .aurora .block.no-hairlines-aurora ul:after {
3868
- display: none !important;
3869
- }
3870
- .block.no-hairline-top:before,
3871
- .block.no-hairline-top ul:before,
3872
- .md .block.no-hairline-top-md:before,
3873
- .md .block.no-hairline-top-md ul:before,
3874
- .ios .block.no-hairline-top-ios:before,
3875
- .ios .block.no-hairline-top-ios ul:before,
3876
- .aurora .block.no-hairline-top-aurora:before,
3877
- .aurora .block.no-hairline-top-aurora ul:before {
3878
- display: none !important;
3879
- }
3880
- .block.no-hairline-bottom:after,
3881
- .block.no-hairline-bottom ul:after,
3882
- .md .block.no-hairline-bottom-md:after,
3883
- .md .block.no-hairline-bottom-md ul:after,
3884
- .ios .block.no-hairline-bottom-ios:after,
3885
- .ios .block.no-hairline-bottom-ios ul:after,
3886
- .aurora .block.no-hairline-bottom-aurora:after,
3887
- .aurora .block.no-hairline-bottom-aurora ul:after {
3888
- display: none !important;
3889
- }
3890
3053
  .block > h1:first-child,
3891
3054
  .block > h2:first-child,
3892
3055
  .block > h3:first-child,
@@ -3901,16 +3064,20 @@ html.device-full-viewport body {
3901
3064
  .block > p:last-child {
3902
3065
  margin-bottom: 0;
3903
3066
  }
3904
- .block-strong {
3067
+ .block-strong,
3068
+ .ios .block-strong-ios,
3069
+ .md .block-strong-md {
3905
3070
  color: var(--f7-block-strong-text-color);
3906
3071
  padding-top: var(--f7-block-padding-vertical);
3907
3072
  padding-bottom: var(--f7-block-padding-vertical);
3908
3073
  background-color: var(--f7-block-strong-bg-color);
3909
3074
  }
3910
- .block-strong:before {
3075
+ .block-outline:not(.inset):before,
3076
+ .ios .block-outline-ios:not(.inset):not(.inset-ios):before,
3077
+ .md .block-outline-md:not(.inset):not(.inset-md):before {
3911
3078
  content: '';
3912
3079
  position: absolute;
3913
- background-color: var(--f7-block-strong-border-color);
3080
+ background-color: var(--f7-block-outline-border-color);
3914
3081
  display: block;
3915
3082
  z-index: 15;
3916
3083
  top: 0;
@@ -3922,10 +3089,12 @@ html.device-full-viewport body {
3922
3089
  transform-origin: 50% 0%;
3923
3090
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3924
3091
  }
3925
- .block-strong:after {
3092
+ .block-outline:not(.inset):after,
3093
+ .ios .block-outline-ios:not(.inset):not(.inset-ios):after,
3094
+ .md .block-outline-md:not(.inset):not(.inset-md):after {
3926
3095
  content: '';
3927
3096
  position: absolute;
3928
- background-color: var(--f7-block-strong-border-color);
3097
+ background-color: var(--f7-block-outline-border-color);
3929
3098
  display: block;
3930
3099
  z-index: 15;
3931
3100
  top: auto;
@@ -3937,6 +3106,13 @@ html.device-full-viewport body {
3937
3106
  transform-origin: 50% 100%;
3938
3107
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3939
3108
  }
3109
+ .block-outline.inset,
3110
+ .ios .block-outline-ios.inset,
3111
+ .ios .block-outline-ios.inset-ios,
3112
+ .md .block-outline-md.inset,
3113
+ .md .block-outline-md.inset-md {
3114
+ border: 1px solid var(--f7-block-outline-border-color);
3115
+ }
3940
3116
  .block-title {
3941
3117
  position: relative;
3942
3118
  overflow: hidden;
@@ -4074,7 +3250,9 @@ html.device-full-viewport body {
4074
3250
  .block .block-footer {
4075
3251
  padding: 0;
4076
3252
  }
4077
- .block.inset {
3253
+ .block.inset,
3254
+ .ios .block.inset-ios,
3255
+ .md .block.inset-md {
4078
3256
  border-radius: var(--f7-block-inset-border-radius);
4079
3257
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4080
3258
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
@@ -4082,78 +3260,154 @@ html.device-full-viewport body {
4082
3260
  --f7-safe-area-right: 0px;
4083
3261
  }
4084
3262
  .block-strong.inset:before,
4085
- .block-strong.inset:after {
3263
+ .ios .block-strong-ios.inset:before,
3264
+ .md .block-strong-md.inset:before,
3265
+ .ios .block-strong.inset-ios:before,
3266
+ .md .block-strong.inset-md:before,
3267
+ .ios .block-strong-ios.inset-ios:before,
3268
+ .md .block-strong-md.inset-md:before,
3269
+ .block-strong.inset:after,
3270
+ .ios .block-strong-ios.inset:after,
3271
+ .md .block-strong-md.inset:after,
3272
+ .ios .block-strong.inset-ios:after,
3273
+ .md .block-strong.inset-md:after,
3274
+ .ios .block-strong-ios.inset-ios:after,
3275
+ .md .block-strong-md.inset-md:after {
4086
3276
  display: none !important;
4087
3277
  }
4088
3278
  @media (min-width: 480px) {
4089
- .block.xsmall-inset {
3279
+ .block.xsmall-inset,
3280
+ .ios .block.xsmall-inset-ios,
3281
+ .md .block.xsmall-inset-md {
4090
3282
  border-radius: var(--f7-block-inset-border-radius);
4091
3283
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4092
3284
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4093
3285
  --f7-safe-area-left: 0px;
4094
3286
  --f7-safe-area-right: 0px;
4095
3287
  }
4096
- .block-strong.xsmall-inset:before,
4097
- .block-strong.xsmall-inset:after {
3288
+ .block.xsmall-inset:before,
3289
+ .ios .block.xsmall-inset-ios:before,
3290
+ .md .block.xsmall-inset-md:before,
3291
+ .block.xsmall-inset:after,
3292
+ .ios .block.xsmall-inset-ios:after,
3293
+ .md .block.xsmall-inset-md:after {
4098
3294
  display: none !important;
4099
3295
  }
3296
+ .block.xsmall-inset.block-outline,
3297
+ .ios .block.xsmall-inset-ios.block-outline,
3298
+ .ios .block.xsmall-inset-ios.block-outline-ios,
3299
+ .md .block.xsmall-inset-md.block-outline,
3300
+ .md .block.xsmall-inset-md.block-outline-md {
3301
+ border: 1px solid var(--f7-block-outline-border-color);
3302
+ }
4100
3303
  }
4101
3304
  @media (min-width: 568px) {
4102
- .block.small-inset {
3305
+ .block.small-inset,
3306
+ .ios .block.small-inset-ios,
3307
+ .md .block.small-inset-md {
4103
3308
  border-radius: var(--f7-block-inset-border-radius);
4104
3309
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4105
3310
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4106
3311
  --f7-safe-area-left: 0px;
4107
3312
  --f7-safe-area-right: 0px;
4108
3313
  }
4109
- .block-strong.small-inset:before,
4110
- .block-strong.small-inset:after {
3314
+ .block.small-inset:before,
3315
+ .ios .block.small-inset-ios:before,
3316
+ .md .block.small-inset-md:before,
3317
+ .block.small-inset:after,
3318
+ .ios .block.small-inset-ios:after,
3319
+ .md .block.small-inset-md:after {
4111
3320
  display: none !important;
4112
3321
  }
3322
+ .block.small-inset.block-outline,
3323
+ .ios .block.small-inset-ios.block-outline,
3324
+ .ios .block.small-inset-ios.block-outline-ios,
3325
+ .md .block.small-inset-md.block-outline,
3326
+ .md .block.small-inset-md.block-outline-md {
3327
+ border: 1px solid var(--f7-block-outline-border-color);
3328
+ }
4113
3329
  }
4114
3330
  @media (min-width: 768px) {
4115
- .block.medium-inset {
3331
+ .block.medium-inset,
3332
+ .ios .block.medium-inset-ios,
3333
+ .md .block.medium-inset-md {
4116
3334
  border-radius: var(--f7-block-inset-border-radius);
4117
3335
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4118
3336
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4119
3337
  --f7-safe-area-left: 0px;
4120
3338
  --f7-safe-area-right: 0px;
4121
3339
  }
4122
- .block-strong.medium-inset:before,
4123
- .block-strong.medium-inset:after {
3340
+ .block.medium-inset:before,
3341
+ .ios .block.medium-inset-ios:before,
3342
+ .md .block.medium-inset-md:before,
3343
+ .block.medium-inset:after,
3344
+ .ios .block.medium-inset-ios:after,
3345
+ .md .block.medium-inset-md:after {
4124
3346
  display: none !important;
4125
3347
  }
3348
+ .block.medium-inset.block-outline,
3349
+ .ios .block.medium-inset-ios.block-outline,
3350
+ .ios .block.medium-inset-ios.block-outline-ios,
3351
+ .md .block.medium-inset-md.block-outline,
3352
+ .md .block.medium-inset-md.block-outline-md {
3353
+ border: 1px solid var(--f7-block-outline-border-color);
3354
+ }
4126
3355
  }
4127
3356
  @media (min-width: 1024px) {
4128
- .block.large-inset {
3357
+ .block.large-inset,
3358
+ .ios .block.large-inset-ios,
3359
+ .md .block.large-inset-md {
4129
3360
  border-radius: var(--f7-block-inset-border-radius);
4130
3361
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4131
3362
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4132
3363
  --f7-safe-area-left: 0px;
4133
3364
  --f7-safe-area-right: 0px;
4134
3365
  }
4135
- .block-strong.large-inset:before,
4136
- .block-strong.large-inset:after {
3366
+ .block.large-inset:before,
3367
+ .ios .block.large-inset-ios:before,
3368
+ .md .block.large-inset-md:before,
3369
+ .block.large-inset:after,
3370
+ .ios .block.large-inset-ios:after,
3371
+ .md .block.large-inset-md:after {
4137
3372
  display: none !important;
4138
3373
  }
3374
+ .block.large-inset.block-outline,
3375
+ .ios .block.large-inset-ios.block-outline,
3376
+ .ios .block.large-inset-ios.block-outline-ios,
3377
+ .md .block.large-inset-md.block-outline,
3378
+ .md .block.large-inset-md.block-outline-md {
3379
+ border: 1px solid var(--f7-block-outline-border-color);
3380
+ }
4139
3381
  }
4140
3382
  @media (min-width: 1200px) {
4141
- .block.xlarge-inset {
3383
+ .block.xlarge-inset,
3384
+ .ios .block.xlarge-inset-ios,
3385
+ .md .block.xlarge-inset-md {
4142
3386
  border-radius: var(--f7-block-inset-border-radius);
4143
3387
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4144
3388
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4145
3389
  --f7-safe-area-left: 0px;
4146
3390
  --f7-safe-area-right: 0px;
4147
3391
  }
4148
- .block-strong.xlarge-inset:before,
4149
- .block-strong.xlarge-inset:after {
3392
+ .block.xlarge-inset:before,
3393
+ .ios .block.xlarge-inset-ios:before,
3394
+ .md .block.xlarge-inset-md:before,
3395
+ .block.xlarge-inset:after,
3396
+ .ios .block.xlarge-inset-ios:after,
3397
+ .md .block.xlarge-inset-md:after {
4150
3398
  display: none !important;
4151
3399
  }
3400
+ .block.xlarge-inset.block-outline,
3401
+ .ios .block.xlarge-inset-ios.block-outline,
3402
+ .ios .block.xlarge-inset-ios.block-outline-ios,
3403
+ .md .block.xlarge-inset-md.block-outline,
3404
+ .md .block.xlarge-inset-md.block-outline-md {
3405
+ border: 1px solid var(--f7-block-outline-border-color);
3406
+ }
4152
3407
  }
4153
3408
  /* === List View === */
4154
3409
  :root {
4155
3410
  --f7-list-inset-side-margin: 16px;
4156
- --f7-list-item-cell-margin: 16px;
4157
3411
  --f7-list-item-padding-horizontal: 16px;
4158
3412
  --f7-list-item-padding-vertical: 8px;
4159
3413
  --f7-list-media-item-padding-horizontal: 16px;
@@ -4162,16 +3416,13 @@ html.device-full-viewport body {
4162
3416
  --f7-list-item-media-margin: 16px;
4163
3417
  --f7-list-item-title-font-size: inherit;
4164
3418
  --f7-list-item-title-font-weight: 400;
4165
- --f7-list-item-title-text-color: inherit;
4166
3419
  --f7-list-item-title-line-height: inherit;
4167
3420
  --f7-list-item-title-white-space: nowrap;
4168
3421
  --f7-list-item-subtitle-font-weight: 400;
4169
- --f7-list-item-subtitle-text-color: inherit;
4170
3422
  --f7-list-item-subtitle-line-height: inherit;
4171
3423
  --f7-list-item-text-font-weight: 400;
4172
3424
  --f7-list-item-after-font-weight: 400;
4173
3425
  --f7-list-item-after-line-height: inherit;
4174
- --f7-list-item-header-text-color: inherit;
4175
3426
  --f7-list-item-header-font-size: 12px;
4176
3427
  --f7-list-item-header-font-weight: 400;
4177
3428
  --f7-list-item-header-line-height: 1.2;
@@ -4185,34 +3436,22 @@ html.device-full-viewport body {
4185
3436
  --f7-list-button-font-size: inherit;
4186
3437
  --f7-list-button-font-weight: 400;
4187
3438
  --f7-list-button-text-align: center;
4188
- --f7-list-item-divider-line-height: inherit;
4189
- --f7-list-item-divider-font-weight: 400;
4190
3439
  --f7-list-group-title-line-height: inherit;
4191
- --f7-menu-list-offset: 8px;
4192
- --f7-menu-list-border-radius: 8px;
4193
3440
  --f7-menu-list-font-size: 14px;
4194
3441
  --f7-menu-list-item-title-font-size: 14px;
4195
3442
  --f7-menu-list-item-title-font-weight: 500;
4196
3443
  --f7-menu-list-item-subtitle-font-size: 14px;
4197
3444
  --f7-menu-list-item-text-font-size: 14px;
4198
3445
  --f7-menu-list-item-after-font-size: 14px;
4199
- --f7-list-bg-color: #fff;
3446
+ --f7-list-outline-border-color: rgba(0, 0, 0, 0.22);
4200
3447
  --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
4201
- --f7-menu-list-selected-text-color: var(--f7-theme-color);
4202
- --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
4203
3448
  }
4204
3449
  :root .dark,
4205
3450
  :root.dark {
4206
3451
  --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
4207
- --f7-list-bg-color: #1c1c1d;
4208
- --f7-list-border-color: rgba(255, 255, 255, 0.15);
4209
- --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
4210
- --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
4211
- --f7-list-item-divider-bg-color: #232323;
4212
- --f7-list-group-title-bg-color: #232323;
3452
+ --f7-list-outline-border-color: rgba(255, 255, 255, 0.15);
3453
+ --f7-list-group-title-border-color: rgba(255, 255, 255, 0.15);
4213
3454
  --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
4214
- --f7-menu-list-selected-text-color: inherit;
4215
- --f7-menu-list-selected-bg-color: var(--f7-theme-color);
4216
3455
  }
4217
3456
  .ios {
4218
3457
  --f7-list-in-list-padding-left: 30px;
@@ -4220,8 +3459,8 @@ html.device-full-viewport body {
4220
3459
  --f7-list-margin-vertical: 35px;
4221
3460
  --f7-list-font-size: 17px;
4222
3461
  --f7-list-chevron-icon-area: 20px;
4223
- --f7-list-border-color: rgba(0, 0, 0, 0.22);
4224
- --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
3462
+ --f7-list-item-title-text-color: inherit;
3463
+ --f7-list-item-subtitle-text-color: inherit;
4225
3464
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
4226
3465
  --f7-list-item-subtitle-font-size: 15px;
4227
3466
  --f7-list-item-text-font-size: 15px;
@@ -4233,38 +3472,48 @@ html.device-full-viewport body {
4233
3472
  --f7-list-media-item-padding-vertical: 10px;
4234
3473
  --f7-list-media-item-title-font-weight: 600;
4235
3474
  --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
4236
- --f7-list-item-divider-height: 31px;
4237
- --f7-list-item-divider-font-size: inherit;
4238
- --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
4239
- --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
3475
+ --f7-list-group-title-border-color: rgba(0, 0, 0, 0.22);
4240
3476
  --f7-list-group-title-height: 31px;
4241
3477
  --f7-list-group-title-font-size: inherit;
4242
3478
  --f7-list-group-title-font-weight: 400;
4243
- --f7-list-group-title-bg-color: #f7f7f7;
3479
+ --f7-menu-list-offset: 8px;
3480
+ --f7-menu-list-border-radius: 8px;
3481
+ --f7-menu-list-item-bg-color: transparent;
3482
+ --f7-menu-list-item-text-color: inherit;
3483
+ --f7-menu-list-item-min-height: 44px;
3484
+ --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
3485
+ --f7-list-outline-inset-border-color: rgba(0, 0, 0, 0.22);
3486
+ --f7-list-strong-bg-color: #fff;
4244
3487
  --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
3488
+ --f7-list-item-header-text-color: inherit;
4245
3489
  --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
4246
3490
  --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
4247
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
4248
3491
  --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
3492
+ --f7-list-group-title-bg-color: #f7f7f7;
3493
+ --f7-menu-list-item-selected-text-color: var(--f7-theme-color);
3494
+ --f7-menu-list-item-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
4249
3495
  }
4250
3496
  .ios .dark,
4251
3497
  .ios.dark {
3498
+ --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
3499
+ --f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
3500
+ --f7-list-strong-bg-color: #1c1c1d;
4252
3501
  --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
4253
3502
  --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
4254
3503
  --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
4255
3504
  --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
4256
- --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
4257
3505
  --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
3506
+ --f7-list-group-title-bg-color: #232323;
4258
3507
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
3508
+ --f7-menu-list-item-selected-text-color: inherit;
3509
+ --f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
4259
3510
  }
4260
3511
  .md {
4261
- --f7-list-in-list-padding-left: 40px;
4262
- --f7-list-inset-border-radius: 4px;
3512
+ --f7-list-in-list-padding-left: 24px;
3513
+ --f7-list-inset-border-radius: 16px;
4263
3514
  --f7-list-margin-vertical: 32px;
4264
3515
  --f7-list-font-size: 16px;
4265
3516
  --f7-list-chevron-icon-area: 26px;
4266
- --f7-list-border-color: rgba(0, 0, 0, 0.12);
4267
- --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
4268
3517
  --f7-list-item-subtitle-font-size: 14px;
4269
3518
  --f7-list-item-text-font-size: 14px;
4270
3519
  --f7-list-item-text-line-height: 20px;
@@ -4272,105 +3521,62 @@ html.device-full-viewport body {
4272
3521
  --f7-list-item-after-padding: 8px;
4273
3522
  --f7-list-item-min-height: 48px;
4274
3523
  --f7-list-item-media-icons-margin: 8px;
4275
- --f7-list-media-item-padding-vertical: 14px;
4276
- /*
4277
- --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
4278
- */
3524
+ --f7-list-media-item-padding-vertical: 12px;
3525
+ --f7-list-media-item-title-font-weight: 500;
4279
3526
  --f7-list-button-border-color: transparent;
4280
- --f7-list-item-divider-height: 48px;
4281
- --f7-list-item-divider-font-size: 14px;
4282
- --f7-list-item-divider-bg-color: #f4f4f4;
4283
- --f7-list-item-divider-border-color: transparent;
3527
+ --f7-list-group-title-border-color: transparent;
4284
3528
  --f7-list-group-title-height: 48px;
4285
- --f7-list-group-title-font-size: 14px;
3529
+ --f7-list-group-title-font-size: 16px;
4286
3530
  --f7-list-group-title-font-weight: 400;
4287
- --f7-list-group-title-bg-color: #f4f4f4;
4288
- --f7-menu-list-border-radius: 4px;
3531
+ --f7-menu-list-offset: 16px;
3532
+ --f7-menu-list-border-radius: 999px;
3533
+ --f7-menu-list-item-min-height: 56px;
4289
3534
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
4290
- --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
4291
- --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
4292
- --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
4293
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
4294
- --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
4295
3535
  }
4296
3536
  .md .dark,
4297
3537
  .md.dark {
4298
- --f7-list-item-divider-text-color: #fff;
4299
- --f7-list-group-title-text-color: #fff;
4300
3538
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
4301
- --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
4302
- --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
4303
- --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
4304
3539
  }
4305
- .aurora {
4306
- --f7-list-in-list-padding-left: 16px;
4307
- --f7-list-inset-border-radius: 8px;
4308
- --f7-list-margin-vertical: 32px;
4309
- --f7-list-font-size: 16px;
4310
- --f7-list-chevron-icon-area: 20px;
4311
- --f7-list-border-color: rgba(0, 0, 0, 0.12);
4312
- --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
4313
- --f7-list-item-subtitle-font-size: 14px;
4314
- --f7-list-item-text-font-size: 14px;
4315
- --f7-list-item-text-line-height: 20px;
4316
- --f7-list-item-after-font-size: 14px;
4317
- --f7-list-item-after-padding: 8px;
4318
- --f7-list-item-min-height: 48px;
4319
- --f7-list-item-media-icons-margin: 8px;
4320
- --f7-list-media-item-padding-vertical: 16px;
4321
- --f7-list-media-item-title-font-weight: 600;
4322
- --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
4323
- --f7-list-button-font-weight: 500;
4324
- --f7-list-item-divider-height: 32px;
4325
- --f7-list-item-divider-font-size: 14px;
4326
- --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
4327
- --f7-list-item-divider-border-color: transparent;
4328
- --f7-list-group-title-height: 32px;
4329
- --f7-list-group-title-font-size: 14px;
4330
- --f7-list-group-title-font-weight: 500;
4331
- --f7-list-group-title-bg-color: #f7f7f7;
4332
- --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
4333
- --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
4334
- --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
4335
- --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
4336
- --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
4337
- --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
4338
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
4339
- --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
4340
- }
4341
- .aurora .dark,
4342
- .aurora.dark {
4343
- --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
4344
- --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
4345
- --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
4346
- --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
4347
- --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
4348
- --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
4349
- --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
4350
- --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
3540
+ .md,
3541
+ .md .dark,
3542
+ .md [class*='color-'] {
3543
+ --f7-list-outline-inset-border-color: var(--f7-md-outline);
3544
+ --f7-list-item-border-color: var(--f7-md-outline);
3545
+ --f7-list-item-title-text-color: var(--f7-md-on-surface);
3546
+ --f7-list-item-subtitle-text-color: var(--f7-md-on-surface);
3547
+ --f7-list-group-title-bg-color: var(--f7-md-surface-2);
3548
+ --f7-list-group-title-text-color: var(--f7-md-on-surface-variant);
3549
+ --f7-list-strong-bg-color: var(--f7-md-surface-1);
3550
+ --f7-list-item-after-text-color: var(--f7-md-on-surface-variant);
3551
+ --f7-list-item-text-text-color: var(--f7-md-on-surface-variant);
3552
+ --f7-list-item-header-text-color: var(--f7-md-on-surface-variant);
3553
+ --f7-list-item-footer-text-color: var(--f7-md-on-surface-variant);
3554
+ --f7-menu-list-item-text-color: var(--f7-md-on-surface-variant);
3555
+ --f7-menu-list-item-bg-color: var(--f7-md-surface-1);
3556
+ --f7-menu-list-item-selected-text-color: var(--f7-md-on-secondary-container);
3557
+ --f7-menu-list-item-selected-bg-color: var(--f7-md-secondary-container);
4351
3558
  }
4352
3559
  :root {
4353
3560
  --f7-list-chevron-icon-left: 'chevron_left';
4354
3561
  --f7-list-chevron-icon-right: 'chevron_right';
4355
3562
  }
4356
3563
  .list {
4357
- --menu-list-offset: 0px;
4358
3564
  position: relative;
4359
3565
  z-index: 1;
4360
3566
  font-size: var(--f7-list-font-size);
4361
3567
  margin: var(--f7-list-margin-vertical) 0;
4362
3568
  }
4363
- .list ul {
4364
- list-style: none;
4365
- margin: 0;
4366
- padding: 0;
4367
- position: relative;
4368
- background: var(--f7-list-bg-color);
3569
+ .list-strong ul,
3570
+ .ios .list-strong-ios ul,
3571
+ .md .list-strong-md ul {
3572
+ background: var(--f7-list-strong-bg-color);
4369
3573
  }
4370
- .list ul:before {
3574
+ .list-outline ul:before,
3575
+ .ios .list-outline-ios ul:before,
3576
+ .md .list-outline-md ul:before {
4371
3577
  content: '';
4372
3578
  position: absolute;
4373
- background-color: var(--f7-list-border-color);
3579
+ background-color: var(--f7-list-outline-border-color);
4374
3580
  display: block;
4375
3581
  z-index: 15;
4376
3582
  top: 0;
@@ -4382,10 +3588,12 @@ html.device-full-viewport body {
4382
3588
  transform-origin: 50% 0%;
4383
3589
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4384
3590
  }
4385
- .list ul:after {
3591
+ .list-outline ul:after,
3592
+ .ios .list-outline-ios ul:after,
3593
+ .md .list-outline-md ul:after {
4386
3594
  content: '';
4387
3595
  position: absolute;
4388
- background-color: var(--f7-list-border-color);
3596
+ background-color: var(--f7-list-outline-border-color);
4389
3597
  display: block;
4390
3598
  z-index: 15;
4391
3599
  top: auto;
@@ -4397,6 +3605,19 @@ html.device-full-viewport body {
4397
3605
  transform-origin: 50% 100%;
4398
3606
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4399
3607
  }
3608
+ .list-outline.inset,
3609
+ .ios .list-outline-ios.inset,
3610
+ .ios .list-outline-ios.inset-ios,
3611
+ .md .list-outline-md.inset,
3612
+ .md .list-outline-md.inset-md {
3613
+ border: 1px solid var(--f7-list-outline-inset-border-color);
3614
+ }
3615
+ .list ul {
3616
+ list-style: none;
3617
+ margin: 0;
3618
+ padding: 0;
3619
+ position: relative;
3620
+ }
4400
3621
  .list ul ul {
4401
3622
  padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
4402
3623
  }
@@ -4416,6 +3637,7 @@ html.device-full-viewport body {
4416
3637
  box-sizing: border-box;
4417
3638
  padding-bottom: var(--f7-list-item-padding-vertical);
4418
3639
  padding-top: var(--f7-list-item-padding-vertical);
3640
+ position: relative;
4419
3641
  }
4420
3642
  .list .item-media + .item-inner {
4421
3643
  margin-left: var(--f7-list-item-media-margin);
@@ -4438,8 +3660,8 @@ html.device-full-viewport body {
4438
3660
  align-self: stretch;
4439
3661
  padding-top: var(--f7-list-item-padding-vertical);
4440
3662
  padding-bottom: var(--f7-list-item-padding-vertical);
4441
- min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
4442
- padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
3663
+ min-height: calc(var(--f7-list-item-min-height));
3664
+ padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4443
3665
  }
4444
3666
  .list .item-title {
4445
3667
  min-width: 0;
@@ -4481,30 +3703,37 @@ html.device-full-viewport body {
4481
3703
  line-height: var(--f7-list-item-footer-line-height);
4482
3704
  }
4483
3705
  .list .item-link,
3706
+ .list label.item-content,
4484
3707
  .list .list-button {
4485
3708
  transition-duration: 300ms;
4486
3709
  transition-property: background-color, color;
4487
- display: block;
4488
3710
  position: relative;
4489
3711
  overflow: hidden;
4490
3712
  z-index: 0;
3713
+ cursor: pointer;
3714
+ }
3715
+ .list .item-link,
3716
+ .list .list-button {
3717
+ display: block;
4491
3718
  }
4492
- .list .item-link {
3719
+ .list .item-link,
3720
+ .list label.item-content {
4493
3721
  color: inherit;
4494
3722
  }
4495
- .list .item-link.active-state {
3723
+ .list .item-link.active-state,
3724
+ .list label.item-content.active-state {
4496
3725
  background-color: var(--f7-list-link-pressed-bg-color);
4497
3726
  }
4498
3727
  .list .item-link .item-inner {
4499
- padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
3728
+ padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4500
3729
  }
4501
3730
  .list .item-content {
4502
3731
  display: flex;
4503
3732
  justify-content: space-between;
4504
3733
  box-sizing: border-box;
4505
3734
  align-items: center;
4506
- min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
4507
- padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
3735
+ min-height: calc(var(--f7-list-item-min-height));
3736
+ padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4508
3737
  }
4509
3738
  .list .item-subtitle {
4510
3739
  position: relative;
@@ -4541,26 +3770,6 @@ html.device-full-viewport body {
4541
3770
  .list .item-title-row .item-after {
4542
3771
  align-self: center;
4543
3772
  }
4544
- .list .item-row {
4545
- display: flex;
4546
- justify-content: space-between;
4547
- box-sizing: border-box;
4548
- }
4549
- .list .item-cell {
4550
- display: block;
4551
- align-self: center;
4552
- box-sizing: border-box;
4553
- width: 100%;
4554
- min-width: 0;
4555
- margin-left: var(--f7-list-item-cell-margin);
4556
- flex-shrink: 1;
4557
- }
4558
- .list .item-cell:first-child {
4559
- margin-left: 0;
4560
- }
4561
- .list .ripple-wave + .item-cell {
4562
- margin-left: 0;
4563
- }
4564
3773
  .list li:last-child .list-button:after {
4565
3774
  display: none !important;
4566
3775
  }
@@ -4590,78 +3799,6 @@ html.device-full-viewport body {
4590
3799
  transform-origin: 50% 100%;
4591
3800
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4592
3801
  }
4593
- .list.no-hairlines:before,
4594
- .list.no-hairlines ul:before,
4595
- .md .list.no-hairlines-md:before,
4596
- .md .list.no-hairlines-md ul:before,
4597
- .ios .list.no-hairlines-ios:before,
4598
- .ios .list.no-hairlines-ios ul:before,
4599
- .aurora .list.no-hairlines-aurora:before,
4600
- .aurora .list.no-hairlines-aurora ul:before,
4601
- .list.no-hairlines:after,
4602
- .list.no-hairlines ul:after,
4603
- .md .list.no-hairlines-md:after,
4604
- .md .list.no-hairlines-md ul:after,
4605
- .ios .list.no-hairlines-ios:after,
4606
- .ios .list.no-hairlines-ios ul:after,
4607
- .aurora .list.no-hairlines-aurora:after,
4608
- .aurora .list.no-hairlines-aurora ul:after {
4609
- display: none !important;
4610
- }
4611
- .list.no-hairline-top:before,
4612
- .list.no-hairline-top ul:before,
4613
- .md .list.no-hairline-top-md:before,
4614
- .md .list.no-hairline-top-md ul:before,
4615
- .ios .list.no-hairline-top-ios:before,
4616
- .ios .list.no-hairline-top-ios ul:before,
4617
- .aurora .list.no-hairline-top-aurora:before,
4618
- .aurora .list.no-hairline-top-aurora ul:before {
4619
- display: none !important;
4620
- }
4621
- .list.no-hairline-bottom:after,
4622
- .list.no-hairline-bottom ul:after,
4623
- .md .list.no-hairline-bottom-md:after,
4624
- .md .list.no-hairline-bottom-md ul:after,
4625
- .ios .list.no-hairline-bottom-ios:after,
4626
- .ios .list.no-hairline-bottom-ios ul:after,
4627
- .aurora .list.no-hairline-bottom-aurora:after,
4628
- .aurora .list.no-hairline-bottom-aurora ul:after {
4629
- display: none !important;
4630
- }
4631
- .list.no-hairlines-between .item-inner:after,
4632
- .md .list.no-hairlines-between-md .item-inner:after,
4633
- .ios .list.no-hairlines-between-ios .item-inner:after,
4634
- .aurora .list.no-hairlines-between-aurora .item-inner:after,
4635
- .list.no-hairlines-between .list-button:after,
4636
- .md .list.no-hairlines-between-md .list-button:after,
4637
- .ios .list.no-hairlines-between-ios .list-button:after,
4638
- .aurora .list.no-hairlines-between-aurora .list-button:after,
4639
- .list.no-hairlines-between .item-divider:after,
4640
- .md .list.no-hairlines-between-md .item-divider:after,
4641
- .ios .list.no-hairlines-between-ios .item-divider:after,
4642
- .aurora .list.no-hairlines-between-aurora .item-divider:after,
4643
- .list.no-hairlines-between .list-group-title:after,
4644
- .md .list.no-hairlines-between-md .list-group-title:after,
4645
- .ios .list.no-hairlines-between-ios .list-group-title:after,
4646
- .aurora .list.no-hairlines-between-aurora .list-group-title:after,
4647
- .list.no-hairlines-between .list-group-title:after,
4648
- .md .list.no-hairlines-between-md .list-group-title:after,
4649
- .ios .list.no-hairlines-between-ios .list-group-title:after,
4650
- .aurora .list.no-hairlines-between-aurora .list-group-title:after {
4651
- display: none !important;
4652
- }
4653
- .list.no-hairlines-between.simple-list li:after,
4654
- .md .list.no-hairlines-between-md.simple-list li:after,
4655
- .ios .list.no-hairlines-between-ios.simple-list li:after,
4656
- .aurora .list.no-hairlines-between-aurora.simple-list li:after {
4657
- display: none !important;
4658
- }
4659
- .list.no-hairlines-between.links-list a:after,
4660
- .md .list.no-hairlines-between-md.links-list a:after,
4661
- .ios .list.no-hairlines-between-ios.links-list a:after,
4662
- .aurora .list.no-hairlines-between-aurora.links-list a:after {
4663
- display: none !important;
4664
- }
4665
3802
  .list-button {
4666
3803
  --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));
4667
3804
  padding: 0 var(--f7-list-item-padding-horizontal);
@@ -4671,7 +3808,12 @@ html.device-full-viewport body {
4671
3808
  font-weight: var(--f7-list-button-font-weight);
4672
3809
  text-align: var(--f7-list-button-text-align);
4673
3810
  }
4674
- .list-button:after {
3811
+ .list-button.active-state {
3812
+ background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
3813
+ }
3814
+ .list-dividers .list-button:after,
3815
+ .ios .list-dividers-ios .list-button:after,
3816
+ .md .list-dividers-md .list-button:after {
4675
3817
  content: '';
4676
3818
  position: absolute;
4677
3819
  background-color: var(--f7-list-button-border-color);
@@ -4686,9 +3828,6 @@ html.device-full-viewport body {
4686
3828
  transform-origin: 50% 100%;
4687
3829
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4688
3830
  }
4689
- .list-button.active-state {
4690
- background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4691
- }
4692
3831
  .list-button[class*='color-'] {
4693
3832
  --f7-list-button-text-color: var(--f7-theme-color);
4694
3833
  }
@@ -4756,9 +3895,15 @@ html.device-full-viewport body {
4756
3895
  .links-list li:last-child a:after {
4757
3896
  display: none !important;
4758
3897
  }
4759
- .simple-list li:after,
4760
- .links-list a:after,
4761
- .list .item-inner:after {
3898
+ .list-dividers.simple-list li:after,
3899
+ .ios .list-dividers-ios.simple-list li:after,
3900
+ .md .list-dividers-md.simple-list li:after,
3901
+ .list-dividers.links-list a:after,
3902
+ .ios .list-dividers-ios.links-list a:after,
3903
+ .md .list-dividers-md.links-list a:after,
3904
+ .list-dividers .item-inner:after,
3905
+ .ios .list-dividers-ios .item-inner:after,
3906
+ .md .list-dividers-md .item-inner:after {
4762
3907
  content: '';
4763
3908
  position: absolute;
4764
3909
  background-color: var(--f7-list-item-border-color);
@@ -4773,6 +3918,23 @@ html.device-full-viewport body {
4773
3918
  transform-origin: 50% 100%;
4774
3919
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4775
3920
  }
3921
+ .md .media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content,
3922
+ .md .media-list:not(.inset):not(.inset-md):not(.menu-list) li > .item-link,
3923
+ .md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content,
3924
+ .md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item > .item-link {
3925
+ margin-left: calc(var(--f7-list-item-padding-horizontal) / 2);
3926
+ margin-right: calc(var(--f7-list-item-padding-horizontal) / 2);
3927
+ border-radius: 16px;
3928
+ }
3929
+ .md .media-list:not(.inset):not(.inset-md):not(.menu-list) li > .item-link > .item-content,
3930
+ .md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item > .item-link > .item-content {
3931
+ margin-left: 0;
3932
+ margin-right: 0;
3933
+ }
3934
+ .md .media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content,
3935
+ .md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content {
3936
+ padding-left: calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-left));
3937
+ }
4776
3938
  .media-list,
4777
3939
  li.media-item {
4778
3940
  --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
@@ -4787,17 +3949,13 @@ li.media-item .item-inner {
4787
3949
  display: block;
4788
3950
  align-self: stretch;
4789
3951
  }
4790
- .media-list .item-media,
4791
- li.media-item .item-media {
4792
- align-self: flex-start;
4793
- }
4794
3952
  .media-list .item-media img,
4795
3953
  li.media-item .item-media img {
4796
3954
  display: block;
4797
3955
  }
4798
3956
  .media-list .item-link .item-inner,
4799
3957
  li.media-item .item-link .item-inner {
4800
- padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
3958
+ padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4801
3959
  }
4802
3960
  .media-list .item-link .item-title-row,
4803
3961
  li.media-item .item-link .item-title-row {
@@ -4809,7 +3967,7 @@ li.media-item .item-link .item-title-row {
4809
3967
  li.media-item.chevron-center .item-link .item-inner,
4810
3968
  li.media-item .item-link.chevron-center .item-inner,
4811
3969
  li.media-item .chevron-center .item-link .item-inner {
4812
- padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
3970
+ padding-right: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4813
3971
  }
4814
3972
  .media-list.chevron-center .item-title-row,
4815
3973
  .media-list .chevron-center .item-title-row,
@@ -4878,9 +4036,9 @@ li.media-item .item-link .item-title-row:before {
4878
4036
  .list-group + .list-group ul:before {
4879
4037
  display: none !important;
4880
4038
  }
4881
- li.item-divider,
4882
- .item-divider,
4883
- li.list-group-title {
4039
+ li.list-group-title,
4040
+ .list-group-title {
4041
+ margin-top: -1px;
4884
4042
  white-space: nowrap;
4885
4043
  position: relative;
4886
4044
  max-width: 100%;
@@ -4895,27 +4053,18 @@ li.list-group-title {
4895
4053
  display: flex;
4896
4054
  align-items: center;
4897
4055
  align-content: center;
4056
+ height: var(--f7-list-group-title-height);
4057
+ color: var(--f7-list-group-title-text-color);
4058
+ font-size: var(--f7-list-group-title-font-size);
4059
+ font-weight: var(--f7-list-group-title-font-weight);
4060
+ background-color: var(--f7-list-group-title-bg-color);
4061
+ line-height: var(--f7-list-group-title-line-height);
4898
4062
  }
4899
- li.item-divider:after,
4900
- .item-divider:after,
4901
- li.list-group-title:after {
4902
- display: none !important;
4903
- }
4904
- li.item-divider,
4905
- .item-divider {
4906
- margin-top: -1px;
4907
- height: var(--f7-list-item-divider-height);
4908
- color: var(--f7-list-item-divider-text-color);
4909
- font-size: var(--f7-list-item-divider-font-size);
4910
- font-weight: var(--f7-list-item-divider-font-weight);
4911
- background-color: var(--f7-list-item-divider-bg-color);
4912
- line-height: var(--f7-list-item-divider-line-height);
4913
- }
4914
- li.item-divider:before,
4915
- .item-divider:before {
4063
+ li.list-group-title:before,
4064
+ .list-group-title:before {
4916
4065
  content: '';
4917
4066
  position: absolute;
4918
- background-color: var(--f7-list-item-divider-border-color);
4067
+ background-color: var(--f7-list-group-title-border-color);
4919
4068
  display: block;
4920
4069
  z-index: 15;
4921
4070
  top: 0;
@@ -4927,198 +4076,332 @@ li.item-divider:before,
4927
4076
  transform-origin: 50% 0%;
4928
4077
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4929
4078
  }
4930
- li.list-group-title,
4931
- .list li.list-group-title {
4932
- position: relative;
4933
- position: sticky;
4079
+ li.list-group-title:after,
4080
+ .list-group-title:after {
4081
+ display: none !important;
4082
+ }
4083
+ .list-group > .list-group-title,
4084
+ .list-group > ul > .list-group-title {
4934
4085
  top: 0;
4935
4086
  margin-top: 0;
4087
+ position: sticky;
4936
4088
  z-index: 20;
4937
- height: var(--f7-list-group-title-height);
4938
- color: var(--f7-list-group-title-text-color);
4939
- font-size: var(--f7-list-group-title-font-size);
4940
- font-weight: var(--f7-list-group-title-font-weight);
4941
- background-color: var(--f7-list-group-title-bg-color);
4942
- line-height: var(--f7-list-group-title-line-height);
4943
4089
  }
4944
- .page-with-navbar-large li.list-group-title,
4945
- .page-with-navbar-large .list li.list-group-title {
4090
+ .page-with-navbar-large .list-group > .list-group-title,
4091
+ .page-with-navbar-large .list-group > ul > .list-group-title {
4946
4092
  top: calc(-1 * var(--f7-navbar-large-title-height));
4947
4093
  }
4948
- .list.inset {
4094
+ .list.inset,
4095
+ .ios .list.inset-ios,
4096
+ .md .list.inset-md {
4949
4097
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4950
4098
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4951
4099
  border-radius: var(--f7-list-inset-border-radius);
4952
4100
  --f7-safe-area-left: 0px;
4953
4101
  --f7-safe-area-right: 0px;
4954
4102
  }
4955
- .list.inset .block-title {
4103
+ .list.inset .block-title,
4104
+ .ios .list.inset-ios .block-title,
4105
+ .md .list.inset-md .block-title {
4956
4106
  margin-left: 0;
4957
4107
  margin-right: 0;
4958
4108
  }
4959
- .list.inset ul {
4109
+ .list.inset ul,
4110
+ .ios .list.inset-ios ul,
4111
+ .md .list.inset-md ul {
4960
4112
  border-radius: var(--f7-list-inset-border-radius);
4961
4113
  }
4962
4114
  .list.inset ul:before,
4963
- .list.inset ul:after {
4115
+ .ios .list.inset-ios ul:before,
4116
+ .md .list.inset-md ul:before,
4117
+ .list.inset ul:after,
4118
+ .ios .list.inset-ios ul:after,
4119
+ .md .list.inset-md ul:after {
4964
4120
  display: none !important;
4965
4121
  }
4966
4122
  .list.inset li.swipeout:first-child,
4967
- .list.inset li:first-child > a {
4123
+ .ios .list.inset-ios li.swipeout:first-child,
4124
+ .md .list.inset-md li.swipeout:first-child,
4125
+ .list.inset li:first-child > a,
4126
+ .ios .list.inset-ios li:first-child > a,
4127
+ .md .list.inset-md li:first-child > a {
4968
4128
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4969
4129
  }
4970
4130
  .list.inset li.swipeout:last-child,
4971
- .list.inset li:last-child > a {
4131
+ .ios .list.inset-ios li.swipeout:last-child,
4132
+ .md .list.inset-md li.swipeout:last-child,
4133
+ .list.inset li:last-child > a,
4134
+ .ios .list.inset-ios li:last-child > a,
4135
+ .md .list.inset-md li:last-child > a {
4972
4136
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
4973
4137
  }
4974
4138
  .list.inset li.swipeout:first-child:last-child,
4975
- .list.inset li:first-child:last-child > a {
4139
+ .ios .list.inset-ios li.swipeout:first-child:last-child,
4140
+ .md .list.inset-md li.swipeout:first-child:last-child,
4141
+ .list.inset li:first-child:last-child > a,
4142
+ .ios .list.inset-ios li:first-child:last-child > a,
4143
+ .md .list.inset-md li:first-child:last-child > a {
4976
4144
  border-radius: var(--f7-list-inset-border-radius);
4977
4145
  }
4978
4146
  @media (min-width: 480px) {
4979
- .list.xsmall-inset {
4147
+ .list.xsmall-inset,
4148
+ .ios .list.xsmall-inset-ios,
4149
+ .md .list.xsmall-inset-md {
4980
4150
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4981
4151
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4982
4152
  border-radius: var(--f7-list-inset-border-radius);
4983
4153
  --f7-safe-area-left: 0px;
4984
4154
  --f7-safe-area-right: 0px;
4985
4155
  }
4986
- .list.xsmall-inset .block-title {
4156
+ .list.xsmall-inset .block-title,
4157
+ .ios .list.xsmall-inset-ios .block-title,
4158
+ .md .list.xsmall-inset-md .block-title {
4987
4159
  margin-left: 0;
4988
4160
  margin-right: 0;
4989
4161
  }
4990
- .list.xsmall-inset ul {
4162
+ .list.xsmall-inset ul,
4163
+ .ios .list.xsmall-inset-ios ul,
4164
+ .md .list.xsmall-inset-md ul {
4991
4165
  border-radius: var(--f7-list-inset-border-radius);
4992
4166
  }
4993
4167
  .list.xsmall-inset ul:before,
4994
- .list.xsmall-inset ul:after {
4168
+ .ios .list.xsmall-inset-ios ul:before,
4169
+ .md .list.xsmall-inset-md ul:before,
4170
+ .list.xsmall-inset ul:after,
4171
+ .ios .list.xsmall-inset-ios ul:after,
4172
+ .md .list.xsmall-inset-md ul:after {
4995
4173
  display: none !important;
4996
4174
  }
4997
- .list.xsmall-inset li:first-child > a {
4175
+ .list.xsmall-inset li:first-child > a,
4176
+ .ios .list.xsmall-inset-ios li:first-child > a,
4177
+ .md .list.xsmall-inset-md li:first-child > a {
4998
4178
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4999
4179
  }
5000
- .list.xsmall-inset li:last-child > a {
4180
+ .list.xsmall-inset li:last-child > a,
4181
+ .ios .list.xsmall-inset-ios li:last-child > a,
4182
+ .md .list.xsmall-inset-md li:last-child > a {
5001
4183
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5002
4184
  }
5003
- .list.xsmall-inset li:first-child:last-child > a {
4185
+ .list.xsmall-inset li:first-child:last-child > a,
4186
+ .ios .list.xsmall-inset-ios li:first-child:last-child > a,
4187
+ .md .list.xsmall-inset-md li:first-child:last-child > a {
5004
4188
  border-radius: var(--f7-list-inset-border-radius);
5005
4189
  }
4190
+ .list.xsmall-inset.list-outline ul,
4191
+ .ios .list.xsmall-inset-ios.list-outline ul,
4192
+ .ios .list.xsmall-inset-ios.list-outline-ios ul,
4193
+ .md .list.xsmall-inset-md.list-outline ul,
4194
+ .md .list.xsmall-inset-md.list-outline-md ul {
4195
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4196
+ }
5006
4197
  }
5007
4198
  @media (min-width: 568px) {
5008
- .list.small-inset {
4199
+ .list.small-inset,
4200
+ .ios .list.small-inset-ios,
4201
+ .md .list.small-inset-md {
5009
4202
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5010
4203
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5011
4204
  border-radius: var(--f7-list-inset-border-radius);
5012
4205
  --f7-safe-area-left: 0px;
5013
4206
  --f7-safe-area-right: 0px;
5014
4207
  }
5015
- .list.small-inset .block-title {
4208
+ .list.small-inset .block-title,
4209
+ .ios .list.small-inset-ios .block-title,
4210
+ .md .list.small-inset-md .block-title {
5016
4211
  margin-left: 0;
5017
4212
  margin-right: 0;
5018
4213
  }
5019
- .list.small-inset ul {
4214
+ .list.small-inset ul,
4215
+ .ios .list.small-inset-ios ul,
4216
+ .md .list.small-inset-md ul {
5020
4217
  border-radius: var(--f7-list-inset-border-radius);
5021
4218
  }
5022
4219
  .list.small-inset ul:before,
5023
- .list.small-inset ul:after {
4220
+ .ios .list.small-inset-ios ul:before,
4221
+ .md .list.small-inset-md ul:before,
4222
+ .list.small-inset ul:after,
4223
+ .ios .list.small-inset-ios ul:after,
4224
+ .md .list.small-inset-md ul:after {
5024
4225
  display: none !important;
5025
4226
  }
5026
- .list.small-inset li:first-child > a {
4227
+ .list.small-inset li:first-child > a,
4228
+ .ios .list.small-inset-ios li:first-child > a,
4229
+ .md .list.small-inset-md li:first-child > a {
5027
4230
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5028
4231
  }
5029
- .list.small-inset li:last-child > a {
4232
+ .list.small-inset li:last-child > a,
4233
+ .ios .list.small-inset-ios li:last-child > a,
4234
+ .md .list.small-inset-md li:last-child > a {
5030
4235
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5031
4236
  }
5032
- .list.small-inset li:first-child:last-child > a {
4237
+ .list.small-inset li:first-child:last-child > a,
4238
+ .ios .list.small-inset-ios li:first-child:last-child > a,
4239
+ .md .list.small-inset-md li:first-child:last-child > a {
5033
4240
  border-radius: var(--f7-list-inset-border-radius);
5034
4241
  }
4242
+ .list.small-inset.list-outline ul,
4243
+ .ios .list.small-inset-ios.list-outline ul,
4244
+ .ios .list.small-inset-ios.list-outline-ios ul,
4245
+ .md .list.small-inset-md.list-outline ul,
4246
+ .md .list.small-inset-md.list-outline-md ul {
4247
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4248
+ }
5035
4249
  }
5036
4250
  @media (min-width: 768px) {
5037
- .list.medium-inset {
4251
+ .list.medium-inset,
4252
+ .ios .list.medium-inset-ios,
4253
+ .md .list.medium-inset-md {
5038
4254
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5039
4255
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5040
4256
  border-radius: var(--f7-list-inset-border-radius);
5041
4257
  --f7-safe-area-left: 0px;
5042
4258
  --f7-safe-area-right: 0px;
5043
4259
  }
5044
- .list.medium-inset .block-title {
4260
+ .list.medium-inset .block-title,
4261
+ .ios .list.medium-inset-ios .block-title,
4262
+ .md .list.medium-inset-md .block-title {
5045
4263
  margin-left: 0;
5046
4264
  margin-right: 0;
5047
4265
  }
5048
- .list.medium-inset ul {
4266
+ .list.medium-inset ul,
4267
+ .ios .list.medium-inset-ios ul,
4268
+ .md .list.medium-inset-md ul {
5049
4269
  border-radius: var(--f7-list-inset-border-radius);
5050
4270
  }
5051
4271
  .list.medium-inset ul:before,
5052
- .list.medium-inset ul:after {
4272
+ .ios .list.medium-inset-ios ul:before,
4273
+ .md .list.medium-inset-md ul:before,
4274
+ .list.medium-inset ul:after,
4275
+ .ios .list.medium-inset-ios ul:after,
4276
+ .md .list.medium-inset-md ul:after {
5053
4277
  display: none !important;
5054
4278
  }
5055
- .list.medium-inset li:first-child > a {
4279
+ .list.medium-inset li:first-child > a,
4280
+ .ios .list.medium-inset-ios li:first-child > a,
4281
+ .md .list.medium-inset-md li:first-child > a {
5056
4282
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5057
4283
  }
5058
- .list.medium-inset li:last-child > a {
4284
+ .list.medium-inset li:last-child > a,
4285
+ .ios .list.medium-inset-ios li:last-child > a,
4286
+ .md .list.medium-inset-md li:last-child > a {
5059
4287
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5060
4288
  }
5061
- .list.medium-inset li:first-child:last-child > a {
4289
+ .list.medium-inset li:first-child:last-child > a,
4290
+ .ios .list.medium-inset-ios li:first-child:last-child > a,
4291
+ .md .list.medium-inset-md li:first-child:last-child > a {
5062
4292
  border-radius: var(--f7-list-inset-border-radius);
5063
4293
  }
4294
+ .list.medium-inset.list-outline ul,
4295
+ .ios .list.medium-inset-ios.list-outline ul,
4296
+ .ios .list.medium-inset-ios.list-outline-ios ul,
4297
+ .md .list.medium-inset-md.list-outline ul,
4298
+ .md .list.medium-inset-md.list-outline-md ul {
4299
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4300
+ }
5064
4301
  }
5065
4302
  @media (min-width: 1024px) {
5066
- .list.large-inset {
4303
+ .list.large-inset,
4304
+ .ios .list.large-inset-ios,
4305
+ .md .list.large-inset-md {
5067
4306
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5068
4307
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5069
4308
  border-radius: var(--f7-list-inset-border-radius);
5070
4309
  --f7-safe-area-left: 0px;
5071
4310
  --f7-safe-area-right: 0px;
5072
4311
  }
5073
- .list.large-inset .block-title {
4312
+ .list.large-inset .block-title,
4313
+ .ios .list.large-inset-ios .block-title,
4314
+ .md .list.large-inset-md .block-title {
5074
4315
  margin-left: 0;
5075
4316
  margin-right: 0;
5076
4317
  }
5077
- .list.large-inset ul {
4318
+ .list.large-inset ul,
4319
+ .ios .list.large-inset-ios ul,
4320
+ .md .list.large-inset-md ul {
5078
4321
  border-radius: var(--f7-list-inset-border-radius);
5079
4322
  }
5080
4323
  .list.large-inset ul:before,
5081
- .list.large-inset ul:after {
4324
+ .ios .list.large-inset-ios ul:before,
4325
+ .md .list.large-inset-md ul:before,
4326
+ .list.large-inset ul:after,
4327
+ .ios .list.large-inset-ios ul:after,
4328
+ .md .list.large-inset-md ul:after {
5082
4329
  display: none !important;
5083
4330
  }
5084
- .list.large-inset li:first-child > a {
4331
+ .list.large-inset li:first-child > a,
4332
+ .ios .list.large-inset-ios li:first-child > a,
4333
+ .md .list.large-inset-md li:first-child > a {
5085
4334
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5086
4335
  }
5087
- .list.large-inset li:last-child > a {
4336
+ .list.large-inset li:last-child > a,
4337
+ .ios .list.large-inset-ios li:last-child > a,
4338
+ .md .list.large-inset-md li:last-child > a {
5088
4339
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5089
4340
  }
5090
- .list.large-inset li:first-child:last-child > a {
4341
+ .list.large-inset li:first-child:last-child > a,
4342
+ .ios .list.large-inset-ios li:first-child:last-child > a,
4343
+ .md .list.large-inset-md li:first-child:last-child > a {
5091
4344
  border-radius: var(--f7-list-inset-border-radius);
5092
4345
  }
4346
+ .list.large-inset.list-outline ul,
4347
+ .ios .list.large-inset-ios.list-outline ul,
4348
+ .ios .list.large-inset-ios.list-outline-ios ul,
4349
+ .md .list.large-inset-md.list-outline ul,
4350
+ .md .list.large-inset-md.list-outline-md ul {
4351
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4352
+ }
5093
4353
  }
5094
4354
  @media (min-width: 1200px) {
5095
- .list.xlarge-inset {
4355
+ .list.xlarge-inset,
4356
+ .ios .list.xlarge-inset-ios,
4357
+ .md .list.xlarge-inset-md {
5096
4358
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5097
4359
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5098
4360
  border-radius: var(--f7-list-inset-border-radius);
5099
4361
  --f7-safe-area-left: 0px;
5100
4362
  --f7-safe-area-right: 0px;
5101
4363
  }
5102
- .list.xlarge-inset .block-title {
4364
+ .list.xlarge-inset .block-title,
4365
+ .ios .list.xlarge-inset-ios .block-title,
4366
+ .md .list.xlarge-inset-md .block-title {
5103
4367
  margin-left: 0;
5104
4368
  margin-right: 0;
5105
4369
  }
5106
- .list.xlarge-inset ul {
4370
+ .list.xlarge-inset ul,
4371
+ .ios .list.xlarge-inset-ios ul,
4372
+ .md .list.xlarge-inset-md ul {
5107
4373
  border-radius: var(--f7-list-inset-border-radius);
5108
4374
  }
5109
4375
  .list.xlarge-inset ul:before,
5110
- .list.xlarge-inset ul:after {
4376
+ .ios .list.xlarge-inset-ios ul:before,
4377
+ .md .list.xlarge-inset-md ul:before,
4378
+ .list.xlarge-inset ul:after,
4379
+ .ios .list.xlarge-inset-ios ul:after,
4380
+ .md .list.xlarge-inset-md ul:after {
5111
4381
  display: none !important;
5112
4382
  }
5113
- .list.xlarge-inset li:first-child > a {
4383
+ .list.xlarge-inset li:first-child > a,
4384
+ .ios .list.xlarge-inset-ios li:first-child > a,
4385
+ .md .list.xlarge-inset-md li:first-child > a {
5114
4386
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5115
4387
  }
5116
- .list.xlarge-inset li:last-child > a {
4388
+ .list.xlarge-inset li:last-child > a,
4389
+ .ios .list.xlarge-inset-ios li:last-child > a,
4390
+ .md .list.xlarge-inset-md li:last-child > a {
5117
4391
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5118
4392
  }
5119
- .list.xlarge-inset li:first-child:last-child > a {
4393
+ .list.xlarge-inset li:first-child:last-child > a,
4394
+ .ios .list.xlarge-inset-ios li:first-child:last-child > a,
4395
+ .md .list.xlarge-inset-md li:first-child:last-child > a {
5120
4396
  border-radius: var(--f7-list-inset-border-radius);
5121
4397
  }
4398
+ .list.xlarge-inset.list-outline ul,
4399
+ .ios .list.xlarge-inset-ios.list-outline ul,
4400
+ .ios .list.xlarge-inset-ios.list-outline-ios ul,
4401
+ .md .list.xlarge-inset-md.list-outline ul,
4402
+ .md .list.xlarge-inset-md.list-outline-md ul {
4403
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4404
+ }
5122
4405
  }
5123
4406
  .list.no-chevron,
5124
4407
  .list .no-chevron,
@@ -5127,13 +4410,13 @@ li.list-group-title,
5127
4410
  --f7-list-chevron-icon-area: 0px;
5128
4411
  }
5129
4412
  .menu-list {
5130
- --menu-list-offset: var(--f7-menu-list-offset);
5131
4413
  --f7-list-font-size: var(--f7-menu-list-font-size);
5132
4414
  --f7-list-item-title-font-size: var(--f7-menu-list-item-title-font-size);
5133
4415
  --f7-list-item-title-font-weight: var(--f7-menu-list-item-title-font-weight);
5134
4416
  --f7-list-item-subtitle-font-size: var(--f7-menu-list-item-subtitle-font-size);
5135
4417
  --f7-list-item-text-font-size: var(--f7-menu-list-item-text-font-size);
5136
4418
  --f7-list-item-after-font-size: var(--f7-menu-list-item-after-font-size);
4419
+ --f7-list-item-min-height: var(--f7-menu-list-item-min-height);
5137
4420
  }
5138
4421
  .menu-list .item-header,
5139
4422
  .menu-list .item-footer,
@@ -5143,20 +4426,22 @@ li.list-group-title,
5143
4426
  .menu-list .item-subtitle {
5144
4427
  transition-duration: 300ms;
5145
4428
  }
5146
- .menu-list li:not(.item-divider):not(.list-group-title) {
5147
- padding-top: calc(var(--f7-menu-list-offset) / 2);
5148
- padding-bottom: calc(var(--f7-menu-list-offset) / 2);
4429
+ .menu-list li:not(.list-group-title) {
4430
+ padding-top: 4px;
4431
+ padding-bottom: 4px;
5149
4432
  }
5150
- .menu-list li:not(.item-divider):not(.list-group-title):first-child {
5151
- padding-top: var(--f7-menu-list-offset);
4433
+ .menu-list li:not(.list-group-title):first-child {
4434
+ padding-top: 4px;
5152
4435
  }
5153
- .menu-list li:not(.item-divider):not(.list-group-title):last-child {
5154
- padding-bottom: var(--f7-menu-list-offset);
4436
+ .menu-list li:not(.list-group-title):last-child {
4437
+ padding-bottom: 4px;
5155
4438
  }
5156
4439
  .menu-list .item-link {
5157
4440
  margin-left: var(--f7-menu-list-offset);
5158
4441
  margin-right: var(--f7-menu-list-offset);
5159
4442
  border-radius: var(--f7-menu-list-border-radius) !important;
4443
+ color: var(--f7-menu-list-item-text-color);
4444
+ background-color: var(--f7-menu-list-item-bg-color);
5160
4445
  }
5161
4446
  .menu-list .item-inner:after {
5162
4447
  display: none;
@@ -5165,8 +4450,8 @@ li.list-group-title,
5165
4450
  .menu-list .item-selected.item-link,
5166
4451
  .menu-list .tab-link-active .item-link,
5167
4452
  .menu-list .tab-link-active.item-link {
5168
- color: var(--f7-menu-list-selected-text-color);
5169
- background-color: var(--f7-menu-list-selected-bg-color);
4453
+ color: var(--f7-menu-list-item-selected-text-color);
4454
+ background-color: var(--f7-menu-list-item-selected-bg-color);
5170
4455
  }
5171
4456
  .menu-list .item-selected .item-header,
5172
4457
  .menu-list .item-selected .item-footer,
@@ -5174,7 +4459,7 @@ li.list-group-title,
5174
4459
  .menu-list .item-selected .item-after,
5175
4460
  .menu-list .item-selected .item-text,
5176
4461
  .menu-list .item-selected .item-subtitle {
5177
- color: var(--f7-menu-list-selected-text-color);
4462
+ color: var(--f7-menu-list-item-selected-text-color);
5178
4463
  }
5179
4464
  .ios .item-link.active-state .item-inner:after,
5180
4465
  .ios .list-button.active-state:after,
@@ -5186,46 +4471,25 @@ li.list-group-title,
5186
4471
  .ios .list .list-button.active-state {
5187
4472
  transition-duration: 0ms;
5188
4473
  }
5189
- .md .list .item-media {
5190
- min-width: 40px;
5191
- }
5192
- .aurora .list .item-media {
5193
- min-width: 24px;
5194
- }
5195
- .aurora .links-list a,
5196
- .aurora .list .item-link:not(.item-selected),
5197
- .aurora .list .list-button {
5198
- transition-duration: 0ms;
5199
- }
5200
- .aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
5201
- .aurora.device-desktop .list .item-link:not(.item-selected):hover:not(.active-state):not(.no-hover) {
5202
- background: var(--f7-list-link-hover-bg-color);
5203
- }
5204
- .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
5205
- background: var(--f7-list-button-hover-bg-color);
5206
- }
5207
4474
  /* === Badge === */
5208
4475
  :root {
5209
4476
  --f7-badge-text-color: #fff;
5210
4477
  --f7-badge-bg-color: #8e8e93;
5211
- --f7-badge-padding: 0 4px;
5212
4478
  --f7-badge-in-icon-size: 16px;
5213
4479
  --f7-badge-in-icon-font-size: 10px;
5214
4480
  --f7-badge-font-weight: normal;
5215
4481
  --f7-badge-font-size: 12px;
5216
4482
  }
5217
4483
  .ios {
4484
+ --f7-badge-padding: 0 4px;
5218
4485
  --f7-badge-size: 20px;
5219
4486
  --f7-badge-font-weight: 600;
5220
4487
  }
5221
4488
  .md {
5222
- --f7-badge-size: 18px;
4489
+ --f7-badge-padding: 2px 6px;
4490
+ --f7-badge-size: 20px;
5223
4491
  --f7-badge-font-weight: 500;
5224
4492
  }
5225
- .aurora {
5226
- --f7-badge-size: 18px;
5227
- --f7-badge-font-weight: 600;
5228
- }
5229
4493
  .badge {
5230
4494
  display: inline-flex;
5231
4495
  align-items: center;
@@ -5255,6 +4519,7 @@ li.list-group-title,
5255
4519
  font-family: var(--f7-font-family);
5256
4520
  --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
5257
4521
  --f7-badge-size: var(--f7-badge-in-icon-size);
4522
+ --f7-badge-padding: 0px 2px;
5258
4523
  }
5259
4524
  .badge[class*='color-'] {
5260
4525
  --f7-badge-bg-color: var(--f7-theme-color);
@@ -5264,21 +4529,14 @@ li.list-group-title,
5264
4529
  --f7-button-min-width: 32px;
5265
4530
  --f7-button-bg-color: transparent;
5266
4531
  --f7-button-border-width: 0px;
5267
- --f7-button-text-transform: uppercase;
5268
- --f7-button-large-text-transform: uppercase;
5269
- --f7-button-small-text-transform: uppercase;
5270
- --f7-button-small-outline-border-width: 2px;
5271
4532
  /*
5272
4533
  --f7-button-text-color: var(--f7-theme-color);
5273
4534
  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
5274
4535
  --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
5275
4536
  --f7-button-border-color: var(--f7-theme-color);
5276
- --f7-button-fill-text-color: #fff;
5277
4537
  --f7-button-fill-bg-color: var(--f7-theme-color);
5278
- --f7-button-outline-border-color: var(--f7-theme-color);
5279
4538
  --f7-button-padding-vertical: 0px;
5280
4539
  */
5281
- --f7-button-outline-border-width: 2px;
5282
4540
  --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
5283
4541
  --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
5284
4542
  0 3px 6px rgba(0, 0, 0, 0.23);
@@ -5287,7 +4545,6 @@ li.list-group-title,
5287
4545
  --f7-segmented-strong-between-buttons: 4px;
5288
4546
  --f7-segmented-strong-button-font-weight: 500;
5289
4547
  --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
5290
- --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
5291
4548
  --f7-segmented-strong-button-text-color: #000;
5292
4549
  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
5293
4550
  --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
@@ -5296,7 +4553,6 @@ li.list-group-title,
5296
4553
  }
5297
4554
  :root .dark,
5298
4555
  :root.dark {
5299
- --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
5300
4556
  --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
5301
4557
  --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
5302
4558
  --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
@@ -5304,63 +4560,68 @@ li.list-group-title,
5304
4560
  --f7-segmented-strong-button-active-text-color: #fff;
5305
4561
  }
5306
4562
  .ios {
4563
+ --f7-button-fill-text-color: #fff;
4564
+ --f7-button-text-transform: uppercase;
5307
4565
  --f7-button-height: 28px;
5308
4566
  --f7-button-padding-horizontal: 10px;
5309
- --f7-button-border-radius: 5px;
4567
+ --f7-button-border-radius: 4px;
5310
4568
  --f7-button-font-weight: 600;
5311
4569
  --f7-button-letter-spacing: 0;
4570
+ --f7-button-outline-border-color: var(--f7-theme-color);
4571
+ --f7-button-outline-border-width: 2px;
5312
4572
  /*
5313
4573
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
5314
4574
  */
4575
+ --f7-button-large-text-transform: uppercase;
5315
4576
  --f7-button-large-height: 44px;
5316
4577
  --f7-button-large-font-size: 17px;
5317
4578
  --f7-button-large-font-weight: 500;
4579
+ --f7-button-small-outline-border-width: 2px;
4580
+ --f7-button-small-text-transform: uppercase;
5318
4581
  --f7-button-small-height: 26px;
5319
4582
  --f7-button-small-font-size: 13px;
5320
4583
  --f7-button-small-font-weight: 600;
5321
4584
  --f7-segmented-strong-button-text-transform: none;
5322
4585
  --f7-segmented-strong-button-active-font-weight: 600;
4586
+ --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
4587
+ --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
4588
+ --f7-button-tonal-text-color: var(--f7-theme-color);
4589
+ --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
4590
+ }
4591
+ .ios .dark,
4592
+ .ios.dark {
4593
+ --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
5323
4594
  }
5324
4595
  .md {
5325
- --f7-button-height: 36px;
5326
- --f7-button-padding-horizontal: 8px;
5327
- --f7-button-border-radius: 4px;
4596
+ --f7-button-text-transform: none;
4597
+ --f7-button-height: 40px;
4598
+ --f7-button-padding-horizontal: 16px;
4599
+ --f7-button-border-radius: 8px;
5328
4600
  --f7-button-font-weight: 500;
5329
- --f7-button-letter-spacing: 0.05em;
5330
- /*
5331
- --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
5332
- */
4601
+ --f7-button-letter-spacing: normal;
4602
+ --f7-button-outline-border-width: 1px;
4603
+ --f7-button-large-text-transform: none;
5333
4604
  --f7-button-large-height: 48px;
5334
4605
  --f7-button-large-font-size: 14px;
5335
4606
  --f7-button-large-font-weight: 500;
5336
- --f7-button-small-height: 28px;
4607
+ --f7-button-small-text-transform: none;
4608
+ --f7-button-small-outline-border-width: 1px;
4609
+ --f7-button-small-height: 32px;
5337
4610
  --f7-button-small-font-size: 14px;
5338
4611
  --f7-button-small-font-weight: 500;
5339
- --f7-segmented-strong-button-text-transform: uppercase;
4612
+ --f7-segmented-strong-button-text-transform: none;
5340
4613
  --f7-segmented-strong-button-active-font-weight: 500;
5341
4614
  }
5342
- .aurora {
5343
- /*
5344
- --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
5345
- --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
5346
- */
5347
- --f7-button-height: 36px;
5348
- --f7-button-min-width: 24px;
5349
- --f7-button-padding-horizontal: 10px;
5350
- --f7-button-border-radius: 8px;
5351
- --f7-button-font-weight: 600;
5352
- --f7-button-letter-spacing: 0em;
5353
- /*
4615
+ .md,
4616
+ .md .dark,
4617
+ .md [class*='color-'] {
5354
4618
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
5355
- */
5356
- --f7-button-large-height: 48px;
5357
- --f7-button-large-font-size: 16px;
5358
- --f7-button-large-font-weight: 600;
5359
- --f7-button-small-height: 28px;
5360
- --f7-button-small-font-size: 14px;
5361
- --f7-button-small-font-weight: 600;
5362
- --f7-segmented-strong-button-text-transform: uppercase;
5363
- --f7-segmented-strong-button-active-font-weight: 600;
4619
+ --f7-button-fill-text-color: var(--f7-md-on-primary);
4620
+ --f7-button-outline-border-color: var(--f7-md-outline);
4621
+ --f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
4622
+ --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
4623
+ --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
4624
+ --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
5364
4625
  }
5365
4626
  button {
5366
4627
  -webkit-appearance: none;
@@ -5412,37 +4673,44 @@ input[type='reset'].button {
5412
4673
  }
5413
4674
  .button > i + span,
5414
4675
  .button > span + span,
5415
- .button > span + i,
5416
- .button > i + i {
4676
+ .button > span ~ i {
5417
4677
  margin-left: 4px;
5418
4678
  }
5419
4679
  .subnavbar .button,
5420
4680
  .navbar .button,
5421
4681
  .toolbar .button,
5422
- .searchbar .button,
5423
- .appbar .button {
4682
+ .searchbar .button {
5424
4683
  color: var(--f7-button-text-color, var(--f7-theme-color));
5425
4684
  }
5426
4685
  .button-round,
5427
4686
  .ios .button-round-ios,
5428
- .md .button-round-md,
5429
- .aurora .button-round-aurora {
4687
+ .md .button-round-md {
5430
4688
  --f7-button-border-radius: var(--f7-button-height);
5431
4689
  }
5432
4690
  .button-fill,
5433
4691
  .ios .button-fill-ios,
5434
4692
  .md .button-fill-md,
5435
- .aurora .button-fill-aurora,
5436
4693
  .button-active,
5437
4694
  .button.tab-link-active {
5438
4695
  --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
5439
4696
  --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
5440
4697
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
5441
4698
  }
4699
+ .ios .color-white .button-fill,
4700
+ .ios .color-white .ios .button-fill-ios,
4701
+ .ios .color-white .md .button-fill-md,
4702
+ .ios .color-white .button-active,
4703
+ .ios .color-white .button.tab-link-active,
4704
+ .ios .button-fill.color-white,
4705
+ .ios .ios .button-fill-ios.color-white,
4706
+ .ios .md .button-fill-md.color-white,
4707
+ .ios .button-active.color-white,
4708
+ .ios .button.tab-link-active.color-white {
4709
+ --f7-button-text-color: #000;
4710
+ }
5442
4711
  .button-fill,
5443
4712
  .ios .button-fill-ios,
5444
- .md .button-fill-md,
5445
- .aurora .button-fill-aurora {
4713
+ .md .button-fill-md {
5446
4714
  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
5447
4715
  }
5448
4716
  .button-active,
@@ -5451,15 +4719,20 @@ input[type='reset'].button {
5451
4719
  }
5452
4720
  .button-outline,
5453
4721
  .ios .button-outline-ios,
5454
- .md .button-outline-md,
5455
- .aurora .button-outline-aurora {
4722
+ .md .button-outline-md {
5456
4723
  --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
5457
4724
  --f7-button-border-width: var(--f7-button-outline-border-width);
5458
4725
  }
4726
+ .button-tonal,
4727
+ .ios .button-tonal-ios,
4728
+ .md .button-tonal-md {
4729
+ --f7-button-bg-color: var(--f7-button-tonal-bg-color);
4730
+ --f7-button-text-color: var(--f7-button-tonal-text-color);
4731
+ --f7-button-pressed-bg-color: var(--f7-button-tonal-pressed-bg-color);
4732
+ }
5459
4733
  .button-large,
5460
4734
  .ios .button-large-ios,
5461
- .md .button-large-md,
5462
- .aurora .button-large-aurora {
4735
+ .md .button-large-md {
5463
4736
  --f7-button-height: var(--f7-button-large-height);
5464
4737
  --f7-button-font-size: var(--f7-button-large-font-size);
5465
4738
  --f7-button-font-weight: var(--f7-button-large-font-weight);
@@ -5467,8 +4740,7 @@ input[type='reset'].button {
5467
4740
  }
5468
4741
  .button-small,
5469
4742
  .ios .button-small-ios,
5470
- .md .button-small-md,
5471
- .aurora .button-small-aurora {
4743
+ .md .button-small-md {
5472
4744
  --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
5473
4745
  --f7-button-height: var(--f7-button-small-height);
5474
4746
  --f7-button-font-size: var(--f7-button-small-font-size);
@@ -5520,32 +4792,27 @@ input[type='reset'].button {
5520
4792
  }
5521
4793
  .segmented-raised,
5522
4794
  .ios .segmented-raised-ios,
5523
- .md .segmented-raised-md,
5524
- .aurora .segmented-raised-aurora {
4795
+ .md .segmented-raised-md {
5525
4796
  box-shadow: var(--f7-button-raised-box-shadow);
5526
4797
  }
5527
4798
  .segmented-raised .button:not(.button-outline),
5528
4799
  .ios .segmented-raised-ios .button:not(.button-outline),
5529
- .md .segmented-raised-md .button:not(.button-outline),
5530
- .aurora .segmented-raised-aurora .button:not(.button-outline) {
4800
+ .md .segmented-raised-md .button:not(.button-outline) {
5531
4801
  border-left: 1px solid var(--f7-segmented-raised-divider-color);
5532
4802
  }
5533
4803
  .button-raised,
5534
4804
  .ios .button-raised-ios,
5535
- .md .button-raised-md,
5536
- .aurora .button-raised-aurora {
4805
+ .md .button-raised-md {
5537
4806
  --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
5538
4807
  }
5539
4808
  .button-raised.active-state,
5540
4809
  .ios .button-raised-ios.active-state,
5541
- .md .button-raised-md.active-state,
5542
- .aurora .button-raised-aurora.active-state {
4810
+ .md .button-raised-md.active-state {
5543
4811
  --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
5544
4812
  }
5545
4813
  .segmented-strong,
5546
4814
  .ios .segmented-strong-ios,
5547
- .md .segmented-strong-md,
5548
- .aurora .segmented-strong-aurora {
4815
+ .md .segmented-strong-md {
5549
4816
  --f7-button-bg-color: transparent;
5550
4817
  --f7-button-hover-bg-color: var(--f7-segmented-strong-button-hover-bg-color);
5551
4818
  --f7-button-text-color: var(--f7-segmented-strong-button-text-color);
@@ -5561,39 +4828,32 @@ input[type='reset'].button {
5561
4828
  }
5562
4829
  .segmented-strong .button,
5563
4830
  .ios .segmented-strong-ios .button,
5564
- .md .segmented-strong-md .button,
5565
- .aurora .segmented-strong-aurora .button {
4831
+ .md .segmented-strong-md .button {
5566
4832
  z-index: 1;
5567
4833
  transform: translate3d(0, 0, 0);
5568
4834
  }
5569
4835
  .segmented-strong .button,
5570
4836
  .ios .segmented-strong-ios .button,
5571
4837
  .md .segmented-strong-md .button,
5572
- .aurora .segmented-strong-aurora .button,
5573
4838
  .segmented-strong .button:first-child,
5574
4839
  .ios .segmented-strong-ios .button:first-child,
5575
4840
  .md .segmented-strong-md .button:first-child,
5576
- .aurora .segmented-strong-aurora .button:first-child,
5577
4841
  .segmented-strong .button:last-child,
5578
4842
  .ios .segmented-strong-ios .button:last-child,
5579
- .md .segmented-strong-md .button:last-child,
5580
- .aurora .segmented-strong-aurora .button:last-child {
4843
+ .md .segmented-strong-md .button:last-child {
5581
4844
  border-radius: var(--f7-button-border-radius);
5582
4845
  }
5583
4846
  .segmented-strong .button + .button,
5584
4847
  .ios .segmented-strong-ios .button + .button,
5585
- .md .segmented-strong-md .button + .button,
5586
- .aurora .segmented-strong-aurora .button + .button {
4848
+ .md .segmented-strong-md .button + .button {
5587
4849
  margin-left: var(--f7-segmented-strong-between-buttons);
5588
4850
  }
5589
4851
  .segmented-strong .button.button-active,
5590
4852
  .ios .segmented-strong-ios .button.button-active,
5591
4853
  .md .segmented-strong-md .button.button-active,
5592
- .aurora .segmented-strong-aurora .button.button-active,
5593
4854
  .segmented-strong .button.tab-link-active,
5594
4855
  .ios .segmented-strong-ios .button.tab-link-active,
5595
- .md .segmented-strong-md .button.tab-link-active,
5596
- .aurora .segmented-strong-aurora .button.tab-link-active {
4856
+ .md .segmented-strong-md .button.tab-link-active {
5597
4857
  --f7-button-hover-bg-color: transparent;
5598
4858
  --f7-button-bg-color: transparent;
5599
4859
  --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
@@ -5601,8 +4861,7 @@ input[type='reset'].button {
5601
4861
  }
5602
4862
  .segmented-strong .segmented-highlight,
5603
4863
  .ios .segmented-strong-ios .segmented-highlight,
5604
- .md .segmented-strong-md .segmented-highlight,
5605
- .aurora .segmented-strong-aurora .segmented-highlight {
4864
+ .md .segmented-strong-md .segmented-highlight {
5606
4865
  --f7-segmented-highlight-num: 1;
5607
4866
  --f7-segmented-highlight-active: 0;
5608
4867
  --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
@@ -5685,14 +4944,12 @@ input[type='reset'].button {
5685
4944
  }
5686
4945
  .segmented-round,
5687
4946
  .ios .segmented-round-ios,
5688
- .md .segmented-round-md,
5689
- .aurora .segmented-round-aurora {
4947
+ .md .segmented-round-md {
5690
4948
  border-radius: var(--f7-button-height);
5691
4949
  }
5692
4950
  .segmented-round .segmented-highlight,
5693
4951
  .ios .segmented-round-ios .segmented-highlight,
5694
- .md .segmented-round-md .segmented-highlight,
5695
- .aurora .segmented-round-aurora .segmented-highlight {
4952
+ .md .segmented-round-md .segmented-highlight {
5696
4953
  border-radius: var(--f7-button-height);
5697
4954
  }
5698
4955
  .subnavbar .segmented {
@@ -5754,23 +5011,6 @@ input[type='reset'].button {
5754
5011
  .md .button-fill-md {
5755
5012
  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
5756
5013
  }
5757
- .aurora .button {
5758
- transition-duration: 100ms;
5759
- transform: translate3d(0, 0, 0);
5760
- }
5761
- .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
5762
- background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
5763
- }
5764
- .aurora .button-fill,
5765
- .aurora .button-fill-aurora {
5766
- --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
5767
- }
5768
- .aurora .button-fill,
5769
- .aurora .button-active,
5770
- .aurora .button.tab-link-active,
5771
- .aurora .button-fill-aurora {
5772
- --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
5773
- }
5774
5014
  /* === Touch Ripple === */
5775
5015
  :root {
5776
5016
  --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
@@ -5814,8 +5054,7 @@ input[type='reset'].button {
5814
5054
  animation: touch-ripple-out 300ms forwards;
5815
5055
  }
5816
5056
  .button-fill .ripple-wave,
5817
- .picker-calendar-day .ripple-wave,
5818
- .menu .ripple-wave {
5057
+ .picker-calendar-day .ripple-wave {
5819
5058
  z-index: 1;
5820
5059
  }
5821
5060
  .checkbox .ripple-wave,
@@ -5934,36 +5173,6 @@ i.icon {
5934
5173
  .md .icon-prev:after {
5935
5174
  content: 'chevron_left_md';
5936
5175
  }
5937
- .aurora .f7-icons,
5938
- .aurora .material-icons {
5939
- font-size: 24px;
5940
- }
5941
- .aurora .icon-back,
5942
- .aurora .icon-prev,
5943
- .aurora .icon-forward,
5944
- .aurora .icon-next {
5945
- width: 12px;
5946
- height: 20px;
5947
- line-height: 20px;
5948
- }
5949
- .aurora .icon-back:after,
5950
- .aurora .icon-prev:after,
5951
- .aurora .icon-forward:after,
5952
- .aurora .icon-next:after {
5953
- line-height: inherit;
5954
- }
5955
- .aurora .icon-prev:after,
5956
- .aurora .icon-next:after {
5957
- font-size: 16px;
5958
- }
5959
- .aurora .icon-back:after,
5960
- .aurora .icon-prev:after {
5961
- content: 'chevron_left_ios';
5962
- }
5963
- .aurora .icon-forward:after,
5964
- .aurora .icon-next:after {
5965
- content: 'chevron_right_ios';
5966
- }
5967
5176
  .custom-modal-backdrop {
5968
5177
  z-index: 10500;
5969
5178
  }