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

+
  • + + +

    Pace

    +     +
  • diff --git a/index2.html b/index2.html index 8d3817113..cbe4d15a0 100644 --- a/index2.html +++ b/index2.html @@ -555,6 +555,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/index3.html b/index3.html index 5b6617fe1..df6f232bf 100644 --- a/index3.html +++ b/index3.html @@ -565,6 +565,12 @@ to get the desired effect

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/UI/buttons.html b/pages/UI/buttons.html index 86b4253ed..09d53e6ed 100644 --- a/pages/UI/buttons.html +++ b/pages/UI/buttons.html @@ -557,6 +557,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/UI/general.html b/pages/UI/general.html index 882d3a45e..311a5444a 100644 --- a/pages/UI/general.html +++ b/pages/UI/general.html @@ -603,6 +603,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/UI/icons.html b/pages/UI/icons.html index 1b64e5237..cc3aceff3 100644 --- a/pages/UI/icons.html +++ b/pages/UI/icons.html @@ -557,6 +557,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/UI/modals.html b/pages/UI/modals.html index ad614acb4..43679f503 100644 --- a/pages/UI/modals.html +++ b/pages/UI/modals.html @@ -561,6 +561,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/UI/navbar.html b/pages/UI/navbar.html index e6b3f9247..37f3f8c8f 100644 --- a/pages/UI/navbar.html +++ b/pages/UI/navbar.html @@ -563,6 +563,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/UI/ribbons.html b/pages/UI/ribbons.html index 94294afce..c6c01a413 100644 --- a/pages/UI/ribbons.html +++ b/pages/UI/ribbons.html @@ -558,6 +558,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/UI/sliders.html b/pages/UI/sliders.html index 31a8af394..ea718177c 100644 --- a/pages/UI/sliders.html +++ b/pages/UI/sliders.html @@ -562,6 +562,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/UI/timeline.html b/pages/UI/timeline.html index 8c0df44a3..883967018 100644 --- a/pages/UI/timeline.html +++ b/pages/UI/timeline.html @@ -556,6 +556,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/calendar.html b/pages/calendar.html index 56e3f515a..6e31930b7 100644 --- a/pages/calendar.html +++ b/pages/calendar.html @@ -563,6 +563,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/charts/chartjs.html b/pages/charts/chartjs.html index 94568961e..3cc6e7d1f 100644 --- a/pages/charts/chartjs.html +++ b/pages/charts/chartjs.html @@ -557,6 +557,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/charts/flot.html b/pages/charts/flot.html index 524969803..53568ddd2 100644 --- a/pages/charts/flot.html +++ b/pages/charts/flot.html @@ -558,6 +558,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/charts/inline.html b/pages/charts/inline.html index a46abe37f..58fcbc47c 100644 --- a/pages/charts/inline.html +++ b/pages/charts/inline.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/404.html b/pages/examples/404.html index 005f41eb0..c4d12222c 100644 --- a/pages/examples/404.html +++ b/pages/examples/404.html @@ -558,6 +558,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/500.html b/pages/examples/500.html index efe50b819..4be9f1504 100644 --- a/pages/examples/500.html +++ b/pages/examples/500.html @@ -558,6 +558,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/blank.html b/pages/examples/blank.html index fd1744363..83eb731f9 100644 --- a/pages/examples/blank.html +++ b/pages/examples/blank.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/contacts.html b/pages/examples/contacts.html index 939b4cf74..dbc510af7 100644 --- a/pages/examples/contacts.html +++ b/pages/examples/contacts.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/e_commerce.html b/pages/examples/e_commerce.html index b3d545b30..6b3c73317 100644 --- a/pages/examples/e_commerce.html +++ b/pages/examples/e_commerce.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/invoice.html b/pages/examples/invoice.html index 8e55708b6..e53be96ae 100644 --- a/pages/examples/invoice.html +++ b/pages/examples/invoice.html @@ -557,6 +557,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/language-menu.html b/pages/examples/language-menu.html index d3dd40d10..1bfff4cbf 100644 --- a/pages/examples/language-menu.html +++ b/pages/examples/language-menu.html @@ -571,6 +571,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/legacy-user-menu.html b/pages/examples/legacy-user-menu.html index 671555450..74045063b 100644 --- a/pages/examples/legacy-user-menu.html +++ b/pages/examples/legacy-user-menu.html @@ -586,6 +586,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/pace.html b/pages/examples/pace.html new file mode 100644 index 000000000..ae1fab47b --- /dev/null +++ b/pages/examples/pace.html @@ -0,0 +1,694 @@ + + + + + + AdminLTE 3 | Pace + + + + + + + + + + + + + + + + +
    + + + + + + + + +
    + +
    +
    +
    +
    +

    Pace

    +
    +
    +
      +
    1. Home
      2. +
    2. Pace
      3. +
    +
    +
    +
    +
    + + +
    + + +
    +
    +

    Title

    + +
    + + +
    +
    +
    + Start creating your amazing application! +
    + +
    + Footer +
    + +
    + + +
    + +
    + + +
    +
    + Version 3.0.0-rc.1 +
    + Copyright © 2014-2019 AdminLTE.io. All rights + reserved. +
    + + + + +
    + + + + + + + + + + + + + + diff --git a/pages/examples/profile.html b/pages/examples/profile.html index 88072112b..010748fea 100644 --- a/pages/examples/profile.html +++ b/pages/examples/profile.html @@ -558,6 +558,12 @@

    Error 500

    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/project_add.html b/pages/examples/project_add.html index 4e5190a56..d662c56ec 100644 --- a/pages/examples/project_add.html +++ b/pages/examples/project_add.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/project_detail.html b/pages/examples/project_detail.html index 7ca8347b8..e6fb3ed84 100644 --- a/pages/examples/project_detail.html +++ b/pages/examples/project_detail.html @@ -560,6 +560,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/project_edit.html b/pages/examples/project_edit.html index 034b19a0a..a912a5ed6 100644 --- a/pages/examples/project_edit.html +++ b/pages/examples/project_edit.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/examples/projects.html b/pages/examples/projects.html index a6fb937d7..43f700ab0 100644 --- a/pages/examples/projects.html +++ b/pages/examples/projects.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/forms/advanced.html b/pages/forms/advanced.html index fdf1a1b63..49f8f748c 100644 --- a/pages/forms/advanced.html +++ b/pages/forms/advanced.html @@ -571,6 +571,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/forms/editors.html b/pages/forms/editors.html index f0facf9d3..14a1ddb85 100644 --- a/pages/forms/editors.html +++ b/pages/forms/editors.html @@ -560,6 +560,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/forms/general.html b/pages/forms/general.html index b3719f855..d37002394 100644 --- a/pages/forms/general.html +++ b/pages/forms/general.html @@ -558,6 +558,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/gallery.html b/pages/gallery.html index 0445057da..d70b3cde8 100644 --- a/pages/gallery.html +++ b/pages/gallery.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/layout/boxed.html b/pages/layout/boxed.html index b87cd57b2..0fb997fcd 100644 --- a/pages/layout/boxed.html +++ b/pages/layout/boxed.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/layout/collapsed-sidebar.html b/pages/layout/collapsed-sidebar.html index e4deaa26e..559525980 100644 --- a/pages/layout/collapsed-sidebar.html +++ b/pages/layout/collapsed-sidebar.html @@ -559,6 +559,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/layout/fixed-footer.html b/pages/layout/fixed-footer.html index 8c4b4578d..10baad479 100644 --- a/pages/layout/fixed-footer.html +++ b/pages/layout/fixed-footer.html @@ -558,6 +558,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/layout/fixed-sidebar.html b/pages/layout/fixed-sidebar.html index 8db4b56f3..8d29eb6a0 100644 --- a/pages/layout/fixed-sidebar.html +++ b/pages/layout/fixed-sidebar.html @@ -560,6 +560,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/layout/fixed-topnav.html b/pages/layout/fixed-topnav.html index 905a2fbbd..7c35a635e 100644 --- a/pages/layout/fixed-topnav.html +++ b/pages/layout/fixed-topnav.html @@ -558,6 +558,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/mailbox/compose.html b/pages/mailbox/compose.html index 58d143890..bfacb7d2e 100644 --- a/pages/mailbox/compose.html +++ b/pages/mailbox/compose.html @@ -552,6 +552,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/mailbox/mailbox.html b/pages/mailbox/mailbox.html index 2ffd9eec7..abe659f8e 100644 --- a/pages/mailbox/mailbox.html +++ b/pages/mailbox/mailbox.html @@ -551,6 +551,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/mailbox/read-mail.html b/pages/mailbox/read-mail.html index a4e28c14b..6f1d590b5 100644 --- a/pages/mailbox/read-mail.html +++ b/pages/mailbox/read-mail.html @@ -550,6 +550,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/tables/data.html b/pages/tables/data.html index bf6a9c77f..26375d458 100644 --- a/pages/tables/data.html +++ b/pages/tables/data.html @@ -560,6 +560,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/tables/jsgrid.html b/pages/tables/jsgrid.html index beddb7606..4fc993bfa 100644 --- a/pages/tables/jsgrid.html +++ b/pages/tables/jsgrid.html @@ -561,6 +561,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/tables/simple.html b/pages/tables/simple.html index ff6be3425..12e55225f 100644 --- a/pages/tables/simple.html +++ b/pages/tables/simple.html @@ -557,6 +557,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +
  • diff --git a/pages/widgets.html b/pages/widgets.html index b9ed93589..59dd10c0e 100644 --- a/pages/widgets.html +++ b/pages/widgets.html @@ -557,6 +557,12 @@

    Error 500
    • +
  • + + +

    Pace

    +     +