@guruhotel/aura-ui/esm/drawer/drawer.styles.js

⚛️ React UI library by GuruHotel

import{styled as t,keyframes as e}from"../theme";import*as s from"@radix-ui/react-dialog";const i=e({from:{opacity:"0"},to:{opacity:"1"}}),o=e({from:{transform:"$$transformValue"},to:{transform:"translate3d(0,0,0)"}});export const StyledOverlay=t(s.Overlay,{backgroundColor:"rgba(0,0,0,.55)",position:"fixed",zIndex:"$overlay",inset:0,'&[data-state="open"]':{animation:`${i} 600ms cubic-bezier(0.16, 1, 0.3, 1)`}});export const StyledContent=t(s.Content,{position:"fixed",top:0,bottom:0,zIndex:"$overlay",width:300,backgroundColor:"$surfaceLight",'&[data-state="open"]':{animation:`${o} 600ms cubic-bezier(0.16, 1, 0.3, 1)`},variants:{placement:{top:{$$transformValue:"translate3d(0,-100%,0)",width:"100%",height:300,bottom:"auto",left:0},right:{$$transformValue:"translate3d(100%,0,0)",right:0},bottom:{$$transformValue:"translate3d(0,100%,0)",width:"100%",height:300,bottom:0,left:0,top:"auto"},left:{$$transformValue:"translate3d(-100%,0,0)",left:0}},size:{xs:{},sm:{},md:{},lg:{},xl:{},full:{}}},compoundVariants:[{placement:"top",size:"xs",css:{height:"25%"}},{placement:"top",size:"sm",css:{height:"35%"}},{placement:"top",size:"md",css:{height:"45%"}},{placement:"top",size:"lg",css:{height:"55%"}},{placement:"top",size:"xl",css:{height:"65%"}},{placement:"top",size:"full",css:{height:"100%"}},{placement:"bottom",size:"xs",css:{height:"25%"}},{placement:"bottom",size:"sm",css:{height:"35%"}},{placement:"bottom",size:"md",css:{height:"45%"}},{placement:"bottom",size:"lg",css:{height:"55%"}},{placement:"bottom",size:"xl",css:{height:"65%"}},{placement:"bottom",size:"full",css:{height:"100%"}},{placement:"right",size:"xs",css:{width:"25%"}},{placement:"right",size:"sm",css:{width:"35%"}},{placement:"right",size:"md",css:{width:"45%"}},{placement:"right",size:"lg",css:{width:"55%"}},{placement:"right",size:"xl",css:{width:"65%"}},{placement:"right",size:"full",css:{width:"100%"}},{placement:"left",size:"xs",css:{width:"25%"}},{placement:"left",size:"sm",css:{width:"35%"}},{placement:"left",size:"md",css:{width:"45%"}},{placement:"left",size:"lg",css:{width:"55%"}},{placement:"left",size:"xl",css:{width:"65%"}},{placement:"left",size:"full",css:{width:"100%"}}],defaultVariants:{placement:"right",size:"sm"}});export const StyledCloseButton=t(s.Close,{position:"absolute",top:"$2",right:"$2"});export const StyledTitle=t(s.Title);export const StyledDescription=t(s.Description);