frutjam
Version:
A utility-first CSS UI Library for Tailwind CSS
2 lines (1 loc) • 3.31 kB
JavaScript
export default {".modal":{"border":"none","color":"inherit","--radius-modal":"calc(var(--border-radius) * 4)","position":"fixed","inset":"0","margin":"0","display":"grid","align-items":"center","justify-items":"center","width":"100%","height":"100%","max-width":"none","max-height":"none","z-index":999,"padding":"0.75rem","overflow":"hidden","overscroll-behavior":"contain","pointer-events":"none","visibility":"hidden","background-color":"transparent","transition":"visibility 200ms ease allow-discrete, \n overlay 200ms ease allow-discrete","&::backdrop":{"background-color":"light-dark(\n black, \n black\n )","@supports (color: color-mix(in lab, red, red))":{"background-color":"light-dark(\n color-mix(in oklch, black 10%, var(--color-base-600) 40%), \n color-mix(in oklch, black 10%, var(--color-base-400) 40%)\n )"},"opacity":0,"transition":"opacity 200ms ease-out"},"&[open]":{"pointer-events":"auto","visibility":"visible","&::backdrop":{"opacity":1},"@starting-style":{"&::backdrop":{"opacity":0}},"--modal-content--translate":"0 0","--modal-content--scale":"1","--modal-content--opacity":"1"}},".modal-backdrop":{"display":"grid","grid-column-start":"1","grid-row-start":"1","align-self":"stretch","justify-self":"stretch","-webkit-appearance":"none","-moz-appearance":"none","appearance":"none","background-color":"transparent","border":"none","cursor":"pointer","outline":"none","z-index":-1,"color":"transparent","font-size":"0"},".modal-content":{"translate":"var(--modal-content--translate, var(--modal-slide--translate, none))","scale":"var(--modal-content--scale, var(--modal-slide--scale, 95%))","opacity":"var(--modal-content--opacity, 0)","grid-column-start":"1","grid-row-start":"1","width":"calc(11 / 12 * 100%)","max-width":"32rem","max-height":"100vh","padding":"1.5rem","overflow-y":"auto","overscroll-behavior":"contain","background-color":"var(--color-base)","border-radius":"var(--radius-modal)","border":"1px solid var(--color-base-soft)","box-shadow":"0 4px 6px -1px light-dark(var(--color-base-950), color-mix(in srgb, black 45%, transparent)),\n 0 10px 32px -4px light-dark(var(--color-base-950), color-mix(in srgb, black 55%, transparent))","@supports (color: color-mix(in lab, red, red))":{"box-shadow":"0 4px 6px -1px light-dark(color-mix(in oklch, var(--color-base-950) 12%, transparent), color-mix(in oklch, black 45%, transparent)),\n 0 10px 32px -4px light-dark(color-mix(in oklch, var(--color-base-950) 10%, transparent), color-mix(in oklch, black 55%, transparent))"},"transition":"translate 200ms ease-out,\n scale 200ms ease-out,\n opacity 200ms ease-out,\n box-shadow 200ms ease-out","@media (forced-colors: active)":{"outline":"1px solid"}},".modal-bottom":{"align-items":"end"},".modal-middle":{"align-items":"center"},".modal-top":{"align-items":"start"},".modal-center":{"justify-items":"center"},".modal-end":{"justify-items":"end"},".modal-start":{"justify-items":"start"},".modal-slide-down":{"--modal-slide--translate":"0 -100%","--modal-slide--scale":"1"},".modal-slide-end":{"--modal-slide--translate":"-100% 0","--modal-slide--scale":"1"},".modal-slide-start":{"--modal-slide--translate":"100% 0","--modal-slide--scale":"1"},".modal-slide-up":{"--modal-slide--translate":"0 100%","--modal-slide--scale":"1"}};