mirror of https://github.com/ColorlibHQ/AdminLTE
commit
0194fd468f
|
@ -39,6 +39,7 @@ const Default = {
|
|||
scrollbarAutoHide: 'l',
|
||||
panelAutoHeight: true,
|
||||
panelAutoHeightMode: 'min-height',
|
||||
preloadDuration: 200,
|
||||
loginRegisterAutoHeight: true
|
||||
}
|
||||
|
||||
|
@ -174,13 +175,16 @@ class Layout {
|
|||
setTimeout(() => {
|
||||
$('body.hold-transition').removeClass('hold-transition')
|
||||
}, 50)
|
||||
const $preloader = $(SELECTOR_PRELOADER)
|
||||
if ($preloader) {
|
||||
$preloader.css('height', 0)
|
||||
setTimeout(() => {
|
||||
$preloader.children().hide()
|
||||
}, 200)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
const $preloader = $(SELECTOR_PRELOADER)
|
||||
if ($preloader) {
|
||||
$preloader.css('height', 0)
|
||||
setTimeout(() => {
|
||||
$preloader.children().hide()
|
||||
}, 200)
|
||||
}
|
||||
}, this._config.preloadDuration)
|
||||
}
|
||||
|
||||
_max(numbers) {
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
//
|
||||
// Component: Animation
|
||||
//
|
||||
|
||||
.animation {
|
||||
&__shake {
|
||||
animation: shake 1500ms;
|
||||
}
|
||||
&__wobble {
|
||||
animation: wobble 1500ms;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
|
@ -121,32 +121,6 @@
|
|||
backface-visibility: visible !important;
|
||||
}
|
||||
|
||||
@keyframes flipInX {
|
||||
0% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
transition-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
// Fix dropdown menu in navbars
|
||||
.navbar-custom-menu > .navbar-nav {
|
||||
> li {
|
||||
|
|
|
@ -12,20 +12,6 @@ body,
|
|||
min-height: 100%;
|
||||
}
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $main-bg;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
transition: height 200ms linear;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: $zindex-preloader;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
|
||||
|
@ -662,7 +648,7 @@ body:not(.layout-fixed) {
|
|||
}
|
||||
|
||||
.dark-mode {
|
||||
background-color: lighten($dark, 7.5%) !important;
|
||||
background-color: $dark-main-bg;
|
||||
color: $white;
|
||||
|
||||
.breadcrumb-item {
|
||||
|
@ -683,8 +669,4 @@ body:not(.layout-fixed) {
|
|||
color: $white;
|
||||
}
|
||||
}
|
||||
.preloader {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
// General: Mixins
|
||||
//
|
||||
|
||||
@import "mixins/animations";
|
||||
@import "mixins/cards";
|
||||
@import "mixins/sidebar";
|
||||
@import "mixins/navbar";
|
||||
|
|
|
@ -0,0 +1,24 @@
|
|||
//
|
||||
// Core: Preloader
|
||||
//
|
||||
|
||||
.preloader {
|
||||
display: flex;
|
||||
background-color: $main-bg;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
transition: height 200ms linear;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: $zindex-preloader;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
.preloader {
|
||||
background-color: $dark-main-bg;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
|
@ -67,26 +67,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mini,
|
||||
.sidebar-mini-md,
|
||||
.sidebar-mini-xs {
|
||||
|
|
|
@ -50,6 +50,8 @@ $boxed-layout-max-width: 1250px !default;
|
|||
// Body background (Affects main content background only)
|
||||
$main-bg: #f4f6f9 !default;
|
||||
|
||||
$dark-main-bg: lighten($dark, 7.5%) !important;
|
||||
|
||||
// Content padding
|
||||
$content-padding-y: 0 !default;
|
||||
$content-padding-x: $navbar-padding-x !default;
|
||||
|
|
|
@ -0,0 +1,119 @@
|
|||
//
|
||||
// Mixins: Animation
|
||||
//
|
||||
|
||||
|
||||
@keyframes flipInX {
|
||||
0% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
||||
transition-timing-function: ease-in;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(400px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate(2px, 1px) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(-1px, -2px) rotate(-2deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-3px, 0) rotate(3deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(0, 2px) rotate(0deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(1px, -1px) rotate(1deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-1px, 2px) rotate(-1deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(-3px, 1px) rotate(0deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(2px, 1px) rotate(-2deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(-1px, -1px) rotate(4deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(2px, 2px) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(1px, -2px) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wobble {
|
||||
0% {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
|
@ -2,6 +2,8 @@
|
|||
// Part: Core
|
||||
//
|
||||
|
||||
@import "../animation-effects";
|
||||
@import "../preloader";
|
||||
@import "../layout";
|
||||
@import "../main-header";
|
||||
@import "../brand";
|
||||
|
|
|
@ -30,8 +30,8 @@
|
|||
<div class="wrapper">
|
||||
|
||||
<!-- Preloader -->
|
||||
<div class="preloader">
|
||||
<img src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
|
||||
<div class="preloader flex-column justify-content-center align-items-center">
|
||||
<img class="animation__shake" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
|
||||
</div>
|
||||
|
||||
<!-- Navbar -->
|
||||
|
|
10
index2.html
10
index2.html
|
@ -14,10 +14,16 @@
|
|||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="dist/css/adminlte.min.css">
|
||||
</head>
|
||||
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
|
||||
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
|
||||
<div class="wrapper">
|
||||
|
||||
<!-- Preloader -->
|
||||
<div class="preloader flex-column justify-content-center align-items-center">
|
||||
<img class="animation__wobble" src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
|
||||
</div>
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
|
||||
<nav class="main-header navbar navbar-expand navbar-dark">
|
||||
<!-- Left navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
|
|
Loading…
Reference in New Issue