@eui/styles 18.0.0-next.73 → 18.0.0-next.75

package/dist/base/05-assets/flags/_module.scss

@@ -0,0 +1,2 @@
+@import 'icons';
+@import 'icons-generics';

package/dist/base/05-assets/icons-svg/_icons-generics.scss

@@ -0,0 +1,9 @@
+.eui-icon-svg {
+    fill: currentColor;
+    margin: 0;
+    transform: scaleX(1) scaleY(1) rotateZ(0deg);
+    transition: transform 300ms ease-in-out;
+    display: inline-flex;
+    align-items: center;
+}
+

package/dist/base/05-assets/icons-svg/_module.scss

@@ -0,0 +1 @@
+@import 'icons-generics';

package/dist/base/99-utilities/_module-extras.scss

@@ -0,0 +1 @@
+@import 'tokens/colors-default-full-palettes';

package/dist/base/99-utilities/_module-legacy.scss

@@ -0,0 +1,2 @@
+@import 'tokens/colors-legacy';
+@import 'tokens/typography-legacy';

package/dist/base/99-utilities/_module.scss

@@ -0,0 +1,19 @@
+@import 'tokens/colors-default';
+@import 'tokens/typography';
+@import 'tokens/shadows';
+@import 'tokens/spacings';
+@import 'tokens/paddings';
+@import 'tokens/margins';
+@import 'tokens/opacity';
+@import 'tokens/z-indexes';
+
+@import 'others/eui-u-anim';
+@import 'others/eui-u-border-states';
+@import 'others/eui-u-cursors';
+@import 'others/eui-u-display';
+@import 'others/eui-u-flex';
+@import 'others/eui-u-overflow';
+@import 'others/eui-u-position';
+@import 'others/eui-u-states';
+@import 'others/eui-u-visibility';
+@import 'others/eui-u-width';

package/dist/base/99-utilities/others/_eui-u-anim.scss

@@ -0,0 +1,85 @@
+.eui-u-anim {
+    animation-fill-mode: both;
+    animation-delay: v(eui-base-animation-delay);
+    animation-direction: v(eui-base-animation-direction);
+    animation-duration: v(eui-base-animation-duration-base);
+    animation-fill-mode: v(eui-base-animation-fill-mode);
+    transition: v(eui-base-animation-transition-base);
+
+    &--infinite {
+        animation-iteration-count: infinite !important;
+    }
+
+    &--fast {
+        animation-duration: v(eui-base-animation-duration-fast) !important;
+    }
+
+    &--medium {
+        animation-duration: v(eui-base-animation-duration-medium) !important;
+    }
+
+    &--slow {
+        animation-duration: v(eui-base-animation-duration-slow) !important;
+    }
+
+    // Animation effects
+    &.eui-u-anim--bob {
+        @include eui-anim--bob();
+    }
+
+    &.eui-u-anim--buzz {
+        @include eui-anim--buzz();
+    }
+
+    &.eui-u-anim--fadeIn {
+        @include eui-anim--fadeIn();
+    }
+
+    &.eui-u-anim--fadeOut {
+        @include eui-anim--fadeOut();
+    }
+
+    &.eui-u-anim--flipInY {
+        @include eui-anim--flipInY();
+    }
+
+    &.eui-u-anim--jackInTheBox {
+        @include eui-anim--jackInTheBox();
+    }
+
+    &.eui-u-anim--pop {
+        @include eui-anim--pop();
+    }
+
+    &.eui-u-anim--pulsar {
+        @include eui-anim--pulsar();
+    }
+
+    &.eui-u-anim--pulse {
+        @include eui-anim--pulse();
+    }
+
+    &.eui-u-anim--slideInDown {
+        @include eui-anim--slideInDown();
+    }
+
+    &.eui-u-anim--slideInLeft {
+        @include eui-anim--slideInLeft();
+    }
+
+    &.eui-u-anim--slideInRight {
+        @include eui-anim--slideInRight();
+    }
+
+    &.eui-u-anim--slideInUp {
+        @include eui-anim--slideInUp();
+    }
+
+    &.eui-u-anim--spin {
+        @include eui-anim--spin();
+    }
+
+    &.eui-u-anim--wobble {
+        @include eui-anim--wobble();
+    }
+}

