framework7 9.0.0 → 9.0.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 (20) hide show
  1. package/components/fab/fab-ios.less +27 -0
  2. package/components/fab/fab-rtl.css +1 -1
  3. package/components/fab/fab.css +1 -1
  4. package/framework7-bundle-rtl.css +15 -2
  5. package/framework7-bundle-rtl.min.css +3 -3
  6. package/framework7-bundle.css +15 -2
  7. package/framework7-bundle.esm.js +2 -2
  8. package/framework7-bundle.js +2 -2
  9. package/framework7-bundle.less +2 -2
  10. package/framework7-bundle.min.css +3 -3
  11. package/framework7-bundle.min.js +2 -2
  12. package/framework7-lite-bundle.esm.js +2 -2
  13. package/framework7-lite.esm.js +2 -2
  14. package/framework7-rtl.css +2 -2
  15. package/framework7-rtl.min.css +2 -2
  16. package/framework7.css +2 -2
  17. package/framework7.esm.js +2 -2
  18. package/framework7.less +2 -2
  19. package/framework7.min.css +2 -2
  20. package/package.json +2 -2
package/components/fab/fab-ios.less CHANGED
@@ -8,4 +8,31 @@
8
8
  background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
9
9
  }
10
10
  }
11
+ &,
12
+ [class*='color-'] {
13
+ --f7-fab-pressed-bg-color: var(--f7-theme-color-shade);
14
+ --f7-fab-bg-color: var(--f7-theme-color);
15
+ --f7-glass-shadow-fab:
16
+ inset -3px -3px 0px -3.5px #fff, inset 3px 3px 0px -3.5px #fff,
17
+ inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),
18
+ inset 3px 3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),
19
+ inset -3px -3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black),
20
+ inset 0 0 5px 1px #fff, 0 0 15px 4px rgba(0, 0, 0, 0.2);
21
+ }
22
+ &.dark,
23
+ .dark {
24
+ &,
25
+ [class*='color-'] {
26
+ --f7-fab-bg-color: color-mix(in oklab, var(--f7-theme-color-shade) 50%, transparent 0%);
27
+ --f7-glass-shadow-fab:
28
+ inset 3px 3px 0px -3.5px var(--f7-theme-color),
29
+ inset -3px -3px 0px -3.5px var(--f7-theme-color),
30
+ inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
31
+ inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),
32
+ inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),
33
+ inset 0px -5px 0px -3.5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),
34
+ inset 0px -5px 5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%),
35
+ 0 0 15px 4px rgba(0, 0, 0, 0.2);
36
+ }
37
+ }
11
38
  }
