flyonui/components/breadcrumbs.css

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

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.breadcrumbs{max-width:100%;overflow-x:auto}:where(.breadcrumbs>ul),:where(.breadcrumbs>ol){white-space:nowrap;align-items:center;min-height:min-content;padding-block:.5rem;padding-inline:.25rem;display:flex}.breadcrumbs-separator{color:color-mix(in oklab,var(--color-base-content)50%,transparent);flex-shrink:0;justify-content:center;align-items:center;margin-inline:.5rem;display:inline-flex}:where(.breadcrumbs>ul>li),:where(.breadcrumbs>ol>li){align-items:center;display:inline-flex}:where(.breadcrumbs>ul>li>a),:where(.breadcrumbs>ol>li>a){align-items:center;gap:.25rem;display:inline-flex;&:hover{@media (hover:hover){color:var(--color-primary)}}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}}:where(.breadcrumbs>ul>li:last-child),:where(.breadcrumbs>ol>li:last-child){cursor:text;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}@media (width>=640px){.sm\:breadcrumbs{max-width:100%;overflow-x:auto}:where(.breadcrumbs>ul),:where(.breadcrumbs>ol){white-space:nowrap;align-items:center;min-height:min-content;padding-block:.5rem;padding-inline:.25rem;display:flex}.sm\:breadcrumbs-separator{color:color-mix(in oklab,var(--color-base-content)50%,transparent);flex-shrink:0;justify-content:center;align-items:center;margin-inline:.5rem;display:inline-flex}:where(.breadcrumbs>ul>li),:where(.breadcrumbs>ol>li){align-items:center;display:inline-flex}:where(.breadcrumbs>ul>li>a),:where(.breadcrumbs>ol>li>a){align-items:center;gap:.25rem;display:inline-flex;&:hover{@media (hover:hover){color:var(--color-primary)}}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}}:where(.breadcrumbs>ul>li:last-child),:where(.breadcrumbs>ol>li:last-child){cursor:text;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}}@media (width>=768px){.md\:breadcrumbs{max-width:100%;overflow-x:auto}:where(.breadcrumbs>ul),:where(.breadcrumbs>ol){white-space:nowrap;align-items:center;min-height:min-content;padding-block:.5rem;padding-inline:.25rem;display:flex}.md\:breadcrumbs-separator{color:color-mix(in oklab,var(--color-base-content)50%,transparent);flex-shrink:0;justify-content:center;align-items:center;margin-inline:.5rem;display:inline-flex}:where(.breadcrumbs>ul>li),:where(.breadcrumbs>ol>li){align-items:center;display:inline-flex}:where(.breadcrumbs>ul>li>a),:where(.breadcrumbs>ol>li>a){align-items:center;gap:.25rem;display:inline-flex;&:hover{@media (hover:hover){color:var(--color-primary)}}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}}:where(.breadcrumbs>ul>li:last-child),:where(.breadcrumbs>ol>li:last-child){cursor:text;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}}@media (width>=1024px){.lg\:breadcrumbs{max-width:100%;overflow-x:auto}:where(.breadcrumbs>ul),:where(.breadcrumbs>ol){white-space:nowrap;align-items:center;min-height:min-content;padding-block:.5rem;padding-inline:.25rem;display:flex}.lg\:breadcrumbs-separator{color:color-mix(in oklab,var(--color-base-content)50%,transparent);flex-shrink:0;justify-content:center;align-items:center;margin-inline:.5rem;display:inline-flex}:where(.breadcrumbs>ul>li),:where(.breadcrumbs>ol>li){align-items:center;display:inline-flex}:where(.breadcrumbs>ul>li>a),:where(.breadcrumbs>ol>li>a){align-items:center;gap:.25rem;display:inline-flex;&:hover{@media (hover:hover){color:var(--color-primary)}}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}}:where(.breadcrumbs>ul>li:last-child),:where(.breadcrumbs>ol>li:last-child){cursor:text;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}}@media (width>=1280px){.xl\:breadcrumbs{max-width:100%;overflow-x:auto}:where(.breadcrumbs>ul),:where(.breadcrumbs>ol){white-space:nowrap;align-items:center;min-height:min-content;padding-block:.5rem;padding-inline:.25rem;display:flex}.xl\:breadcrumbs-separator{color:color-mix(in oklab,var(--color-base-content)50%,transparent);flex-shrink:0;justify-content:center;align-items:center;margin-inline:.5rem;display:inline-flex}:where(.breadcrumbs>ul>li),:where(.breadcrumbs>ol>li){align-items:center;display:inline-flex}:where(.breadcrumbs>ul>li>a),:where(.breadcrumbs>ol>li>a){align-items:center;gap:.25rem;display:inline-flex;&:hover{@media (hover:hover){color:var(--color-primary)}}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}}:where(.breadcrumbs>ul>li:last-child),:where(.breadcrumbs>ol>li:last-child){cursor:text;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}}@media (width>=1536px){.\32 xl\:breadcrumbs{max-width:100%;overflow-x:auto}:where(.breadcrumbs>ul),:where(.breadcrumbs>ol){white-space:nowrap;align-items:center;min-height:min-content;padding-block:.5rem;padding-inline:.25rem;display:flex}.\32 xl\:breadcrumbs-separator{color:color-mix(in oklab,var(--color-base-content)50%,transparent);flex-shrink:0;justify-content:center;align-items:center;margin-inline:.5rem;display:inline-flex}:where(.breadcrumbs>ul>li),:where(.breadcrumbs>ol>li){align-items:center;display:inline-flex}:where(.breadcrumbs>ul>li>a),:where(.breadcrumbs>ol>li>a){align-items:center;gap:.25rem;display:inline-flex;&:hover{@media (hover:hover){color:var(--color-primary)}}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}}:where(.breadcrumbs>ul>li:last-child),:where(.breadcrumbs>ol>li:last-child){cursor:text;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-base-content)}}}