jorgemike
90 lines
1.7 KiB
SCSS
90 lines
1.7 KiB
SCSS
.sidebar {
|
|
@extend .py-0;
|
|
@extend .box;
|
|
@extend .m-lg-2;
|
|
|
|
.nav-item {
|
|
@extend .rounded-pill;
|
|
@extend .w-100;
|
|
transition: background-color 0.4s;
|
|
|
|
// Hover por defecto (solo si no tiene clase hover-bg-*)
|
|
&:not([class*="hover-bg-"]):hover,
|
|
&:not([class*="hover-bg-"]).active {
|
|
@extend .bg-primary;
|
|
@extend .bg-opacity-75;
|
|
|
|
.nav-link {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
|
|
.nav-link {
|
|
i {
|
|
@extend .me-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(lg) {
|
|
@extend .py-lg-2;
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
width: clamp(250px, 100%, 300px);
|
|
max-width: 300px;
|
|
transition: width 0.3s ease;
|
|
|
|
.offcanvas-body {
|
|
display: block;
|
|
}
|
|
|
|
&.open {
|
|
.nav-link {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
span {
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.close {
|
|
width: 80px;
|
|
|
|
.nav-item:hover {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: attr(data-tooltip);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 100%;
|
|
transform: translate(10px, -50%);
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
opacity: 0;
|
|
animation: fadeInOut 4s ease-in-out;
|
|
font-style: normal;
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
|
|
.nav-link {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
span {
|
|
transition: opacity 0.3s, visibility 0.3s;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |