@eui/styles 17.0.0-next.9 → 17.0.0-rc.2

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

@@ -0,0 +1,47 @@
+$eui-assets-path: '../../../assets';
+
+// BASE
+@import '_base';
+
+// RESET
+@import '00-reset/module';
+
+// BASE ROOT VARS
+@import '02b-base-vars/module';
+
+// ASSETS
+@import '03-assets/module';
+@import '03-assets/module-legacy-icons-font';
+@import '03-assets/module-icons-flags';
+
+// BOOTSTRAP ONLY
+@import '04-vendors/module-bootstrap-grid';
+
+// MATERIAL
+@import '05-material/module';
+
+// SHARED and overrides
+@import '06-shared/module';
+
+// COMPONENTS & DIRECTIVES
+@import '07-elements/module';
+
+// THEMES
+@import '08-themes/module-compact';
+@import '08-themes/module-dark';
+@import '08-themes/module-high-contrast';
+
+// MEDIA
+@import '10-media/module';
+
+// MEDIA
+@import '10-media/module-print';
+
+// EXTRAS CMP & OVERRIDES
+@import '11-extras/module';
+
+// UTILITIES
+@import '99-utilities/module';
+
+// 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';
@@ -16,7 +17,6 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // BOOTSTRAP ONLY
 @import '04-vendors/module-bootstrap-grid';
-@import '04-vendors/module-bootstrap-utilities';
 
 // MATERIAL
 @import '05-material/module';
@@ -29,9 +29,12 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 
 // THEMES
 @import '08-themes/module-compact';
+@import '08-themes/module-dark';
+@import '08-themes/module-high-contrast';
 
 // MEDIA
 @import '10-media/module';
+
 // MEDIA
 @import '10-media/module-print';
 

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-theme-high-contrast.scss

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

package/src/styles/eui.scss

@@ -24,9 +24,6 @@ $eui-assets-path: '@eui/styles-base/dist/assets';
 // 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/_material-cdk.scss

@@ -1,108 +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;
-}

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

@@ -1,2 +0,0 @@
-@import 'material-cdk';
-@import 'overrides/module';

package/src/styles/06-shared/_default.scss

@@ -1,11 +0,0 @@
-table {
-    border: 0 transparent;
-}
-
-:focus {
-    outline: 0;
-}
-
-:focus-visible {
-    outline: 0;
-}