@sumaris-net/ngx-components 2.11.0 → 2.11.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sumaris-net/ngx-components",
   "description": "SUMARiS Angular components",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "author": "contact@e-is.pro",
   "license": "AGPL-3.0",
   "readmeFilename": "README.md",

package/src/assets/manifest.json

@@ -2,7 +2,7 @@
   "name": "ngx-sumaris-components",
   "short_name": "ngx-sumaris-components",
   "manifest_version": 1,
-  "version": "2.11.0",
+  "version": "2.11.1",
   "default_locale": "fr",
   "description": "Angular components for building beautiful and responsive Apps",
   "icons": [{

package/src/theme/_ionic.globals.scss

@@ -59,13 +59,15 @@ $background-color-rgb-value: 255, 255, 255;
 $ion-toolbar-background: whitesmoke !default;
 
 // Text color
+$text-color-value: rgba(black, 0.87);
+$text-color-rgb-value: 0,0,0;
+
 $dark-primary-text: rgba(black, 0.87);
 $dark-secondary-text: rgba(black, 0.54);
 $dark-disabled-text: rgba(black, 0.38);
 $light-primary-text: white;
 $light-secondary-text: rgba(white, 0.7);
 $light-disabled-text: rgba(white, 0.5);
-$text-color: $dark-primary-text;
 
 // Default General Colors
 // --------------------------------------------------

package/src/theme/_material.globals.scss

@@ -47,7 +47,7 @@ $candy-app-accent: mat.define-palette($mat-indigo-app, A200, A100, A400);
 // The warn palette is optional (defaults to red).
 $candy-app-warn: mat.define-palette(mat.$red-palette);
 // Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: mat.define-light-theme((
+$candy-light-theme: mat.define-light-theme((
   color: (
     primary: $candy-app-primary,
     accent: $candy-app-accent,
@@ -55,7 +55,6 @@ $candy-app-theme: mat.define-light-theme((
   ),
   typography: mat.define-typography-config(),
   density: 0,
-
 ));
 
 // --------------------------------------------------

package/src/theme/_material.scss

@@ -1,10 +1,11 @@
 @use '@angular/material' as mat;
 
 // --------------------------------------------------
-// Standard metrial style
+// Standard material style
 // --------------------------------------------------
 @include mat.core();
-@include mat.all-component-themes($candy-app-theme);
+@include mat.all-component-themes($candy-light-theme);
+
 
 // --------------------------------------------------
 // Override material style
@@ -112,27 +113,6 @@
   }
 }
 
-// Date picker
-@media (orientation: landscape) {
-  .mat-datepicker-content-touch {
-    height: unset !important;
-    min-height: 80vh;
-
-    .mat-calendar-controls {
-      margin-top: 0;
-    }
-    .mat-datepicker-content-container {
-      &.mat-datepicker-content-container-with-actions {
-        height: unset !important;
-      }
-     .mat-datepicker-actions {
-       background-color: white;
-       margin-top: -12px;
-     }
-  }
-}
-
-}
 
 .mat-option, .mat-mdc-option {
   padding-top: var(--padding-top, 0) !important;

package/src/theme/_mixins.scss

@@ -102,6 +102,8 @@
     @include generate-color-list($color-name);
   }
 
+  --ion-text-color: #{$text-color};
+  --ion-text-color-rgb: #{$text-color-rgb};
   --ion-grid-column-padding: #{$ion-grid-column-padding};
   --ion-padding: #{$ion-padding};
   --ion-margin: #{$ion-margin};
@@ -109,6 +111,9 @@
   --ion-background-color-rgb: #{$background-color-rgb};
   --ion-toolbar-height: #{$ion-toolbar-height};
   --ion-toolbar-background: #{$ion-toolbar-background};
+  --ion-backdrop-color: #000000;
+  --ion-backdrop-color-rgb: 0, 0, 0;
+  --ion-backdrop-opacity: 0.32;
 
   --expansion-panel-padding: var(--ion-padding);
   --expansion-panel-header-padding: var(--ion-padding);
@@ -138,6 +143,26 @@
   --app-form-field-disabled-label-color: #{$app-form-field-disabled-label-color};
   --app-table-row-item-selected-background-color: #{$app-table-row-item-selected-background-color};
   --app-table-row-item-selected-text-color: #{$app-table-row-item-selected-text-color};
+
+  --ion-color-step-50: #{$background-color-step-50};
+  --ion-color-step-100: #{$background-color-step-100};
+  --ion-color-step-150: #{$background-color-step-150};
+  --ion-color-step-200: #{$background-color-step-200};
+  --ion-color-step-250: #{$background-color-step-250};
+  --ion-color-step-300: #{$background-color-step-200};
+  --ion-color-step-350: #{$background-color-step-350};
+  --ion-color-step-400: #{$background-color-step-400};
+  --ion-color-step-450: #{$background-color-step-450};
+  --ion-color-step-500: #{$background-color-step-500};
+  --ion-color-step-550: #{$background-color-step-550};
+  --ion-color-step-600: #{$background-color-step-600};
+  --ion-color-step-650: #{$background-color-step-650};
+  --ion-color-step-700: #{$background-color-step-700};
+  --ion-color-step-750: #{$background-color-step-750};
+  --ion-color-step-800: #{$background-color-step-800};
+  --ion-color-step-850: #{$background-color-step-850};
+  --ion-color-step-900: #{$background-color-step-900};
+  --ion-color-step-950: #{$background-color-step-950};
 }
 
 @mixin css-variables-to-root-mobile() {
@@ -146,11 +171,44 @@
   // Disable form footer, in mobile
   --app-form-buttons-bar-height: 0px;
   --app-footer-height: 0px;
+
+
 }
 
 @mixin css-variables-to-root-dark() {
+
+  // Change scroll bar style
+  color-scheme: dark;
+
   @each $color-name,
   $value in $colors {
     @include generate-dark-color-list($color-name);
   }
+
+  //--ion-text-color: #{$background-color-value};
+  //--ion-text-color-rgb: #{$background-color-rgb-value};
+  //--ion-background-color: #{$text-color-value};
+  //--ion-background-color-rgb: #{$text-color-rgb-value};
+
+  // Step colors
+  --ion-color-step-50: #{$text-color-step-50};
+  --ion-color-step-100: #{$text-color-step-100};
+  --ion-color-step-150: #{$text-color-step-150};
+  --ion-color-step-200: #{$text-color-step-200};
+  --ion-color-step-250: #{$text-color-step-250};
+  --ion-color-step-300: #{$text-color-step-200};
+  --ion-color-step-350: #{$text-color-step-350};
+  --ion-color-step-400: #{$text-color-step-400};
+  --ion-color-step-450: #{$text-color-step-450};
+  --ion-color-step-500: #{$text-color-step-500};
+  --ion-color-step-550: #{$text-color-step-550};
+  --ion-color-step-600: #{$text-color-step-600};
+  --ion-color-step-650: #{$text-color-step-650};
+  --ion-color-step-700: #{$text-color-step-700};
+  --ion-color-step-750: #{$text-color-step-750};
+  --ion-color-step-800: #{$text-color-step-800};
+  --ion-color-step-850: #{$text-color-step-850};
+  --ion-color-step-900: #{$text-color-step-900};
+  --ion-color-step-950: #{$text-color-step-950};
+
 }

package/src/theme/_ngx-components.forms.scss

@@ -23,6 +23,7 @@ form.form-container {
   --mat-form-field-filled-with-label-container-padding-top: 18px;
   --mat-form-field-filled-with-label-container-padding-bottom: 0px;
   --mdc-filled-text-field-label-text-tracking: normal;
+  --mdc-filled-text-field-disabled-input-text-color: var(--app-form-color-disabled);
   --mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
   --mat-select-enabled-trigger-text-color: var(--app-form-color);
   --mat-select-disabled-trigger-text-color: var(--app-form-color-disabled);

package/src/theme/_ngx-components.scss

@@ -654,10 +654,26 @@ ion-alert button.alert-button {
   cursor: pointer;
 }
 
+
 // --------------------------------------------------
-// Date and time picker
+// Overlay
 // --------------------------------------------------
 
+.cdk-overlay-dark-backdrop {
+  background: rgba(var(--ion-backdrop-color-rgb, 0,0,0), var(--ion-backdrop-opacity, 0.32));
+}
+
+// --------------------------------------------------
+// Date and time picker
+// --------------------------------------------------
+// Date picker
+.mat-datepicker-content {
+  --mat-datepicker-calendar-container-background-color: var(--ion-background-color, #fff) !important;
+  --mat-datepicker-calendar-container-text-color: var(--ion-text-color, #000000) !important;
+  --mat-datepicker-calendar-date-text-color: var(--ion-text-color);
+  --mat-datepicker-calendar-body-label-text-color: var(--ion-color-step-500);
+  --mat-datepicker-calendar-header-text-color: var(--ion-color-step-500);
+}
 mat-calendar {
   .mat-calendar-header {
     background-color: var(--ion-color-secondary) !important;
@@ -679,9 +695,30 @@ mat-calendar {
   }
 }
 
+@media (orientation: landscape) {
+  .mat-datepicker-content-touch {
+    height: fit-content !important;
+    min-height: 310px;
+
+    .mat-calendar-controls {
+      margin-top: 0;
+    }
+    .mat-datepicker-content-container {
+      &.mat-datepicker-content-container-with-actions {
+        height: unset !important;
+      }
+      .mat-datepicker-actions {
+        background-color: var(--mat-datepicker-calendar-container-background-color);
+        margin-top: -12px;
+      }
+    }
+  }
+}
+
 
+// Time picker
 .timepicker-backdrop-overlay {
-  background-color: rgba(0, 0, 0, 0.32);
+  background-color: rgba(var(--ion-backdrop-color-rgb, 0,0,0), var(--ion-backdrop-opacity, 0.32)) !important;
   z-index: 1000;
   opacity: 1;
   -webkit-tap-highlight-color: transparent;
@@ -690,7 +727,13 @@ mat-calendar {
 
 ngx-material-timepicker-content {
   --clock-hand-color: var(--ion-color-accent) !important;
-  --clock-face-time-active-color: var(--ion-color-accent-contrast) !important;
+  --clock-face-background-color: var(--ion-color-step-100, #f0f0f0) !important;
+  --clock-face-time-active-color: var(--ion-color-accent-contrast, #fff) !important;
+  --clock-face-time-inactive-color: var(--ion-color-step-900, #6c6c6c) !important;
+  --clock-face-time-disabled-color: var(--ion-color-step-200, #c5c5c5);
+  --clock-face-inner-time-inactive-color: var(--ion-color-step-700, #929292) !important;
+  --body-background-color: var(--ion-background-color, #fff);
+
   // TODO review !
   //@extend .mat-dialog-container !optional;
 
@@ -702,14 +745,16 @@ ngx-material-timepicker-content {
       --dial-background-color: var(--ion-color-secondary) !important;
       color: var(--ion-color-secondary-contrast) !important;
     }
-  }
 
-  ngx-material-timepicker-dial-control {
-    outline-color: var(--ion-color-accent) !important;
-    input {
-      outline-color: inherit !important;
+    ngx-material-timepicker-dial-control {
+      outline-color: var(--ion-color-accent) !important;
+      input {
+        outline-color: inherit !important;
+      }
     }
+
   }
+
 }
 
 .mat-mdc-form-field-type-mat-chip-grid {

package/src/theme/_theme.variables.scss

@@ -6,25 +6,6 @@ html {
     @include css-variables-to-root-mobile();
   }
 
-  --ion-color-step-50: #f3f3f3;
-  --ion-color-step-100: #e7e7e7;
-  --ion-color-step-150: #dbdbdb;
-  --ion-color-step-200: #d0d0d0;
-  --ion-color-step-250: #c4c4c4;
-  --ion-color-step-300: #b8b8b8;
-  --ion-color-step-350: #acacac;
-  --ion-color-step-400: #a0a0a0;
-  --ion-color-step-450: #949494;
-  --ion-color-step-500: #898989;
-  --ion-color-step-550: #7d7d7d;
-  --ion-color-step-600: #717171;
-  --ion-color-step-650: #656565;
-  --ion-color-step-700: #595959;
-  --ion-color-step-750: #4d4d4d;
-  --ion-color-step-800: #414141;
-  --ion-color-step-850: #363636;
-  --ion-color-step-900: #2a2a2a;
-  --ion-color-step-950: #1e1e1e;
 }
 
 /*
@@ -98,13 +79,15 @@ html.dark {
   --ion-color-light-shade: #1e2023;
   --ion-color-light-tint: #383a3e;
 
+  --ion-text-color: rgba(255,255,255,0.87);
+  --ion-text-color-rgb: 255, 255, 255;
   --ion-background-color: #000000;
   --ion-background-color-rgb: 0, 0, 0;
   --ion-toolbar-background: #1f1f1f;
-  --ion-text-color: #ffffff;
-  --ion-text-color-rgb: 255, 255, 255;
   --ion-border-color: #222222;
   --ion-backdrop-color: #ffffff;
+  --ion-backdrop-opacity: 0.15;
+  --ion-backdrop-color-rgb: 255, 255, 255;
 
   --app-form-color-disabled: #949494;
   --app-form-color: var(--ion-color-light-contrast);
@@ -114,16 +97,6 @@ html.dark {
   --app-form-field-label-color: #949494;
   --app-form-field-disabled-label-color: #7d7d7d;
 
-  ion-modal {
-    --ion-background-color: var(--ion-color-step-100);
-    --ion-toolbar-background: var(--ion-color-step-150);
-    --ion-toolbar-border-color: var(--ion-color-step-250);
-  }
-
-  ion-alert {
-    --ion-background-color: var(--ion-color-step-100);
-  }
-
   ion-menu#menu {
     --ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
     --ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
@@ -136,6 +109,8 @@ html.dark {
  */
 
 html.ios.dark {
+  --ion-item-background: #000000;
+  --ion-card-background: #1c1c1d;
 
   --ion-color-step-50: #0d0d0d;
   --ion-color-step-100: #1a1a1a;
@@ -157,9 +132,6 @@ html.ios.dark {
   --ion-color-step-900: #e6e6e6;
   --ion-color-step-950: #f2f2f2;
 
-  --ion-item-background: #000000;
-
-  --ion-card-background: #1c1c1d;
 }
 
 /*
@@ -170,6 +142,19 @@ html.ios.dark {
 html.md.dark {
   --ion-background-color: #121212;
   --ion-background-color-rgb: 18,18,18;
+  --ion-item-background: #1e1e1e;
+  --ion-tab-bar-background: #1f1f1f;
+  --ion-card-background: #1e1e1e;
+
+  ion-menu ion-content {
+    --background: transparent;
+    --background-color: var(--ion-background-color) !important;
+  }
+
+  //.mat-mdc-table {
+  //  --app-table-row-item-selected-background-color: var(--ion-color-accent);
+  //  --app-table-row-item-selected-text-color: var(--ion-color-accent-contrast);
+  //}
 
   --ion-color-step-50: #1e1e1e;
   --ion-color-step-100: #2a2a2a;
@@ -190,19 +175,5 @@ html.md.dark {
   --ion-color-step-850: #dbdbdb;
   --ion-color-step-900: #e7e7e7;
   --ion-color-step-950: #f3f3f3;
-
-  --ion-item-background: #1e1e1e;
-  --ion-tab-bar-background: #1f1f1f;
-  --ion-card-background: #1e1e1e;
-
-  ion-menu ion-content {
-    --background: transparent;
-    --background-color: var(--ion-background-color) !important;
-  }
-
-  //.mat-mdc-table {
-  //  --app-table-row-item-selected-background-color: var(--ion-color-accent);
-  //  --app-table-row-item-selected-text-color: var(--ion-color-accent-contrast);
-  //}
 }