framework7 8.3.3 → 9.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (307) hide show
  1. package/components/actions/actions-ios.less +22 -15
  2. package/components/actions/actions-rtl.css +1 -1
  3. package/components/actions/actions-vars.less +4 -7
  4. package/components/actions/actions.css +1 -1
  5. package/components/actions/actions.js +2 -8
  6. package/components/actions/actions.less +0 -3
  7. package/components/app/app-class.d.ts +2 -0
  8. package/components/app/app-class.js +19 -15
  9. package/components/app/app-vars.less +41 -6
  10. package/components/app/app.less +1 -1
  11. package/components/area-chart/area-chart-class.js +18 -31
  12. package/components/area-chart/area-chart-rtl.css +1 -1
  13. package/components/area-chart/area-chart.css +1 -1
  14. package/components/autocomplete/autocomplete-class.js +13 -14
  15. package/components/autocomplete/autocomplete-ios.less +16 -0
  16. package/components/autocomplete/autocomplete-rtl.css +1 -1
  17. package/components/autocomplete/autocomplete.css +1 -1
  18. package/components/autocomplete/autocomplete.d.ts +3 -3
  19. package/components/autocomplete/autocomplete.js +3 -3
  20. package/components/autocomplete/autocomplete.less +7 -1
  21. package/components/block/block-vars.less +6 -6
  22. package/components/breadcrumbs/breadcrumbs-rtl.css +1 -1
  23. package/components/breadcrumbs/breadcrumbs.css +1 -1
  24. package/components/button/button-vars.less +13 -12
  25. package/components/button/button.less +2 -1
  26. package/components/calendar/calendar-class.js +20 -17
  27. package/components/calendar/calendar-ios.less +43 -0
  28. package/components/calendar/calendar-md.less +3 -0
  29. package/components/calendar/calendar-rtl.css +1 -1
  30. package/components/calendar/calendar-vars.less +24 -19
  31. package/components/calendar/calendar.css +1 -1
  32. package/components/calendar/calendar.d.ts +1 -1
  33. package/components/calendar/calendar.js +5 -8
  34. package/components/calendar/calendar.less +4 -2
  35. package/components/card/card-rtl.css +1 -1
  36. package/components/card/card-vars.less +5 -5
  37. package/components/card/card.css +1 -1
  38. package/components/card/card.js +3 -18
  39. package/components/card/card.less +1 -1
  40. package/components/color-picker/color-picker-class.js +11 -23
  41. package/components/color-picker/color-picker-ios.less +9 -0
  42. package/components/color-picker/color-picker-md.less +15 -0
  43. package/components/color-picker/color-picker-rtl.css +1 -1
  44. package/components/color-picker/color-picker-vars.less +9 -3
  45. package/components/color-picker/color-picker.css +1 -1
  46. package/components/color-picker/color-picker.d.ts +1 -2
  47. package/components/color-picker/color-picker.js +3 -7
  48. package/components/color-picker/color-picker.less +5 -25
  49. package/components/color-picker/modules/alpha-slider.js +2 -0
  50. package/components/color-picker/modules/brightness-slider.js +2 -0
  51. package/components/color-picker/modules/hs-spectrum.js +1 -2
  52. package/components/color-picker/modules/hsb-sliders.js +6 -0
  53. package/components/color-picker/modules/hue-slider.js +2 -0
  54. package/components/color-picker/modules/rgb-bars.js +6 -0
  55. package/components/color-picker/modules/rgb-sliders.js +6 -0
  56. package/components/color-picker/modules/sb-spectrum.js +1 -2
  57. package/components/color-picker/modules/wheel.js +1 -2
  58. package/components/data-table/data-table-class.js +1 -4
  59. package/components/data-table/data-table-ios.less +1 -1
  60. package/components/data-table/data-table-md.less +4 -2
  61. package/components/data-table/data-table-rtl.css +1 -1
  62. package/components/data-table/data-table.css +1 -1
  63. package/components/data-table/data-table.less +4 -4
  64. package/components/dialog/dialog-class.js +6 -3
  65. package/components/dialog/dialog-ios.less +10 -34
  66. package/components/dialog/dialog-md.less +2 -22
  67. package/components/dialog/dialog-rtl.css +1 -1
  68. package/components/dialog/dialog-vars.less +8 -10
  69. package/components/dialog/dialog.css +1 -1
  70. package/components/dialog/dialog.js +9 -27
  71. package/components/dialog/dialog.less +6 -25
  72. package/components/fab/fab-ios.less +2 -0
  73. package/components/fab/fab-rtl.css +1 -1
  74. package/components/fab/fab-vars.less +30 -6
  75. package/components/fab/fab.css +1 -1
  76. package/components/fab/fab.js +3 -12
  77. package/components/gauge/gauge-class.js +2 -8
  78. package/components/icon/icon-ios.less +10 -0
  79. package/components/icon/icon-md.less +9 -0
  80. package/components/icon/icon.less +2 -1
  81. package/components/input/input-ios.less +3 -2
  82. package/components/input/input-rtl.css +1 -1
  83. package/components/input/input.css +1 -1
  84. package/components/input/input.js +2 -5
  85. package/components/list/list-vars.less +7 -5
  86. package/components/list/list.less +1 -1
  87. package/components/list-index/list-index-class.js +3 -7
  88. package/components/login-screen/login-screen.js +2 -8
  89. package/components/login-screen/login-screen.less +1 -0
  90. package/components/messagebar/messagebar-class.js +5 -20
  91. package/components/messagebar/messagebar-ios.less +19 -14
  92. package/components/messagebar/messagebar-md.less +3 -0
  93. package/components/messagebar/messagebar-rtl.css +1 -1
  94. package/components/messagebar/messagebar-vars.less +12 -15
  95. package/components/messagebar/messagebar.css +1 -1
  96. package/components/messagebar/messagebar.less +4 -5
  97. package/components/messages/messages-class.js +25 -52
  98. package/components/messages/messages-ios.less +6 -2
  99. package/components/messages/messages-rtl.css +1 -1
  100. package/components/messages/messages-vars.less +1 -1
  101. package/components/messages/messages.css +1 -1
  102. package/components/navbar/navbar-ios.less +48 -672
  103. package/components/navbar/navbar-md.less +41 -1
  104. package/components/navbar/navbar-vars.less +4 -3
  105. package/components/navbar/navbar.js +28 -185
  106. package/components/navbar/navbar.less +8 -66
  107. package/components/notification/notification-class.js +6 -6
  108. package/components/notification/notification-ios.less +3 -8
  109. package/components/notification/notification-md.less +1 -20
  110. package/components/notification/notification-rtl.css +1 -1
  111. package/components/notification/notification-vars.less +13 -16
  112. package/components/notification/notification.css +1 -1
  113. package/components/notification/notification.less +8 -1
  114. package/components/page/page-ios.less +1 -8
  115. package/components/page/page-md.less +12 -11
  116. package/components/page/page.less +14 -12
  117. package/components/panel/panel-class.js +7 -28
  118. package/components/panel/panel-ios.less +4 -0
  119. package/components/panel/panel-rtl.css +2 -2
  120. package/components/panel/panel-vars.less +8 -5
  121. package/components/panel/panel.css +2 -2
  122. package/components/panel/panel.js +8 -32
  123. package/components/panel/panel.less +9 -9
  124. package/components/panel/resizable-panel.js +2 -4
  125. package/components/photo-browser/photo-browser-class.js +12 -47
  126. package/components/photo-browser/photo-browser-rtl.css +1 -1
  127. package/components/photo-browser/photo-browser-vars.less +8 -10
  128. package/components/photo-browser/photo-browser.css +1 -1
  129. package/components/photo-browser/photo-browser.d.ts +2 -4
  130. package/components/photo-browser/photo-browser.js +1 -3
  131. package/components/photo-browser/photo-browser.less +15 -71
  132. package/components/picker/picker-class.js +4 -5
  133. package/components/picker/picker-ios.less +6 -1
  134. package/components/picker/picker-md.less +9 -0
  135. package/components/picker/picker-rtl.css +1 -1
  136. package/components/picker/picker-vars.less +1 -1
  137. package/components/picker/picker.css +1 -1
  138. package/components/picker/picker.d.ts +1 -1
  139. package/components/picker/picker.js +2 -5
  140. package/components/picker/picker.less +0 -4
  141. package/components/pie-chart/pie-chart-class.js +7 -14
  142. package/components/popover/popover-class.js +22 -62
  143. package/components/popover/popover-ios.less +66 -2
  144. package/components/popover/popover-md.less +2 -27
  145. package/components/popover/popover-rtl.css +1 -1
  146. package/components/popover/popover-vars.less +2 -3
  147. package/components/popover/popover.css +1 -1
  148. package/components/popover/popover.d.ts +0 -2
  149. package/components/popover/popover.js +2 -9
  150. package/components/popover/popover.less +28 -50
  151. package/components/popup/popup-class.js +15 -9
  152. package/components/popup/popup-rtl.css +1 -1
  153. package/components/popup/popup-vars.less +2 -2
  154. package/components/popup/popup.css +1 -1
  155. package/components/popup/popup.js +2 -8
  156. package/components/popup/popup.less +6 -6
  157. package/components/preloader/preloader.js +2 -8
  158. package/components/progressbar/progressbar-md.less +12 -0
  159. package/components/progressbar/progressbar-rtl.css +1 -1
  160. package/components/progressbar/progressbar-vars.less +6 -5
  161. package/components/progressbar/progressbar.css +1 -1
  162. package/components/progressbar/progressbar.js +3 -12
  163. package/components/progressbar/progressbar.less +6 -0
  164. package/components/pull-to-refresh/pull-to-refresh-class.js +5 -12
  165. package/components/range/range-class.js +34 -27
  166. package/components/range/range-ios.less +60 -0
  167. package/components/range/range-md.less +67 -4
  168. package/components/range/range-rtl.css +1 -1
  169. package/components/range/range-vars.less +18 -13
  170. package/components/range/range.css +1 -1
  171. package/components/range/range.d.ts +3 -1
  172. package/components/range/range.js +2 -8
  173. package/components/range/range.less +11 -24
  174. package/components/searchbar/searchbar-class.js +7 -8
  175. package/components/searchbar/searchbar-ios.less +37 -13
  176. package/components/searchbar/searchbar-md.less +5 -0
  177. package/components/searchbar/searchbar-rtl.css +1 -1
  178. package/components/searchbar/searchbar-vars.less +13 -16
  179. package/components/searchbar/searchbar.css +1 -1
  180. package/components/searchbar/searchbar.js +4 -32
  181. package/components/searchbar/searchbar.less +4 -5
  182. package/components/sheet/sheet-class.js +21 -17
  183. package/components/sheet/sheet-ios.less +10 -0
  184. package/components/sheet/sheet-md.less +14 -0
  185. package/components/sheet/sheet-rtl.css +1 -1
  186. package/components/sheet/sheet-vars.less +5 -9
  187. package/components/sheet/sheet.css +1 -1
  188. package/components/sheet/sheet.js +2 -8
  189. package/components/sheet/sheet.less +5 -17
  190. package/components/skeleton/skeleton-rtl.css +1 -1
  191. package/components/skeleton/skeleton.css +1 -1
  192. package/components/smart-select/smart-select-class.js +15 -20
  193. package/components/smart-select/smart-select.d.ts +5 -7
  194. package/components/smart-select/smart-select.js +4 -4
  195. package/components/sortable/sortable.js +8 -27
  196. package/components/statusbar/statusbar.js +1 -4
  197. package/components/stepper/stepper-rtl.css +1 -1
  198. package/components/stepper/stepper-vars.less +3 -3
  199. package/components/stepper/stepper.css +1 -1
  200. package/components/stepper/stepper.js +2 -8
  201. package/components/subnavbar/subnavbar-ios.less +16 -1
  202. package/components/subnavbar/subnavbar-md.less +1 -1
  203. package/components/subnavbar/subnavbar-vars.less +12 -6
  204. package/components/subnavbar/subnavbar.less +5 -6
  205. package/components/swipeout/swipeout-ios.less +37 -0
  206. package/components/swipeout/swipeout-md.less +56 -0
  207. package/components/swipeout/swipeout-rtl.css +1 -1
  208. package/components/swipeout/swipeout-vars.less +13 -2
  209. package/components/swipeout/swipeout.css +1 -1
  210. package/components/swipeout/swipeout.js +102 -35
  211. package/components/swipeout/swipeout.less +20 -44
  212. package/components/swiper/swiper-rtl.css +1 -1
  213. package/components/swiper/swiper.css +1 -1
  214. package/components/tabs/tabs.js +3 -9
  215. package/components/text-editor/text-editor-class.js +1 -1
  216. package/components/text-editor/text-editor-rtl.css +1 -1
  217. package/components/text-editor/text-editor.css +1 -1
  218. package/components/timeline/timeline-ios.less +0 -5
  219. package/components/timeline/timeline-md.less +0 -5
  220. package/components/timeline/timeline-rtl.css +1 -1
  221. package/components/timeline/timeline-vars.less +1 -17
  222. package/components/timeline/timeline.css +1 -1
  223. package/components/timeline/timeline.less +0 -196
  224. package/components/toast/toast-class.js +2 -2
  225. package/components/toast/toast-ios.less +2 -0
  226. package/components/toast/toast-rtl.css +1 -1
  227. package/components/toast/toast-vars.less +2 -4
  228. package/components/toast/toast.css +1 -1
  229. package/components/toast/toast.less +1 -1
  230. package/components/toggle/toggle-class.js +5 -12
  231. package/components/toggle/toggle-ios.less +68 -50
  232. package/components/toggle/toggle-rtl.css +1 -1
  233. package/components/toggle/toggle-vars.less +2 -2
  234. package/components/toggle/toggle.css +1 -1
  235. package/components/toolbar/tabbar-highlight.js +134 -0
  236. package/components/toolbar/toolbar-ios.less +152 -14
  237. package/components/toolbar/toolbar-md.less +77 -3
  238. package/components/toolbar/toolbar-vars.less +14 -10
  239. package/components/toolbar/toolbar.js +32 -13
  240. package/components/toolbar/toolbar.less +8 -56
  241. package/components/tooltip/tooltip-class.js +13 -16
  242. package/components/tooltip/tooltip.js +0 -16
  243. package/components/touch-highlight/touch-highlight-ios.less +17 -0
  244. package/components/touch-highlight/touch-highlight-md.less +2 -0
  245. package/components/touch-highlight/touch-highlight-vars.less +8 -0
  246. package/components/touch-highlight/touch-highlight.d.ts +25 -0
  247. package/components/touch-highlight/touch-highlight.js +123 -0
  248. package/components/touch-highlight/touch-highlight.less +9 -0
  249. package/components/touch-ripple/touch-ripple.js +1 -4
  250. package/components/view/resizable-view.js +2 -4
  251. package/components/view/view-class.js +1 -15
  252. package/components/view/view.d.ts +0 -4
  253. package/components/view/view.js +1 -5
  254. package/components/virtual-list/virtual-list-class.js +2 -8
  255. package/framework7-bundle-rtl.css +2284 -3019
  256. package/framework7-bundle-rtl.min.css +9 -7
  257. package/framework7-bundle.css +2245 -2978
  258. package/framework7-bundle.esm.js +5 -4
  259. package/framework7-bundle.js +7170 -6469
  260. package/framework7-bundle.js.map +1 -1
  261. package/framework7-bundle.less +4 -3
  262. package/framework7-bundle.min.css +9 -7
  263. package/framework7-bundle.min.js +4 -4
  264. package/framework7-bundle.min.js.map +1 -1
  265. package/framework7-lite-bundle.esm.js +5 -4
  266. package/framework7-lite.esm.js +5 -4
  267. package/framework7-rtl.css +509 -844
  268. package/framework7-rtl.min.css +8 -6
  269. package/framework7-types.d.ts +5 -1
  270. package/framework7.css +509 -843
  271. package/framework7.d.ts +4 -0
  272. package/framework7.esm.js +5 -4
  273. package/framework7.less +4 -3
  274. package/framework7.min.css +8 -6
  275. package/less/mixins.less +10 -12
  276. package/modules/component/$h.js +1 -4
  277. package/modules/component/$jsx.js +1 -4
  278. package/modules/component/component-class.js +49 -114
  279. package/modules/component/component.js +6 -7
  280. package/modules/component/eventslisteners.js +1 -4
  281. package/modules/component/snabbdom/modules/hero.js +0 -1
  282. package/modules/component/snabbdom/modules/style.js +1 -1
  283. package/modules/component/vdom.js +17 -29
  284. package/modules/router/back.js +22 -96
  285. package/modules/router/clear-previous-history.js +1 -7
  286. package/modules/router/component-loader.js +23 -32
  287. package/modules/router/modal.js +1 -4
  288. package/modules/router/navigate.js +28 -167
  289. package/modules/router/redirect.js +1 -5
  290. package/modules/router/router-class.js +21 -288
  291. package/modules/router/swipe-back.js +10 -318
  292. package/modules/router/tab.js +1 -4
  293. package/modules/store/create-store.js +2 -8
  294. package/modules/touch/touch.d.ts +5 -3
  295. package/modules/touch/touch.js +22 -36
  296. package/package.json +4 -4
  297. package/shared/$jsx.js +1 -4
  298. package/shared/class.js +5 -26
  299. package/shared/constructor-methods.js +4 -19
  300. package/shared/events-class.js +3 -12
  301. package/shared/get-device.js +4 -11
  302. package/shared/get-support.d.ts +0 -6
  303. package/shared/get-support.js +1 -20
  304. package/shared/material-color-utils.js +2102 -693
  305. package/shared/material-colors.js +94 -23
  306. package/shared/modal-methods.js +2 -8
  307. package/shared/utils.js +23 -45
