@eui/styles 17.0.0-next.2 → 17.0.0-next.21

package/src/styles/eui-legacy-icons-font.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// LEGACY ICONS FONT
+@import '03-assets/module-legacy-icons-font';

package/src/styles/eui-print.scss

@@ -1,3 +1,5 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
 // BASE
 @import '_base';
 

package/src/styles/eui-showcase-all-dev.scss

@@ -1,22 +1,24 @@
+$eui-assets-path: '../../../assets';
+
 // BASE
 @import '_base';
 
 // RESET
 @import '00-reset/module';
 
+// ECL for eUI
+@import '01-ecl/module-eui-ecl';
+
 // BASE ROOT VARS
 @import '02b-base-vars/module';
 
 // ASSETS
 @import '03-assets/module';
-// ICON FONT legacy export
-// @import '03-assets/module-legacy-icons-font';  // v17 removed
+@import '03-assets/module-legacy-icons-font';
+@import '03-assets/module-icons-flags';
 
 // BOOTSTRAP ONLY
 @import '04-vendors/module-bootstrap-grid';
-@import '04-vendors/module-bootstrap-utilities';
-// // VENDORS and overrides
-// @import '04-vendors/module-legacy';  // v17 removed
 
 // MATERIAL
 @import '05-material/module';
@@ -24,17 +26,16 @@
 // SHARED and overrides
 @import '06-shared/module';
 
-// COMPONENTS
+// COMPONENTS & DIRECTIVES
 @import '07-elements/module';
 
-// COMPONENTS
-// @import '07-elements/module-legacy';  // v17 removed
-
 // THEMES
 @import '08-themes/module-compact';
+@import '08-themes/module-dark';
 
 // MEDIA
 @import '10-media/module';
+
 // MEDIA
 @import '10-media/module-print';
 
@@ -43,8 +44,6 @@
 
 // UTILITIES
 @import '99-utilities/module';
-// // UTILITIES
-// @import '99-utilities/module-legacy'; // v17 removed
 
 // showcase only styling
 @import '999-showcase/module';

package/src/styles/eui-showcase-all.scss

@@ -1,4 +1,5 @@
 $eui-assets-path: '@eui/styles-base/dist/assets';
+// $eui-assets-path: '../../../assets';
 
 // BASE
 @import '_base';
@@ -6,19 +7,19 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // RESET
 @import '00-reset/module';
 
+// ECL for eUI
+@import '01-ecl/module-eui-ecl';
+
 // BASE ROOT VARS
 @import '02b-base-vars/module';
 
 // ASSETS
 @import '03-assets/module';
-// ICON FONT legacy export
-// @import '03-assets/module-legacy-icons-font'; // v17 removed
+@import '03-assets/module-legacy-icons-font';
+@import '03-assets/module-icons-flags';
 
 // BOOTSTRAP ONLY
 @import '04-vendors/module-bootstrap-grid';
-@import '04-vendors/module-bootstrap-utilities';
-// // VENDORS and overrides
-// @import '04-vendors/module-legacy'; // v17 removed
 
 // MATERIAL
 @import '05-material/module';
@@ -29,14 +30,13 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // COMPONENTS
 @import '07-elements/module';
 
-// COMPONENTS
-// @import '07-elements/module-legacy';  // v17 removed
-
 // THEMES
 @import '08-themes/module-compact';
+@import '08-themes/module-dark';
 
 // MEDIA
 @import '10-media/module';
+
 // MEDIA
 @import '10-media/module-print';
 
@@ -45,8 +45,6 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // UTILITIES
 @import '99-utilities/module';
-// // UTILITIES
-// @import '99-utilities/module-legacy'; // v17 removed
 
 // showcase only styling
 @import '999-showcase/module';

package/src/styles/eui-theme-compact.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// BOOTSTRAP ONLY
+@import '08-themes/module-compact';

package/src/styles/eui-theme-dark.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// BOOTSTRAP ONLY
+@import '08-themes/module-dark';

package/src/styles/eui.scss

@@ -18,18 +18,12 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // MATERIAL - 22kb
 @import '05-material/module';
 
-// MATERIAL-CDK only - 5kb
-// @import '05-material/module-cdk';
-
 // SHARED and overrides - 1kb
 @import '06-shared/module';
 
 // COMPONENTS - 3kb
 @import '07-elements/module';
 
-// THEMES - 3kb
-@import '08-themes/module-compact';
-
 // MEDIA - 1kb
 @import '10-media/module';
 

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

