framework7/components/toast/toast-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{background-color:var(--f7-toast-bg-color);box-sizing:border-box;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);max-width:var(--f7-toast-max-width);opacity:0;position:absolute;transition-property:transform,opacity;z-index:20000}.toast.modal-in{opacity:1}.toast .toast-content{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{flex-shrink:1;line-height:20px;min-width:0}.toast .toast-button{flex-shrink:0;margin-bottom:-8px;margin-top:-8px;min-width:var(--f7-toast-button-min-width);width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow);left:0;transition-duration:.3s;width:100%}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translateZ(0)}.ios .toast.toast-center{border-radius:var(--f7-toast-border-radius);left:50%;width:auto}.ios .toast.toast-center,.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translateZ(0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{border-radius:var(--f7-toast-border-radius);left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2);width:var(--f7-toast-max-width)}}.ios .toast-button{margin-left:calc(var(--f7-button-padding-horizontal)*-1);margin-right:16px}.md .toast{border-radius:var(--f7-toast-border-radius);left:8px;transform:scale(.9);transition-duration:.2s;width:calc(100% - 16px)}.md .toast.modal-in,.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;transform:scale(.9) translate3d(-55%,-55%,0);width:auto}.md .toast.toast-center.modal-in,.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;margin-left:calc(var(--f7-toast-max-width)*-1/2);width:var(--f7-toast-max-width)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:-8px;margin-right:16px}