| | |
|---|
| | | nav.drawer{bottom:0;max-height:100vh;overflow:hidden auto;position:fixed;right:0;transition:var(--trans-size);width:var(--btn);z-index:var(--z-5);--dir:column-reverse;background-color:var(--base);border-left:1px solid var(--base-200);box-shadow:rgba(var(--base-rgb),var(--op-4)) var(--shdw-left);height:auto;--w:var(--chip_)}nav.drawer .section-title,nav.drawer .title{display:none}nav.drawer ul .icon{min-width:var(--chip_)}nav.drawer .a,nav.drawer a{gap:.5rem;height:var(--chipchip);justify-content:center;padding:0 .5rem;width:100%}nav.drawer .toggle{width:100%}nav.drawer .toggle .icon{transform:rotate(0);transition:var(--trans-transform)}nav.drawer.open{width:240px}nav.drawer.open .section-title,nav.drawer.open .title{display:block}nav.drawer.open .toggle .icon{transform:rotate(180deg)}nav.drawer.open .a,nav.drawer.open a{justify-content:flex-start}nav.drawer ul{--dir:column;--gap:0;--height:auto;margin:0;padding:0}nav.drawer li,nav.drawer ul{height:auto;width:100%}nav.drawer .row{width:100%}nav.drawer .menu-section{border-bottom:1px solid var(--contrast-200)}nav.drawer .section-title{font-size:var(--small);font-weight:700;opacity:.6;padding:.5rem var(--px);text-transform:uppercase} |
|---|
| | | /*!***************************************************************************************************************************************************************************************************************************************************!*\ |
|---|
| | | !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/drawer-menu/style.scss ***! |
|---|
| | | \***************************************************************************************************************************************************************************************************************************************************/ |
|---|
| | | nav.drawer { |
|---|
| | | position: fixed; |
|---|
| | | right: 0; |
|---|
| | | bottom: 0; |
|---|
| | | max-height: 100vh; |
|---|
| | | overflow: hidden auto; |
|---|
| | | width: var(--btn); |
|---|
| | | z-index: var(--z-5); |
|---|
| | | transition: var(--trans-size); |
|---|
| | | --dir: column-reverse; |
|---|
| | | background-color: rgb(var(--base)); |
|---|
| | | border-left: 1px solid rgb(var(--base-200)); |
|---|
| | | box-shadow: rgba(var(--base), var(--op-4)) var(--shdw-left); |
|---|
| | | height: auto; |
|---|
| | | --w: var(--chip_); |
|---|
| | | } |
|---|
| | | nav.drawer .title, |
|---|
| | | nav.drawer .section-title { |
|---|
| | | display: none; |
|---|
| | | } |
|---|
| | | nav.drawer ul .icon { |
|---|
| | | min-width: var(--chip_); |
|---|
| | | } |
|---|
| | | nav.drawer a, |
|---|
| | | nav.drawer .a { |
|---|
| | | height: var(--chipchip); |
|---|
| | | padding: 0 0.5rem; |
|---|
| | | width: 100%; |
|---|
| | | gap: 0.5rem; |
|---|
| | | justify-content: center; |
|---|
| | | } |
|---|
| | | nav.drawer .toggle { |
|---|
| | | width: 100%; |
|---|
| | | aspect-ratio: unset; |
|---|
| | | } |
|---|
| | | nav.drawer .toggle .icon { |
|---|
| | | transform: rotate(0); |
|---|
| | | transition: var(--trans-transform); |
|---|
| | | } |
|---|
| | | nav.drawer.open { |
|---|
| | | width: 240px; |
|---|
| | | } |
|---|
| | | nav.drawer.open .title, |
|---|
| | | nav.drawer.open .section-title { |
|---|
| | | display: block; |
|---|
| | | } |
|---|
| | | nav.drawer.open .toggle .icon { |
|---|
| | | transform: rotate(180deg); |
|---|
| | | } |
|---|
| | | nav.drawer.open a, |
|---|
| | | nav.drawer.open .a { |
|---|
| | | justify-content: flex-start; |
|---|
| | | } |
|---|
| | | nav.drawer ul { |
|---|
| | | --dir: column; |
|---|
| | | --gap: 0; |
|---|
| | | --height: auto; |
|---|
| | | padding: 0; |
|---|
| | | margin: 0; |
|---|
| | | height: auto; |
|---|
| | | width: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | } |
|---|
| | | nav.drawer li { |
|---|
| | | height: auto; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | nav.drawer .row { |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | nav.drawer .menu-section { |
|---|
| | | border-bottom: 1px solid rgb(var(--contrast-200)); |
|---|
| | | } |
|---|
| | | nav.drawer .section-title { |
|---|
| | | padding: 0.5rem var(--px); |
|---|
| | | font-size: var(--small); |
|---|
| | | text-transform: uppercase; |
|---|
| | | opacity: 0.6; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | .main-actions .buttons.buttons { |
|---|
| | | right: calc(var(--btn_) + 0.5rem); |
|---|
| | | } |
|---|
| | | nav.on-this-page.on-this-page.on-this-page { |
|---|
| | | width: calc(100vw - var(--btn)) !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /*# sourceMappingURL=style-index.css.map*/ |
|---|
