132 lines
2.3 KiB
SCSS
132 lines
2.3 KiB
SCSS
//
|
|
// Nav
|
|
// --------------------------------------------------
|
|
|
|
// Nav Pills
|
|
.nav-pills {
|
|
.nav-link {
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $light;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.show > .nav-link {
|
|
color: $nav-pills-link-active-color;
|
|
background-color: $nav-pills-link-active-bg;
|
|
}
|
|
}
|
|
|
|
// Tabs block variation
|
|
.nav-tabs-block {
|
|
background-color: $body-bg-light;
|
|
border-bottom: none;
|
|
|
|
.nav-link {
|
|
padding-top: .75rem;
|
|
padding-bottom: .75rem;
|
|
border-color: transparent;
|
|
border-radius: 0;
|
|
margin-bottom: 0;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $primary;
|
|
background-color: $light;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: $body-color;
|
|
background-color: $white;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
// Tabs block alternative variation
|
|
.nav-tabs-alt {
|
|
background-color: transparent;
|
|
border-bottom-color: $body-bg-dark;
|
|
|
|
.nav-item {
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.nav-link {
|
|
padding-top: .75rem;
|
|
padding-bottom: .75rem;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: $primary;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 -3px $primary;
|
|
}
|
|
}
|
|
|
|
.nav-link.active,
|
|
.nav-item.show .nav-link {
|
|
color: $body-color;
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: inset 0 -3px $primary;
|
|
}
|
|
}
|
|
|
|
// Various Items Navigation
|
|
.nav-items {
|
|
@include list-unstyled;
|
|
|
|
a {
|
|
&:hover {
|
|
background-color: $body-bg-light;
|
|
}
|
|
|
|
&:active {
|
|
background-color: $light;
|
|
}
|
|
}
|
|
|
|
> li:not(:last-child) > a {
|
|
border-bottom: 1px solid $light;
|
|
}
|
|
}
|
|
|
|
// Sidebar Mini Nav
|
|
.mini-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: $sidebar-mini-nav-width;
|
|
height: $sidebar-mini-nav-width;
|
|
color: darken($body-bg-dark, 15%);
|
|
font-size: 1rem;
|
|
|
|
i {
|
|
transition: transform 0.2s ease-out;
|
|
}
|
|
|
|
&.active {
|
|
background-color: lighten($sidebar-dark-bg, 6%);
|
|
color: $white;
|
|
}
|
|
|
|
&:hover {
|
|
color: $white;
|
|
background-color: lighten($sidebar-dark-bg, 6%);
|
|
}
|
|
|
|
&:active {
|
|
color: darken($body-bg-dark, 15%);
|
|
|
|
i {
|
|
transform: scale(0.9);
|
|
}
|
|
}
|
|
} |