@eui/styles 15.0.0-next.1 → 15.0.0-next.11

package/package.json

@@ -9,6 +9,6 @@
     "description": "eUI core styling",
     "author": "ec.europa.eui@gmail.com",
     "license": "EUPL-1.1",
-    "version": "15.0.0-next.1",
+    "version": "15.0.0-next.11",
     "tag": "next"
 }

package/src/styles/00-reset/_module.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/00-reset/module';

package/src/styles/02-base/mixins/_ux-clearable-input.scss

@@ -22,7 +22,7 @@
         }
 
         &::before {
-            content: $eui-icon-close-m;
+            // content: $eui-icon-close-m; // TO DO v15 svg remplacement
             font-family: 'eui-icons' !important;
         }
     }

package/src/styles/02b-base-vars/_layout.vars.scss

@@ -5,6 +5,10 @@
     --eui-app-header-height-active: 90px;
     --eui-app-header-height-shrink: 0px;
 
+    --eui-app-breadcrumbs-height-default: 0px;
+    --eui-app-breadcrumbs-height: 0px;
+    --eui-app-breadcrumbs-height-active: 20px;
+
     --eui-app-top-message-height-default: 0px;
     --eui-app-top-message-height: 0px;
     --eui-app-top-message-height-active: 42px;

package/src/styles/02b-base-vars/_module.scss

@@ -1,2 +1,2 @@
-@import '@eui/styles-base/src/styles/03-vars/module';
+@import '@eui/styles-base/src/styles/03-vars/module-base';
 @import 'layout.vars';

package/src/styles/03-assets/_module-legacy-icons-font.scss

@@ -0,0 +1,2 @@
+// ICON FONT legacy export
+@import '@eui/styles-base/src/styles/05-assets/module-icons-font';

package/src/styles/03-assets/_module.scss

@@ -1 +1 @@
-@import '@eui/styles-base/src/styles/05-assets/module';
+@import '@eui/styles-base/src/styles/05-assets/module-icons-svg';

package/src/styles/05-material/_module.scss

@@ -1,2 +1,30 @@
-// @import 'themes/default/module'; // TODO eUI 15 migration
-// @import 'components/module'; // TODO eUI 15 migration
+@use '@angular/material' as mat;
+@use '@angular/material/datepicker/datepicker-theme' as datepicker-theme;
+@use '@angular/material/autocomplete/autocomplete-theme' as autocomplete-theme;
+@use '@angular/material/slide-toggle/slide-toggle-theme' as slide-toggle-theme;
+
+@include mat.core();
+// @include cdk.overlay();
+
+// define palettes
+$eui-t-color-primary: mat.define-palette($mat-eui-primary, 500, 300, 900);     // $palette-name, $default: 500, $lighter: 100, $darker: 700
+$eui-t-color-accent:  mat.define-palette($mat-eui-accent, A200, A100, A400);
+$eui-t-color-warn:    mat.define-palette($mat-eui-danger, 500, A700, 900);     // The warn palette is optional (default: $mat-red)
+
+// define theme
+$eui-theme: mat.define-light-theme((
+ color: (
+   primary: $eui-t-color-primary,
+   accent: $eui-t-color-accent,
+   warn: $eui-t-color-warn,
+ )
+));
+
+// Apply theme
+@include mat.core-theme($eui-theme);
+@include datepicker-theme.color($eui-theme);
+@include autocomplete-theme.color($eui-theme);
+@include slide-toggle-theme.color($eui-theme);
+
+// overrides over material for some edge cases
+@import 'overrides';

package/src/styles/05-material/_old-v14-material/_module.scss

@@ -0,0 +1,2 @@
+@import 'themes/default/module';
+@import 'components/module';

package/src/styles/05-material/{components → _old-v14-material/components}/_cdk-overlay-container.scss

@@ -3,7 +3,7 @@
 
     .mat-menu-panel {
         max-width: inherit;
-        min-height: v(eui-base-spacing-3xl);
+        min-height: v(eui-base-spacing-l);
         @include eui-scrollbars;
     }
 

package/src/styles/05-material/_overrides.scss

