@eui/styles 15.0.0-next.4 → 15.0.0-next.6

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

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

@@ -1,2 +1,24 @@
-// @import 'themes/default/module'; // TODO eUI 15 migration
-// @import 'components/module'; // TODO eUI 15 migration
+@use '@angular/material' as mat;
+// @use '@angular/cdk' as cdk;
+
+@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);
+
+@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,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/07-elements/_module-legacy.scss

@@ -5,3 +5,4 @@
 @import 'legacy/ux-input-placeholder';
 @import 'legacy/ux-input-maxlength';
 @import 'legacy/ux-form-group';
+@import 'legacy/ux-input-group';

package/src/styles/07-elements/legacy/_ux-input-group.scss

@@ -0,0 +1,56 @@
+// APPEND & PREPEND
+.ux-input-group {
+    align-items: stretch;
+    display: flex;
+    flex-wrap: nowrap;  // for append & prepend options it must be nowrap
+    position: relative;
+    width: 100%;
+
+    .ux-input-group-text {
+        align-items: center;
+        background-color: v(eui-base-color-grey-5);
+        border: 1px solid v(eui-base-color-grey-20);
+        border-radius: v(eui-base-border-radius);
+        color: v(eui-base-color-grey-100);
+        display: flex;
+        font-size: v(eui-base-font-size);
+        font-weight: 400;
+        justify-content: center;
+        line-height: v(eui-base-line-height);
+        margin-bottom: 0;
+        min-width: v(eui-base-spacing-2xl);
+        padding: v(eui-base-spacing-2xs);
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    .ux-input-group-prepend {
+        display: flex;
+        margin-right: -1px;
+
+        .ux-input-group-text {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+    }
+
+    .ux-input-group-append {
+        display: flex;
+        margin-left: -1px;
+
+        .ux-input-group-text {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+        }
+    }
+
+    .ux-form-control:not(:first-child) {
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+    }
+
+    .ux-form-control:not(:last-child) {
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+    }
+}

package/src/styles/eui-dev.scss

@@ -11,7 +11,7 @@
 @import '03-assets/module';
 
 // MATERIAL
-// @import '05-material/module';  // TODO v15 migration
+@import '05-material/module';
 
 // SHARED and overrides
 @import '06-shared/module';

package/src/styles/eui.scss

@@ -13,7 +13,7 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 @import '03-assets/module';
 
 // MATERIAL
-// @import '05-material/module';  // TODO v15 migration
+@import '05-material/module';
 
 // SHARED and overrides
 @import '06-shared/module';

package/src/styles/08-themes/_module-eui.scss

@@ -1 +0,0 @@
-@import 'eui/module';

package/src/styles/08-themes/eui/_module.scss

@@ -1 +0,0 @@
-@import 'compact/module';

package/src/styles/08-themes/eui/compact/_eui-t-compact.scss

@@ -1,154 +0,0 @@
-// GLOBAL COMPACT THEME
-///////////////////////
-html.eui-t-compact {
-    // Exposed CSS variables
-    --eui-font-size: 14px;                      // Font size base for compact theme
-    --eui-line-height-base: 1.25;               // Unitless number value is multiplied by the element's font size
-    // Setup
-    font-size: var(--eui-font-size);            // Applies the defined custom font size
-    line-height: var(--eui-line-height-base);   // Applies the defined custom line height ratio
-}
-
-// FORM ELEMENTS
-/////////////////
-form.eui-t-compact {
-    // Exposed CSS variables
-    --eui-font-size: 14px;                      // Font size base for compact theme
-    --eui-line-height-base: 1.25;               // Unitless number value is multiplied by the element's font size
-    // Setup
-    font-size: var(--eui-font-size);            // Applies the defined custom font size
-    line-height: var(--eui-line-height-base);   // Applies the defined custom line height ratio
-
-    // Internals
-    input,
-    select,
-    textarea {
-        height: calc(2.5 * #{v(eui-spacing)});  // Default: 40px
-
-        &[readonly],
-        &--readonly {
-            height: inherit;
-            padding: 0 !important;
-        }
-    }
-
-    .eui-input-group {
-        margin-bottom: var(--eui-spacing-xs);
-
-        label {
-            margin-bottom: var(--eui-spacing-2xs);
-        }
-    }
-
-    .eui-select:not([multiple]),
-    .eui-select[size="1"]:not([size]) {
-        padding: v(eui-spacing-2xs) v(eui-spacing-l) v(eui-spacing-2xs) v(eui-spacing-s); // reserve right padding space for icon/svg
-    }
-
-    .eui-textarea {
-        &__model {
-            padding: v(eui-spacing-xs) v(eui-spacing-s);
-        }
-    }
-
-    // TODO: replace with eui-datepicker
-    .ux-datepicker {
-        input {
-            height: calc(2.5 * #{v(eui-spacing)});
-        }
-
-        .ux-button.ux-button--icon-only,
-        .ux-datepicker__toggler.ux-datepicker__toggler-icon {
-            height: calc(2.5 * #{v(eui-spacing)});
-            min-height: calc(2.5 * #{v(eui-spacing)});
-            min-width: calc(2.5 * #{v(eui-spacing)});
-            padding: calc(#{v(eui-spacing-xs)} - 1px) v(eui-spacing-xs);
-        }
-
-        &[readonly],
-        &--read-only {
-            height: inherit;
-            padding: 0 !important;
-        }
-    }
-
-    .eui-input-group-addon-item {
-        min-height: calc(2.5 * #{v(eui-spacing)});
-        min-width: calc(2.5 * #{v(eui-spacing)});
-        padding: calc(#{v(eui-spacing-xs)} - 1px);
-    }
-
-    .eui-button {
-        min-height: calc(2.5 * #{v(eui-spacing)});
-        min-width: calc(2.5 * #{v(eui-spacing)});
-        padding: calc(#{v(eui-spacing-xs)} - 1px) v(eui-spacing-s);
-
-        &--icon-only {
-            padding: calc(#{v(eui-spacing-xs)} - 1px) v(eui-spacing-xs);
-        }
-    }
-
-    .eui-autocomplete {
-        &__container {
-            .eui-autocomplete__field-wrapper input {
-                height: calc(2.5 * #{v(eui-spacing)});    // 40px
-            }
-        }
-    }
-}
-
-// TABLE
-/////////////////
-.eui-table.eui-t-compact {
-    // Exposed CSS variables
-    --eui-font-size: 14px;                              // Font size base for compact theme
-    --eui-line-height-base: 1.25;                       // Unitless number value is multiplied by the element's font size
-    --eui-table-header-padding: var(--eui-spacing-s);   // Table header spacer set to 0.75rem
-    --eui-table-row-padding: var(--eui-spacing-2xs);    // Table body row spacer set to 0.25rem
-    --eui-table-footer-padding: var(--eui-spacing-s);   // Table footer spacer set to 0.75rem
-    // Setup
-    font-size: var(--eui-font-size);                    // Applies the defined custom font size
-    line-height: var(--eui-line-height-base);           // Applies the defined custom line height ratio
-
-    // Internals
-    thead {
-        tr {
-            height: auto;
-
-            th {
-                padding: var(--eui-table-header-padding);
-            }
-        }
-    }
-
-    tbody {
-        tr {
-            height: auto;
-
-            td {
-                padding: var(--eui-table-row-padding);
-            }
-        }
-    }
-
-    tfoot {
-        tr {
-            height: auto;
-
-            td {
-                padding: var(--eui-table-footer-padding);
-            }
-        }
-    }
-}
-
-// CARD
-/////////////////
-.eui-card.eui-t-compact {
-    // Exposed CSS variables
-    --eui-font-size: 14px;                      // Font size base for compact theme
-    --eui-line-height-base: 1.25;               // Unitless number value is multiplied by the element's font size
-    // Setup
-    font-size: var(--eui-font-size);            // Applies the defined custom font size
-    line-height: var(--eui-line-height-base);   // Applies the defined custom line height ratio
-}

package/src/styles/08-themes/eui/compact/_module.scss

@@ -1,2 +0,0 @@
-@import 'get-token-vars';
-@import 'eui-t-compact';