116 lines
1.8 KiB
SCSS
116 lines
1.8 KiB
SCSS
|
.menutree {
|
||
|
|
/*
|
||
|
|
padding: 5px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
margin-right: -1px;
|
||
|
|
width: 100%;
|
||
|
|
*/
|
||
|
|
ul {
|
||
|
|
margin:0;
|
||
|
|
padding-left:0.5rem;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
> ul {
|
||
|
|
padding:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
li {
|
||
|
|
|
||
|
|
//padding: 20px 10px;
|
||
|
|
&:last-child {
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover,
|
||
|
|
&.active > a{
|
||
|
|
background:var(--bs-primary-bg-subtle);
|
||
|
|
background:rgba(var(--bs-primary-rgb), 0.05);
|
||
|
|
//outline:1px solid var(--bs-primary-bg-subtle);
|
||
|
|
//border-right:1px solid var(--bs-primary);
|
||
|
|
//color :$primary;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.active > label > a {
|
||
|
|
//border-right:1px solid var(--bs-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.expand {
|
||
|
|
ul {
|
||
|
|
visibility: hidden;
|
||
|
|
opacity: 0;
|
||
|
|
max-height: 0;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
/* Show when checked */
|
||
|
|
&:checked {
|
||
|
|
& ~ ul {
|
||
|
|
visibility: visible;
|
||
|
|
opacity: 1;
|
||
|
|
max-height: none;
|
||
|
|
}
|
||
|
|
& ~ label {
|
||
|
|
&::after {
|
||
|
|
transform: none;
|
||
|
|
line-height:3;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
//border-bottom:2px solid var(--bs-border-color);
|
||
|
|
//background:var(--bs-border-color);
|
||
|
|
//color :$primary;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
text-decoration: none;
|
||
|
|
color: var(--bs-body-color);
|
||
|
|
padding: 0.4rem 0.7rem;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
input[type=checkbox] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
label {
|
||
|
|
&::after {
|
||
|
|
content: "\2304";
|
||
|
|
font-size: 150%;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 1rem;
|
||
|
|
height:100%;
|
||
|
|
//line-height:1.2;
|
||
|
|
transition: all 0.5s;
|
||
|
|
transform: rotate(-90deg);
|
||
|
|
/* Icon font enhancement */
|
||
|
|
line-height:3;
|
||
|
|
content: "\f107";
|
||
|
|
font-family:"Line Awesome Free";
|
||
|
|
font-weight:900;
|
||
|
|
font-size:80%;
|
||
|
|
opacity:0.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
label {
|
||
|
|
&::after {
|
||
|
|
opacity:1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|