flyonui/components/dropdown.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.dropdown-menu{z-index:10;margin-top:.5rem;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*1)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-wrap:nowrap;opacity:0;--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);transition-property:opacity,margin;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;padding:.5rem;transition-duration:.3s}.dropdown-item{clear:both;border-radius:var(--radius-field);width:100%;color:var(--color-base-content);text-align:inherit;background-color:#0000;align-items:center;column-gap:.5rem;padding-block:.625rem;padding-inline:1rem;text-decoration-line:none;text-decoration-thickness:0;display:flex;&:hover:not(.dropdown-active),&:focus:not(.dropdown-active),&:focus-within:not(.dropdown-active),&:focus-visible:not(.dropdown-active){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}&.dropdown-disabled,&:disabled,&[disabled]{pointer-events:none;background-color:color-mix(in oklab,var(--color-neutral)5%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}.dropdown-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.dropdown-header,.dropdown-footer{border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);color:color-mix(in oklab,var(--color-base-content)80%,transparent);align-items:center;padding-block:.625rem;padding-inline:1rem;display:flex;position:static}.dropdown-header{margin:-.5rem;border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;margin-bottom:.5rem}.dropdown-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);border-top-style:var(--tw-border-style);border-top-width:1px;margin-inline:-.5rem;margin-bottom:-.5rem!important}.dropdown-title{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);text-transform:uppercase;padding-block:.375rem;padding-inline:1.25rem;display:block}@media (width>=640px){.sm\:dropdown-menu{z-index:10;margin-top:.5rem;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*1)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-wrap:nowrap;opacity:0;--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);transition-property:opacity,margin;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;padding:.5rem;transition-duration:.3s}.sm\:dropdown-item{clear:both;border-radius:var(--radius-field);width:100%;color:var(--color-base-content);text-align:inherit;background-color:#0000;align-items:center;column-gap:.5rem;padding-block:.625rem;padding-inline:1rem;text-decoration-line:none;text-decoration-thickness:0;display:flex;&:hover:not(.dropdown-active),&:focus:not(.dropdown-active),&:focus-within:not(.dropdown-active),&:focus-visible:not(.dropdown-active){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}&.dropdown-disabled,&:disabled,&[disabled]{pointer-events:none;background-color:color-mix(in oklab,var(--color-neutral)5%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}.sm\:dropdown-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.sm\:dropdown-header,.sm\:dropdown-footer{border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);color:color-mix(in oklab,var(--color-base-content)80%,transparent);align-items:center;padding-block:.625rem;padding-inline:1rem;display:flex;position:static}.sm\:dropdown-header{margin:-.5rem;border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;margin-bottom:.5rem}.sm\:dropdown-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);border-top-style:var(--tw-border-style);border-top-width:1px;margin-inline:-.5rem;margin-bottom:-.5rem!important}.sm\:dropdown-title{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);text-transform:uppercase;padding-block:.375rem;padding-inline:1.25rem;display:block}}@media (width>=768px){.md\:dropdown-menu{z-index:10;margin-top:.5rem;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*1)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-wrap:nowrap;opacity:0;--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);transition-property:opacity,margin;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;padding:.5rem;transition-duration:.3s}.md\:dropdown-item{clear:both;border-radius:var(--radius-field);width:100%;color:var(--color-base-content);text-align:inherit;background-color:#0000;align-items:center;column-gap:.5rem;padding-block:.625rem;padding-inline:1rem;text-decoration-line:none;text-decoration-thickness:0;display:flex;&:hover:not(.dropdown-active),&:focus:not(.dropdown-active),&:focus-within:not(.dropdown-active),&:focus-visible:not(.dropdown-active){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}&.dropdown-disabled,&:disabled,&[disabled]{pointer-events:none;background-color:color-mix(in oklab,var(--color-neutral)5%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}.md\:dropdown-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.md\:dropdown-header,.md\:dropdown-footer{border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);color:color-mix(in oklab,var(--color-base-content)80%,transparent);align-items:center;padding-block:.625rem;padding-inline:1rem;display:flex;position:static}.md\:dropdown-header{margin:-.5rem;border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;margin-bottom:.5rem}.md\:dropdown-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);border-top-style:var(--tw-border-style);border-top-width:1px;margin-inline:-.5rem;margin-bottom:-.5rem!important}.md\:dropdown-title{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);text-transform:uppercase;padding-block:.375rem;padding-inline:1.25rem;display:block}}@media (width>=1024px){.lg\:dropdown-menu{z-index:10;margin-top:.5rem;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*1)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-wrap:nowrap;opacity:0;--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);transition-property:opacity,margin;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;padding:.5rem;transition-duration:.3s}.lg\:dropdown-item{clear:both;border-radius:var(--radius-field);width:100%;color:var(--color-base-content);text-align:inherit;background-color:#0000;align-items:center;column-gap:.5rem;padding-block:.625rem;padding-inline:1rem;text-decoration-line:none;text-decoration-thickness:0;display:flex;&:hover:not(.dropdown-active),&:focus:not(.dropdown-active),&:focus-within:not(.dropdown-active),&:focus-visible:not(.dropdown-active){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}&.dropdown-disabled,&:disabled,&[disabled]{pointer-events:none;background-color:color-mix(in oklab,var(--color-neutral)5%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}.lg\:dropdown-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.lg\:dropdown-header,.lg\:dropdown-footer{border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);color:color-mix(in oklab,var(--color-base-content)80%,transparent);align-items:center;padding-block:.625rem;padding-inline:1rem;display:flex;position:static}.lg\:dropdown-header{margin:-.5rem;border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;margin-bottom:.5rem}.lg\:dropdown-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);border-top-style:var(--tw-border-style);border-top-width:1px;margin-inline:-.5rem;margin-bottom:-.5rem!important}.lg\:dropdown-title{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);text-transform:uppercase;padding-block:.375rem;padding-inline:1.25rem;display:block}}@media (width>=1280px){.xl\:dropdown-menu{z-index:10;margin-top:.5rem;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*1)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-wrap:nowrap;opacity:0;--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);transition-property:opacity,margin;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;padding:.5rem;transition-duration:.3s}.xl\:dropdown-item{clear:both;border-radius:var(--radius-field);width:100%;color:var(--color-base-content);text-align:inherit;background-color:#0000;align-items:center;column-gap:.5rem;padding-block:.625rem;padding-inline:1rem;text-decoration-line:none;text-decoration-thickness:0;display:flex;&:hover:not(.dropdown-active),&:focus:not(.dropdown-active),&:focus-within:not(.dropdown-active),&:focus-visible:not(.dropdown-active){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}&.dropdown-disabled,&:disabled,&[disabled]{pointer-events:none;background-color:color-mix(in oklab,var(--color-neutral)5%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}.xl\:dropdown-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.xl\:dropdown-header,.xl\:dropdown-footer{border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);color:color-mix(in oklab,var(--color-base-content)80%,transparent);align-items:center;padding-block:.625rem;padding-inline:1rem;display:flex;position:static}.xl\:dropdown-header{margin:-.5rem;border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;margin-bottom:.5rem}.xl\:dropdown-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);border-top-style:var(--tw-border-style);border-top-width:1px;margin-inline:-.5rem;margin-bottom:-.5rem!important}.xl\:dropdown-title{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);text-transform:uppercase;padding-block:.375rem;padding-inline:1.25rem;display:block}}@media (width>=1536px){.\32 xl\:dropdown-menu{z-index:10;margin-top:.5rem;:where(&>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(.25rem*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(.25rem*1)*calc(1 - var(--tw-space-y-reverse)))}border-radius:var(--radius-box);background-color:var(--color-base-100);font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height));text-wrap:nowrap;opacity:0;--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-base-300)20%,transparent)var(--tw-shadow-alpha),transparent);transition-property:opacity,margin;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.3s;padding:.5rem;transition-duration:.3s}.\32 xl\:dropdown-item{clear:both;border-radius:var(--radius-field);width:100%;color:var(--color-base-content);text-align:inherit;background-color:#0000;align-items:center;column-gap:.5rem;padding-block:.625rem;padding-inline:1rem;text-decoration-line:none;text-decoration-thickness:0;display:flex;&:hover:not(.dropdown-active),&:focus:not(.dropdown-active),&:focus-within:not(.dropdown-active),&:focus-visible:not(.dropdown-active){background-color:color-mix(in oklab,var(--color-neutral)10%,transparent);--tw-outline-style:none;outline-style:none}&.dropdown-disabled,&:disabled,&[disabled]{pointer-events:none;background-color:color-mix(in oklab,var(--color-neutral)5%,transparent);color:color-mix(in oklab,var(--color-base-content)50%,transparent)}}.\32 xl\:dropdown-active{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);color:var(--color-primary)}.\32 xl\:dropdown-header,.\32 xl\:dropdown-footer{border-color:color-mix(in oklab,var(--color-base-content)20%,transparent);color:color-mix(in oklab,var(--color-base-content)80%,transparent);align-items:center;padding-block:.625rem;padding-inline:1rem;display:flex;position:static}.\32 xl\:dropdown-header{margin:-.5rem;border-top-left-radius:var(--radius-box);border-top-right-radius:var(--radius-box);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;margin-bottom:.5rem}.\32 xl\:dropdown-footer{border-bottom-right-radius:var(--radius-box);border-bottom-left-radius:var(--radius-box);border-top-style:var(--tw-border-style);border-top-width:1px;margin-inline:-.5rem;margin-bottom:-.5rem!important}.\32 xl\:dropdown-title{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:color-mix(in oklab,var(--color-base-content)50%,transparent);text-transform:uppercase;padding-block:.375rem;padding-inline:1.25rem;display:block}}}