package/components/fab/fab-rtl.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-bg-color:var(--f7-theme-color);--f7-glass-shadow-fab:inset -3px -3px 0px -3.5px #fff,inset 3px 3px 0px -3.5px #fff,inset 0px 0px 0px 0.5px #ffffff80,inset 3px 3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset -3px -3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset 0 0 5px 1px #fff,0 0 15px 4px #0003;--f7-fab-label-text-color:#000;--f7-fab-label-bg-color:#fff;--f7-fab-text-color:#fff;--f7-fab-border-radius:50px;--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px #0006;--f7-fab-extended-text-transform:uppercase;--f7-fab-extended-size:50px;--f7-fab-extended-text-padding:0 20px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:var(--f7-glass-shadow);--f7-fab-label-padding:8px 16px}.ios .dark,.ios.dark{--f7-fab-bg-color:color-mix(in oklab,var(--f7-theme-color-shade) 50%,#0000 0%);--f7-glass-shadow-fab:inset 3px 3px 0px -3.5px var(--f7-theme-color),inset -3px -3px 0px -3.5px var(--f7-theme-color),inset -0.5px -0.5px 0px #ffffff80,inset 0.5px 0.5px 0px #ffffff1a,inset -3px 3px 0px -3.5px #ffffff40,inset 0px -5px 0px -3.5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),inset 0px -5px 5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),0 0 15px 4px #0003;--f7-fab-label-text-color:#fff;--f7-fab-label-bg-color:#151515}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--f7-fab-box-shadow:0px 1px 2px #00000040;--f7-fab-extended-size:56px;--f7-fab-extended-text-padding:0 16px;--f7-fab-extended-text-font-weight:500;--f7-fab-extended-text-letter-spacing:0;--f7-fab-extended-text-transform:none;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:0px 1px 2px #00000040;--f7-fab-label-padding:4px 12px}.md,.md .dark,.md [class*=color-]{--f7-fab-bg-color:var(--f7-md-primary-container);--f7-fab-text-color:var(--f7-md-on-primary-container);--f7-fab-label-text-color:var(--f7-md-on-surface);--f7-fab-label-bg-color:var(--f7-md-surface-5)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{align-items:center;background-color:var(--f7-fab-bg-color,var(--f7-theme-color));border-radius:var(--f7-fab-border-radius);box-shadow:var(--f7-fab-box-shadow);color:var(--f7-fab-text-color);display:flex;height:var(--f7-fab-size);justify-content:center;overflow:hidden;position:relative;transition-duration:.3s;width:var(--f7-fab-size);z-index:1}.fab>a i{left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{opacity:0;transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5)}.fab-buttons a{border-radius:var(--f7-fab-border-radius);height:var(--f7-fab-button-size);width:var(--f7-fab-button-size)}.fab-buttons{display:flex;pointer-events:none;position:absolute;visibility:hidden}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{opacity:0;transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5)}.fab-opened:not(.fab-morph)>a i+i{opacity:1;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1)}.fab-opened .fab-buttons{pointer-events:auto;visibility:visible}.fab-opened .fab-buttons a{opacity:1;transform:translateZ(0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:.15s}.fab-opened .fab-buttons a:nth-child(5){transition-delay:.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:.25s}.fab-buttons-bottom,.fab-buttons-top{left:50%;margin-left:calc(var(--f7-fab-button-size)*-1/2);width:var(--f7-fab-button-size)}.fab-buttons-top{bottom:100%;flex-direction:column-reverse;margin-bottom:16px}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{flex-direction:column;margin-top:16px;top:100%}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{height:var(--f7-fab-button-size);margin-top:calc(var(--f7-fab-button-size)*-1/2);top:50%}.fab-buttons-left{margin-right:16px;right:100%}.fab-buttons-left a{transform:translate3d(8px,0,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{flex-direction:row-reverse;left:100%;margin-left:16px}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{height:100%;left:0;top:0;width:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{bottom:100%;left:50%;margin-bottom:16px;margin-left:calc(var(--f7-fab-button-size)*-1/2);transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-left:16px;margin-top:calc(var(--f7-fab-button-size)*-1/2);top:50%;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(var(--f7-fab-button-size)*-1/2);margin-top:16px;top:100%;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){margin-right:16px;margin-top:calc(var(--f7-fab-button-size)*-1/2);right:100%;top:50%;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{background:var(--f7-fab-bg-color,var(--f7-theme-color));border-radius:var(--f7-fab-border-radius);box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{background:none!important;box-shadow:none}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:.25s}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{min-width:var(--f7-fab-extended-size);width:auto}.fab-extended>a{height:var(--f7-fab-extended-size);width:100%}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);padding:var(--f7-fab-extended-text-padding);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{background:var(--f7-fab-label-bg-color);border-radius:var(--f7-fab-label-border-radius);box-shadow:var(--f7-fab-label-box-shadow);color:var(--f7-fab-label-text-color);font-size:var(--f7-fab-label-font-size);padding:var(--f7-fab-label-padding);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{margin-right:8px;right:100%}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a,.ios .fab>a{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow-fab)}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade));transition-duration:0s}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}
1
+ :root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-bg-color:var(--f7-theme-color);--f7-glass-shadow-fab:inset -3px -3px 0px -3.5px #fff,inset 3px 3px 0px -3.5px #fff,inset 0px 0px 0px 0.5px #ffffff80,inset 3px 3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset -3px -3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset 0 0 5px 1px #fff,0 0 15px 4px #0003;--f7-fab-label-text-color:#000;--f7-fab-label-bg-color:#fff;--f7-fab-text-color:#fff;--f7-fab-border-radius:50px;--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px #0006;--f7-fab-extended-text-transform:uppercase;--f7-fab-extended-size:50px;--f7-fab-extended-text-padding:0 20px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:var(--f7-glass-shadow);--f7-fab-label-padding:8px 16px}.ios .dark,.ios.dark{--f7-fab-bg-color:color-mix(in oklab,var(--f7-theme-color-shade) 50%,#0000 0%);--f7-glass-shadow-fab:inset 3px 3px 0px -3.5px var(--f7-theme-color),inset -3px -3px 0px -3.5px var(--f7-theme-color),inset -0.5px -0.5px 0px #ffffff80,inset 0.5px 0.5px 0px #ffffff1a,inset -3px 3px 0px -3.5px #ffffff40,inset 0px -5px 0px -3.5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),inset 0px -5px 5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),0 0 15px 4px #0003;--f7-fab-label-text-color:#fff;--f7-fab-label-bg-color:#151515}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--f7-fab-box-shadow:0px 1px 2px #00000040;--f7-fab-extended-size:56px;--f7-fab-extended-text-padding:0 16px;--f7-fab-extended-text-font-weight:500;--f7-fab-extended-text-letter-spacing:0;--f7-fab-extended-text-transform:none;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:0px 1px 2px #00000040;--f7-fab-label-padding:4px 12px}.md,.md .dark,.md [class*=color-]{--f7-fab-bg-color:var(--f7-md-primary-container);--f7-fab-text-color:var(--f7-md-on-primary-container);--f7-fab-label-text-color:var(--f7-md-on-surface);--f7-fab-label-bg-color:var(--f7-md-surface-5)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{align-items:center;background-color:var(--f7-fab-bg-color,var(--f7-theme-color));border-radius:var(--f7-fab-border-radius);box-shadow:var(--f7-fab-box-shadow);color:var(--f7-fab-text-color);display:flex;height:var(--f7-fab-size);justify-content:center;overflow:hidden;position:relative;transition-duration:.3s;width:var(--f7-fab-size);z-index:1}.fab>a i{left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{opacity:0;transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5)}.fab-buttons a{border-radius:var(--f7-fab-border-radius);height:var(--f7-fab-button-size);width:var(--f7-fab-button-size)}.fab-buttons{display:flex;pointer-events:none;position:absolute;visibility:hidden}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{opacity:0;transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5)}.fab-opened:not(.fab-morph)>a i+i{opacity:1;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1)}.fab-opened .fab-buttons{pointer-events:auto;visibility:visible}.fab-opened .fab-buttons a{opacity:1;transform:translateZ(0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:.15s}.fab-opened .fab-buttons a:nth-child(5){transition-delay:.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:.25s}.fab-buttons-bottom,.fab-buttons-top{left:50%;margin-left:calc(var(--f7-fab-button-size)*-1/2);width:var(--f7-fab-button-size)}.fab-buttons-top{bottom:100%;flex-direction:column-reverse;margin-bottom:16px}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{flex-direction:column;margin-top:16px;top:100%}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{height:var(--f7-fab-button-size);margin-top:calc(var(--f7-fab-button-size)*-1/2);top:50%}.fab-buttons-left{margin-right:16px;right:100%}.fab-buttons-left a{transform:translate3d(8px,0,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{flex-direction:row-reverse;left:100%;margin-left:16px}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{height:100%;left:0;top:0;width:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{bottom:100%;left:50%;margin-bottom:16px;margin-left:calc(var(--f7-fab-button-size)*-1/2);transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-left:16px;margin-top:calc(var(--f7-fab-button-size)*-1/2);top:50%;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(var(--f7-fab-button-size)*-1/2);margin-top:16px;top:100%;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){margin-right:16px;margin-top:calc(var(--f7-fab-button-size)*-1/2);right:100%;top:50%;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{background:var(--f7-fab-bg-color,var(--f7-theme-color));border-radius:var(--f7-fab-border-radius);box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{background:none!important;box-shadow:none}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:.25s}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{min-width:var(--f7-fab-extended-size);width:auto}.fab-extended>a{height:var(--f7-fab-extended-size);width:100%}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);padding:var(--f7-fab-extended-text-padding);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{background:var(--f7-fab-label-bg-color);border-radius:var(--f7-fab-label-border-radius);box-shadow:var(--f7-fab-label-box-shadow);color:var(--f7-fab-label-text-color);font-size:var(--f7-fab-label-font-size);padding:var(--f7-fab-label-padding);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{margin-right:8px;right:100%}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a,.ios .fab>a{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow-fab)}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade));transition-duration:0s}.ios,.ios [class*=color-]{--f7-fab-pressed-bg-color:var(--f7-theme-color-shade);--f7-fab-bg-color:var(--f7-theme-color);--f7-glass-shadow-fab:inset -3px -3px 0px -3.5px #fff,inset 3px 3px 0px -3.5px #fff,inset 0px 0px 0px 0.5px #ffffff80,inset 3px 3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset -3px -3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset 0 0 5px 1px #fff,0 0 15px 4px #0003}.ios .dark,.ios .dark [class*=color-],.ios.dark,.ios.dark [class*=color-]{--f7-fab-bg-color:color-mix(in oklab,var(--f7-theme-color-shade) 50%,#0000 0%);--f7-glass-shadow-fab:inset 3px 3px 0px -3.5px var(--f7-theme-color),inset -3px -3px 0px -3.5px var(--f7-theme-color),inset -0.5px -0.5px 0px #ffffff80,inset 0.5px 0.5px 0px #ffffff1a,inset -3px 3px 0px -3.5px #ffffff40,inset 0px -5px 0px -3.5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),inset 0px -5px 5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),0 0 15px 4px #0003}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}
package/components/fab/fab.css CHANGED
@@ -1 +1 @@
1
- :root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-bg-color:var(--f7-theme-color);--f7-glass-shadow-fab:inset -3px -3px 0px -3.5px #fff,inset 3px 3px 0px -3.5px #fff,inset 0px 0px 0px 0.5px #ffffff80,inset 3px 3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset -3px -3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset 0 0 5px 1px #fff,0 0 15px 4px #0003;--f7-fab-label-text-color:#000;--f7-fab-label-bg-color:#fff;--f7-fab-text-color:#fff;--f7-fab-border-radius:50px;--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px #0006;--f7-fab-extended-text-transform:uppercase;--f7-fab-extended-size:50px;--f7-fab-extended-text-padding:0 20px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:var(--f7-glass-shadow);--f7-fab-label-padding:8px 16px}.ios .dark,.ios.dark{--f7-fab-bg-color:color-mix(in oklab,var(--f7-theme-color-shade) 50%,#0000 0%);--f7-glass-shadow-fab:inset 3px 3px 0px -3.5px var(--f7-theme-color),inset -3px -3px 0px -3.5px var(--f7-theme-color),inset -0.5px -0.5px 0px #ffffff80,inset 0.5px 0.5px 0px #ffffff1a,inset -3px 3px 0px -3.5px #ffffff40,inset 0px -5px 0px -3.5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),inset 0px -5px 5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),0 0 15px 4px #0003;--f7-fab-label-text-color:#fff;--f7-fab-label-bg-color:#151515}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--f7-fab-box-shadow:0px 1px 2px #00000040;--f7-fab-extended-size:56px;--f7-fab-extended-text-padding:0 16px;--f7-fab-extended-text-font-weight:500;--f7-fab-extended-text-letter-spacing:0;--f7-fab-extended-text-transform:none;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:0px 1px 2px #00000040;--f7-fab-label-padding:4px 12px}.md,.md .dark,.md [class*=color-]{--f7-fab-bg-color:var(--f7-md-primary-container);--f7-fab-text-color:var(--f7-md-on-primary-container);--f7-fab-label-text-color:var(--f7-md-on-surface);--f7-fab-label-bg-color:var(--f7-md-surface-5)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{align-items:center;background-color:var(--f7-fab-bg-color,var(--f7-theme-color));border-radius:var(--f7-fab-border-radius);box-shadow:var(--f7-fab-box-shadow);color:var(--f7-fab-text-color);display:flex;height:var(--f7-fab-size);justify-content:center;overflow:hidden;position:relative;transition-duration:.3s;width:var(--f7-fab-size);z-index:1}.fab>a i{left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{opacity:0;transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5)}.fab-buttons a{border-radius:var(--f7-fab-border-radius);height:var(--f7-fab-button-size);width:var(--f7-fab-button-size)}.fab-buttons{display:flex;pointer-events:none;position:absolute;visibility:hidden}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{opacity:0;transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5)}.fab-opened:not(.fab-morph)>a i+i{opacity:1;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1)}.fab-opened .fab-buttons{pointer-events:auto;visibility:visible}.fab-opened .fab-buttons a{opacity:1;transform:translateZ(0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:.15s}.fab-opened .fab-buttons a:nth-child(5){transition-delay:.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:.25s}.fab-buttons-bottom,.fab-buttons-top{left:50%;margin-left:calc(var(--f7-fab-button-size)*-1/2);width:var(--f7-fab-button-size)}.fab-buttons-top{bottom:100%;flex-direction:column-reverse;margin-bottom:16px}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{flex-direction:column;margin-top:16px;top:100%}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{height:var(--f7-fab-button-size);margin-top:calc(var(--f7-fab-button-size)*-1/2);top:50%}.fab-buttons-left{flex-direction:row-reverse;margin-right:16px;right:100%}.fab-buttons-left a{transform:translate3d(8px,0,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{height:100%;left:0;top:0;width:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{bottom:100%;left:50%;margin-bottom:16px;margin-left:calc(var(--f7-fab-button-size)*-1/2);transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-left:16px;margin-top:calc(var(--f7-fab-button-size)*-1/2);top:50%;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(var(--f7-fab-button-size)*-1/2);margin-top:16px;top:100%;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){margin-right:16px;margin-top:calc(var(--f7-fab-button-size)*-1/2);right:100%;top:50%;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{background:var(--f7-fab-bg-color,var(--f7-theme-color));border-radius:var(--f7-fab-border-radius);box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{background:none!important;box-shadow:none}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:.25s}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{min-width:var(--f7-fab-extended-size);width:auto}.fab-extended>a{height:var(--f7-fab-extended-size);width:100%}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);padding:var(--f7-fab-extended-text-padding);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{background:var(--f7-fab-label-bg-color);border-radius:var(--f7-fab-label-border-radius);box-shadow:var(--f7-fab-label-box-shadow);color:var(--f7-fab-label-text-color);font-size:var(--f7-fab-label-font-size);padding:var(--f7-fab-label-padding);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{margin-right:8px;right:100%}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a,.ios .fab>a{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow-fab)}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade));transition-duration:0s}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}
1
+ :root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-bg-color:var(--f7-theme-color);--f7-glass-shadow-fab:inset -3px -3px 0px -3.5px #fff,inset 3px 3px 0px -3.5px #fff,inset 0px 0px 0px 0.5px #ffffff80,inset 3px 3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset -3px -3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset 0 0 5px 1px #fff,0 0 15px 4px #0003;--f7-fab-label-text-color:#000;--f7-fab-label-bg-color:#fff;--f7-fab-text-color:#fff;--f7-fab-border-radius:50px;--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px #0006;--f7-fab-extended-text-transform:uppercase;--f7-fab-extended-size:50px;--f7-fab-extended-text-padding:0 20px;--f7-fab-extended-text-font-weight:600;--f7-fab-extended-text-letter-spacing:0;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:var(--f7-glass-shadow);--f7-fab-label-padding:8px 16px}.ios .dark,.ios.dark{--f7-fab-bg-color:color-mix(in oklab,var(--f7-theme-color-shade) 50%,#0000 0%);--f7-glass-shadow-fab:inset 3px 3px 0px -3.5px var(--f7-theme-color),inset -3px -3px 0px -3.5px var(--f7-theme-color),inset -0.5px -0.5px 0px #ffffff80,inset 0.5px 0.5px 0px #ffffff1a,inset -3px 3px 0px -3.5px #ffffff40,inset 0px -5px 0px -3.5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),inset 0px -5px 5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),0 0 15px 4px #0003;--f7-fab-label-text-color:#fff;--f7-fab-label-bg-color:#151515}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--f7-fab-box-shadow:0px 1px 2px #00000040;--f7-fab-extended-size:56px;--f7-fab-extended-text-padding:0 16px;--f7-fab-extended-text-font-weight:500;--f7-fab-extended-text-letter-spacing:0;--f7-fab-extended-text-transform:none;--f7-fab-label-border-radius:8px;--f7-fab-label-box-shadow:0px 1px 2px #00000040;--f7-fab-label-padding:4px 12px}.md,.md .dark,.md [class*=color-]{--f7-fab-bg-color:var(--f7-md-primary-container);--f7-fab-text-color:var(--f7-md-on-primary-container);--f7-fab-label-text-color:var(--f7-md-on-surface);--f7-fab-label-bg-color:var(--f7-md-surface-5)}.fab-backdrop{z-index:1400}.fab{position:absolute;z-index:1500}.fab a{--f7-touch-ripple-color:var(--f7-touch-ripple-white)}.fab-left-bottom,.fab-left-center,.fab-left-top{left:calc(var(--f7-fab-margin) + var(--f7-safe-area-left))}.fab-right-bottom,.fab-right-center,.fab-right-top{right:calc(var(--f7-fab-margin) + var(--f7-safe-area-right))}.fab-center-top,.fab-left-top,.fab-right-top{top:var(--f7-fab-margin)}.fab-center-bottom,.fab-left-bottom,.fab-right-bottom{bottom:calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom))}.fab-center-bottom,.fab-center-center,.fab-center-top{left:50%;transform:translateX(-50%)}.fab-center-center,.fab-left-center,.fab-right-center{top:50%;transform:translateY(-50%)}.fab-center-center{left:50%;top:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{align-items:center;background-color:var(--f7-fab-bg-color,var(--f7-theme-color));border-radius:var(--f7-fab-border-radius);box-shadow:var(--f7-fab-box-shadow);color:var(--f7-fab-text-color);display:flex;height:var(--f7-fab-size);justify-content:center;overflow:hidden;position:relative;transition-duration:.3s;width:var(--f7-fab-size);z-index:1}.fab>a i{left:50%;position:absolute;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{opacity:0;transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5)}.fab-buttons a{border-radius:var(--f7-fab-border-radius);height:var(--f7-fab-button-size);width:var(--f7-fab-button-size)}.fab-buttons{display:flex;pointer-events:none;position:absolute;visibility:hidden}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{opacity:0;transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5)}.fab-opened:not(.fab-morph)>a i+i{opacity:1;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1)}.fab-opened .fab-buttons{pointer-events:auto;visibility:visible}.fab-opened .fab-buttons a{opacity:1;transform:translateZ(0) scale(1)!important}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:.15s}.fab-opened .fab-buttons a:nth-child(5){transition-delay:.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:.25s}.fab-buttons-bottom,.fab-buttons-top{left:50%;margin-left:calc(var(--f7-fab-button-size)*-1/2);width:var(--f7-fab-button-size)}.fab-buttons-top{bottom:100%;flex-direction:column-reverse;margin-bottom:16px}.fab-buttons-top a{transform:translate3d(0,8px,0) scale(.3);transform-origin:center bottom}.fab-buttons-top a+a{margin-bottom:16px}.fab-buttons-bottom{flex-direction:column;margin-top:16px;top:100%}.fab-buttons-bottom a{transform:translate3d(0,-8px,0) scale(.3);transform-origin:center top}.fab-buttons-bottom a+a{margin-top:16px}.fab-buttons-left,.fab-buttons-right{height:var(--f7-fab-button-size);margin-top:calc(var(--f7-fab-button-size)*-1/2);top:50%}.fab-buttons-left{flex-direction:row-reverse;margin-right:16px;right:100%}.fab-buttons-left a{transform:translate3d(8px,0,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px}.fab-buttons-right a{transform:translate3d(-8px,0,0) scale(.3);transform-origin:left center}.fab-buttons-right a+a{margin-left:16px}.fab-buttons-center{height:100%;left:0;top:0;width:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{bottom:100%;left:50%;margin-bottom:16px;margin-left:calc(var(--f7-fab-button-size)*-1/2);transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-left:16px;margin-top:calc(var(--f7-fab-button-size)*-1/2);top:50%;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(var(--f7-fab-button-size)*-1/2);margin-top:16px;top:100%;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){margin-right:16px;margin-top:calc(var(--f7-fab-button-size)*-1/2);right:100%;top:50%;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{background:var(--f7-fab-bg-color,var(--f7-theme-color));border-radius:var(--f7-fab-border-radius);box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{background:none!important;box-shadow:none}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:.25s}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{min-width:var(--f7-fab-extended-size);width:auto}.fab-extended>a{height:var(--f7-fab-extended-size);width:100%}.fab-extended>a i{left:calc(var(--f7-fab-extended-size)/2)}.fab-extended i~.fab-text{padding-left:var(--f7-fab-extended-size)}.fab-extended>a{width:100%!important}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);padding:var(--f7-fab-extended-text-padding);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible!important}.fab-label{background:var(--f7-fab-label-bg-color);border-radius:var(--f7-fab-label-border-radius);box-shadow:var(--f7-fab-label-box-shadow);color:var(--f7-fab-label-text-color);font-size:var(--f7-fab-label-font-size);padding:var(--f7-fab-label-padding);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{margin-right:8px;right:100%}.fab-left-bottom .fab-label,.fab-left-center .fab-label,.fab-left-top .fab-label{left:100%;margin-left:8px}.navbars~* .fab-center-top,.navbars~* .fab-left-top,.navbars~* .fab-right-top,.navbars~.fab-center-top,.navbars~.fab-left-top,.navbars~.fab-right-top,.navbar~* .fab-center-top,.navbar~* .fab-left-top,.navbar~* .fab-right-top,.navbar~.fab-center-top,.navbar~.fab-left-top,.navbar~.fab-right-top{margin-top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .toolbar-top-ios~* .fab-center-top,.ios .toolbar-top-ios~* .fab-left-top,.ios .toolbar-top-ios~* .fab-right-top,.ios .toolbar-top-ios~.fab-center-top,.ios .toolbar-top-ios~.fab-left-top,.ios .toolbar-top-ios~.fab-right-top,.md .toolbar-top-md~* .fab-center-top,.md .toolbar-top-md~* .fab-left-top,.md .toolbar-top-md~* .fab-right-top,.md .toolbar-top-md~.fab-center-top,.md .toolbar-top-md~.fab-left-top,.md .toolbar-top-md~.fab-right-top,.toolbar-top~* .fab-center-top,.toolbar-top~* .fab-left-top,.toolbar-top~* .fab-right-top,.toolbar-top~.fab-center-top,.toolbar-top~.fab-left-top,.toolbar-top~.fab-right-top{margin-top:var(--f7-toolbar-height)}.ios .toolbar-bottom-ios~* .fab-center-bottom,.ios .toolbar-bottom-ios~* .fab-left-bottom,.ios .toolbar-bottom-ios~* .fab-right-bottom,.ios .toolbar-bottom-ios~.fab-center-bottom,.ios .toolbar-bottom-ios~.fab-left-bottom,.ios .toolbar-bottom-ios~.fab-right-bottom,.md .toolbar-bottom-md~* .fab-center-bottom,.md .toolbar-bottom-md~* .fab-left-bottom,.md .toolbar-bottom-md~* .fab-right-bottom,.md .toolbar-bottom-md~.fab-center-bottom,.md .toolbar-bottom-md~.fab-left-bottom,.md .toolbar-bottom-md~.fab-right-bottom,.toolbar-bottom~* .fab-center-bottom,.toolbar-bottom~* .fab-left-bottom,.toolbar-bottom~* .fab-right-bottom,.toolbar-bottom~.fab-center-bottom,.toolbar-bottom~.fab-left-bottom,.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-toolbar-height)}.ios .tabbar-icons.toolbar-bottom-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-bottom-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-center-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-left-bottom,.md .tabbar-icons.toolbar-bottom-md~.fab-right-bottom,.tabbar-icons.toolbar-bottom~* .fab-center-bottom,.tabbar-icons.toolbar-bottom~* .fab-left-bottom,.tabbar-icons.toolbar-bottom~* .fab-right-bottom,.tabbar-icons.toolbar-bottom~.fab-center-bottom,.tabbar-icons.toolbar-bottom~.fab-left-bottom,.tabbar-icons.toolbar-bottom~.fab-right-bottom{margin-bottom:var(--f7-tabbar-icons-height)}.ios .tabbar-icons.toolbar-top-ios~* .fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~* .fab-right-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-center-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-left-bottom,.ios .tabbar-icons.toolbar-top-ios~.fab-right-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-center-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-left-bottom,.md .tabbar-icons.toolbar-top-md~* .fab-right-bottom,.md .tabbar-icons.toolbar-top-md~.fab-center-bottom,.md .tabbar-icons.toolbar-top-md~.fab-left-bottom,.md .tabbar-icons.toolbar-top-md~.fab-right-bottom,.tabbar-icons.toolbar-top~* .fab-center-bottom,.tabbar-icons.toolbar-top~* .fab-left-bottom,.tabbar-icons.toolbar-top~* .fab-right-bottom,.tabbar-icons.toolbar-top~.fab-center-bottom,.tabbar-icons.toolbar-top~.fab-left-bottom,.tabbar-icons.toolbar-top~.fab-right-bottom{margin-top:var(--f7-tabbar-icons-height)}.messagebar~* .fab-center-bottom,.messagebar~* .fab-left-bottom,.messagebar~* .fab-right-bottom,.messagebar~.fab-center-bottom,.messagebar~.fab-left-bottom,.messagebar~.fab-right-bottom{margin-bottom:var(--f7-messagebar-height)}.ios .navbar+.toolbar-top-ios~* .fab-center-top,.ios .navbar+.toolbar-top-ios~* .fab-left-top,.ios .navbar+.toolbar-top-ios~* .fab-right-top,.ios .navbar+.toolbar-top-ios~.fab-center-top,.ios .navbar+.toolbar-top-ios~.fab-left-top,.ios .navbar+.toolbar-top-ios~.fab-right-top,.md .navbar+.toolbar-top-ios~* .fab-center-top,.md .navbar+.toolbar-top-ios~* .fab-left-top,.md .navbar+.toolbar-top-ios~* .fab-right-top,.md .navbar+.toolbar-top-ios~.fab-center-top,.md .navbar+.toolbar-top-ios~.fab-left-top,.md .navbar+.toolbar-top-ios~.fab-right-top,.navbar+.toolbar-top~* .fab-center-top,.navbar+.toolbar-top~* .fab-left-top,.navbar+.toolbar-top~* .fab-right-top,.navbar+.toolbar-top~.fab-center-top,.navbar+.toolbar-top~.fab-left-top,.navbar+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-center-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-left-top,.md .navbar+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbar+.toolbar-top.tabbar-icons~* .fab-center-top,.navbar+.toolbar-top.tabbar-icons~* .fab-left-top,.navbar+.toolbar-top.tabbar-icons~* .fab-right-top,.navbar+.toolbar-top.tabbar-icons~.fab-center-top,.navbar+.toolbar-top.tabbar-icons~.fab-left-top,.navbar+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios~* .fab-center-top,.ios .navbars+.toolbar-top-ios~* .fab-left-top,.ios .navbars+.toolbar-top-ios~* .fab-right-top,.ios .navbars+.toolbar-top-ios~.fab-center-top,.ios .navbars+.toolbar-top-ios~.fab-left-top,.ios .navbars+.toolbar-top-ios~.fab-right-top,.navbars+.toolbar-top~* .fab-center-top,.navbars+.toolbar-top~* .fab-left-top,.navbars+.toolbar-top~* .fab-right-top,.navbars+.toolbar-top~.fab-center-top,.navbars+.toolbar-top~.fab-left-top,.navbars+.toolbar-top~.fab-right-top{margin-top:calc(var(--f7-toolbar-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~* .fab-right-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-center-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-left-top,.ios .navbars+.toolbar-top-ios.tabbar-icons~.fab-right-top,.navbars+.toolbar-top.tabbar-icons~* .fab-center-top,.navbars+.toolbar-top.tabbar-icons~* .fab-left-top,.navbars+.toolbar-top.tabbar-icons~* .fab-right-top,.navbars+.toolbar-top.tabbar-icons~.fab-center-top,.navbars+.toolbar-top.tabbar-icons~.fab-left-top,.navbars+.toolbar-top.tabbar-icons~.fab-right-top{margin-top:calc(var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top))}.ios .fab-buttons a,.ios .fab>a{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow-fab)}.ios .fab-buttons a.active-state,.ios .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade));transition-duration:0s}.ios,.ios [class*=color-]{--f7-fab-pressed-bg-color:var(--f7-theme-color-shade);--f7-fab-bg-color:var(--f7-theme-color);--f7-glass-shadow-fab:inset -3px -3px 0px -3.5px #fff,inset 3px 3px 0px -3.5px #fff,inset 0px 0px 0px 0.5px #ffffff80,inset 3px 3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset -3px -3px 10px -2px color-mix(in oklab,var(--f7-theme-color) 100%,#000),inset 0 0 5px 1px #fff,0 0 15px 4px #0003}.ios .dark,.ios .dark [class*=color-],.ios.dark,.ios.dark [class*=color-]{--f7-fab-bg-color:color-mix(in oklab,var(--f7-theme-color-shade) 50%,#0000 0%);--f7-glass-shadow-fab:inset 3px 3px 0px -3.5px var(--f7-theme-color),inset -3px -3px 0px -3.5px var(--f7-theme-color),inset -0.5px -0.5px 0px #ffffff80,inset 0.5px 0.5px 0px #ffffff1a,inset -3px 3px 0px -3.5px #ffffff40,inset 0px -5px 0px -3.5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),inset 0px -5px 5px color-mix(in oklab,var(--f7-theme-color) 50%,#0000 10%),0 0 15px 4px #0003}.md .fab-buttons a.active-state,.md .fab>a.active-state{background-color:var(--f7-fab-pressed-bg-color,var(--f7-fab-bg-color,var(--f7-theme-color)))}
package/framework7-bundle-rtl.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Framework7 9.0.0
2
+ * Framework7 9.0.1
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: November 25, 2025
10
+ * Released on: November 26, 2025
11
11
  */
