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

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.4",
     "tag": "next"
 }

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)} - 2px);
     width: 100%;
 
     // STATES

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

@@ -15,4 +15,3 @@
     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/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 +1,38 @@
-@import 'overrides/cdk';
+.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;
+    }
+}
+
+.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;
+    }
+}