@eui/styles 15.0.0-next.7 → 15.0.0-next.9

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.7",
+    "version": "15.0.0-next.9",
     "tag": "next"
 }

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/{eui-legacy-icons-font-dev.scss → 03-assets/_module-legacy-icons-font.scss}

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

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

@@ -1,6 +1,7 @@
 @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();
@@ -23,6 +24,7 @@ $eui-theme: mat.define-light-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);
 
-@import 'full-indigo-pink-theme'; // TODO v15 temp usage as no doc / nothing seems to work with component theme imports
+// overrides over material for some edge cases
 @import 'overrides';

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

@@ -1,20 +1,2 @@
-.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;
-    }
-}
+@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/99-utilities/_module-base.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/99-utilities/module-base';

package/src/styles/99-utilities/_module-extras.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/99-utilities/module-extras';

package/src/styles/99-utilities/_module.scss

@@ -1 +1 @@
-@import '@eui/styles-base/src/styles/99-utilities/module';
+@import '@eui/styles-base/src/styles/99-utilities/module-all';

package/src/styles/999-showcase/_module.scss

@@ -1,3 +1,5 @@
+@import '@eui/styles-base/src/styles/eui-base-showcase-exports';
+
 @import 'prism-theme';
 @import 'component-demo-exports';
 @import 'docpage-navigation';

package/src/styles/_base.scss

@@ -3,4 +3,3 @@
 
 // specific eUI base imports
 @import '02-base/module';
-// @import '05-material/themes/default/variables'; // TODO eui15 migration

package/src/styles/{eui-utilities.scss → eui-extra-utilities.scss}

@@ -4,4 +4,4 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 @import '_base';
 
 // UTILITIES
-@import '99-utilities/module';
+@import '99-utilities/module-extras';

package/src/styles/eui-legacy-icons-font.scss

@@ -4,4 +4,4 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 @import '_base';
 
 // ICON FONT legacy export
-@import '@eui/styles-base/src/styles/05-assets/module-icons-font';
+@import '03-assets/module-legacy-icons-font';

package/src/styles/{eui-showcase.scss → eui-legacy-utilities.scss}

@@ -3,5 +3,5 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // BASE
 @import '_base';
 
-// showcase only styling
-@import '999-showcase/module';
+// // UTILITIES
+@import '99-utilities/module-legacy';

package/src/styles/eui-legacy.scss

@@ -12,5 +12,3 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // // COMPONENTS
 @import '07-elements/module-legacy';
 
-// // UTILITIES
-@import '99-utilities/module-legacy';

package/src/styles/eui-showcase-all-dev.scss

@@ -0,0 +1,48 @@
+// BASE
+@import '_base';
+
+// RESET
+@import '00-reset/module';
+
+// BASE ROOT VARS
+@import '02b-base-vars/module';
+
+// ASSETS
+@import '03-assets/module';
+// ICON FONT legacy export
+@import '03-assets/module-legacy-icons-font';
+
+// BOOTSTRAP ONLY
+@import '04-vendors/module-bootstrap';
+// // VENDORS and overrides
+@import '04-vendors/module-legacy';
+
+// MATERIAL
+@import '05-material/module';
+
+// SHARED and overrides
+@import '06-shared/module';
+
+// COMPONENTS
+@import '07-elements/module';
+// // COMPONENTS
+@import '07-elements/module-legacy';
+
+// THEMES
+@import '08-themes/module-compact';
+
+// MEDIA
+@import '10-media/module';
+// MEDIA
+@import '10-media/module-print';
+
+// EXTRAS CMP & OVERRIDES
+@import '11-extras/module';
+
+// UTILITIES
+@import '99-utilities/module';
+// // UTILITIES
+@import '99-utilities/module-legacy';
+
+// showcase only styling
+@import '999-showcase/module';

package/src/styles/eui-showcase-all.scss

@@ -0,0 +1,50 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// RESET
+@import '00-reset/module';
+
+// BASE ROOT VARS
+@import '02b-base-vars/module';
+
+// ASSETS
+@import '03-assets/module';
+// ICON FONT legacy export
+@import '03-assets/module-legacy-icons-font';
+
+// BOOTSTRAP ONLY
+@import '04-vendors/module-bootstrap';
+// // VENDORS and overrides
+@import '04-vendors/module-legacy';
+
+// MATERIAL
+@import '05-material/module';
+
+// SHARED and overrides
+@import '06-shared/module';
+
+// COMPONENTS
+@import '07-elements/module';
+// // COMPONENTS
+@import '07-elements/module-legacy';
+
+// THEMES
+@import '08-themes/module-compact';
+
+// MEDIA
+@import '10-media/module';
+// MEDIA
+@import '10-media/module-print';
+
+// EXTRAS CMP & OVERRIDES
+@import '11-extras/module';
+
+// UTILITIES
+@import '99-utilities/module';
+// // UTILITIES
+@import '99-utilities/module-legacy';
+
+// showcase only styling
+@import '999-showcase/module';

package/src/styles/eui.scss

@@ -1,11 +1,11 @@
 $eui-assets-path: '@eui/styles-base/dist/assets';
 
+// // BASE
+@import '_base';
+
 // RESET
 @import '00-reset/module';
 
-// BASE
-@import '_base';
-
 // BASE ROOT VARS
 @import '02b-base-vars/module';
 
@@ -22,10 +22,13 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 @import '07-elements/module';
 
 // THEMES
-@import '08-themes/module';
+@import '08-themes/module-compact';
 
 // MEDIA
 @import '10-media/module';
 
 // EXTRAS CMP & OVERRIDES
 @import '11-extras/module';
+
+// BASE UTILITIES
+@import '99-utilities/module-base';