@igo2/core 1.11.0 → 1.12.1

package/style/material.font.scss

@@ -1,10 +1,10 @@
-button.mat-menu-item {
-  line-height: 24px !important;
-}
-a.mat-menu-item > mat-icon {
-  margin-bottom: 14px;
-}
-.mat-icon svg {
-  height: 24px;
-  width: 24px;
+button.mat-menu-item {
+  line-height: 24px !important;
+}
+a.mat-menu-item > mat-icon {
+  margin-bottom: 14px;
+}
+.mat-icon svg {
+  height: 24px;
+  width: 24px;
 }

package/style/partial/core.variables.scss

@@ -1,5 +1,5 @@
-$igo-margin: 5px;
-$igo-padding: 5px;
-$igo-icon-size: 40px;
-
+$igo-margin: 5px;
+$igo-padding: 5px;
+$igo-icon-size: 40px;
+
 $app-background-color: rgb(255, 255, 255);

package/style/partial/media.scss

@@ -1,80 +1,80 @@
-$mobile-portrait: 'only screen and (orientation:portrait) and (max-width: 599px)';
-$tablet-portrait: 'only screen and (orientation:portrait) and (min-width: 600px) and (max-width: 839px)';
-$desktop-portrait: 'only screen and (orientation:portrait) and (min-width: 840px)';
-
-$mobile-landscape: 'only screen and (orientation:landscape) and (max-width: 959px)';
-$tablet-landscape: 'only screen and (orientation:landscape) and (min-width: 960px) and (max-width: 1279px)';
-$desktop-landscape: 'only screen and (orientation:landscape) and (min-width: 1280px)';
-
-$mobile: $mobile-portrait + ',' + $mobile-landscape;
-$tablet: $tablet-portrait + ',' + $tablet-landscape;
-$desktop: $desktop-portrait + ',' + $desktop-landscape;
-
-$portrait: 'only screen and (orientation:portrait)';
-$landscape: 'only screen and (orientation:landscape)';
-
-$xsmall-screen: 'only screen and (max-width: 599px)';
-$small-screen: 'only screen and (min-width: 600px) and (max-width: 959px)';
-$medium-screen: 'only screen and (min-width: 960px) and (max-width: 1280px)';
-$large-screen: 'only screen and (min-width: 1280px) and (max-width: 1919px)';
-$xlarge-screen: 'only screen and (min-width: 1920px)';
-
-@mixin mobile {
-  @media #{$mobile} {
-    @content;
-  }
-}
-
-@mixin tablet {
-  @media #{$tablet} {
-    @content;
-  }
-}
-
-@mixin desktop {
-  @media #{$desktop} {
-    @content;
-  }
-}
-
-@mixin portrait {
-  @media #{$portrait} {
-    @content;
-  }
-}
-
-@mixin landscape {
-  @media #{$landscape} {
-    @content;
-  }
-}
-
-@mixin xsmall-screen {
-  @media #{$xsmall-screen} {
-    @content;
-  }
-}
-
-@mixin small-screen {
-  @media #{$small-screen} {
-    @content;
-  }
-}
-
-@mixin medium-screen {
-  @media #{$medium-screen} {
-    @content;
-  }
-}
-
-@mixin large-screen {
-  @media #{$large-screen} {
-    @content;
-  }
-}
-
-@mixin xlarge-screen {
-  @media #{$xlarge-screen} {
-    @content;
-  }
-}
+$mobile-portrait: 'only screen and (orientation:portrait) and (max-width: 599px)';
+$tablet-portrait: 'only screen and (orientation:portrait) and (min-width: 600px) and (max-width: 839px)';
+$desktop-portrait: 'only screen and (orientation:portrait) and (min-width: 840px)';
+
+$mobile-landscape: 'only screen and (orientation:landscape) and (max-width: 959px)';
+$tablet-landscape: 'only screen and (orientation:landscape) and (min-width: 960px) and (max-width: 1279px)';
+$desktop-landscape: 'only screen and (orientation:landscape) and (min-width: 1280px)';
+
+$mobile: $mobile-portrait + ',' + $mobile-landscape;
+$tablet: $tablet-portrait + ',' + $tablet-landscape;
+$desktop: $desktop-portrait + ',' + $desktop-landscape;
+
+$portrait: 'only screen and (orientation:portrait)';
+$landscape: 'only screen and (orientation:landscape)';
+
+$xsmall-screen: 'only screen and (max-width: 599px)';
+$small-screen: 'only screen and (min-width: 600px) and (max-width: 959px)';
+$medium-screen: 'only screen and (min-width: 960px) and (max-width: 1280px)';
+$large-screen: 'only screen and (min-width: 1280px) and (max-width: 1919px)';
+$xlarge-screen: 'only screen and (min-width: 1920px)';
+
+@mixin mobile {
+  @media #{$mobile} {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media #{$tablet} {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media #{$desktop} {
+    @content;
+  }
+}
+
+@mixin portrait {
+  @media #{$portrait} {
+    @content;
+  }
+}
+
+@mixin landscape {
+  @media #{$landscape} {
+    @content;
+  }
+}
+
+@mixin xsmall-screen {
+  @media #{$xsmall-screen} {
+    @content;
+  }
+}
+
+@mixin small-screen {
+  @media #{$small-screen} {
+    @content;
+  }
+}
+
+@mixin medium-screen {
+  @media #{$medium-screen} {
+    @content;
+  }
+}
+
+@mixin large-screen {
+  @media #{$large-screen} {
+    @content;
+  }
+}
+
+@mixin xlarge-screen {
+  @media #{$xlarge-screen} {
+    @content;
+  }
+}

