framework7 8.0.5 → 8.2.0

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 (64) hide show
  1. package/components/app/app-class.js +2 -3
  2. package/components/app/app.less +1 -15
  3. package/components/breadcrumbs/breadcrumbs-rtl.css +1 -1
  4. package/components/breadcrumbs/breadcrumbs.css +1 -1
  5. package/components/breadcrumbs/breadcrumbs.less +1 -4
  6. package/components/calendar/calendar-rtl.css +1 -1
  7. package/components/calendar/calendar.css +1 -1
  8. package/components/calendar/calendar.d.ts +2 -0
  9. package/components/calendar/calendar.less +4 -0
  10. package/components/input/input-ios.less +3 -0
  11. package/components/input/input-rtl.css +1 -1
  12. package/components/input/input.css +1 -1
  13. package/components/list-index/list-index-rtl.css +1 -1
  14. package/components/list-index/list-index-vars.less +7 -2
  15. package/components/list-index/list-index.css +1 -1
  16. package/components/notification/notification-md.less +4 -4
  17. package/components/notification/notification-rtl.css +1 -1
  18. package/components/notification/notification-vars.less +4 -2
  19. package/components/notification/notification.css +1 -1
  20. package/components/notification/notification.less +1 -1
  21. package/components/panel/panel-class.js +2 -0
  22. package/components/panel/panel-rtl.css +1 -1
  23. package/components/panel/panel.css +1 -1
  24. package/components/panel/panel.less +7 -2
  25. package/components/panel/resizable-panel.js +6 -5
  26. package/components/picker/picker-rtl.css +1 -1
  27. package/components/picker/picker.css +1 -1
  28. package/components/picker/picker.less +4 -4
  29. package/components/pull-to-refresh/pull-to-refresh-md.less +2 -1
  30. package/components/pull-to-refresh/pull-to-refresh-rtl.css +1 -1
  31. package/components/pull-to-refresh/pull-to-refresh-vars.less +4 -0
  32. package/components/pull-to-refresh/pull-to-refresh.css +1 -1
  33. package/components/searchbar/searchbar-md.less +1 -2
  34. package/components/searchbar/searchbar-rtl.css +1 -1
  35. package/components/searchbar/searchbar.css +1 -1
  36. package/components/swiper/swiper-rtl.css +1 -1
  37. package/components/swiper/swiper.css +1 -1
  38. package/components/swiper/swiper.less +1 -1
  39. package/components/text-editor/text-editor-rtl.css +1 -1
  40. package/components/text-editor/text-editor.css +1 -1
  41. package/components/text-editor/text-editor.less +1 -3
  42. package/components/toolbar/toolbar.less +1 -7
  43. package/framework7-bundle-rtl.css +231 -97
  44. package/framework7-bundle-rtl.min.css +5 -5
  45. package/framework7-bundle.css +231 -97
  46. package/framework7-bundle.esm.js +2 -2
  47. package/framework7-bundle.js +875 -687
  48. package/framework7-bundle.js.map +1 -1
  49. package/framework7-bundle.less +2 -2
  50. package/framework7-bundle.min.css +5 -5
  51. package/framework7-bundle.min.js +3 -3
  52. package/framework7-bundle.min.js.map +1 -1
  53. package/framework7-lite-bundle.esm.js +2 -2
  54. package/framework7-lite.esm.js +2 -2
  55. package/framework7-rtl.css +25 -7
  56. package/framework7-rtl.min.css +4 -4
  57. package/framework7.css +25 -7
  58. package/framework7.esm.js +2 -2
  59. package/framework7.less +2 -2
  60. package/framework7.min.css +4 -4
  61. package/less/mixins.less +22 -0
  62. package/modules/router/modal.js +1 -1
  63. package/modules/router/router-class.js +3 -0
  64. package/package.json +3 -3
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Framework7 8.0.5
2
+ * Framework7 8.2.0
3
3
  * Full featured mobile HTML framework for building iOS & Android apps
4
4
  * https://framework7.io/
5
5
  *
@@ -7,7 +7,7 @@
7
7
  *
8
8
  * Released under the MIT License
9
9
  *
10
- * Released on: May 8, 2023
10
+ * Released on: July 6, 2023
11
11
  */
12
12
 
