flyonui/components/chat/object.js

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

export default {".chat":{"display":"grid","grid-template-columns":"repeat(2, minmax(0, 1fr))","column-gap":"calc(0.25rem * 4)","padding-block":"calc(0.25rem * 1)",".chat-avatar":{"grid-row":"span 2 / span 2","align-self":"flex-end"},".chat-header":{"grid-row-start":"1","margin-bottom":"calc(0.25rem * 1)","font-size":"var(--text-xs)","line-height":"var(--tw-leading, var(--text-xs--line-height))"},".chat-footer":{"grid-row-start":"3","margin-top":"calc(0.25rem * 1)","font-size":"var(--text-xs)","line-height":"var(--tw-leading, var(--text-xs--line-height))"},".chat-bubble":{"position":"relative","display":"block","width":"fit-content","border-radius":"var(--radius-box)","padding":"calc(0.25rem * 3)","max-width":"90%","min-height":"2.75rem","min-width":"2.75rem","&:before":{"position":"absolute","bottom":"calc(0.25rem * 0)","width":"calc(0.25rem * 4)","height":"calc(0.25rem * 4)","background-color":"inherit","content":"\"\"","mask-size":"contain","mask-repeat":"no-repeat","mask-position":"center"}},"&.chat-receiver":{"place-items":"start","grid-template-columns":"auto 1fr",".chat-header":{"grid-column-start":"2"},".chat-footer":{"grid-column-start":"2"},".chat-avatar":{"grid-column-start":"1"},".chat-bubble":{"grid-column-start":"2","border-end-start-radius":"0","background-color":"var(--color-base-100)","color":"var(--color-base-content)","&:before":{"inset-inline-start":"-0.749rem","mask-image":"url(\"data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e\")"},"[dir=\"rtl\"] &:before":{"mask-image":"url(\"data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e\")"}}},"&.chat-sender":{"place-items":"end","grid-template-columns":"1fr auto",".chat-header":{"grid-column-start":"1"},".chat-footer":{"grid-column-start":"1"},".chat-avatar":{"grid-column-start":"2"},".chat-bubble":{"grid-column-start":"1","border-end-end-radius":"0","background-color":"var(--color-primary)","text-align":"end","color":"var(--color-primary-content)","&:before":{"inset-inline-start":"99.9%","mask-image":"url(\"data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 1 3 L 3 3 C 2 3 0 1 0 0'/%3e%3c/svg%3e\")"},"[dir=\"rtl\"] &:before":{"mask-image":"url(\"data:image/svg+xml,%3csvg width='3' height='3' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='m 0 3 L 3 3 L 3 0 C 3 1 1 3 0 3'/%3e%3c/svg%3e\")"}}}}};