package/components/timeline/timeline-ios.less CHANGED
@@ -3,9 +3,4 @@
3
3
  border-radius: 3px;
4
4
  border: 1px solid rgba(0, 0, 0, 0.1);
5
5
  }
6
- .timeline-year-title {
7
- span {
8
- margin-top: 3px;
9
- }
10
- }
11
6
  }
package/components/timeline/timeline-md.less CHANGED
@@ -1,7 +1,2 @@
1
1
  .md {
2
- .timeline-year-title {
3
- span {
4
- margin-top: 2px;
5
- }
6
- }
7
2
  }
package/components/timeline/timeline-rtl.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-timeline-inner-block-margin-vertical:16px;--f7-timeline-divider-margin-horizontal:16px;--f7-timeline-horizontal-date-height:34px;--f7-timeline-year-height:24px;--f7-timeline-year-font-weight:inherit;--f7-timeline-month-height:24px;--f7-timeline-month-font-size:inherit;--f7-timeline-month-font-weight:inherit;--f7-timeline-item-text-font-weight:inherit;--f7-timeline-item-subtitle-font-weight:inherit}.ios{--f7-timeline-divider-color:#bbb;--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:35px;--f7-timeline-item-inner-border-radius:7px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:17px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:600;--f7-timeline-item-subtitle-font-size:15px;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-color:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-year-font-size:16px;--f7-timeline-horizontal-item-padding:10px;--f7-timeline-item-inner-bg-color:#fff;--f7-timeline-item-time-text-color:rgba(0, 0, 0, 0.45);--f7-timeline-horizontal-item-border-color:rgba(0, 0, 0, 0.22);--f7-timeline-horizontal-item-date-border-color:rgba(0, 0, 0, 0.22)}.ios .dark,.ios.dark{--f7-timeline-horizontal-item-border-color:rgba(255, 255, 255, 0.15);--f7-timeline-horizontal-item-date-border-color:rgba(255, 255, 255, 0.15);--f7-timeline-item-inner-bg-color:#1c1c1d;--f7-timeline-item-time-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:32px;--f7-timeline-item-inner-border-radius:16px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:16px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:400;--f7-timeline-item-subtitle-font-size:inherit;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-year-font-size:16px;--f7-timeline-horizontal-item-padding:12px;--f7-timeline-horizontal-item-date-border-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-timeline-divider-color:var(--f7-md-outline);--f7-timeline-item-text-color:var(--f7-md-on-surface);--f7-timeline-horizontal-item-border-color:var(--f7-md-outline);--f7-timeline-item-inner-bg-color:var(--f7-md-surface-1);--f7-timeline-item-time-text-color:var(--f7-md-on-surface-variant)}.timeline{box-sizing:border-box;margin:var(--f7-timeline-margin-vertical) 0;padding:0 var(--f7-timeline-padding-horizontal);padding-top:0;padding-bottom:0;padding-left:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));padding-right:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right))}.block-strong .timeline{padding:0;margin:0}.timeline-item{display:flex;justify-content:flex-start;overflow:hidden;box-sizing:border-box;position:relative;padding:2px 0px var(--f7-timeline-padding-horizontal)}.timeline-item:last-child{padding-bottom:2px}.timeline-item-date{flex-shrink:0;width:50px;text-align:right;box-sizing:border-box}.timeline-item-date small{font-size:10px}.timeline-item-content{margin:2px;min-width:0;position:relative;flex-shrink:10}.timeline-item-content .block,.timeline-item-content .card,.timeline-item-content .list,.timeline-item-content.block,.timeline-item-content.card,.timeline-item-content.list{margin:0;width:100%}.timeline-item-content .block+.block,.timeline-item-content .block+.card,.timeline-item-content .block+.list,.timeline-item-content .card+.block,.timeline-item-content .card+.card,.timeline-item-content .card+.list,.timeline-item-content .list+.block,.timeline-item-content .list+.card,.timeline-item-content .list+.list{margin:var(--f7-timeline-inner-block-margin-vertical) 0 0}.timeline-item-content h1:first-child,.timeline-item-content h2:first-child,.timeline-item-content h3:first-child,.timeline-item-content h4:first-child,.timeline-item-content ol:first-child,.timeline-item-content p:first-child,.timeline-item-content ul:first-child{margin-top:0}.timeline-item-content h1:last-child,.timeline-item-content h2:last-child,.timeline-item-content h3:last-child,.timeline-item-content h4:last-child,.timeline-item-content ol:last-child,.timeline-item-content p:last-child,.timeline-item-content ul:last-child{margin-bottom:0}.timeline-item-inner{background:var(--f7-timeline-item-inner-bg-color);box-sizing:border-box;border-radius:var(--f7-timeline-item-inner-border-radius);padding:8px var(--f7-timeline-padding-horizontal)}.timeline-item-inner+.timeline-item-inner{margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-inner .block{padding:0;color:inherit}.timeline-item-inner .block-strong{padding-left:0;padding-right:0;margin:0}.timeline-item-inner .block-strong:after,.timeline-item-inner .block-strong:before{display:none!important}.timeline-item-inner .list ul:after,.timeline-item-inner .list ul:before{display:none!important}.timeline-item-divider{width:1px;position:relative;width:10px;height:10px;background:var(--f7-timeline-divider-color);border-radius:50%;flex-shrink:0;margin:3px var(--f7-timeline-divider-margin-horizontal) 0}.timeline-item-divider:after,.timeline-item-divider:before{content:' ';width:1px;height:100vh;position:absolute;left:50%;background:inherit;transform:translate3d(-50%,0,0)}.timeline-item-divider:after{top:100%}.timeline-item-divider:before{bottom:100%}.timeline-item:last-child .timeline-item-divider:after{display:none}.timeline-item:first-child .timeline-item-divider:before{display:none}.timeline-item-time{font-size:var(--f7-timeline-item-time-font-size);margin-top:var(--f7-timeline-inner-block-margin-vertical);color:var(--f7-timeline-item-time-text-color)}.timeline-item-time:first-child,.timeline-item-time:last-child{margin-top:0}.timeline-item-title+.timeline-item-time{margin-top:0}.timeline-item-title{font-size:var(--f7-timeline-item-title-font-size);font-weight:var(--f7-timeline-item-title-font-weight);line-height:var(--f7-timeline-item-title-line-height)}.timeline-item-subtitle{font-size:var(--f7-timeline-item-subtitle-font-size);font-weight:var(--f7-timeline-item-subtitle-font-weight);line-height:var(--f7-timeline-item-subtitle-line-height)}.timeline-item-text{color:var(--f7-timeline-item-text-color);font-size:var(--f7-timeline-item-text-font-size);font-weight:var(--f7-timeline-item-text-font-weight);line-height:var(--f7-timeline-item-text-line-height)}.timeline-sides .timeline-item,.timeline-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.timeline-sides .timeline-item .timeline-item-date,.timeline-sides .timeline-item-right .timeline-item-date{text-align:left}.timeline-sides .timeline-item-left,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.timeline-sides .timeline-item-left .timeline-item-date,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}@media (min-width:480px){.xsmall-sides .timeline-item,.xsmall-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xsmall-sides .timeline-item .timeline-item-date,.xsmall-sides .timeline-item-right .timeline-item-date{text-align:left}.xsmall-sides .timeline-item-left,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xsmall-sides .timeline-item-left .timeline-item-date,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:568px){.small-sides .timeline-item,.small-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.small-sides .timeline-item .timeline-item-date,.small-sides .timeline-item-right .timeline-item-date{text-align:left}.small-sides .timeline-item-left,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.small-sides .timeline-item-left .timeline-item-date,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:768px){.medium-sides .timeline-item,.medium-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.medium-sides .timeline-item .timeline-item-date,.medium-sides .timeline-item-right .timeline-item-date{text-align:left}.medium-sides .timeline-item-left,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.medium-sides .timeline-item-left .timeline-item-date,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:1024px){.large-sides .timeline-item,.large-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.large-sides .timeline-item .timeline-item-date,.large-sides .timeline-item-right .timeline-item-date{text-align:left}.large-sides .timeline-item-left,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.large-sides .timeline-item-left .timeline-item-date,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:1200px){.xlarge-sides .timeline-item,.xlarge-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xlarge-sides .timeline-item .timeline-item-date,.xlarge-sides .timeline-item-right .timeline-item-date{text-align:left}.xlarge-sides .timeline-item-left,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xlarge-sides .timeline-item-left .timeline-item-date,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}.timeline-horizontal{height:100%;display:flex;padding:0;margin:0;position:relative;padding-left:var(--f7-safe-area-left);padding-right:0}.timeline-horizontal .timeline-item{display:block;width:100/3vw;margin:0;padding:0;flex-shrink:0;position:relative;height:100%;padding-top:var(--f7-timeline-horizontal-date-height)!important;padding-bottom:var(--f7-timeline-horizontal-item-padding)}.timeline-horizontal .timeline-item:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-horizontal .timeline-item-date{padding:0px var(--f7-timeline-horizontal-item-padding);width:auto;text-align:left;line-height:var(--f7-timeline-horizontal-date-height);position:absolute;left:0;top:0;width:100%;height:var(--f7-timeline-horizontal-date-height);background-color:var(--f7-bars-bg-color);color:var(--f7-bars-text-color);text-align:right}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .timeline-horizontal .timeline-item-date{background-color:rgba(var(--f7-bars-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.timeline-horizontal .timeline-item-date:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-date-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-horizontal .timeline-item-content{padding:var(--f7-timeline-horizontal-item-padding);height:calc(100vw - var(--f7-timeline-horizontal-item-padding));overflow:auto;-webkit-overflow-scrolling:touch;margin:0}.timeline-horizontal .timeline-item-divider{display:none}.timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after,.timeline-horizontal>.timeline-item:last-child:after{display:none!important}.timeline-horizontal.timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.timeline-cols-20 .timeline-item{width:calc(100vw / 20)}@media (min-width:480px){.timeline-horizontal.xsmall-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.xsmall-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.xsmall-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.xsmall-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.xsmall-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.xsmall-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.xsmall-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.xsmall-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.xsmall-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.xsmall-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.xsmall-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.xsmall-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.xsmall-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.xsmall-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.xsmall-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.xsmall-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.xsmall-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.xsmall-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.xsmall-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.xsmall-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:568px){.timeline-horizontal.small-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.small-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.small-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.small-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.small-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.small-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.small-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.small-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.small-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.small-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.small-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.small-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.small-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.small-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.small-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.small-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.small-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.small-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.small-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.small-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:768px){.timeline-horizontal.medium-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.medium-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.medium-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.medium-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.medium-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.medium-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.medium-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.medium-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.medium-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.medium-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.medium-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.medium-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.medium-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.medium-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.medium-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.medium-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.medium-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.medium-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.medium-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.medium-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:1024px){.timeline-horizontal.large-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.large-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.large-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.large-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.large-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.large-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.large-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.large-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.large-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.large-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.large-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.large-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.large-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.large-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.large-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.large-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.large-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.large-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.large-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.large-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:1200px){.timeline-horizontal.xlarge-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.xlarge-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.xlarge-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.xlarge-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.xlarge-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.xlarge-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.xlarge-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.xlarge-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.xlarge-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.xlarge-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.xlarge-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.xlarge-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.xlarge-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.xlarge-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.xlarge-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.xlarge-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.xlarge-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.xlarge-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.xlarge-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.xlarge-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}.timeline-year{padding-top:var(--f7-timeline-year-height)}.timeline-year:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-year:last-child:after{display:none!important}.timeline-month{padding-top:var(--f7-timeline-month-height)}.timeline-month .timeline-item:before{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-month,.timeline-year{display:flex;flex-shrink:0;position:relative;box-sizing:border-box;height:100%}.timeline-year-title{line-height:var(--f7-timeline-year-height);height:var(--f7-timeline-year-height);font-size:var(--f7-timeline-year-font-size);font-weight:var(--f7-timeline-year-font-weight)}.timeline-month-title{line-height:var(--f7-timeline-month-height);height:var(--f7-timeline-month-height);font-size:var(--f7-timeline-month-font-size);font-weight:var(--f7-timeline-month-font-weight)}.timeline-month-title,.timeline-year-title{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;padding:0 var(--f7-timeline-horizontal-item-padding);background-color:var(--f7-bars-bg-color);color:var(--f7-bars-text-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .timeline-month-title,.ios-translucent-bars .timeline-year-title{background-color:rgba(var(--f7-bars-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.timeline-month-title span,.timeline-year-title span{display:inline-block;position:sticky;right:calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-right))}.timeline-month-title span{margin-top:-2px}.timeline-year:first-child .timeline-month:first-child .timeline-month-title,.timeline-year:first-child .timeline-year-title,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title{left:calc(var(--f7-safe-area-left) * -1);right:0;width:auto}.timeline-horizontal .timeline-item:first-child,.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-item:first-child,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title+.timeline-item{overflow:visible}.timeline-horizontal .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title+.timeline-item .timeline-item-date{width:auto;padding-left:calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));left:calc(0px - var(--f7-safe-area-left));right:0}.timeline-year:last-child .timeline-month:last-child .timeline-month-title,.timeline-year:last-child .timeline-year-title{width:auto;right:calc(0px - var(--f7-safe-area-right))}.timeline-horizontal .timeline-item:last-child,.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child{overflow:visible}.timeline-horizontal .timeline-item:last-child .timeline-item-date,.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date{width:auto;right:calc(0px - var(--f7-safe-area-right));left:0}.ios .block-strong .timeline-item-inner{border-radius:3px;border:1px solid rgba(0,0,0,.1)}.ios .timeline-year-title span{margin-top:3px}.md .timeline-year-title span{margin-top:2px}
1
+ :root{--f7-timeline-inner-block-margin-vertical:16px;--f7-timeline-divider-margin-horizontal:16px;--f7-timeline-item-text-font-weight:inherit;--f7-timeline-item-subtitle-font-weight:inherit}.ios{--f7-timeline-divider-color:#bbb;--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:35px;--f7-timeline-item-inner-border-radius:24px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:17px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:600;--f7-timeline-item-subtitle-font-size:15px;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-color:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-item-inner-bg-color:#fff;--f7-timeline-item-time-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-timeline-item-inner-bg-color:#1c1c1d;--f7-timeline-item-time-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:32px;--f7-timeline-item-inner-border-radius:16px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:16px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:400;--f7-timeline-item-subtitle-font-size:inherit;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-line-height:inherit}.md,.md .dark,.md [class*=color-]{--f7-timeline-divider-color:var(--f7-md-outline);--f7-timeline-item-text-color:var(--f7-md-on-surface);--f7-timeline-item-inner-bg-color:var(--f7-md-surface-1);--f7-timeline-item-time-text-color:var(--f7-md-on-surface-variant)}.timeline{box-sizing:border-box;margin:var(--f7-timeline-margin-vertical) 0;padding:0 var(--f7-timeline-padding-horizontal);padding-top:0;padding-bottom:0;padding-left:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));padding-right:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right))}.block-strong .timeline{padding:0;margin:0}.timeline-item{display:flex;justify-content:flex-start;overflow:hidden;box-sizing:border-box;position:relative;padding:2px 0px var(--f7-timeline-padding-horizontal)}.timeline-item:last-child{padding-bottom:2px}.timeline-item-date{flex-shrink:0;width:50px;text-align:right;box-sizing:border-box}.timeline-item-date small{font-size:10px}.timeline-item-content{margin:2px;min-width:0;position:relative;flex-shrink:10}.timeline-item-content .block,.timeline-item-content .card,.timeline-item-content .list,.timeline-item-content.block,.timeline-item-content.card,.timeline-item-content.list{margin:0;width:100%}.timeline-item-content .block+.block,.timeline-item-content .block+.card,.timeline-item-content .block+.list,.timeline-item-content .card+.block,.timeline-item-content .card+.card,.timeline-item-content .card+.list,.timeline-item-content .list+.block,.timeline-item-content .list+.card,.timeline-item-content .list+.list{margin:var(--f7-timeline-inner-block-margin-vertical) 0 0}.timeline-item-content h1:first-child,.timeline-item-content h2:first-child,.timeline-item-content h3:first-child,.timeline-item-content h4:first-child,.timeline-item-content ol:first-child,.timeline-item-content p:first-child,.timeline-item-content ul:first-child{margin-top:0}.timeline-item-content h1:last-child,.timeline-item-content h2:last-child,.timeline-item-content h3:last-child,.timeline-item-content h4:last-child,.timeline-item-content ol:last-child,.timeline-item-content p:last-child,.timeline-item-content ul:last-child{margin-bottom:0}.timeline-item-inner{background:var(--f7-timeline-item-inner-bg-color);box-sizing:border-box;border-radius:var(--f7-timeline-item-inner-border-radius);padding:8px var(--f7-timeline-padding-horizontal)}.timeline-item-inner+.timeline-item-inner{margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-inner .block{padding:0;color:inherit}.timeline-item-inner .block-strong{padding-left:0;padding-right:0;margin:0}.timeline-item-inner .block-strong:after,.timeline-item-inner .block-strong:before{display:none!important}.timeline-item-inner .list ul:after,.timeline-item-inner .list ul:before{display:none!important}.timeline-item-divider{width:1px;position:relative;width:10px;height:10px;background:var(--f7-timeline-divider-color);border-radius:50%;flex-shrink:0;margin:3px var(--f7-timeline-divider-margin-horizontal) 0}.timeline-item-divider:after,.timeline-item-divider:before{content:' ';width:1px;height:100vh;position:absolute;left:50%;background:inherit;transform:translate3d(-50%,0,0)}.timeline-item-divider:after{top:100%}.timeline-item-divider:before{bottom:100%}.timeline-item:last-child .timeline-item-divider:after{display:none}.timeline-item:first-child .timeline-item-divider:before{display:none}.timeline-item-time{font-size:var(--f7-timeline-item-time-font-size);margin-top:var(--f7-timeline-inner-block-margin-vertical);color:var(--f7-timeline-item-time-text-color)}.timeline-item-time:first-child,.timeline-item-time:last-child{margin-top:0}.timeline-item-title+.timeline-item-time{margin-top:0}.timeline-item-title{font-size:var(--f7-timeline-item-title-font-size);font-weight:var(--f7-timeline-item-title-font-weight);line-height:var(--f7-timeline-item-title-line-height)}.timeline-item-subtitle{font-size:var(--f7-timeline-item-subtitle-font-size);font-weight:var(--f7-timeline-item-subtitle-font-weight);line-height:var(--f7-timeline-item-subtitle-line-height)}.timeline-item-text{color:var(--f7-timeline-item-text-color);font-size:var(--f7-timeline-item-text-font-size);font-weight:var(--f7-timeline-item-text-font-weight);line-height:var(--f7-timeline-item-text-line-height)}.timeline-sides .timeline-item,.timeline-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.timeline-sides .timeline-item .timeline-item-date,.timeline-sides .timeline-item-right .timeline-item-date{text-align:left}.timeline-sides .timeline-item-left,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.timeline-sides .timeline-item-left .timeline-item-date,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}@media (min-width:480px){.xsmall-sides .timeline-item,.xsmall-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xsmall-sides .timeline-item .timeline-item-date,.xsmall-sides .timeline-item-right .timeline-item-date{text-align:left}.xsmall-sides .timeline-item-left,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xsmall-sides .timeline-item-left .timeline-item-date,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:568px){.small-sides .timeline-item,.small-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.small-sides .timeline-item .timeline-item-date,.small-sides .timeline-item-right .timeline-item-date{text-align:left}.small-sides .timeline-item-left,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.small-sides .timeline-item-left .timeline-item-date,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:768px){.medium-sides .timeline-item,.medium-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.medium-sides .timeline-item .timeline-item-date,.medium-sides .timeline-item-right .timeline-item-date{text-align:left}.medium-sides .timeline-item-left,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.medium-sides .timeline-item-left .timeline-item-date,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:1024px){.large-sides .timeline-item,.large-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.large-sides .timeline-item .timeline-item-date,.large-sides .timeline-item-right .timeline-item-date{text-align:left}.large-sides .timeline-item-left,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.large-sides .timeline-item-left .timeline-item-date,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}@media (min-width:1200px){.xlarge-sides .timeline-item,.xlarge-sides .timeline-item-right{margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xlarge-sides .timeline-item .timeline-item-date,.xlarge-sides .timeline-item-right .timeline-item-date{text-align:left}.xlarge-sides .timeline-item-left,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xlarge-sides .timeline-item-left .timeline-item-date,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:right}}.ios .block-strong .timeline-item-inner{border-radius:3px;border:1px solid rgba(0,0,0,.1)}
package/components/timeline/timeline-vars.less CHANGED
@@ -1,12 +1,6 @@
1
1
  :root {
2
2
  --f7-timeline-inner-block-margin-vertical: 16px;
3
3
  --f7-timeline-divider-margin-horizontal: 16px;
4
- --f7-timeline-horizontal-date-height: 34px;
5
- --f7-timeline-year-height: 24px;
6
- --f7-timeline-year-font-weight: inherit;
7
- --f7-timeline-month-height: 24px;
8
- --f7-timeline-month-font-size: inherit;
9
- --f7-timeline-month-font-weight: inherit;
10
4
  --f7-timeline-item-text-font-weight: inherit;
11
5
  --f7-timeline-item-subtitle-font-weight: inherit;
12
6
  }
@@ -14,7 +8,7 @@
14
8
  --f7-timeline-divider-color: #bbb;
15
9
  --f7-timeline-padding-horizontal: 16px;
16
10
  --f7-timeline-margin-vertical: 35px;
17
- --f7-timeline-item-inner-border-radius: 7px;
11
+ --f7-timeline-item-inner-border-radius: 24px;
18
12
  --f7-timeline-item-time-font-size: 13px;
19
13
  --f7-timeline-item-title-font-size: 17px;
20
14
  --f7-timeline-item-title-line-height: inherit;
@@ -24,17 +18,11 @@
24
18
  --f7-timeline-item-text-font-size: inherit;
25
19
  --f7-timeline-item-text-color: inherit;
26
20
  --f7-timeline-item-text-line-height: inherit;
27
- --f7-timeline-year-font-size: 16px;
28
- --f7-timeline-horizontal-item-padding: 10px;
29
21
  .light-vars({
30
22
  --f7-timeline-item-inner-bg-color: #fff;
31
23
  --f7-timeline-item-time-text-color: rgba(0,0,0,0.45);
32
- --f7-timeline-horizontal-item-border-color: rgba(0,0,0,0.22);
33
- --f7-timeline-horizontal-item-date-border-color: rgba(0,0,0,0.22);
34
24
  });
35
25
  .dark-vars({
36
- --f7-timeline-horizontal-item-border-color: rgba(255, 255, 255, 0.15);
37
- --f7-timeline-horizontal-item-date-border-color: rgba(255, 255, 255, 0.15);
38
26
  --f7-timeline-item-inner-bg-color: #1c1c1d;
39
27
  --f7-timeline-item-time-text-color: rgba(255,255,255,0.55);
40
28
  });
@@ -51,14 +39,10 @@
51
39
  --f7-timeline-item-subtitle-line-height: inherit;
52
40
  --f7-timeline-item-text-font-size: inherit;
53
41
  --f7-timeline-item-text-line-height: inherit;
54
- --f7-timeline-year-font-size: 16px;
55
- --f7-timeline-horizontal-item-padding: 12px;
56
- --f7-timeline-horizontal-item-date-border-color: transparent;
57
42
  });