13
13
  /*====================
@@ -162,11 +162,16 @@ body {
162
162
  font-size: var(--f7-font-size);
163
163
  line-height: var(--f7-line-height);
164
164
  color: var(--f7-text-color);
165
+ scrollbar-width: none;
166
+ scrollbar-color: transparent;
165
167
  }
166
168
  body::-webkit-scrollbar {
169
+ -webkit-appearance: none;
170
+ appearance: none;
167
171
  width: 0px;
172
+ display: none;
173
+ opacity: 0;
168
174
  background: transparent;
169
- position: relative;
170
175
  }
171
176
  body::-webkit-scrollbar-track {
172
177
  box-shadow: none;
@@ -2488,13 +2493,26 @@ html.device-full-viewport body {
2488
2493
  justify-content: flex-start;
2489
2494
  overflow: auto;
2490
2495
  -webkit-overflow-scrolling: touch;
2496
+ scrollbar-width: none;
2497
+ scrollbar-color: transparent;
2491
2498
  }
2492
2499
  .tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
2493
- display: none !important;
2494
- width: 0 !important;
2495
- height: 0 !important;
2496
2500
  -webkit-appearance: none;
2497
- opacity: 0 !important;
2501
+ appearance: none;
2502
+ width: 0px;
2503
+ display: none;
2504
+ opacity: 0;
2505
+ background: transparent;
2506
+ }
2507
+ .tabbar-scrollable .toolbar-inner::-webkit-scrollbar-track {
2508
+ box-shadow: none;
2509
+ background: transparent;
2510
+ }
2511
+ .tabbar-scrollable .toolbar-inner::-webkit-scrollbar-thumb {
2512
+ background-color: transparent;
2513
+ outline: none;
2514
+ border-radius: 9999px;
2515
+ position: relative;
2498
2516
  }
2499
2517
  .tabbar-scrollable .tab-link,
2500
2518
  .tabbar-scrollable .link {
@@ -8060,11 +8078,11 @@ html.device-android-4 .accordion-item-content {
8060
8078
  --f7-list-index-font-weight: 600;
8061
8079
  /* --f7-list-index-text-color: var(--f7-theme-color); */
8062
8080
  --f7-list-index-item-height: 14px;
8063
- --f7-list-index-label-text-color: #fff;
8064
- /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
8065
8081
  --f7-list-index-label-font-weight: 500;
8066
8082
  }