@@ -1,39 +0,0 @@
-// Bordered focus accessibility visual (default: buttons, input fields, etc.)
-@mixin eui-accessible-focus() {
-    border-color: v(eui-base-color-accessible-focus) !important;    // Must
-    box-shadow: inset 0 0 0 1px v(eui-base-color-accessible-focus), inset 0 0 0 2px v(eui-base-color-grey-5);
-    outline: none;  // Must to override reboot default
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-// Outlined focus accessibility visual (checkboxes, radios)
-@mixin eui-accessible-focus-outline($offset: -2px, $outline-size: 2px) {
-    outline: $outline-size solid v(eui-base-color-accessible-focus);
-    outline-offset: $offset;
-    -moz-outline-radius: v(eui-base-border-radius);
-    transition: outline 0.15s ease-in-out, border 0.15s ease-in-out;
-}
-@mixin eui-accessible-focus-border-inline($display: '', $zIndex: auto) {
-    @if $display != '' {
-        display: $display;
-    }
-
-    z-index: $zIndex;
-    @include eui-accessible-focus();
-}
-// This is the main mixin to call/include
-@mixin eui-accessible-focus-border($display: '', $zIndex: auto, $inline: false) {
-    @if $inline {
-        @include eui-accessible-focus-border-inline($display, $zIndex);
-    }
-    @else {
-        &:active:not([readonly]),
-        &:focus:not([readonly]) {
-            @include eui-accessible-focus-border-inline($display, $zIndex);
-        }
-    }
-}
-@mixin eui-accessible-focus-border-rounded() {
-    border: 2px solid v(eui-base-color-accessible-focus);
-    outline: none;
-    transition: border 0.15s ease-in-out;
-}

package/src/styles/02-base/mixins/_ux-clearable-input.scss

@@ -1,29 +0,0 @@
-@mixin ux-clearable-input() {
-    // Adapted for IE11 compat: previous was inline-block and width: 100%
-    display: flex;
-    -ms-flex: 1 1 0%;   // IE fallback
-    flex: 1 1 0%;
-    position: relative;
-
-    .ux-clearable-input-wrapper__clear {
-        color: v(eui-base-color-grey-35);
-        cursor: pointer;
-        font-size: v(eui-base-font-size-xl);
-        font-style: normal;
-        position: absolute;
-        right: v(eui-base-spacing-xs);
-        top: v(eui-base-spacing-xs);
-        user-select: none;
-        z-index: v(eui-base-z-index-clearable-icon);
-
-        &:hover {
-            color: v(eui-base-color-danger);
-            opacity: 1;
-        }
-
-        &::before {
-            // content: $eui-icon-close-m; // TO DO v15 svg remplacement
-            font-family: 'eui-icons' !important;
-        }
-    }
-}

package/src/styles/02-base/mixins/_ux-form-control-state.scss

@@ -1,32 +0,0 @@
-// Form validation states
-@mixin ux-form-control-state($shade) {
-    // Color the label and help text
-    // .form-control-feedback,
-    // .ux-form-group__label,
-    .ux-form-control-feedback,
-    .form-control-label,
-    .col-form-label,
-    .form-check-label,
-    .custom-control,
-    .ux-custom-control {
-        color: getColor($shade);
-    }
-
-    // Set the border and box shadow on specific inputs to match
-    .ux-form-control {
-        border-color: getColor($shade);
-
-        &:focus {
-            box-shadow: v(eui-base-shadow-1);
-        }
-    }
-
-    // Set validation states also for addons
-    // Note that border color is already set the same as ux-form-control
-    // Cfr: 07-components\generic\forms\_inputs-ngvalidation.scss & inputs-feedback-states.scss
-    .ux-input-group-text {
-        background-color: getColor($shade, 75);
-        border-color: getColor($shade);
-        color: getColor($shade);
-    }
-}

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

@@ -1,110 +0,0 @@
-.cdk-high-contrast-active .mat-ripple-element {
-    display: none;
-}
-
-.cdk-visually-hidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    white-space: nowrap;
-    outline: 0;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    left: 0;
-}
-[dir="rtl"] .cdk-visually-hidden {
-    left: auto;
-    right: 0;
-}
-
-.cdk-overlay-container,
-.cdk-global-overlay-wrapper {
-    pointer-events: none;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-}
-
-.cdk-overlay-container {
-    position: fixed;
-    z-index: 1000;
-}
-.cdk-overlay-container:empty {
-    display: none;
-}
-
-.cdk-global-overlay-wrapper {
-    display: flex;
-    position: absolute;
-    z-index: 1000;
-}
-
-.cdk-overlay-pane {
-    position: absolute;
-    pointer-events: auto;
-    box-sizing: border-box;
-    z-index: 1000;
-    display: flex;
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.cdk-overlay-backdrop {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    pointer-events: auto;
-    -webkit-tap-highlight-color: transparent;
-    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-    opacity: 0;
-}
-.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
-    opacity: 1;
-}
-.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
-    opacity: 0.6;
-}
-
-.cdk-overlay-dark-backdrop {
-    background: rgba(0, 0, 0, 0.32);
-}
-
-.cdk-overlay-transparent-backdrop {
-    transition: visibility 1ms linear, opacity 1ms linear;
-    visibility: hidden;
-    opacity: 1;
-}
-.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
-    opacity: 0;
-    visibility: visible;
-}
-
-.cdk-overlay-backdrop-noop-animation {
-    transition: none;
-}
-
-.cdk-overlay-connected-position-bounding-box {
-    position: absolute;
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    min-width: 1px;
-    min-height: 1px;
-}
-
-.cdk-global-scrollblock {
-    position: fixed;
-    width: 100%;
-    overflow-y: scroll;
-}
-
-@import './overrides/module';