@eui/styles 15.0.0-next.9 → 15.0.0-rc.10

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

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

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

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

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

package/src/styles/02-base/mixins/_eui-input.scss

@@ -9,7 +9,7 @@
     border-radius: v(eui-base-border-radius);
     color: v(eui-base-color-grey-100);
     display: block;
-    padding: calc(#{v(eui-base-spacing-s)} - 1px);
+    padding: calc(#{v(eui-base-spacing-s)} - 1px); // DS aligned;
     width: 100%;
 
     // STATES
@@ -45,7 +45,19 @@
         padding-right: v(eui-base-spacing-2xl);
 
         &-icon {
-            @include eui-clearable-input();
+            visibility: visible;
+            position: absolute;
+            right: v(eui-base-spacing-s);
+            cursor: pointer;
+            user-select: none;
+
+            svg.eui-icon-svg {
+                fill: v(eui-base-color-grey-35);
+
+                &:hover {
+                    fill: v(eui-base-color-grey-100);
+                }
+            }
         }
     }
 

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

@@ -0,0 +1,17 @@
+@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-breadcrumb-height-default: 0px;
+    --eui-app-breadcrumb-height: 0px;
+    --eui-app-breadcrumb-height-active: 20px;
+
     --eui-app-top-message-height-default: 0px;
     --eui-app-top-message-height: 0px;
     --eui-app-top-message-height-active: 42px;
@@ -54,7 +58,7 @@
     --eui-app-sidebar-bg-color: var(--eui-base-color-grey-2);
     --eui-app-sidebar-border-right-color: #f2f4f9;
 
-    --eui-app-body-bg-color: var(--eui-base-color-grey-5);
+    --eui-app-body-bg-color: var(--eui-base-color-grey-2);
     --eui-app-main-bg-color: var(--eui-base-color-grey-2);
 
     --eui-app-footer-color: var(--eui-base-color-font);

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

@@ -1,30 +1,25 @@
-@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;
+// @use '@angular/material' as mat;
 
-@include mat.core();
-// @include cdk.overlay();
+// @include mat.core();
 
-// 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 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,
- )
-));
+// // 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);
+// // Apply theme
+// @include mat.core-theme($eui-theme);
+// @include mat.datepicker-theme($eui-theme);
+// @include mat.autocomplete-theme($eui-theme);
 
-// overrides over material for some edge cases
+@import 'compiled/full';
 @import 'overrides';

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

@@ -1,2 +1,51 @@
-@import 'overrides/cdk';
-//@import 'overrides/tooltip'; // TODO v15 DISABLED cause it adds 20kb of not needed css... refactor
+.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;
+    }
+}
+
+.cdk-drop-list {
+    display: flex;
+    min-width: 100%;
+
+    &:not(.cdk-drop-list-disabled) {
+        min-height: v(eui-base-spacing-xl);
+    }
+}
+
+.mat-mdc-input-element {
+    @include eui-input();
+
+    margin-top: 0 !important;
+
+    &.custom-select {
+        background: white;
+    }
+
+    &:disabled {
+        background-color: #f5f5f5;
+        color: v(eui-base-color-grey-90) !important;
+        cursor: not-allowed !important;
+    }
+}
+
+.mat-calendar {
+    font-size: small;
+}