smartmenus/dist/css/smartmenus-only-layout.min.css

Website/web app navbars with collapsible navs or dropdowns made easy yet highly configurable.

/*!
 * SmartMenus 2.0.0-alpha.1 - Dec 29, 2023
 * https://www.smartmenus.org/
 * Copyright (c) since 2001 Vasil Dinkov, Vadikom Web Ltd. https://vadikom.com
 * Licensed MIT https://github.com/vadikom/smartmenus/blob/master/LICENSE-MIT
 */
.sm-navbar{--sm-navbar-z-index: 9999;--sm-navbar-sticky-top-offset: 0;--sm-navbar-sticky-bottom-offset: 0;--sm-navbar-sidebar-width: 300px;--sm-navbar-sidebar-centered-layout-max-width: 1200px;--sm-container-max-width: 960px;--sm-collapse-max-height: calc(100vh - 70px);--sm-collapse-show-animation: sm-ani-collapse 0.25s ease-in;--sm-collapse-hide-animation: sm-ani-collapse 0.25s ease-in reverse;--sm-offcanvas-width: 300px;--sm-offcanvas-overlay-bg: rgba(0, 0, 0, 0.3);--sm-sub-min-width: 12em;--sm-sub-collapsible-show-animation: sm-ani-collapse 0.25s ease-in;--sm-sub-collapsible-hide-animation: sm-ani-collapse 0.25s ease-in reverse;--sm-sub-dropdowns-show-animation: none;--sm-sub-dropdowns-hide-animation: sm-ani-fade 0.25s ease-in reverse}.sm-navbar{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;position:relative;z-index:var(--sm-navbar-z-index);direction:ltr;text-align:left;line-height:normal;-webkit-tap-highlight-color:rgba(0,0,0,0)}.sm-navbar *,.sm-navbar *::before,.sm-navbar *::after{box-sizing:inherit}.sm-navbar--dropdowns-only{flex-wrap:nowrap}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only){flex-wrap:nowrap}}.sm-navbar--vertical.sm-navbar--dropdowns-only:not(.sm-navbar[class*=sm-navbar--offcanvas]){display:block}@media(min-width: 768px){.sm-navbar--vertical:not(.sm-navbar--offcanvas-only){display:block}}.sm-navbar--inline.sm-navbar--dropdowns-only{display:inline-flex;vertical-align:top}@media(min-width: 768px){.sm-navbar--inline{display:inline-flex;vertical-align:top}}.sm-navbar--sticky-top{position:sticky;top:var(--sm-navbar-sticky-top-offset)}.sm-navbar--sticky-bottom{position:sticky;bottom:var(--sm-navbar-sticky-bottom-offset)}.sm-navbar--fixed-top,.sm-navbar--fixed-bottom{position:fixed;top:0;left:0;right:0}.sm-navbar--fixed-bottom{top:auto;bottom:0}.sm-navbar--sidebar-only{display:block;position:fixed;top:0;bottom:0;left:0;width:var(--sm-navbar-sidebar-width);overflow-y:auto}.sm-navbar--sidebar-only.sm-navbar--sidebar-right{left:auto;right:0}.sm-navbar--sidebar-only.sm-navbar--dropdowns-only{overflow-y:visible}@media(min-width: 768px){.sm-navbar--sidebar-only:not(.sm-navbar--collapsible-only){overflow-y:visible}.sm-navbar--sidebar-left,.sm-navbar--sidebar-right{display:block;position:fixed;top:0;bottom:0;left:0;width:var(--sm-navbar-sidebar-width)}.sm-navbar--sidebar-right{left:auto;right:0}.sm-navbar[class*=sm-navbar--sidebar].sm-navbar--collapsible-only{overflow-y:auto}}.sm-navbar--sidebar-centered{--sm-navbar-sidebar-centered-padding-x: 0px;--sm-navbar-sidebar-centered-spacing: max(var(--sm-navbar-sidebar-centered-padding-x), calc((100% - (var(--sm-navbar-sidebar-centered-layout-max-width) - (var(--sm-navbar-sidebar-centered-padding-x) * 2))) / 2));--sm-navbar-sidebar-centered-width: calc((100% - (var(--sm-navbar-sidebar-centered-layout-max-width) - (var(--sm-navbar-sidebar-centered-padding-x) * 2))) / 2 + var(--sm-navbar-sidebar-width) - var(--sm-navbar-sidebar-centered-padding-x))}.sm-navbar--sidebar-centered.sm-navbar--sidebar-only{padding-left:var(--sm-navbar-sidebar-centered-spacing) !important;width:var(--sm-navbar-sidebar-centered-width);min-width:var(--sm-navbar-sidebar-width)}.sm-navbar--sidebar-centered.sm-navbar--sidebar-only.sm-navbar--sidebar-right{padding-left:var(--sm-navbar-sidebar-centered-padding-x) !important;padding-right:var(--sm-navbar-sidebar-centered-spacing) !important}@media(min-width: 768px){.sm-navbar--sidebar-centered{padding-left:var(--sm-navbar-sidebar-centered-spacing) !important;width:var(--sm-navbar-sidebar-centered-width);min-width:var(--sm-navbar-sidebar-width)}.sm-navbar--sidebar-centered.sm-navbar--sidebar-right{padding-left:var(--sm-navbar-sidebar-centered-padding-x) !important;padding-right:var(--sm-navbar-sidebar-centered-spacing) !important}}.sm-container{display:inherit;flex-flow:inherit;align-items:inherit;justify-content:inherit;margin-left:auto;margin-right:auto;width:100%;max-width:var(--sm-container-max-width)}.sm-brand{display:block;margin:0;padding:0}.sm-toggler{display:inline-block;position:relative}.sm-navbar--dropdowns-only .sm-toggler{display:none}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-toggler{display:none}}.sm-toggler-state{display:none}.sm-toggler-anchor{display:block;color:currentcolor !important}.sm-toggler-anchor--hide{display:none}.sm-toggler-state.sm-show~.sm-toggler .sm-toggler-anchor--show,.sm-toggler-state:target~.sm-toggler .sm-toggler-anchor--show{display:none}.sm-toggler-state.sm-show~.sm-toggler .sm-toggler-anchor--hide,.sm-toggler-state:target~.sm-toggler .sm-toggler-anchor--hide{display:block}.sm-toggler-icon{display:block;position:relative;width:26px;height:18px}.sm-toggler-icon--show{border-top:2px solid}.sm-toggler-icon--show::before,.sm-toggler-icon--show::after{content:"";position:absolute;top:calc(50% - 2px);left:0;right:0;border-top:2px solid;height:0;overflow:hidden}.sm-toggler-icon--show::after{top:auto;bottom:0}.sm-toggler-icon--hide::before,.sm-toggler-icon--hide::after{content:"";position:absolute;top:calc(50% - 1px);left:0;right:0;border-top:2px solid;height:0;overflow:hidden;transform:rotate(-45deg)}.sm-toggler-icon--hide::after{transform:rotate(45deg)}.sm-toggler-state:target~.sm-collapse{display:block}.sm-navbar[class*=sm-navbar--offcanvas] .sm-toggler{display:inline-block}@media(min-width: 768px){.sm-navbar[class*=sm-navbar--offcanvas]:not(.sm-navbar--offcanvas-only) .sm-toggler{display:none}}.sm-offcanvas .sm-toggler-anchor--hide{display:block}.sm-toggler-state:target~.sm-offcanvas{display:block}.sm-toggler-state:target~.sm-offcanvas-overlay{display:block}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--offcanvas-only) .sm-offcanvas-overlay{display:none}}.sm-navbar--sidebar-only .sm-toggler{display:none}@media(min-width: 768px){.sm-navbar[class*=sm-navbar--sidebar] .sm-toggler{display:none}}.sm-collapse{display:none;flex-basis:100%}.sm-collapse.sm-show,.sm-collapse.sm-hiding{display:block}@media(prefers-reduced-motion: no-preference){.sm-collapse.sm-showing{animation:var(--sm-collapse-show-animation)}.sm-collapse.sm-hiding{animation:var(--sm-collapse-hide-animation)}}.sm-navbar--dropdowns-only .sm-collapse{display:inherit;flex-flow:inherit;align-items:inherit;justify-content:inherit}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-collapse{display:inherit;flex-flow:inherit;align-items:inherit;justify-content:inherit}}.sm-navbar[class*=sm-navbar--sticky] .sm-collapse,.sm-navbar[class*=sm-navbar--fixed] .sm-collapse{max-height:var(--sm-collapse-max-height);overflow-y:auto}.sm-navbar[class*=sm-navbar--sticky].sm-navbar--dropdowns-only .sm-collapse,.sm-navbar[class*=sm-navbar--fixed].sm-navbar--dropdowns-only .sm-collapse{max-height:none;overflow-y:visible}@media(min-width: 768px){.sm-navbar[class*=sm-navbar--sticky]:not(.sm-navbar--collapsible-only) .sm-collapse,.sm-navbar[class*=sm-navbar--fixed]:not(.sm-navbar--collapsible-only) .sm-collapse{max-height:none;overflow-y:visible}}@media(min-width: 768px){.sm-navbar[class*=sm-navbar--sidebar] .sm-collapse{display:block}}.sm-offcanvas{display:none;flex-basis:100%;position:fixed;top:0;bottom:0;left:0;width:var(--sm-offcanvas-width);overflow-y:auto;--sm-offcanvas-transform-from: translateX(-100%)}.sm-navbar--offcanvas-right .sm-offcanvas{left:auto;right:0;--sm-offcanvas-transform-from: translateX(100%)}.sm-navbar--offcanvas-top .sm-offcanvas,.sm-navbar--offcanvas-bottom .sm-offcanvas{right:0;width:auto;--sm-offcanvas-transform-from: translateY(-100%)}.sm-navbar--offcanvas-bottom .sm-offcanvas{--sm-offcanvas-transform-from: translateY(100%)}.sm-offcanvas.sm-show,.sm-offcanvas.sm-hiding{display:block}@media(prefers-reduced-motion: no-preference){.sm-offcanvas.sm-showing{animation:sm-offcanvas-toggle .25s}.sm-offcanvas.sm-hiding{animation:sm-offcanvas-toggle .25s reverse}}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--offcanvas-only) .sm-offcanvas{display:inherit;flex-flow:inherit;align-items:inherit;justify-content:inherit;position:static;width:auto;padding:0 !important;background:transparent !important;overflow-y:visible;transform:none}}.sm-navbar--dropdowns-only .sm-offcanvas{overflow-y:visible}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-offcanvas{overflow-y:visible}}@keyframes sm-offcanvas-toggle{from{transform:var(--sm-offcanvas-transform-from)}to{transform:none}}.sm-offcanvas-overlay{display:none;position:fixed;top:0;bottom:0;left:0;right:0;background:var(--sm-offcanvas-overlay-bg);cursor:default}.sm-offcanvas-overlay.sm-show,.sm-offcanvas-overlay.sm-hiding{display:block}@media(prefers-reduced-motion: no-preference){.sm-offcanvas-overlay.sm-showing{animation:sm-ani-fade .25s}.sm-offcanvas-overlay.sm-hiding{animation:sm-ani-fade .25s reverse}}.sm-nav{display:flex;flex-flow:column nowrap;flex-basis:100%;list-style:none;margin:0;padding:0;max-width:100%;line-height:inherit}.sm-navbar--dropdowns-only .sm-nav{flex-flow:row wrap}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-nav{flex-flow:row wrap}}.sm-navbar--vertical.sm-navbar--dropdowns-only .sm-nav{flex-flow:column nowrap;align-items:normal}@media(min-width: 768px){.sm-navbar--vertical:not(.sm-navbar--collapsible-only) .sm-nav{flex-flow:column nowrap;align-items:normal}}.sm-navbar--dropdowns-only .sm-nav--left{justify-content:flex-start}@media(min-width: 768px){.sm-nav--left{justify-content:flex-start}}.sm-navbar--dropdowns-only .sm-nav--center{justify-content:center}@media(min-width: 768px){.sm-nav--center{justify-content:center}}.sm-navbar--dropdowns-only .sm-nav--right{justify-content:flex-end}@media(min-width: 768px){.sm-nav--right{justify-content:flex-end}}.sm-navbar--dropdowns-only .sm-nav--fill{flex:1 1 auto}@media(min-width: 768px){.sm-nav--fill{flex:1 1 auto}}.sm-navbar--dropdowns-only .sm-nav--justify{flex:1 1 0}@media(min-width: 768px){.sm-nav--justify{flex:1 1 0}}.sm-nav-item{display:grid;grid-template:"link link-split-toggler" auto "sub  sub" auto/1fr auto;position:relative;list-style:none;margin:0;padding:0;line-height:inherit}.sm-navbar--dropdowns-only .sm-nav--fill>.sm-nav-item{flex:1 1 auto}@media(min-width: 768px){.sm-nav--fill>.sm-nav-item{flex:1 1 auto}}.sm-navbar--dropdowns-only .sm-nav--justify>.sm-nav-item{flex:1 1 0}@media(min-width: 768px){.sm-nav--justify>.sm-nav-item{flex:1 1 0}}.sm-nav-item--has-mega{position:static}.sm-nav-item-separator{--sm-nav-item-separator-border: 1px solid;--sm-nav-item-separator-spacing: 0.5rem;--sm-nav-item-separator-fullsize-offset: 6px;margin:var(--sm-nav-item-separator-spacing) var(--sm-nav-item-separator-fullsize-offset);border:0;border-top:var(--sm-nav-item-separator-border);height:0;color:currentcolor;overflow:hidden}.sm-navbar--dropdowns-only .sm-nav-item-separator{margin:var(--sm-nav-item-separator-fullsize-offset) var(--sm-nav-item-separator-spacing);border:0;border-left:var(--sm-nav-item-separator-border);height:auto}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-nav-item-separator{margin:var(--sm-nav-item-separator-fullsize-offset) var(--sm-nav-item-separator-spacing);border:0;border-left:var(--sm-nav-item-separator-border);height:auto}}.sm-navbar--vertical.sm-navbar--dropdowns-only .sm-nav-item-separator{margin:var(--sm-nav-item-separator-spacing) var(--sm-nav-item-separator-fullsize-offset);border:0;border-top:var(--sm-nav-item-separator-border);height:0}@media(min-width: 768px){.sm-navbar--vertical:not(.sm-navbar--collapsible-only) .sm-nav-item-separator{margin:var(--sm-nav-item-separator-spacing) var(--sm-nav-item-separator-fullsize-offset);border:0;border-top:var(--sm-nav-item-separator-border);height:0}}.sm-nav-link{grid-area:link;display:flex;align-items:center;justify-content:space-between;position:relative;line-height:inherit}.sm-navbar--dropdowns-only .sm-nav-link{white-space:nowrap}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-nav-link{white-space:nowrap}}.sm-nav-link.sm-disabled{cursor:default}.sm-navbar--vertical.sm-navbar--dropdowns-only .sm-nav-link{white-space:normal}@media(min-width: 768px){.sm-navbar--vertical:not(.sm-navbar--collapsible-only) .sm-nav-link{white-space:normal}}.sm-nav-link--split+.sm-nav-link--split{grid-area:link-split-toggler;cursor:pointer}.sm-nav-link--split+.sm-nav-link--split::before{content:"";position:absolute;left:0;top:0;bottom:0;margin:6px 0;border-left:1px solid;overflow:hidden}.sm-sub-toggler::after{--sm-sub-toggler-icon-size: 0.7rem;--sm-sub-toggler-icon-spacing: 0.4rem;--sm-sub-toggler-split-icon-spacing: 0px;content:"+";display:inline-block;margin-left:var(--sm-sub-toggler-icon-spacing);width:var(--sm-sub-toggler-icon-size);height:var(--sm-sub-toggler-icon-size);line-height:var(--sm-sub-toggler-icon-size);text-align:center}.sm-expanded.sm-sub-toggler::after{content:"-"}.sm-nav-link--split.sm-sub-toggler::after,.sm-sub-link--split.sm-sub-toggler::after{margin-left:var(--sm-sub-toggler-split-icon-spacing);margin-right:var(--sm-sub-toggler-split-icon-spacing)}.sm-sub{grid-area:sub;display:none;list-style:none;margin:0;padding:0;line-height:inherit}.sm-sub.sm-show,.sm-sub.sm-hiding{display:block}@media(prefers-reduced-motion: no-preference){.sm-sub.sm-showing{animation:var(--sm-sub-collapsible-show-animation)}.sm-sub.sm-hiding{animation:var(--sm-sub-collapsible-hide-animation)}}.sm-navbar--dropdowns-only .sm-sub{grid-area:none;position:absolute;min-width:var(--sm-sub-min-width)}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-sub{grid-area:none;position:absolute;min-width:var(--sm-sub-min-width)}}@media(prefers-reduced-motion: no-preference){.sm-navbar--dropdowns-only .sm-sub.sm-showing{animation:var(--sm-sub-dropdowns-show-animation)}.sm-navbar--dropdowns-only .sm-sub.sm-hiding{animation:var(--sm-sub-dropdowns-hide-animation)}}@media(prefers-reduced-motion: no-preference)and (min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-sub.sm-showing{animation:var(--sm-sub-dropdowns-show-animation)}.sm-navbar:not(.sm-navbar--collapsible-only) .sm-sub.sm-hiding{animation:var(--sm-sub-dropdowns-hide-animation)}}.sm-sub--mega{left:0;right:0}.sm-navbar--vertical.sm-navbar--dropdowns-only .sm-sub--mega{left:auto;right:auto;top:0;bottom:0}@media(min-width: 768px){.sm-navbar--vertical .sm-sub--mega{left:auto;right:auto;top:0;bottom:0}}.sm-sub-item{display:grid;grid-template:"link link-split-toggler" auto "sub  sub" auto/1fr auto;position:relative;list-style:none;margin:0;padding:0;line-height:inherit}.sm-sub-item-separator{margin:.5rem 6px;border:0;border-top:1px solid;height:0;overflow:hidden}.sm-sub-link{grid-area:link;display:flex;align-items:center;justify-content:space-between;position:relative;line-height:inherit}.sm-navbar--dropdowns-only .sm-sub-link{white-space:nowrap}@media(min-width: 768px){.sm-navbar:not(.sm-navbar--collapsible-only) .sm-sub-link{white-space:nowrap}}.sm-sub-link.sm-disabled{cursor:default}.sm-sub-link--split+.sm-sub-link--split{grid-area:link-split-toggler;cursor:pointer}.sm-sub-link--split+.sm-sub-link--split::before{content:"";position:absolute;left:0;top:0;bottom:0;margin:6px 0;border-left:1px solid;overflow:hidden}@keyframes sm-ani-collapse{from{max-height:0;overflow:hidden}to{max-height:var(--sm-height, 100vh);overflow:hidden}}@keyframes sm-ani-fade{from{opacity:0}to{opacity:1}}@media(max-width: 767.98px){.sm-hide-small{display:none !important}}@media(min-width: 768px){.sm-hide-large{display:none !important}}

/*# sourceMappingURL=maps/smartmenus-only-layout.min.css.map */