package/dist/base/99-utilities/others/_eui-u-border-states.scss

@@ -0,0 +1,35 @@
+.eui-u-border-none {
+    border: v(eui-bw-none) !important;    // Used in forms read-only
+}
+
+.eui-u-border-state-primary {
+    border-left: v(eui-bw-m) solid v(eui-c-primary) !important;
+}
+
+.eui-u-border-state-secondary {
+    border-left: v(eui-bw-m) solid v(eui-c-neutral-light) !important;
+}
+
+.eui-u-border-state-info {
+    border-left: v(eui-bw-m) solid v(eui-c-info) !important;
+}
+
+.eui-u-border-state-success {
+    border-left: v(eui-bw-m) solid v(eui-c-success) !important;
+}
+
+.eui-u-border-state-warning {
+    border-left: v(eui-bw-m) solid v(eui-c-warning) !important;
+}
+
+.eui-u-border-state-danger {
+    border-left: v(eui-bw-m) solid v(eui-c-danger) !important;
+}
+
+.eui-u-border-state-accent {
+    border-left: v(eui-bw-m) solid v(eui-c-accent) !important;
+}
+
+.eui-u-border-bottom-separator {
+    border-bottom: v(eui-bw-xs) solid v(eui-c-neutral-lighter) !important;
+}

package/dist/base/99-utilities/others/_eui-u-cursors.scss

@@ -0,0 +1,43 @@
+.eui-u-cursor-pointer {
+    cursor: pointer !important;
+}
+
+.eui-u-cursor-default {
+    cursor: default !important;
+}
+
+.eui-u-cursor-help {
+    cursor: help !important;
+}
+
+.eui-u-cursor-move {
+    cursor: move !important;
+}
+
+.eui-u-cursor-crosshair {
+    cursor: crosshair !important;
+}
+
+.eui-u-cursor-wait {
+    cursor: wait !important;
+}
+
+.eui-u-cursor-progress {
+    cursor: progress !important;
+}
+
+.eui-u-cursor-text {
+    cursor: text !important;
+}
+
+.eui-u-cursor-no-drop {
+    cursor: no-drop !important;
+}
+
+.eui-u-cursor-not-allowed {
+    cursor: not-allowed !important;
+}
+
+.eui-u-cursor-grab {
+    cursor: grab !important;
+}

package/dist/base/99-utilities/others/_eui-u-display.scss

@@ -0,0 +1,39 @@
+.eui-u-display-hidden {
+    display: none !important;
+}
+
+.eui-u-display-visible {
+    visibility: visible !important;
+}
+
+.eui-u-display-block {
+    display: block !important;
+}
+
+.eui-u-display-inline {
+    display: inline !important;
+}
+
+.eui-u-display-inline-block {
+    display: inline-block !important;
+}
+
+.eui-u-display-print-only {
+    display: none !important;
+}
+
+.eui-u-display-hidden-desktop-down {
+    display: initial;
+}
+
+@include media($eui-bkp-desktop-down) {
+    .eui-u-display-hidden-desktop-down {
+        display: none !important;
+    }
+}
+
+@include media($eui-bkp-mobile) {
+    .eui-u-display-hidden-mobile {
+        display: none !important;
+    }
+}

package/dist/base/99-utilities/others/_eui-u-flex.scss

