flyonui/components/avatar/object.js

The easiest, free and open-source Tailwind CSS component library with semantic classes.

export default {".avatar":{"position":"relative","display":"inline-flex","vertical-align":"middle","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","& > div":{"display":"block","aspect-ratio":"1 / 1","overflow":"hidden"},"img":{"height":"100%","width":"100%","object-fit":"cover"},"&.avatar-placeholder":{"& > div":{"display":"flex","align-items":"center","justify-content":"center"}},"&.avatar-online-top":{"&:before":{"content":"\"\"","position":"absolute","z-index":10,"display":"block","border-radius":"calc(infinity * 1px)","background-color":"var(--color-success)","outline-style":["var(--tw-outline-style)","var(--tw-outline-style)"],"outline-width":["1px","2px"],"outline-color":"var(--color-base-100)","width":"20%","height":"20%","top":"3%","right":"3%"}},"&.avatar-offline-top":{"&:before":{"content":"\"\"","position":"absolute","z-index":10,"display":"block","border-radius":"calc(infinity * 1px)","background-color":"var(--color-base-200)","outline-style":["var(--tw-outline-style)","var(--tw-outline-style)"],"outline-width":["1px","2px"],"outline-color":"var(--color-base-100)","width":"20%","height":"20%","top":"3%","right":"3%"}},"&.avatar-busy-top":{"&:before":{"content":"\"\"","position":"absolute","z-index":10,"display":"block","border-radius":"calc(infinity * 1px)","background-color":"var(--color-error)","outline-style":["var(--tw-outline-style)","var(--tw-outline-style)"],"outline-width":["1px","2px"],"outline-color":"var(--color-base-100)","width":"20%","height":"20%","top":"3%","right":"3%"}},"&.avatar-away-top":{"&:before":{"content":"\"\"","position":"absolute","z-index":10,"display":"block","border-radius":"calc(infinity * 1px)","background-color":"var(--color-warning)","outline-style":["var(--tw-outline-style)","var(--tw-outline-style)"],"outline-width":["1px","2px"],"outline-color":"var(--color-base-100)","width":"20%","height":"20%","top":"3%","right":"3%"}},"&.avatar-online-bottom":{"&:before":{"content":"\"\"","position":"absolute","z-index":10,"display":"block","border-radius":"calc(infinity * 1px)","background-color":"var(--color-success)","outline-style":["var(--tw-outline-style)","var(--tw-outline-style)"],"outline-width":["1px","2px"],"outline-color":"var(--color-base-100)","width":"20%","height":"20%","bottom":"3%","right":"3%"}},"&.avatar-offline-bottom":{"&:before":{"content":"\"\"","position":"absolute","z-index":10,"display":"block","border-radius":"calc(infinity * 1px)","background-color":"var(--color-base-200)","outline-style":["var(--tw-outline-style)","var(--tw-outline-style)"],"outline-width":["1px","2px"],"outline-color":"var(--color-base-100)","width":"20%","height":"20%","bottom":"3%","right":"3%"}},"&.avatar-busy-bottom":{"&:before":{"content":"\"\"","position":"absolute","z-index":10,"display":"block","border-radius":"calc(infinity * 1px)","background-color":"var(--color-error)","outline-style":["var(--tw-outline-style)","var(--tw-outline-style)"],"outline-width":["1px","2px"],"outline-color":"var(--color-base-100)","width":"20%","height":"20%","bottom":"3%","right":"3%"}},"&.avatar-away-bottom":{"&:before":{"content":"\"\"","position":"absolute","z-index":10,"display":"block","border-radius":"calc(infinity * 1px)","background-color":"var(--color-warning)","outline-style":["var(--tw-outline-style)","var(--tw-outline-style)"],"outline-width":["1px","2px"],"outline-color":"var(--color-base-100)","width":"20%","height":"20%","bottom":"3%","right":"3%"}}},".avatar-group":{"display":"flex",":where(.avatar)":{"img":{"height":"100%","width":"100%","border-radius":"calc(infinity * 1px)","border-style":"var(--tw-border-style)","border-width":"2px","border-color":"var(--color-base-100)","object-fit":"cover"},"&.avatar-placeholder":{"& > div":{"border-radius":"calc(infinity * 1px)","border-style":"var(--tw-border-style)","border-width":"2px","border-color":"var(--color-base-100)"}}}},".pull-up":{".avatar":{"transition-property":"all","transition-timing-function":["var(--tw-ease, var(--default-transition-timing-function))","var(--ease-in)"],"transition-duration":["var(--tw-duration, var(--default-transition-duration))","0.25s"],"--tw-duration":"0.25s","--tw-ease":"var(--ease-in)","&:hover":{"z-index":30,"--tw-translate-y":"calc(0.25rem * -1)","translate":"var(--tw-translate-x) var(--tw-translate-y)","transform":"var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y)","border-radius":"calc(infinity * 1px)","--tw-shadow":"0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1))","box-shadow":"var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)","--tw-shadow-color":"color-mix(in oklab, color-mix(in oklab, var(--color-base-300) 20%, transparent) var(--tw-shadow-alpha), transparent)"}}}};