maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 3.8 kB
CSS
.m-avatar[data-v-b6e4a504]{vertical-align:top;flex-direction:column;justify-content:center;align-items:center;gap:.5em;display:inline-flex;text-decoration-line:none}.m-avatar__caption[data-v-b6e4a504]{text-overflow:ellipsis;white-space:nowrap;text-align:center;text-transform:capitalize;width:100%;font-weight:500;overflow:hidden}.m-avatar__initial[data-v-b6e4a504]{text-transform:capitalize;font-size:1.5em}.m-avatar__wrapper[data-v-b6e4a504]{flex:none;justify-content:center;width:3em;height:3em;display:flex;position:relative;overflow:hidden}.m-avatar__wrapper[data-v-b6e4a504]:not(.--rounded-none){border-radius:var(--maz-radius)}.m-avatar__wrapper:not(.--rounded-none).--rounded[data-v-b6e4a504]{border-radius:9999px}.m-avatar__wrapper:not(.--rounded-none).--rounded-sm[data-v-b6e4a504]{border-radius:calc(var(--maz-radius) - 8px)}.m-avatar__wrapper:not(.--rounded-none).--rounded-md[data-v-b6e4a504]{border-radius:calc(var(--maz-radius) - 4px)}.m-avatar__wrapper:not(.--rounded-none).--rounded-base[data-v-b6e4a504]{border-radius:var(--maz-radius)}.m-avatar__wrapper:not(.--rounded-none).--rounded-lg[data-v-b6e4a504]{border-radius:calc(var(--maz-radius) + 4px)}.m-avatar__wrapper:not(.--rounded-none).--rounded-xl[data-v-b6e4a504]{border-radius:calc(var(--maz-radius) + 8px)}.m-avatar__wrapper:not(.--rounded-none).--rounded-full[data-v-b6e4a504]{border-radius:9999px}.m-avatar__wrapper.--clickable .m-avatar__button[data-v-b6e4a504]{cursor:pointer;opacity:0;background-color:#0000;border-style:none;justify-content:center;align-items:center;width:100%;transition-property:all;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0;transform:scale(0)}.m-avatar__wrapper.--clickable .m-avatar__button__icon[data-v-b6e4a504]{--maz-tw-text-opacity:1;color:rgb(255 255 255/var(--maz-tw-text-opacity,1))}.m-avatar__wrapper.--clickable:hover .m-avatar__picture[data-v-b6e4a504],.m-avatar__wrapper.--clickable:focus .m-avatar__picture[data-v-b6e4a504]{filter:blur(1.5px)}.m-avatar__wrapper.--clickable:hover .m-avatar__button[data-v-b6e4a504],.m-avatar__wrapper.--clickable:focus .m-avatar__button[data-v-b6e4a504]{opacity:1;transform:scale(1.05)}.m-avatar__wrapper.--bordered[data-v-b6e4a504]{border-width:var(--maz-border-width);--maz-tw-border-opacity:1;border-style:solid;border-color:hsl(var(--maz-border) / var(--maz-tw-border-opacity,1))}.m-avatar__wrapper.--rounded-sm[data-v-b6e4a504],.m-avatar__wrapper.--rounded-sm .m-avatar__button[data-v-b6e4a504]{border-radius:calc(var(--maz-radius) - 8px)}.m-avatar__wrapper.--rounded-md[data-v-b6e4a504],.m-avatar__wrapper.--rounded-md .m-avatar__button[data-v-b6e4a504]{border-radius:calc(var(--maz-radius) - 4px)}.m-avatar__wrapper.--rounded-lg[data-v-b6e4a504],.m-avatar__wrapper.--rounded-lg .m-avatar__button[data-v-b6e4a504]{border-radius:calc(var(--maz-radius) + 4px)}.m-avatar__wrapper.--rounded-base[data-v-b6e4a504],.m-avatar__wrapper.--rounded-base .m-avatar__button[data-v-b6e4a504]{border-radius:var(--maz-radius)}.m-avatar__wrapper.--rounded-xl[data-v-b6e4a504],.m-avatar__wrapper.--rounded-xl .m-avatar__button[data-v-b6e4a504]{border-radius:calc(var(--maz-radius) + 8px)}.m-avatar__wrapper.--rounded-full[data-v-b6e4a504],.m-avatar__wrapper.--rounded-full .m-avatar__button[data-v-b6e4a504]{border-radius:9999px}.m-avatar__wrapper.--has-shadow[data-v-b6e4a504]{--maz-tw-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--maz-tw-shadow-colored:0 1px 3px 0 var(--maz-tw-shadow-color), 0 1px 2px -1px var(--maz-tw-shadow-color);box-shadow:var(--maz-tw-ring-offset-shadow,0 0 #0000), var(--maz-tw-ring-shadow,0 0 #0000), var(--maz-tw-shadow)}.m-avatar__wrapper.--has-initial[data-v-b6e4a504]{align-items:center}.m-avatar.--has-link[data-v-b6e4a504]{cursor:pointer}