@@ -0,0 +1,121 @@
+// DEPRECATIONS WILL OCCUR IN NEXT eUI16 RELEASE (TODO)
+// CONTAINERS
+.eui-u-flex {
+    align-items: center !important;
+    display: flex !important;
+    width: 100% !important;
+}
+
+.eui-u-inline-flex {
+    align-items: center !important;
+    display: inline-flex !important;
+}
+
+// Replacement of d-flex
+.eui-u-display-flex {
+    display: flex !important;
+}
+
+.eui-u-display-inline-flex {
+    display: inline-flex !important;
+}
+
+// JUSTIFY content
+.eui-u-flex-start,  // DEPRECATED
+.eui-u-flex-justify-content-start {
+    justify-content: flex-start !important;
+}
+
+.eui-u-flex-end,    // DEPRECATED
+.eui-u-flex-justify-content-end {
+    justify-content: flex-end !important;
+}
+
+.eui-u-flex-justify-content-center {
+    justify-content: center !important;
+}
+
+.eui-u-flex-justify-content-around {
+    justify-content: space-around !important;
+}
+
+.eui-u-flex-between,    // DEPRECATED
+.eui-u-flex-justify-content-between {
+    justify-content: space-between !important;
+}
+
+.eui-u-flex-evenly,     // DEPRECATED
+.eui-u-flex-justify-content-evenly {
+    justify-content: space-evenly !important;
+}
+
+// ITEMS alignements
+.eui-u-flex-align-left,     // DEPRECATED
+.eui-u-flex-align-items-start {
+    align-items: flex-start !important;
+}
+
+.eui-u-flex-align-center,   // DEPRECATED
+.eui-u-flex-align-items-center {
+    align-items: center !important;
+}
+.eui-u-flex-align-right,    // DEPRECATED
+.eui-u-flex-align-items-end {
+    align-items: flex-end !important;
+}
+
+.eui-u-flex-align-items-stretch {
+    align-items: stretch !important;
+}
+
+// DIRECTION layout
+.eui-u-flex-row {
+    flex-direction: row !important;
+}
+
+.eui-u-flex-row-reverse {
+    flex-direction: row-reverse !important;
+}
+
+.eui-u-flex-column {
+    flex-direction: column !important;
+}
+
+.eui-u-flex-column-reverse {
+    flex-direction: column-reverse !important;
+}
+
+// VARIOUS
+.eui-u-flex-wrap {
+    flex-wrap: wrap !important;
+}
+
+.eui-u-flex-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+}
+
+.eui-u-flex-nowrap {
+    flex-wrap: nowrap !important;
+}
+
+.eui-u-flex-col {
+    flex: 1 0 0% !important;
+}
+
+.eui-u-flex-grow {
+    display: initial !important;
+    flex-grow: 1 !important;
+}
+
+.eui-u-flex-no-grow {
+    flex-grow: 0 !important;
+}
+
+.eui-u-flex-shrink {
+    display: initial !important;
+    flex-shrink: 0 !important;
+}
+
+.eui-u-flex-no-shrink {
+    flex-shrink: 0 !important;
+}

package/dist/base/99-utilities/others/_eui-u-overflow.scss

@@ -0,0 +1,11 @@
+.eui-u-overflow-auto {
+    overflow: auto !important;
+}
+
+.eui-u-overflow-hidden {
+    overflow: hidden !important;
+}
+
+.eui-u-overflow-visible {
+    overflow: visible !important;
+}

package/dist/base/99-utilities/others/_eui-u-position.scss

@@ -0,0 +1,11 @@
+.eui-u-p-relative {
+    position: relative !important;
+}
+
+.eui-u-p-fixed {
+    position: fixed !important;
+}
+
+.eui-u-p-absolute {
+    position: absolute !important;
+}

package/dist/base/99-utilities/others/_eui-u-states.scss

@@ -0,0 +1,9 @@
+.eui-u-disabled {
+    background-image: none !important;
+    box-shadow: none !important;
+    cursor: not-allowed !important;
+    opacity: v(eui-o-50) !important;
+    // pointer-events: none !important;
+}
+
+

package/dist/base/99-utilities/others/_eui-u-visibility.scss

@@ -0,0 +1,7 @@
+.eui-u-visibility-visible {
+    visibility: visible !important;
+}
+
+.eui-u-visibility-hidden {
+    visibility: hidden !important;
+}

package/dist/base/99-utilities/others/_eui-u-width.scss

