diff --git a/src/index.html b/src/index.html index 8b10e5996..be43298ee 100644 --- a/src/index.html +++ b/src/index.html @@ -31,7 +31,7 @@
-
+

150

@@ -46,7 +46,7 @@
-
+

53%

@@ -61,7 +61,7 @@
-
+

44

@@ -76,7 +76,7 @@
-
+

65

diff --git a/src/index2.html b/src/index2.html index 8c8e52a9f..463f0113f 100644 --- a/src/index2.html +++ b/src/index2.html @@ -30,7 +30,7 @@
- +
CPU Traffic @@ -45,8 +45,8 @@
-
- +
+
Likes @@ -62,8 +62,8 @@
-
- +
+
Sales @@ -75,8 +75,8 @@
-
- +
+
New Members diff --git a/src/pages/widgets.html b/src/pages/widgets.html new file mode 100644 index 000000000..57efb2ba1 --- /dev/null +++ b/src/pages/widgets.html @@ -0,0 +1,419 @@ + + + + + + @@include('./_head.html', { + "path": "../", + "title": "AdminLTE 4 | General Form Elements" + }) + + + +
+ @@include('./dashboard/_topbar.html', { + "path": "../" + }) + + @@include('./dashboard/_sidenav.html', { + "mainPage": "pages", + "page": "widgets", + "path": "../" + }) + +
+ @@include('./dashboard/_content-header.html', { + "header_name": "Widgets" + }) + +
+
+
Info Box
+
+
+
+ + +
+ CPU Traffic + + 10 + % + +
+ +
+ +
+ + +
+
+ + +
+ Sales + 760 +
+ +
+ +
+ + + + + +
+
+ + +
+ New Members + 2,000 +
+ +
+ +
+ + +
+
+ + +
+ Likes + 41,410 +
+ +
+ +
+ +
+ + + +
Info Box With Custom Shadows Using Bootstrap's Shadow Utility
+
+
+
+ + +
+ CPU Traffic + + 10 + % + +
+ +
+ +
+ + +
+
+ + +
+ Sales + 760 +
+ +
+ +
+ + + + + +
+
+ + +
+ New Members + 2,000 +
+ +
+ +
+ + +
+
+ + +
+ Likes + 41,410 +
+ +
+ +
+ +
+ + + +
Info Box With bg-*
+
+
+
+ + +
+ Bookmarks + 41,410 + +
+
+
+ + 70% Increase in 30 Days + +
+ +
+ +
+ +
+
+ + +
+ Likes + 41,410 + +
+
+
+ + 70% Increase in 30 Days + +
+ +
+ +
+ +
+
+ + +
+ Events + 41,410 + +
+
+
+ + 70% Increase in 30 Days + +
+ +
+ +
+ +
+
+ + +
+ Comments + 41,410 + +
+
+
+ + 70% Increase in 30 Days + +
+ +
+ +
+ +
+ + + +
Info Box With bg-gradient
+
+
+
+ + +
+ Bookmarks + 41,410 + +
+
+
+ + 70% Increase in 30 Days + +
+ +
+ +
+ +
+
+ + +
+ Likes + 41,410 + +
+
+
+ + 70% Increase in 30 Days + +
+ +
+ +
+ +
+
+ + +
+ Events + 41,410 + +
+
+
+ + 70% Increase in 30 Days + +
+ +
+ +
+ +
+
+ + +
+ Comments + 41,410 + +
+
+
+ + 70% Increase in 30 Days + +
+ +
+ +
+ +
+ + + + + +
Small Box
+
+
+ +
+
+

150

+ +

New Orders

+
+
+ +
+ More info +
+
+ +
+ +
+
+

53%

+ +

Bounce Rate

+
+
+ +
+ More info +
+
+ +
+ +
+
+

44

+ +

User Registrations

+
+
+ +
+ More info +
+
+ +
+ +
+
+

65

+ +

Unique Visitors

+
+
+ +
+ More info +
+
+ +
+ +
+
+ +
+ + + @@include('./dashboard/_footer.html', { + "path": "../" + }) +
+ + + @@include('./_scripts.html', { + "path": "../" + }) + + diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html index 899a69997..13493773b 100644 --- a/src/partials/dashboard/_sidenav.html +++ b/src/partials/dashboard/_sidenav.html @@ -47,6 +47,15 @@ +
  • + + +

    + Widgets + New +

    +     +
  • diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss new file mode 100644 index 000000000..6a5f515b2 --- /dev/null +++ b/src/scss/_colors.scss @@ -0,0 +1,81 @@ +// +// Misc: Colors +// + +// Background colors (theme colors) +@each $name, $color in $theme-colors { + @include background-variant($name, $color); +} + +// Background colors (colors) +@each $name, $color in $colors { + @include background-variant($name, $color); +} + +.bg-gray { + background-color: $gray-500; + color: color-contrast($gray-500); +} + +.bg-gray-light { + background-color: tint-color($gray-200, 3%); + color: color-contrast(tint-color($gray-200, 3%)) !important; +} + +.bg-black { + background-color: $black; + color: color-contrast($black) !important; +} + +.bg-white { + background-color: $white; + color: color-contrast($white) !important; +} + +// Backgrund Color Disabled +[class^="bg-"].disabled { + opacity: .65; +} + +// Text muted hover +a.text-muted:hover { + color: $primary !important; +} + +// Link Styles +.link-muted { + color: shade-color($gray-500, 30%); + + &:hover, + &:focus { + color: shade-color($gray-500, 40%); + } +} + +.link-black { + color: $gray-600; + + &:hover, + &:focus { + color: tint-color($gray-500, 20%); + } +} + +// // Accent colors (theme colors) +// @each $name, $color in $theme-colors { +// @include accent-variant($name, $color); +// } + +// // Accent colors (colors) +// @each $name, $color in $colors { +// @include accent-variant($name, $color); +// } + +// Accent button override fix +[class*="accent-"] { + @each $name, $color in $theme-colors { + a.btn-#{$name} { + color: color-contrast($color); + } + } +} diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 83edaf07f..5ef7385f8 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -10,4 +10,5 @@ @import "mixins/nav-treeview-dark"; @import "mixins/nav-treeview-light"; @import "mixins/cards"; +@import "mixins/backgrounds"; @import "mixins/miscellaneous"; diff --git a/src/scss/mixins/_backgrounds.scss b/src/scss/mixins/_backgrounds.scss new file mode 100644 index 000000000..2e53ff576 --- /dev/null +++ b/src/scss/mixins/_backgrounds.scss @@ -0,0 +1,31 @@ +// +// Mixins: Backgrounds +// + +// Background Variant +@mixin background-variant($name, $color) { + .bg-#{$name} { + background-color: #{$color} !important; + + &, + > a { + color: color-contrast($color) !important; + } + + &.btn { + &:hover { + border-color: shade-color($color, 10%); + color: shade-color(color-contrast($color), 7.5%); + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + &:active, + &.active { + background-color: shade-color($color, 10%) !important; + border-color: shade-color($color, 12.5%); + color: color-contrast(shade-color($color, 10%)); + } + } + } +} diff --git a/src/scss/parts/_miscellaneous.scss b/src/scss/parts/_miscellaneous.scss index fdf07c624..6f0863c3b 100644 --- a/src/scss/parts/_miscellaneous.scss +++ b/src/scss/parts/_miscellaneous.scss @@ -4,3 +4,4 @@ @import "../miscellaneous"; @import "../text"; +@import "../colors";