framework7 7.0.9 → 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
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Framework7 7.0.9
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: November 21, 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
  }
@@ -684,8 +231,6 @@ html.device-full-viewport body {
684
231
  }
685
232
  .ios .md-only,
686
233
  .ios .if-md,
687
- .ios .aurora-only,
688
- .ios .if-aurora,
689
234
  .ios .if-not-ios,
690
235
  .ios .not-ios {
691
236
  display: none !important;
@@ -706,20 +251,10 @@ html.device-full-viewport body {
706
251
  }
707
252
  .md .ios-only,
708
253
  .md .if-ios,
709
- .md .aurora-only,
710
- .md .if-aurora,
711
254
  .md .if-not-md,
712
255
  .md .not-md {
713
256
  display: none !important;
714
257
  }
715
- .aurora .ios-only,
716
- .aurora .if-ios,
717
- .aurora .md-only,
718
- .aurora .if-md,
719
- .aurora .if-not-aurora,
720
- .aurora .not-aurora {
721
- display: none !important;
722
- }
723
258
  /* === Statusbar === */
724
259
  /* === Views === */
725
260
  .views,
@@ -732,7 +267,7 @@ html.device-full-viewport body {
732
267
  }
733
268
  .framework7-root > .view,
734
269
  .framework7-root > .views {
735
- height: calc(100% - var(--f7-appbar-app-offset, 0px));
270
+ height: 100%;
736
271
  }
737
272
  .view-resize-handler {
738
273
  width: 6px;
@@ -782,28 +317,16 @@ html.device-full-viewport body {
782
317
  --f7-page-bg-color: #000;
783
318
  }
784
319
  .md {
785
- --f7-page-transition-duration: 250ms;
320
+ --f7-page-transition-duration: 400ms;
786
321
  --f7-page-title-font-size: 34px;
787
322
  --f7-page-title-font-weight: 500;
788
323
  --f7-page-title-letter-spacing: 0;
789
324
  --f7-page-title-padding-vertical: 8px;
790
- --f7-page-bg-color: #fff;
791
325
  }
326
+ .md,
792
327
  .md .dark,
793
- .md.dark {
794
- --f7-page-bg-color: #121212;
795
- }
796
- .aurora {
797
- --f7-page-transition-duration: 250ms;
798
- --f7-page-title-font-size: 28px;
799
- --f7-page-title-font-weight: bold;
800
- --f7-page-title-letter-spacing: 0;
801
- --f7-page-title-padding-vertical: 7px;
802
- --f7-page-bg-color: #f3f4f6;
803
- }
804
- .aurora .dark,
805
- .aurora.dark {
806
- --f7-page-bg-color: #121212;
328
+ .md [class*='color-'] {
329
+ --f7-page-bg-color: var(--f7-md-surface);
807
330
  }
808
331
  .dark {
809
332
  --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
@@ -825,9 +348,6 @@ html.device-full-viewport body {
825
348
  background-color: var(--f7-page-bg-color);
826
349
  z-index: 1;
827
350
  }
828
- .page.stacked {
829
- display: none;
830
- }
831
351
  .page-with-navbar-large-collapsed {
832
352
  --f7-navbar-large-collapse-progress: 1;
833
353
  }
@@ -857,9 +377,7 @@ html.device-full-viewport body {
857
377
  .router-transition-forward .page-next,
858
378
  .router-transition-backward .page-next,
859
379
  .router-transition-forward .page-current,
860
- .router-transition-backward .page-current,
861
- .router-transition-forward .page-previous:not(.stacked),
862
- .router-transition-backward .page-previous:not(.stacked) {
380
+ .router-transition-backward .page-current {
863
381
  pointer-events: none;
864
382
  }
865
383
  .page-shadow-effect {
@@ -1007,80 +525,69 @@ html.device-full-viewport body {
1007
525
  opacity: 0;
1008
526
  }
1009
527
  }
528
+ .md .page-previous {
529
+ transform: translate3d(0, -20px, 0);
530
+ }
1010
531
  .md .page-next {
1011
- opacity: 0;
1012
532
  pointer-events: none;
1013
- transform: translate3d(0, 56px, 0);
533
+ transform: translate3d(0, 128px, 0);
534
+ opacity: 0;
1014
535
  }
1015
536
  .md .page-next.page-next-on-right {
1016
537
  transform: translate3d(-100%, 0, 0);
538
+ opacity: 1;
1017
539
  }
1018
540
  .md .router-transition-forward .page-next {
1019
- animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
541
+ opacity: 1;
542
+ animation: md-page-next-to-current var(--f7-page-transition-duration) forwards cubic-bezier(0, 0.8, 0.3, 1);
1020
543
  }
1021
544
  .md .router-transition-forward .page-current {
1022
- animation: none;
545
+ animation: md-page-current-to-previous var(--f7-page-transition-duration) forwards cubic-bezier(0, 0.8, 0.3, 1);
1023
546
  }
1024
547
  .md .router-transition-backward .page-current {
1025
- animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
548
+ 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;
1026
549
  }
1027
550
  .md .router-transition-backward .page-previous {
1028
- animation: none;
551
+ animation: md-page-previous-to-current var(--f7-page-transition-duration) forwards;
1029
552
  }
1030
553
  @keyframes md-page-next-to-current {
1031
554
  from {
1032
- transform: translate3d(0, 56px, 0);
1033
- opacity: 0;
555
+ transform: translate3d(0, 128px, 0);
1034
556
  }
1035
557
  to {
1036
558
  transform: translate3d(0, 0px, 0);
1037
- opacity: 1;
1038
559
  }
1039
560
  }
1040
561
  @keyframes md-page-current-to-next {
1041
562
  from {
1042
563
  transform: translate3d(0, 0, 0);
564
+ }
565
+ to {
566
+ transform: translate3d(0, 128px, 0);
567
+ }
568
+ }
569
+ @keyframes md-page-current-to-next-opacity {
570
+ from {
1043
571
  opacity: 1;
1044
572
  }
1045
573
  to {
1046
- transform: translate3d(0, 56px, 0);
1047
574
  opacity: 0;
1048
575
  }
1049
576
  }
1050
- .aurora .page-next {
1051
- opacity: 0;
1052
- pointer-events: none;
1053
- transform: translate3d(0, 0px, 0);
1054
- }
1055
- .aurora .page-next.page-next-on-right {
1056
- transform: translate3d(-100%, 0, 0);
1057
- }
1058
- .aurora .router-transition-forward .page-next {
1059
- animation: aurora-page-next-to-current var(--f7-page-transition-duration) forwards;
1060
- }
1061
- .aurora .router-transition-forward .page-current {
1062
- animation: none;
1063
- }
1064
- .aurora .router-transition-backward .page-current {
1065
- animation: aurora-page-current-to-next var(--f7-page-transition-duration) forwards;
1066
- }
1067
- .aurora .router-transition-backward .page-previous {
1068
- animation: none;
1069
- }
1070
- @keyframes aurora-page-next-to-current {
577
+ @keyframes md-page-current-to-previous {
1071
578
  from {
1072
- opacity: 0;
579
+ transform: translate3d(0, 0, 0);
1073
580
  }
1074
581
  to {
1075
- opacity: 1;
582
+ transform: translate3d(0, -20px, 0);
1076
583
  }
1077
584
  }
1078
- @keyframes aurora-page-current-to-next {
585
+ @keyframes md-page-previous-to-current {
1079
586
  from {
1080
- opacity: 1;
587
+ transform: translate3d(0, -20px, 0);
1081
588
  }
1082
589
  to {
1083
- opacity: 0;
590
+ transform: translate3d(0, 0px, 0);
1084
591
  }
1085
592
  }
1086
593
  .view:not(.view-master-detail) .page-master-stacked {
@@ -1124,16 +631,13 @@ html.device-full-viewport body {
1124
631
  }
1125
632
  .md .router-transition-custom .page-previous,
1126
633
  .ios .router-transition-custom .page-previous,
1127
- .aurora .router-transition-custom .page-previous,
1128
634
  .md .router-transition-custom .page-next,
1129
- .ios .router-transition-custom .page-next,
1130
- .aurora .router-transition-custom .page-next {
635
+ .ios .router-transition-custom .page-next {
1131
636
  opacity: 1;
1132
637
  transform: none;
1133
638
  }
1134
639
  .md .router-transition-custom.view-master-detail .page-master,
1135
- .ios .router-transition-custom.view-master-detail .page-master,
1136
- .aurora .router-transition-custom.view-master-detail .page-master {
640
+ .ios .router-transition-custom.view-master-detail .page-master {
1137
641
  animation: none;
1138
642
  }
1139
643
  .page-title {
@@ -1172,9 +676,10 @@ html.device-full-viewport body {
1172
676
  border-radius: 50%;
1173
677
  animation: f7-circle-circle-in 400ms forwards;
1174
678
  }
1175
- .router-transition-f7-circle-forward .page-next {
1176
- opacity: 0 !important;
1177
- transform: scale(0.9) !important;
679
+ .ios .router-transition-f7-circle-forward .page-next,
680
+ .md .router-transition-f7-circle-forward .page-next {
681
+ opacity: 0;
682
+ transform: scale(0.9);
1178
683
  animation: f7-circle-next-to-current 300ms forwards;
1179
684
  animation-delay: 300ms;
1180
685
  z-index: 150;
@@ -1183,7 +688,8 @@ html.device-full-viewport body {
1183
688
  animation: f7-circle-circle-out 300ms forwards;
1184
689
  animation-delay: 350ms;
1185
690
  }
1186
- .router-transition-f7-circle-backward .page-current {
691
+ .ios .router-transition-f7-circle-backward .page-current,
692
+ .md .router-transition-f7-circle-backward .page-current {
1187
693
  animation: f7-circle-current-to-next 700ms forwards;
1188
694
  z-index: 150;
1189
695
  }
@@ -1424,17 +930,21 @@ html.device-full-viewport body {
1424
930
  .router-transition-f7-fade-backward {
1425
931
  background: var(--f7-page-bg-color);
1426
932
  }
1427
- .router-transition-f7-fade-forward .page-next {
1428
- opacity: 0 !important;
933
+ .ios .router-transition-f7-fade-forward .page-next,
934
+ .md .router-transition-f7-fade-forward .page-next {
935
+ opacity: 0;
1429
936
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
1430
937
  }
1431
- .router-transition-f7-fade-forward .page-current {
938
+ .ios .router-transition-f7-fade-forward .page-current,
939
+ .md .router-transition-f7-fade-forward .page-current {
1432
940
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
1433
941
  }
1434
- .router-transition-f7-fade-backward .page-current {
942
+ .ios .router-transition-f7-fade-backward .page-current,
943
+ .md .router-transition-f7-fade-backward .page-current {
1435
944
  animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
1436
945
  }
1437
- .router-transition-f7-fade-backward .page-previous {
946
+ .ios .router-transition-f7-fade-backward .page-previous,
947
+ .md .router-transition-f7-fade-backward .page-previous {
1438
948
  animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
1439
949
  }
1440
950
  @keyframes f7-fade-in {
@@ -1468,22 +978,27 @@ html.device-full-viewport body {
1468
978
  .router-transition-f7-flip-backward .page {
1469
979
  -webkit-backface-visibility: hidden;
1470
980
  backface-visibility: hidden;
981
+ overflow: hidden;
1471
982
  }
1472
983
  .router-transition-f7-flip-forward .page-next {
984
+ transform-style: preserve-3d;
1473
985
  animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
1474
986
  }
1475
987
  .router-transition-f7-flip-forward .page-current {
988
+ transform-style: preserve-3d;
1476
989
  animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
1477
990
  }
1478
991
  .router-transition-f7-flip-backward .page-current {
992
+ transform-style: preserve-3d;
1479
993
  animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
1480
994
  }
1481
995
  .router-transition-f7-flip-backward .page-previous {
996
+ transform-style: preserve-3d;
1482
997
  animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
1483
998
  }
1484
999
  @keyframes f7-flip-next-to-current {
1485
1000
  from {
1486
- border-radius: 30px;
1001
+ border-radius: 32px;
1487
1002
  transform: translateZ(-100vmax) rotateY(-180deg);
1488
1003
  }
1489
1004
  to {
@@ -1497,7 +1012,7 @@ html.device-full-viewport body {
1497
1012
  transform: translateZ(0px) rotateY(0deg);
1498
1013
  }
1499
1014
  to {
1500
- border-radius: 30px;
1015
+ border-radius: 32px;
1501
1016
  transform: translateZ(-100vmax) rotateY(-180deg);
1502
1017
  }
1503
1018
  }
@@ -1507,13 +1022,13 @@ html.device-full-viewport body {
1507
1022
  transform: translateZ(0px) rotateY(0deg);
1508
1023
  }
1509
1024
  to {
1510
- border-radius: 30px;
1025
+ border-radius: 32px;
1511
1026
  transform: translateZ(-100vmax) rotateY(180deg);
1512
1027
  }
1513
1028
  }
1514
1029
  @keyframes f7-flip-prev-to-current {
1515
1030
  from {
1516
- border-radius: 30px;
1031
+ border-radius: 32px;
1517
1032
  transform: translateZ(-100vmax) rotateY(180deg);
1518
1033
  }
1519
1034
  to {
@@ -1618,10 +1133,6 @@ html.device-full-viewport body {
1618
1133
  .ios {
1619
1134
  --f7-link-pressed-opacity: 0.3;
1620
1135
  }
1621
- .aurora {
1622
- --f7-link-pressed-opacity: 0.3;
1623
- --f7-link-hover-opacity: 0.65;
1624
- }
1625
1136
  .link,
1626
1137
  .tab-link {
1627
1138
  display: inline-flex;
@@ -1639,6 +1150,9 @@ html.device-full-viewport body {
1639
1150
  .link span + span {
1640
1151
  margin-right: 4px;
1641
1152
  }
1153
+ .link[class*='color-'] {
1154
+ color: var(--f7-theme-color);
1155
+ }
1642
1156
  .ios .link {
1643
1157
  transition: opacity 300ms;
1644
1158
  }
@@ -1646,30 +1160,15 @@ html.device-full-viewport body {
1646
1160
  opacity: var(--f7-link-pressed-opacity);
1647
1161
  transition-duration: 0ms;
1648
1162
  }
1649
- .aurora .link {
1650
- transition: opacity 300ms;
1651
- }
1652
- .aurora .link.active-state {
1653
- opacity: var(--f7-link-pressed-opacity);
1654
- transition-duration: 0ms;
1655
- }
1656
- .aurora.device-desktop .link:not(.active-state):not(.no-hover):hover {
1657
- opacity: var(--f7-link-hover-opacity);
1658
- transition-duration: 0ms;
1659
- }
1660
1163
  /* === Navbar === */
1661
1164
  :root {
1662
1165
  /*
1663
1166
  --f7-navbar-bg-color: var(--f7-bars-bg-color);
1664
1167
  --f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
1665
- --f7-navbar-bg-image: var(--f7-bars-bg-image);
1666
1168
  --f7-navbar-border-color: var(--f7-bars-border-color);
1667
- --f7-navbar-link-color: var(--f7-bars-link-color);
1668
- --f7-navbar-text-color: var(--f7-bars-text-color);
1669
1169
  */
1670
1170
  --f7-navbar-hide-show-transition-duration: 400ms;
1671
1171
  --f7-navbar-title-line-height: 1.2;
1672
- --f7-navbar-title-font-size: inherit;
1673
1172
  --f7-navbar-subtitle-text-align: inherit;
1674
1173
  --f7-navbar-large-title-line-height: 1.2;
1675
1174
  --f7-navbar-large-title-text-color: inherit;
@@ -1677,9 +1176,13 @@ html.device-full-viewport body {
1677
1176
  --f7-navbar-large-title-padding-right: 16px;
1678
1177
  }
1679
1178
  .ios {
1179
+ /*
1180
+ --f7-navbar-link-color: var(--f7-bars-link-color);
1181
+ --f7-navbar-text-color: var(--f7-bars-text-color);
1182
+ */
1680
1183
  --f7-navbar-height: 44px;
1681
- --f7-navbar-tablet-height: 44px;
1682
1184
  --f7-navbar-font-size: 17px;
1185
+ --f7-navbar-title-font-size: inherit;
1683
1186
  --f7-navbar-inner-padding-left: 8px;
1684
1187
  --f7-navbar-inner-padding-right: 8px;
1685
1188
  --f7-navbar-title-font-weight: 600;
@@ -1688,7 +1191,6 @@ html.device-full-viewport body {
1688
1191
  --f7-navbar-title-text-align: center;
1689
1192
  --f7-navbar-subtitle-font-size: 10px;
1690
1193
  --f7-navbar-subtitle-line-height: 1;
1691
- --f7-navbar-shadow-image: none;
1692
1194
  --f7-navbar-large-title-height: 52px;
1693
1195
  --f7-navbar-large-title-font-size: 34px;
1694
1196
  --f7-navbar-large-title-font-weight: 700;
@@ -1705,56 +1207,31 @@ html.device-full-viewport body {
1705
1207
  --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
1706
1208
  }
1707
1209
  .md {
1708
- --f7-navbar-height: 56px;
1709
- --f7-navbar-tablet-height: 64px;
1710
- --f7-navbar-font-size: 20px;
1711
- --f7-navbar-inner-padding-left: 4px;
1712
- --f7-navbar-inner-padding-right: 4px;
1713
- --f7-navbar-title-font-weight: 500;
1714
- --f7-navbar-title-margin-left: 20px;
1210
+ --f7-navbar-height: 64px;
1211
+ --f7-navbar-font-size: 16px;
1212
+ --f7-navbar-title-font-size: 22px;
1213
+ --f7-navbar-inner-padding-left: 0px;
1214
+ --f7-navbar-inner-padding-right: 0px;
1215
+ --f7-navbar-title-font-weight: 400;
1216
+ --f7-navbar-title-margin-left: 0px;
1715
1217
  --f7-navbar-title-margin-right: 16px;
1716
1218
  --f7-navbar-title-text-align: left;
1717
1219
  --f7-navbar-subtitle-font-size: 14px;
1718
1220
  --f7-navbar-subtitle-line-height: 1.2;
1719
- --f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
1720
- --f7-navbar-large-title-font-size: 34px;
1721
- --f7-navbar-large-title-height: 56px;
1722
- --f7-navbar-large-title-font-weight: 500;
1221
+ --f7-navbar-large-title-font-size: 28px;
1222
+ --f7-navbar-large-title-height: 88px;
1223
+ --f7-navbar-large-title-font-weight: 400;
1723
1224
  --f7-navbar-large-title-letter-spacing: 0;
1724
1225
  --f7-navbar-large-title-padding-vertical: 8px;
1725
1226
  --f7-navbar-link-height: 48px;
1726
1227
  --f7-navbar-link-line-height: 48px;
1727
- --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
1728
1228
  }
1229
+ .md,
1729
1230
  .md .dark,
1730
- .md.dark {
1731
- --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
1732
- }
1733
- .aurora {
1734
- --f7-navbar-height: 56px;
1735
- --f7-navbar-tablet-height: 56px;
1736
- --f7-navbar-font-size: 18px;
1737
- --f7-navbar-inner-padding-left: 16px;
1738
- --f7-navbar-inner-padding-right: 16px;
1739
- --f7-navbar-title-font-weight: bold;
1740
- --f7-navbar-title-margin-left: 0;
1741
- --f7-navbar-title-margin-right: 0;
1742
- --f7-navbar-title-text-align: center;
1743
- --f7-navbar-subtitle-font-size: 14px;
1744
- --f7-navbar-subtitle-line-height: 1;
1745
- --f7-navbar-shadow-image: none;
1746
- --f7-navbar-large-title-height: 48px;
1747
- --f7-navbar-large-title-font-size: 28px;
1748
- --f7-navbar-large-title-font-weight: bold;
1749
- --f7-navbar-large-title-letter-spacing: 0;
1750
- --f7-navbar-large-title-padding-vertical: 7px;
1751
- --f7-navbar-link-height: auto;
1752
- --f7-navbar-link-line-height: inherit;
1753
- --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
1754
- }
1755
- .aurora .dark,
1756
- .aurora.dark {
1757
- --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
1231
+ .md [class*='color-'] {
1232
+ --f7-navbar-link-color: var(--f7-md-on-surface);
1233
+ --f7-navbar-text-color: var(--f7-md-on-surface);
1234
+ --f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant);
1758
1235
  }
1759
1236
  .navbars,
1760
1237
  .navbar {
@@ -1783,9 +1260,6 @@ html.device-full-viewport body {
1783
1260
  color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
1784
1261
  font-size: var(--f7-navbar-font-size);
1785
1262
  }
1786
- .navbar.stacked {
1787
- display: none;
1788
- }
1789
1263
  .navbar b {
1790
1264
  font-weight: 500;
1791
1265
  }
@@ -1837,20 +1311,12 @@ html.device-full-viewport body {
1837
1311
  position: absolute;
1838
1312
  height: 100%;
1839
1313
  }
1840
- .navbar.no-hairline .navbar-bg:after,
1841
- .navbar.no-border .navbar-bg:after,
1842
- .navbar .no-hairline .navbar-bg:after,
1843
- .navbar .no-border .navbar-bg:after {
1844
- display: none !important;
1845
- }
1846
- .navbar.no-hairline .title-large:after,
1847
- .navbar.no-border .title-large:after,
1848
- .navbar .no-hairline .title-large:after,
1849
- .navbar .no-border .title-large:after {
1314
+ .navbar.no-outline .navbar-bg:after,
1315
+ .navbar .no-outline .navbar-bg:after {
1850
1316
  display: none !important;
1851
1317
  }
1852
- .navbar.no-shadow .navbar-bg:before,
1853
- .navbar .no-shadow .navbar-bg:before {
1318
+ .navbar.no-outline .title-large:after,
1319
+ .navbar .no-outline .title-large:after {
1854
1320
  display: none !important;
1855
1321
  }
1856
1322
  .navbar.navbar-hidden .navbar-bg:before,
@@ -1866,7 +1332,6 @@ html.device-full-viewport body {
1866
1332
  pointer-events: none;
1867
1333
  z-index: 0;
1868
1334
  background: var(--f7-navbar-bg-color);
1869
- background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
1870
1335
  background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
1871
1336
  transition-property: transform;
1872
1337
  }
@@ -1897,25 +1362,9 @@ html.device-full-viewport body {
1897
1362
  transform-origin: 50% 100%;
1898
1363
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
1899
1364
  }
1900
- .navbar-bg:before {
1901
- content: '';
1902
- position: absolute;
1903
- right: 0;
1904
- width: 100%;
1905
- top: 100%;
1906
- bottom: auto;
1907
- height: 8px;
1908
- pointer-events: none;
1909
- background: var(--f7-navbar-shadow-image);
1910
- }
1911
1365
  .navbar-bg:after {
1912
1366
  z-index: 1;
1913
1367
  }
1914
- @media (min-width: 768px) and (min-height: 600px) {
1915
- :root {
1916
- --f7-navbar-height: var(--f7-navbar-tablet-height);
1917
- }
1918
- }
1919
1368
  .navbar-transitioning,
1920
1369
  .navbar-transitioning .left,
1921
1370
  .navbar-transitioning .title,
@@ -1983,8 +1432,6 @@ html.device-full-viewport body {
1983
1432
  .navbar-large-transparent .navbar-bg,
1984
1433
  .navbar-large.navbar-transparent .navbar-bg {
1985
1434
  opacity: var(--f7-navbar-large-collapse-progress);
1986
- height: 100%;
1987
- transform: none;
1988
1435
  }
1989
1436
  .ios .router-navbar-transition-to-large .navbar-bg,
1990
1437
  .ios .router-navbar-transition-from-large .navbar-bg,
@@ -2013,7 +1460,6 @@ html.device-full-viewport body {
2013
1460
  right: 0;
2014
1461
  top: 100%;
2015
1462
  display: flex;
2016
- align-items: flex-end;
2017
1463
  white-space: nowrap;
2018
1464
  overflow: hidden;
2019
1465
  height: var(--f7-navbar-large-title-height);
@@ -2058,15 +1504,16 @@ html.device-full-viewport body {
2058
1504
  .ios {
2059
1505
  --f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
2060
1506
  --f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
2061
- --f7-navbar-large-transparent-bg-center: translateX(0);
2062
1507
  --f7-navbar-large-bg-center-top: translateX(0) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2063
1508
  --f7-navbar-large-bg-center-bottom: translateX(0) translateY(0);
2064
- --f7-navbar-large-transparent-bg-left: translateX(100%);
2065
1509
  --f7-navbar-large-bg-left-top: translateX(100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2066
1510
  --f7-navbar-large-bg-left-bottom: translateX(100%) translateY(0);
2067
1511
  --f7-navbar-large-bg-right-top: translateX(-100%) translateY(calc(-1 * var(--f7-navbar-large-title-height)));
2068
1512
  --f7-navbar-large-bg-right-bottom: translateX(-100%) translateY(0);
2069
1513
  }
1514
+ .ios .navbar .title-large {
1515
+ align-items: flex-end;
1516
+ }
2070
1517
  .ios .navbar a.icon-only {
2071
1518
  width: 44px;
2072
1519
  margin: 0;
@@ -2322,10 +1769,6 @@ html.device-full-viewport body {
2322
1769
  .ios .router-transition-forward .navbar-current.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
2323
1770
  animation-name: ios-navbar-bg-from-ct-to-lt;
2324
1771
  }
2325
- .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large) .navbar-bg,
2326
- .ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large) .navbar-bg {
2327
- animation-name: ios-navbar-transparent-bg-from-c-to-l;
2328
- }
2329
1772
  .ios .router-transition-forward .navbar-next .navbar-bg {
2330
1773
  animation-name: ios-navbar-bg-from-rb-to-cb;
2331
1774
  }
@@ -2350,10 +1793,6 @@ html.device-full-viewport body {
2350
1793
  .ios .router-transition-backward .navbar-current.navbar-large-collapsed .navbar-bg {
2351
1794
  animation-name: ios-navbar-bg-from-ct-to-rt;
2352
1795
  }
2353
- .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
2354
- .ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
2355
- animation-name: ios-navbar-bg-from-cb-to-rb;
2356
- }
2357
1796
  .ios .router-transition-backward .navbar-current.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
2358
1797
  animation-name: ios-navbar-bg-from-ct-to-rb;
2359
1798
  }
@@ -2369,14 +1808,6 @@ html.device-full-viewport body {
2369
1808
  .ios .router-transition-backward .navbar-previous.navbar-large-collapsed .navbar-bg {
2370
1809
  animation-name: ios-navbar-bg-from-lt-to-ct;
2371
1810
  }
2372
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
2373
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
2374
- animation-name: ios-navbar-transparent-bg-from-l-to-c;
2375
- }
2376
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large .navbar-bg,
2377
- .ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large .navbar-bg {
2378
- animation-name: ios-navbar-bg-from-lb-to-ct;
2379
- }
2380
1811
  .view-master-detail .navbars {
2381
1812
  z-index: auto;
2382
1813
  }
@@ -2653,21 +2084,12 @@ html.device-full-viewport body {
2653
2084
  transform: var(--f7-navbar-large-bg-center-top);
2654
2085
  }
2655
2086
  }
2656
- @keyframes ios-navbar-transparent-bg-from-l-to-c {
2657
- from {
2658
- transform: var(--f7-navbar-large-transparent-bg-left);
2659
- }
2660
- to {
2661
- transform: var(--f7-navbar-large-transparent-bg-center);
2662
- }
2087
+ .md .navbar .title-large {
2088
+ align-items: center;
2663
2089
  }
2664
- @keyframes ios-navbar-transparent-bg-from-c-to-l {
2665
- from {
2666
- transform: var(--f7-navbar-large-transparent-bg-center);
2667
- }
2668
- to {
2669
- transform: var(--f7-navbar-large-transparent-bg-left);
2670
- }
2090
+ .md .navbar .left {
2091
+ margin-left: 4px;
2092
+ margin-right: 4px;
2671
2093
  }
2672
2094
  .md .navbar a.link {
2673
2095
  padding: 0 12px;
@@ -2710,6 +2132,7 @@ html.device-full-viewport body {
2710
2132
  width: 48px;
2711
2133
  }
2712
2134
  .md .navbar .right {
2135
+ margin-left: 4px;
2713
2136
  margin-right: auto;
2714
2137
  }
2715
2138
  .md .navbar .right:first-child {
@@ -2725,6 +2148,9 @@ html.device-full-viewport body {
2725
2148
  .md .page.page-with-subnavbar .navbar-inner {
2726
2149
  overflow: visible;
2727
2150
  }
2151
+ .md .navbar-inner:not(.navbar-inner-centered-title) .title:first-child {
2152
+ margin-left: 16px;
2153
+ }
2728
2154
  .md .navbar-inner-centered-title {
2729
2155
  justify-content: space-between;
2730
2156
  }
@@ -2734,49 +2160,14 @@ html.device-full-viewport body {
2734
2160
  .md .navbar-inner-centered-title .title {
2735
2161
  text-align: center;
2736
2162
  }
2737
- .aurora .navbar a.icon-only {
2738
- margin: 0;
2739
- justify-content: center;
2740
- }
2741
- .aurora .navbar .left a + a,
2742
- .aurora .navbar .right a + a {
2743
- margin-right: 10px;
2744
- }
2745
- .aurora .navbar b {
2746
- font-weight: bold;
2747
- }
2748
- .aurora .navbar .left {
2749
- margin-left: 16px;
2750
- }
2751
- .aurora .navbar .right {
2752
- margin-right: 16px;
2753
- }
2754
- .aurora .navbar .right:first-child {
2755
- left: calc(16px + var(--f7-safe-area-left));
2756
- }
2757
- .aurora .navbar-inner {
2758
- justify-content: space-between;
2759
- }
2760
- .aurora .navbar-inner-left-title {
2761
- justify-content: flex-start;
2762
- }
2763
- .aurora .navbar-inner-left-title .right {
2764
- margin-right: auto;
2765
- }
2766
- .aurora .navbar-inner-left-title .title {
2767
- text-align: left;
2768
- margin-left: 16px;
2769
- }
2770
2163
  /* === Toolbar === */
2771
2164
  :root {
2772
2165
  /*
2773
2166
  --f7-toolbar-bg-color: var(--f7-bars-bg-color);
2774
2167
  --f7-toolbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
2775
- --f7-toolbar-bg-image: var(--f7-bars-bg-image);
2776
2168
  --f7-toolbar-border-color: var(--f7-bars-border-color);
2777
2169
  --f7-toolbar-link-color: var(--f7-bars-link-color);
2778
2170
  --f7-toolbar-text-color: var(--f7-bars-text-color);
2779
- --f7-tabbar-link-active-color: var(--f7-theme-color);
2780
2171
  */
2781
2172
  --f7-tabbar-link-active-bg-color: transparent;
2782
2173
  --f7-tabbar-label-text-transform: none;
@@ -2787,14 +2178,14 @@ html.device-full-viewport body {
2787
2178
  --f7-toolbar-font-size: 17px;
2788
2179
  --f7-toolbar-inner-padding-left: 8px;
2789
2180
  --f7-toolbar-inner-padding-right: 8px;
2181
+ --f7-toolbar-link-font-weight: 400;
2790
2182
  /*
2791
2183
  --f7-toolbar-link-height: var(--f7-toolbar-height);
2792
2184
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2185
+ --f7-tabbar-link-active-color: var(--f7-theme-color);
2793
2186
  */
2794
- --f7-tabbar-labels-height: 50px;
2795
- --f7-tabbar-labels-tablet-height: 50px;
2796
- --f7-toolbar-top-shadow-image: none;
2797
- --f7-toolbar-bottom-shadow-image: none;
2187
+ --f7-tabbar-icons-height: 50px;
2188
+ --f7-tabbar-icons-tablet-height: 50px;
2798
2189
  --f7-tabbar-icon-size: 28px;
2799
2190
  --f7-tabbar-link-text-transform: none;
2800
2191
  --f7-tabbar-link-font-weight: 400;
@@ -2810,7 +2201,7 @@ html.device-full-viewport body {
2810
2201
  --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2811
2202
  }
2812
2203
  .md {
2813
- --f7-toolbar-height: 48px;
2204
+ --f7-toolbar-height: 56px;
2814
2205
  --f7-toolbar-font-size: 14px;
2815
2206
  --f7-toolbar-inner-padding-left: 0px;
2816
2207
  --f7-toolbar-inner-padding-right: 0px;
@@ -2818,54 +2209,25 @@ html.device-full-viewport body {
2818
2209
  --f7-toolbar-link-height: var(--f7-toolbar-height);
2819
2210
  --f7-toolbar-link-line-height: var(--f7-toolbar-height);
2820
2211
  */
2821
- --f7-tabbar-labels-height: 56px;
2822
- --f7-tabbar-labels-tablet-height: 56px;
2823
- /*
2824
- --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2825
- */
2826
- --f7-toolbar-top-shadow-image: var(--f7-bars-shadow-bottom-image);
2827
- --f7-toolbar-bottom-shadow-image: var(--f7-bars-shadow-top-image);
2828
- --f7-tabbar-icon-size: 24px;
2829
- --f7-tabbar-link-text-transform: uppercase;
2830
- --f7-tabbar-link-font-weight: 500;
2831
- --f7-tabbar-link-letter-spacing: 0.05em;
2832
- --f7-tabbar-label-font-size: 14px;
2833
- --f7-tabbar-label-tablet-font-size: 14px;
2834
- --f7-tabbar-label-font-weight: 400;
2835
- --f7-tabbar-label-letter-spacing: 0;
2836
- --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
2837
- }
2838
- .md .dark,
2839
- .md.dark {
2840
- --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
2841
- }
2842
- .aurora {
2843
- --f7-toolbar-height: 48px;
2844
- --f7-toolbar-font-size: 16px;
2845
- --f7-toolbar-inner-padding-left: 16px;
2846
- --f7-toolbar-inner-padding-right: 16px;
2847
- --f7-toolbar-link-height: auto;
2848
- --f7-toolbar-link-line-height: inherit;
2849
- --f7-tabbar-labels-height: 52px;
2850
- --f7-tabbar-labels-tablet-height: 52px;
2851
- /*
2852
- --f7-tabbar-link-active-border-color: var(--f7-theme-color);
2853
- */
2854
- --f7-toolbar-top-shadow-image: none;
2855
- --f7-toolbar-bottom-shadow-image: none;
2212
+ --f7-tabbar-icons-height: 80px;
2213
+ --f7-tabbar-icons-tablet-height: 80px;
2856
2214
  --f7-tabbar-icon-size: 24px;
2857
2215
  --f7-tabbar-link-text-transform: none;
2858
2216
  --f7-tabbar-link-font-weight: 500;
2859
2217
  --f7-tabbar-link-letter-spacing: 0;
2860
- --f7-tabbar-label-font-size: 14px;
2861
- --f7-tabbar-label-tablet-font-size: 14px;
2218
+ --f7-toolbar-link-font-weight: 500;
2219
+ --f7-tabbar-label-font-size: 12px;
2220
+ --f7-tabbar-label-tablet-font-size: 12px;
2862
2221
  --f7-tabbar-label-font-weight: 500;
2863
2222
  --f7-tabbar-label-letter-spacing: 0;
2864
- --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
2865
2223
  }
2866
- .aurora .dark,
2867
- .aurora.dark {
2868
- --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
2224
+ .md,
2225
+ .md .dark,
2226
+ .md [class*='color-'] {
2227
+ --f7-tabbar-link-active-color: var(--f7-md-on-secondary-container);
2228
+ --f7-tabbar-link-active-border-color: var(--f7-md-primary);
2229
+ --f7-tabbar-link-inactive-color: var(--f7-md-on-surface-variant);
2230
+ --f7-tabbar-link-active-icon-bg-color: var(--f7-md-secondary-container);
2869
2231
  }
2870
2232
  .toolbar {
2871
2233
  width: 100%;
@@ -2878,7 +2240,6 @@ html.device-full-viewport body {
2878
2240
  box-sizing: border-box;
2879
2241
  left: 0;
2880
2242
  height: var(--f7-toolbar-height);
2881
- background-image: var(--f7-toolbar-bg-image, var(--f7-bars-bg-image));
2882
2243
  background-color: var(--f7-toolbar-bg-color, var(--f7-bars-bg-color));
2883
2244
  color: var(--f7-toolbar-text-color, var(--f7-bars-text-color));
2884
2245
  font-size: var(--f7-toolbar-font-size);
@@ -2905,6 +2266,7 @@ html.device-full-viewport body {
2905
2266
  display: flex;
2906
2267
  line-height: var(--f7-toolbar-link-line-height, var(--f7-toolbar-height));
2907
2268
  height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
2269
+ font-weight: var(--f7-toolbar-link-font-weight);
2908
2270
  }
2909
2271
  .toolbar i.icon {
2910
2272
  display: block;
@@ -2921,51 +2283,36 @@ html.device-full-viewport body {
2921
2283
  }
2922
2284
  .toolbar-top,
2923
2285
  .ios .toolbar-top-ios,
2924
- .md .toolbar-top-md,
2925
- .aurora .toolbar-top-aurora {
2286
+ .md .toolbar-top-md {
2926
2287
  top: 0;
2927
2288
  }
2928
2289
  .toolbar-top .tab-link-highlight,
2929
2290
  .ios .toolbar-top-ios .tab-link-highlight,
2930
- .md .toolbar-top-md .tab-link-highlight,
2931
- .aurora .toolbar-top-aurora .tab-link-highlight {
2291
+ .md .toolbar-top-md .tab-link-highlight {
2932
2292
  bottom: 0;
2933
2293
  }
2934
- .toolbar-top.no-hairline:after,
2935
- .ios .toolbar-top-ios.no-hairline:after,
2936
- .md .toolbar-top-md.no-hairline:after,
2937
- .aurora .toolbar-top-aurora.no-hairline:after,
2938
- .toolbar-top.no-border:after,
2939
- .ios .toolbar-top-ios.no-border:after,
2940
- .md .toolbar-top-md.no-border:after,
2941
- .aurora .toolbar-top-aurora.no-border:after {
2294
+ .toolbar-top.no-outline:after,
2295
+ .ios .toolbar-top-ios.no-outline:after,
2296
+ .md .toolbar-top-md.no-outline:after {
2942
2297
  display: none !important;
2943
2298
  }
2944
- .toolbar-top.no-shadow:before,
2945
- .ios .toolbar-top-ios.no-shadow:before,
2946
- .md .toolbar-top-md.no-shadow:before,
2947
- .aurora .toolbar-top-aurora.no-shadow:before,
2948
2299
  .toolbar-top.toolbar-hidden:before,
2949
2300
  .ios .toolbar-top-ios.toolbar-hidden:before,
2950
- .md .toolbar-top-md.toolbar-hidden:before,
2951
- .aurora .toolbar-top-aurora.toolbar-hidden:before {
2301
+ .md .toolbar-top-md.toolbar-hidden:before {
2952
2302
  display: none !important;
2953
2303
  }
2954
2304
  .toolbar-top:after,
2955
2305
  .ios .toolbar-top-ios:after,
2956
2306
  .md .toolbar-top-md:after,
2957
- .aurora .toolbar-top-aurora:after,
2958
2307
  .toolbar-top:before,
2959
2308
  .ios .toolbar-top-ios:before,
2960
- .md .toolbar-top-md:before,
2961
- .aurora .toolbar-top-aurora:before {
2309
+ .md .toolbar-top-md:before {
2962
2310
  -webkit-backface-visibility: hidden;
2963
2311
  backface-visibility: hidden;
2964
2312
  }
2965
2313
  .toolbar-top:after,
2966
2314
  .ios .toolbar-top-ios:after,
2967
- .md .toolbar-top-md:after,
2968
- .aurora .toolbar-top-aurora:after {
2315
+ .md .toolbar-top-md:after {
2969
2316
  content: '';
2970
2317
  position: absolute;
2971
2318
  background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
@@ -2980,65 +2327,37 @@ html.device-full-viewport body {
2980
2327
  transform-origin: 50% 100%;
2981
2328
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
2982
2329
  }
2983
- .toolbar-top:before,
2984
- .ios .toolbar-top-ios:before,
2985
- .md .toolbar-top-md:before,
2986
- .aurora .toolbar-top-aurora:before {
2987
- content: '';
2988
- position: absolute;
2989
- right: 0;
2990
- width: 100%;
2991
- top: 100%;
2992
- bottom: auto;
2993
- height: 8px;
2994
- pointer-events: none;
2995
- background: var(--f7-toolbar-top-shadow-image);
2996
- }
2997
2330
  .toolbar-bottom,
2998
2331
  .ios .toolbar-bottom-ios,
2999
- .md .toolbar-bottom-md,
3000
- .aurora .toolbar-bottom-aurora {
2332
+ .md .toolbar-bottom-md {
3001
2333
  bottom: 0;
3002
2334
  height: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
3003
2335
  }
3004
2336
  .toolbar-bottom .tab-link-highlight,
3005
2337
  .ios .toolbar-bottom-ios .tab-link-highlight,
3006
- .md .toolbar-bottom-md .tab-link-highlight,
3007
- .aurora .toolbar-bottom-aurora .tab-link-highlight {
2338
+ .md .toolbar-bottom-md .tab-link-highlight {
3008
2339
  top: 0;
3009
2340
  }
3010
2341
  .toolbar-bottom .toolbar-inner,
3011
2342
  .ios .toolbar-bottom-ios .toolbar-inner,
3012
- .md .toolbar-bottom-md .toolbar-inner,
3013
- .aurora .toolbar-bottom-aurora .toolbar-inner {
2343
+ .md .toolbar-bottom-md .toolbar-inner {
3014
2344
  height: auto;
3015
2345
  top: 0;
3016
2346
  bottom: var(--f7-safe-area-bottom);
3017
2347
  }
3018
- .toolbar-bottom.no-hairline:before,
3019
- .ios .toolbar-bottom-ios.no-hairline:before,
3020
- .md .toolbar-bottom-md.no-hairline:before,
3021
- .aurora .toolbar-bottom-aurora.no-hairline:before,
3022
- .toolbar-bottom.no-border:before,
3023
- .ios .toolbar-bottom-ios.no-border:before,
3024
- .md .toolbar-bottom-md.no-border:before,
3025
- .aurora .toolbar-bottom-aurora.no-border:before {
2348
+ .toolbar-bottom.no-outline:before,
2349
+ .ios .toolbar-bottom-ios.no-outline:before,
2350
+ .md .toolbar-bottom-md.no-outline:before {
3026
2351
  display: none !important;
3027
2352
  }
3028
- .toolbar-bottom.no-shadow:after,
3029
- .ios .toolbar-bottom-ios.no-shadow:after,
3030
- .md .toolbar-bottom-md.no-shadow:after,
3031
- .aurora .toolbar-bottom-aurora.no-shadow:after,
3032
2353
  .toolbar-bottom.toolbar-hidden:after,
3033
2354
  .ios .toolbar-bottom-ios.toolbar-hidden:after,
3034
- .md .toolbar-bottom-md.toolbar-hidden:after,
3035
- .aurora .toolbar-bottom-aurora.toolbar-hidden:after {
2355
+ .md .toolbar-bottom-md.toolbar-hidden:after {
3036
2356
  display: none !important;
3037
2357
  }
3038
2358
  .toolbar-bottom:before,
3039
2359
  .ios .toolbar-bottom-ios:before,
3040
- .md .toolbar-bottom-md:before,
3041
- .aurora .toolbar-bottom-aurora:before {
2360
+ .md .toolbar-bottom-md:before {
3042
2361
  content: '';
3043
2362
  position: absolute;
3044
2363
  background-color: var(--f7-toolbar-border-color, var(--f7-bars-border-color));
@@ -3053,21 +2372,6 @@ html.device-full-viewport body {
3053
2372
  transform-origin: 50% 0%;
3054
2373
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3055
2374
  }
3056
- .toolbar-bottom:after,
3057
- .ios .toolbar-bottom-ios:after,
3058
- .md .toolbar-bottom-md:after,
3059
- .aurora .toolbar-bottom-aurora:after {
3060
- content: '';
3061
- position: absolute;
3062
- right: 0;
3063
- width: 100%;
3064
- bottom: 100%;
3065
- height: 8px;
3066
- top: auto;
3067
- pointer-events: none;
3068
- background: var(--f7-toolbar-bottom-shadow-image);
3069
- transform: translate3d(0, 0, 0);
3070
- }
3071
2375
  .toolbar-inner {
3072
2376
  position: absolute;
3073
2377
  left: 0;
@@ -3083,21 +2387,21 @@ html.device-full-viewport body {
3083
2387
  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));
3084
2388
  }
3085
2389
  .views > .tabbar,
3086
- .views > .tabbar-labels {
2390
+ .views > .tabbar-icons {
3087
2391
  z-index: 5001;
3088
2392
  }
3089
2393
  .tabbar a,
3090
- .tabbar-labels a {
2394
+ .tabbar-icons a {
3091
2395
  color: var(--f7-tabbar-link-inactive-color);
3092
2396
  }
3093
2397
  .tabbar .link,
3094
- .tabbar-labels .link {
2398
+ .tabbar-icons .link {
3095
2399
  line-height: 1.4;
3096
2400
  }
3097
2401
  .tabbar .tab-link,
3098
- .tabbar-labels .tab-link,
2402
+ .tabbar-icons .tab-link,
3099
2403
  .tabbar .link,
3100
- .tabbar-labels .link {
2404
+ .tabbar-icons .link {
3101
2405
  height: 100%;
3102
2406
  width: 100%;
3103
2407
  box-sizing: border-box;
@@ -3111,18 +2415,22 @@ html.device-full-viewport body {
3111
2415
  overflow: hidden;
3112
2416
  }
3113
2417
  .tabbar .tab-link-active,
3114
- .tabbar-labels .tab-link-active {
2418
+ .tabbar-icons .tab-link-active {
3115
2419
  color: var(--f7-tabbar-link-active-color, var(--f7-theme-color));
3116
2420
  background-color: var(--f7-tabbar-link-active-bg-color, transparent);
3117
2421
  }
3118
2422
  .tabbar i.icon,
3119
- .tabbar-labels i.icon {
2423
+ .tabbar-icons i.icon {
3120
2424
  font-size: var(--f7-tabbar-icon-size);
3121
2425
  height: var(--f7-tabbar-icon-size);
3122
2426
  line-height: var(--f7-tabbar-icon-size);
3123
2427
  }
3124
- .tabbar .tab-link-highlight,
3125
- .tabbar-labels .tab-link-highlight {
2428
+ .md .tabbar.tabbar-icons .tab-link-highlight,
2429
+ .md .tabbar-icons.tabbar-icons .tab-link-highlight {
2430
+ display: none;
2431
+ }
2432
+ .md .tabbar:not(.tabbar-icons) .tab-link-highlight,
2433
+ .md .tabbar-icons:not(.tabbar-icons) .tab-link-highlight {
3126
2434
  position: absolute;
3127
2435
  left: 0;
3128
2436
  height: 2px;
@@ -3130,16 +2438,16 @@ html.device-full-viewport body {
3130
2438
  transition-duration: 300ms;
3131
2439
  right: 0;
3132
2440
  }
3133
- .tabbar-labels {
3134
- --f7-toolbar-height: var(--f7-tabbar-labels-height);
2441
+ .tabbar-icons {
2442
+ --f7-toolbar-height: var(--f7-tabbar-icons-height);
3135
2443
  }
3136
- .tabbar-labels .tab-link,
3137
- .tabbar-labels .link {
2444
+ .tabbar-icons .tab-link,
2445
+ .tabbar-icons .link {
3138
2446
  height: 100%;
3139
- justify-content: space-between;
2447
+ justify-content: center;
3140
2448
  align-items: center;
3141
2449
  }
3142
- .tabbar-labels .tabbar-label {
2450
+ .tabbar-icons .tabbar-label {
3143
2451
  display: block;
3144
2452
  line-height: 1;
3145
2453
  margin: 0;
@@ -3153,7 +2461,7 @@ html.device-full-viewport body {
3153
2461
  }
3154
2462
  @media (min-width: 768px) and (min-height: 600px) {
3155
2463
  :root {
3156
- --f7-tabbar-labels-height: var(--f7-tabbar-labels-tablet-height);
2464
+ --f7-tabbar-icons-height: var(--f7-tabbar-icons-tablet-height);
3157
2465
  --f7-tabbar-label-font-size: var(--f7-tabbar-label-tablet-font-size);
3158
2466
  }
3159
2467
  }
@@ -3181,38 +2489,32 @@ html.device-full-viewport body {
3181
2489
  }
3182
2490
  .toolbar-bottom ~ *,
3183
2491
  .ios .toolbar-bottom-ios ~ *,
3184
- .md .toolbar-bottom-md ~ *,
3185
- .aurora .toolbar-bottom-aurora ~ * {
2492
+ .md .toolbar-bottom-md ~ * {
3186
2493
  --f7-page-toolbar-bottom-offset: var(--f7-toolbar-height);
3187
2494
  }
3188
- .toolbar-bottom.tabbar-labels ~ *,
3189
- .ios .toolbar-bottom-ios.tabbar-labels ~ *,
3190
- .md .toolbar-bottom-md.tabbar-labels ~ *,
3191
- .aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
3192
- --f7-page-toolbar-bottom-offset: var(--f7-tabbar-labels-height);
2495
+ .toolbar-bottom.tabbar-icons ~ *,
2496
+ .ios .toolbar-bottom-ios.tabbar-icons ~ *,
2497
+ .md .toolbar-bottom-md.tabbar-icons ~ * {
2498
+ --f7-page-toolbar-bottom-offset: var(--f7-tabbar-icons-height);
3193
2499
  }
3194
2500
  .toolbar-bottom.toolbar-hidden,
3195
2501
  .ios .toolbar-bottom-ios.toolbar-hidden,
3196
- .md .toolbar-bottom-md.toolbar-hidden,
3197
- .aurora .toolbar-bottom-aurora.toolbar-hidden {
2502
+ .md .toolbar-bottom-md.toolbar-hidden {
3198
2503
  transform: translate3d(0, 100%, 0);
3199
2504
  }
3200
2505
  .toolbar-top ~ *,
3201
2506
  .ios .toolbar-top-ios ~ *,
3202
- .md .toolbar-top-md ~ *,
3203
- .aurora .toolbar-top-aurora ~ * {
2507
+ .md .toolbar-top-md ~ * {
3204
2508
  --f7-page-toolbar-top-offset: var(--f7-toolbar-height);
3205
2509
  }
3206
- .toolbar-top.tabbar-labels ~ *,
3207
- .ios .toolbar-top-ios.tabbar-labels ~ *,
3208
- .md .toolbar-top-md.tabbar-labels ~ *,
3209
- .aurora .toolbar-top-aurora.tabbar-labels ~ * {
3210
- --f7-page-toolbar-top-offset: var(--f7-tabbar-labels-height);
2510
+ .toolbar-top.tabbar-icons ~ *,
2511
+ .ios .toolbar-top-ios.tabbar-icons ~ *,
2512
+ .md .toolbar-top-md.tabbar-icons ~ * {
2513
+ --f7-page-toolbar-top-offset: var(--f7-tabbar-icons-height);
3211
2514
  }
3212
2515
  .toolbar-top.toolbar-hidden,
3213
2516
  .ios .toolbar-top-ios.toolbar-hidden,
3214
- .md .toolbar-top-md.toolbar-hidden,
3215
- .aurora .toolbar-top-aurora.toolbar-hidden {
2517
+ .md .toolbar-top-md.toolbar-hidden {
3216
2518
  transform: translate3d(0, -100%, 0);
3217
2519
  }
3218
2520
  .navbar ~ .toolbar-top,
@@ -3220,19 +2522,16 @@ html.device-full-viewport body {
3220
2522
  .ios .navbar ~ .toolbar-top-ios,
3221
2523
  .ios .navbars ~ .toolbar-top-ios,
3222
2524
  .md .navbar ~ .toolbar-top-md,
3223
- .aurora .navbar ~ .toolbar-top-aurora,
3224
2525
  .navbar ~ * .toolbar-top,
3225
2526
  .navbars ~ * .toolbar-top,
3226
2527
  .ios .navbar ~ * .toolbar-top-ios,
3227
2528
  .ios .navbars ~ * .toolbar-top-ios,
3228
2529
  .md .navbar ~ * .toolbar-top-md,
3229
- .aurora .navbar ~ * .toolbar-top-aurora,
3230
2530
  .navbar ~ .page:not(.no-navbar) .toolbar-top,
3231
2531
  .navbars ~ .page:not(.no-navbar) .toolbar-top,
3232
2532
  .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
3233
2533
  .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
3234
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
3235
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
2534
+ .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md {
3236
2535
  top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
3237
2536
  }
3238
2537
  .navbar ~ .toolbar-top.toolbar-hidden,
@@ -3240,49 +2539,41 @@ html.device-full-viewport body {
3240
2539
  .ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
3241
2540
  .ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
3242
2541
  .md .navbar ~ .toolbar-top-md.toolbar-hidden,
3243
- .aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
3244
2542
  .navbar ~ * .toolbar-top.toolbar-hidden,
3245
2543
  .navbars ~ * .toolbar-top.toolbar-hidden,
3246
2544
  .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
3247
2545
  .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
3248
2546
  .md .navbar ~ * .toolbar-top-md.toolbar-hidden,
3249
- .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
3250
2547
  .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
3251
2548
  .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
3252
2549
  .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
3253
2550
  .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
3254
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
3255
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
2551
+ .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden {
3256
2552
  transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))), 0);
3257
2553
  }
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 ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
3265
- .navbars ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
3266
- .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3267
- .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3268
- .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
3269
- .aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
3270
- .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
3271
- .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
3272
- .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3273
- .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
3274
- .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
3275
- .aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
3276
- transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-labels-height) + var(--f7-safe-area-top))), 0);
2554
+ .navbar ~ .toolbar-top.toolbar-hidden.tabbar-icons,
2555
+ .navbars ~ .toolbar-top.toolbar-hidden.tabbar-icons,
2556
+ .ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2557
+ .ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2558
+ .md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-icons,
2559
+ .navbar ~ * .toolbar-top.toolbar-hidden.tabbar-icons,
2560
+ .navbars ~ * .toolbar-top.toolbar-hidden.tabbar-icons,
2561
+ .ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2562
+ .ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2563
+ .md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-icons,
2564
+ .navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
2565
+ .navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-icons,
2566
+ .ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2567
+ .ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-icons,
2568
+ .md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-icons {
2569
+ transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))), 0);
3277
2570
  }
3278
2571
  .navbar-hidden + .toolbar-top:not(.toolbar-hidden),
3279
2572
  .ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
3280
2573
  .md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
3281
- .aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
3282
2574
  .navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
3283
2575
  .ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
3284
- .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
3285
- .aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2576
+ .md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
3286
2577
  transform: translate3d(0, calc(0px - var(--f7-navbar-height)), 0);
3287
2578
  }
3288
2579
  .navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
@@ -3290,8 +2581,7 @@ html.device-full-viewport body {
3290
2581
  .md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
3291
2582
  .navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
3292
2583
  .ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
3293
- .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
3294
- .aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
2584
+ .md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden) {
3295
2585
  transform: translate3d(0, calc(0px - var(--f7-navbar-height) - var(--f7-navbar-large-title-height)), 0);
3296
2586
  }
3297
2587
  .ios .toolbar a.icon-only {
@@ -3302,27 +2592,27 @@ html.device-full-viewport body {
3302
2592
  margin: 0;
3303
2593
  min-width: 44px;
3304
2594
  }
3305
- .ios .tabbar-labels .tab-link,
3306
- .ios .tabbar-labels .link {
2595
+ .ios .tabbar-icons .tab-link,
2596
+ .ios .tabbar-icons .link {
3307
2597
  padding-top: 4px;
3308
2598
  padding-bottom: 4px;
3309
2599
  }
3310
- .ios .tabbar-labels .tab-link i + span,
3311
- .ios .tabbar-labels .link i + span {
2600
+ .ios .tabbar-icons .tab-link i + span,
2601
+ .ios .tabbar-icons .link i + span {
3312
2602
  margin: 0;
3313
2603
  }
3314
2604
  @media (min-width: 768px) and (min-height: 600px) {
3315
2605
  .ios .tabbar .tab-link,
3316
- .ios .tabbar-labels .tab-link,
2606
+ .ios .tabbar-icons .tab-link,
3317
2607
  .ios .tabbar .link,
3318
- .ios .tabbar-labels .link {
2608
+ .ios .tabbar-icons .link {
3319
2609
  justify-content: center;
3320
2610
  flex-direction: row;
3321
2611
  }
3322
2612
  .ios .tabbar .tab-link i + span,
3323
- .ios .tabbar-labels .tab-link i + span,
2613
+ .ios .tabbar-icons .tab-link i + span,
3324
2614
  .ios .tabbar .link i + span,
3325
- .ios .tabbar-labels .link i + span {
2615
+ .ios .tabbar-icons .link i + span {
3326
2616
  margin-left: 5px;
3327
2617
  }
3328
2618
  }
@@ -3374,26 +2664,54 @@ html.device-full-viewport body {
3374
2664
  flex-shrink: 0;
3375
2665
  }
3376
2666
  .md .tabbar .tab-link,
3377
- .md .tabbar-labels .tab-link,
2667
+ .md .tabbar-icons .tab-link,
3378
2668
  .md .tabbar .link,
3379
- .md .tabbar-labels .link {
2669
+ .md .tabbar-icons .link {
3380
2670
  padding-left: 0;
3381
2671
  padding-right: 0;
3382
2672
  }
3383
2673
  .md .tabbar a.icon-only,
3384
- .md .tabbar-labels a.icon-only {
2674
+ .md .tabbar-icons a.icon-only {
3385
2675
  flex-shrink: initial;
3386
2676
  }
3387
2677
  .md .tabbar .tab-link,
3388
- .md .tabbar-labels .tab-link {
2678
+ .md .tabbar-icons .tab-link {
3389
2679
  transition-duration: 300ms;
3390
2680
  overflow: hidden;
3391
2681
  position: relative;
3392
2682
  }
3393
- .md .tabbar-labels .tab-link,
3394
- .md .tabbar-labels .link {
3395
- padding-top: 7px;
3396
- padding-bottom: 7px;
2683
+ .md .tabbar i.icon,
2684
+ .md .tabbar-icons i.icon {
2685
+ position: relative;
2686
+ }
2687
+ .md .tabbar i.icon::before,
2688
+ .md .tabbar-icons i.icon::before {
2689
+ content: '';
2690
+ width: 64px;
2691
+ height: 32px;
2692
+ border-radius: 32px;
2693
+ position: absolute;
2694
+ left: 50%;
2695
+ top: 50%;
2696
+ transform: translateX(-50%) translateY(-50%) scaleX(0.5);
2697
+ background: var(--f7-tabbar-link-active-icon-bg-color);
2698
+ opacity: 0;
2699
+ transition-duration: 200ms;
2700
+ z-index: -1;
2701
+ }
2702
+ .md .tabbar i.icon + .tabbar-label,
2703
+ .md .tabbar-icons i.icon + .tabbar-label {
2704
+ margin-top: 8px;
2705
+ }
2706
+ .md .tabbar .tab-link-active i.icon::before,
2707
+ .md .tabbar-icons .tab-link-active i.icon::before {
2708
+ opacity: 1;
2709
+ transform: translateX(-50%) translateY(-50%) scaleX(1);
2710
+ }
2711
+ .md .tabbar-icons .tab-link,
2712
+ .md .tabbar-icons .link {
2713
+ padding-top: 8px;
2714
+ padding-bottom: 8px;
3397
2715
  }
3398
2716
  .md .tabbar-label {
3399
2717
  max-width: 100%;
@@ -3407,44 +2725,9 @@ html.device-full-viewport body {
3407
2725
  .md .tabbar-scrollable .link {
3408
2726
  padding: 0 12px;
3409
2727
  }
3410
- .aurora .toolbar a.icon-only {
3411
- min-height: var(--f7-toolbar-height);
3412
- display: flex;
3413
- justify-content: center;
3414
- align-items: center;
3415
- margin: 0;
3416
- }
3417
- .aurora .tabbar .toolbar-inner,
3418
- .aurora .tabbar-labels .toolbar-inner {
3419
- padding-left: 0;
3420
- padding-right: 0;
3421
- }
3422
- .aurora .tabbar .tab-link,
3423
- .aurora .tabbar-labels .tab-link,
3424
- .aurora .tabbar .link,
3425
- .aurora .tabbar-labels .link {
3426
- transition-duration: 200ms;
3427
- }
3428
- .aurora .tabbar-labels .tab-link,
3429
- .aurora .tabbar-labels .link {
3430
- padding-top: 5px;
3431
- padding-bottom: 5px;
3432
- }
3433
- .aurora .tabbar-labels .tab-link i + span,
3434
- .aurora .tabbar-labels .link i + span {
3435
- margin: 0;
3436
- }
3437
- .aurora .tabbar-scrollable .toolbar-inner {
3438
- justify-content: flex-start;
3439
- }
3440
- .aurora .tabbar-scrollable .tab-link,
3441
- .aurora .tabbar-scrollable .link {
3442
- padding: 0 16px;
3443
- }
3444
2728
  /* === Subnavbar === */
3445
2729
  :root {
3446
2730
  /*
3447
- --f7-subnavbar-bg-image: var(--f7-bars-bg-image);
3448
2731
  --f7-subnavbar-bg-color: var(--f7-bars-bg-color);
3449
2732
  --f7-subnavbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
3450
2733
  --f7-subnavbar-border-color: var(--f7-bars-border-color);
@@ -3461,38 +2744,24 @@ html.device-full-viewport body {
3461
2744
  --f7-subnavbar-title-font-weight: 700;
3462
2745
  --f7-subnavbar-title-letter-spacing: -0.03em;
3463
2746
  --f7-subnavbar-title-margin-left: 8px;
3464
- --f7-subnavbar-shadow-image: none;
3465
2747
  /*
3466
2748
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
3467
2749
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
3468
2750
  */
3469
2751
  }
3470
2752
  .md {
3471
- --f7-subnavbar-height: 48px;
2753
+ --f7-subnavbar-height: 64px;
3472
2754
  --f7-subnavbar-inner-padding-left: 16px;
3473
2755
  --f7-subnavbar-inner-padding-right: 16px;
3474
- --f7-subnavbar-title-font-size: 20px;
3475
- --f7-subnavbar-title-font-weight: 500;
2756
+ --f7-subnavbar-title-font-size: 22px;
2757
+ --f7-subnavbar-title-font-weight: 400;
3476
2758
  --f7-subnavbar-title-letter-spacing: 0;
3477
2759
  --f7-subnavbar-title-margin-left: 0px;
3478
- --f7-subnavbar-shadow-image: var(--f7-bars-shadow-bottom-image);
3479
2760
  /*
3480
2761
  --f7-subnavbar-link-height: var(--f7-subnavbar-height);
3481
2762
  --f7-subnavbar-link-line-height: var(--f7-subnavbar-height);
3482
2763
  */
3483
2764
  }
3484
- .aurora {
3485
- --f7-subnavbar-height: 48px;
3486
- --f7-subnavbar-inner-padding-left: 16px;
3487
- --f7-subnavbar-inner-padding-right: 16px;
3488
- --f7-subnavbar-title-font-size: 28px;
3489
- --f7-subnavbar-title-font-weight: bold;
3490
- --f7-subnavbar-title-letter-spacing: 0em;
3491
- --f7-subnavbar-title-margin-left: 0px;
3492
- --f7-subnavbar-shadow-image: none;
3493
- --f7-subnavbar-link-height: auto;
3494
- --f7-subnavbar-link-line-height: inherit;
3495
- }
3496
2765
  .subnavbar {
3497
2766
  width: 100%;
3498
2767
  position: absolute;
@@ -3503,7 +2772,6 @@ html.device-full-viewport body {
3503
2772
  display: flex;
3504
2773
  justify-content: space-between;
3505
2774
  align-items: center;
3506
- background-image: var(--f7-subnavbar-bg-image, var(--f7-bars-bg-image));
3507
2775
  background-color: var(--f7-subnavbar-bg-color, var(--f7-bars-bg-color));
3508
2776
  color: var(--f7-subnavbar-text-color, var(--f7-bars-text-color));
3509
2777
  }
@@ -3548,11 +2816,9 @@ html.device-full-viewport body {
3548
2816
  .subnavbar a.icon-only {
3549
2817
  min-width: var(--f7-subnavbar-height);
3550
2818
  }
3551
- .subnavbar.no-hairline:after,
3552
- .subnavbar.no-border:after {
2819
+ .subnavbar.no-outline:after {
3553
2820
  display: none !important;
3554
2821
  }
3555
- .subnavbar.no-shadow:before,
3556
2822
  .subnavbar.navbar-hidden:before {
3557
2823
  display: none !important;
3558
2824
  }
@@ -3576,17 +2842,6 @@ html.device-full-viewport body {
3576
2842
  transform-origin: 50% 100%;
3577
2843
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3578
2844
  }
3579
- .subnavbar:before {
3580
- content: '';
3581
- position: absolute;
3582
- right: 0;
3583
- width: 100%;
3584
- top: 100%;
3585
- bottom: auto;
3586
- height: 8px;
3587
- pointer-events: none;
3588
- background: var(--f7-subnavbar-shadow-image);
3589
- }
3590
2845
  .subnavbar-inner {
3591
2846
  width: 100%;
3592
2847
  height: 100%;
@@ -3597,9 +2852,6 @@ html.device-full-viewport body {
3597
2852
  overflow: hidden;
3598
2853
  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));
3599
2854
  }
3600
- .subnavbar-inner.stacked {
3601
- display: none;
3602
- }
3603
2855
  .navbar .subnavbar {
3604
2856
  top: 100%;
3605
2857
  }
@@ -3713,41 +2965,11 @@ html.device-full-viewport body {
3713
2965
  .md .subnavbar-inner > a.link:last-child {
3714
2966
  margin-left: calc(-1 * var(--f7-subnavbar-inner-padding-left));
3715
2967
  }
3716
- .aurora .subnavbar {
3717
- height: calc(var(--f7-subnavbar-height) + 1px);
3718
- margin-top: -1px;
3719
- padding-top: 1px;
3720
- }
3721
- .aurora .subnavbar .title {
3722
- align-self: flex-start;
3723
- flex-shrink: 10;
3724
- }
3725
- .aurora .subnavbar .left a + a,
3726
- .aurora .subnavbar .right a + a {
3727
- margin-right: 10px;
3728
- }
3729
- .aurora .subnavbar .left {
3730
- margin-left: 16px;
3731
- }
3732
- .aurora .subnavbar .right {
3733
- margin-right: 16px;
3734
- }
3735
- .aurora .subnavbar .right:first-child {
3736
- left: 16px;
3737
- }
3738
- .aurora .subnavbar a.link {
3739
- justify-content: flex-start;
3740
- }
3741
- .aurora .subnavbar a.icon-only {
3742
- justify-content: center;
3743
- margin: 0;
3744
- }
3745
2968
  /* === Content Block === */
3746
2969
  :root {
3747
2970
  --f7-block-padding-horizontal: 16px;
3748
2971
  --f7-block-padding-vertical: 16px;
3749
2972
  --f7-block-font-size: inherit;
3750
- --f7-block-text-color: inherit;
3751
2973
  --f7-block-header-margin: 10px;
3752
2974
  --f7-block-footer-margin: 10px;
3753
2975
  --f7-block-header-font-size: 14px;
@@ -3757,22 +2979,15 @@ html.device-full-viewport body {
3757
2979
  --f7-block-title-medium-text-transform: none;
3758
2980
  --f7-block-title-large-text-transform: none;
3759
2981
  --f7-block-inset-side-margin: 16px;
3760
- --f7-block-title-medium-text-color: #000;
3761
- --f7-block-title-large-text-color: #000;
3762
- --f7-block-strong-bg-color: #fff;
3763
2982
  }
3764
2983
  :root .dark,
3765
2984
  :root.dark {
3766
- --f7-block-title-text-color: #fff;
3767
- --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
3768
- --f7-block-title-medium-text-color: #fff;
3769
- --f7-block-title-large-text-color: #fff;
3770
- --f7-block-strong-bg-color: #1c1c1d;
2985
+ --f7-block-outline-border-color: rgba(255, 255, 255, 0.15);
3771
2986
  }
3772
2987
  .ios {
2988
+ --f7-block-text-color: inherit;
3773
2989
  --f7-block-margin-vertical: 35px;
3774
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.22);
3775
- --f7-block-title-text-color: #000;
2990
+ --f7-block-outline-border-color: rgba(0, 0, 0, 0.22);
3776
2991
  --f7-block-title-font-size: 16px;
3777
2992
  --f7-block-title-font-weight: 600;
3778
2993
  --f7-block-title-line-height: 20px;
@@ -3784,64 +2999,50 @@ html.device-full-viewport body {
3784
2999
  --f7-block-title-large-font-weight: bold;
3785
3000
  --f7-block-title-large-line-height: 1.3;
3786
3001
  --f7-block-inset-border-radius: 8px;
3002
+ --f7-block-title-text-color: #000;
3787
3003
  --f7-block-strong-text-color: #000;
3788
3004
  --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
3789
3005
  --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
3006
+ --f7-block-strong-bg-color: #fff;
3007
+ --f7-block-title-medium-text-color: #000;
3008
+ --f7-block-title-large-text-color: #000;
3790
3009
  }
3791
3010
  .ios .dark,
3792
3011
  .ios.dark {
3012
+ --f7-block-title-text-color: #fff;
3793
3013
  --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
3794
3014
  --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
3795
3015
  --f7-block-strong-text-color: #fff;
3016
+ --f7-block-strong-bg-color: #1c1c1d;
3017
+ --f7-block-title-medium-text-color: #fff;
3018
+ --f7-block-title-large-text-color: #fff;
3796
3019
  }
3797
3020
  .md {
3798
3021
  --f7-block-margin-vertical: 32px;
3799
- --f7-block-strong-text-color: inherit;
3800
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3801
3022
  --f7-block-title-font-size: inherit;
3802
- --f7-block-title-text-color: rgba(0, 0, 0, 0.54);
3803
3023
  --f7-block-title-font-weight: 500;
3804
3024
  --f7-block-title-line-height: 16px;
3805
3025
  --f7-block-title-margin-bottom: 16px;
3806
- --f7-block-title-medium-font-size: 24px;
3026
+ --f7-block-title-medium-font-size: 16px;
3807
3027
  --f7-block-title-medium-font-weight: 500;
3808
3028
  --f7-block-title-medium-line-height: 1.3;
3809
- --f7-block-title-large-font-size: 34px;
3029
+ --f7-block-title-large-font-size: 22px;
3810
3030
  --f7-block-title-large-font-weight: 500;
3811
3031
  --f7-block-title-large-line-height: 1.2;
3812
- --f7-block-inset-border-radius: 4px;
3813
- --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
3814
- --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
3032
+ --f7-block-inset-border-radius: 16px;
3815
3033
  }
3034
+ .md,
3816
3035
  .md .dark,
3817
- .md.dark {
3818
- --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3819
- --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3820
- }
3821
- .aurora {
3822
- --f7-block-margin-vertical: 32px;
3823
- --f7-block-strong-border-color: rgba(0, 0, 0, 0.12);
3824
- --f7-block-title-font-size: 16px;
3825
- --f7-block-title-text-color: #000;
3826
- --f7-block-title-font-weight: 600;
3827
- --f7-block-title-line-height: 1.5;
3828
- --f7-block-title-margin-bottom: 10px;
3829
- --f7-block-title-medium-font-size: 22px;
3830
- --f7-block-title-medium-font-weight: bold;
3831
- --f7-block-title-medium-line-height: 1.4;
3832
- --f7-block-title-large-font-size: 28px;
3833
- --f7-block-title-large-font-weight: bold;
3834
- --f7-block-title-large-line-height: 1.3;
3835
- --f7-block-inset-border-radius: 8px;
3836
- --f7-block-strong-text-color: inherit;
3837
- --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
3838
- --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
3839
- }
3840
- .aurora .dark,
3841
- .aurora.dark {
3842
- --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
3843
- --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
3844
- --f7-block-strong-text-color: #fff;
3036
+ .md [class*='color-'] {
3037
+ --f7-block-text-color: var(--f7-md-on-surface);
3038
+ --f7-block-strong-text-color: var(--f7-md-on-surface);
3039
+ --f7-block-outline-border-color: var(--f7-md-outline);
3040
+ --f7-block-title-text-color: var(--f7-theme-color);
3041
+ --f7-block-title-medium-text-color: var(--f7-theme-color);
3042
+ --f7-block-title-large-text-color: var(--f7-theme-color);
3043
+ --f7-block-strong-bg-color: var(--f7-md-surface-1);
3044
+ --f7-block-header-text-color: var(--f7-md-on-surface-variant);
3045
+ --f7-block-footer-text-color: var(--f7-md-on-surface-variant);
3845
3046
  }
3846
3047
  .block {
3847
3048
  box-sizing: border-box;
@@ -3855,44 +3056,6 @@ html.device-full-viewport body {
3855
3056
  padding-right: calc(var(--f7-block-padding-horizontal) + var(--f7-safe-area-right));
3856
3057
  font-size: var(--f7-block-font-size);
3857
3058
  }
3858
- .block.no-hairlines:before,
3859
- .block.no-hairlines ul:before,
3860
- .md .block.no-hairlines-md:before,
3861
- .md .block.no-hairlines-md ul:before,
3862
- .ios .block.no-hairlines-ios:before,
3863
- .ios .block.no-hairlines-ios ul:before,
3864
- .aurora .block.no-hairlines-aurora:before,
3865
- .aurora .block.no-hairlines-aurora ul:before,
3866
- .block.no-hairlines:after,
3867
- .block.no-hairlines ul:after,
3868
- .md .block.no-hairlines-md:after,
3869
- .md .block.no-hairlines-md ul:after,
3870
- .ios .block.no-hairlines-ios:after,
3871
- .ios .block.no-hairlines-ios ul:after,
3872
- .aurora .block.no-hairlines-aurora:after,
3873
- .aurora .block.no-hairlines-aurora ul:after {
3874
- display: none !important;
3875
- }
3876
- .block.no-hairline-top:before,
3877
- .block.no-hairline-top ul:before,
3878
- .md .block.no-hairline-top-md:before,
3879
- .md .block.no-hairline-top-md ul:before,
3880
- .ios .block.no-hairline-top-ios:before,
3881
- .ios .block.no-hairline-top-ios ul:before,
3882
- .aurora .block.no-hairline-top-aurora:before,
3883
- .aurora .block.no-hairline-top-aurora ul:before {
3884
- display: none !important;
3885
- }
3886
- .block.no-hairline-bottom:after,
3887
- .block.no-hairline-bottom ul:after,
3888
- .md .block.no-hairline-bottom-md:after,
3889
- .md .block.no-hairline-bottom-md ul:after,
3890
- .ios .block.no-hairline-bottom-ios:after,
3891
- .ios .block.no-hairline-bottom-ios ul:after,
3892
- .aurora .block.no-hairline-bottom-aurora:after,
3893
- .aurora .block.no-hairline-bottom-aurora ul:after {
3894
- display: none !important;
3895
- }
3896
3059
  .block > h1:first-child,
3897
3060
  .block > h2:first-child,
3898
3061
  .block > h3:first-child,
@@ -3907,16 +3070,20 @@ html.device-full-viewport body {
3907
3070
  .block > p:last-child {
3908
3071
  margin-bottom: 0;
3909
3072
  }
3910
- .block-strong {
3073
+ .block-strong,
3074
+ .ios .block-strong-ios,
3075
+ .md .block-strong-md {
3911
3076
  color: var(--f7-block-strong-text-color);
3912
3077
  padding-top: var(--f7-block-padding-vertical);
3913
3078
  padding-bottom: var(--f7-block-padding-vertical);
3914
3079
  background-color: var(--f7-block-strong-bg-color);
3915
3080
  }
3916
- .block-strong:before {
3081
+ .block-outline:not(.inset):before,
3082
+ .ios .block-outline-ios:not(.inset):not(.inset-ios):before,
3083
+ .md .block-outline-md:not(.inset):not(.inset-md):before {
3917
3084
  content: '';
3918
3085
  position: absolute;
3919
- background-color: var(--f7-block-strong-border-color);
3086
+ background-color: var(--f7-block-outline-border-color);
3920
3087
  display: block;
3921
3088
  z-index: 15;
3922
3089
  top: 0;
@@ -3928,10 +3095,12 @@ html.device-full-viewport body {
3928
3095
  transform-origin: 50% 0%;
3929
3096
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3930
3097
  }
3931
- .block-strong:after {
3098
+ .block-outline:not(.inset):after,
3099
+ .ios .block-outline-ios:not(.inset):not(.inset-ios):after,
3100
+ .md .block-outline-md:not(.inset):not(.inset-md):after {
3932
3101
  content: '';
3933
3102
  position: absolute;
3934
- background-color: var(--f7-block-strong-border-color);
3103
+ background-color: var(--f7-block-outline-border-color);
3935
3104
  display: block;
3936
3105
  z-index: 15;
3937
3106
  top: auto;
@@ -3943,6 +3112,13 @@ html.device-full-viewport body {
3943
3112
  transform-origin: 50% 100%;
3944
3113
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
3945
3114
  }
3115
+ .block-outline.inset,
3116
+ .ios .block-outline-ios.inset,
3117
+ .ios .block-outline-ios.inset-ios,
3118
+ .md .block-outline-md.inset,
3119
+ .md .block-outline-md.inset-md {
3120
+ border: 1px solid var(--f7-block-outline-border-color);
3121
+ }
3946
3122
  .block-title {
3947
3123
  position: relative;
3948
3124
  overflow: hidden;
@@ -4080,7 +3256,9 @@ html.device-full-viewport body {
4080
3256
  .block .block-footer {
4081
3257
  padding: 0;
4082
3258
  }
4083
- .block.inset {
3259
+ .block.inset,
3260
+ .ios .block.inset-ios,
3261
+ .md .block.inset-md {
4084
3262
  border-radius: var(--f7-block-inset-border-radius);
4085
3263
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4086
3264
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
@@ -4088,78 +3266,154 @@ html.device-full-viewport body {
4088
3266
  --f7-safe-area-right: 0px;
4089
3267
  }
4090
3268
  .block-strong.inset:before,
4091
- .block-strong.inset:after {
3269
+ .ios .block-strong-ios.inset:before,
3270
+ .md .block-strong-md.inset:before,
3271
+ .ios .block-strong.inset-ios:before,
3272
+ .md .block-strong.inset-md:before,
3273
+ .ios .block-strong-ios.inset-ios:before,
3274
+ .md .block-strong-md.inset-md:before,
3275
+ .block-strong.inset:after,
3276
+ .ios .block-strong-ios.inset:after,
3277
+ .md .block-strong-md.inset:after,
3278
+ .ios .block-strong.inset-ios:after,
3279
+ .md .block-strong.inset-md:after,
3280
+ .ios .block-strong-ios.inset-ios:after,
3281
+ .md .block-strong-md.inset-md:after {
4092
3282
  display: none !important;
4093
3283
  }
4094
3284
  @media (min-width: 480px) {
4095
- .block.xsmall-inset {
3285
+ .block.xsmall-inset,
3286
+ .ios .block.xsmall-inset-ios,
3287
+ .md .block.xsmall-inset-md {
4096
3288
  border-radius: var(--f7-block-inset-border-radius);
4097
3289
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4098
3290
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4099
3291
  --f7-safe-area-left: 0px;
4100
3292
  --f7-safe-area-right: 0px;
4101
3293
  }
4102
- .block-strong.xsmall-inset:before,
4103
- .block-strong.xsmall-inset:after {
3294
+ .block.xsmall-inset:before,
3295
+ .ios .block.xsmall-inset-ios:before,
3296
+ .md .block.xsmall-inset-md:before,
3297
+ .block.xsmall-inset:after,
3298
+ .ios .block.xsmall-inset-ios:after,
3299
+ .md .block.xsmall-inset-md:after {
4104
3300
  display: none !important;
4105
3301
  }
3302
+ .block.xsmall-inset.block-outline,
3303
+ .ios .block.xsmall-inset-ios.block-outline,
3304
+ .ios .block.xsmall-inset-ios.block-outline-ios,
3305
+ .md .block.xsmall-inset-md.block-outline,
3306
+ .md .block.xsmall-inset-md.block-outline-md {
3307
+ border: 1px solid var(--f7-block-outline-border-color);
3308
+ }
4106
3309
  }
4107
3310
  @media (min-width: 568px) {
4108
- .block.small-inset {
3311
+ .block.small-inset,
3312
+ .ios .block.small-inset-ios,
3313
+ .md .block.small-inset-md {
4109
3314
  border-radius: var(--f7-block-inset-border-radius);
4110
3315
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4111
3316
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4112
3317
  --f7-safe-area-left: 0px;
4113
3318
  --f7-safe-area-right: 0px;
4114
3319
  }
4115
- .block-strong.small-inset:before,
4116
- .block-strong.small-inset:after {
3320
+ .block.small-inset:before,
3321
+ .ios .block.small-inset-ios:before,
3322
+ .md .block.small-inset-md:before,
3323
+ .block.small-inset:after,
3324
+ .ios .block.small-inset-ios:after,
3325
+ .md .block.small-inset-md:after {
4117
3326
  display: none !important;
4118
3327
  }
3328
+ .block.small-inset.block-outline,
3329
+ .ios .block.small-inset-ios.block-outline,
3330
+ .ios .block.small-inset-ios.block-outline-ios,
3331
+ .md .block.small-inset-md.block-outline,
3332
+ .md .block.small-inset-md.block-outline-md {
3333
+ border: 1px solid var(--f7-block-outline-border-color);
3334
+ }
4119
3335
  }
4120
3336
  @media (min-width: 768px) {
4121
- .block.medium-inset {
3337
+ .block.medium-inset,
3338
+ .ios .block.medium-inset-ios,
3339
+ .md .block.medium-inset-md {
4122
3340
  border-radius: var(--f7-block-inset-border-radius);
4123
3341
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4124
3342
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4125
3343
  --f7-safe-area-left: 0px;
4126
3344
  --f7-safe-area-right: 0px;
4127
3345
  }
4128
- .block-strong.medium-inset:before,
4129
- .block-strong.medium-inset:after {
3346
+ .block.medium-inset:before,
3347
+ .ios .block.medium-inset-ios:before,
3348
+ .md .block.medium-inset-md:before,
3349
+ .block.medium-inset:after,
3350
+ .ios .block.medium-inset-ios:after,
3351
+ .md .block.medium-inset-md:after {
4130
3352
  display: none !important;
4131
3353
  }
3354
+ .block.medium-inset.block-outline,
3355
+ .ios .block.medium-inset-ios.block-outline,
3356
+ .ios .block.medium-inset-ios.block-outline-ios,
3357
+ .md .block.medium-inset-md.block-outline,
3358
+ .md .block.medium-inset-md.block-outline-md {
3359
+ border: 1px solid var(--f7-block-outline-border-color);
3360
+ }
4132
3361
  }
4133
3362
  @media (min-width: 1024px) {
4134
- .block.large-inset {
3363
+ .block.large-inset,
3364
+ .ios .block.large-inset-ios,
3365
+ .md .block.large-inset-md {
4135
3366
  border-radius: var(--f7-block-inset-border-radius);
4136
3367
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4137
3368
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4138
3369
  --f7-safe-area-left: 0px;
4139
3370
  --f7-safe-area-right: 0px;
4140
3371
  }
4141
- .block-strong.large-inset:before,
4142
- .block-strong.large-inset:after {
3372
+ .block.large-inset:before,
3373
+ .ios .block.large-inset-ios:before,
3374
+ .md .block.large-inset-md:before,
3375
+ .block.large-inset:after,
3376
+ .ios .block.large-inset-ios:after,
3377
+ .md .block.large-inset-md:after {
4143
3378
  display: none !important;
4144
3379
  }
3380
+ .block.large-inset.block-outline,
3381
+ .ios .block.large-inset-ios.block-outline,
3382
+ .ios .block.large-inset-ios.block-outline-ios,
3383
+ .md .block.large-inset-md.block-outline,
3384
+ .md .block.large-inset-md.block-outline-md {
3385
+ border: 1px solid var(--f7-block-outline-border-color);
3386
+ }
4145
3387
  }
4146
3388
  @media (min-width: 1200px) {
4147
- .block.xlarge-inset {
3389
+ .block.xlarge-inset,
3390
+ .ios .block.xlarge-inset-ios,
3391
+ .md .block.xlarge-inset-md {
4148
3392
  border-radius: var(--f7-block-inset-border-radius);
4149
3393
  margin-left: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-left));
4150
3394
  margin-right: calc(var(--f7-block-inset-side-margin) + var(--f7-safe-area-outer-right));
4151
3395
  --f7-safe-area-left: 0px;
4152
3396
  --f7-safe-area-right: 0px;
4153
3397
  }
4154
- .block-strong.xlarge-inset:before,
4155
- .block-strong.xlarge-inset:after {
3398
+ .block.xlarge-inset:before,
3399
+ .ios .block.xlarge-inset-ios:before,
3400
+ .md .block.xlarge-inset-md:before,
3401
+ .block.xlarge-inset:after,
3402
+ .ios .block.xlarge-inset-ios:after,
3403
+ .md .block.xlarge-inset-md:after {
4156
3404
  display: none !important;
4157
3405
  }
3406
+ .block.xlarge-inset.block-outline,
3407
+ .ios .block.xlarge-inset-ios.block-outline,
3408
+ .ios .block.xlarge-inset-ios.block-outline-ios,
3409
+ .md .block.xlarge-inset-md.block-outline,
3410
+ .md .block.xlarge-inset-md.block-outline-md {
3411
+ border: 1px solid var(--f7-block-outline-border-color);
3412
+ }
4158
3413
  }
4159
3414
  /* === List View === */
4160
3415
  :root {
4161
3416
  --f7-list-inset-side-margin: 16px;
4162
- --f7-list-item-cell-margin: 16px;
4163
3417
  --f7-list-item-padding-horizontal: 16px;
4164
3418
  --f7-list-item-padding-vertical: 8px;
4165
3419
  --f7-list-media-item-padding-horizontal: 16px;
@@ -4168,16 +3422,13 @@ html.device-full-viewport body {
4168
3422
  --f7-list-item-media-margin: 16px;
4169
3423
  --f7-list-item-title-font-size: inherit;
4170
3424
  --f7-list-item-title-font-weight: 400;
4171
- --f7-list-item-title-text-color: inherit;
4172
3425
  --f7-list-item-title-line-height: inherit;
4173
3426
  --f7-list-item-title-white-space: nowrap;
4174
3427
  --f7-list-item-subtitle-font-weight: 400;
4175
- --f7-list-item-subtitle-text-color: inherit;
4176
3428
  --f7-list-item-subtitle-line-height: inherit;
4177
3429
  --f7-list-item-text-font-weight: 400;
4178
3430
  --f7-list-item-after-font-weight: 400;
4179
3431
  --f7-list-item-after-line-height: inherit;
4180
- --f7-list-item-header-text-color: inherit;
4181
3432
  --f7-list-item-header-font-size: 12px;
4182
3433
  --f7-list-item-header-font-weight: 400;
4183
3434
  --f7-list-item-header-line-height: 1.2;
@@ -4191,34 +3442,22 @@ html.device-full-viewport body {
4191
3442
  --f7-list-button-font-size: inherit;
4192
3443
  --f7-list-button-font-weight: 400;
4193
3444
  --f7-list-button-text-align: center;
4194
- --f7-list-item-divider-line-height: inherit;
4195
- --f7-list-item-divider-font-weight: 400;
4196
3445
  --f7-list-group-title-line-height: inherit;
4197
- --f7-menu-list-offset: 8px;
4198
- --f7-menu-list-border-radius: 8px;
4199
3446
  --f7-menu-list-font-size: 14px;
4200
3447
  --f7-menu-list-item-title-font-size: 14px;
4201
3448
  --f7-menu-list-item-title-font-weight: 500;
4202
3449
  --f7-menu-list-item-subtitle-font-size: 14px;
4203
3450
  --f7-menu-list-item-text-font-size: 14px;
4204
3451
  --f7-menu-list-item-after-font-size: 14px;
4205
- --f7-list-bg-color: #fff;
3452
+ --f7-list-outline-border-color: rgba(0, 0, 0, 0.22);
4206
3453
  --f7-list-chevron-icon-color: rgba(0, 0, 0, 0.2);
4207
- --f7-menu-list-selected-text-color: var(--f7-theme-color);
4208
- --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
4209
3454
  }
4210
3455
  :root .dark,
4211
3456
  :root.dark {
4212
3457
  --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
4213
- --f7-list-bg-color: #1c1c1d;
4214
- --f7-list-border-color: rgba(255, 255, 255, 0.15);
4215
- --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
4216
- --f7-list-item-divider-border-color: rgba(255, 255, 255, 0.15);
4217
- --f7-list-item-divider-bg-color: #232323;
4218
- --f7-list-group-title-bg-color: #232323;
3458
+ --f7-list-outline-border-color: rgba(255, 255, 255, 0.15);
3459
+ --f7-list-group-title-border-color: rgba(255, 255, 255, 0.15);
4219
3460
  --f7-list-chevron-icon-color: rgba(255, 255, 255, 0.3);
4220
- --f7-menu-list-selected-text-color: inherit;
4221
- --f7-menu-list-selected-bg-color: var(--f7-theme-color);
4222
3461
  }
4223
3462
  .ios {
4224
3463
  --f7-list-in-list-padding-left: 30px;
@@ -4226,8 +3465,8 @@ html.device-full-viewport body {
4226
3465
  --f7-list-margin-vertical: 35px;
4227
3466
  --f7-list-font-size: 17px;
4228
3467
  --f7-list-chevron-icon-area: 20px;
4229
- --f7-list-border-color: rgba(0, 0, 0, 0.22);
4230
- --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
3468
+ --f7-list-item-title-text-color: inherit;
3469
+ --f7-list-item-subtitle-text-color: inherit;
4231
3470
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.15);
4232
3471
  --f7-list-item-subtitle-font-size: 15px;
4233
3472
  --f7-list-item-text-font-size: 15px;
@@ -4239,38 +3478,48 @@ html.device-full-viewport body {
4239
3478
  --f7-list-media-item-padding-vertical: 10px;
4240
3479
  --f7-list-media-item-title-font-weight: 600;
4241
3480
  --f7-list-button-border-color: rgba(0, 0, 0, 0.22);
4242
- --f7-list-item-divider-height: 31px;
4243
- --f7-list-item-divider-font-size: inherit;
4244
- --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
4245
- --f7-list-item-divider-border-color: rgba(0, 0, 0, 0.22);
3481
+ --f7-list-group-title-border-color: rgba(0, 0, 0, 0.22);
4246
3482
  --f7-list-group-title-height: 31px;
4247
3483
  --f7-list-group-title-font-size: inherit;
4248
3484
  --f7-list-group-title-font-weight: 400;
4249
- --f7-list-group-title-bg-color: #f7f7f7;
3485
+ --f7-menu-list-offset: 8px;
3486
+ --f7-menu-list-border-radius: 8px;
3487
+ --f7-menu-list-item-bg-color: transparent;
3488
+ --f7-menu-list-item-text-color: inherit;
3489
+ --f7-menu-list-item-min-height: 44px;
3490
+ --f7-list-item-border-color: rgba(0, 0, 0, 0.22);
3491
+ --f7-list-outline-inset-border-color: rgba(0, 0, 0, 0.22);
3492
+ --f7-list-strong-bg-color: #fff;
4250
3493
  --f7-list-item-after-text-color: rgba(0, 0, 0, 0.45);
3494
+ --f7-list-item-header-text-color: inherit;
4251
3495
  --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.45);
4252
3496
  --f7-list-item-text-text-color: rgba(0, 0, 0, 0.45);
4253
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
4254
3497
  --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
3498
+ --f7-list-group-title-bg-color: #f7f7f7;
3499
+ --f7-menu-list-item-selected-text-color: var(--f7-theme-color);
3500
+ --f7-menu-list-item-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
4255
3501
  }
4256
3502
  .ios .dark,
4257
3503
  .ios.dark {
3504
+ --f7-list-item-border-color: rgba(255, 255, 255, 0.15);
3505
+ --f7-list-outline-inset-color: rgba(255, 255, 255, 0.15);
3506
+ --f7-list-strong-bg-color: #1c1c1d;
4258
3507
  --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
4259
3508
  --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
4260
3509
  --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
4261
3510
  --f7-list-item-text-text-color: rgba(255, 255, 255, 0.55);
4262
- --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.55);
4263
3511
  --f7-list-group-title-text-color: rgba(255, 255, 255, 0.55);
3512
+ --f7-list-group-title-bg-color: #232323;
4264
3513
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.08);
3514
+ --f7-menu-list-item-selected-text-color: inherit;
3515
+ --f7-menu-list-item-selected-bg-color: var(--f7-theme-color);
4265
3516
  }
4266
3517
  .md {
4267
- --f7-list-in-list-padding-left: 40px;
4268
- --f7-list-inset-border-radius: 4px;
3518
+ --f7-list-in-list-padding-left: 24px;
3519
+ --f7-list-inset-border-radius: 16px;
4269
3520
  --f7-list-margin-vertical: 32px;
4270
3521
  --f7-list-font-size: 16px;
4271
3522
  --f7-list-chevron-icon-area: 26px;
4272
- --f7-list-border-color: rgba(0, 0, 0, 0.12);
4273
- --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
4274
3523
  --f7-list-item-subtitle-font-size: 14px;
4275
3524
  --f7-list-item-text-font-size: 14px;
4276
3525
  --f7-list-item-text-line-height: 20px;
@@ -4278,105 +3527,62 @@ html.device-full-viewport body {
4278
3527
  --f7-list-item-after-padding: 8px;
4279
3528
  --f7-list-item-min-height: 48px;
4280
3529
  --f7-list-item-media-icons-margin: 8px;
4281
- --f7-list-media-item-padding-vertical: 14px;
4282
- /*
4283
- --f7-list-media-item-title-font-weight: var(--f7-list-item-title-font-weight);
4284
- */
3530
+ --f7-list-media-item-padding-vertical: 12px;
3531
+ --f7-list-media-item-title-font-weight: 500;
4285
3532
  --f7-list-button-border-color: transparent;
4286
- --f7-list-item-divider-height: 48px;
4287
- --f7-list-item-divider-font-size: 14px;
4288
- --f7-list-item-divider-bg-color: #f4f4f4;
4289
- --f7-list-item-divider-border-color: transparent;
3533
+ --f7-list-group-title-border-color: transparent;
4290
3534
  --f7-list-group-title-height: 48px;
4291
- --f7-list-group-title-font-size: 14px;
3535
+ --f7-list-group-title-font-size: 16px;
4292
3536
  --f7-list-group-title-font-weight: 400;
4293
- --f7-list-group-title-bg-color: #f4f4f4;
4294
- --f7-menu-list-border-radius: 4px;
3537
+ --f7-menu-list-offset: 16px;
3538
+ --f7-menu-list-border-radius: 999px;
3539
+ --f7-menu-list-item-min-height: 56px;
4295
3540
  --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
4296
- --f7-list-item-text-text-color: rgba(0, 0, 0, 0.54);
4297
- --f7-list-item-after-text-color: rgba(0, 0, 0, 0.54);
4298
- --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.5);
4299
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
4300
- --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
4301
3541
  }
4302
3542
  .md .dark,
4303
3543
  .md.dark {
4304
- --f7-list-item-divider-text-color: #fff;
4305
- --f7-list-group-title-text-color: #fff;
4306
3544
  --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
4307
- --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
4308
- --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
4309
- --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
4310
3545
  }
4311
- .aurora {
4312
- --f7-list-in-list-padding-left: 16px;
4313
- --f7-list-inset-border-radius: 8px;
4314
- --f7-list-margin-vertical: 32px;
4315
- --f7-list-font-size: 16px;
4316
- --f7-list-chevron-icon-area: 20px;
4317
- --f7-list-border-color: rgba(0, 0, 0, 0.12);
4318
- --f7-list-item-border-color: rgba(0, 0, 0, 0.12);
4319
- --f7-list-item-subtitle-font-size: 14px;
4320
- --f7-list-item-text-font-size: 14px;
4321
- --f7-list-item-text-line-height: 20px;
4322
- --f7-list-item-after-font-size: 14px;
4323
- --f7-list-item-after-padding: 8px;
4324
- --f7-list-item-min-height: 48px;
4325
- --f7-list-item-media-icons-margin: 8px;
4326
- --f7-list-media-item-padding-vertical: 16px;
4327
- --f7-list-media-item-title-font-weight: 600;
4328
- --f7-list-button-border-color: rgba(0, 0, 0, 0.12);
4329
- --f7-list-button-font-weight: 500;
4330
- --f7-list-item-divider-height: 32px;
4331
- --f7-list-item-divider-font-size: 14px;
4332
- --f7-list-item-divider-bg-color: rgba(0, 0, 0, 0.03);
4333
- --f7-list-item-divider-border-color: transparent;
4334
- --f7-list-group-title-height: 32px;
4335
- --f7-list-group-title-font-size: 14px;
4336
- --f7-list-group-title-font-weight: 500;
4337
- --f7-list-group-title-bg-color: #f7f7f7;
4338
- --f7-list-link-pressed-bg-color: rgba(0, 0, 0, 0.1);
4339
- --f7-list-link-hover-bg-color: rgba(0, 0, 0, 0.03);
4340
- --f7-list-item-text-text-color: rgba(0, 0, 0, 0.6);
4341
- --f7-list-item-after-text-color: rgba(0, 0, 0, 0.5);
4342
- --f7-list-item-footer-text-color: rgba(0, 0, 0, 0.6);
4343
- --f7-list-button-hover-bg-color: rgba(0, 0, 0, 0.03);
4344
- --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
4345
- --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
4346
- }
4347
- .aurora .dark,
4348
- .aurora.dark {
4349
- --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
4350
- --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
4351
- --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
4352
- --f7-list-item-divider-text-color: rgba(255, 255, 255, 0.6);
4353
- --f7-list-group-title-text-color: rgba(255, 255, 255, 0.6);
4354
- --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
4355
- --f7-list-link-hover-bg-color: rgba(255, 255, 255, 0.03);
4356
- --f7-list-button-hover-bg-color: rgba(255, 255, 255, 0.03);
3546
+ .md,
3547
+ .md .dark,
3548
+ .md [class*='color-'] {
3549
+ --f7-list-outline-inset-border-color: var(--f7-md-outline);
3550
+ --f7-list-item-border-color: var(--f7-md-outline);
3551
+ --f7-list-item-title-text-color: var(--f7-md-on-surface);
3552
+ --f7-list-item-subtitle-text-color: var(--f7-md-on-surface);
3553
+ --f7-list-group-title-bg-color: var(--f7-md-surface-2);
3554
+ --f7-list-group-title-text-color: var(--f7-md-on-surface-variant);
3555
+ --f7-list-strong-bg-color: var(--f7-md-surface-1);
3556
+ --f7-list-item-after-text-color: var(--f7-md-on-surface-variant);
3557
+ --f7-list-item-text-text-color: var(--f7-md-on-surface-variant);
3558
+ --f7-list-item-header-text-color: var(--f7-md-on-surface-variant);
3559
+ --f7-list-item-footer-text-color: var(--f7-md-on-surface-variant);
3560
+ --f7-menu-list-item-text-color: var(--f7-md-on-surface-variant);
3561
+ --f7-menu-list-item-bg-color: var(--f7-md-surface-1);
3562
+ --f7-menu-list-item-selected-text-color: var(--f7-md-on-secondary-container);
3563
+ --f7-menu-list-item-selected-bg-color: var(--f7-md-secondary-container);
4357
3564
  }
4358
3565
  :root {
4359
3566
  --f7-list-chevron-icon-left: 'chevron_left';
4360
3567
  --f7-list-chevron-icon-right: 'chevron_right';
4361
3568
  }
4362
3569
  .list {
4363
- --menu-list-offset: 0px;
4364
3570
  position: relative;
4365
3571
  z-index: 1;
4366
3572
  font-size: var(--f7-list-font-size);
4367
3573
  margin: var(--f7-list-margin-vertical) 0;
4368
3574
  }
4369
- .list ul {
4370
- list-style: none;
4371
- margin: 0;
4372
- padding: 0;
4373
- position: relative;
4374
- background: var(--f7-list-bg-color);
3575
+ .list-strong ul,
3576
+ .ios .list-strong-ios ul,
3577
+ .md .list-strong-md ul {
3578
+ background: var(--f7-list-strong-bg-color);
4375
3579
  }
4376
- .list ul:before {
3580
+ .list-outline ul:before,
3581
+ .ios .list-outline-ios ul:before,
3582
+ .md .list-outline-md ul:before {
4377
3583
  content: '';
4378
3584
  position: absolute;
4379
- background-color: var(--f7-list-border-color);
3585
+ background-color: var(--f7-list-outline-border-color);
4380
3586
  display: block;
4381
3587
  z-index: 15;
4382
3588
  top: 0;
@@ -4388,10 +3594,12 @@ html.device-full-viewport body {
4388
3594
  transform-origin: 50% 0%;
4389
3595
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4390
3596
  }
4391
- .list ul:after {
3597
+ .list-outline ul:after,
3598
+ .ios .list-outline-ios ul:after,
3599
+ .md .list-outline-md ul:after {
4392
3600
  content: '';
4393
3601
  position: absolute;
4394
- background-color: var(--f7-list-border-color);
3602
+ background-color: var(--f7-list-outline-border-color);
4395
3603
  display: block;
4396
3604
  z-index: 15;
4397
3605
  top: auto;
@@ -4403,6 +3611,19 @@ html.device-full-viewport body {
4403
3611
  transform-origin: 50% 100%;
4404
3612
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4405
3613
  }
3614
+ .list-outline.inset,
3615
+ .ios .list-outline-ios.inset,
3616
+ .ios .list-outline-ios.inset-ios,
3617
+ .md .list-outline-md.inset,
3618
+ .md .list-outline-md.inset-md {
3619
+ border: 1px solid var(--f7-list-outline-inset-border-color);
3620
+ }
3621
+ .list ul {
3622
+ list-style: none;
3623
+ margin: 0;
3624
+ padding: 0;
3625
+ position: relative;
3626
+ }
4406
3627
  .list ul ul {
4407
3628
  padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-list-in-list-padding-left));
4408
3629
  }
@@ -4422,6 +3643,7 @@ html.device-full-viewport body {
4422
3643
  box-sizing: border-box;
4423
3644
  padding-bottom: var(--f7-list-item-padding-vertical);
4424
3645
  padding-top: var(--f7-list-item-padding-vertical);
3646
+ position: relative;
4425
3647
  }
4426
3648
  .list .item-media + .item-inner {
4427
3649
  margin-right: var(--f7-list-item-media-margin);
@@ -4444,8 +3666,8 @@ html.device-full-viewport body {
4444
3666
  align-self: stretch;
4445
3667
  padding-top: var(--f7-list-item-padding-vertical);
4446
3668
  padding-bottom: var(--f7-list-item-padding-vertical);
4447
- min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
4448
- padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
3669
+ min-height: calc(var(--f7-list-item-min-height));
3670
+ padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4449
3671
  }
4450
3672
  .list .item-title {
4451
3673
  min-width: 0;
@@ -4487,30 +3709,37 @@ html.device-full-viewport body {
4487
3709
  line-height: var(--f7-list-item-footer-line-height);
4488
3710
  }
4489
3711
  .list .item-link,
3712
+ .list label.item-content,
4490
3713
  .list .list-button {
4491
3714
  transition-duration: 300ms;
4492
3715
  transition-property: background-color, color;
4493
- display: block;
4494
3716
  position: relative;
4495
3717
  overflow: hidden;
4496
3718
  z-index: 0;
3719
+ cursor: pointer;
3720
+ }
3721
+ .list .item-link,
3722
+ .list .list-button {
3723
+ display: block;
4497
3724
  }
4498
- .list .item-link {
3725
+ .list .item-link,
3726
+ .list label.item-content {
4499
3727
  color: inherit;
4500
3728
  }
4501
- .list .item-link.active-state {
3729
+ .list .item-link.active-state,
3730
+ .list label.item-content.active-state {
4502
3731
  background-color: var(--f7-list-link-pressed-bg-color);
4503
3732
  }
4504
3733
  .list .item-link .item-inner {
4505
- padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
3734
+ padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4506
3735
  }
4507
3736
  .list .item-content {
4508
3737
  display: flex;
4509
3738
  justify-content: space-between;
4510
3739
  box-sizing: border-box;
4511
3740
  align-items: center;
4512
- min-height: calc(var(--f7-list-item-min-height) - var(--menu-list-offset));
4513
- padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right) - var(--menu-list-offset));
3741
+ min-height: calc(var(--f7-list-item-min-height));
3742
+ padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
4514
3743
  }
4515
3744
  .list .item-subtitle {
4516
3745
  position: relative;
@@ -4547,23 +3776,6 @@ html.device-full-viewport body {
4547
3776
  .list .item-title-row .item-after {
4548
3777
  align-self: center;
4549
3778
  }
4550
- .list .item-row {
4551
- display: flex;
4552
- justify-content: space-between;
4553
- box-sizing: border-box;
4554
- }
4555
- .list .item-cell {
4556
- display: block;
4557
- align-self: center;
4558
- box-sizing: border-box;
4559
- width: 100%;
4560
- min-width: 0;
4561
- margin-right: var(--f7-list-item-cell-margin);
4562
- flex-shrink: 1;
4563
- }
4564
- .list .item-cell:first-child {
4565
- margin-right: 0;
4566
- }
4567
3779
  .list li:last-child .list-button:after {
4568
3780
  display: none !important;
4569
3781
  }
@@ -4593,78 +3805,6 @@ html.device-full-viewport body {
4593
3805
  transform-origin: 50% 100%;
4594
3806
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4595
3807
  }
4596
- .list.no-hairlines:before,
4597
- .list.no-hairlines ul:before,
4598
- .md .list.no-hairlines-md:before,
4599
- .md .list.no-hairlines-md ul:before,
4600
- .ios .list.no-hairlines-ios:before,
4601
- .ios .list.no-hairlines-ios ul:before,
4602
- .aurora .list.no-hairlines-aurora:before,
4603
- .aurora .list.no-hairlines-aurora ul:before,
4604
- .list.no-hairlines:after,
4605
- .list.no-hairlines ul:after,
4606
- .md .list.no-hairlines-md:after,
4607
- .md .list.no-hairlines-md ul:after,
4608
- .ios .list.no-hairlines-ios:after,
4609
- .ios .list.no-hairlines-ios ul:after,
4610
- .aurora .list.no-hairlines-aurora:after,
4611
- .aurora .list.no-hairlines-aurora ul:after {
4612
- display: none !important;
4613
- }
4614
- .list.no-hairline-top:before,
4615
- .list.no-hairline-top ul:before,
4616
- .md .list.no-hairline-top-md:before,
4617
- .md .list.no-hairline-top-md ul:before,
4618
- .ios .list.no-hairline-top-ios:before,
4619
- .ios .list.no-hairline-top-ios ul:before,
4620
- .aurora .list.no-hairline-top-aurora:before,
4621
- .aurora .list.no-hairline-top-aurora ul:before {
4622
- display: none !important;
4623
- }
4624
- .list.no-hairline-bottom:after,
4625
- .list.no-hairline-bottom ul:after,
4626
- .md .list.no-hairline-bottom-md:after,
4627
- .md .list.no-hairline-bottom-md ul:after,
4628
- .ios .list.no-hairline-bottom-ios:after,
4629
- .ios .list.no-hairline-bottom-ios ul:after,
4630
- .aurora .list.no-hairline-bottom-aurora:after,
4631
- .aurora .list.no-hairline-bottom-aurora ul:after {
4632
- display: none !important;
4633
- }
4634
- .list.no-hairlines-between .item-inner:after,
4635
- .md .list.no-hairlines-between-md .item-inner:after,
4636
- .ios .list.no-hairlines-between-ios .item-inner:after,
4637
- .aurora .list.no-hairlines-between-aurora .item-inner:after,
4638
- .list.no-hairlines-between .list-button:after,
4639
- .md .list.no-hairlines-between-md .list-button:after,
4640
- .ios .list.no-hairlines-between-ios .list-button:after,
4641
- .aurora .list.no-hairlines-between-aurora .list-button:after,
4642
- .list.no-hairlines-between .item-divider:after,
4643
- .md .list.no-hairlines-between-md .item-divider:after,
4644
- .ios .list.no-hairlines-between-ios .item-divider:after,
4645
- .aurora .list.no-hairlines-between-aurora .item-divider:after,
4646
- .list.no-hairlines-between .list-group-title:after,
4647
- .md .list.no-hairlines-between-md .list-group-title:after,
4648
- .ios .list.no-hairlines-between-ios .list-group-title:after,
4649
- .aurora .list.no-hairlines-between-aurora .list-group-title:after,
4650
- .list.no-hairlines-between .list-group-title:after,
4651
- .md .list.no-hairlines-between-md .list-group-title:after,
4652
- .ios .list.no-hairlines-between-ios .list-group-title:after,
4653
- .aurora .list.no-hairlines-between-aurora .list-group-title:after {
4654
- display: none !important;
4655
- }
4656
- .list.no-hairlines-between.simple-list li:after,
4657
- .md .list.no-hairlines-between-md.simple-list li:after,
4658
- .ios .list.no-hairlines-between-ios.simple-list li:after,
4659
- .aurora .list.no-hairlines-between-aurora.simple-list li:after {
4660
- display: none !important;
4661
- }
4662
- .list.no-hairlines-between.links-list a:after,
4663
- .md .list.no-hairlines-between-md.links-list a:after,
4664
- .ios .list.no-hairlines-between-ios.links-list a:after,
4665
- .aurora .list.no-hairlines-between-aurora.links-list a:after {
4666
- display: none !important;
4667
- }
4668
3808
  .list-button {
4669
3809
  --f7-touch-ripple-color: var(--f7-link-touch-ripple-color, rgba(var(--f7-theme-color-rgb), 0.25));
4670
3810
  padding: 0 var(--f7-list-item-padding-horizontal);
@@ -4674,7 +3814,12 @@ html.device-full-viewport body {
4674
3814
  font-weight: var(--f7-list-button-font-weight);
4675
3815
  text-align: var(--f7-list-button-text-align);
4676
3816
  }
4677
- .list-button:after {
3817
+ .list-button.active-state {
3818
+ background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
3819
+ }
3820
+ .list-dividers .list-button:after,
3821
+ .ios .list-dividers-ios .list-button:after,
3822
+ .md .list-dividers-md .list-button:after {
4678
3823
  content: '';
4679
3824
  position: absolute;
4680
3825
  background-color: var(--f7-list-button-border-color);
@@ -4689,9 +3834,6 @@ html.device-full-viewport body {
4689
3834
  transform-origin: 50% 100%;
4690
3835
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4691
3836
  }
4692
- .list-button.active-state {
4693
- background-color: var(--f7-list-button-pressed-bg-color, rgba(var(--f7-theme-color-rgb), 0.15));
4694
- }
4695
3837
  .list-button[class*='color-'] {
4696
3838
  --f7-list-button-text-color: var(--f7-theme-color);
4697
3839
  }
@@ -4760,9 +3902,15 @@ html.device-full-viewport body {
4760
3902
  .links-list li:last-child a:after {
4761
3903
  display: none !important;
4762
3904
  }
4763
- .simple-list li:after,
4764
- .links-list a:after,
4765
- .list .item-inner:after {
3905
+ .list-dividers.simple-list li:after,
3906
+ .ios .list-dividers-ios.simple-list li:after,
3907
+ .md .list-dividers-md.simple-list li:after,
3908
+ .list-dividers.links-list a:after,
3909
+ .ios .list-dividers-ios.links-list a:after,
3910
+ .md .list-dividers-md.links-list a:after,
3911
+ .list-dividers .item-inner:after,
3912
+ .ios .list-dividers-ios .item-inner:after,
3913
+ .md .list-dividers-md .item-inner:after {
4766
3914
  content: '';
4767
3915
  position: absolute;
4768
3916
  background-color: var(--f7-list-item-border-color);
@@ -4777,6 +3925,23 @@ html.device-full-viewport body {
4777
3925
  transform-origin: 50% 100%;
4778
3926
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4779
3927
  }
3928
+ .md .media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content,
3929
+ .md .media-list:not(.inset):not(.inset-md):not(.menu-list) li > .item-link,
3930
+ .md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content,
3931
+ .md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item > .item-link {
3932
+ margin-left: calc(var(--f7-list-item-padding-horizontal) / 2);
3933
+ margin-right: calc(var(--f7-list-item-padding-horizontal) / 2);
3934
+ border-radius: 16px;
3935
+ }
3936
+ .md .media-list:not(.inset):not(.inset-md):not(.menu-list) li > .item-link > .item-content,
3937
+ .md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item > .item-link > .item-content {
3938
+ margin-left: 0;
3939
+ margin-right: 0;
3940
+ }
3941
+ .md .media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content,
3942
+ .md .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content {
3943
+ padding-right: calc(var(--f7-list-item-padding-horizontal) / 2 + var(--f7-safe-area-right));
3944
+ }
4780
3945
  .media-list,
4781
3946
  li.media-item {
4782
3947
  --f7-list-item-padding-vertical: var(--f7-list-media-item-padding-vertical);
@@ -4791,17 +3956,13 @@ li.media-item .item-inner {
4791
3956
  display: block;
4792
3957
  align-self: stretch;
4793
3958
  }
4794
- .media-list .item-media,
4795
- li.media-item .item-media {
4796
- align-self: flex-start;
4797
- }
4798
3959
  .media-list .item-media img,
4799
3960
  li.media-item .item-media img {
4800
3961
  display: block;
4801
3962
  }
4802
3963
  .media-list .item-link .item-inner,
4803
3964
  li.media-item .item-link .item-inner {
4804
- padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
3965
+ padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4805
3966
  }
4806
3967
  .media-list .item-link .item-title-row,
4807
3968
  li.media-item .item-link .item-title-row {
@@ -4813,7 +3974,7 @@ li.media-item .item-link .item-title-row {
4813
3974
  li.media-item.chevron-center .item-link .item-inner,
4814
3975
  li.media-item .item-link.chevron-center .item-inner,
4815
3976
  li.media-item .chevron-center .item-link .item-inner {
4816
- padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - var(--menu-list-offset));
3977
+ padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
4817
3978
  }
4818
3979
  .media-list.chevron-center .item-title-row,
4819
3980
  .media-list .chevron-center .item-title-row,
@@ -4882,9 +4043,9 @@ li.media-item .item-link .item-title-row:before {
4882
4043
  .list-group + .list-group ul:before {
4883
4044
  display: none !important;
4884
4045
  }
4885
- li.item-divider,
4886
- .item-divider,
4887
- li.list-group-title {
4046
+ li.list-group-title,
4047
+ .list-group-title {
4048
+ margin-top: -1px;
4888
4049
  white-space: nowrap;
4889
4050
  position: relative;
4890
4051
  max-width: 100%;
@@ -4899,27 +4060,18 @@ li.list-group-title {
4899
4060
  display: flex;
4900
4061
  align-items: center;
4901
4062
  align-content: center;
4063
+ height: var(--f7-list-group-title-height);
4064
+ color: var(--f7-list-group-title-text-color);
4065
+ font-size: var(--f7-list-group-title-font-size);
4066
+ font-weight: var(--f7-list-group-title-font-weight);
4067
+ background-color: var(--f7-list-group-title-bg-color);
4068
+ line-height: var(--f7-list-group-title-line-height);
4902
4069
  }
4903
- li.item-divider:after,
4904
- .item-divider:after,
4905
- li.list-group-title:after {
4906
- display: none !important;
4907
- }
4908
- li.item-divider,
4909
- .item-divider {
4910
- margin-top: -1px;
4911
- height: var(--f7-list-item-divider-height);
4912
- color: var(--f7-list-item-divider-text-color);
4913
- font-size: var(--f7-list-item-divider-font-size);
4914
- font-weight: var(--f7-list-item-divider-font-weight);
4915
- background-color: var(--f7-list-item-divider-bg-color);
4916
- line-height: var(--f7-list-item-divider-line-height);
4917
- }
4918
- li.item-divider:before,
4919
- .item-divider:before {
4070
+ li.list-group-title:before,
4071
+ .list-group-title:before {
4920
4072
  content: '';
4921
4073
  position: absolute;
4922
- background-color: var(--f7-list-item-divider-border-color);
4074
+ background-color: var(--f7-list-group-title-border-color);
4923
4075
  display: block;
4924
4076
  z-index: 15;
4925
4077
  top: 0;
@@ -4931,198 +4083,332 @@ li.item-divider:before,
4931
4083
  transform-origin: 50% 0%;
4932
4084
  transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
4933
4085
  }
4934
- li.list-group-title,
4935
- .list li.list-group-title {
4936
- position: relative;
4937
- position: sticky;
4086
+ li.list-group-title:after,
4087
+ .list-group-title:after {
4088
+ display: none !important;
4089
+ }
4090
+ .list-group > .list-group-title,
4091
+ .list-group > ul > .list-group-title {
4938
4092
  top: 0;
4939
4093
  margin-top: 0;
4094
+ position: sticky;
4940
4095
  z-index: 20;
4941
- height: var(--f7-list-group-title-height);
4942
- color: var(--f7-list-group-title-text-color);
4943
- font-size: var(--f7-list-group-title-font-size);
4944
- font-weight: var(--f7-list-group-title-font-weight);
4945
- background-color: var(--f7-list-group-title-bg-color);
4946
- line-height: var(--f7-list-group-title-line-height);
4947
4096
  }
4948
- .page-with-navbar-large li.list-group-title,
4949
- .page-with-navbar-large .list li.list-group-title {
4097
+ .page-with-navbar-large .list-group > .list-group-title,
4098
+ .page-with-navbar-large .list-group > ul > .list-group-title {
4950
4099
  top: calc(-1 * var(--f7-navbar-large-title-height));
4951
4100
  }
4952
- .list.inset {
4101
+ .list.inset,
4102
+ .ios .list.inset-ios,
4103
+ .md .list.inset-md {
4953
4104
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4954
4105
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4955
4106
  border-radius: var(--f7-list-inset-border-radius);
4956
4107
  --f7-safe-area-left: 0px;
4957
4108
  --f7-safe-area-right: 0px;
4958
4109
  }
4959
- .list.inset .block-title {
4110
+ .list.inset .block-title,
4111
+ .ios .list.inset-ios .block-title,
4112
+ .md .list.inset-md .block-title {
4960
4113
  margin-left: 0;
4961
4114
  margin-right: 0;
4962
4115
  }
4963
- .list.inset ul {
4116
+ .list.inset ul,
4117
+ .ios .list.inset-ios ul,
4118
+ .md .list.inset-md ul {
4964
4119
  border-radius: var(--f7-list-inset-border-radius);
4965
4120
  }
4966
4121
  .list.inset ul:before,
4967
- .list.inset ul:after {
4122
+ .ios .list.inset-ios ul:before,
4123
+ .md .list.inset-md ul:before,
4124
+ .list.inset ul:after,
4125
+ .ios .list.inset-ios ul:after,
4126
+ .md .list.inset-md ul:after {
4968
4127
  display: none !important;
4969
4128
  }
4970
4129
  .list.inset li.swipeout:first-child,
4971
- .list.inset li:first-child > a {
4130
+ .ios .list.inset-ios li.swipeout:first-child,
4131
+ .md .list.inset-md li.swipeout:first-child,
4132
+ .list.inset li:first-child > a,
4133
+ .ios .list.inset-ios li:first-child > a,
4134
+ .md .list.inset-md li:first-child > a {
4972
4135
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
4973
4136
  }
4974
4137
  .list.inset li.swipeout:last-child,
4975
- .list.inset li:last-child > a {
4138
+ .ios .list.inset-ios li.swipeout:last-child,
4139
+ .md .list.inset-md li.swipeout:last-child,
4140
+ .list.inset li:last-child > a,
4141
+ .ios .list.inset-ios li:last-child > a,
4142
+ .md .list.inset-md li:last-child > a {
4976
4143
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
4977
4144
  }
4978
4145
  .list.inset li.swipeout:first-child:last-child,
4979
- .list.inset li:first-child:last-child > a {
4146
+ .ios .list.inset-ios li.swipeout:first-child:last-child,
4147
+ .md .list.inset-md li.swipeout:first-child:last-child,
4148
+ .list.inset li:first-child:last-child > a,
4149
+ .ios .list.inset-ios li:first-child:last-child > a,
4150
+ .md .list.inset-md li:first-child:last-child > a {
4980
4151
  border-radius: var(--f7-list-inset-border-radius);
4981
4152
  }
4982
4153
  @media (min-width: 480px) {
4983
- .list.xsmall-inset {
4154
+ .list.xsmall-inset,
4155
+ .ios .list.xsmall-inset-ios,
4156
+ .md .list.xsmall-inset-md {
4984
4157
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
4985
4158
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
4986
4159
  border-radius: var(--f7-list-inset-border-radius);
4987
4160
  --f7-safe-area-left: 0px;
4988
4161
  --f7-safe-area-right: 0px;
4989
4162
  }
4990
- .list.xsmall-inset .block-title {
4163
+ .list.xsmall-inset .block-title,
4164
+ .ios .list.xsmall-inset-ios .block-title,
4165
+ .md .list.xsmall-inset-md .block-title {
4991
4166
  margin-left: 0;
4992
4167
  margin-right: 0;
4993
4168
  }
4994
- .list.xsmall-inset ul {
4169
+ .list.xsmall-inset ul,
4170
+ .ios .list.xsmall-inset-ios ul,
4171
+ .md .list.xsmall-inset-md ul {
4995
4172
  border-radius: var(--f7-list-inset-border-radius);
4996
4173
  }
4997
4174
  .list.xsmall-inset ul:before,
4998
- .list.xsmall-inset ul:after {
4175
+ .ios .list.xsmall-inset-ios ul:before,
4176
+ .md .list.xsmall-inset-md ul:before,
4177
+ .list.xsmall-inset ul:after,
4178
+ .ios .list.xsmall-inset-ios ul:after,
4179
+ .md .list.xsmall-inset-md ul:after {
4999
4180
  display: none !important;
5000
4181
  }
5001
- .list.xsmall-inset li:first-child > a {
4182
+ .list.xsmall-inset li:first-child > a,
4183
+ .ios .list.xsmall-inset-ios li:first-child > a,
4184
+ .md .list.xsmall-inset-md li:first-child > a {
5002
4185
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5003
4186
  }
5004
- .list.xsmall-inset li:last-child > a {
4187
+ .list.xsmall-inset li:last-child > a,
4188
+ .ios .list.xsmall-inset-ios li:last-child > a,
4189
+ .md .list.xsmall-inset-md li:last-child > a {
5005
4190
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5006
4191
  }
5007
- .list.xsmall-inset li:first-child:last-child > a {
4192
+ .list.xsmall-inset li:first-child:last-child > a,
4193
+ .ios .list.xsmall-inset-ios li:first-child:last-child > a,
4194
+ .md .list.xsmall-inset-md li:first-child:last-child > a {
5008
4195
  border-radius: var(--f7-list-inset-border-radius);
5009
4196
  }
4197
+ .list.xsmall-inset.list-outline ul,
4198
+ .ios .list.xsmall-inset-ios.list-outline ul,
4199
+ .ios .list.xsmall-inset-ios.list-outline-ios ul,
4200
+ .md .list.xsmall-inset-md.list-outline ul,
4201
+ .md .list.xsmall-inset-md.list-outline-md ul {
4202
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4203
+ }
5010
4204
  }
5011
4205
  @media (min-width: 568px) {
5012
- .list.small-inset {
4206
+ .list.small-inset,
4207
+ .ios .list.small-inset-ios,
4208
+ .md .list.small-inset-md {
5013
4209
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5014
4210
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5015
4211
  border-radius: var(--f7-list-inset-border-radius);
5016
4212
  --f7-safe-area-left: 0px;
5017
4213
  --f7-safe-area-right: 0px;
5018
4214
  }
5019
- .list.small-inset .block-title {
4215
+ .list.small-inset .block-title,
4216
+ .ios .list.small-inset-ios .block-title,
4217
+ .md .list.small-inset-md .block-title {
5020
4218
  margin-left: 0;
5021
4219
  margin-right: 0;
5022
4220
  }
5023
- .list.small-inset ul {
4221
+ .list.small-inset ul,
4222
+ .ios .list.small-inset-ios ul,
4223
+ .md .list.small-inset-md ul {
5024
4224
  border-radius: var(--f7-list-inset-border-radius);
5025
4225
  }
5026
4226
  .list.small-inset ul:before,
5027
- .list.small-inset ul:after {
4227
+ .ios .list.small-inset-ios ul:before,
4228
+ .md .list.small-inset-md ul:before,
4229
+ .list.small-inset ul:after,
4230
+ .ios .list.small-inset-ios ul:after,
4231
+ .md .list.small-inset-md ul:after {
5028
4232
  display: none !important;
5029
4233
  }
5030
- .list.small-inset li:first-child > a {
4234
+ .list.small-inset li:first-child > a,
4235
+ .ios .list.small-inset-ios li:first-child > a,
4236
+ .md .list.small-inset-md li:first-child > a {
5031
4237
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5032
4238
  }
5033
- .list.small-inset li:last-child > a {
4239
+ .list.small-inset li:last-child > a,
4240
+ .ios .list.small-inset-ios li:last-child > a,
4241
+ .md .list.small-inset-md li:last-child > a {
5034
4242
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5035
4243
  }
5036
- .list.small-inset li:first-child:last-child > a {
4244
+ .list.small-inset li:first-child:last-child > a,
4245
+ .ios .list.small-inset-ios li:first-child:last-child > a,
4246
+ .md .list.small-inset-md li:first-child:last-child > a {
5037
4247
  border-radius: var(--f7-list-inset-border-radius);
5038
4248
  }
4249
+ .list.small-inset.list-outline ul,
4250
+ .ios .list.small-inset-ios.list-outline ul,
4251
+ .ios .list.small-inset-ios.list-outline-ios ul,
4252
+ .md .list.small-inset-md.list-outline ul,
4253
+ .md .list.small-inset-md.list-outline-md ul {
4254
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4255
+ }
5039
4256
  }
5040
4257
  @media (min-width: 768px) {
5041
- .list.medium-inset {
4258
+ .list.medium-inset,
4259
+ .ios .list.medium-inset-ios,
4260
+ .md .list.medium-inset-md {
5042
4261
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5043
4262
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5044
4263
  border-radius: var(--f7-list-inset-border-radius);
5045
4264
  --f7-safe-area-left: 0px;
5046
4265
  --f7-safe-area-right: 0px;
5047
4266
  }
5048
- .list.medium-inset .block-title {
4267
+ .list.medium-inset .block-title,
4268
+ .ios .list.medium-inset-ios .block-title,
4269
+ .md .list.medium-inset-md .block-title {
5049
4270
  margin-left: 0;
5050
4271
  margin-right: 0;
5051
4272
  }
5052
- .list.medium-inset ul {
4273
+ .list.medium-inset ul,
4274
+ .ios .list.medium-inset-ios ul,
4275
+ .md .list.medium-inset-md ul {
5053
4276
  border-radius: var(--f7-list-inset-border-radius);
5054
4277
  }
5055
4278
  .list.medium-inset ul:before,
5056
- .list.medium-inset ul:after {
4279
+ .ios .list.medium-inset-ios ul:before,
4280
+ .md .list.medium-inset-md ul:before,
4281
+ .list.medium-inset ul:after,
4282
+ .ios .list.medium-inset-ios ul:after,
4283
+ .md .list.medium-inset-md ul:after {
5057
4284
  display: none !important;
5058
4285
  }
5059
- .list.medium-inset li:first-child > a {
4286
+ .list.medium-inset li:first-child > a,
4287
+ .ios .list.medium-inset-ios li:first-child > a,
4288
+ .md .list.medium-inset-md li:first-child > a {
5060
4289
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5061
4290
  }
5062
- .list.medium-inset li:last-child > a {
4291
+ .list.medium-inset li:last-child > a,
4292
+ .ios .list.medium-inset-ios li:last-child > a,
4293
+ .md .list.medium-inset-md li:last-child > a {
5063
4294
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5064
4295
  }
5065
- .list.medium-inset li:first-child:last-child > a {
4296
+ .list.medium-inset li:first-child:last-child > a,
4297
+ .ios .list.medium-inset-ios li:first-child:last-child > a,
4298
+ .md .list.medium-inset-md li:first-child:last-child > a {
5066
4299
  border-radius: var(--f7-list-inset-border-radius);
5067
4300
  }
4301
+ .list.medium-inset.list-outline ul,
4302
+ .ios .list.medium-inset-ios.list-outline ul,
4303
+ .ios .list.medium-inset-ios.list-outline-ios ul,
4304
+ .md .list.medium-inset-md.list-outline ul,
4305
+ .md .list.medium-inset-md.list-outline-md ul {
4306
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4307
+ }
5068
4308
  }
5069
4309
  @media (min-width: 1024px) {
5070
- .list.large-inset {
4310
+ .list.large-inset,
4311
+ .ios .list.large-inset-ios,
4312
+ .md .list.large-inset-md {
5071
4313
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5072
4314
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5073
4315
  border-radius: var(--f7-list-inset-border-radius);
5074
4316
  --f7-safe-area-left: 0px;
5075
4317
  --f7-safe-area-right: 0px;
5076
4318
  }
5077
- .list.large-inset .block-title {
4319
+ .list.large-inset .block-title,
4320
+ .ios .list.large-inset-ios .block-title,
4321
+ .md .list.large-inset-md .block-title {
5078
4322
  margin-left: 0;
5079
4323
  margin-right: 0;
5080
4324
  }
5081
- .list.large-inset ul {
4325
+ .list.large-inset ul,
4326
+ .ios .list.large-inset-ios ul,
4327
+ .md .list.large-inset-md ul {
5082
4328
  border-radius: var(--f7-list-inset-border-radius);
5083
4329
  }
5084
4330
  .list.large-inset ul:before,
5085
- .list.large-inset ul:after {
4331
+ .ios .list.large-inset-ios ul:before,
4332
+ .md .list.large-inset-md ul:before,
4333
+ .list.large-inset ul:after,
4334
+ .ios .list.large-inset-ios ul:after,
4335
+ .md .list.large-inset-md ul:after {
5086
4336
  display: none !important;
5087
4337
  }
5088
- .list.large-inset li:first-child > a {
4338
+ .list.large-inset li:first-child > a,
4339
+ .ios .list.large-inset-ios li:first-child > a,
4340
+ .md .list.large-inset-md li:first-child > a {
5089
4341
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5090
4342
  }
5091
- .list.large-inset li:last-child > a {
4343
+ .list.large-inset li:last-child > a,
4344
+ .ios .list.large-inset-ios li:last-child > a,
4345
+ .md .list.large-inset-md li:last-child > a {
5092
4346
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5093
4347
  }
5094
- .list.large-inset li:first-child:last-child > a {
4348
+ .list.large-inset li:first-child:last-child > a,
4349
+ .ios .list.large-inset-ios li:first-child:last-child > a,
4350
+ .md .list.large-inset-md li:first-child:last-child > a {
5095
4351
  border-radius: var(--f7-list-inset-border-radius);
5096
4352
  }
4353
+ .list.large-inset.list-outline ul,
4354
+ .ios .list.large-inset-ios.list-outline ul,
4355
+ .ios .list.large-inset-ios.list-outline-ios ul,
4356
+ .md .list.large-inset-md.list-outline ul,
4357
+ .md .list.large-inset-md.list-outline-md ul {
4358
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4359
+ }
5097
4360
  }
5098
4361
  @media (min-width: 1200px) {
5099
- .list.xlarge-inset {
4362
+ .list.xlarge-inset,
4363
+ .ios .list.xlarge-inset-ios,
4364
+ .md .list.xlarge-inset-md {
5100
4365
  margin-left: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-left));
5101
4366
  margin-right: calc(var(--f7-list-inset-side-margin) + var(--f7-safe-area-outer-right));
5102
4367
  border-radius: var(--f7-list-inset-border-radius);
5103
4368
  --f7-safe-area-left: 0px;
5104
4369
  --f7-safe-area-right: 0px;
5105
4370
  }
5106
- .list.xlarge-inset .block-title {
4371
+ .list.xlarge-inset .block-title,
4372
+ .ios .list.xlarge-inset-ios .block-title,
4373
+ .md .list.xlarge-inset-md .block-title {
5107
4374
  margin-left: 0;
5108
4375
  margin-right: 0;
5109
4376
  }
5110
- .list.xlarge-inset ul {
4377
+ .list.xlarge-inset ul,
4378
+ .ios .list.xlarge-inset-ios ul,
4379
+ .md .list.xlarge-inset-md ul {
5111
4380
  border-radius: var(--f7-list-inset-border-radius);
5112
4381
  }
5113
4382
  .list.xlarge-inset ul:before,
5114
- .list.xlarge-inset ul:after {
4383
+ .ios .list.xlarge-inset-ios ul:before,
4384
+ .md .list.xlarge-inset-md ul:before,
4385
+ .list.xlarge-inset ul:after,
4386
+ .ios .list.xlarge-inset-ios ul:after,
4387
+ .md .list.xlarge-inset-md ul:after {
5115
4388
  display: none !important;
5116
4389
  }
5117
- .list.xlarge-inset li:first-child > a {
4390
+ .list.xlarge-inset li:first-child > a,
4391
+ .ios .list.xlarge-inset-ios li:first-child > a,
4392
+ .md .list.xlarge-inset-md li:first-child > a {
5118
4393
  border-radius: var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius) 0 0;
5119
4394
  }
5120
- .list.xlarge-inset li:last-child > a {
4395
+ .list.xlarge-inset li:last-child > a,
4396
+ .ios .list.xlarge-inset-ios li:last-child > a,
4397
+ .md .list.xlarge-inset-md li:last-child > a {
5121
4398
  border-radius: 0 0 var(--f7-list-inset-border-radius) var(--f7-list-inset-border-radius);
5122
4399
  }
5123
- .list.xlarge-inset li:first-child:last-child > a {
4400
+ .list.xlarge-inset li:first-child:last-child > a,
4401
+ .ios .list.xlarge-inset-ios li:first-child:last-child > a,
4402
+ .md .list.xlarge-inset-md li:first-child:last-child > a {
5124
4403
  border-radius: var(--f7-list-inset-border-radius);
5125
4404
  }
4405
+ .list.xlarge-inset.list-outline ul,
4406
+ .ios .list.xlarge-inset-ios.list-outline ul,
4407
+ .ios .list.xlarge-inset-ios.list-outline-ios ul,
4408
+ .md .list.xlarge-inset-md.list-outline ul,
4409
+ .md .list.xlarge-inset-md.list-outline-md ul {
4410
+ border: 1px solid var(--f7-list-outline-inset-border-color);
4411
+ }
5126
4412
  }
5127
4413
  .list.no-chevron,
5128
4414
  .list .no-chevron,
@@ -5131,13 +4417,13 @@ li.list-group-title,
5131
4417
  --f7-list-chevron-icon-area: 0px;
5132
4418
  }
5133
4419
  .menu-list {
5134
- --menu-list-offset: var(--f7-menu-list-offset);
5135
4420
  --f7-list-font-size: var(--f7-menu-list-font-size);
5136
4421
  --f7-list-item-title-font-size: var(--f7-menu-list-item-title-font-size);
5137
4422
  --f7-list-item-title-font-weight: var(--f7-menu-list-item-title-font-weight);
5138
4423
  --f7-list-item-subtitle-font-size: var(--f7-menu-list-item-subtitle-font-size);
5139
4424
  --f7-list-item-text-font-size: var(--f7-menu-list-item-text-font-size);
5140
4425
  --f7-list-item-after-font-size: var(--f7-menu-list-item-after-font-size);
4426
+ --f7-list-item-min-height: var(--f7-menu-list-item-min-height);
5141
4427
  }
5142
4428
  .menu-list .item-header,
5143
4429
  .menu-list .item-footer,
@@ -5147,20 +4433,22 @@ li.list-group-title,
5147
4433
  .menu-list .item-subtitle {
5148
4434
  transition-duration: 300ms;
5149
4435
  }
5150
- .menu-list li:not(.item-divider):not(.list-group-title) {
5151
- padding-top: calc(var(--f7-menu-list-offset) / 2);
5152
- padding-bottom: calc(var(--f7-menu-list-offset) / 2);
4436
+ .menu-list li:not(.list-group-title) {
4437
+ padding-top: 4px;
4438
+ padding-bottom: 4px;
5153
4439
  }
5154
- .menu-list li:not(.item-divider):not(.list-group-title):first-child {
5155
- padding-top: var(--f7-menu-list-offset);
4440
+ .menu-list li:not(.list-group-title):first-child {
4441
+ padding-top: 4px;
5156
4442
  }
5157
- .menu-list li:not(.item-divider):not(.list-group-title):last-child {
5158
- padding-bottom: var(--f7-menu-list-offset);
4443
+ .menu-list li:not(.list-group-title):last-child {
4444
+ padding-bottom: 4px;
5159
4445
  }
5160
4446
  .menu-list .item-link {
5161
4447
  margin-left: var(--f7-menu-list-offset);
5162
4448
  margin-right: var(--f7-menu-list-offset);
5163
4449
  border-radius: var(--f7-menu-list-border-radius) !important;
4450
+ color: var(--f7-menu-list-item-text-color);
4451
+ background-color: var(--f7-menu-list-item-bg-color);
5164
4452
  }
5165
4453
  .menu-list .item-inner:after {
5166
4454
  display: none;
@@ -5169,8 +4457,8 @@ li.list-group-title,
5169
4457
  .menu-list .item-selected.item-link,
5170
4458
  .menu-list .tab-link-active .item-link,
5171
4459
  .menu-list .tab-link-active.item-link {
5172
- color: var(--f7-menu-list-selected-text-color);
5173
- background-color: var(--f7-menu-list-selected-bg-color);
4460
+ color: var(--f7-menu-list-item-selected-text-color);
4461
+ background-color: var(--f7-menu-list-item-selected-bg-color);
5174
4462
  }
5175
4463
  .menu-list .item-selected .item-header,
5176
4464
  .menu-list .item-selected .item-footer,
@@ -5178,7 +4466,7 @@ li.list-group-title,
5178
4466
  .menu-list .item-selected .item-after,
5179
4467
  .menu-list .item-selected .item-text,
5180
4468
  .menu-list .item-selected .item-subtitle {
5181
- color: var(--f7-menu-list-selected-text-color);
4469
+ color: var(--f7-menu-list-item-selected-text-color);
5182
4470
  }
5183
4471
  .ios .item-link.active-state .item-inner:after,
5184
4472
  .ios .list-button.active-state:after,
@@ -5190,46 +4478,25 @@ li.list-group-title,
5190
4478
  .ios .list .list-button.active-state {
5191
4479
  transition-duration: 0ms;
5192
4480
  }
5193
- .md .list .item-media {
5194
- min-width: 40px;
5195
- }
5196
- .aurora .list .item-media {
5197
- min-width: 24px;
5198
- }
5199
- .aurora .links-list a,
5200
- .aurora .list .item-link:not(.item-selected),
5201
- .aurora .list .list-button {
5202
- transition-duration: 0ms;
5203
- }
5204
- .aurora.device-desktop .links-list a:hover:not(.active-state):not(.no-hover),
5205
- .aurora.device-desktop .list .item-link:not(.item-selected):hover:not(.active-state):not(.no-hover) {
5206
- background: var(--f7-list-link-hover-bg-color);
5207
- }
5208
- .aurora.device-desktop .list .list-button:hover:not(.active-state):not(.no-hover) {
5209
- background: var(--f7-list-button-hover-bg-color);
5210
- }
5211
4481
  /* === Badge === */
5212
4482
  :root {
5213
4483
  --f7-badge-text-color: #fff;
5214
4484
  --f7-badge-bg-color: #8e8e93;
5215
- --f7-badge-padding: 0 4px;
5216
4485
  --f7-badge-in-icon-size: 16px;
5217
4486
  --f7-badge-in-icon-font-size: 10px;
5218
4487
  --f7-badge-font-weight: normal;
5219
4488
  --f7-badge-font-size: 12px;
5220
4489
  }
5221
4490
  .ios {
4491
+ --f7-badge-padding: 0 4px;
5222
4492
  --f7-badge-size: 20px;
5223
4493
  --f7-badge-font-weight: 600;
5224
4494
  }
5225
4495
  .md {
5226
- --f7-badge-size: 18px;
4496
+ --f7-badge-padding: 2px 6px;
4497
+ --f7-badge-size: 20px;
5227
4498
  --f7-badge-font-weight: 500;
5228
4499
  }
5229
- .aurora {
5230
- --f7-badge-size: 18px;
5231
- --f7-badge-font-weight: 600;
5232
- }
5233
4500
  .badge {
5234
4501
  display: inline-flex;
5235
4502
  align-items: center;
@@ -5259,6 +4526,7 @@ li.list-group-title,
5259
4526
  font-family: var(--f7-font-family);
5260
4527
  --f7-badge-font-size: var(--f7-badge-in-icon-font-size);
5261
4528
  --f7-badge-size: var(--f7-badge-in-icon-size);
4529
+ --f7-badge-padding: 0px 2px;
5262
4530
  }
5263
4531
  .badge[class*='color-'] {
5264
4532
  --f7-badge-bg-color: var(--f7-theme-color);
@@ -5268,21 +4536,14 @@ li.list-group-title,
5268
4536
  --f7-button-min-width: 32px;
5269
4537
  --f7-button-bg-color: transparent;
5270
4538
  --f7-button-border-width: 0px;
5271
- --f7-button-text-transform: uppercase;
5272
- --f7-button-large-text-transform: uppercase;
5273
- --f7-button-small-text-transform: uppercase;
5274
- --f7-button-small-outline-border-width: 2px;
5275
4539
  /*
5276
4540
  --f7-button-text-color: var(--f7-theme-color);
5277
4541
  --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
5278
4542
  --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
5279
4543
  --f7-button-border-color: var(--f7-theme-color);
5280
- --f7-button-fill-text-color: #fff;
5281
4544
  --f7-button-fill-bg-color: var(--f7-theme-color);
5282
- --f7-button-outline-border-color: var(--f7-theme-color);
5283
4545
  --f7-button-padding-vertical: 0px;
5284
4546
  */
5285
- --f7-button-outline-border-width: 2px;
5286
4547
  --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
5287
4548
  --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
5288
4549
  0 3px 6px rgba(0, 0, 0, 0.23);
@@ -5291,7 +4552,6 @@ li.list-group-title,
5291
4552
  --f7-segmented-strong-between-buttons: 4px;
5292
4553
  --f7-segmented-strong-button-font-weight: 500;
5293
4554
  --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
5294
- --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
5295
4555
  --f7-segmented-strong-button-text-color: #000;
5296
4556
  --f7-segmented-strong-button-pressed-bg-color: rgba(0, 0, 0, 0.07);
5297
4557
  --f7-segmented-strong-button-hover-bg-color: rgba(0, 0, 0, 0.04);
@@ -5300,7 +4560,6 @@ li.list-group-title,
5300
4560
  }
5301
4561
  :root .dark,
5302
4562
  :root.dark {
5303
- --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
5304
4563
  --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
5305
4564
  --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
5306
4565
  --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
@@ -5308,63 +4567,68 @@ li.list-group-title,
5308
4567
  --f7-segmented-strong-button-active-text-color: #fff;
5309
4568
  }
5310
4569
  .ios {
4570
+ --f7-button-fill-text-color: #fff;
4571
+ --f7-button-text-transform: uppercase;
5311
4572
  --f7-button-height: 28px;
5312
4573
  --f7-button-padding-horizontal: 10px;
5313
- --f7-button-border-radius: 5px;
4574
+ --f7-button-border-radius: 4px;
5314
4575
  --f7-button-font-weight: 600;
5315
4576
  --f7-button-letter-spacing: 0;
4577
+ --f7-button-outline-border-color: var(--f7-theme-color);
4578
+ --f7-button-outline-border-width: 2px;
5316
4579
  /*
5317
4580
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
5318
4581
  */
4582
+ --f7-button-large-text-transform: uppercase;
5319
4583
  --f7-button-large-height: 44px;
5320
4584
  --f7-button-large-font-size: 17px;
5321
4585
  --f7-button-large-font-weight: 500;
4586
+ --f7-button-small-outline-border-width: 2px;
4587
+ --f7-button-small-text-transform: uppercase;
5322
4588
  --f7-button-small-height: 26px;
5323
4589
  --f7-button-small-font-size: 13px;
5324
4590
  --f7-button-small-font-weight: 600;
5325
4591
  --f7-segmented-strong-button-text-transform: none;
5326
4592
  --f7-segmented-strong-button-active-font-weight: 600;
4593
+ --f7-button-tonal-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
4594
+ --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
4595
+ --f7-button-tonal-text-color: var(--f7-theme-color);
4596
+ --f7-segmented-strong-bg-color: rgba(0, 0, 0, 0.07);
4597
+ }
4598
+ .ios .dark,
4599
+ .ios.dark {
4600
+ --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
5327
4601
  }
5328
4602
  .md {
5329
- --f7-button-height: 36px;
5330
- --f7-button-padding-horizontal: 8px;
5331
- --f7-button-border-radius: 4px;
4603
+ --f7-button-text-transform: none;
4604
+ --f7-button-height: 40px;
4605
+ --f7-button-padding-horizontal: 16px;
4606
+ --f7-button-border-radius: 8px;
5332
4607
  --f7-button-font-weight: 500;
5333
- --f7-button-letter-spacing: 0.05em;
5334
- /*
5335
- --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
5336
- */
4608
+ --f7-button-letter-spacing: normal;
4609
+ --f7-button-outline-border-width: 1px;
4610
+ --f7-button-large-text-transform: none;
5337
4611
  --f7-button-large-height: 48px;
5338
4612
  --f7-button-large-font-size: 14px;
5339
4613
  --f7-button-large-font-weight: 500;
5340
- --f7-button-small-height: 28px;
4614
+ --f7-button-small-text-transform: none;
4615
+ --f7-button-small-outline-border-width: 1px;
4616
+ --f7-button-small-height: 32px;
5341
4617
  --f7-button-small-font-size: 14px;
5342
4618
  --f7-button-small-font-weight: 500;
5343
- --f7-segmented-strong-button-text-transform: uppercase;
4619
+ --f7-segmented-strong-button-text-transform: none;
5344
4620
  --f7-segmented-strong-button-active-font-weight: 500;
5345
4621
  }
5346
- .aurora {
5347
- /*
5348
- --f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
5349
- --f7-button-fill-hover-bg-color: var(--f7-theme-color-tint);
5350
- */
5351
- --f7-button-height: 36px;
5352
- --f7-button-min-width: 24px;
5353
- --f7-button-padding-horizontal: 10px;
5354
- --f7-button-border-radius: 8px;
5355
- --f7-button-font-weight: 600;
5356
- --f7-button-letter-spacing: 0em;
5357
- /*
4622
+ .md,
4623
+ .md .dark,
4624
+ .md [class*='color-'] {
5358
4625
  --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
5359
- */
5360
- --f7-button-large-height: 48px;
5361
- --f7-button-large-font-size: 16px;
5362
- --f7-button-large-font-weight: 600;
5363
- --f7-button-small-height: 28px;
5364
- --f7-button-small-font-size: 14px;
5365
- --f7-button-small-font-weight: 600;
5366
- --f7-segmented-strong-button-text-transform: uppercase;
5367
- --f7-segmented-strong-button-active-font-weight: 600;
4626
+ --f7-button-fill-text-color: var(--f7-md-on-primary);
4627
+ --f7-button-outline-border-color: var(--f7-md-outline);
4628
+ --f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
4629
+ --f7-button-tonal-bg-color: var(--f7-md-secondary-container);
4630
+ --f7-button-tonal-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.25);
4631
+ --f7-button-tonal-text-color: var(--f7-md-on-secondary-container);
5368
4632
  }
5369
4633
  button {
5370
4634
  -webkit-appearance: none;
@@ -5416,37 +4680,44 @@ input[type='reset'].button {
5416
4680
  }
5417
4681
  .button > i + span,
5418
4682
  .button > span + span,
5419
- .button > span + i,
5420
- .button > i + i {
4683
+ .button > span ~ i {
5421
4684
  margin-right: 4px;
5422
4685
  }
5423
4686
  .subnavbar .button,
5424
4687
  .navbar .button,
5425
4688
  .toolbar .button,
5426
- .searchbar .button,
5427
- .appbar .button {
4689
+ .searchbar .button {
5428
4690
  color: var(--f7-button-text-color, var(--f7-theme-color));
5429
4691
  }
5430
4692
  .button-round,
5431
4693
  .ios .button-round-ios,
5432
- .md .button-round-md,
5433
- .aurora .button-round-aurora {
4694
+ .md .button-round-md {
5434
4695
  --f7-button-border-radius: var(--f7-button-height);
5435
4696
  }
5436
4697
  .button-fill,
5437
4698
  .ios .button-fill-ios,
5438
4699
  .md .button-fill-md,
5439
- .aurora .button-fill-aurora,
5440
4700
  .button-active,
5441
4701
  .button.tab-link-active {
5442
4702
  --f7-button-bg-color: var(--f7-button-fill-bg-color, var(--f7-theme-color));
5443
4703
  --f7-button-text-color: var(--f7-button-fill-text-color, #fff);
5444
4704
  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
5445
4705
  }
4706
+ .ios .color-white .button-fill,
4707
+ .ios .color-white .ios .button-fill-ios,
4708
+ .ios .color-white .md .button-fill-md,
4709
+ .ios .color-white .button-active,
4710
+ .ios .color-white .button.tab-link-active,
4711
+ .ios .button-fill.color-white,
4712
+ .ios .ios .button-fill-ios.color-white,
4713
+ .ios .md .button-fill-md.color-white,
4714
+ .ios .button-active.color-white,
4715
+ .ios .button.tab-link-active.color-white {
4716
+ --f7-button-text-color: #000;
4717
+ }
5446
4718
  .button-fill,
5447
4719
  .ios .button-fill-ios,
5448
- .md .button-fill-md,
5449
- .aurora .button-fill-aurora {
4720
+ .md .button-fill-md {
5450
4721
  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color);
5451
4722
  }
5452
4723
  .button-active,
@@ -5455,15 +4726,20 @@ input[type='reset'].button {
5455
4726
  }
5456
4727
  .button-outline,
5457
4728
  .ios .button-outline-ios,
5458
- .md .button-outline-md,
5459
- .aurora .button-outline-aurora {
4729
+ .md .button-outline-md {
5460
4730
  --f7-button-border-color: var(--f7-button-outline-border-color, var(--f7-theme-color));
5461
4731
  --f7-button-border-width: var(--f7-button-outline-border-width);
5462
4732
  }
4733
+ .button-tonal,
4734
+ .ios .button-tonal-ios,
4735
+ .md .button-tonal-md {
4736
+ --f7-button-bg-color: var(--f7-button-tonal-bg-color);
4737
+ --f7-button-text-color: var(--f7-button-tonal-text-color);
4738
+ --f7-button-pressed-bg-color: var(--f7-button-tonal-pressed-bg-color);
4739
+ }
5463
4740
  .button-large,
5464
4741
  .ios .button-large-ios,
5465
- .md .button-large-md,
5466
- .aurora .button-large-aurora {
4742
+ .md .button-large-md {
5467
4743
  --f7-button-height: var(--f7-button-large-height);
5468
4744
  --f7-button-font-size: var(--f7-button-large-font-size);
5469
4745
  --f7-button-font-weight: var(--f7-button-large-font-weight);
@@ -5471,8 +4747,7 @@ input[type='reset'].button {
5471
4747
  }
5472
4748
  .button-small,
5473
4749
  .ios .button-small-ios,
5474
- .md .button-small-md,
5475
- .aurora .button-small-aurora {
4750
+ .md .button-small-md {
5476
4751
  --f7-button-outline-border-width: var(--f7-button-small-outline-border-width);
5477
4752
  --f7-button-height: var(--f7-button-small-height);
5478
4753
  --f7-button-font-size: var(--f7-button-small-font-size);
@@ -5524,32 +4799,27 @@ input[type='reset'].button {
5524
4799
  }
5525
4800
  .segmented-raised,
5526
4801
  .ios .segmented-raised-ios,
5527
- .md .segmented-raised-md,
5528
- .aurora .segmented-raised-aurora {
4802
+ .md .segmented-raised-md {
5529
4803
  box-shadow: var(--f7-button-raised-box-shadow);
5530
4804
  }
5531
4805
  .segmented-raised .button:not(.button-outline),
5532
4806
  .ios .segmented-raised-ios .button:not(.button-outline),
5533
- .md .segmented-raised-md .button:not(.button-outline),
5534
- .aurora .segmented-raised-aurora .button:not(.button-outline) {
4807
+ .md .segmented-raised-md .button:not(.button-outline) {
5535
4808
  border-right: 1px solid var(--f7-segmented-raised-divider-color);
5536
4809
  }
5537
4810
  .button-raised,
5538
4811
  .ios .button-raised-ios,
5539
- .md .button-raised-md,
5540
- .aurora .button-raised-aurora {
4812
+ .md .button-raised-md {
5541
4813
  --f7-button-box-shadow: var(--f7-button-raised-box-shadow);
5542
4814
  }
5543
4815
  .button-raised.active-state,
5544
4816
  .ios .button-raised-ios.active-state,
5545
- .md .button-raised-md.active-state,
5546
- .aurora .button-raised-aurora.active-state {
4817
+ .md .button-raised-md.active-state {
5547
4818
  --f7-button-box-shadow: var(--f7-button-raised-pressed-box-shadow);
5548
4819
  }
5549
4820
  .segmented-strong,
5550
4821
  .ios .segmented-strong-ios,
5551
- .md .segmented-strong-md,
5552
- .aurora .segmented-strong-aurora {
4822
+ .md .segmented-strong-md {
5553
4823
  --f7-button-bg-color: transparent;
5554
4824
  --f7-button-hover-bg-color: var(--f7-segmented-strong-button-hover-bg-color);
5555
4825
  --f7-button-text-color: var(--f7-segmented-strong-button-text-color);
@@ -5565,39 +4835,32 @@ input[type='reset'].button {
5565
4835
  }
5566
4836
  .segmented-strong .button,
5567
4837
  .ios .segmented-strong-ios .button,
5568
- .md .segmented-strong-md .button,
5569
- .aurora .segmented-strong-aurora .button {
4838
+ .md .segmented-strong-md .button {
5570
4839
  z-index: 1;
5571
4840
  transform: translate3d(0, 0, 0);
5572
4841
  }
5573
4842
  .segmented-strong .button,
5574
4843
  .ios .segmented-strong-ios .button,
5575
4844
  .md .segmented-strong-md .button,
5576
- .aurora .segmented-strong-aurora .button,
5577
4845
  .segmented-strong .button:first-child,
5578
4846
  .ios .segmented-strong-ios .button:first-child,
5579
4847
  .md .segmented-strong-md .button:first-child,
5580
- .aurora .segmented-strong-aurora .button:first-child,
5581
4848
  .segmented-strong .button:last-child,
5582
4849
  .ios .segmented-strong-ios .button:last-child,
5583
- .md .segmented-strong-md .button:last-child,
5584
- .aurora .segmented-strong-aurora .button:last-child {
4850
+ .md .segmented-strong-md .button:last-child {
5585
4851
  border-radius: var(--f7-button-border-radius);
5586
4852
  }
5587
4853
  .segmented-strong .button + .button,
5588
4854
  .ios .segmented-strong-ios .button + .button,
5589
- .md .segmented-strong-md .button + .button,
5590
- .aurora .segmented-strong-aurora .button + .button {
4855
+ .md .segmented-strong-md .button + .button {
5591
4856
  margin-right: var(--f7-segmented-strong-between-buttons);
5592
4857
  }
5593
4858
  .segmented-strong .button.button-active,
5594
4859
  .ios .segmented-strong-ios .button.button-active,
5595
4860
  .md .segmented-strong-md .button.button-active,
5596
- .aurora .segmented-strong-aurora .button.button-active,
5597
4861
  .segmented-strong .button.tab-link-active,
5598
4862
  .ios .segmented-strong-ios .button.tab-link-active,
5599
- .md .segmented-strong-md .button.tab-link-active,
5600
- .aurora .segmented-strong-aurora .button.tab-link-active {
4863
+ .md .segmented-strong-md .button.tab-link-active {
5601
4864
  --f7-button-hover-bg-color: transparent;
5602
4865
  --f7-button-bg-color: transparent;
5603
4866
  --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
@@ -5605,8 +4868,7 @@ input[type='reset'].button {
5605
4868
  }
5606
4869
  .segmented-strong .segmented-highlight,
5607
4870
  .ios .segmented-strong-ios .segmented-highlight,
5608
- .md .segmented-strong-md .segmented-highlight,
5609
- .aurora .segmented-strong-aurora .segmented-highlight {
4871
+ .md .segmented-strong-md .segmented-highlight {
5610
4872
  --f7-segmented-highlight-num: 1;
5611
4873
  --f7-segmented-highlight-active: 0;
5612
4874
  --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
@@ -5689,14 +4951,12 @@ input[type='reset'].button {
5689
4951
  }
5690
4952
  .segmented-round,
5691
4953
  .ios .segmented-round-ios,
5692
- .md .segmented-round-md,
5693
- .aurora .segmented-round-aurora {
4954
+ .md .segmented-round-md {
5694
4955
  border-radius: var(--f7-button-height);
5695
4956
  }
5696
4957
  .segmented-round .segmented-highlight,
5697
4958
  .ios .segmented-round-ios .segmented-highlight,
5698
- .md .segmented-round-md .segmented-highlight,
5699
- .aurora .segmented-round-aurora .segmented-highlight {
4959
+ .md .segmented-round-md .segmented-highlight {
5700
4960
  border-radius: var(--f7-button-height);
5701
4961
  }
5702
4962
  .subnavbar .segmented {
@@ -5758,23 +5018,6 @@ input[type='reset'].button {
5758
5018
  .md .button-fill-md {
5759
5019
  --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
5760
5020
  }
5761
- .aurora .button {
5762
- transition-duration: 100ms;
5763
- transform: translate3d(0, 0, 0);
5764
- }
5765
- .aurora.device-desktop .button:not(.active-state):not(.no-hover):hover {
5766
- background-color: var(--f7-button-hover-bg-color, rgba(var(--f7-theme-color-rgb), 0.07));
5767
- }
5768
- .aurora .button-fill,
5769
- .aurora .button-fill-aurora {
5770
- --f7-button-pressed-bg-color: var(--f7-button-fill-pressed-bg-color, var(--f7-theme-color-shade));
5771
- }
5772
- .aurora .button-fill,
5773
- .aurora .button-active,
5774
- .aurora .button.tab-link-active,
5775
- .aurora .button-fill-aurora {
5776
- --f7-button-hover-bg-color: var(--f7-button-fill-hover-bg-color, var(--f7-theme-color-tint));
5777
- }
5778
5021
  /* === Touch Ripple === */
5779
5022
  :root {
5780
5023
  --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
@@ -5818,8 +5061,7 @@ input[type='reset'].button {
5818
5061
  animation: touch-ripple-out 300ms forwards;
5819
5062
  }
5820
5063
  .button-fill .ripple-wave,
5821
- .picker-calendar-day .ripple-wave,
5822
- .menu .ripple-wave {
5064
+ .picker-calendar-day .ripple-wave {
5823
5065
  z-index: 1;
5824
5066
  }
5825
5067
  .checkbox .ripple-wave,
@@ -5938,36 +5180,6 @@ i.icon {
5938
5180
  .md .icon-prev:after {
5939
5181
  content: 'chevron_right_md';
5940
5182
  }
5941
- .aurora .f7-icons,
5942
- .aurora .material-icons {
5943
- font-size: 24px;
5944
- }
5945
- .aurora .icon-back,
5946
- .aurora .icon-prev,
5947
- .aurora .icon-forward,
5948
- .aurora .icon-next {
5949
- width: 12px;
5950
- height: 20px;
5951
- line-height: 20px;
5952
- }
5953
- .aurora .icon-back:after,
5954
- .aurora .icon-prev:after,
5955
- .aurora .icon-forward:after,
5956
- .aurora .icon-next:after {
5957
- line-height: inherit;
5958
- }
5959
- .aurora .icon-prev:after,
5960
- .aurora .icon-next:after {
5961
- font-size: 16px;
5962
- }
5963
- .aurora .icon-back:after,
5964
- .aurora .icon-prev:after {
5965
- content: 'chevron_right_ios';
5966
- }
5967
- .aurora .icon-forward:after,
5968
- .aurora .icon-next:after {
5969
- content: 'chevron_left_ios';
5970
- }
5971
5183
  .custom-modal-backdrop {
5972
5184
  z-index: 10500;
5973
5185
  }