@@ -0,0 +1,2 @@
+@import 'overrides/cdk';
+//@import 'overrides/tooltip'; // TODO v15 DISABLED cause it adds 20kb of not needed css... refactor

package/src/styles/05-material/overrides/_cdk.scss

@@ -0,0 +1,20 @@
+.cdk-overlay-pane {
+    background-color: white;
+}
+
+// Disable global scrollbars (used in full screen eui-dialog for example)
+.cdk-global-scrollblock {
+    position: fixed;
+    overflow-y: scroll;     // Material default
+    width: 100%;
+    @include eui-scrollbars;
+}
+@include media($eui-bkp-mobile) {
+    .cdk-global-scrollblock {
+        height: 100%;
+        overflow: auto;
+        position: fixed;
+        width: 100%;
+        @include eui-scrollbars;
+    }
+}

package/src/styles/05-material/overrides/_tooltip.scss

@@ -0,0 +1,290 @@
+/* eUI Tooltip styles overrides and customizations based on Angular Material Tooltip
+  Features :
+  - added material shadow by default
+  - added optional arrows display based on tooltip position and color state class
+  - allow multi-lines feature with pre-line white space setting
+  - allow tooltip content alignments (default: centered)
+  - custom spacings
+  - set minimum width (2rem)
+  - custom font styling (letter spacing)
+  - set default tooltip borders to be squared
+  - optional tooltip rounded borders
+*/
+
+$tooltip-background-color: rgba(37, 36, 36, 0.9);   // MD rgba(97,97,97,.9);
+$tooltip-arrow-width: 8px;
+
+// Each Tooltip is instanciated within the cdk-overlay-container
+// with its own life cycle based on optional show/hide delay
+.cdk-overlay-container {
+    .cdk-overlay-pane.mat-tooltip-panel {
+        .mat-tooltip {
+            --eui-base-border-radius: 4px;  // Override root default (MD)
+
+            background-color: $tooltip-background-color;
+            border-radius: 0 !important;            // defaut squared
+            box-shadow: v(eui-base-shadow-4);
+            color: v(eui-base-color-white) !important;   // default font color
+            font-size: v(eui-base-font-size-xs);
+            letter-spacing: 0.5px;
+            margin: v(eui-base-spacing-m) !important;  // This controls the spacing from tooltip to parent element
+            max-width: 50vw;
+            min-width: v(eui-base-spacing-2xl);
+            overflow: visible !important;  // Mandatory for arrows to be displayed
+            padding-left: v(eui-base-spacing-xs) !important; // We must control the paddings from which arrow's positions are set
+            padding-right: v(eui-base-spacing-xs) !important;
+            padding-bottom: v(eui-base-spacing-xs) !important;
+            padding-top: v(eui-base-spacing-xs) !important;
+            text-align: center;     // default (see optional content alignment)
+            text-overflow: ellipsis;
+            white-space: pre-line;  // Allow multi-lines tooltip
+
+            // ARROWS COMMON BASE
+            &:before {
+                border-color: transparent;
+                border-style: solid;
+                border-width: $tooltip-arrow-width;
+                bottom: 0;
+                content: '';
+                display: block;
+                height: 0;
+                position: absolute;
+                width: 0;
+            }
+
+            &.eui-tooltip {
+                white-space: pre-line;  // Allow multi-lines tooltip
+
+                // COLOR STATES
+                &.eui-tooltip--primary {
+                    background-color: v(eui-base-color-primary-100);
+                    color: v(eui-base-color-white);
+                }
+
+                &.eui-tooltip--secondary {
+                    background-color: v(eui-base-color-grey-15);
+                    color: v(eui-base-color-grey-100) !important;
+                }
+
+                &.eui-tooltip--info {
+                    background-color: v(eui-base-color-info-100);
+                    color: v(eui-base-color-white);
+                }
+
+                &.eui-tooltip--success {
+                    background-color: v(eui-base-color-success-100);
+                    color: v(eui-base-color-white);
+                }
+
+                &.eui-tooltip--warning {
+                    background-color: v(eui-base-color-warning-100);
+                    color: v(eui-base-color-black) !important;     // WCAG2 AA compliant
+                }
+
+                &.eui-tooltip--danger {
+                    background-color: v(eui-base-color-danger-100);
+                    color: v(eui-base-color-white);
+                }
+
+                &.eui-tooltip--accent {
+                    color: v(eui-base-color-black) !important;     // WCAG2 AA compliant
+                    background-color: v(eui-base-color-accent-100);
+                }
+
+                &.eui-tooltip--rounded {
+                    border-radius: v(eui-base-border-radius) !important;
+                }
+
+                // CONTENT ALIGNMENT
+                &.eui-tooltip--content-center {
+                    text-align: center;
+                }
+
+                &.eui-tooltip--content-left {
+                    text-align: left;
+                }
+
+                &.eui-tooltip--content-right {
+                    text-align: right;
+                }
+
+                &.eui-tooltip--content-justify {
+                    hyphens: auto;
+                    text-align: justify;
+                    word-break: break-word;
+                }
+
+                // SHOW ARROWS
+                &.eui-tooltip--arrows {
+
+                    // TOOLTIP POSITION TOP (default)
+                    &.eui-tooltip--above {
+                        // ADD BOTTOM ARROW
+                        &:before {
+                            border-color: $tooltip-background-color transparent transparent transparent;
+                            left: calc(50% - #{$tooltip-arrow-width});
+                            transform: translate(0, $tooltip-arrow-width * 2);
+                        }
+
+                        &.eui-tooltip {
+                            &--primary:before   { border-color: v(eui-base-color-primary-100) transparent transparent transparent; }
+                            &--secondary:before { border-color: v(eui-base-color-grey-15) transparent transparent transparent; }
+                            &--info:before      { border-color: v(eui-base-color-info-100) transparent transparent transparent; }
+                            &--success:before   { border-color: v(eui-base-color-success-100) transparent transparent transparent; }
+                            &--warning:before   { border-color: v(eui-base-color-warning-100) transparent transparent transparent; }
+                            &--danger:before    { border-color: v(eui-base-color-danger-100) transparent transparent transparent; }
+                            &--accent:before    { border-color: v(eui-base-color-accent-100) transparent transparent transparent; }
+                        }
+                    }
+
+                    // TOOLTIP POSITION BOTTOM
+                    &.eui-tooltip--below {
+                        // ADD TOP ARROW
+                        &:before {
+                            border-color: transparent transparent $tooltip-background-color transparent;
+                            left: calc(50% - #{$tooltip-arrow-width});
+                            top: 0;
+                            transform: translate(0, -100%);
+                        }
+
+                        &.eui-tooltip {
+                            &--primary:before   { border-color: transparent transparent v(eui-base-color-primary-100) transparent; }
+                            &--secondary:before { border-color: transparent transparent v(eui-base-color-grey-15) transparent; }
+                            &--info:before      { border-color: transparent transparent v(eui-base-color-info-100) transparent; }
+                            &--success:before   { border-color: transparent transparent v(eui-base-color-success-100) transparent; }
+                            &--warning:before   { border-color: transparent transparent v(eui-base-color-warning-100) transparent; }
+                            &--danger:before    { border-color: transparent transparent v(eui-base-color-danger-100) transparent; }
+                            &--accent:before    { border-color: transparent transparent v(eui-base-color-accent-100) transparent; }
+                        }
+                    }
+
+                    // TOOLTIP POSITION LEFT
+                    &.eui-tooltip--left,
+                    &.eui-tooltip--before {
+                        // ADD RIGHT ARROW
+                        &:before {
+                            border-color: transparent transparent transparent $tooltip-background-color;
+                            right: -$tooltip-arrow-width;
+                            top: 50%;
+                            transform: translate($tooltip-arrow-width, -$tooltip-arrow-width);
+                        }
+
+                        &.eui-tooltip {
+                            &--primary:before   { border-color: transparent transparent transparent v(eui-base-color-primary-100); }
+                            &--secondary:before { border-color: transparent transparent transparent v(eui-base-color-grey-15); }
+                            &--info:before      { border-color: transparent transparent transparent v(eui-base-color-info-100); }
+                            &--success:before   { border-color: transparent transparent transparent v(eui-base-color-success-100); }
+                            &--warning:before   { border-color: transparent transparent transparent v(eui-base-color-warning-100); }
+                            &--danger:before    { border-color: transparent transparent transparent v(eui-base-color-danger-100); }
+                            &--accent:before    { border-color: transparent transparent transparent v(eui-base-color-accent-100); }
+                        }
+                    }
+
+                    // TOOLTIP POSITION RIGHT
+                    &.eui-tooltip--right,
+                    &.eui-tooltip--after {
+                        // ADD LEFT ARROW
+                        &:before {
+                            border-color: transparent $tooltip-background-color transparent transparent;
+                            left: -$tooltip-arrow-width;
+                            top: 50%;
+                            transform: translate(-$tooltip-arrow-width, -$tooltip-arrow-width);
+                        }
+
+                        &.eui-tooltip {
+                            &--primary:before   { border-color: transparent v(eui-base-color-primary-100) transparent transparent; }
+                            &--secondary:before { border-color: transparent v(eui-base-color-grey-15) transparent transparent; }
+                            &--info:before      { border-color: transparent v(eui-base-color-info-100) transparent transparent; }
+                            &--success:before   { border-color: transparent v(eui-base-color-success-100) transparent transparent; }
+                            &--warning:before   { border-color: transparent v(eui-base-color-warning-100) transparent transparent; }
+                            &--danger:before    { border-color: transparent v(eui-base-color-danger-100) transparent transparent; }
+                            &--accent:before    { border-color: transparent v(eui-base-color-accent-100) transparent transparent; }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// In case when we have a tooltip to be shown below, but that's not possible because of bottom of the page.
+.cdk-overlay-container {
+    .cdk-overlay-pane.mat-tooltip-panel-above {
+        .mat-tooltip {
+            &.eui-tooltip {
+                &.eui-tooltip--arrows {
+                    &.eui-tooltip--below {
+                        &:before {
+                            border-color: $tooltip-background-color transparent transparent transparent;
+                            left: calc(50% - #{$tooltip-arrow-width});
+                            top: auto;
+                            transform: translate(0, $tooltip-arrow-width * 2);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// When we have a tooltip tp be shown above, but that's not possible because of the top of the page. Arrow should be flipped.
+.cdk-overlay-container {
+    .cdk-overlay-pane.mat-tooltip-panel-below {
+        .mat-tooltip {
+            &.eui-tooltip {
+                &.eui-tooltip--arrows {
+                    &.eui-tooltip--above {
+                        &:before {
+                            border-color: transparent transparent $tooltip-background-color transparent;
+                            top: 0;
+                            transform: translate(0, -100%);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// When the tooltip should appear on the left, but it reaches end of the page.
+.cdk-overlay-container {
+    .cdk-overlay-pane.mat-tooltip-panel-left {
+        .mat-tooltip {
+            &.eui-tooltip {
+                &.eui-tooltip--arrows {
+                    &.eui-tooltip--right,
+                    &.eui-tooltip--after {
+                        &:before {
+                            border-color: transparent transparent transparent $tooltip-background-color;
+                            right: -$tooltip-arrow-width;
+                            left: auto;
+                            transform: translate($tooltip-arrow-width, -$tooltip-arrow-width);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// When the tooltip should appear on the right, but it reaches end of the page.
+.cdk-overlay-container {
+    .cdk-overlay-pane.mat-tooltip-panel-right {
+        .mat-tooltip {
+            &.eui-tooltip {
+                &.eui-tooltip--arrows {
+                    &.eui-tooltip--left,
+                    &.eui-tooltip--before {
+                        &:before {
+                            border-color: transparent $tooltip-background-color transparent transparent;
+                            left: -$tooltip-arrow-width;
+                            right: auto;
+                            top: 50%;
+                            transform: translate(-$tooltip-arrow-width, -$tooltip-arrow-width);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/src/styles/06-shared/_flex.scss

@@ -1,3 +1,5 @@
+// TODO v15 remove / replace in showczase
+
 .flex-container {
     align-items: center;
     display: flex;