8067
8083
  .ios {
8084
+ --f7-list-index-label-text-color: #fff;
8085
+ /* --f7-list-index-label-bg-color: var(--f7-theme-color); */
8068
8086
  --f7-list-index-label-size: 44px;
8069
8087
  --f7-list-index-label-font-size: 17px;
8070
8088
  --f7-list-index-skip-dot-size: 6px;
@@ -8074,6 +8092,12 @@ html.device-android-4 .accordion-item-content {
8074
8092
  --f7-list-index-label-font-size: 20px;
8075
8093
  --f7-list-index-skip-dot-size: 4px;
8076
8094
  }
8095
+ .md,
8096
+ .md .dark,
8097
+ .md [class*='color-'] {
8098
+ --f7-list-index-label-bg-color: var(--f7-md-primary);
8099
+ --f7-list-index-label-text-color: var(--f7-md-on-primary);
8100
+ }
8077
8101
  .list-index {
8078
8102
  position: absolute;
8079
8103
  top: 0;
@@ -9450,6 +9474,9 @@ html.with-panel-right-push .framework7-root > .view {
9450
9474
  .with-panel-right-floating .panel-right {
9451
9475
  transform: translate3d(-8px, 0, 0);
9452
9476
  }
9477
+ .panel-resizable {
9478
+ max-width: 100%;
9479
+ }
9453
9480
  .panel-resize-handler {
9454
9481
  position: absolute;
9455
9482
  top: 0;
@@ -9462,14 +9489,16 @@ html.with-panel-right-push .framework7-root > .view {
9462
9489
  .panel-resizable .panel-resize-handler {
9463
9490
  display: block;
9464
9491
  }
9465
- .panel-left.panel-cover .panel-resize-handler {
9492
+ .panel-left.panel-cover .panel-resize-handler,
9493
+ .panel-left.panel-floating .panel-resize-handler {
9466
9494
  right: -3px;
9467
9495
  }
9468
9496
  .panel-resize-handler .panel-left.panel-reveal,
9469
9497
  .panel-left.panel-push .panel-resize-handler {
9470
9498
  right: 0;
9471
9499
  }
9472
- .panel-right.panel-cover .panel-resize-handler {
9500
+ .panel-right.panel-cover .panel-resize-handler,
9501
+ .panel-right.panel-floating .panel-resize-handler {
9473
9502
  left: -3px;
9474
9503
  }
9475
9504
  .panel-resize-handler .panel-right.panel-reveal,
@@ -10712,6 +10741,11 @@ textarea:-webkit-autofill-and-obscured {
10712
10741
  .ios .item-input-outline .item-content .item-input-wrap,
10713
10742
  .ios .item-input-outline.item-content .item-input-wrap,
10714
10743
  .ios .input-outline .item-input-wrap {
10744
+ margin-top: 2px;
10745
+ }
10746
+ .ios .item-input-outline .item-content .item-title + .item-input-wrap,
10747
+ .ios .item-input-outline.item-content .item-title + .item-input-wrap,
10748
+ .ios .input-outline .item-title + .item-input-wrap {
10715
10749
  margin-top: -22px;
10716
10750
  }
10717
10751
  .ios .item-input-outline .item-content .item-label,
@@ -13180,6 +13214,10 @@ label.item-radio.disabled,
13180
13214
  .calendar-day-selected-right:first-child:before {
13181
13215
  display: none;
13182
13216
  }
13217
+ .calendar-day-selected-left.calendar-day-selected-right:before {
13218
+ content: none;
13219
+ display: none;
13220
+ }
13183
13221
  .calendar-day-selected-range .calendar-day-number {
13184
13222
  background-color: transparent;
13185
13223
  color: inherit;
@@ -13452,6 +13490,9 @@ label.item-radio.disabled,
13452
13490
  max-height: 100%;
13453
13491
  z-index: 10;
13454
13492
  }
13493
+ .picker-column.picker-column-first.picker-column-last {
13494
+ width: 100%;
13495
+ }
13455
13496
  .picker-column.picker-column-left {
13456
13497
  text-align: left;
13457
13498
  }
@@ -13468,15 +13509,30 @@ label.item-radio.disabled,
13468
13509
  }
13469
13510
  .picker-items {
13470
13511
  overflow: auto;
13471
- scrollbar-width: none;
13472
13512
  scroll-snap-type: y mandatory;
13473
13513
  height: 100%;
13474
13514
  box-sizing: border-box;
13475
13515
  padding: var(--f7-picker-scroll-padding, 0px) 0px;
13516
+ scrollbar-width: none;
13517
+ scrollbar-color: transparent;
13476
13518
  }
13477
13519
  .picker-items::-webkit-scrollbar {
13520
+ -webkit-appearance: none;
13521
+ appearance: none;
13522
+ width: 0px;
13478
13523
  display: none;
13479
13524
  opacity: 0;
13525
+ background: transparent;
13526
+ }
13527
+ .picker-items::-webkit-scrollbar-track {
13528
+ box-shadow: none;
13529
+ background: transparent;
13530
+ }
13531
+ .picker-items::-webkit-scrollbar-thumb {
13532
+ background-color: transparent;
13533
+ outline: none;
13534
+ border-radius: 9999px;
13535
+ position: relative;
13480
13536
  }
13481
13537
  .picker-item {
13482
13538
  height: var(--f7-picker-item-height);
@@ -13588,6 +13644,12 @@ label.item-radio.disabled,
13588
13644
  --f7-ptr-preloader-size: 22px;
13589
13645
  --f7-ptr-size: 40px;
13590
13646
  }
13647
+ .md,
13648
+ .md .dark,
13649
+ .md [class*='color-'] {
13650
+ --f7-ptr-preloader-bg-color: var(--f7-md-surface-1);
13651
+ --f7-ptr-preloader-color: var(--f7-md-primary);
13652
+ }
13591
13653
  .ptr-preloader {
13592
13654
  position: relative;
13593
13655
  top: var(--f7-ptr-top, 0);
@@ -13684,7 +13746,8 @@ label.item-radio.disabled,
13684
13746
  .md .ptr-preloader {
13685
13747
  width: var(--f7-ptr-size);
13686
13748
  border-radius: 50%;
13687
- background: #fff;
13749
+ background: var(--f7-ptr-preloader-bg-color);
13750
+ --f7-preloader-color: var(--f7-ptr-preloader-color);
13688
13751
  margin-top: calc(-1 * var(--f7-ptr-size));
13689
13752
  z-index: 100;
13690
13753
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
@@ -15479,8 +15542,7 @@ table.data-table {
15479
15542
  opacity: 1;
15480
15543
  }
15481
15544
  .md .searchbar .input-clear-button:before {
15482
- margin-left: 0;
15483
- margin-top: 0;
15545
+ display: none;
15484
15546
  }
15485
15547
  .md .searchbar-inline {
15486
15548
  --f7-searchbar-input-extra-padding-left: 32px;
@@ -16442,7 +16504,7 @@ table.data-table {
16442
16504
  }
16443
16505
  /* === Swiper === */
16444
16506
  /**
16445
- * Swiper 9.2.0
16507
+ * Swiper 10.0.3
16446
16508
  * Most modern mobile touch slider and framework with hardware accelerated transitions
16447
16509
  * https://swiperjs.com
16448
16510
  *
@@ -16450,7 +16512,7 @@ table.data-table {
16450
16512
  *
16451
16513
  * Released under the MIT License
16452
16514
  *
16453
- * Released on: March 31, 2023
16515
+ * Released on: July 3, 2023
16454
16516
  */
16455
16517
 
16456
16518
  /* FONT_START */
@@ -16468,12 +16530,19 @@ table.data-table {
16468
16530
  --swiper-wrapper-transition-timing-function: initial;
16469
16531
  */
16470
16532
  }
16471
- .swiper,
16472
- swiper-container {
16533
+ :host {
16534
+ position: relative;
16535
+ display: block;
16536
+ margin-left: auto;
16537
+ margin-right: auto;
16538
+ z-index: 1;
16539
+ }
16540
+ .swiper {
16473
16541
  margin-left: auto;
16474
16542
  margin-right: auto;
16475
16543
  position: relative;
16476
16544
  overflow: hidden;
16545
+ overflow: clip;
16477
16546
  list-style: none;
16478
16547
  padding: 0;
16479
16548
  /* Fix of Webkit flickering */
@@ -16494,6 +16563,7 @@ swiper-container {
16494
16563
  box-sizing: content-box;
16495
16564
  }
16496
16565
  .swiper-android .swiper-slide,
16566
+ .swiper-ios .swiper-slide,
16497
16567
  .swiper-wrapper {
16498
16568
  transform: translate3d(0px, 0, 0);
16499
16569
  }
@@ -16503,8 +16573,7 @@ swiper-container {
16503
16573
  .swiper-vertical {
16504
16574
  touch-action: pan-x;
16505
16575
  }
16506
- .swiper-slide,
16507
- swiper-slide {
16576
+ .swiper-slide {
16508
16577
  flex-shrink: 0;
16509
16578
  width: 100%;
16510
16579
  height: 100%;
@@ -16540,42 +16609,9 @@ swiper-slide {
16540
16609
  perspective: 1200px;
16541
16610
  }
16542
16611
  .swiper-3d .swiper-slide,
16543
- .swiper-3d .swiper-slide-shadow,
16544
- .swiper-3d .swiper-slide-shadow-left,
16545
- .swiper-3d .swiper-slide-shadow-right,
16546
- .swiper-3d .swiper-slide-shadow-top,
16547
- .swiper-3d .swiper-slide-shadow-bottom,
16548
16612
  .swiper-3d .swiper-cube-shadow {
16549
16613
  transform-style: preserve-3d;
16550
16614
  }
16551
- .swiper-3d .swiper-slide-shadow,
16552
- .swiper-3d .swiper-slide-shadow-left,
16553
- .swiper-3d .swiper-slide-shadow-right,
16554
- .swiper-3d .swiper-slide-shadow-top,
16555
- .swiper-3d .swiper-slide-shadow-bottom {
16556
- position: absolute;
16557
- left: 0;
16558
- top: 0;
16559
- width: 100%;
16560
- height: 100%;
16561
- pointer-events: none;
16562
- z-index: 10;
16563
- }
16564
- .swiper-3d .swiper-slide-shadow {
16565
- background: rgba(0, 0, 0, 0.15);
16566
- }
16567
- .swiper-3d .swiper-slide-shadow-left {
16568
- background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16569
- }
16570
- .swiper-3d .swiper-slide-shadow-right {
16571
- background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16572
- }
16573
- .swiper-3d .swiper-slide-shadow-top {
16574
- background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16575
- }
16576
- .swiper-3d .swiper-slide-shadow-bottom {
16577
- background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16578
- }
16579
16615
  /* CSS Mode */
16580
16616
  .swiper-css-mode > .swiper-wrapper {
16581
16617
  overflow: auto;
@@ -16590,37 +16626,78 @@ swiper-slide {
16590
16626
  .swiper-css-mode > .swiper-wrapper > .swiper-slide {
16591
16627
  scroll-snap-align: start start;
16592
16628
  }
16593
- .swiper-horizontal.swiper-css-mode > .swiper-wrapper {
16629
+ .swiper-css-mode.swiper-horizontal > .swiper-wrapper {
16594
16630
  scroll-snap-type: x mandatory;
16595
16631
  }
16596
- .swiper-vertical.swiper-css-mode > .swiper-wrapper {
16632
+ .swiper-css-mode.swiper-vertical > .swiper-wrapper {
16597
16633
  scroll-snap-type: y mandatory;
16598
16634
  }
16599
- .swiper-centered > .swiper-wrapper::before {
16635
+ .swiper-css-mode.swiper-free-mode > .swiper-wrapper {
16636
+ scroll-snap-type: none;
16637
+ }
16638
+ .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
16639
+ scroll-snap-align: none;
16640
+ }
16641
+ .swiper-css-mode.swiper-centered > .swiper-wrapper::before {
16600
16642
  content: '';
16601
16643
  flex-shrink: 0;
16602
16644
  order: 9999;
16603
16645
  }
16604
- .swiper-centered > .swiper-wrapper > .swiper-slide {
16646
+ .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
16605
16647
  scroll-snap-align: center center;
16606
16648
  scroll-snap-stop: always;
16607
16649
  }
16608
- .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
16650
+ .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
16609
16651
  margin-inline-start: var(--swiper-centered-offset-before);
16610
16652
  }
16611
- .swiper-centered.swiper-horizontal > .swiper-wrapper::before {
16653
+ .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
16612
16654
  height: 100%;
16613
16655
  min-height: 1px;
16614
16656
  width: var(--swiper-centered-offset-after);
16615
16657
  }
16616
- .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
16658
+ .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
16617
16659
  margin-block-start: var(--swiper-centered-offset-before);
16618
16660
  }
16619
- .swiper-centered.swiper-vertical > .swiper-wrapper::before {
16661
+ .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
16620
16662
  width: 100%;
16621
16663
  min-width: 1px;
16622
16664
  height: var(--swiper-centered-offset-after);
16623
16665
  }
16666
+ /* Slide styles start */
16667
+ /* 3D Shadows */
16668
+ .swiper-3d .swiper-slide-shadow,
16669
+ .swiper-3d .swiper-slide-shadow-left,
16670
+ .swiper-3d .swiper-slide-shadow-right,
16671
+ .swiper-3d .swiper-slide-shadow-top,
16672
+ .swiper-3d .swiper-slide-shadow-bottom,
16673
+ .swiper-3d .swiper-slide-shadow,
16674
+ .swiper-3d .swiper-slide-shadow-left,
16675
+ .swiper-3d .swiper-slide-shadow-right,
16676
+ .swiper-3d .swiper-slide-shadow-top,
16677
+ .swiper-3d .swiper-slide-shadow-bottom {
16678
+ position: absolute;
16679
+ left: 0;
16680
+ top: 0;
16681
+ width: 100%;
16682
+ height: 100%;
16683
+ pointer-events: none;
16684
+ z-index: 10;
16685
+ }
16686
+ .swiper-3d .swiper-slide-shadow {
16687
+ background: rgba(0, 0, 0, 0.15);
16688
+ }
16689
+ .swiper-3d .swiper-slide-shadow-left {
16690
+ background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16691
+ }
16692
+ .swiper-3d .swiper-slide-shadow-right {
16693
+ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16694
+ }
16695
+ .swiper-3d .swiper-slide-shadow-top {
16696
+ background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16697
+ }
16698
+ .swiper-3d .swiper-slide-shadow-bottom {
16699
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
16700
+ }
16624
16701
  .swiper-lazy-preloader {
16625
16702
  width: 42px;
16626
16703
  height: 42px;
@@ -16637,7 +16714,6 @@ swiper-slide {
16637
16714
  border-top-color: transparent;
16638
16715
  }
16639
16716
  .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
16640
- swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
16641
16717
  .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
16642
16718
  animation: swiper-preloader-spin 1s infinite linear;
16643
16719
  }
@@ -16655,6 +16731,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
16655
16731
  transform: rotate(360deg);
16656
16732
  }
16657
16733
  }
16734
+ /* Slide styles end */
16658
16735
  .swiper-virtual .swiper-slide {
16659
16736
  -webkit-backface-visibility: hidden;
16660
16737
  transform: translateZ(0);
@@ -16712,6 +16789,31 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
16712
16789
  .swiper-navigation-disabled .swiper-button-next {
16713
16790
  display: none !important;
16714
16791
  }
16792
+ .swiper-button-prev svg,
16793
+ .swiper-button-next svg {
16794
+ width: 100%;
16795
+ height: 100%;
16796
+ object-fit: contain;
16797
+ transform-origin: center;
16798
+ }
16799
+ .swiper-rtl .swiper-button-prev svg,
16800
+ .swiper-rtl .swiper-button-next svg {
16801
+ transform: rotate(180deg);
16802
+ }
16803
+ .swiper-button-prev,
16804
+ .swiper-rtl .swiper-button-next {
16805
+ left: var(--swiper-navigation-sides-offset, 10px);
16806
+ right: auto;
16807
+ }
16808
+ .swiper-button-next,
16809
+ .swiper-rtl .swiper-button-prev {
16810
+ right: var(--swiper-navigation-sides-offset, 10px);
16811
+ left: auto;
16812
+ }
16813
+ .swiper-button-lock {
16814
+ display: none;
16815
+ }
16816
+ /* Navigation font start */
16715
16817
  .swiper-button-prev:after,
16716
16818
  .swiper-button-next:after {
16717
16819
  font-family: swiper-icons;
@@ -16721,11 +16823,6 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
16721
16823
  font-variant: initial;
16722
16824
  line-height: 1;
16723
16825
  }
16724
- .swiper-button-prev,
16725
- .swiper-rtl .swiper-button-next {
16726
- left: var(--swiper-navigation-sides-offset, 10px);
16727
- right: auto;
16728
- }
16729
16826
  .swiper-button-prev:after,
16730
16827
  .swiper-rtl .swiper-button-next:after {
16731
16828
  content: 'prev';
@@ -16739,9 +16836,7 @@ swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader,
16739
16836
  .swiper-rtl .swiper-button-prev:after {
16740
16837
  content: 'next';
16741
16838
  }
16742
- .swiper-button-lock {
16743
- display: none;
16744
- }
16839
+ /* Navigation font end */
16745
16840
  :root {
16746
16841
  /*
16747
16842
  --swiper-pagination-color: var(--swiper-theme-color);
@@ -16877,8 +16972,7 @@ button.swiper-pagination-bullet {
16877
16972
  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16878
16973
  transition: 200ms transform, 200ms left;
16879
16974
  }
16880
- .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
16881
- :host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16975
+ .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
16882
16976
  transition: 200ms transform, 200ms right;
16883
16977
  }
16884
16978
  /* Fraction */
@@ -16889,7 +16983,6 @@ button.swiper-pagination-bullet {
16889
16983
  .swiper-pagination-progressbar {
16890
16984
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
16891
16985
  position: absolute;
16892
- /*ADD_HOST*/
16893
16986
  }
16894
16987
  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
16895
16988
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
@@ -17003,8 +17096,7 @@ button.swiper-pagination-bullet {
17003
17096
  touch-action: none;
17004
17097
  }
17005
17098
  /* a11y */
17006
- .swiper .swiper-notification,
17007
- swiper-container .swiper-notification {
17099
+ .swiper .swiper-notification {
17008
17100
  position: absolute;
17009
17101
  left: 0;
17010
17102
  top: 0;
@@ -17062,19 +17154,10 @@ swiper-container .swiper-notification {
17062
17154
  }
17063
17155
  .swiper-cube .swiper-slide-active,
17064
17156
  .swiper-cube .swiper-slide-next,
17065
- .swiper-cube .swiper-slide-prev,
17066
- .swiper-cube .swiper-slide-next + .swiper-slide {
17157
+ .swiper-cube .swiper-slide-prev {
17067
17158
  pointer-events: auto;
17068
17159
  visibility: visible;
17069
17160
  }
17070
- .swiper-cube .swiper-slide-shadow-top,
17071
- .swiper-cube .swiper-slide-shadow-bottom,
17072
- .swiper-cube .swiper-slide-shadow-left,
17073
- .swiper-cube .swiper-slide-shadow-right {
17074
- z-index: 0;
17075
- -webkit-backface-visibility: hidden;
17076
- backface-visibility: hidden;
17077
- }
17078
17161
  .swiper-cube .swiper-cube-shadow {
17079
17162
  position: absolute;
17080
17163
  left: 0;
@@ -17094,6 +17177,20 @@ swiper-container .swiper-notification {
17094
17177
  right: 0;
17095
17178
  filter: blur(50px);
17096
17179
  }
17180
+ .swiper-cube .swiper-slide-next + .swiper-slide {
17181
+ pointer-events: auto;
17182
+ visibility: visible;
17183
+ }
17184
+ /* Cube slide shadows start */
17185
+ .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
17186
+ .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
17187
+ .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
17188
+ .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
17189
+ z-index: 0;
17190
+ -webkit-backface-visibility: hidden;
17191
+ backface-visibility: hidden;
17192
+ }
17193
+ /* Cube slide shadows end */
17097
17194
  .swiper-flip {
17098
17195
  overflow: visible;
17099
17196
  }
@@ -17110,14 +17207,16 @@ swiper-container .swiper-notification {
17110
17207
  .swiper-flip .swiper-slide-active .swiper-slide-active {
17111
17208
  pointer-events: auto;
17112
17209
  }
17113
- .swiper-flip .swiper-slide-shadow-top,
17114
- .swiper-flip .swiper-slide-shadow-bottom,
17115
- .swiper-flip .swiper-slide-shadow-left,
17116
- .swiper-flip .swiper-slide-shadow-right {
17210
+ /* Flip slide shadows start */
17211
+ .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
17212
+ .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
17213
+ .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
17214
+ .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
17117
17215
  z-index: 0;
17118
17216
  -webkit-backface-visibility: hidden;
17119
17217
  backface-visibility: hidden;
17120
17218
  }
17219
+ /* Flip slide shadows end */
17121
17220
  .swiper-creative .swiper-slide {
17122
17221
  -webkit-backface-visibility: hidden;
17123
17222
  backface-visibility: hidden;
@@ -17491,7 +17590,8 @@ swiper-container .swiper-notification {
17491
17590
  }
17492
17591
  .ios {
17493
17592
  --f7-notification-margin: 8px;
17494
- --f7-notification-padding: 10px;
17593
+ --f7-notification-padding-horizontal: 10px;
17594
+ --f7-notification-padding-vertical: 10px;
17495
17595
  --f7-notification-border-radius: 12px;
17496
17596
  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
17497
17597
  --f7-notification-icon-size: 20px;
@@ -17523,7 +17623,8 @@ swiper-container .swiper-notification {
17523
17623
  }
17524
17624
  .md {
17525
17625
  --f7-notification-margin: 16px;
17526
- --f7-notification-padding: 16px;
17626
+ --f7-notification-padding-vertical: 20px;
17627
+ --f7-notification-padding-horizontal: 16px;
17527
17628
  --f7-notification-border-radius: 16px;
17528
17629
  --f7-notification-box-shadow: none;
17529
17630
  --f7-notification-icon-size: 24px;
@@ -17560,7 +17661,7 @@ swiper-container .swiper-notification {
17560
17661
  transition-property: transform;
17561
17662
  direction: ltr;
17562
17663
  max-width: var(--f7-notification-max-width);
17563
- padding: var(--f7-notification-padding);
17664
+ padding: var(--f7-notification-padding-vertical) var(--f7-notification-padding-horizontal);
17564
17665
  border-radius: var(--f7-notification-border-radius);
17565
17666
  box-shadow: var(--f7-notification-box-shadow);
17566
17667
  background: var(--f7-notification-bg-color);
@@ -17707,7 +17808,7 @@ swiper-container .swiper-notification {
17707
17808
  transform: translate3d(0, -150%, 0);
17708
17809
  }
17709
17810
  .md .notification.modal-in {
17710
- transition-duration: 200ms;
17811
+ transition-duration: 500ms;
17711
17812
  transform: translate3d(0, 0%, 0);
17712
17813
  transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
17713
17814
  }
@@ -17722,8 +17823,8 @@ swiper-container .swiper-notification {
17722
17823
  }
17723
17824
  .md .notification-with-icon .notification-icon {
17724
17825
  position: absolute;
17725
- left: var(--f7-notification-padding);
17726
- top: var(--f7-notification-padding);
17826
+ left: var(--f7-notification-padding-horizontal);
17827
+ top: var(--f7-notification-padding-vertical);
17727
17828
  }
17728
17829
  .md .notification-with-icon .notification-content,
17729
17830
  .md .notification-with-icon .notification-header {
@@ -17736,7 +17837,7 @@ swiper-container .swiper-notification {
17736
17837
  margin-top: 4px;
17737
17838
  }
17738
17839
  .md .notification-header + .notification-content {
17739
- margin-top: 4px;
17840
+ margin-top: 8px;
17740
17841
  }
17741
17842
  .md .notification-title-right-text {
17742
17843
  margin-left: 4px;
@@ -18971,9 +19072,26 @@ button.text-editor-button .material-icons sub {
18971
19072
  justify-content: flex-start !important;
18972
19073
  overflow: auto;
18973
19074
  -webkit-overflow-scrolling: touch;
19075
+ scrollbar-width: none;
19076
+ scrollbar-color: transparent;
18974
19077
  }
18975
19078
  .text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar {
19079
+ -webkit-appearance: none;
19080
+ appearance: none;
19081
+ width: 0px;
18976
19082
  display: none;
19083
+ opacity: 0;
19084
+ background: transparent;
19085
+ }
19086
+ .text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar-track {
19087
+ box-shadow: none;
19088
+ background: transparent;
19089
+ }
19090
+ .text-editor-keyboard-toolbar .toolbar-inner::-webkit-scrollbar-thumb {
19091
+ background-color: transparent;
19092
+ outline: none;
19093
+ border-radius: 9999px;
19094
+ position: relative;
18977
19095
  }
18978
19096
  .text-editor-keyboard-toolbar .toolbar-inner .text-editor-button-divider {
18979
19097
  height: 100%;
@@ -19262,10 +19380,26 @@ button.text-editor-button .material-icons sub {
19262
19380
  overflow: auto;
19263
19381
  white-space: nowrap;
19264
19382
  padding: var(--f7-breadcrumbs-padding);
19383
+ scrollbar-width: none;
19384
+ scrollbar-color: transparent;
19265
19385
  }
19266
19386
  .breadcrumbs::-webkit-scrollbar {
19387
+ -webkit-appearance: none;
19388
+ appearance: none;
19389
+ width: 0px;
19267
19390
  display: none;
19268
19391
  opacity: 0;
19392
+ background: transparent;
19393
+ }
19394
+ .breadcrumbs::-webkit-scrollbar-track {
19395
+ box-shadow: none;
19396
+ background: transparent;
19397
+ }
19398
+ .breadcrumbs::-webkit-scrollbar-thumb {
19399
+ background-color: transparent;
19400
+ outline: none;
19401
+ border-radius: 9999px;
19402
+ position: relative;
19269
19403
  }
19270
19404
  .breadcrumbs-separator,
19271
19405
  .breadcrumbs-item,
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Framework7 8.0.5
2
+ * Framework7 8.2.0
3
3
  * Full featured mobile HTML framework for building iOS & Android apps
4
4
  * https://framework7.io/
5
5
  *
@@ -7,7 +7,7 @@
7
7
  *
8
8
  * Released under the MIT License
9
9
  *
10
- * Released on: May 8, 2023
10
+ * Released on: July 6, 2023
11
11
  */
12
12
 
13
13
  import $ from './shared/dom7.js';