@eui/styles 15.0.0-next.2 → 15.0.0-next.20

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

package/src/styles/01-ecl/_module-ec.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/01-ecl/module-ec';

package/src/styles/01-ecl/_module-eu.scss

@@ -0,0 +1 @@
+@import '@eui/styles-base/src/styles/01-ecl/module-eu';

package/src/styles/02-base/mixins/_eui-svg-icons-content.scss

@@ -0,0 +1,18 @@
+@mixin euiSvgCheckmarkWhite() {
+    height: 1rem;
+    width: 1rem;
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3ECheckmark%3C/title%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='64' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
+}
+
+@mixin euiSvgChevronForward() {
+    height: 1rem;
+    width: 1rem;
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
+}
+
+@mixin euiSvgChevronDown() {
+    height: 1rem;
+    width: 1rem;
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
+}
+

package/src/styles/02-base/mixins/_module.scss

@@ -13,3 +13,5 @@
 
 @import 'ux-form-control-state';
 @import 'ux-clearable-input';
+
+@import 'eui-svg-icons-content';

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,2 +1 @@
 @import '@eui/styles-base/src/styles/05-assets/module-icons-svg';
-@import '@eui/styles-base/src/styles/05-assets/module-icons-font';

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/_overrides.scss

@@ -0,0 +1 @@
+@import 'overrides/cdk';

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

@@ -0,0 +1,22 @@
+.cdk-overlay-pane {
+    background-color: white;
+}
+
+// Disable global scrollbars (used in full screen eui-dialog for example)
+.cdk-global-scrollblock {
+    position: fixed;
+    overflow-y: visible;
+    width: 100%;
+    @include eui-scrollbars;
+    top: 0 !important;
+    left: 0 !important;
+}
+@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;

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

@@ -1,8 +1,8 @@
+// TODO v15 check to transfer to cmp
+
 // @import 'eui-inline-edit';      // eUI13+
-// @import 'eui-input-maxlength';  // eUI13+ DS aligned
-// @import 'inputs-placeholder';   // eUI13 + legacy (common)
-// @import 'inputs-maxlength';     // KEEP for legacy
 // @import 'inputs-ngvalidation';  // KEEP for legacy
 
 @import 'flex';
 @import 'typography';
+@import 'eui-input-maxlength';  // eUI13+ DS aligned

package/src/styles/06-shared/_old-to-review/_elements-typography.scss

@@ -1,25 +1,8 @@
 // TODO v15 transfer to own cmp styles for some
 
-a,
-a:not([href]):not([tabindex]) {
-    color: v(eui-base-color-link);
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-        color: v(eui-base-color-link);
-        text-decoration: underline;
-    }
-}
 
-a {
-    background-color: transparent;
-    text-decoration: none;
-}
 
-a:focus {
-    text-decoration: underline;
-}
+
 
 p {
     margin-top: v(eui-base-spacing-m);

package/src/styles/06-shared/_old-to-review/_ux-input-maxlength.scss

@@ -0,0 +1,25 @@
+// Used by Legacy & eUI10.x
+// For eUI13+ use eui-input-maxlength.scss
+.input-maxlength-wrapper {
+    position: relative;
+    width: 100%;
+
+    .input-maxlength {
+        background-color: v(eui-base-color-grey-10);
+        border: 1px solid v(eui-base-color-grey-15);
+        border-radius: v(eui-base-border-radius);
+        color: v(eui-base-color-black);
+        font-size: v(eui-base-font-size-xs);
+        padding: 1px 3px;
+        position: absolute;
+        right: calc(-1 * #{v(eui-base-spacing-xs)});
+        top: calc(-1 * #{v(eui-base-spacing-s)});
+        z-index: v(eui-base-z-index-input-maxlength);
+
+        &.error {
+            background-color: v(eui-base-color-danger-110);
+            border-color: v(eui-base-color-danger-100);
+            color: v(eui-base-color-white);
+        }
+    }
+}

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

@@ -78,7 +78,35 @@ h6,
 }
 
 
+a,
+a:not([href]):not([tabindex]) {
+    color: v(eui-base-color-link);
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+        color: v(eui-base-color-link);
+        text-decoration: underline;
+    }
+}
+
+a {
+    background-color: transparent;
+    text-decoration: none;
+}
+
+a:focus {
+    text-decoration: underline;
+}
 
 abbr[title] {
     text-decoration: none;  // TODO: underline dotted is the default and recommended usage
 }
+
+.label, abbr, blockquote, del, label, mark, p {
+    font-size: v(eui-base-font-size);
+}
+
+label {
+    margin-bottom: v(eui-base-spacing-xs);
+}

package/src/styles/07-elements/_module-legacy.scss

@@ -1,20 +1,8 @@
 @import 'legacy/form';
 @import 'legacy/form-compact';
-// @import 'legacy/inputs';
-// @import 'legacy/input-checkbox-default';
-// @import 'legacy/input-radio-default';
-// @import 'legacy/input-group';
-// @import 'legacy/input-placeholders';
-// @import 'legacy/ux-control-feedback';
-// @import 'legacy/ux-form-control';
-// @import 'legacy/ux-form-group';
-// @import 'legacy/ux-card';
-// @import 'legacy/ux-tree';
-
-.label, abbr, blockquote, del, label, mark, p {
-    font-size: v(eui-base-font-size);
-}
-
-label {
-    margin-bottom: v(eui-base-spacing-xs);
-}
+@import 'legacy/input-checkbox-default';
+@import 'legacy/input-radio-default';
+@import 'legacy/ux-input-placeholder';
+@import 'legacy/ux-input-maxlength';
+@import 'legacy/ux-form-group';
+@import 'legacy/ux-input-group';