58
43
  .md-color-vars({
59
44
  --f7-timeline-divider-color: var(--f7-md-outline);
60
45
  --f7-timeline-item-text-color: var(--f7-md-on-surface);
61
- --f7-timeline-horizontal-item-border-color: var(--f7-md-outline);
62
46
  --f7-timeline-item-inner-bg-color: var(--f7-md-surface-1);
63
47
  --f7-timeline-item-time-text-color: var(--f7-md-on-surface-variant);
64
48
  });
package/components/timeline/timeline.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-timeline-inner-block-margin-vertical:16px;--f7-timeline-divider-margin-horizontal:16px;--f7-timeline-horizontal-date-height:34px;--f7-timeline-year-height:24px;--f7-timeline-year-font-weight:inherit;--f7-timeline-month-height:24px;--f7-timeline-month-font-size:inherit;--f7-timeline-month-font-weight:inherit;--f7-timeline-item-text-font-weight:inherit;--f7-timeline-item-subtitle-font-weight:inherit}.ios{--f7-timeline-divider-color:#bbb;--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:35px;--f7-timeline-item-inner-border-radius:7px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:17px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:600;--f7-timeline-item-subtitle-font-size:15px;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-color:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-year-font-size:16px;--f7-timeline-horizontal-item-padding:10px;--f7-timeline-item-inner-bg-color:#fff;--f7-timeline-item-time-text-color:rgba(0, 0, 0, 0.45);--f7-timeline-horizontal-item-border-color:rgba(0, 0, 0, 0.22);--f7-timeline-horizontal-item-date-border-color:rgba(0, 0, 0, 0.22)}.ios .dark,.ios.dark{--f7-timeline-horizontal-item-border-color:rgba(255, 255, 255, 0.15);--f7-timeline-horizontal-item-date-border-color:rgba(255, 255, 255, 0.15);--f7-timeline-item-inner-bg-color:#1c1c1d;--f7-timeline-item-time-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:32px;--f7-timeline-item-inner-border-radius:16px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:16px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:400;--f7-timeline-item-subtitle-font-size:inherit;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-year-font-size:16px;--f7-timeline-horizontal-item-padding:12px;--f7-timeline-horizontal-item-date-border-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-timeline-divider-color:var(--f7-md-outline);--f7-timeline-item-text-color:var(--f7-md-on-surface);--f7-timeline-horizontal-item-border-color:var(--f7-md-outline);--f7-timeline-item-inner-bg-color:var(--f7-md-surface-1);--f7-timeline-item-time-text-color:var(--f7-md-on-surface-variant)}.timeline{box-sizing:border-box;margin:var(--f7-timeline-margin-vertical) 0;padding:0 var(--f7-timeline-padding-horizontal);padding-top:0;padding-bottom:0;padding-left:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));padding-right:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right))}.block-strong .timeline{padding:0;margin:0}.timeline-item{display:flex;justify-content:flex-start;overflow:hidden;box-sizing:border-box;position:relative;padding:2px 0px var(--f7-timeline-padding-horizontal)}.timeline-item:last-child{padding-bottom:2px}.timeline-item-date{flex-shrink:0;width:50px;text-align:right;box-sizing:border-box}.timeline-item-date small{font-size:10px}.timeline-item-content{margin:2px;min-width:0;position:relative;flex-shrink:10}.timeline-item-content .block,.timeline-item-content .card,.timeline-item-content .list,.timeline-item-content.block,.timeline-item-content.card,.timeline-item-content.list{margin:0;width:100%}.timeline-item-content .block+.block,.timeline-item-content .block+.card,.timeline-item-content .block+.list,.timeline-item-content .card+.block,.timeline-item-content .card+.card,.timeline-item-content .card+.list,.timeline-item-content .list+.block,.timeline-item-content .list+.card,.timeline-item-content .list+.list{margin:var(--f7-timeline-inner-block-margin-vertical) 0 0}.timeline-item-content h1:first-child,.timeline-item-content h2:first-child,.timeline-item-content h3:first-child,.timeline-item-content h4:first-child,.timeline-item-content ol:first-child,.timeline-item-content p:first-child,.timeline-item-content ul:first-child{margin-top:0}.timeline-item-content h1:last-child,.timeline-item-content h2:last-child,.timeline-item-content h3:last-child,.timeline-item-content h4:last-child,.timeline-item-content ol:last-child,.timeline-item-content p:last-child,.timeline-item-content ul:last-child{margin-bottom:0}.timeline-item-inner{background:var(--f7-timeline-item-inner-bg-color);box-sizing:border-box;border-radius:var(--f7-timeline-item-inner-border-radius);padding:8px var(--f7-timeline-padding-horizontal)}.timeline-item-inner+.timeline-item-inner{margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-inner .block{padding:0;color:inherit}.timeline-item-inner .block-strong{padding-left:0;padding-right:0;margin:0}.timeline-item-inner .block-strong:after,.timeline-item-inner .block-strong:before{display:none!important}.timeline-item-inner .list ul:after,.timeline-item-inner .list ul:before{display:none!important}.timeline-item-divider{width:1px;position:relative;width:10px;height:10px;background:var(--f7-timeline-divider-color);border-radius:50%;flex-shrink:0;margin:3px var(--f7-timeline-divider-margin-horizontal) 0}.timeline-item-divider:after,.timeline-item-divider:before{content:' ';width:1px;height:100vh;position:absolute;left:50%;background:inherit;transform:translate3d(-50%,0,0)}.timeline-item-divider:after{top:100%}.timeline-item-divider:before{bottom:100%}.timeline-item:last-child .timeline-item-divider:after{display:none}.timeline-item:first-child .timeline-item-divider:before{display:none}.timeline-item-time{font-size:var(--f7-timeline-item-time-font-size);margin-top:var(--f7-timeline-inner-block-margin-vertical);color:var(--f7-timeline-item-time-text-color)}.timeline-item-time:first-child,.timeline-item-time:last-child{margin-top:0}.timeline-item-title+.timeline-item-time{margin-top:0}.timeline-item-title{font-size:var(--f7-timeline-item-title-font-size);font-weight:var(--f7-timeline-item-title-font-weight);line-height:var(--f7-timeline-item-title-line-height)}.timeline-item-subtitle{font-size:var(--f7-timeline-item-subtitle-font-size);font-weight:var(--f7-timeline-item-subtitle-font-weight);line-height:var(--f7-timeline-item-subtitle-line-height)}.timeline-item-text{color:var(--f7-timeline-item-text-color);font-size:var(--f7-timeline-item-text-font-size);font-weight:var(--f7-timeline-item-text-font-weight);line-height:var(--f7-timeline-item-text-line-height)}.timeline-sides .timeline-item,.timeline-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.timeline-sides .timeline-item .timeline-item-date,.timeline-sides .timeline-item-right .timeline-item-date{text-align:right}.timeline-sides .timeline-item-left,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.timeline-sides .timeline-item-left .timeline-item-date,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}@media (min-width:480px){.xsmall-sides .timeline-item,.xsmall-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xsmall-sides .timeline-item .timeline-item-date,.xsmall-sides .timeline-item-right .timeline-item-date{text-align:right}.xsmall-sides .timeline-item-left,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xsmall-sides .timeline-item-left .timeline-item-date,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:568px){.small-sides .timeline-item,.small-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.small-sides .timeline-item .timeline-item-date,.small-sides .timeline-item-right .timeline-item-date{text-align:right}.small-sides .timeline-item-left,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.small-sides .timeline-item-left .timeline-item-date,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:768px){.medium-sides .timeline-item,.medium-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.medium-sides .timeline-item .timeline-item-date,.medium-sides .timeline-item-right .timeline-item-date{text-align:right}.medium-sides .timeline-item-left,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.medium-sides .timeline-item-left .timeline-item-date,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1024px){.large-sides .timeline-item,.large-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.large-sides .timeline-item .timeline-item-date,.large-sides .timeline-item-right .timeline-item-date{text-align:right}.large-sides .timeline-item-left,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.large-sides .timeline-item-left .timeline-item-date,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1200px){.xlarge-sides .timeline-item,.xlarge-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xlarge-sides .timeline-item .timeline-item-date,.xlarge-sides .timeline-item-right .timeline-item-date{text-align:right}.xlarge-sides .timeline-item-left,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xlarge-sides .timeline-item-left .timeline-item-date,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}.timeline-horizontal{height:100%;display:flex;padding:0;margin:0;position:relative;padding-left:var(--f7-safe-area-left);padding-right:0}.timeline-horizontal .timeline-item{display:block;width:100/3vw;margin:0;padding:0;flex-shrink:0;position:relative;height:100%;padding-top:var(--f7-timeline-horizontal-date-height)!important;padding-bottom:var(--f7-timeline-horizontal-item-padding)}.timeline-horizontal .timeline-item:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-horizontal .timeline-item-date{padding:0px var(--f7-timeline-horizontal-item-padding);width:auto;line-height:var(--f7-timeline-horizontal-date-height);position:absolute;left:0;top:0;width:100%;height:var(--f7-timeline-horizontal-date-height);background-color:var(--f7-bars-bg-color);color:var(--f7-bars-text-color);text-align:left}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .timeline-horizontal .timeline-item-date{background-color:rgba(var(--f7-bars-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.timeline-horizontal .timeline-item-date:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-date-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-horizontal .timeline-item-content{padding:var(--f7-timeline-horizontal-item-padding);height:calc(100vw - var(--f7-timeline-horizontal-item-padding));overflow:auto;-webkit-overflow-scrolling:touch;margin:0}.timeline-horizontal .timeline-item-divider{display:none}.timeline-horizontal .timeline-month:last-child .timeline-item:last-child:after,.timeline-horizontal>.timeline-item:last-child:after{display:none!important}.timeline-horizontal.timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.timeline-cols-20 .timeline-item{width:calc(100vw / 20)}@media (min-width:480px){.timeline-horizontal.xsmall-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.xsmall-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.xsmall-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.xsmall-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.xsmall-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.xsmall-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.xsmall-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.xsmall-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.xsmall-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.xsmall-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.xsmall-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.xsmall-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.xsmall-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.xsmall-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.xsmall-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.xsmall-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.xsmall-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.xsmall-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.xsmall-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.xsmall-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:568px){.timeline-horizontal.small-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.small-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.small-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.small-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.small-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.small-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.small-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.small-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.small-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.small-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.small-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.small-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.small-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.small-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.small-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.small-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.small-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.small-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.small-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.small-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:768px){.timeline-horizontal.medium-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.medium-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.medium-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.medium-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.medium-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.medium-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.medium-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.medium-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.medium-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.medium-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.medium-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.medium-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.medium-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.medium-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.medium-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.medium-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.medium-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.medium-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.medium-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.medium-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:1024px){.timeline-horizontal.large-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.large-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.large-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.large-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.large-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.large-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.large-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.large-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.large-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.large-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.large-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.large-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.large-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.large-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.large-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.large-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.large-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.large-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.large-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.large-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}@media (min-width:1200px){.timeline-horizontal.xlarge-timeline-cols-1 .timeline-item{width:calc(100vw / 1)}.timeline-horizontal.xlarge-timeline-cols-2 .timeline-item{width:calc(100vw / 2)}.timeline-horizontal.xlarge-timeline-cols-3 .timeline-item{width:calc(100vw / 3)}.timeline-horizontal.xlarge-timeline-cols-4 .timeline-item{width:calc(100vw / 4)}.timeline-horizontal.xlarge-timeline-cols-5 .timeline-item{width:calc(100vw / 5)}.timeline-horizontal.xlarge-timeline-cols-6 .timeline-item{width:calc(100vw / 6)}.timeline-horizontal.xlarge-timeline-cols-7 .timeline-item{width:calc(100vw / 7)}.timeline-horizontal.xlarge-timeline-cols-8 .timeline-item{width:calc(100vw / 8)}.timeline-horizontal.xlarge-timeline-cols-9 .timeline-item{width:calc(100vw / 9)}.timeline-horizontal.xlarge-timeline-cols-10 .timeline-item{width:calc(100vw / 10)}.timeline-horizontal.xlarge-timeline-cols-11 .timeline-item{width:calc(100vw / 11)}.timeline-horizontal.xlarge-timeline-cols-12 .timeline-item{width:calc(100vw / 12)}.timeline-horizontal.xlarge-timeline-cols-13 .timeline-item{width:calc(100vw / 13)}.timeline-horizontal.xlarge-timeline-cols-14 .timeline-item{width:calc(100vw / 14)}.timeline-horizontal.xlarge-timeline-cols-15 .timeline-item{width:calc(100vw / 15)}.timeline-horizontal.xlarge-timeline-cols-16 .timeline-item{width:calc(100vw / 16)}.timeline-horizontal.xlarge-timeline-cols-17 .timeline-item{width:calc(100vw / 17)}.timeline-horizontal.xlarge-timeline-cols-18 .timeline-item{width:calc(100vw / 18)}.timeline-horizontal.xlarge-timeline-cols-19 .timeline-item{width:calc(100vw / 19)}.timeline-horizontal.xlarge-timeline-cols-20 .timeline-item{width:calc(100vw / 20)}}.timeline-year{padding-top:var(--f7-timeline-year-height)}.timeline-year:after{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:0;bottom:auto;left:auto;width:1px;height:100%;transform-origin:100% 50%;transform:scaleX(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-year:last-child:after{display:none!important}.timeline-month{padding-top:var(--f7-timeline-month-height)}.timeline-month .timeline-item:before{content:'';position:absolute;background-color:var(--f7-timeline-horizontal-item-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.timeline-month,.timeline-year{display:flex;flex-shrink:0;position:relative;box-sizing:border-box;height:100%}.timeline-year-title{line-height:var(--f7-timeline-year-height);height:var(--f7-timeline-year-height);font-size:var(--f7-timeline-year-font-size);font-weight:var(--f7-timeline-year-font-weight)}.timeline-month-title{line-height:var(--f7-timeline-month-height);height:var(--f7-timeline-month-height);font-size:var(--f7-timeline-month-font-size);font-weight:var(--f7-timeline-month-font-weight)}.timeline-month-title,.timeline-year-title{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;padding:0 var(--f7-timeline-horizontal-item-padding);background-color:var(--f7-bars-bg-color);color:var(--f7-bars-text-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .timeline-month-title,.ios-translucent-bars .timeline-year-title{background-color:rgba(var(--f7-bars-bg-color-rgb),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.timeline-month-title span,.timeline-year-title span{display:inline-block;position:sticky;left:calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left))}.timeline-month-title span{margin-top:-2px}.timeline-year:first-child .timeline-month:first-child .timeline-month-title,.timeline-year:first-child .timeline-year-title,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title{left:calc(var(--f7-safe-area-left) * -1);right:0;width:auto}.timeline-horizontal .timeline-item:first-child,.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-item:first-child,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title+.timeline-item{overflow:visible}.timeline-horizontal .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-month:first-child .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-item:first-child .timeline-item-date,.timeline-year:first-child .timeline-year-title+.timeline-month .timeline-month-title+.timeline-item .timeline-item-date{width:auto;padding-left:calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));left:calc(0px - var(--f7-safe-area-left));right:0}.timeline-year:last-child .timeline-month:last-child .timeline-month-title,.timeline-year:last-child .timeline-year-title{width:auto;right:calc(0px - var(--f7-safe-area-right))}.timeline-horizontal .timeline-item:last-child,.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child{overflow:visible}.timeline-horizontal .timeline-item:last-child .timeline-item-date,.timeline-year:last-child .timeline-month:last-child .timeline-item:last-child .timeline-item-date{width:auto;right:calc(0px - var(--f7-safe-area-right));left:0}.ios .block-strong .timeline-item-inner{border-radius:3px;border:1px solid rgba(0,0,0,.1)}.ios .timeline-year-title span{margin-top:3px}.md .timeline-year-title span{margin-top:2px}
1
+ :root{--f7-timeline-inner-block-margin-vertical:16px;--f7-timeline-divider-margin-horizontal:16px;--f7-timeline-item-text-font-weight:inherit;--f7-timeline-item-subtitle-font-weight:inherit}.ios{--f7-timeline-divider-color:#bbb;--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:35px;--f7-timeline-item-inner-border-radius:24px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:17px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:600;--f7-timeline-item-subtitle-font-size:15px;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-color:inherit;--f7-timeline-item-text-line-height:inherit;--f7-timeline-item-inner-bg-color:#fff;--f7-timeline-item-time-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-timeline-item-inner-bg-color:#1c1c1d;--f7-timeline-item-time-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-timeline-padding-horizontal:16px;--f7-timeline-margin-vertical:32px;--f7-timeline-item-inner-border-radius:16px;--f7-timeline-item-time-font-size:13px;--f7-timeline-item-title-font-size:16px;--f7-timeline-item-title-line-height:inherit;--f7-timeline-item-title-font-weight:400;--f7-timeline-item-subtitle-font-size:inherit;--f7-timeline-item-subtitle-line-height:inherit;--f7-timeline-item-text-font-size:inherit;--f7-timeline-item-text-line-height:inherit}.md,.md .dark,.md [class*=color-]{--f7-timeline-divider-color:var(--f7-md-outline);--f7-timeline-item-text-color:var(--f7-md-on-surface);--f7-timeline-item-inner-bg-color:var(--f7-md-surface-1);--f7-timeline-item-time-text-color:var(--f7-md-on-surface-variant)}.timeline{box-sizing:border-box;margin:var(--f7-timeline-margin-vertical) 0;padding:0 var(--f7-timeline-padding-horizontal);padding-top:0;padding-bottom:0;padding-left:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-left));padding-right:calc(var(--f7-timeline-padding-horizontal) + var(--f7-safe-area-right))}.block-strong .timeline{padding:0;margin:0}.timeline-item{display:flex;justify-content:flex-start;overflow:hidden;box-sizing:border-box;position:relative;padding:2px 0px var(--f7-timeline-padding-horizontal)}.timeline-item:last-child{padding-bottom:2px}.timeline-item-date{flex-shrink:0;width:50px;text-align:right;box-sizing:border-box}.timeline-item-date small{font-size:10px}.timeline-item-content{margin:2px;min-width:0;position:relative;flex-shrink:10}.timeline-item-content .block,.timeline-item-content .card,.timeline-item-content .list,.timeline-item-content.block,.timeline-item-content.card,.timeline-item-content.list{margin:0;width:100%}.timeline-item-content .block+.block,.timeline-item-content .block+.card,.timeline-item-content .block+.list,.timeline-item-content .card+.block,.timeline-item-content .card+.card,.timeline-item-content .card+.list,.timeline-item-content .list+.block,.timeline-item-content .list+.card,.timeline-item-content .list+.list{margin:var(--f7-timeline-inner-block-margin-vertical) 0 0}.timeline-item-content h1:first-child,.timeline-item-content h2:first-child,.timeline-item-content h3:first-child,.timeline-item-content h4:first-child,.timeline-item-content ol:first-child,.timeline-item-content p:first-child,.timeline-item-content ul:first-child{margin-top:0}.timeline-item-content h1:last-child,.timeline-item-content h2:last-child,.timeline-item-content h3:last-child,.timeline-item-content h4:last-child,.timeline-item-content ol:last-child,.timeline-item-content p:last-child,.timeline-item-content ul:last-child{margin-bottom:0}.timeline-item-inner{background:var(--f7-timeline-item-inner-bg-color);box-sizing:border-box;border-radius:var(--f7-timeline-item-inner-border-radius);padding:8px var(--f7-timeline-padding-horizontal)}.timeline-item-inner+.timeline-item-inner{margin-top:var(--f7-timeline-inner-block-margin-vertical)}.timeline-item-inner .block{padding:0;color:inherit}.timeline-item-inner .block-strong{padding-left:0;padding-right:0;margin:0}.timeline-item-inner .block-strong:after,.timeline-item-inner .block-strong:before{display:none!important}.timeline-item-inner .list ul:after,.timeline-item-inner .list ul:before{display:none!important}.timeline-item-divider{width:1px;position:relative;width:10px;height:10px;background:var(--f7-timeline-divider-color);border-radius:50%;flex-shrink:0;margin:3px var(--f7-timeline-divider-margin-horizontal) 0}.timeline-item-divider:after,.timeline-item-divider:before{content:' ';width:1px;height:100vh;position:absolute;left:50%;background:inherit;transform:translate3d(-50%,0,0)}.timeline-item-divider:after{top:100%}.timeline-item-divider:before{bottom:100%}.timeline-item:last-child .timeline-item-divider:after{display:none}.timeline-item:first-child .timeline-item-divider:before{display:none}.timeline-item-time{font-size:var(--f7-timeline-item-time-font-size);margin-top:var(--f7-timeline-inner-block-margin-vertical);color:var(--f7-timeline-item-time-text-color)}.timeline-item-time:first-child,.timeline-item-time:last-child{margin-top:0}.timeline-item-title+.timeline-item-time{margin-top:0}.timeline-item-title{font-size:var(--f7-timeline-item-title-font-size);font-weight:var(--f7-timeline-item-title-font-weight);line-height:var(--f7-timeline-item-title-line-height)}.timeline-item-subtitle{font-size:var(--f7-timeline-item-subtitle-font-size);font-weight:var(--f7-timeline-item-subtitle-font-weight);line-height:var(--f7-timeline-item-subtitle-line-height)}.timeline-item-text{color:var(--f7-timeline-item-text-color);font-size:var(--f7-timeline-item-text-font-size);font-weight:var(--f7-timeline-item-text-font-weight);line-height:var(--f7-timeline-item-text-line-height)}.timeline-sides .timeline-item,.timeline-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.timeline-sides .timeline-item .timeline-item-date,.timeline-sides .timeline-item-right .timeline-item-date{text-align:right}.timeline-sides .timeline-item-left,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.timeline-sides .timeline-item-left .timeline-item-date,.timeline-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}@media (min-width:480px){.xsmall-sides .timeline-item,.xsmall-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xsmall-sides .timeline-item .timeline-item-date,.xsmall-sides .timeline-item-right .timeline-item-date{text-align:right}.xsmall-sides .timeline-item-left,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xsmall-sides .timeline-item-left .timeline-item-date,.xsmall-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:568px){.small-sides .timeline-item,.small-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.small-sides .timeline-item .timeline-item-date,.small-sides .timeline-item-right .timeline-item-date{text-align:right}.small-sides .timeline-item-left,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.small-sides .timeline-item-left .timeline-item-date,.small-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:768px){.medium-sides .timeline-item,.medium-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.medium-sides .timeline-item .timeline-item-date,.medium-sides .timeline-item-right .timeline-item-date{text-align:right}.medium-sides .timeline-item-left,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.medium-sides .timeline-item-left .timeline-item-date,.medium-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1024px){.large-sides .timeline-item,.large-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.large-sides .timeline-item .timeline-item-date,.large-sides .timeline-item-right .timeline-item-date{text-align:right}.large-sides .timeline-item-left,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.large-sides .timeline-item-left .timeline-item-date,.large-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}@media (min-width:1200px){.xlarge-sides .timeline-item,.xlarge-sides .timeline-item-right{margin-left:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-right:0}.xlarge-sides .timeline-item .timeline-item-date,.xlarge-sides .timeline-item-right .timeline-item-date{text-align:right}.xlarge-sides .timeline-item-left,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n){flex-direction:row-reverse;margin-right:calc(50% - (var(--f7-timeline-divider-margin-horizontal) * 2 + 10px)/ 2 - 50px);margin-left:0}.xlarge-sides .timeline-item-left .timeline-item-date,.xlarge-sides .timeline-item:not(.timeline-item-right):nth-child(2n) .timeline-item-date{text-align:left}}.ios .block-strong .timeline-item-inner{border-radius:3px;border:1px solid rgba(0,0,0,.1)}
package/components/timeline/timeline.less CHANGED
@@ -209,202 +209,6 @@ each(@breakpoints, {
209
209
  }
210
210
  });
211
211
 
212
- .timeline-horizontal {
213
- height: 100%;
214
- display: flex;
215
- padding: 0;
216
- margin: 0;
217
- position: relative;
218
- padding-left: var(--f7-safe-area-left);
219
- padding-right: 0;
220
- .timeline-item {
221
- display: block;
222
- width: 100/3vw;
223
- margin: 0;
224
- padding: 0;
225
- flex-shrink: 0;
226
- position: relative;
227
- height: 100%;
228
- padding-top: var(--f7-timeline-horizontal-date-height) !important;
229
- padding-bottom: var(--f7-timeline-horizontal-item-padding);
230
- .hairline(right, var(--f7-timeline-horizontal-item-border-color));
231
- }
232
- .timeline-item-date {
233
- padding: 0px var(--f7-timeline-horizontal-item-padding);
234
- width: auto;
235
- text-align: left;
236
- line-height: var(--f7-timeline-horizontal-date-height);
237
- position: absolute;
238
- left: 0;
239
- top: 0;
240
- width: 100%;
241
- height: var(--f7-timeline-horizontal-date-height);
242
- background-color: var(--f7-bars-bg-color);
243
- color: var(--f7-bars-text-color);
244
- .ios-translucent-bars(var(--f7-bars-bg-color-rgb));
245
- .hairline(bottom, var(--f7-timeline-horizontal-item-date-border-color));
246
- .ltr({
247
- text-align: left;
248
- });
249
- .rtl({
250
- text-align: right;
251
- });
252
- }
253
-
254
- .timeline-item-content {
255
- padding: var(--f7-timeline-horizontal-item-padding);
256
- height: calc(100vw - var(--f7-timeline-horizontal-item-padding));
257
- .scrollable();
258
- margin: 0;
259
- }
260
- .timeline-item-divider {
261
- display: none;
262
- }
263
- > .timeline-item:last-child,
264
- .timeline-month:last-child .timeline-item:last-child {
265
- .hairline-remove(right);
266
- }
267
- @cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20;
268
- each(@cols, {
269
- @className: floor((@value));
270
- &.timeline-cols-@{className} .timeline-item {
271
- width: ~"calc(100vw / @{value})";
272
- }
273
- });
274
- @media (min-width: @breakpoints[xsmall]) {
275
- each(@cols, {
276
- &.xsmall-timeline-cols-@{value} .timeline-item {
277
- width: ~"calc(100vw / @{value})";
278
- }
279
- });
280
- }
281
- @media (min-width: @breakpoints[small]) {
282
- each(@cols, {
283
- &.small-timeline-cols-@{value} .timeline-item {
284
- width: ~"calc(100vw / @{value})";
285
- }
286
- });
287
- }
288
- @media (min-width: @breakpoints[medium]) {
289
- each(@cols, {
290
- &.medium-timeline-cols-@{value} .timeline-item {
291
- width: ~"calc(100vw / @{value})";
292
- }
293
- });
294
- }
295
- @media (min-width: @breakpoints[large]) {
296
- each(@cols, {
297
- &.large-timeline-cols-@{value} .timeline-item {
298
- width: ~"calc(100vw / @{value})";
299
- }
300
- });
301
- }
302
- @media (min-width: @breakpoints[xlarge]) {
303
- each(@cols, {
304
- &.xlarge-timeline-cols-@{value} .timeline-item {
305
- width: ~"calc(100vw / @{value})";
306
- }
307
- });
308
- }
309
- }
310
- .timeline-year {
311
- padding-top: var(--f7-timeline-year-height);
312
- .hairline(right, var(--f7-timeline-horizontal-item-border-color));
313
- &:last-child {
314
- .hairline-remove(right);
315
- }
316
- }
317
- .timeline-month {
318
- padding-top: var(--f7-timeline-month-height);
319
- .timeline-item {
320
- .hairline(top, var(--f7-timeline-horizontal-item-border-color));
321
- }
322
- }
323
- .timeline-year,
324
- .timeline-month {
325
- display: flex;
326
- flex-shrink: 0;
327
- position: relative;
328
- box-sizing: border-box;
329
- height: 100%;
330
- }
331
- .timeline-year-title {
332
- line-height: var(--f7-timeline-year-height);
333
- height: var(--f7-timeline-year-height);
334
- font-size: var(--f7-timeline-year-font-size);
335
- font-weight: var(--f7-timeline-year-font-weight);
336
- }
337
- .timeline-month-title {
338
- line-height: var(--f7-timeline-month-height);
339
- height: var(--f7-timeline-month-height);
340
- font-size: var(--f7-timeline-month-font-size);
341
- font-weight: var(--f7-timeline-month-font-weight);
342
- }
343
- .timeline-year-title,
344
- .timeline-month-title {
345
- position: absolute;
346
- left: 0;
347
- top: 0;
348
- width: 100%;
349
- box-sizing: border-box;
350
- padding: 0 var(--f7-timeline-horizontal-item-padding);
351
- background-color: var(--f7-bars-bg-color);
352
- color: var(--f7-bars-text-color);
353
- .ios-translucent-bars(var(--f7-bars-bg-color-rgb));
354
- span {
355
- display: inline-block;
356
- position: sticky;
357
- .ltr({
358
- left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
359
- });
360
- .rtl({
361
- right: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-right));
362
- });
363
- }
364
- }
365
- .timeline-month-title {
366
- span {
367
- margin-top: -2px;
368
- }
369
- }
370
- .timeline-year:first-child .timeline-year-title,
371
- .timeline-year:first-child .timeline-month:first-child .timeline-month-title,
372
- .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-month-title {
373
- left: calc(var(--f7-safe-area-left) * -1);
374
- right: 0;
375
- width: auto;
376
- }
377
- .timeline-horizontal .timeline-item:first-child,
378
- .timeline-year:first-child .timeline-month:first-child .timeline-item:first-child,
379
- .timeline-year:first-child .timeline-year-title + .timeline-month .timeline-item:first-child,
380
- .timeline-year:first-child
381
- .timeline-year-title
382
- + .timeline-month
383
- .timeline-month-title
384
- + .timeline-item {
385
- overflow: visible;
386
- .timeline-item-date {
387
- width: auto;
388
- padding-left: calc(var(--f7-timeline-horizontal-item-padding) + var(--f7-safe-area-left));
389
- left: calc(0px - var(--f7-safe-area-left));
390
- right: 0;
391
- }
392
- }
393
- .timeline-year:last-child .timeline-year-title,
394
- .timeline-year:last-child .timeline-month:last-child .timeline-month-title {
395
- width: auto;
396
- right: calc(0px - var(--f7-safe-area-right));
397
- }
398
- .timeline-horizontal .timeline-item:last-child,
399
- .timeline-year:last-child .timeline-month:last-child .timeline-item:last-child {
400
- overflow: visible;
401
- .timeline-item-date {
402
- width: auto;
403
- right: calc(0px - var(--f7-safe-area-right));
404
- left: 0;
405
- }
406
- }
407
-
408
212
  .if-ios-theme({
409
213
  @import './timeline-ios.less';
410
214
  });
