@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
2 lines (1 loc) • 2.36 kB
JavaScript
const o={root:o=>({lineHeight:1.5625,color:`var(--code-palette-text-primary, ${o.vars.palette.text.primary})`,wordBreak:"break-word",position:"relative","&:hover":{"& .code-copy":{display:"block"}},"& pre":{lineHeight:1.5,margin:o.spacing(2),padding:o.spacing(2),backgroundColor:`var(--code-palette-grey-700, ${o.vars.palette.grey[700]})`,borderRadius:`var(--code-shape-borderRadius, ${o.shape.borderRadius}px)`,border:"1px solid",borderColor:`var(--code-palette-grey-700, ${o.vars.palette.grey[700]})`,overflow:"auto",WebkitOverflowScrolling:"touch",fontSize:o.typography.pxToRem(13),maxWidth:"calc(100vw - 32px)",maxHeight:"400px",[o.breakpoints.up("md")]:{maxWidth:"calc(100vw - 32px - 16px)"}},"& code":{...o.typography.body2,fontFamily:["Menlo","Consolas",'"Droid Sans Mono"',"monospace"].join(","),fontWeight:400,WebkitFontSmoothing:"subpixel-antialiased",MozOsxFontSmoothing:"subpixel-antialiased",fontSmoothing:"subpixel-antialiased"},"& pre > code":{fontSize:"inherit"},"& :not(pre) > code":{display:"inline-block",padding:"0 5px",color:`var(--code-palette-text-primary, ${o.vars.palette.text.primary})`,backgroundColor:`rgba(${o.vars.palette.primary.lightChannel} / 0.15)`,borderRadius:2.5,fontSize:o.typography.pxToRem(13),direction:"ltr /*! @noflip */"},"& .code-copy":{minWidth:54,display:"none",backgroundColor:`rgba(${o.vars.palette.primary.lightChannel} / 0.5)`,cursor:"pointer",position:"absolute",top:o.spacing(2),right:o.spacing(4),fontFamily:"inherit",fontSize:o.typography.pxToRem(13),fontWeight:500,padding:o.spacing(1,2),borderRadius:1,border:"1px solid",borderColor:o.vars.palette.primary.light,color:"#fff","&:hover, &:focus":{opacity:1,backgroundColor:`rgba(${o.vars.palette.primary.lightChannel} / 0.7)`,borderColor:o.vars.palette.primary.light,"& .code-copyKeypress":{display:"block","@media (any-hover: none)":{display:"none"}}},"& .code-copyKeypress":{display:"none"},"&[data-copied]":{borderColor:o.vars.palette.primary.light,color:"#fff",backgroundColor:o.vars.palette.primary.light},"&:focus-visible":{outline:"2px solid",outlineOffset:2,outlineColor:o.vars.palette.primary.light}},"& .code-copyKeypress":{pointerEvents:"none",userSelect:"none",position:"absolute",left:"50%",top:"100%",minWidth:"100%",marginTop:o.spacing(.5),whiteSpace:"nowrap",transform:"translateX(-50%)","& > span":{opacity:.72}}})};export{o as styles};