quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

rewrite nav

Browse source
This commit is contained in:
outfoxxed 2024-10-24 16:26:48 -07:00
parent 6249a0aba7
commit 5341fe58d0
Signed by: outfoxxed
GPG key ID: 4C88A185FB89301E
18 changed files with 254 additions and 415 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/styles/components/accordion.css
View file

@ -7,6 +7,7 @@
& .accordion-container {
/* fixes jumps due to margins on inline items */
display: flex;
flex-direction: column;
}
& .accordion-container.animate {

6
src/styles/css-config/base.css
View file

@ -53,8 +53,10 @@ html {
--var-link-color: 190 85 60;
--inner-param-color: 215 80 27;
--inner-param-border-color: 215 50 50;
--nav-hovered-bkg: var(--blue) 100 93;
--nav-hovered-bkg: var(--blue) 100 92;
--nav-hovered-weak-bkg: var(--blue) 100 93;
--nav-selected-bkg: var(--blue) 100 90;
--nav-selected-hovered-bkg: var(--blue) 100 85;
--nav-selected-text: var(--blue) 60 60;
--nav-indicator-bkg: var(--blue) 45 80;
--toc-hovered-bkg: 0 0 0 / 0.1;
@ -106,7 +108,9 @@ html.dark {
--inner-param-border-color: 215 26 46;
--inner-param-color: 215 60 70;
--nav-hovered-bkg: var(--blue) 40 10;
--nav-hovered-weak-bkg: var(--blue) 35 8;
--nav-selected-bkg: var(--blue) 40 13;
--nav-selected-hovered-bkg: var(--blue) 40 17;
--nav-selected-text: var(--blue) 100 70;
--nav-indicator-bkg: var(--blue) 30 30;
--toc-hovered-bkg: 0 0 100 / 0.07;

2
src/styles/css-config/code.css
View file

@ -27,7 +27,7 @@ pre {
overflow: auto;
text-wrap: wrap;
&>button {
& > button {
all: unset;
width: 2rem;
height: 2rem;

4
src/styles/docs/docs.css
View file

@ -186,6 +186,8 @@ ul {
cursor: pointer;
}
& div > svg { transform: rotate(90deg) }
& div > svg {
transform: rotate(90deg);
}
}
}

191
src/styles/docs/nav/nav-tree.css
View file

@ -1,117 +1,108 @@
[data-scope="accordion"][data-part="root"] {
display: flex;
flex-direction: column;
gap: 0.15rem;
& [data-part="item"] {
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.nav-component {
margin: 0.35em 0;
}
[data-scope="accordion"][data-part="item-trigger"] {
background-color: transparent;
position: relative;
border: unset;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
width: 100%;
min-height: 2.2rem;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.25rem;
.nav-link {
text-decoration: none !important;
}
.nav-item {
display: block;
border-radius: 6px;
transition: background-color 0.2s ease;
padding: 0.4em;
&:hover {
background-color: hsl(var(--nav-hovered-bkg));
}
}
[data-scope="accordion"][data-part="item-indicator"] {
position: relative;
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
margin-left: 3px;
transition: transform 250ms ease-in-out;
&:hover {
background-color: hsl(var(--nav-indicator-bkg));
}
&[data-state="open"] {
transform: rotate(180deg);
}
}
.nav-shevron {
color: black;
}
html.dark .nav-shevron {
color: white;
}
[data-scope="accordion"][data-part="item-content"] {
--height: 709;
margin-block: 0.175rem;
margin-left: 1.6rem;
& .arktree-item,
[data-part="item-content"]>div {
display: flex;
flex-direction: column;
gap: 0.15em;
margin: 0.4rem 0;
border-radius: 6px;
transition: background-color 0.2s ease;
&:hover {
background-color: hsl(var(--nav-hovered-bkg));
}
&>a {
padding: 0.4rem;
padding-left: 0.6rem;
width: 100%;
text-decoration: none;
}
}
& .arktree-item.__current-type-doc,
[data-part="item-content"]>div.__current-type-doc {
&.nav-current {
color: hsl(var(--nav-selected-text));
background-color: hsl(var(--nav-selected-bkg));
}
}
& a {
.nav-collapsible {
overflow: hidden;
& > summary {
user-select: none;
& > div {
& > .nav-collapse-marker,
a {
transition: background-color 0.2s ease;
}
& > .nav-collapse-marker {
border-radius: 0 6px 6px 0;
padding: 0.4em 0.8em;
display: flex;
}
& > a {
border-radius: 6px 0 0 6px;
padding: 0.4em;
flex-grow: 1;
}
&:hover {
& > .nav-collapse-marker,
a {
background-color: hsl(var(--nav-hovered-bkg));
&:not(:hover) {
background-color: hsl(var(--nav-hovered-weak-bkg));
}
}
}
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0.1em;
& svg {
transition: transform 0.3s ease;
font-size: 1.1em;
}
}
}
& .accordion-container > div {
padding-left: 1.2em;
& p:first-child {
padding-top: 0;
margin-top: 0;
}
}
}
.nav-collapsible.nav-current {
& > summary > div {
& > a {
color: hsl(var(--nav-selected-text));
}
& > .nav-collapse-marker,
a {
background-color: hsl(var(--nav-selected-bkg));
}
&:hover {
& > .nav-collapse-marker,
a {
background-color: hsl(var(--nav-selected-hovered-bkg));
&:not(:hover) {
background-color: hsl(var(--nav-selected-bkg));
}
}
}
}
}
[data-scope="accordion"][data-part="item-content"][data-state="open"] {
animation: slideDown 250ms ease;
}
[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
animation: slideUp 200ms ease;
}
.__current-type-doc {
color: hsl(var(--nav-selected-text));
& [data-part="item-trigger"] a {
color: hsl(var(--nav-selected-text));
}
& [data-scope="accordion"][data-part="item-trigger"] {
background-color: hsl(var(--nav-selected-bkg));
}
.nav-collapsible[open]:not(.closing) > summary > div svg {
transform: rotate(180deg);
}

89
src/styles/docs/nav/nav.css
View file

@ -37,11 +37,11 @@
position: absolute;
z-index: 11;
overflow: hidden;
top: 2.6rem;
left: calc(-3rem + -80svw);
top: 2.5rem;
left: -24rem;
height: calc(100svh - 2.5rem);
font-size: 1rem;
scrollbar-width: none;
font-size: 1.2rem;
-ms-overflow-style: none;
background: hsla(var(--overlay-bkg));
border-right: 1px solid hsl(var(--overlay-bkg-border));
@ -50,8 +50,7 @@
display: none;
}
transition: left 0.3s ease,
padding 0.3s ease;
transition: left 0.3s ease, padding 0.3s ease;
&.shown {
display: flex;
@ -61,47 +60,16 @@
& .navtree {
/* lines up with non overlay nav */
padding: 0.5rem 0.618rem;
padding: 0rem 0.618rem;
height: 100%;
width: 80svw;
width: 21rem;
box-sizing: content-box;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
margin-bottom: 1rem;
text-wrap: nowrap;
& [data-part="item-indicator"] {
margin-left: 1rem;
margin-right: 0.8rem;
height: 2rem;
width: 2rem;
& svg {
height: max-content;
width: 100%;
}
}
& [data-part="item-trigger"] {
min-height: 3em;
font-size: 1.2rem;
}
& [data-part="item-content"] {
margin-left: 3.7rem;
}
& [data-part="item"] {
& [data-part="item-content"]>div {
min-height: 3em;
&>a {
margin: auto 0;
}
}
}
}
}
}
@ -112,45 +80,14 @@
text-align: start;
}
@media (min-width: 40rem) {
.nav-toggle {
.nav-items {
font-size: 1rem;
top: 2.5rem;
left: -24rem;
@media not (min-width: 40rem) {
.nav-toggle .nav-items {
top: 2.6rem;
left: calc(-3rem + -80svw);
font-size: 1.2rem;
& .navtree {
width: 21rem;
}
& .navtree {
& [data-part="item-indicator"] {
margin-left: 0.2rem;
margin-right: 0rem;
height: 1.5rem;
width: 1.5rem;
& svg {
height: unset;
width: unset;
}
}
& [data-part="item-trigger"] {
min-height: 2.2rem;
font-size: 1rem;
}
& [data-part="item-content"] {
margin-left: 1.6rem;
}
& [data-part="item"] {
& [data-part="item-content"]>div {
min-height: 2.2rem;
}
}
}
& .navtree {
width: 80svw;
}
}
}