sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added icon

This commit is contained in:
Angelillo15 2023-08-04 19:21:53 +02:00
parent 37b9ef5585
commit ae53bd8034
1 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
resources/scripts/assets/css/sidebar.css
View File

@ -46,16 +46,45 @@
}
/* Active/current link */
.sidebar .router-link-active {
.sidebar .active > .icon{
background-color: var(--button-color-active);
color: white;
}
.sidebar > a {
display: flex;
text-align: center;
align-items: center;
}
.icon {
border-radius: 30%;
width: 50px;
height: 50px;
text-align: center;
background-size: 100px;
line-height: 30px;
background-color: var(--button-color);
color: var(--button-color-text);
margin-right: 10px;
}
.sidebar > a > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Links on mouse-over */
.sidebar a:hover:not(.router-link-active) {
.sidebar a:hover:not(.active) > .icon {
background-color: var(--sidebar-button-color-hover);
}
.icon {
transition: all 0.2s ease-in-out;
}
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
margin-left: var(--sidebar-size);