package/components/toast/toast-class.js CHANGED
@@ -97,8 +97,8 @@ class Toast extends Modal {
97
97
  class: "toast-icon"
98
98
  }, icon), $jsx("div", {
99
99
  class: "toast-text"
100
- }, text), closeButton && !icon && $jsx("a", {
101
- class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}`
100
+ }, text), closeButton && !icon && $jsx("button", {
101
+ class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}${toast.app.theme === 'ios' ? ' button-round' : ''}`
102
102
  }, closeButtonText)));
103
103
  }
104
104
  }
package/components/toast/toast-ios.less CHANGED
@@ -3,6 +3,8 @@
3
3
  transition-duration: 300ms;
4
4
  width: 100%;
5
5
  left: 0;
6
+ .ios-glass-backdrop();
7
+ box-shadow: var(--f7-glass-shadow);
6
8
  &.toast-top {
7
9
  top: 0;
8
10
  transform: translate3d(0, -100%, 0);
package/components/toast/toast-rtl.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-right:16px;margin-left:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-right:16px;margin-left:-8px}
1
+ :root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px;width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0;backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-right:16px;margin-left:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-right:16px;margin-left:-8px}
package/components/toast/toast-vars.less CHANGED
@@ -4,12 +4,10 @@
4
4
  --f7-toast-max-width: 568px;
