github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

added option to use two different logo images in sidebar (small & large) #2159

pull/2153/head
REJack 2019-07-12 13:19:20 +02:00
parent 0e3049751e
commit dd08a3911a
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
6 changed files with 168 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
build/scss/_brand.scss
View File

@ -36,3 +36,21 @@
max-height: 34px; max-height: 34px;
width: auto; width: auto;
} }
.brand-image-xs {
float: left;
line-height: .8;
margin-left: .8rem;
margin-right: .5rem;
margin-top: -3px;
max-height: 34px;
width: auto;
}
.brand-image-xl {
line-height: .8;
margin-bottom: -10px;
margin-top: -14px;
max-height: 40px;
width: auto;
}

58
build/scss/_sidebar-mini.scss
View File

@ -44,6 +44,17 @@
visibility: hidden; visibility: hidden;
} }
.logo-xl {
opacity: 0;
visibility: hidden;
}
.logo-xs {
display: inline-block;
opacity: 1;
visibility: visible;
}
// Modify the sidebar to shrink instead of disappearing // Modify the sidebar to shrink instead of disappearing
.main-sidebar { .main-sidebar {
overflow-x: hidden; overflow-x: hidden;
@ -75,13 +86,19 @@
.user-panel > .info, .user-panel > .info,
.nav-sidebar .nav-link p, .nav-sidebar .nav-link p,
.brand-text { .brand-text,
.logo-xl {
display: inline-block; display: inline-block;
margin-left: 0; margin-left: 0;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.logo-xs {
opacity: 0;
visibility: hidden;
}
.brand-image { .brand-image {
margin-right: .5rem; margin-right: .5rem;
} }
@ -108,6 +125,43 @@
} }
// Logo style
.logo-xs,
.logo-xl {
margin: 0;
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 // Add sidebar-mini class to the body tag to activate this feature
.sidebar-mini { .sidebar-mini {
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@ -148,6 +202,8 @@
.sidebar .nav-link p, .sidebar .nav-link p,
.main-sidebar .brand-text, .main-sidebar .brand-text,
.main-sidebar .logo-xs,
.main-sidebar .logo-xl,
.sidebar .user-panel .info { .sidebar .user-panel .info {
@include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease) @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
} }

94
dist/css/adminlte.css vendored
View File

@ -10610,6 +10610,24 @@ body,
width: auto; width: auto;
} }
.brand-image-xs {
float: left;
line-height: .8;
margin-left: .8rem;
margin-right: .5rem;
margin-top: -3px;
max-height: 34px;
width: auto;
}
.brand-image-xl {
line-height: .8;
margin-bottom: -10px;
margin-top: -14px;
max-height: 40px;
width: auto;
}
/** /**
* Component: Main Sidebar * Component: Main Sidebar
* ----------------------- * -----------------------
@ -11950,6 +11968,40 @@ body,
* Component: Sidebar Mini * Component: Sidebar Mini
* ----------------------- * -----------------------
*/ */
.logo-xs,
.logo-xl {
margin: 0;
opacity: 1;
position: absolute;
visibility: visible;
}
.logo-xs.brand-image-xs,
.logo-xl.brand-image-xs {
left: 18px;
top: 12px;
}
.logo-xs.brand-image-xl,
.logo-xl.brand-image-xl {
left: 12px;
top: 6px;
}
.logo-xs {
opacity: 0;
visibility: hidden;
}
.logo-xs.brand-image-xl {
left: 16px;
top: 8px;
}
.brand-link.logo-switch::before {
content: '\00a0';
}
@media (min-width: 992px) { @media (min-width: 992px) {
.sidebar-mini .nav-sidebar, .sidebar-mini .nav-sidebar,
.sidebar-mini .nav-sidebar > .nav-header, .sidebar-mini .nav-sidebar > .nav-header,
@ -11978,6 +12030,15 @@ body,
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
.sidebar-mini.sidebar-collapse .logo-xl {
opacity: 0;
visibility: hidden;
}
.sidebar-mini.sidebar-collapse .logo-xs {
display: inline-block;
opacity: 1;
visibility: visible;
}
.sidebar-mini.sidebar-collapse .main-sidebar { .sidebar-mini.sidebar-collapse .main-sidebar {
overflow-x: hidden; overflow-x: hidden;
} }
@ -11999,14 +12060,20 @@ body,
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info, .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel > .info,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p, .sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info, .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar:hover .logo-xl, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-text { .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-text,
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .logo-xl {
display: inline-block; display: inline-block;
margin-left: 0; margin-left: 0;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.sidebar-mini.sidebar-collapse .main-sidebar:hover .logo-xs, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .logo-xs {
opacity: 0;
visibility: hidden;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-image, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-image { .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-image, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-image {
margin-right: .5rem; margin-right: .5rem;
} }
@ -12052,6 +12119,15 @@ body,
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
.sidebar-mini-md.sidebar-collapse .logo-xl {
opacity: 0;
visibility: hidden;
}
.sidebar-mini-md.sidebar-collapse .logo-xs {
display: inline-block;
opacity: 1;
visibility: visible;
}
.sidebar-mini-md.sidebar-collapse .main-sidebar { .sidebar-mini-md.sidebar-collapse .main-sidebar {
overflow-x: hidden; overflow-x: hidden;
} }
@ -12073,14 +12149,20 @@ body,
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel > .info, .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .user-panel > .info,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p, .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link p,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-text, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info, .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-text,
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .logo-xl, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .user-panel > .info,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link p,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .brand-text { .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .brand-text,
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .logo-xl {
display: inline-block; display: inline-block;
margin-left: 0; margin-left: 0;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .logo-xs, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .logo-xs {
opacity: 0;
visibility: hidden;
}
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-image, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .brand-image { .sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-image, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .brand-image {
margin-right: .5rem; margin-right: .5rem;
} }
@ -12125,6 +12207,8 @@ body,
.sidebar .nav-link p, .sidebar .nav-link p,
.main-sidebar .brand-text, .main-sidebar .brand-text,
.main-sidebar .logo-xs,
.main-sidebar .logo-xl,
.sidebar .user-panel .info { .sidebar .user-panel .info {
transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease; transition: margin-left 0.3s linear, opacity 0.3s ease, visibility 0.3s ease;
} }
@ -12132,6 +12216,8 @@ body,
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.sidebar .nav-link p, .sidebar .nav-link p,
.main-sidebar .brand-text, .main-sidebar .brand-text,
.main-sidebar .logo-xs,
.main-sidebar .logo-xl,
.sidebar .user-panel .info { .sidebar .user-panel .info {
transition: none; transition: none;
} }

2
dist/css/adminlte.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/adminlte.min.css.map vendored
View File

File diff suppressed because one or more lines are too long