frutjam/dist/components/menu.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;.menu-disabled{--menu--opacity:20%;--menu--cursor:not-allowed;--menu--pointer-events:none;opacity:var(--menu--opacity);cursor:var(--menu--cursor);pointer-events:var(--menu--pointer-events)}.menu{--color-menu:var(--color-base-soft);--color-on-menu:var(--color-on-base-soft);--color-menu-active:var(--color-base-active);--radius-menu:calc(var(--border-radius)*4);list-style:none;padding:0;margin:0;display:flex;width:-moz-fit-content;width:fit-content;flex-direction:column;flex-wrap:wrap;font-size:.875rem;border-radius:var(--radius-menu);color:currentColor;:where(ul,li:not(:first-child)){margin-block-start:.375rem}:where(li ul){list-style:none;padding:0;margin-block-end:0;position:relative;margin-block-start:0;margin-inline-start:.1rem;padding-inline-start:1.4rem;white-space:nowrap;font-size:.875rem;color:currentColor;&:before{content:var(--tw-content);background-color:var(--color-on-menu);position:absolute;inset-inline-start:.7rem;inset-block-start:.7rem;inset-block-end:0;opacity:10%;width:1px;content:""}}:where(summary){margin-inline:.75rem;margin-block:.375rem}}.menu-horizontal{--menu-horizontal--padding-inline-end:0.75rem;display:inline-flex;flex-direction:row;:where(ul,li){margin-block-start:.375rem}&>li:not(.menu-title)>details{&>ul{background-color:var(--color-menu);position:absolute;margin-inline-start:0;margin-block-start:1rem;transform-origin:top;padding-block:.5rem;padding-inline-end:.5rem;opacity:0;scale:95%;@media (prefers-reduced-motion:no-preference){@starting-style{scale:95%;opacity:0}animation:menu .2s;transition-property:opacity,scale,display;transition-behavior:allow-discrete;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}}&[open]>ul{opacity:100%;scale:100%}}&>li>details>ul{&:before{--tw-content:none;content:var(--tw-content)}}}.menu-vertical{flex-direction:column;:where(ul,li){margin-inline-start:.375rem}}.menu-item{background:none;border:none;font:inherit;width:100%;color:currentColor;border-radius:calc(var(--radius-menu)/2);padding-inline:.75rem;padding-block:.375rem;text-align:start;transition-property:color,background-color,box-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0,0,.2,1);text-wrap:balance;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:.875rem;gap:.5rem;display:grid;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;align-content:flex-start;align-items:center;cursor:pointer;padding-inline-end:var(--menu-horizontal--padding-inline-end,.75rem);&:hover{@media (hover:hover){background-color:var(--color-menu);color:var(--color-on-menu)}}&:focus-within{background-color:var(--color-menu);color:var(--color-on-menu);outline-style:none;cursor:pointer;@media (forced-colors:active){outline:2px solid transparent;outline-offset:2px}}:where(a,button){&:focus-visible{outline:2px solid transparent;@media (forced-colors:active){outline:2px solid transparent;outline-offset:2px}}}}.menu-active{--tw-outline-style:none;outline-style:none;@media (forced-colors:active){outline:2px solid transparent;outline-offset:2px}color:var(--color-on-menu);background-color:var(--color-menu-active)}.menu-title{color:var(--color-base-700);padding-inline:.75rem;padding-block:var(--menu-title--padding-block,.375rem);font-size:.875rem;font-weight:600}.menu-lg{:where(li:not(.menu-title)>:not(ul,details,.menu-title)),:where(li:not(.menu-title)>details>summary:not(.menu-title)){padding-block:.375rem;font-size:1.125rem}--menu-title--padding-block:0.75rem}.menu-md{:where(li:not(.menu-title)>:not(ul,details,.menu-title)),:where(li:not(.menu-title)>details>summary:not(.menu-title)){padding-block:.375rem;font-size:.875rem}--menu-title--padding-block:0.5rem}.menu-sm{:where(li:not(.menu-title)>:not(ul,details,.menu-title)),:where(li:not(.menu-title)>details>summary:not(.menu-title)){padding-block:.25rem;font-size:.75rem}--menu-title--padding-block:0.5rem}.menu-xl{:where(li:not(.menu-title)>:not(ul,details,.menu-title)),:where(li:not(.menu-title)>details>summary:not(.menu-title)){padding-block:.375rem;font-size:1.375rem}--menu-title--padding-block:0.75rem}.menu-xs{:where(li:not(.menu-title)>:not(ul,details,.menu-title)),:where(li:not(.menu-title)>details>summary:not(.menu-title)){padding-block:.25rem;font-size:.6875rem}--menu-title--padding-block:0.25rem}@property --tw-content{syntax:"*";initial-value:"";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-content:""}}}