123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- //
- // Component: Sidebar Mini
- //
- // Logo style
- .logo-xs,
- .logo-xl {
- opacity: 1;
- position: absolute;
- visibility: visible;
- &.brand-image-xs {
- left: 18px;
- top: 12px;
- }
- &.brand-image-xl {
- left: 12px;
- top: 6px;
- }
- }
- .logo-xs {
- opacity: 0;
- visibility: hidden;
- &.brand-image-xl {
- left: 16px;
- top: 8px;
- }
- }
- .brand-link {
- &.logo-switch {
- &::before {
- content: '\00a0';
- }
- }
- }
- // Add sidebar-mini class to the body tag to activate this feature
- .sidebar-mini {
- @include media-breakpoint-up(lg) {
- @include sidebar-mini-breakpoint;
- }
- }
- .sidebar-mini-md {
- @include media-breakpoint-up(md) {
- @include sidebar-mini-breakpoint;
- }
- }
- .sidebar-collapse {
- .sidebar-no-expand.main-sidebar.sidebar-focused,
- .sidebar-no-expand.main-sidebar:hover {
- width: $sidebar-mini-width;
- .brand-link {
- width: $sidebar-mini-width !important;
- }
- .user-panel .image {
- float: none !important;
- }
- .logo-xs {
- opacity: 1;
- visibility: visible;
- }
- .logo-xl {
- opacity: 0;
- visibility: hidden;
- }
- .nav-sidebar.nav-child-indent .nav-treeview {
- padding-left: 0;
- }
- .brand-text,
- .user-panel > .info,
- .nav-sidebar .nav-link p {
- margin-left: -10px;
- opacity: 0;
- visibility: hidden;
- width: 0;
- }
- .nav-sidebar > .nav-item .nav-icon {
- margin-right: 0;
- }
- .nav-flat {
- .nav-icon {
- margin-left: .5rem;
- }
- .nav-treeview {
- .nav-icon {
- margin-left: .3rem;
- }
- }
- }
- }
- }
- .nav-sidebar {
- position: relative;
- &:hover {
- overflow: visible;
- }
- }
- .sidebar-form,
- .nav-sidebar > .nav-header {
- overflow: hidden;
- text-overflow: clip;
- }
- .nav-sidebar .nav-item > .nav-link {
- position: relative;
- > .float-right {
- margin-top: -7px;
- position: absolute;
- right: 10px;
- top: 50%;
- }
- }
- .sidebar .nav-link p,
- .main-sidebar .brand-text,
- .main-sidebar .logo-xs,
- .main-sidebar .logo-xl,
- .sidebar .user-panel .info {
- @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
- }
|