:root { --mm-ocd-width: 100%; --mm-ocd-min-width: 200px; --mm-ocd-max-width: 100%; } body.mm-ocd-opened { overflow-y: hidden; -ms-scroll-chaining: none; overscroll-behavior: none; } .mm-ocd { position: fixed; top: 63px; right: 0; bottom: 100%; left: 0; z-index: 9999; overflow: hidden; -ms-scroll-chaining: none; overscroll-behavior: contain; background: rgba(0, 0, 0, 0); -webkit-transition-property: bottom, background-color; -o-transition-property: bottom, background-color; transition-property: bottom, background-color; -webkit-transition-duration: 0s, 0.3s; -o-transition-duration: 0s, 0.3s; transition-duration: 0s, 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-delay: 0.45s, 0.15s; -o-transition-delay: 0.45s, 0.15s; transition-delay: 0.45s, 0.15s; } @media screen and (max-width: 575px) { .mm-ocd { top: 53px; } } .mm-ocd--open { bottom: 0; background: rgba(0, 0, 0, 0.25); -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .mm-ocd__content { position: absolute; top: 0; bottom: 0; z-index: 2; width: var(--mm-ocd-width); min-width: var(--mm-ocd-min-width); max-width: var(--mm-ocd-max-width); background: #fff; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; } .mm-ocd--left .mm-ocd__content { left: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .mm-ocd--right .mm-ocd__content { right: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .mm-ocd--open .mm-ocd__content { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .mm-ocd__backdrop { position: absolute; top: 0; bottom: 0; z-index: 3; width: clamp(calc(100% - var(--mm-ocd-max-width)), calc(100% - var(--mm-ocd-width)), calc(100% - var(--mm-ocd-min-width))); background: rgba(3, 2, 1, 0); } .mm-ocd--left .mm-ocd__backdrop { right: 0; } .mm-ocd--right .mm-ocd__backdrop { left: 0; } .mm-spn, .mm-spn a, .mm-spn li, .mm-spn span, .mm-spn ul { display: block; padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } :root { --mm-spn-item-height: 50px; --mm-spn-item-indent: 20px; --mm-spn-line-height: 24px; --mm-spn-panel-offset: 30%; } .mm-spn { width: 100%; height: 100%; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; overflow: hidden; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .mm-spn ul { -webkit-overflow-scrolling: touch; position: fixed; top: 0; left: 100%; bottom: 0; z-index: 2; width: calc(100% + var(--mm-spn-panel-offset)); padding-right: var(--mm-spn-panel-offset); line-height: var(--mm-spn-line-height); overflow: visible; overflow-y: auto; background: inherit; -webkit-transition: left 0.3s ease 0s; -o-transition: left 0.3s ease 0s; transition: left 0.3s ease 0s; cursor: default; } .mm-spn ul:after { content: ""; display: block; height: var(--mm-spn-item-height); } .mm-spn > ul { left: 0; } .mm-spn ul.mm-spn--open { left: 0; } .mm-spn ul.mm-spn--parent { left: calc(-1 * var(--mm-spn-panel-offset)); overflow: visible; } .mm-spn li { position: relative; background: inherit; cursor: pointer; } .mm-spn li:before { content: ""; display: block; position: absolute; top: calc(var(--mm-spn-item-height) / 2); right: calc(var(--mm-spn-item-height) / 2); z-index: 0; width: 10px; height: 10px; border-top: 2px solid; border-right: 2px solid; -webkit-transform: rotate(45deg) translate(0, -50%); -ms-transform: rotate(45deg) translate(0, -50%); transform: rotate(45deg) translate(0, -50%); opacity: 0.4; } .mm-spn li:after { content: ""; display: block; margin-left: var(--mm-spn-item-indent); border-top: 1px solid; opacity: 0.15; } .mm-spn a, .mm-spn span { position: relative; z-index: 1; padding: calc((var(--mm-spn-item-height) - var(--mm-spn-line-height)) / 2) var(--mm-spn-item-indent); } .mm-spn a { background: inherit; color: inherit; text-decoration: none; } .mm-spn a:not(:last-child) { width: calc(100% - var(--mm-spn-item-height)); } .mm-spn a:not(:last-child):after { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; border-right: 1px solid; opacity: 0.15; } .mm-spn span { background: 0 0; } .mm-spn.mm-spn--navbar { cursor: pointer; } .mm-spn.mm-spn--navbar:before { content: ""; display: block; position: absolute; top: calc(var(--mm-spn-item-height) / 2); left: var(--mm-spn-item-indent); width: 10px; height: 10px; margin-top: 2px; border-top: 2px solid; border-left: 2px solid; -webkit-transform: rotate(-45deg) translate(50%, -50%); -ms-transform: rotate(-45deg) translate(50%, -50%); transform: rotate(-45deg) translate(50%, -50%); opacity: 0.4; } .mm-spn.mm-spn--navbar.mm-spn--main { cursor: default; } .mm-spn.mm-spn--navbar.mm-spn--main:before { content: none; display: none; } .mm-spn.mm-spn--navbar:after { content: attr(data-mm-spn-title); display: block; position: absolute; top: 0; left: 0; right: 0; height: var(--mm-spn-item-height); padding: 0 calc(var(--mm-spn-item-indent) * 2); line-height: var(--mm-spn-item-height); opacity: 0.4; text-align: center; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .mm-spn.mm-spn--navbar.mm-spn--main:after { padding-left: var(--mm-spn-item-indent); } .mm-spn.mm-spn--navbar ul { top: calc(var(--mm-spn-item-height) + 1px); } .mm-spn.mm-spn--navbar ul:before { content: ""; display: block; position: fixed; top: inherit; z-index: 2; width: 100%; border-top: 1px solid currentColor; opacity: 0.15; } .mm-spn.mm-spn--light { color: #444; background: #f3f3f3; } .mm-spn.mm-spn--dark { color: #ddd; background: #333; } .mm-spn.mm-spn--vertical { overflow-y: auto; } .mm-spn.mm-spn--vertical ul { width: 100%; padding-right: 0; position: static; } .mm-spn.mm-spn--vertical ul ul { display: none; padding-left: var(--mm-spn-item-indent); } .mm-spn.mm-spn--vertical ul ul:after { height: calc(var(--mm-spn-item-height) / 2); } .mm-spn.mm-spn--vertical ul.mm-spn--open { display: block; } .mm-spn.mm-spn--vertical li.mm-spn--open:before { -webkit-transform: rotate(135deg) translate(-50%, 0); -ms-transform: rotate(135deg) translate(-50%, 0); transform: rotate(135deg) translate(-50%, 0); } .mm-spn.mm-spn--vertical ul ul li:last-child:after { content: none; display: none; }