/*!***************************************************************************************************************************************************************************************************************************************************!*\
|
!*** 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;
|
left: 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-right: 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 {
|
left: calc(var(--btn_) + 0.5rem);
|
}
|
nav.on-this-page.on-this-page.on-this-page {
|
width: calc(100vw - var(--btn)) !important;
|
}
|