12
12
 
13
13
  /*====================
@@ -14211,6 +14211,19 @@ table.data-table {
14211
14211
  transition-duration: 0ms;
14212
14212
  background-color: var(--f7-fab-pressed-bg-color, var(--f7-theme-color-shade));
14213
14213
  }
14214
+ .ios,
14215
+ .ios [class*='color-'] {
14216
+ --f7-fab-pressed-bg-color: var(--f7-theme-color-shade);
14217
+ --f7-fab-bg-color: var(--f7-theme-color);
14218
+ --f7-glass-shadow-fab: inset -3px -3px 0px -3.5px #fff, inset 3px 3px 0px -3.5px #fff, inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5), inset 3px 3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black), inset -3px -3px 10px -2px color-mix(in oklab, var(--f7-theme-color) 100%, black), inset 0 0 5px 1px #fff, 0 0 15px 4px rgba(0, 0, 0, 0.2);
14219
+ }
14220
+ .ios.dark,
14221
+ .ios .dark,
14222
+ .ios.dark [class*='color-'],
14223
+ .ios .dark [class*='color-'] {
14224
+ --f7-fab-bg-color: color-mix(in oklab, var(--f7-theme-color-shade) 50%, transparent 0%);
14225
+ --f7-glass-shadow-fab: inset 3px 3px 0px -3.5px var(--f7-theme-color), inset -3px -3px 0px -3.5px var(--f7-theme-color), inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5), inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1), inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25), inset 0px -5px 0px -3.5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%), inset 0px -5px 5px color-mix(in oklab, var(--f7-theme-color) 50%, transparent 10%), 0 0 15px 4px rgba(0, 0, 0, 0.2);
14226
+ }
14214
14227
  .md .fab > a.active-state,
14215
14228
  .md .fab-buttons a.active-state {
14216
14229
  background-color: var(--f7-fab-pressed-bg-color, var(--f7-fab-bg-color, var(--f7-theme-color)));