47 lines
1.1 KiB
CSS
47 lines
1.1 KiB
CSS
.navbar {
|
|
height: 100%;
|
|
padding: var(--mantine-spacing-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
@mixin dark {
|
|
background-color: var(--mantine-color-body);
|
|
box-shadow: 0 2px 4px var(--mantine-color-dark-7), 0 4px 24px var(--mantine-color-dark-7);
|
|
}
|
|
@mixin light {
|
|
background-color: #f9f9f9;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 24px rgba(0, 0, 0, .08);
|
|
}
|
|
border-radius: rem(20);
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.navbarMain {
|
|
width: 100%;
|
|
}
|
|
|
|
.link {
|
|
//width: rem(50px);
|
|
width: 100%;
|
|
height: rem(50px);
|
|
border-radius: var(--mantine-radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
|
|
|
|
&:hover {
|
|
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
|
|
}
|
|
|
|
&[data-active] {
|
|
&,
|
|
&:hover {
|
|
background-color: var(--mantine-color-blue-light);
|
|
color: var(--mantine-color-blue-light-color);
|
|
}
|
|
}
|
|
}
|
|
|