5
5
  }
6
6
  .ios-vars({
7
- --f7-toast-text-color: #fff;
8
- --f7-toast-bg-color: rgba(0,0,0,0.75);
9
- --f7-toast-bg-color-rgb: 0, 0, 0;
7
+ --f7-toast-bg-color: var(--f7-glass-bg-color);
10
8
  --f7-toast-padding-horizontal: 16px;
11
9
  --f7-toast-padding-vertical: 12px;
12
- --f7-toast-border-radius: 8px;
10
+ --f7-toast-border-radius: 32px;
13
11
  --f7-toast-button-min-width: 64px;
14
12
  });
15
13
  .md-vars({
package/components/toast/toast.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}
1
+ :root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px;width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0;backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}
package/components/toast/toast.less CHANGED
@@ -11,7 +11,6 @@
11
11
  box-sizing: border-box;
12
12
  background-color: var(--f7-toast-bg-color);
13
13
  opacity: 0;
14
- .ios-translucent-modals(var(--f7-toast-bg-color-rgb));
15
14
  &.modal-in {
16
15
  opacity: 1;
17
16
  }
@@ -32,6 +31,7 @@
32
31
  min-width: var(--f7-toast-button-min-width);
33
32
  margin-top: -8px;
34
33
  margin-bottom: -8px;
