replace transition to opacity for sidebar
This commit is contained in:
REJack
156
dist/css/adminlte.css
vendored
156
dist/css/adminlte.css
vendored
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user