@eui/styles 18.0.0-next.74 → 18.0.0-next.76

package/dist/assets/images/common/ion-avatar.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+    <path
+        d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z" />
+    <path
+        d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z" />
+</svg>

package/dist/base/00-reset/_module.scss

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+    line-height: var(--eui-base-line-height); /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* Sections
+     ========================================================================== */
+
+  /**
+   * Remove the margin in all browsers.
+   */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+   * Render the `main` element consistently in IE.
+   */
+
+  main {
+    display: block;
+  }
+
+  /**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+     ========================================================================== */
+
+  /**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+     ========================================================================== */
+
+  /**
+   * Remove the gray background on active links in IE 10.
+   */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+   * Add the correct font size in all browsers.
+   */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+     ========================================================================== */
+
+  /**
+   * Remove the border on images inside links in IE 10.
+   */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+     ========================================================================== */
+
+  /**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1; /* 1 */   // eUI adapations forced to "1"
+    margin: 0; /* 2 */
+  }
+
+  /**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+  button,
+  input { /* 1 */
+    overflow: visible;
+  }
+
+  /**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+  button,
+  select { /* 1 */
+    text-transform: none;
+  }
+
+  /**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+   * Remove the inner border and padding in Firefox.
+   */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+   * Correct the padding in Firefox.
+   */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+     ========================================================================== */
+
+  /*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+  details {
+    display: block;
+  }
+
+  /*
+   * Add the correct display in all browsers.
+   */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+     ========================================================================== */
+
+  /**
+   * Add the correct display in IE 10+.
+   */
+
+  template {
+    display: none;
+  }
+
+  /**
+   * Add the correct display in IE 10.
+   */
+
+  [hidden] {
+    display: none;
+  }

package/dist/base/01-base/_module.scss

@@ -0,0 +1,3 @@
+@import 'functions/module';
+@import 'variables';
+@import 'mixins/module';

package/dist/base/01-base/_variables.scss

@@ -0,0 +1,33 @@
+// ASSETS PATHS - overridden by dev-only for relative imports if any
+$eui-assets-base-path: '@eui/styles/dist/assets' !default;
+
+// BREAKPOINT / MEDIA QUERIES boundaries
+
+$ecl-base-breakpoints: (
+  'xs': 0,
+  's': 480px,
+  'm': 768px,
+  'l': 996px,
+  'xl': 1140px,
+);
+
+// naming
+$xs: new-breakpoint(min-width map-get($ecl-base-breakpoints, 'xs') max-width map-get($ecl-base-breakpoints, 's') - 1) !default;
+$s: new-breakpoint(min-width map-get($ecl-base-breakpoints, 's') max-width map-get($ecl-base-breakpoints, 'm') - 1) !default;
+$m: new-breakpoint(min-width map-get($ecl-base-breakpoints, 'm') max-width map-get($ecl-base-breakpoints, 'l') - 1) !default;
+$l: new-breakpoint(min-width map-get($ecl-base-breakpoints, 'l') max-width map-get($ecl-base-breakpoints, 'xl') - 1) !default;
+$xl: new-breakpoint(min-width map-get($ecl-base-breakpoints, 'xl') max-width 1400px) !default;
+$xxl: new-breakpoint(min-width 1400px) !default;
+$xxxl: new-breakpoint(min-width 1900px) !default;
+
+// human naming
+$eui-bkp-mobile-down: $xs !default;
+$eui-bkp-mobile: new-breakpoint(max-width map-get($ecl-base-breakpoints, 'm') - 1) !default;
+$eui-bkp-mobile-up: new-breakpoint(min-width map-get($ecl-base-breakpoints, 'm')) !default;
+$eui-bkp-tablet: $m !default;
+$eui-bkp-tablet-up: new-breakpoint(min-width map-get($ecl-base-breakpoints, 'l')) !default;
+$eui-bkp-desktop-down: new-breakpoint(max-width map-get($ecl-base-breakpoints, 'l') - 1) !default;
+$eui-bkp-desktop: new-breakpoint(min-width map-get($ecl-base-breakpoints, 'xl')) !default;
+$eui-bkp-desktop-up: new-breakpoint(min-width map-get($ecl-base-breakpoints, 'l')) !default;
+$eui-bkp-desktop-wide: $xxl !default;
+$eui-bkp-desktop-fhd: $xxxl !default;

package/dist/base/01-base/functions/_module.scss

@@ -0,0 +1 @@
+@import 'other.functions.scss';

package/dist/base/01-base/functions/_other.functions.scss

