jwa11y/a11yist
2
1
Fork 0
Code Issues 15 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

TreeView v1

Browse source
This commit is contained in:
david 2024-11-06 22:12:37 +01:00
parent d1294c2fc4
commit e9743cd00c
6 changed files with 148 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

152
app/assets/stylesheets/layout.scss
View file

@ -72,6 +72,14 @@
background-size: cover;
}
@mixin toggle-off-icon($color) {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-toggle-off" viewBox="0 0 16 16"><path d="M11 4a4 4 0 0 1 0 8H8a5 5 0 0 0 2-4 5 5 0 0 0-2-4zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8M0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5"/></svg>')
}
@mixin toggle-on-icon($color) {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(#{$color})" class="bi bi-toggle-on" viewBox="0 0 16 16"><path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8" /> </svg>')
}
.page_nav nav ul {
padding-left: 0;
list-style-type: none;
@ -83,56 +91,126 @@
}
a:hover {
text-decoration: underline;
// text-decoration: underline;
}
ul {
// padding-left: 1.5rem;
padding-left: 0rem;
}
}
details.switch {
>summary {
display: flex;
}
summary,
summary a {
font-size: 1rem;
font-style: normal;
>summary::after {
@include toggle-off-icon(to-rgb(map-get($theme-colors, "dark")));
width: 1rem;
height: 1rem;
float: inline-end;
transition: 0.4s;
content: '';
margin-top: 0.25rem;
margin-right: 0;
margin-left: 0.5rem
}
}
summary {
display: flex;
line-height: 2rem;
}
summary::before {
@include details-icon(to-rgb(map-get($theme-colors, "dark")));
content: '';
float: inline-end;
width: 0.7rem;
height: 1rem;
margin-top: 0.5rem;
margin-right: 6px;
// background: url('chevron-right.svg');
// background-size: cover;
margin-left: 0;
transition: 0.2s;
details.switch[open]>summary::after {
@include toggle-on-icon(to-rgb(map-get($theme-colors, "dark")));
}
@include color-mode(dark) {
summary::before {
@include details-icon(to-rgb(map-get($theme-colors, "light")));
// content: '';
// float: inline-end;
// width: 0.7rem;
// height: 1rem;
// margin-top: 0.5rem;
// margin-right: 6px;
// // background: url('chevron-right.svg');
// // background-size: cover;
// margin-left: 0;
// transition: 0.2s;
details.switch summary::after {
@include toggle-off-icon(to-rgb(map-get($theme-colors, "light")));
}
}
details[open]>summary::before {
@include color-mode(dark) {
details.switch[open]>summary::after {
@include toggle-on-icon(to-rgb(map-get($theme-colors, "light")));
}
}
// details.tree[open]:has(summary.active) {
// border: solid 1px $primary;
// }
details.tree {
>summary,
>summary a {
font-size: 1rem;
font-style: normal;
}
>summary {
display: flex;
line-height: 2rem;
padding-left: 12px;
// padding-top: 8px;
// padding-bottom: 8px;
}
>summary.active {
border-left: solid 8px $primary;
border-right: solid 8px $primary;
// border: solid 1px $primary;
// background-color: $gray-800;
padding-left: 8px;
// padding-top: 8px;
}
>summary::before {
@include details-icon(to-rgb(map-get($theme-colors, "dark")));
content: '';
float: inline-end;
width: 0.7rem;
height: 1rem;
margin-top: 0.5rem;
margin-right: 6px;
// background: url('chevron-right.svg');
// background-size: cover;
margin-left: 0px;
transition: 0.2s;
}
ul {
// li:hover {
// border-left: solid 2px $white;
// padding-left: 36px;
// }
li {
padding-left: 38px;
a {
display: block;
}
}
li:has(a.active) {
border-left: solid 2px $primary;
padding-left: 36px;
// background-color: $gray-900;
}
}
}
@include color-mode(dark) {
details.tree summary::before {
@include details-icon(to-rgb(map-get($theme-colors, "light")));
}
}
details.tree[open]>summary::before {
transform: rotate(90deg);
}
padding-bottom: 0;
}
// summary.active::before {
// @include details-icon(to-rgb($primary));
// }