maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

replace transition to opacity for sidebar

Browse source
This commit is contained in:
REJack 2020-05-03 13:22:59 +02:00
parent 850dc37d6d
commit d20dd7c13a
13 changed files with 210 additions and 358 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
build/js/Layout.js
View file

@ -173,7 +173,10 @@ const Layout = (($) => {
this.fixLayoutHeight()
})
$('body.hold-transition').removeClass('hold-transition')
setTimeout(() => {
$('body.hold-transition').removeClass('hold-transition')
}, 50);
}
_max(numbers) {

1
build/scss/_layout.scss
View file

@ -627,5 +627,6 @@ body:not(.sidebar-mini-md) {
.control-sidebar *,
.main-footer {
transition: none !important;
animation-duration: 0s !important;
}
}

15
build/scss/_main-sidebar.scss
View file

@ -183,6 +183,9 @@
.nav-link p {
display: inline-block;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
margin: 0;
}
}
@ -818,13 +821,17 @@
.nav-collapse-hide-child {
.menu-open > .nav-treeview {
max-height: min-content;
opacity: 1;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
}
.sidebar-collapse & {
.menu-open > .nav-treeview {
max-height: 0;
opacity: 0;
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
}
}
@ -834,7 +841,9 @@
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
.menu-open > .nav-treeview {
max-height: min-content;
opacity: 1;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
}
}
}

32
build/scss/_sidebar-mini.scss
View file

@ -61,6 +61,26 @@
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.sidebar-collapse {
.main-sidebar.sidebar-focused,
.main-sidebar:hover {
@ -86,12 +106,16 @@
}
.logo-xs {
opacity: 1;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: visible;
}
.logo-xl {
opacity: 0;
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
}
@ -103,7 +127,9 @@
.user-panel > .info,
.nav-sidebar .nav-link p {
margin-left: -10px;
opacity: 0;
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
width: 0;
}

20
build/scss/mixins/_sidebar.scss
View file

@ -54,18 +54,24 @@
.nav-sidebar .nav-link p,
.brand-text {
margin-left: -10px;
opacity: 0;
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
}
.logo-xl {
opacity: 0;
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
}
.logo-xs {
display: inline-block;
opacity: 1;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: visible;
}
@ -108,12 +114,16 @@
.logo-xl {
display: inline-block;
margin-left: 0;
opacity: 1;
animation-name: fadeIn;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: visible;
}
.logo-xs {
opacity: 0;
animation-name: fadeOut;
animation-duration: $transition-speed;
animation-fill-mode: both;
visibility: hidden;
}

156
dist/css/adminlte.css vendored
View file

@ -11540,6 +11540,8 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
.hold-transition .control-sidebar *,
.hold-transition .main-footer {
transition: none !important;
-webkit-animation-duration: 0s !important;
animation-duration: 0s !important;
}
.main-header {
@ -11928,6 +11930,12 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
.nav-sidebar .nav-link p {
display: inline-block;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
margin: 0;
}
@ -12688,12 +12696,22 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
max-height: -webkit-min-content;
max-height: -moz-min-content;
max-height: min-content;
opacity: 1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.sidebar-collapse .nav-collapse-hide-child .menu-open > .nav-treeview {
max-height: 0;
opacity: 0;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-collapse-hide-child .menu-open > .nav-treeview,
@ -12703,7 +12721,12 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
max-height: -webkit-min-content;
max-height: -moz-min-content;
max-height: min-content;
opacity: 1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.nav-compact .nav-link,
@ -12825,16 +12848,31 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
.sidebar-mini.sidebar-collapse .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .brand-text {
margin-left: -10px;
opacity: 0;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.sidebar-mini.sidebar-collapse .logo-xl {
opacity: 0;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.sidebar-mini.sidebar-collapse .logo-xs {
display: inline-block;
opacity: 1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: visible;
}
.sidebar-mini.sidebar-collapse .main-sidebar {
@ -12868,11 +12906,21 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .logo-xl {
display: inline-block;
margin-left: 0;
opacity: 1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: visible;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .logo-xs, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .logo-xs {
opacity: 0;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-image, .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-image {
@ -12929,16 +12977,31 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
.sidebar-mini-md.sidebar-collapse .nav-sidebar .nav-link p,
.sidebar-mini-md.sidebar-collapse .brand-text {
margin-left: -10px;
opacity: 0;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.sidebar-mini-md.sidebar-collapse .logo-xl {
opacity: 0;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.sidebar-mini-md.sidebar-collapse .logo-xs {
display: inline-block;
opacity: 1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: visible;
}
.sidebar-mini-md.sidebar-collapse .main-sidebar {
@ -12972,11 +13035,21 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .logo-xl {
display: inline-block;
margin-left: 0;
opacity: 1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
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;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .brand-image, .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .brand-image {
@ -13008,6 +13081,42 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.sidebar-collapse .main-sidebar.sidebar-focused .nav-header,
.sidebar-collapse .main-sidebar:hover .nav-header {
display: inline-block;
@ -13035,13 +13144,23 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .logo-xs,
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .logo-xs {
opacity: 1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: visible;
}
.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .logo-xl,
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .logo-xl {
opacity: 0;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
@ -13057,7 +13176,12 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .user-panel > .info,
.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-sidebar .nav-link p {
margin-left: -10px;
opacity: 0;
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
width: 0;
}

325
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

4
dist/js/adminlte.js vendored
View file

@ -442,7 +442,9 @@
$(window).resize(function () {
_this.fixLayoutHeight();
});
$('body.hold-transition').removeClass('hold-transition');
setTimeout(function () {
$('body.hold-transition').removeClass('hold-transition');
}, 50);
};
_proto._max = function _max(numbers) {

2
dist/js/adminlte.js.map vendored
View file

File diff suppressed because one or more lines are too long

2
dist/js/adminlte.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/js/adminlte.min.js.map vendored
View file

File diff suppressed because one or more lines are too long