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

fixed zindex's to avoid overlapping & fixed brand-link transitions while switching between collapsed & open

pull/2183/head
REJack 2019-07-15 15:46:45 +02:00
parent 127188bb2c
commit 02c398e707
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
7 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build/scss/_brand.scss
View File

@ -9,6 +9,7 @@
font-size: $navbar-brand-font-size; font-size: $navbar-brand-font-size;
line-height: $line-height-lg; line-height: $line-height-lg;
padding: $brand-link-padding-y $sidebar-padding-x; padding: $brand-link-padding-y $sidebar-padding-x;
transition: width $transition-speed $transition-fn;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {

19
build/scss/_layout.scss
View File

@ -40,6 +40,13 @@ body,
} }
} }
.layout-navbar-fixed.sidebar-collapse & {
.brand-link {
height: $main-header-height;
width: $sidebar-mini-width;
}
}
.layout-navbar-fixed & { .layout-navbar-fixed & {
a.anchor { a.anchor {
display: block; display: block;
@ -47,20 +54,12 @@ body,
top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1); top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
} }
&.sidebar-collapse {
.brand-link {
height: $main-header-height;
transition: width $transition-speed $transition-fn;
width: $sidebar-mini-width;
}
.main-sidebar:hover { .main-sidebar:hover {
.brand-link { .brand-link {
transition: width $transition-speed $transition-fn; transition: width $transition-speed $transition-fn;
width: $sidebar-width; width: $sidebar-width;
} }
} }
}
.brand-link { .brand-link {
overflow: hidden; overflow: hidden;
@ -335,6 +334,10 @@ body,
} }
.layout-fixed { .layout-fixed {
.brand-link {
width: $sidebar-width;
}
.main-sidebar { .main-sidebar {
bottom: 0; bottom: 0;
float: none; float: none;

4
build/scss/_variables.scss
View File

@ -144,8 +144,8 @@ $attachment-border-radius: 3px !default;
// Z-INDEX // Z-INDEX
// -------------------------------------------------------- // --------------------------------------------------------
$zindex-main-header: 900 !default; $zindex-main-header: $zindex-fixed + 2 !default;
$zindex-main-sidebar: 950 !default; $zindex-main-sidebar: $zindex-fixed + 6 !default;
$zindex-sidebar-mini-links: 010 !default; $zindex-sidebar-mini-links: 010 !default;
// TRANSITIONS SETTINGS // TRANSITIONS SETTINGS

60
dist/css/adminlte.css vendored
View File

@ -10171,19 +10171,18 @@ body,
margin-top: calc(3.5rem + 1px); margin-top: calc(3.5rem + 1px);
} }
.layout-navbar-fixed.sidebar-collapse .wrapper .brand-link {
height: calc(3.5rem + 1px);
width: 4.6rem;
}
.layout-navbar-fixed .wrapper a.anchor { .layout-navbar-fixed .wrapper a.anchor {
display: block; display: block;
position: relative; position: relative;
top: calc((3.5rem + 1px + (0.5rem * 2)) / -1); top: calc((3.5rem + 1px + (0.5rem * 2)) / -1);
} }
.layout-navbar-fixed .wrapper.sidebar-collapse .brand-link { .layout-navbar-fixed .wrapper .main-sidebar:hover .brand-link {
height: calc(3.5rem + 1px);
transition: width 0.3s ease-in-out;
width: 4.6rem;
}
.layout-navbar-fixed .wrapper.sidebar-collapse .main-sidebar:hover .brand-link {
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
width: 250px; width: 250px;
} }
@ -10194,7 +10193,7 @@ body,
top: 0; top: 0;
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
width: 250px; width: 250px;
z-index: 951; z-index: 1037;
} }
.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link { .layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link {
@ -10270,7 +10269,7 @@ body,
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 949; z-index: 1035;
} }
.layout-navbar-not-fixed .wrapper .brand-link { .layout-navbar-not-fixed .wrapper .brand-link {
@ -10313,7 +10312,7 @@ body,
top: 0; top: 0;
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
width: 250px; width: 250px;
z-index: 951; z-index: 1037;
} }
.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link { .layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link {
@ -10389,7 +10388,7 @@ body,
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 949; z-index: 1035;
} }
.layout-navbar-not-fixed .wrapper .brand-link { .layout-navbar-not-fixed .wrapper .brand-link {
@ -10429,7 +10428,7 @@ body,
top: 0; top: 0;
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
width: 250px; width: 250px;
z-index: 951; z-index: 1037;
} }
.layout-sm-navbar-fixed .wrapper .sidebar-dark-primary .brand-link { .layout-sm-navbar-fixed .wrapper .sidebar-dark-primary .brand-link {
background-color: #343a40; background-color: #343a40;
@ -10487,7 +10486,7 @@ body,
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 949; z-index: 1035;
} }
.layout-sm-navbar-not-fixed .wrapper .brand-link { .layout-sm-navbar-not-fixed .wrapper .brand-link {
position: static; position: static;
@ -10525,7 +10524,7 @@ body,
top: 0; top: 0;
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
width: 250px; width: 250px;
z-index: 951; z-index: 1037;
} }
.layout-md-navbar-fixed .wrapper .sidebar-dark-primary .brand-link { .layout-md-navbar-fixed .wrapper .sidebar-dark-primary .brand-link {
background-color: #343a40; background-color: #343a40;
@ -10583,7 +10582,7 @@ body,
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 949; z-index: 1035;
} }
.layout-md-navbar-not-fixed .wrapper .brand-link { .layout-md-navbar-not-fixed .wrapper .brand-link {
position: static; position: static;
@ -10621,7 +10620,7 @@ body,
top: 0; top: 0;
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
width: 250px; width: 250px;
z-index: 951; z-index: 1037;
} }
.layout-lg-navbar-fixed .wrapper .sidebar-dark-primary .brand-link { .layout-lg-navbar-fixed .wrapper .sidebar-dark-primary .brand-link {
background-color: #343a40; background-color: #343a40;
@ -10679,7 +10678,7 @@ body,
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 949; z-index: 1035;
} }
.layout-lg-navbar-not-fixed .wrapper .brand-link { .layout-lg-navbar-not-fixed .wrapper .brand-link {
position: static; position: static;
@ -10717,7 +10716,7 @@ body,
top: 0; top: 0;
transition: width 0.3s ease-in-out; transition: width 0.3s ease-in-out;
width: 250px; width: 250px;
z-index: 951; z-index: 1037;
} }
.layout-xl-navbar-fixed .wrapper .sidebar-dark-primary .brand-link { .layout-xl-navbar-fixed .wrapper .sidebar-dark-primary .brand-link {
background-color: #343a40; background-color: #343a40;
@ -10775,7 +10774,7 @@ body,
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 949; z-index: 1035;
} }
.layout-xl-navbar-not-fixed .wrapper .brand-link { .layout-xl-navbar-not-fixed .wrapper .brand-link {
position: static; position: static;
@ -10794,7 +10793,7 @@ body,
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 949; z-index: 1035;
} }
.layout-footer-not-fixed .wrapper .main-footer { .layout-footer-not-fixed .wrapper .main-footer {
@ -10810,7 +10809,7 @@ body,
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 949; z-index: 1035;
} }
.layout-footer-fixed .wrapper .content-wrapper { .layout-footer-fixed .wrapper .content-wrapper {
@ -10827,7 +10826,7 @@ body,
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 949; z-index: 1035;
} }
.layout-sm-footer-fixed .wrapper .content-wrapper { .layout-sm-footer-fixed .wrapper .content-wrapper {
margin-bottom: calc(3.5rem + 1px); margin-bottom: calc(3.5rem + 1px);
@ -10843,7 +10842,7 @@ body,
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 949; z-index: 1035;
} }
.layout-md-footer-fixed .wrapper .content-wrapper { .layout-md-footer-fixed .wrapper .content-wrapper {
margin-bottom: calc(3.5rem + 1px); margin-bottom: calc(3.5rem + 1px);
@ -10859,7 +10858,7 @@ body,
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 949; z-index: 1035;
} }
.layout-lg-footer-fixed .wrapper .content-wrapper { .layout-lg-footer-fixed .wrapper .content-wrapper {
margin-bottom: calc(3.5rem + 1px); margin-bottom: calc(3.5rem + 1px);
@ -10875,7 +10874,7 @@ body,
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
z-index: 949; z-index: 1035;
} }
.layout-xl-footer-fixed .wrapper .content-wrapper { .layout-xl-footer-fixed .wrapper .content-wrapper {
margin-bottom: calc(3.5rem + 1px); margin-bottom: calc(3.5rem + 1px);
@ -10984,6 +10983,10 @@ body,
top: 0; top: 0;
} }
.layout-fixed .brand-link {
width: 250px;
}
.layout-fixed .main-sidebar { .layout-fixed .main-sidebar {
bottom: 0; bottom: 0;
float: none; float: none;
@ -11028,7 +11031,7 @@ body,
*/ */
.main-header { .main-header {
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
z-index: 900; z-index: 1032;
} }
.main-header .nav-link { .main-header .nav-link {
@ -11194,6 +11197,7 @@ body,
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.5; line-height: 1.5;
padding: 0.8125rem 0.5rem; padding: 0.8125rem 0.5rem;
transition: width 0.3s ease-in-out;
white-space: nowrap; white-space: nowrap;
} }
@ -11247,7 +11251,7 @@ body,
.main-sidebar { .main-sidebar {
height: 100vh; height: 100vh;
overflow-y: hidden; overflow-y: hidden;
z-index: 950; z-index: 1036;
} }
.sidebar { .sidebar {
@ -11387,7 +11391,7 @@ body,
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 949; z-index: 1035;
} }
@media (max-width: 991.98px) { @media (max-width: 991.98px) {

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