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_);
|
|
.title,
|
.section-title {
|
display: none;
|
}
|
ul .icon {
|
min-width: var(--chip_);
|
}
|
|
a,
|
.a {
|
height: var(--chipchip);
|
padding: 0 .5rem;
|
width: 100%;
|
gap: .5rem;
|
justify-content: center;
|
}
|
|
.toggle {
|
width: 100%;
|
aspect-ratio: unset;
|
.icon {
|
transform: rotate(0);
|
transition: var(--trans-transform);
|
}
|
}
|
&.open {
|
width: 240px;
|
.title,
|
.section-title {
|
display: block;
|
}
|
|
.toggle .icon {
|
transform: rotate(180deg);
|
}
|
|
a,
|
.a {
|
justify-content: flex-start;
|
}
|
}
|
|
ul {
|
--dir: column;
|
--gap: 0;
|
--height: auto;
|
padding: 0;
|
margin: 0;
|
height: auto;
|
width:100%;
|
overflow: hidden;
|
}
|
li {
|
height: auto;
|
width: 100%;
|
}
|
|
|
.row {
|
width: 100%;
|
}
|
|
.menu-section {
|
border-bottom: 1px solid rgb(var(--contrast-200));
|
}
|
.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_) + .5rem);
|
}
|
|
nav.on-this-page.on-this-page.on-this-page {
|
max-width: calc(100vw - var(--btn_))!important;
|
}
|
