framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 14.5 kB
CSS
:root{--f7-fab-margin:16px;--f7-fab-extended-text-font-size:14px;--f7-fab-label-padding:4px 12px;--f7-fab-label-font-size:inherit;--f7-fab-button-size:40px}.ios{--f7-fab-text-color:#fff;--f7-fab-border-radius:50px;--f7-fab-size:50px;--f7-fab-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.4);--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:4px;--f7-fab-label-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.4);--f7-fab-label-text-color:#333;--f7-fab-label-bg-color:#fff}.md{--f7-fab-border-radius:16px;--f7-fab-size:56px;--f7-fab-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);--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 rgba(0, 0, 0, 0.25)}.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{top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.fab-buttons a,.fab>a{background-color:var(--f7-fab-bg-color,var(--f7-theme-color));width:var(--f7-fab-size);height:var(--f7-fab-size);box-shadow:var(--f7-fab-box-shadow);border-radius:var(--f7-fab-border-radius);position:relative;transition-duration:.3s;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:1;color:var(--f7-fab-text-color)}.fab>a i{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);transition:.3s}.fab>a i+i{transform:translate3d(-50%,-50%,0) rotate(-90deg) scale(.5);opacity:0}.fab-buttons a{border-radius:var(--f7-fab-border-radius);width:var(--f7-fab-button-size);height:var(--f7-fab-button-size)}.fab-buttons{display:flex;visibility:hidden;pointer-events:none;position:absolute}.fab-buttons a{opacity:0}.fab-opened:not(.fab-morph)>a i{transform:translate3d(-50%,-50%,0) rotate(90deg) scale(.5);opacity:0}.fab-opened:not(.fab-morph)>a i+i{transform:translate3d(-50%,-50%,0) rotate(0deg) scale(1);opacity:1}.fab-opened .fab-buttons{visibility:visible;pointer-events:auto}.fab-opened .fab-buttons a{opacity:1;transform:translate3d(0,0px,0) scale(1)}.fab-opened .fab-buttons a:nth-child(2){transition-delay:50ms}.fab-opened .fab-buttons a:nth-child(3){transition-delay:0.1s}.fab-opened .fab-buttons a:nth-child(4){transition-delay:150ms}.fab-opened .fab-buttons a:nth-child(5){transition-delay:0.2s}.fab-opened .fab-buttons a:nth-child(6){transition-delay:250ms}.fab-buttons-bottom,.fab-buttons-top{left:50%;width:var(--f7-fab-button-size);margin-left:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-top{bottom:100%;margin-bottom:16px;flex-direction:column-reverse}.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{top:100%;margin-top:16px;flex-direction:column}.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{top:50%;height:var(--f7-fab-button-size);margin-top:calc(-1 * var(--f7-fab-button-size)/ 2)}.fab-buttons-left{right:100%;margin-right:16px}.fab-buttons-left a{transform:translate3d(8px,0px,0) scale(.3);transform-origin:right center}.fab-buttons-left a+a{margin-right:16px}.fab-buttons-right{left:100%;margin-left:16px;flex-direction:row-reverse}.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{left:0%;top:0%;width:100%;height:100%}.fab-buttons-center a{position:absolute}.fab-buttons-center a:first-child{left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);bottom:100%;margin-bottom:16px;transform:translateY(-8px) scale(.3);transform-origin:center bottom}.fab-buttons-center a:nth-child(2){left:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-left:16px;transform:translateX(-8px) scale(.3);transform-origin:left center}.fab-buttons-center a:nth-child(3){left:50%;margin-left:calc(-1 * var(--f7-fab-button-size)/ 2);top:100%;margin-top:16px;transform:translateY(8px) scale(.3);transform-origin:center top}.fab-buttons-center a:nth-child(4){right:100%;margin-top:calc(-1 * var(--f7-fab-button-size)/ 2);top:50%;margin-right:16px;transform:translateX(8px) scale(.3);transform-origin:right center}.fab-morph{border-radius:var(--f7-fab-border-radius);background:var(--f7-fab-bg-color,var(--f7-theme-color));box-shadow:var(--f7-fab-box-shadow)}.fab-morph>a{box-shadow:none;background:0 0}.fab-opened.fab-morph>a i{opacity:0}.fab-morph,.fab-morph-target,.fab-morph>a{transition-duration:250ms}.fab-morph-target:not(.fab-morph-target-visible){display:none}.fab-extended{width:auto;min-width:var(--f7-fab-extended-size)}.fab-extended>a{width:100%;height:var(--f7-fab-extended-size)}.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%}.fab-text{box-sizing:border-box;font-size:var(--f7-fab-extended-text-font-size);padding:var(--f7-fab-extended-text-padding);font-weight:var(--f7-fab-extended-text-font-weight);letter-spacing:var(--f7-fab-extended-text-letter-spacing);text-transform:var(--f7-fab-extended-text-transform)}.fab-label-button{overflow:visible}.fab-label{position:absolute;top:50%;padding:var(--f7-fab-label-padding);border-radius:var(--f7-fab-label-border-radius);background:var(--f7-fab-label-bg-color);color:var(--f7-fab-label-text-color);box-shadow:var(--f7-fab-label-box-shadow);white-space:nowrap;transform:translateY(-50%);pointer-events:none;font-size:var(--f7-fab-label-font-size)}.fab-right-bottom .fab-label,.fab-right-center .fab-label,.fab-right-top .fab-label{right:100%;margin-right:8px}.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.active-state,.ios .fab>a.active-state{transition-duration:0s;background-color:var(--f7-fab-pressed-bg-color,var(--f7-theme-color-shade))}.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)))}