@@ -0,0 +1,40 @@
+@use "sass:math";
+
+@function v($var, $fallback: null) {
+    @if ($fallback) {
+        @return var(--#{$var}, #{$fallback});
+    } @else {
+        @return var(--#{$var});
+    }
+}
+@function map-deep-get($map, $keys...) {
+    @each $key in $keys {
+        @debug #{$map};
+        $map: map-get($map, $key);
+    }
+    @return $map;
+}
+
+@function new-breakpoint($query: $feature $value) {
+    @if length($query) == 1 {
+        $query: $default-feature nth($query, 1);
+    } @else if is-even(length($query)) {
+        $query: append($query, 12);
+    }
+    @return $query;
+}
+@function strip-units($value) {
+    @return math.div($value, $value * 0 + 1);
+}
+@function to-rem($pxval) {
+    @if not unitless($pxval) {
+        $pxval: strip-units($pxval);
+    }
+    $base: 16px;
+    @if not unitless($base) {
+        $base: strip-units($base);
+    }
+    @return math.div($pxval, $base) * 1rem;
+}
+
+

package/dist/base/01-base/mixins/_accessibility.mixins.scss

@@ -0,0 +1,60 @@
+$outline-offset: -2px;
+$outline-size: 2px;
+
+// Call this mixin to enforce the accessibility visuals when on focus/active
+@mixin eui-accessible-focus($offset: $outline-offset, $size: $outline-size) {
+    &:focus:not([readonly]) {
+        outline: $size solid var(--eui-c-focus) !important;
+        outline-offset: $offset !important;
+        transition: none;
+    }
+
+    &:focus-visible:not([readonly]) {
+        outline: $size solid var(--eui-c-focus-visible) !important;
+        outline-offset: $offset !important;
+        transition: none;
+    }
+
+    // Forced focusable element
+    [tabindex="0"] {
+        // &:active:not([readonly]),
+        &:focus:not([readonly]) {
+            outline: $size solid var(--eui-c-focus-visible) !important;
+            outline-offset: $offset !important;
+            transition: none;
+        }
+    }
+
+}
+@mixin eui-accessible-focus-visible($offset: $outline-offset, $size: $outline-size) {
+    &:focus-visible:not([readonly]) {
+        outline: $size solid var(--eui-c-focus-visible) !important;
+        outline-offset: $offset !important;
+        transition: none;
+    }
+}
+
+@mixin eui-accessible-focus-rounded($offset: $outline-offset, $size: $outline-size) {
+    &:focus:not([readonly]) {
+        border-radius: var(--eui-br-max);
+        outline: $size solid var(--eui-c-focus) !important;
+        outline-offset: $offset !important;
+        transition: none;
+    }
+
+    &:focus-visible:not([readonly]) {
+        border-radius: var(--eui-br-max);
+        outline: $size solid var(--eui-c-focus-visible) !important;
+        outline-offset: $offset !important;
+        transition: none;
+    }
+}
+
+@mixin eui-accessible-focus-border() {
+    border-left: v(eui-s-2xs) solid transparent;
+
+    &:focus:not([readonly]) {
+        border: var(--eui-s-2xs) solid var(--eui-c-focus-visible) !important;
+        transition: none;
+    }
+}

package/dist/base/01-base/mixins/_icon-svg.mixins.scss

@@ -0,0 +1,74 @@
+@mixin pseudoSvgIconCommon() {
+    height: 1rem;
+    width: 1rem;
+    content: '';
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    mask-size: cover;
+}
+@mixin pseudoSvgIconCommonSize() {
+    height: 1rem;
+    width: 1rem;
+}
+
+
+
+@mixin pseudoSvgIconCheckmarkWhite() {
+    @include pseudoSvgIconCommon();
+    mask-image: var(--eui-internal-icon-checkmark-path);
+    background-color: v(eui-c-white);
+}
+@mixin pseudoSvgIconCheckmarkBlack() {
+    @include pseudoSvgIconCommonSize();
+    content: var(--eui-internal-icon-checkmark-path);
+}
+
+@mixin pseudoSvgIconRemoveWhite() {
+    @include pseudoSvgIconCommon();
+    mask-image: var(--eui-internal-icon-remove-path);
+    background-color: v(eui-c-white);
+}
+@mixin pseudoSvgIconRemoveBlack() {
+    @include pseudoSvgIconCommonSize();
+    content: var(--eui-internal-icon-remove-path);
+}
+
+@mixin pseudoSvgIconExternalWhite() {
+    @include pseudoSvgIconCommon();
+    mask-image: var(--eui-internal-icon-external-path);
+    background-color: v(eui-c-white);
+}
+@mixin pseudoSvgIconExternalPrimary() {
+    @include pseudoSvgIconCommon();
+    mask-image: var(--eui-internal-icon-external-path);
+    background-color: v(eui-c-primary);
+}
+@mixin pseudoSvgIconExternalBlack() {
+    @include pseudoSvgIconCommonSize();
+    content: var(--eui-internal-icon-external-path);
+}
+
+@mixin pseudoSvgIconEllipseWhite() {
+    @include pseudoSvgIconCommon();
+    mask-image: var(--eui-internal-icon-ellipse-path);
+    background-color: v(eui-c-white);
+}
+@mixin pseudoSvgIconEllipsePrimary() {
+    @include pseudoSvgIconCommon();
+    mask-image: var(--eui-internal-icon-ellipse-path);
+    background-color: v(eui-c-primary);
+}
+@mixin pseudoSvgIconEllipseDanger() {
+    @include pseudoSvgIconCommon();
+    mask-image: var(--eui-internal-icon-ellipse-path);
+    background-color: v(eui-c-danger);
+}
+@mixin pseudoSvgIconEllipseBlack() {
+    @include pseudoSvgIconCommonSize();
+    content: var(--eui-internal-icon-ellipse-path);
+}
+
+@mixin pseudoSvgIconChevronDownBlack() {
+    @include pseudoSvgIconCommonSize();
+    content: var(--eui-internal-icon-chevron-down-path);
+}

package/dist/base/01-base/mixins/_media.mixins.scss

@@ -0,0 +1,26 @@
+$default-feature: "min-width";
+@mixin media($query: $feature $value $columns) {
+    @if length($query) == 1 {
+        @media screen and ($default-feature: nth($query, 1)) {
+            @content;
+        }
+    }
+    @else {
+        $loop-to: length($query);
+        $media-query: "screen and ";
+        @if is-not(is-even(length($query))) {
+            $loop-to: $loop-to - 1;
+        }
+        $i: 1;
+        @while $i <=$loop-to {
+            $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
+            @if ($i + 1) != $loop-to {
+                $media-query: $media-query + "and ";
+            }
+            $i: $i+2;
+        }
+        @media #{$media-query} {
+            @content;
+        }
+    }
+}

package/dist/base/01-base/mixins/_module.scss

@@ -0,0 +1,7 @@
+@import 'animations/module';
+
+@import 'accessibility.mixins';
+@import 'state.mixins';
+@import 'icon-svg.mixins';
+@import 'media.mixins';
+@import 'other.mixins';

package/dist/base/01-base/mixins/_other.mixins.scss

@@ -0,0 +1,5 @@
+@mixin eui-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/dist/base/01-base/mixins/_state.mixins.scss

@@ -0,0 +1,6 @@
+@mixin eui-state-hover() {
+    &:hover {
+        background-color: var(--eui-c-hover);
+        cursor: pointer;
+    }
+}

package/dist/base/01-base/mixins/animations/__hacks.scss

@@ -0,0 +1,36 @@
+// DISPLAY HACKS - mixins used to quickly drop in hacks for each element on some devices/browsers
+
+// ENABLE HARDWARE ACCELERATION
+// Enables hardware acceleration on many mobile/tablet devices which will improve the performance of a transition effect,
+// as well as prevent other elements around the one transitioning from moving. Perspective also reduces blurryness of text in Chrome.
+@mixin hardwareAccel() {
+	transform: perspective(1px) translateZ(0);
+}
+
+// IMPROVE ANTI ALIAS
+// On many mobile/tablet devices, using transforms can cause a thin line to be drawn around an element.
+// To improve aliasing of these elements on mobile/tablet devices, a transparent box-shadow is applied.
+@mixin improveAntiAlias() {
+	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+
+// FORCE BLOCK LEVEL
+// Transforms need to be block-level to work
+@mixin forceBlockLevel() {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+// TAP HIGHLIGHT FIX
+// Prevent highlight colour when an element is tapped
+@mixin hideTapHighlightColor() {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+// APPLY THE HACKS
+@mixin hacks() {
+	@include hardwareAccel();    // Problem with background
+    // @include improveAntiAlias();
+    @include forceBlockLevel();
+    @include hideTapHighlightColor();
+}

package/dist/base/01-base/mixins/animations/_bob.scss

@@ -0,0 +1,32 @@
+@mixin eui-anim--bob {
+    @include hacks();
+
+    @keyframes eui-anim--bob {
+        0% {
+            transform: translateY(-8px);
+        }
+        50% {
+            transform: translateY(-4px);
+        }
+        100% {
+            transform: translateY(-8px);
+        }
+    }
+    @keyframes eui-anim--bob-float {
+        100% {
+            transform: translateY(-8px);
+        }
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        animation-name: eui-anim--bob-float, eui-anim--bob;
+        animation-duration: 0.3s, 1.5s;
+        animation-delay: 0s, 0.3s;
+        animation-timing-function: ease-out, ease-in-out;
+        animation-iteration-count: 1, infinite;
+        animation-fill-mode: forwards;
+        animation-direction: normal, alternate;
+	}
+}