flyonui
Version:
The easiest, free and open-source Tailwind CSS component library with semantic classes.
1 lines • 3.85 kB
JavaScript
export default {".mockup-code":{"position":"relative","min-width":"calc(0.25rem * 72)","overflow-x":"auto","overflow-y":"hidden","border-radius":"var(--radius-box)","background-color":"var(--color-base-200)","padding-block":"calc(0.25rem * 5)","color":"color-mix(in oklab, var(--color-base-content) 80%, transparent)","direction":"ltr","&:before":{"content":"\"\"","margin-bottom":"calc(0.25rem * 4)","display":"block","height":"calc(0.25rem * 3)","width":"calc(0.25rem * 3)","border-radius":"calc(infinity * 1px)","opacity":"30%","box-shadow":"1.4em 0, 2.8em 0, 4.2em 0"},"pre":{"padding-inline-end":"calc(0.25rem * 5)","&:before":{"content":"\"\"","margin-right":"2.2ch"}},"pre[data-prefix]":{"&:before":{"content":"attr(data-prefix)","display":"inline-block","width":"calc(0.25rem * 8)","text-align":"right","opacity":"50%"}}},".mockup-window":{"position":"relative","display":"flex","width":"100%","flex-direction":"column","overflow-x":"auto","overflow-y":"hidden","border-radius":"var(--radius-box)","padding-top":"calc(0.25rem * 5)","&:before":{"content":"\"\"","margin-bottom":"calc(0.25rem * 4)","display":"block","aspect-ratio":"1 / 1","height":"calc(0.25rem * 3)","flex-shrink":0,"align-self":"flex-start","border-radius":"calc(infinity * 1px)","opacity":"30%","box-shadow":"1.4em 0, 2.8em 0, 4.2em 0"},"[dir=\"rtl\"] &:before":{"align-self":"flex-end"},"pre[data-prefix]":{"&:before":{"content":"attr(data-prefix)","display":"inline-block","text-align":"right"}}},".mockup-browser":{"position":"relative","width":"100%","overflow-x":"auto","overflow-y":"hidden","border-radius":"var(--radius-box)","pre[data-prefix]":{"&:before":{"content":"attr(data-prefix)","display":"inline-block","text-align":"right"}},".mockup-browser-toolbar":{"margin-block":"calc(0.25rem * 3)","display":"inline-flex","width":"100%","align-items":"center","padding-inline-end":"1.4em","direction":"ltr","&:before":{"content":"\"\"","margin-inline-end":"4.8rem","display":"inline-block","aspect-ratio":"1 / 1","height":"calc(0.25rem * 3)","border-radius":"calc(infinity * 1px)","opacity":"30%","box-shadow":"1.4em 0, 2.8em 0, 4.2em 0"},".input":{"position":"relative","margin-inline":"auto","display":"block","height":"calc(0.25rem * 7)","width":"calc(0.25rem * 96)","overflow":"hidden","padding-inline-start":"calc(0.25rem * 8)","padding-top":"calc(0.25rem * 0.5)","text-overflow":"ellipsis","white-space":"nowrap","&:before":{"content":"\"\"","position":"absolute","inset-inline-start":"calc(0.25rem * 2)","top":"calc(1/2 * 100%)","aspect-ratio":"1 / 1","height":"calc(0.25rem * 3)","--tw-translate-y":"calc(calc(1/2 * 100%) * -1)","translate":"var(--tw-translate-x) var(--tw-translate-y)","border-radius":"calc(infinity * 1px)","border-style":"var(--tw-border-style)","border-width":"2px","border-color":"currentColor","opacity":"60%"},"&:after":{"content":"\"\"","position":"absolute","inset-inline-start":"calc(0.25rem * 5)","top":"calc(1/2 * 100%)","height":"calc(0.25rem * 2)","--tw-translate-y":"calc(1/4 * 100%)","translate":"var(--tw-translate-x) var(--tw-translate-y)","rotate":"calc(45deg * -1)","border-radius":"calc(infinity * 1px)","border-style":"var(--tw-border-style)","border-width":"1px","border-color":"currentColor","opacity":"60%"}}}},".mockup-phone":{"display":"inline-block","border":"4px solid #4e4d4d","border-radius":"50px","background-color":"#000","padding":"6px","margin":"0 auto","overflow":"hidden",".mockup-phone-camera":{"border-radius":"calc(infinity * 1px)","position":"relative","top":"5px","left":"0px","background":"#000","height":"25px","width":"33%","margin":"0 auto","&:after":{"content":"\"\"","position":"absolute","top":"25%","right":"8%","width":"12px","height":"12px","border-radius":"5px","background-color":"#2a292d"}},".mockup-phone-display":{"overflow":"hidden","border-radius":"40px","margin-top":"-25px"}}};