34
+ width: auto;
35
35
  }
36
36
  &.toast-with-icon {
37
37
  .toast-content {
package/components/toggle/toggle-class.js CHANGED
@@ -1,15 +1,10 @@
1
1
  import $ from '../../shared/dom7.js';
2
2
  import { extend, now, nextTick, deleteProps } from '../../shared/utils.js';
3
3
  import Framework7Class from '../../shared/class.js';
4
- import { getSupport } from '../../shared/get-support.js';
5
4
  class Toggle extends Framework7Class {
6
- constructor(app, params) {
7
- if (params === void 0) {
8
- params = {};
9
- }
5
+ constructor(app, params = {}) {
10
6
  super(params, [app]);
11
7
  const toggle = this;
12
- const support = getSupport();
13
8
  const defaults = {};
14
9
 
15
10
  // Extend defaults with modules params
@@ -120,19 +115,17 @@ class Toggle extends Framework7Class {
120
115
  toggle.emit('local::change toggleChange', toggle);
121
116
  }
122
117
  toggle.attachEvents = function attachEvents() {
123
- const passive = support.passiveListener ? {
118
+ $el.on(app.touchEvents.start, handleTouchStart, {
124
119
  passive: true
125
- } : false;
126
- $el.on(app.touchEvents.start, handleTouchStart, passive);
120
+ });
127
121
  app.on('touchmove', handleTouchMove);
128
122
  app.on('touchend:passive', handleTouchEnd);
129
123
  toggle.$inputEl.on('change', handleInputChange);
130
124
  };
131
125
  toggle.detachEvents = function detachEvents() {
132
- const passive = support.passiveListener ? {
126
+ $el.off(app.touchEvents.start, handleTouchStart, {
133
127
  passive: true
134
- } : false;
135
- $el.off(app.touchEvents.start, handleTouchStart, passive);
128
+ });
136
129
  app.off('touchmove', handleTouchMove);
137
130
  app.off('touchend:passive', handleTouchEnd);
138
131
  toggle.$inputEl.off('change', handleInputChange);