@igo2/core 16.0.0-rc.3 → 16.0.0-rc.4

package/theming/prebuilt-themes/qcca/base/typography/typography.scss

@@ -1,138 +1,138 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../palette';
-@use '../breakpoints';
-@use './typography.utils' as typo-utils;
-
-// https://design.quebec.ca/bases/polices-caracteres
-// https://design.quebec.ca/bases/niveaux-titres
-// https://material.angular.io/guide/typography
-$typography: mat.define-typography-config(
-  $font-family: '"Open Sans", sans-serif',
-  $headline-1: mat.define-typography-level(110px, 110px, 500),
-  $headline-2: mat.define-typography-level(54px, 54px, 500),
-  $headline-3: mat.define-typography-level(43px, 46px, 500),
-  $headline-4: mat.define-typography-level(32px, 38px, 500),
-  // h1
-  $headline-5: mat.define-typography-level(48px, 56px, bold),
-  // h2
-  $headline-6: mat.define-typography-level(36px, 40px, bold),
-  // h3
-  $subtitle-1: mat.define-typography-level(28px, 32px, bold),
-  // h4
-  $subtitle-2: mat.define-typography-level(21px, 24px, bold),
-  $body-1: mat.define-typography-level(16px, 24px, 400),
-  $body-2: mat.define-typography-level(12px, 18px, 400),
-  $caption: mat.define-typography-level(12px, 18px, 400),
-  $button: mat.define-typography-level(13px, 13px, 500)
-);
-
-$typography-mobile: mat.define-typography-config(
-  // h1
-  $headline-5: mat.define-typography-level(36px, 40px, bold),
-  // h2
-  $headline-6: mat.define-typography-level(28px, 32px, bold),
-  // h3
-  $subtitle-1: mat.define-typography-level(25px, 32px, bold)
-);
-
-$font-color: map.get(palette.$palette, 900);
-
-@mixin set-base-styles {
-  body {
-    color: $font-color;
-  }
-
-  a {
-    word-break: break-word;
-    overflow-wrap: break-word;
-    cursor: pointer;
-    color: palette.$primary;
-    text-decoration: underline;
-    background-color: transparent;
-  }
-
-  p,
-  ul,
-  li,
-  u,
-  .text {
-    color: $font-color;
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  p {
-    margin-bottom: 24px;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .h1,
-  .h2,
-  .h3,
-  .h4,
-  .h5,
-  .h6 {
-    font-family: Roboto, sans-serif !important;
-    color: $font-color;
-  }
-
-  h1 {
-    margin-top: 72px !important;
-    margin-bottom: 32px !important;
-
-    @include typo-utils.title-border;
-
-    @include breakpoints.media-breakpoint-down(tablet) {
-      margin-top: 48px !important;
-      margin-bottom: 16px !important;
-    }
-  }
-
-  h2 {
-    margin-top: 48px !important;
-    margin-bottom: 16px !important;
-  }
-
-  h3 {
-    margin-top: 24px !important;
-    margin-bottom: 16px !important;
-  }
-
-  // WORKAROUND, mat-typography area of intersection h4 is using mat-body-1
-  // https://github.com/angular/components/issues/26351
-  h4 {
-    @include typo-utils.title-level-4;
-  }
-
-  h4 {
-    margin-top: 24px !important;
-    margin-bottom: 8px !important;
-  }
-
-  h5 {
-    font-size: 19px !important;
-    line-height: 24px !important;
-  }
-
-  h6 {
-    font-size: 16px !important;
-    line-height: 20px !important;
-  }
-
-  h5,
-  h6 {
-    font-weight: bold !important;
-    margin-top: 16px !important;
-    margin-bottom: 0px !important;
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../palette';
+@use '../breakpoints';
+@use './typography.utils' as typo-utils;
+
+// https://design.quebec.ca/bases/polices-caracteres
+// https://design.quebec.ca/bases/niveaux-titres
+// https://material.angular.io/guide/typography
+$typography: mat.define-typography-config(
+  $font-family: '"Open Sans", sans-serif',
+  $headline-1: mat.define-typography-level(110px, 110px, 500),
+  $headline-2: mat.define-typography-level(54px, 54px, 500),
+  $headline-3: mat.define-typography-level(43px, 46px, 500),
+  $headline-4: mat.define-typography-level(32px, 38px, 500),
+  // h1
+  $headline-5: mat.define-typography-level(48px, 56px, bold),
+  // h2
+  $headline-6: mat.define-typography-level(36px, 40px, bold),
+  // h3
+  $subtitle-1: mat.define-typography-level(28px, 32px, bold),
+  // h4
+  $subtitle-2: mat.define-typography-level(21px, 24px, bold),
+  $body-1: mat.define-typography-level(16px, 24px, 400),
+  $body-2: mat.define-typography-level(12px, 18px, 400),
+  $caption: mat.define-typography-level(12px, 18px, 400),
+  $button: mat.define-typography-level(13px, 13px, 500)
+);
+
+$typography-mobile: mat.define-typography-config(
+  // h1
+  $headline-5: mat.define-typography-level(36px, 40px, bold),
+  // h2
+  $headline-6: mat.define-typography-level(28px, 32px, bold),
+  // h3
+  $subtitle-1: mat.define-typography-level(25px, 32px, bold)
+);
+
+$font-color: map.get(palette.$palette, 900);
+
+@mixin set-base-styles {
+  body {
+    color: $font-color;
+  }
+
+  a {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    cursor: pointer;
+    color: palette.$primary;
+    text-decoration: underline;
+    background-color: transparent;
+  }
+
+  p,
+  ul,
+  li,
+  u,
+  .text {
+    color: $font-color;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  p {
+    margin-bottom: 24px;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    font-family: Roboto, sans-serif !important;
+    color: $font-color;
+  }
+
+  h1 {
+    margin-top: 72px !important;
+    margin-bottom: 32px !important;
+
+    @include typo-utils.title-border;
+
+    @include breakpoints.media-breakpoint-down(tablet) {
+      margin-top: 48px !important;
+      margin-bottom: 16px !important;
+    }
+  }
+
+  h2 {
+    margin-top: 48px !important;
+    margin-bottom: 16px !important;
+  }
+
+  h3 {
+    margin-top: 24px !important;
+    margin-bottom: 16px !important;
+  }
+
+  // WORKAROUND, mat-typography area of intersection h4 is using mat-body-1
+  // https://github.com/angular/components/issues/26351
+  h4 {
+    @include typo-utils.title-level-4;
+  }
+
+  h4 {
+    margin-top: 24px !important;
+    margin-bottom: 8px !important;
+  }
+
+  h5 {
+    font-size: 19px !important;
+    line-height: 24px !important;
+  }
+
+  h6 {
+    font-size: 16px !important;
+    line-height: 20px !important;
+  }
+
+  h5,
+  h6 {
+    font-weight: bold !important;
+    margin-top: 16px !important;
+    margin-bottom: 0px !important;
+  }
+}

package/theming/prebuilt-themes/qcca/components/form-field.scss

@@ -1,5 +1,5 @@
-.mat-mdc-text-field-wrapper,
-.mdc-notched-outline__leading,
-.mdc-notched-outline__trailing {
-  border-radius: 0 !important;
-}
+.mat-mdc-text-field-wrapper,
+.mdc-notched-outline__leading,
+.mdc-notched-outline__trailing {
+  border-radius: 0 !important;
+}

package/theming/prebuilt-themes/qcca/components/input.scss

@@ -1,6 +1,6 @@
-@use 'sass:map';
-@use '../base';
-
-.mat-mdc-input-element {
-  color: base.colors-get(grey, medium) !important;
-}
+@use 'sass:map';
+@use '../base';
+
+.mat-mdc-input-element {
+  color: base.colors-get(grey, medium) !important;
+}

package/theming/prebuilt-themes/qcca/components/list.scss

@@ -1,24 +1,24 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../base';
-
-// TODO rework this style to be more generic
-
-igo-search-results-item {
-  .mdc-list-item__primary-text {
-    white-space: normal;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-height: unset !important;
-    line-height: 18px !important;
-  }
-}
-
-igo-list [igolistitem][color='accent'].igo-list-item-selected > mat-list-item {
-  background-color: map.get(base.$palette, 400);
-
-  h4,
-  small {
-    color: map.get(base.$palette, contrast, 500) !important;
-  }
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../base';
+
+// TODO rework this style to be more generic
+
+igo-search-results-item {
+  .mdc-list-item__primary-text {
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: unset !important;
+    line-height: 18px !important;
+  }
+}
+
+igo-list [igolistitem][color='accent'].igo-list-item-selected > mat-list-item {
+  background-color: map.get(base.$palette, 400);
+
+  h4,
+  small {
+    color: map.get(base.$palette, contrast, 500) !important;
+  }
+}

package/theming/prebuilt-themes/qcca/components/panel.scss

@@ -1,8 +1,8 @@
-@use 'sass:map';
-@use '../base';
-
-.igo-panel-header,
-.igo-panel-header button,
-.igo-panel-title {
-  color: map.get(base.$palette, contrast, 500) !important;
-}
+@use 'sass:map';
+@use '../base';
+
+.igo-panel-header,
+.igo-panel-header button,
+.igo-panel-title {
+  color: map.get(base.$palette, contrast, 500) !important;
+}

package/theming/prebuilt-themes/qcca-theme.css

@@ -1,5 +1,5 @@
 h4 {
-  font-size: 16px !important;
+  font-size: 14px !important;
   line-height: 22px !important;
   font-weight: 500 !important;
 }
@@ -2951,6 +2951,11 @@ igo-layer-legend img:after {
   border-top-color: #095797;
 }
 
+igo-layer-list-tool mat-form-field .mat-mdc-text-field-wrapper,
+igo-layer-list-tool mat-form-field .mat-mdc-form-field-focus-overlay {
+  background-color: white !important;
+}
+
 igo-layer-list-tool .mat-mdc-icon-button.mat-mdc-button-base {
   --mdc-icon-button-state-layer-size: 40px;
   width: var(--mdc-icon-button-state-layer-size);
@@ -3042,12 +3047,10 @@ igo-menu-button > button#menu-button.menu-button-white-background {
   font-size: 28px;
 }
 
-igo-search-bar mat-form-field .mat-mdc-text-field-wrapper {
+igo-search-bar mat-form-field .mat-mdc-text-field-wrapper,
+igo-search-bar mat-form-field .mat-mdc-form-field-focus-overlay {
   background-color: white !important;
 }
-igo-search-bar mat-form-field .mdc-line-ripple {
-  display: none;
-}
 
 igo-search-bar .mat-mdc-form-field-infix {
   min-height: 48px;
@@ -3077,6 +3080,17 @@ igo-search-bar .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-m
   display: none;
 }
 
+igo-search-bar mat-form-field .mdc-line-ripple {
+  display: none;
+}
+
+igo-search-results-item .mdc-list-item--with-leading-icon:hover .mdc-list-item__start {
+  color: black;
+}
+igo-search-results-item .mdc-list-item--with-leading-icon .mdc-list-item__start {
+  color: rgba(0, 0, 0, 0.87);
+}
+
 igo-confirmation-popup-component h1 {
   font-size: 32px;
   font-family: Roboto, "Helvetica Neue", sans-serif;

package/theming/prebuilt-themes/qcca-theme.scss

@@ -1,47 +1,47 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../' as igo;
-@use './qcca';
-
-// https://design.quebec.ca/a-propos-systeme-design
-$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);
-
-$theme: mat.define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn,
-      success: $success,
-      background: $background
-    ),
-    typography: qcca.$typo-typography,
-    density: 0
-  )
-);
-
-$theme: map.merge(
-  $theme,
-  (
-    foreground:
-      igo.theme-foreground(mat.define-palette(qcca.$palette, 500, 100, 700))
-  )
-);
-
-@include mat.core();
-@include mat.typography-hierarchy(qcca.$typo-typography);
-@include mat.all-component-themes($theme);
-
-@include igo.all-component-themes($theme);
-@include qcca.all-component-themes($theme);
-
-@media (max-width: 1200px) {
-  @include mat.typography-hierarchy(qcca.$typo-typography-mobile);
-}
-
-@include qcca.typo-set-base-styles();
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../' as igo;
+@use './qcca';
+
+// https://design.quebec.ca/a-propos-systeme-design
+$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);
+
+$theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent,
+      warn: $warn,
+      success: $success,
+      background: $background
+    ),
+    typography: qcca.$typo-typography,
+    density: 0
+  )
+);
+
+$theme: map.merge(
+  $theme,
+  (
+    foreground:
+      igo.theme-foreground(mat.define-palette(qcca.$palette, 500, 100, 700))
+  )
+);
+
+@include mat.core();
+@include mat.typography-hierarchy(qcca.$typo-typography);
+@include mat.all-component-themes($theme);
+
+@include igo.all-component-themes($theme);
+@include qcca.all-component-themes($theme);
+
+@media (max-width: 1200px) {
+  @include mat.typography-hierarchy(qcca.$typo-typography-mobile);
+}
+
+@include qcca.typo-set-base-styles();