diff --git a/src/app/core/scss/core.scss b/src/app/core/scss/core.scss
index 9585f2d0..b0f47128 100644
--- a/src/app/core/scss/core.scss
+++ b/src/app/core/scss/core.scss
@@ -18,7 +18,7 @@
// Partials
@import "partials/reset";
@import "partials/normalize";
-@import "partials/spacing";
+@import "partials/helpers";
@import "partials/global";
@import "partials/icons";
@import "partials/colors";
diff --git a/src/app/core/scss/partials/_colors.scss b/src/app/core/scss/partials/_colors.scss
index 8cb42eed..3734ef51 100644
--- a/src/app/core/scss/partials/_colors.scss
+++ b/src/app/core/scss/partials/_colors.scss
@@ -1,5 +1,8 @@
// Material colors map
$matColorsMap: (
+ primary: $primary,
+ accent: $accent,
+ warn: $warn,
red: $mat-red,
pink: $mat-pink,
purple: $mat-purple,
@@ -20,92 +23,111 @@ $matColorsMap: (
grey: $mat-grey,
blue-grey: $mat-blue-grey,
white: $mat-white,
- black: $mat-black,
- primary: $primary,
- accent: $accent,
- warn: $warn
+ black: $mat-black
);
// Material color hues list
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
+// Text color levels generator mixin
+@mixin generateTextColorLevels($baseTextColor) {
+
+ // If the base text color is black...
+ @if (rgba(black, 1) == rgba($baseTextColor, 1)) {
+
+ &.secondary-text,
+ .secondary-text,
+ &.mat-icon,
+ .mat-icon,
+ &.icon,
+ .icon {
+ color: rgba(0, 0, 0, 0.54) !important;
+ }
+
+ &.hint-text,
+ .hint-text,
+ &.disabled-text,
+ .disabled-text {
+ color: rgba(0, 0, 0, 0.38) !important;
+ }
+
+ &.divider,
+ .divider {
+ color: rgba(0, 0, 0, 0.12) !important;
+ }
+
+ }
+ // If the base text color is white...
+ @else {
+
+ &.mat-icon,
+ .mat-icon,
+ &.icon,
+ .icon {
+ color: rgba(255, 255, 255, 1) !important;
+ }
+
+ &.secondary-text,
+ .secondary-text {
+ color: rgba(255, 255, 255, 0.70) !important;
+ }
+
+ &.hint-text,
+ .hint-text,
+ &.disabled-text,
+ .disabled-text {
+ color: rgba(255, 255, 255, 0.50) !important;
+ }
+
+ &.divider,
+ .divider {
+ color: rgba(255, 255, 255, 0.12) !important;
+ }
+ }
+}
+
// Color classes generator mixin
-@mixin generateColorClasses($colorName, $bgColor, $fgColor, $hue) {
+@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
.#{$colorName}#{$hue}-bg {
- background-color: $bgColor !important;
+ background-color: $color !important;
}
.md-#{$colorName}#{$hue}-bg {
- background-color: $bgColor !important;
- color: $fgColor !important;
+ background-color: $color !important;
+ color: $contrastColor !important;
- @if (rgba(black, 1) == rgba($fgColor, 1)) {
-
- &.secondary-text,
- .secondary-text,
- &.mat-icon,
- .mat-icon,
- &.icon,
- .icon {
- color: rgba(0, 0, 0, 0.54) !important;
- }
-
- &.hint-text,
- .hint-text,
- &.disabled-text,
- .disabled-text {
- color: rgba(0, 0, 0, 0.38) !important;
- }
-
- &.divider,
- .divider {
- color: rgba(0, 0, 0, 0.12) !important;
- }
-
- } @else {
-
- &.secondary-text,
- .secondary-text {
- color: rgba(255, 255, 255, 0.70) !important;
- }
-
- &.hint-text,
- .hint-text,
- &.disabled-text,
- .disabled-text {
- color: rgba(255, 255, 255, 0.50) !important;
- }
-
- &.divider,
- .divider {
- color: rgba(255, 255, 255, 0.12) !important;
- }
- }
+ // Generate text color levels
+ // based on current contrast color
+ @include generateTextColorLevels($contrastColor);
}
.#{$colorName}#{$hue}-fg {
- color: $bgColor !important;
+ color: $color !important;
+
+ // Generate text color levels
+ // based on current color
+ @include generateTextColorLevels($color);
}
.#{$colorName}#{$hue}-border {
- border-color: $bgColor !important;
+ border-color: $color !important;
}
.#{$colorName}#{$hue}-border-top {
- border-top-color: $bgColor !important;
+ border-top-color: $color !important;
}
.#{$colorName}#{$hue}-border-right {
- border-right-color: $bgColor !important;
+ border-right-color: $color !important;
}
.#{$colorName}#{$hue}-border-bottom {
- border-bottom-color: $bgColor !important;
+ border-bottom-color: $color !important;
}
.#{$colorName}#{$hue}-border-left {
- border-left-color: $bgColor !important;
+ border-left-color: $color !important;
}
}
@@ -114,16 +136,16 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
@each $hue in $matColorHues {
- $bgColor: map-get($colorMap, $hue);
- $fgColor: map-get(map-get($colorMap, 'contrast'), $hue);
+ $color: map-get($colorMap, $hue);
+ $contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
- @if ($bgColor != null and $fgColor != null) {
+ @if ($color != null and $contrastColor != null) {
- @include generateColorClasses($colorName, $bgColor, $fgColor, '-#{$hue}');
+ @include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
// Run the generator one more time for default values (500)
@if ($hue == 500) {
- @include generateColorClasses($colorName, $bgColor, $fgColor, '');
+ @include generateColorClasses($colorName, $color, $contrastColor, '');
}
}
}
diff --git a/src/app/core/scss/partials/_spacing.scss b/src/app/core/scss/partials/_helpers.scss
similarity index 69%
rename from src/app/core/scss/partials/_spacing.scss
rename to src/app/core/scss/partials/_helpers.scss
index 6da1c3ef..f4c12ed2 100644
--- a/src/app/core/scss/partials/_spacing.scss
+++ b/src/app/core/scss/partials/_helpers.scss
@@ -1,28 +1,54 @@
-// Margin and Padding
+// ######################
+// SIZE HELPERS
+// ######################
+@each $prop, $abbrev in (height: h, width: w) {
+
+ @for $index from 0 through 128 {
+ $size: $index * 4;
+ $length: #{$size}px;
+
+ .#{$abbrev}-#{$size} {
+ #{$prop}: $length !important;
+ min-#{$prop}: $length !important;
+ max-#{$prop}: $length !important;
+ }
+ }
+}
+
+// ######################
+// SPACING HELPERS
+// ######################
@each $prop, $abbrev in (margin: m, padding: p) {
@for $index from 0 through 64 {
- $size: $index *4;
+ $size: $index * 4;
$length: #{$size}px;
+
.#{$abbrev}-#{$size} {
#{$prop}: $length !important;
}
+
.#{$abbrev}t-#{$size} {
#{$prop}-top: $length !important;
}
+
.#{$abbrev}r-#{$size} {
#{$prop}-right: $length !important;
}
+
.#{$abbrev}b-#{$size} {
#{$prop}-bottom: $length !important;
}
+
.#{$abbrev}l-#{$size} {
#{$prop}-left: $length !important;
}
+
.#{$abbrev}x-#{$size} {
#{$prop}-right: $length !important;
#{$prop}-left: $length !important;
}
+
.#{$abbrev}y-#{$size} {
#{$prop}-top: $length !important;
#{$prop}-bottom: $length !important;
@@ -30,7 +56,7 @@
}
}
-// Some special margin utils
+// Some special margin utils for flex alignments
.m-auto {
margin: auto !important;
}
diff --git a/src/app/core/scss/partials/plugins/_ngx-datatable.scss b/src/app/core/scss/partials/plugins/_ngx-datatable.scss
new file mode 100644
index 00000000..f219fcad
--- /dev/null
+++ b/src/app/core/scss/partials/plugins/_ngx-datatable.scss
@@ -0,0 +1,63 @@
+.ngx-datatable {
+
+ &.material {
+ @include mat-elevation(4);
+
+ .empty-row {
+ display: flex;
+ align-items: center;
+ line-height: 1;
+ height: 56px;
+ padding: 0 24px;
+ }
+
+ .datatable-header {
+
+ .datatable-header-cell {
+ display: inline-flex;
+ align-items: center;
+ line-height: 1;
+ min-height: 48px;
+ padding: 0 24px;
+ font-size: 13px;
+ }
+ }
+
+ .datatable-body {
+
+ .datatable-row-left,
+ .datatable-row-center,
+ .datatable-row-right {
+ min-height: 48px;
+ }
+
+ .datatable-row-wrapper {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+ .datatable-body-cell {
+ display: inline-flex;
+ align-items: center;
+ line-height: 1;
+ min-height: 48px;
+ padding: 0 24px;
+ }
+ }
+ }
+
+ .datatable-footer {
+ border: none;
+
+ .datatable-footer-inner {
+ padding: 0 24px;
+
+ .page-count {
+ padding: 0;
+ }
+
+ .datatable-pager {
+ margin: 0 0 0 24px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/core/scss/partials/plugins/_plugins.scss b/src/app/core/scss/partials/plugins/_plugins.scss
index 5ebdd9d0..ff43a35a 100644
--- a/src/app/core/scss/partials/plugins/_plugins.scss
+++ b/src/app/core/scss/partials/plugins/_plugins.scss
@@ -1 +1,2 @@
-@import "perfect-scrollbar";
\ No newline at end of file
+@import "perfect-scrollbar";
+@import "ngx-datatable";
\ No newline at end of file
diff --git a/src/app/core/services/layout.service.ts b/src/app/core/services/layout.service.ts
index 69d74a02..12730195 100644
--- a/src/app/core/services/layout.service.ts
+++ b/src/app/core/services/layout.service.ts
@@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
-import { ActivatedRoute, ActivatedRouteSnapshot, NavigationStart, Router, NavigationEnd, Route, RouterState } from '@angular/router';
+import { NavigationStart, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import 'rxjs/add/operator/filter';
@@ -20,7 +20,7 @@ export class FuseLayoutService
// Set the default settings
this.defaultSettings = {
navigation: 'left', // 'right', 'left', 'top', none
- toolbar : 'none', // 'above', 'below', none
+ toolbar : 'below', // 'above', 'below', none
footer : 'none' // 'above', 'below', none
};
diff --git a/src/app/main/components/datatable/ngx-datatable.component.html b/src/app/main/components/datatable/ngx-datatable.component.html
index 9ba4178f..0d4b207c 100644
--- a/src/app/main/components/datatable/ngx-datatable.component.html
+++ b/src/app/main/components/datatable/ngx-datatable.component.html
@@ -1,12 +1,44 @@
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+