From f93b3fea4d6c829ae0abb3b124590d0262d69769 Mon Sep 17 00:00:00 2001 From: REJack Date: Tue, 3 Sep 2019 11:43:54 +0200 Subject: [PATCH 01/66] fixed inputmask markup --- pages/forms/advanced.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/forms/advanced.html b/pages/forms/advanced.html index 6ec60c697..fdf1a1b63 100644 --- a/pages/forms/advanced.html +++ b/pages/forms/advanced.html @@ -778,7 +778,7 @@
- + @@ -790,7 +790,7 @@
- + @@ -1120,8 +1120,8 @@ - + From b2139077f5bf8a749f8d42871650f74ac93e64d9 Mon Sep 17 00:00:00 2001 From: REJack Date: Tue, 3 Sep 2019 12:06:13 +0200 Subject: [PATCH 02/66] removed breakpoint from control-sidebar --- build/scss/_control-sidebar.scss | 31 ++++++++++--------------------- 1 file changed, 10 insertions(+), 21 deletions(-) diff --git a/build/scss/_control-sidebar.scss b/build/scss/_control-sidebar.scss index e38cc36b7..94c2ec031 100644 --- a/build/scss/_control-sidebar.scss +++ b/build/scss/_control-sidebar.scss @@ -39,31 +39,20 @@ html.control-sidebar-animate { // Control sidebar open state .control-sidebar-open { - @include media-breakpoint-up(md) { - .control-sidebar { - display: block; + .control-sidebar { + display: block; - &, - &::before { - right: 0; - } - } - - &.control-sidebar-push, - &.control-sidebar-push-slide { - .content-wrapper, - .main-footer { - margin-right: $control-sidebar-width; - } + &, + &::before { + right: 0; } } - @include media-breakpoint-down(md) { - .control-sidebar { - &, - &::before { - right: 0; - } + &.control-sidebar-push, + &.control-sidebar-push-slide { + .content-wrapper, + .main-footer { + margin-right: $control-sidebar-width; } } } From 0a1338086a16d078e4d734e6444a550b798ebffc Mon Sep 17 00:00:00 2001 From: REJack Date: Tue, 3 Sep 2019 12:36:55 +0200 Subject: [PATCH 03/66] fixed content-height calculation --- build/js/Layout.js | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/build/js/Layout.js b/build/js/Layout.js index eced4ff1e..09e4ced4b 100644 --- a/build/js/Layout.js +++ b/build/js/Layout.js @@ -65,18 +65,18 @@ const Layout = (($) => { fixLayoutHeight() { const heights = { - window : $(window).height(), - header : $(Selector.HEADER).outerHeight(), - footer : $(Selector.FOOTER).outerHeight(), - sidebar : $(Selector.SIDEBAR).height(), + window: $(window).height(), + header: $(Selector.HEADER).length !== 0 ? $(Selector.HEADER).outerHeight() : 0, + footer: $(Selector.FOOTER).length !== 0 ? $(Selector.FOOTER).outerHeight() : 0, + sidebar: $(Selector.SIDEBAR).length !== 0 ? $(Selector.SIDEBAR).height() : 0, } const max = this._max(heights) - + console.log(heights); + $(Selector.CONTENT).css('min-height', max - heights.footer) + if ($('body').hasClass(ClassName.LAYOUT_FIXED)) { - $(Selector.CONTENT).css('min-height', max - heights.header - heights.footer) - // $(Selector.SIDEBAR).css('min-height', max - heights.header) if (typeof $.fn.overlayScrollbars !== 'undefined') { $(Selector.SIDEBAR).overlayScrollbars({ @@ -88,12 +88,6 @@ const Layout = (($) => { } }) } - } else { - if (heights.window > heights.sidebar) { - $(Selector.CONTENT).css('min-height', heights.window - heights.header - heights.footer) - } else { - $(Selector.CONTENT).css('min-height', heights.sidebar - heights.header) - } } } From cac5828617abe431020b373937706271daf639d5 Mon Sep 17 00:00:00 2001 From: REJack Date: Tue, 3 Sep 2019 12:37:24 +0200 Subject: [PATCH 04/66] fixed input-group with rounded-0 on login/register --- build/scss/pages/_login_and_register.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/build/scss/pages/_login_and_register.scss b/build/scss/pages/_login_and_register.scss index 4dfe897c7..5039cec91 100644 --- a/build/scss/pages/_login_and_register.scss +++ b/build/scss/pages/_login_and_register.scss @@ -72,9 +72,9 @@ .input-group-text { background-color: transparent; - border-bottom-right-radius: $border-radius !important; + border-bottom-right-radius: $border-radius; border-left: 0; - border-top-right-radius: $border-radius !important; + border-top-right-radius: $border-radius; color: #777; transition: $input-transition; } From a99c9b7959ccaa4741f4bf4ce49aaf96a1970c22 Mon Sep 17 00:00:00 2001 From: REJack Date: Thu, 5 Sep 2019 08:15:35 +0200 Subject: [PATCH 05/66] fixed sidebar state remember to work in both ways --- build/js/Layout.js | 3 --- build/js/PushMenu.js | 13 +++++++++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/build/js/Layout.js b/build/js/Layout.js index 09e4ced4b..bfd67c051 100644 --- a/build/js/Layout.js +++ b/build/js/Layout.js @@ -94,9 +94,6 @@ const Layout = (($) => { // Private _init() { - // Enable transitions - $('body').removeClass(ClassName.HOLD) - // Activate layout height watcher this.fixLayoutHeight() $(Selector.SIDEBAR) diff --git a/build/js/PushMenu.js b/build/js/PushMenu.js index ceb1c1ea3..6f2b15ce0 100644 --- a/build/js/PushMenu.js +++ b/build/js/PushMenu.js @@ -120,12 +120,21 @@ const PushMenu = (($) => { var toggleState = localStorage.getItem(`remember${EVENT_KEY}`); if (toggleState == ClassName.COLLAPSED){ if (this._options.noTransitionAfterReload) { - $("body").addClass('hold-transition').addClass(ClassName.COLLAPSED).delay(10).queue(function() { + $("body").addClass('hold-transition').addClass(ClassName.COLLAPSED).delay(50).queue(function() { + $(this).removeClass('hold-transition'); + $(this).dequeue() + }); + } else { + $("body").addClass(ClassName.COLLAPSED); + } + } else { + if (this._options.noTransitionAfterReload) { + $("body").addClass('hold-transition').removeClass(ClassName.COLLAPSED).delay(50).queue(function() { $(this).removeClass('hold-transition'); $(this).dequeue() }); } else { - $("body").addClass(ClassName.COLLAPSED); + $("body").removeClass(ClassName.COLLAPSED); } } } From aebfe08b33ffd45d49674b726f745cf9ad7c74cf Mon Sep 17 00:00:00 2001 From: REJack Date: Fri, 6 Sep 2019 10:22:22 +0200 Subject: [PATCH 06/66] fixed background color for brand-link with navbar-* --- build/scss/_layout.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/build/scss/_layout.scss b/build/scss/_layout.scss index 6b27b4e90..7aa6e2d71 100644 --- a/build/scss/_layout.scss +++ b/build/scss/_layout.scss @@ -78,11 +78,11 @@ body, // Sidebar variants brand-link fix @each $name, $color in $theme-colors { - .sidebar-dark-#{$name} .brand-link { + .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) { background-color: $sidebar-dark-bg; } - .sidebar-light-#{$name} .brand-link { + .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) { background-color: $sidebar-light-bg; } } @@ -165,11 +165,11 @@ body, // Sidebar variants brand-link fix @each $name, $color in $theme-colors { - .sidebar-dark-#{$name} .brand-link { + .sidebar-dark-#{$name} .brand-link:not([class*="navbar"]) { background-color: $sidebar-dark-bg; } - .sidebar-light-#{$name} .brand-link { + .sidebar-light-#{$name} .brand-link:not([class*="navbar"]) { background-color: $sidebar-light-bg; } } From 4453262bb0cf0ff7486212824d43e44c4079a9ed Mon Sep 17 00:00:00 2001 From: REJack Date: Mon, 9 Sep 2019 14:19:35 +0200 Subject: [PATCH 07/66] added pace demo & pace override - created pages/examples/pace.html - created build/scss/plugins/_pace.scss with color overrides - created docs/components/plugins.md with plugin overrides & extra styles - updated docs sidebar menu - updated demo sidebar menu with pace demo link --- build/scss/AdminLTE.scss | 1 + build/scss/plugins/_pace.scss | 211 ++++++++ docs/_config.yml | 2 + docs/components/plugins.md | 86 ++++ index.html | 6 + index2.html | 6 + index3.html | 6 + pages/UI/buttons.html | 6 + pages/UI/general.html | 6 + pages/UI/icons.html | 6 + pages/UI/modals.html | 6 + pages/UI/navbar.html | 6 + pages/UI/ribbons.html | 6 + pages/UI/sliders.html | 6 + pages/UI/timeline.html | 6 + pages/calendar.html | 6 + pages/charts/chartjs.html | 6 + pages/charts/flot.html | 6 + pages/charts/inline.html | 6 + pages/examples/404.html | 6 + pages/examples/500.html | 6 + pages/examples/blank.html | 6 + pages/examples/contacts.html | 6 + pages/examples/e_commerce.html | 6 + pages/examples/invoice.html | 6 + pages/examples/language-menu.html | 6 + pages/examples/legacy-user-menu.html | 6 + pages/examples/pace.html | 694 +++++++++++++++++++++++++++ pages/examples/profile.html | 6 + pages/examples/project_add.html | 6 + pages/examples/project_detail.html | 6 + pages/examples/project_edit.html | 6 + pages/examples/projects.html | 6 + pages/forms/advanced.html | 6 + pages/forms/editors.html | 6 + pages/forms/general.html | 6 + pages/gallery.html | 6 + pages/layout/boxed.html | 6 + pages/layout/collapsed-sidebar.html | 6 + pages/layout/fixed-footer.html | 6 + pages/layout/fixed-sidebar.html | 6 + pages/layout/fixed-topnav.html | 6 + pages/mailbox/compose.html | 6 + pages/mailbox/mailbox.html | 6 + pages/mailbox/read-mail.html | 6 + pages/tables/data.html | 6 + pages/tables/jsgrid.html | 6 + pages/tables/simple.html | 6 + pages/widgets.html | 6 + 49 files changed, 1258 insertions(+) create mode 100644 build/scss/plugins/_pace.scss create mode 100644 docs/components/plugins.md create mode 100644 pages/examples/pace.html diff --git a/build/scss/AdminLTE.scss b/build/scss/AdminLTE.scss index 8a4c766f1..c15a5f901 100644 --- a/build/scss/AdminLTE.scss +++ b/build/scss/AdminLTE.scss @@ -66,6 +66,7 @@ @import 'plugins/jqvmap'; @import 'plugins/sweetalert2'; @import 'plugins/toastr'; +@import 'plugins/pace'; @import 'plugins/miscellaneous'; // Miscellaneous diff --git a/build/scss/plugins/_pace.scss b/build/scss/plugins/_pace.scss new file mode 100644 index 000000000..6cd2cdc51 --- /dev/null +++ b/build/scss/plugins/_pace.scss @@ -0,0 +1,211 @@ +// +// Plugin: Pace +// + +.pace { + z-index: $zindex-main-sidebar + 10; + + .pace-progress { + z-index: $zindex-main-sidebar + 11; + } + + .pace-activity { + z-index: $zindex-main-sidebar + 12; + } +} + +// Mixin +@mixin pace-variant($name, $color) { + .pace-#{$name} { + .pace { + .pace-progress { + background: $color; + } + } + } + + .pace-barber-shop-#{$name} { + .pace { + background: color-yiq($color); + + .pace-progress { + background: $color; + } + + .pace-activity { + background-image: linear-gradient(45deg, rgba(color-yiq($color), 0.2) 25%, transparent 25%, transparent 50%, rgba(color-yiq($color), 0.2) 50%, rgba(color-yiq($color), 0.2) 75%, transparent 75%, transparent); + } + } + } + + .pace-big-counter-#{$name} { + .pace { + .pace-progress::after { + color: rgba($color, .19999999999999996); + } + } + } + + .pace-bounce-#{$name} { + .pace { + .pace-activity { + background: $color; + } + } + } + + .pace-center-atom-#{$name} { + .pace-progress { + height: 100px; + width: 80px; + + &::before { + background: $color; + color: color-yiq($color); + font-size: .8rem; + line-height: .7rem; + padding-top: 17%; + } + } + + .pace-activity { + border-color: $color; + + &::after, + &::before { + border-color: $color; + } + } + } + + .pace-center-circle-#{$name} { + .pace { + .pace-progress { + background: rgba($color, .8); + color: color-yiq($color); + } + } + } + + .pace-center-radar-#{$name} { + .pace { + .pace-activity { + border-color: $color transparent transparent; + } + + .pace-activity::before { + border-color: $color transparent transparent; + } + } + } + + .pace-center-simple-#{$name} { + .pace { + background: color-yiq($color); + border-color: $color; + + .pace-progress { + background: $color; + } + } + } + + .pace-material-#{$name} { + .pace { + color: $color; + } + } + + .pace-corner-indicator-#{$name} { + .pace { + .pace-activity { + background: $color; + } + + .pace-activity::after, + .pace-activity::before { + border: 5px solid color-yiq($color); + } + + + .pace-activity::before { + border-right-color: rgba($color, .2); + border-left-color: rgba($color, .2); + } + + .pace-activity::after { + border-top-color: rgba($color, .2); + border-bottom-color: rgba($color, .2); + } + } + } + + .pace-fill-left-#{$name} { + .pace { + .pace-progress { + background-color: rgba($color, 0.19999999999999996); + } + } + } + + .pace-flash-#{$name} { + .pace { + .pace-progress { + background: $color; + } + + .pace-progress-inner { + box-shadow: 0 0 10px $color, 0 0 5px $color; + } + + .pace-activity { + border-top-color: $color; + border-left-color: $color; + } + } + } + + .pace-loading-bar-#{$name} { + .pace { + .pace-progress { + background: $color; + color: $color; + box-shadow: 120px 0 color-yiq($color), 240px 0 color-yiq($color); + } + + .pace-activity { + box-shadow: inset 0 0 0 2px $color, inset 0 0 0 7px color-yiq($color); + } + } + } + + .pace-mac-osx-#{$name} { + .pace { + .pace-progress { + background-color: $color; + box-shadow: inset -1px 0 $color, inset 0 -1px $color, inset 0 2px rgba(color-yiq($color), 0.5), inset 0 6px rgba(color-yiq($color), .3); + } + + .pace-activity { + background-image: radial-gradient(rgba(color-yiq($color), .65) 0%, rgba(color-yiq($color), .15) 100%); + height: 12px; + } + } + } + + .pace-progress-color-#{$name} { + .pace-progress { + color: $color; + } + } +} + + +@each $name, $color in $theme-colors { + @include pace-variant($name, $color); +} + +@each $name, $color in $colors { + @include pace-variant($name, $color); +} + diff --git a/docs/_config.yml b/docs/_config.yml index 731828151..6285ba0d1 100755 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -56,6 +56,8 @@ navigation: url: components/timeline.html - title: Ribbons url: components/ribbons.html + - title: Plugins + url: components/plugins.html - title: JavaScript icon: fas fa-code url: javascript diff --git a/docs/components/plugins.md b/docs/components/plugins.md new file mode 100644 index 000000000..11eee3746 --- /dev/null +++ b/docs/components/plugins.md @@ -0,0 +1,86 @@ +--- +layout: page +title: Plugins +--- +AdminLTE comes with color overrides & extras for the following plugins. + +### Bootstrap Slider +You can override the color for bootstrap slider tracks with the following classes: +- `.slider-*` + +Example: +```html +
+ +
+``` + +You can also change the layout of the slider with the following classes: + +- `.slider-vertical` +- `.slider-horizontal` + +Example: +```html +
+ +
+``` + + +### iCheck Bootstrap +You can override the color of a iCheck checkbox/radio input, add the following class: +- `.icheck-*` + +Example: +```html +
+ + +
+``` + + +### Pace +You can override the color for all pace themes, load your desired theme and add one the following classes to `body`: + +- `.pace-*` + - barber-shop + - flat-top + - minimal +- `.pace-big-counter-*` + - big-counter +- `.pace-bounce-*` + - bounce +- `pace-center-atom-*` + - center-atom +- `pace-center-circle-*` + - center-circle +- `pace-center-radar-*` + - center-radar +- `pace-center-simple-*` + - center-simple +- `pace-corner-indicator-*` + - corner-indicator +- `.pace-flash-*` + - flash +- `.pace-fill-left-*` + - fill-left +- `.pace-loading-bar-*` + - loading-bar +- `.pace-material-*` + - material +- `.pace-mac-osx-*` + - mac-osx + +Example: `` + + +### SweetAlert +If you use SweetAlert and load the SweetAlert CSS before AdminLTE's CSS, then the colors of any icon changes to AdminLTE's default colors. + + +### Toastr +If you use Toastr and load the Toastr CSS before AdminLTE's CSS, then the background colors changes to AdminLTE's default colors. diff --git a/index.html b/index.html index 27cf32b99..873b57172 100644 --- a/index.html +++ b/index.html @@ -568,6 +568,12 @@

Error 500

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +