maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 13 kB
CSS
.m-toast-container{z-index:1051;flex-direction:column;gap:.5rem;padding:1rem;display:flex;position:fixed}.m-toast-container.--top{display:flex;top:0}.m-toast-container.--center{width:100%}@media (min-width:768px){.m-toast-container.--center{width:auto;position:fixed;left:50%;transform:translate(-50%)}}.m-toast-container.--bottom{flex-direction:column-reverse;display:flex;bottom:0}.m-toast-container.--right{width:100%;inset-inline-end:0}@media (min-width:768px){.m-toast-container.--right{width:auto}}.m-toast-container.--left{width:100%;left:0}@media (min-width:768px){.m-toast-container.--left{width:auto}}.m-toast[data-v-a16077a2],.m-toast[data-v-a16077a2] *{box-sizing:border-box}.m-toast[data-v-a16077a2]{z-index:10;position:relative}.m-toast.--left .m-toast__close[data-v-a16077a2]{inset-inline-end:-.5rem}.m-toast.--right .m-toast__close[data-v-a16077a2],.m-toast.--center .m-toast__close[data-v-a16077a2]{left:-.5rem}@media (min-width:768px){.m-toast.--center .m-toast__button[data-v-a16077a2]{justify-content:center;width:22rem}.m-toast.--left .m-toast__button[data-v-a16077a2],.m-toast.--right .m-toast__button[data-v-a16077a2]{width:22rem}}.m-toast__message[data-v-a16077a2]{text-align:start;flex:1;margin:0;padding-top:.75rem;padding-bottom:.75rem;font-weight:500}.m-toast__button[data-v-a16077a2]{border-radius:var(--maz-radius);border-width:var(--maz-border-width);--maz-tw-shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--maz-tw-shadow-colored:0 4px 6px -1px var(--maz-tw-shadow-color), 0 2px 4px -2px var(--maz-tw-shadow-color);width:100%;box-shadow:var(--maz-tw-ring-offset-shadow,0 0 #0000), var(--maz-tw-ring-shadow,0 0 #0000), var(--maz-tw-shadow);--maz-tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--maz-tw-backdrop-blur) var(--maz-tw-backdrop-brightness) var(--maz-tw-backdrop-contrast) var(--maz-tw-backdrop-grayscale) var(--maz-tw-backdrop-hue-rotate) var(--maz-tw-backdrop-invert) var(--maz-tw-backdrop-opacity) var(--maz-tw-backdrop-saturate) var(--maz-tw-backdrop-sepia);backdrop-filter:var(--maz-tw-backdrop-blur) var(--maz-tw-backdrop-brightness) var(--maz-tw-backdrop-contrast) var(--maz-tw-backdrop-grayscale) var(--maz-tw-backdrop-hue-rotate) var(--maz-tw-backdrop-invert) var(--maz-tw-backdrop-opacity) var(--maz-tw-backdrop-saturate) var(--maz-tw-backdrop-sepia);align-self:center;align-items:center;gap:.5rem;padding-inline:.5rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.m-toast__close[data-v-a16077a2]{border-width:var(--maz-border-width);--maz-tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--maz-tw-backdrop-blur) var(--maz-tw-backdrop-brightness) var(--maz-tw-backdrop-contrast) var(--maz-tw-backdrop-grayscale) var(--maz-tw-backdrop-hue-rotate) var(--maz-tw-backdrop-invert) var(--maz-tw-backdrop-opacity) var(--maz-tw-backdrop-saturate) var(--maz-tw-backdrop-sepia);backdrop-filter:var(--maz-tw-backdrop-blur) var(--maz-tw-backdrop-brightness) var(--maz-tw-backdrop-contrast) var(--maz-tw-backdrop-grayscale) var(--maz-tw-backdrop-hue-rotate) var(--maz-tw-backdrop-invert) var(--maz-tw-backdrop-opacity) var(--maz-tw-backdrop-saturate) var(--maz-tw-backdrop-sepia);border-radius:9999px;justify-content:center;align-items:center;padding:.125rem;display:flex;position:absolute;top:-.5rem}.m-toast__close__close-icon[data-v-a16077a2]{cursor:pointer}.m-toast.--info .m-toast__button[data-v-a16077a2]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-info-600) / var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-info) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-info-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--info .m-toast__button[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-info-600) / var(--maz-tw-bg-opacity,1))}.m-toast.--info .m-toast__button[data-v-a16077a2]:is([class~=dark] *){border-color:hsl(var(--maz-info) / .2);background-color:hsl(var(--maz-info) / .1);--maz-tw-text-opacity:1;color:hsl(var(--maz-info-400) / var(--maz-tw-text-opacity,1))}.m-toast.--info .m-toast__button[data-v-a16077a2]:is([class~=dark] *):hover{background-color:hsl(var(--maz-info) / .2)}.m-toast.--info .m-toast__close[data-v-a16077a2]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-info-400) / var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-info) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-info-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--info .m-toast__close[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-info-600) / var(--maz-tw-bg-opacity,1))}.m-toast.--info .m-toast__close[data-v-a16077a2]:is([class~=dark] *){border-color:hsl(var(--maz-info) / .2);background-color:hsl(var(--maz-info) / .1);--maz-tw-text-opacity:1;color:hsl(var(--maz-info-600) / var(--maz-tw-text-opacity,1))}.m-toast.--info .m-toast__close[data-v-a16077a2]:is([class~=dark] *):hover{background-color:hsl(var(--maz-info) / .2)}.m-toast.--success .m-toast__button[data-v-a16077a2]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-success-600) / var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-success) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-success-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--success .m-toast__button[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-success-600) / var(--maz-tw-bg-opacity,1))}.m-toast.--success .m-toast__button[data-v-a16077a2]:is([class~=dark] *){border-color:hsl(var(--maz-success) / .2);background-color:hsl(var(--maz-success) / .1);--maz-tw-text-opacity:1;color:hsl(var(--maz-success-400) / var(--maz-tw-text-opacity,1))}.m-toast.--success .m-toast__button[data-v-a16077a2]:hover:is([class~=dark] *){background-color:hsl(var(--maz-success) / .2)}.m-toast.--success .m-toast__close[data-v-a16077a2]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-success-600) / var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-success) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-success-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--success .m-toast__close[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-success-600) / var(--maz-tw-bg-opacity,1))}.m-toast.--success .m-toast__close[data-v-a16077a2]:is([class~=dark] *){border-color:hsl(var(--maz-success) / .2);background-color:hsl(var(--maz-success) / .1);--maz-tw-text-opacity:1;color:hsl(var(--maz-success-600) / var(--maz-tw-text-opacity,1))}.m-toast.--success .m-toast__close[data-v-a16077a2]:hover:is([class~=dark] *){background-color:hsl(var(--maz-success) / .2)}.m-toast.--warning .m-toast__button[data-v-a16077a2]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-warning-600) / var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-warning) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-warning-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--warning .m-toast__button[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-warning-600) / var(--maz-tw-bg-opacity,1))}.m-toast.--warning .m-toast__button[data-v-a16077a2]:is([class~=dark] *){border-color:hsl(var(--maz-warning) / .2);background-color:hsl(var(--maz-warning) / .1);--maz-tw-text-opacity:1;color:hsl(var(--maz-warning-400) / var(--maz-tw-text-opacity,1))}.m-toast.--warning .m-toast__button[data-v-a16077a2]:hover:is([class~=dark] *){background-color:hsl(var(--maz-warning) / .2)}.m-toast.--warning .m-toast__close[data-v-a16077a2]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-warning-600) / var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-warning) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-warning-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--warning .m-toast__close[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-warning-600) / var(--maz-tw-bg-opacity,1))}.m-toast.--warning .m-toast__close[data-v-a16077a2]:is([class~=dark] *){border-color:hsl(var(--maz-warning) / .2);background-color:hsl(var(--maz-warning) / .1);--maz-tw-text-opacity:1;color:hsl(var(--maz-warning-600) / var(--maz-tw-text-opacity,1))}.m-toast.--warning .m-toast__close[data-v-a16077a2]:hover:is([class~=dark] *){background-color:hsl(var(--maz-warning) / .2)}.m-toast.--destructive .m-toast__button[data-v-a16077a2]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-destructive-600) / var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-destructive) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--destructive .m-toast__button[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-destructive-600) / var(--maz-tw-bg-opacity,1))}.m-toast.--destructive .m-toast__button[data-v-a16077a2]:is([class~=dark] *){border-color:hsl(var(--maz-destructive) / .2);background-color:hsl(var(--maz-destructive) / .1);--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive-400) / var(--maz-tw-text-opacity,1))}.m-toast.--destructive .m-toast__button[data-v-a16077a2]:hover:is([class~=dark] *){background-color:hsl(var(--maz-destructive) / .2)}.m-toast.--destructive .m-toast__close[data-v-a16077a2]{--maz-tw-border-opacity:1;border-color:hsl(var(--maz-destructive-600) / var(--maz-tw-border-opacity,1));--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-destructive) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--destructive .m-toast__close[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-destructive-600) / var(--maz-tw-bg-opacity,1))}.m-toast.--destructive .m-toast__close[data-v-a16077a2]:is([class~=dark] *){border-color:hsl(var(--maz-destructive) / .2);background-color:hsl(var(--maz-destructive) / .1);--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive-600) / var(--maz-tw-text-opacity,1))}.m-toast.--destructive .m-toast__close[data-v-a16077a2]:hover:is([class~=dark] *){background-color:hsl(var(--maz-destructive) / .2)}.m-toast.--contrast .m-toast__button[data-v-a16077a2]{border-color:hsl(var(--maz-contrast-600) / .2);--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-contrast) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--contrast .m-toast__button[data-v-a16077a2]:hover{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-contrast-500) / var(--maz-tw-bg-opacity,1))}.m-toast.--contrast .m-toast__button[data-v-a16077a2]:hover:is([class~=dark] *){background-color:hsl(var(--maz-contrast) / .7)}.m-toast.--contrast .m-toast__close[data-v-a16077a2]{border-color:hsl(var(--maz-contrast-600) / .2);--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-contrast) / var(--maz-tw-bg-opacity,1));--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast-foreground) / var(--maz-tw-text-opacity,1))}.m-toast.--contrast .m-toast__close[data-v-a16077a2]:hover{background-color:hsl(var(--maz-contrast) / .7)}.m-toast .m-toast__progress-bar[data-v-a16077a2]{left:0;right:0;bottom:max(var(--maz-border-width), 1px);height:max(var(--maz-border-width), .125rem);position:absolute}.m-toast .m-toast__progress-bar .m-toast__progress-bar-inner[data-v-a16077a2]{height:100%;transition-property:all;transition-duration:.2s;transition-timing-function:linear}.m-slide-top-enter-active[data-v-a16077a2],.m-slide-top-leave-active[data-v-a16077a2]{opacity:1;transition:all .3s;transform:scale(1)translateY(0)}.m-slide-top-enter-from[data-v-a16077a2],.m-slide-top-leave-to[data-v-a16077a2]{opacity:0;transform:scale(.6)translateY(-100%)}.m-slide-bottom-enter-active[data-v-a16077a2],.m-slide-bottom-leave-active[data-v-a16077a2]{opacity:1;transition:all .3s;transform:scale(1)translateY(0)}.m-slide-bottom-enter-from[data-v-a16077a2],.m-slide-bottom-leave-to[data-v-a16077a2]{opacity:0;transform:scale(.6)translateY(100%)}.m-slide-right-enter-active[data-v-a16077a2],.m-slide-right-leave-active[data-v-a16077a2]{opacity:1;transition:all .3s;transform:scale(1)translate(0)}.m-slide-right-enter-from[data-v-a16077a2],.m-slide-right-leave-to[data-v-a16077a2]{opacity:0;transform:scale(.6)translate(100%)}.m-slide-left-enter-active[data-v-a16077a2],.m-slide-left-leave-active[data-v-a16077a2]{opacity:1;transition:all .3s;transform:scale(1)translate(0)}.m-slide-left-enter-from[data-v-a16077a2],.m-slide-left-leave-to[data-v-a16077a2]{opacity:0;z-index:0;transform:scale(.6)translate(-200%)}