@@ -0,0 +1,15 @@
+.eui-u-width-auto {
+    width: auto !important;
+}
+
+.eui-u-width-100 {
+    width: 100% !important;
+}
+
+@for $i from 1 through 30 {
+    .eui-u-width-#{$i} {
+        max-width: calc(#{$i} * #{v(eui-s-m)});
+        min-width: calc(#{$i} * #{v(eui-s-m)});
+        width: calc(#{$i} * #{v(eui-s-m)}) !important;
+    }
+}

package/dist/base/99-utilities/tokens/_colors-default-full-palettes.scss

@@ -0,0 +1,12 @@
+@each $color, $shades in $eui-base-tokens-colors {
+    @each $shade, $value in $shades {
+        .eui-u-c-#{$color + '-' + $shade} {
+            color: var(--eui-bc-#{$color + '-' + $shade}) !important;
+        };
+
+        .eui-u-c-bg-#{$color + '-' + $shade} {
+            background-color: var(--eui-bc-#{$color + '-' + $shade}) !important;
+            color: var(--eui-bc-#{$color + '-' + $shade}-contrast) !important;
+        }
+    }
+}

package/dist/base/99-utilities/tokens/_colors-default.scss

@@ -0,0 +1,48 @@
+// in v18, default utilities are mapping the context colors
+.eui-u-c-black {
+    color: var(--eui-c-black) !important;
+}
+
+.eui-u-c-bg-black {
+    background-color: var(--eui-c-black) !important;
+    color: var(--eui-c-white) !important;
+}
+
+.eui-u-c-white {
+    color: var(--eui-c-white) !important;
+}
+
+.eui-u-c-bg-white {
+    background-color: var(--eui-c-white) !important;
+    color: var(--eui-c-text) !important;
+}
+
+
+// context colors
+@each $color, $shades in $eui-base-context-colors {
+    @each $shade, $value in $shades {
+        @if $shade != border and $shade != hover {
+
+            @if $shade == base {
+                .eui-u-c-#{$color} {
+                    color: var(--eui-c-#{$color}) !important;
+                };
+
+                .eui-u-c-bg-#{$color} {
+                    background-color: var(--eui-c-#{$color}) !important;
+                    color: var(--eui-c-#{$color}-contrast) !important;
+                }
+
+            } @else {
+                .eui-u-c-#{$color + '-' + $shade} {
+                    color: var(--eui-c-#{$color + '-' + $shade}) !important;
+                };
+
+                .eui-u-c-bg-#{$color + '-' + $shade} {
+                    background-color: var(--eui-c-#{$color + '-' + $shade}) !important;
+                    color: var(--eui-c-#{$color + '-' + $shade}-contrast) !important;
+                }
+            }
+        }
+    }
+}

package/dist/base/99-utilities/tokens/_colors-legacy.scss

@@ -0,0 +1,37 @@
+html.eui-t-eui-legacy {
+    .eui-u-color-black {
+        color: var(--eui-c-black) !important;
+    }
+
+    .eui-u-bg-color-black {
+        background-color: var(--eui-c-black) !important;
+        color: var(--eui-c-white) !important;
+    }
+
+    .eui-u-color-white {
+        color: var(--eui-c-white) !important;
+    }
+
+    .eui-u-bg-color-white {
+        background-color: var(--eui-c-white) !important;
+        color: var(--eui-c-text) !important;
+    }
+    @each $color, $shades in $eui-base-tokens-colors-eui-legacy {
+        @each $shade, $value in $shades {
+            $base-color: $color;
+
+            @if $color == 'neutral' {
+                $base-color: 'grey'
+            }
+
+            .eui-u-color-#{$base-color + '-' + $shade} {
+                color: var(--eui-base-color-#{$base-color + '-' + $shade}) !important;
+            };
+
+            .eui-u-bg-color-#{$base-color + '-' + $shade} {
+                background-color: var(--eui-base-color-#{$base-color + '-' + $shade}) !important;
+                color: var(--eui-base-color-#{$base-color + '-' + $shade}-contrast) !important;
+            }
+        }
+    }
+}

package/dist/base/99-utilities/tokens/_margins.scss

@@ -0,0 +1,38 @@
+@each $spacing, $value in $eui-base-tokens-spacings {
+    .eui-u-mt-#{$spacing} {
+        margin-top: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-mb-#{$spacing} {
+        margin-bottom: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-ml-#{$spacing} {
+        margin-left: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-mr-#{$spacing} {
+        margin-right: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-m-#{$spacing} {
+        margin: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-mv-#{$spacing} {
+        margin-top: var(--eui-s-#{$spacing}) !important;
+        margin-bottom: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-mh-#{$spacing} {
+        margin-left: var(--eui-s-#{$spacing}) !important;
+        margin-right: var(--eui-s-#{$spacing}) !important;
+    }
+ }
+
+.eui-u-ml-auto {
+    margin-left: auto !important;
+}
+.eui-u-mr-auto {
+    margin-right: auto !important;
+}
+.eui-u-mt-auto {
+    margin-top: auto !important;
+}
+.eui-u-mb-auto {
+    margin-bottom: auto !important;
+}

package/dist/base/99-utilities/tokens/_opacity.scss

@@ -0,0 +1,5 @@
+@each $idx, $value in $eui-base-tokens-opacity {
+    .eui-u-o-#{$idx} {
+        opacity: var(--eui-o-#{$idx}) !important;
+    }
+}

package/dist/base/99-utilities/tokens/_paddings.scss

@@ -0,0 +1,31 @@
+@each $spacing, $value in $eui-base-tokens-spacings {
+    .eui-u-pt-#{$spacing} {
+        padding-top: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-pb-#{$spacing} {
+        padding-bottom: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-pl-#{$spacing} {
+        padding-left: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-pr-#{$spacing} {
+        padding-right: var(--eui-s-#{$spacing}) !important;
+    }
+
+    .eui-u-p-#{$spacing} {
+        padding: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-pv-#{$spacing} {
+        padding-top: var(--eui-s-#{$spacing}) !important;
+        padding-bottom: var(--eui-s-#{$spacing}) !important;
+    }
+    .eui-u-ph-#{$spacing} {
+        padding-left: var(--eui-s-#{$spacing}) !important;
+        padding-right: var(--eui-s-#{$spacing}) !important;
+    }
+
+    .eui-u-spacing-#{$spacing} {
+        min-width: var(--eui-s-#{$spacing}) !important;
+        width: var(--eui-s-#{$spacing}) !important;
+    }
+}

package/dist/base/99-utilities/tokens/_shadows.scss

@@ -0,0 +1,5 @@
+@each $shadow, $value in $eui-base-tokens-shadows {
+   .eui-u-sh-#{$shadow} {
+       box-shadow: var(--eui-sh-#{$shadow}) !important;
+   }
+}

package/dist/base/99-utilities/tokens/_spacings.scss

@@ -0,0 +1,6 @@
+@each $spacing, $value in $eui-base-tokens-spacings {
+    .eui-u-spacing-#{$spacing} {
+        min-width: var(--eui-s-#{$spacing}) !important;
+        width: var(--eui-s-#{$spacing}) !important;
+    }
+}

package/dist/base/99-utilities/tokens/_typography-legacy.scss

@@ -0,0 +1,25 @@
+html.eui-t-eui-legacy {
+    // FONTS
+    @each $font, $def in $eui-base-context-fonts {
+        .eui-u-font-#{$font} {
+            font: var(--eui-f-#{$font}) !important;
+        }
+    }
+    // ALIASES
+    .eui-u-font-bold {
+        font: var(--eui-f-bold) !important;
+    }
+
+    .eui-u-font-regular {
+        font-style: normal !important;
+        font-weight: normal !important;
+    }
+    .eui-u-font-bold-italic {
+        font-style: italic !important;
+        font-weight: 700 !important;
+    }
+    .eui-u-font-italic {
+        font-style: italic !important;
+        font-weight: normal !important;
+    }
+}