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

Browse Source
pull/2183/head
REJack 5 years ago
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

1
build/scss/_brand.scss
Unescape View File

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

23
build/scss/_layout.scss
Unescape 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 & {
a.anchor {
display: block;
@ -47,18 +54,10 @@ body,
top: calc((#{$main-header-height-inner} + #{$main-header-bottom-border-width} + (#{$main-header-link-padding-y} * 2)) / -1);
}
&.sidebar-collapse {
.main-sidebar:hover {
.brand-link {
height: $main-header-height;
transition: width $transition-speed $transition-fn;
width: $sidebar-mini-width;
}
.main-sidebar:hover {
.brand-link {
transition: width $transition-speed $transition-fn;
width: $sidebar-width;
}
width: $sidebar-width;
}
}
@ -335,6 +334,10 @@ body,
}
.layout-fixed {
.brand-link {
width: $sidebar-width;
}
.main-sidebar {
bottom: 0;
float: none;

4
build/scss/_variables.scss
Unescape View File

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

60
dist/css/adminlte.css vendored
Unescape View File

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