package/style/themes/blue.theme.scss

@@ -1,19 +1,19 @@
-.blue-theme {
-    $primary: mat.define-palette(mat.$blue-palette, 700, 400, 900);
-    $accent: mat.define-palette(mat.$blue-palette, 200);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $temp-theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    $foreground: theme-foreground(mat.define-palette(mat.$grey-palette, 900));
-    $theme: map-merge($temp-theme, (foreground: $foreground));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+.blue-theme {
+    $primary: mat.define-palette(mat.$blue-palette, 700, 400, 900);
+    $accent: mat.define-palette(mat.$blue-palette, 200);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $temp-theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    $foreground: theme-foreground(mat.define-palette(mat.$grey-palette, 900));
+    $theme: map-merge($temp-theme, (foreground: $foreground));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}

package/style/themes/bluedq.theme.scss

@@ -1,52 +1,52 @@
-.bluedq-theme {
-    $dq-palette: (
-        50 : #e3eaec,
-        100 : #b9cad0,
-        200 : #8ba7b1,
-        300 : #5c8391,
-        400 : #39697a,
-        500 : #164e62,
-        600 : #13475a,
-        700 : #103d50,
-        800 : #0c3546,
-        900 : #062534,
-        A100 : #6dc6ff,
-        A200 : #3ab2ff,
-        A400 : #079eff,
-        A700 : #0090ec,
-        contrast: (
-            50 : #000000,
-            100 : #000000,
-            200 : #000000,
-            300 : #ffffff,
-            400 : #ffffff,
-            500 : #ffffff,
-            600 : #ffffff,
-            700 : #ffffff,
-            800 : #ffffff,
-            900 : #ffffff,
-            A100 : #000000,
-            A200 : #000000,
-            A400 : #ffffff,
-            A700 : #ffffff,
-        )
-    );
-
-    $primary: mat.define-palette($dq-palette, 500);
-    $accent: mat.define-palette($dq-palette, 200);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $temp-theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    $foreground: theme-foreground(mat.define-palette(mat.$grey-palette, 900));
-    $theme: map-merge($temp-theme, (foreground: $foreground));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+.bluedq-theme {
+    $dq-palette: (
+        50 : #e3eaec,
+        100 : #b9cad0,
+        200 : #8ba7b1,
+        300 : #5c8391,
+        400 : #39697a,
+        500 : #164e62,
+        600 : #13475a,
+        700 : #103d50,
+        800 : #0c3546,
+        900 : #062534,
+        A100 : #6dc6ff,
+        A200 : #3ab2ff,
+        A400 : #079eff,
+        A700 : #0090ec,
+        contrast: (
+            50 : #000000,
+            100 : #000000,
+            200 : #000000,
+            300 : #ffffff,
+            400 : #ffffff,
+            500 : #ffffff,
+            600 : #ffffff,
+            700 : #ffffff,
+            800 : #ffffff,
+            900 : #ffffff,
+            A100 : #000000,
+            A200 : #000000,
+            A400 : #ffffff,
+            A700 : #ffffff,
+        )
+    );
+
+    $primary: mat.define-palette($dq-palette, 500);
+    $accent: mat.define-palette($dq-palette, 200);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $temp-theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    $foreground: theme-foreground(mat.define-palette(mat.$grey-palette, 900));
+    $theme: map-merge($temp-theme, (foreground: $foreground));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}

package/style/themes/bluegrey.theme.scss

@@ -1,16 +1,16 @@
-.bluegrey-theme {
-    $primary: mat.define-palette(mat.$blue-grey-palette);
-    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-    $warn: mat.define-palette(mat.$deep-orange-palette);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+.bluegrey-theme {
+    $primary: mat.define-palette(mat.$blue-grey-palette);
+    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+    $warn: mat.define-palette(mat.$deep-orange-palette);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}

package/style/themes/dark.theme.scss

@@ -1,16 +1,16 @@
-.dark-theme {
-    $primary: mat.define-palette(mat.$blue-grey-palette);
-    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-    $warn: mat.define-palette(mat.$deep-orange-palette);
-
-    $theme: mat.define-dark-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+.dark-theme {
+    $primary: mat.define-palette(mat.$blue-grey-palette);
+    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+    $warn: mat.define-palette(mat.$deep-orange-palette);
+
+    $theme: mat.define-dark-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}

package/style/themes/deeppurple.theme.scss

@@ -1,16 +1,16 @@
-.deeppurple-theme {
-    $primary: mat.define-palette(mat.$deep-purple-palette);
-    $accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+.deeppurple-theme {
+    $primary: mat.define-palette(mat.$deep-purple-palette);
+    $accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}

package/style/themes/indigo.theme.scss

@@ -1,16 +1,16 @@
-.indigo-theme {
-    $primary: mat.define-palette(mat.$indigo-palette);
-    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+.indigo-theme {
+    $primary: mat.define-palette(mat.$indigo-palette);
+    $accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}

package/style/themes/orange.theme.scss

@@ -1,16 +1,16 @@
-.orange-theme {
-    $primary: mat.define-palette(mat.$orange-palette, 800);
-    $accent: mat.define-palette(mat.$light-blue-palette, 600, 100, 800);
-    $warn: mat.define-palette(mat.$red-palette, 600);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+.orange-theme {
+    $primary: mat.define-palette(mat.$orange-palette, 800);
+    $accent: mat.define-palette(mat.$light-blue-palette, 600, 100, 800);
+    $warn: mat.define-palette(mat.$red-palette, 600);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}

package/style/themes/qcca.theme.scss

@@ -0,0 +1,98 @@
+.qcca-theme {
+    $qcca-palette: (
+        50: #f2f1f1,
+        100: #dae6f0, //lighter ex: list on focus
+        200: #dae6f0,
+        300: #509FDF,
+        400: #0D7DD9,
+        500: #095797, //default
+        600: #0A60A6,
+        700: #223654, // darker 
+        800: #cb381f,
+        900: #4f813d,
+        A100: #1479cc,
+        A200: #1479cc,
+        A400: #dae6f0,
+        A700: #f2f1f1,
+        contrast: (
+           50: #223654,
+           100: #223654,
+           200: #223654,
+           300: #fff,
+           400: #fff,
+           500: #fff,
+           600: #fff,
+           700: #fff,
+           800: #fff,
+           900: #fff,
+           A100: #fff,
+           A200: #fff,
+           A400: #223654,
+           A700: #223654,
+        )
+       );
+
+    $primary: mat.define-palette($qcca-palette, 500, 400, 700);
+    $accent: mat.define-palette($qcca-palette, 400, 100, 700);
+    $warn: mat.define-palette($qcca-palette, 800);
+    $success: mat.define-palette($qcca-palette, 900);
+    $background: mat.define-palette($qcca-palette, 100, 100, 100);
+    $foreground: mat.define-palette($qcca-palette, 700, 700, 700);
+
+    $temp-theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn,
+            success: $success,
+            background: $background
+        )
+    ));
+
+    $theme-foreground: (
+        base:              #223654,
+        divider:           #f2f1f1,
+        dividers:          #f2f1f1,
+        disabled:          #f2f1f1,
+        disabled-button:   #f2f1f1,
+        disabled-text:     #f2f1f1,
+        hint-text:         #f2f1f1,
+        secondary-text:    #f2f1f1,
+        icon:              #f2f1f1,
+        icons:             #f2f1f1,
+        text:              #223654,
+        slider-min:        #f2f1f1,
+        slider-off:        #f2f1f1,
+        slider-off-active: #f2f1f1,
+      );
+
+    $foreground: theme-foreground(mat.define-palette($qcca-palette, 500, 100, 700));
+    $theme: map-merge($temp-theme, (foreground: $foreground));
+
+    @include mat.core($theme);
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+    @include mat.strong-focus-indicators-theme($theme);
+}
+
+//@import '~@angular/material/theming';
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+//@include mat-core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+//@include angular-material-theme($theme);
+
+/* For the non-Angular Material items */
+body {
+    color: #223654;
+}

package/style/themes/teal.theme.scss

@@ -1,16 +1,16 @@
-.teal-theme {
-    $primary: mat.define-palette(mat.$teal-palette, 600, 400, 900);
-    $accent: mat.define-palette(mat.$teal-palette, 400);
-    $warn: mat.define-palette(mat.$red-palette);
-
-    $theme: mat.define-light-theme((
-        color: (
-            primary: $primary,
-            accent: $accent,
-            warn: $warn
-        )
-    ));
-
-    @include igo-all-theming($theme);
-    @include mat.all-component-colors($theme);
-}
+.teal-theme {
+    $primary: mat.define-palette(mat.$teal-palette, 600, 400, 900);
+    $accent: mat.define-palette(mat.$teal-palette, 400);
+    $warn: mat.define-palette(mat.$red-palette);
+
+    $theme: mat.define-light-theme((
+        color: (
+            primary: $primary,
+            accent: $accent,
+            warn: $warn
+        )
+    ));
+
+    @include igo-all-theming($theme);
+    @include mat.all-component-colors($theme);
+}

package/style/theming.scss

@@ -1,7 +1,7 @@
-@import './material.font';
-
-@mixin igo-theming($theme, $typography) {
-  @include mat.core($typography);
-
-  @include igo-core-theming($theme, $typography);
-}
+@import './material.font';
+
+@mixin igo-theming($theme, $typography) {
+  @include mat.core($typography);
+
+  @include igo-core-theming($theme, $typography);
+}