flyonui/components/modal/object.js

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

export default {".modal":{"pointer-events":"none","position":"fixed","inset":"calc(0.25rem * 0)","z-index":80,"margin":"calc(0.25rem * 0)","display":"grid","width":"100%","height":"100%","justify-items":"center","overflow-x":"hidden","overflow-y":"auto","padding":"calc(0.25rem * 4)","opacity":"0%","transition-property":"all","transition-timing-function":"var(--tw-ease, var(--default-transition-timing-function))","transition-duration":"var(--tw-duration, var(--default-transition-duration))"},".modal-dialog":{"margin-inline":"auto","width":"100%","@media (width >= 40rem)":{"max-width":"calc(0.25rem * 128)"}},".modal-content":{"pointer-events":"auto","display":"flex","flex-direction":"column","border-radius":"var(--radius-lg)","background-color":"var(--color-base-100)","--tw-shadow":"0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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)","max-height":"calc(100vh - 2rem)","overscroll-behavior":"contain"},".modal-header":{"position":"relative","display":"flex","align-items":"center","justify-content":"space-between","padding":"calc(0.25rem * 6)"},".modal-title":{"font-size":"var(--text-2xl)","line-height":"var(--tw-leading, var(--text-2xl--line-height))","--tw-font-weight":"var(--font-weight-semibold)","font-weight":"var(--font-weight-semibold)","color":"var(--color-base-content)"},".modal-body":{"overflow-x":"hidden","overflow-y":"auto","padding":"calc(0.25rem * 6)","font-size":"var(--text-base)","line-height":"var(--tw-leading, var(--text-base--line-height))","--tw-font-weight":"var(--font-weight-normal)","font-weight":"var(--font-weight-normal)","&::-webkit-scrollbar":{"width":"calc(0.25rem * 2)"}},".modal-footer":{"display":"flex","align-items":"center","justify-content":"flex-end","gap":"calc(0.25rem * 3)","padding":"calc(0.25rem * 6)"},":where(.modal-header) + .modal-body":{"padding-top":"0"},":where(.modal-body) + .modal-footer":{"padding-top":"0"},".modal-top":{"place-items":"start"},".modal-top-start":{"justify-content":"flex-start"},".modal-top-end":{"justify-content":"flex-end"},".modal-middle":{"place-items":"center"},".modal-middle-start":{"place-items":"center","justify-content":"flex-start"},".modal-middle-end":{"place-items":"center","justify-content":"flex-end"},".modal-bottom":{"place-items":"end"},".modal-bottom-start":{"place-items":"end","justify-content":"flex-start"},".modal-bottom-end":{"place-items":"end","justify-content":"flex-end"},".modal-dialog-sm":{"max-width":"calc(0.25rem * 96)"},".modal-dialog-md":{"max-width":"calc(0.25rem * 128)"},".modal-dialog-lg":{"max-width":"calc(0.25rem * 192)"},".modal-dialog-xl":{"max-width":"calc(0.25rem * 256)"}};