@eui/styles 15.0.0-rc.2 → 15.0.0-rc.21

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

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

@@ -1 +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

@@ -1 +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/_module.scss

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

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

@@ -5,9 +5,9 @@
     --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-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;
@@ -58,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 'overrides';
+@import 'compiled/full';
+@import 'overrides/module';