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

package/dist/base/03-vars/colors/theme-default-context.scss

@@ -0,0 +1,29 @@
+:root {
+    --eui-c-white: var(--eui-bc-neutral-0);
+    --eui-c-black: var(--eui-bc-neutral-160);
+
+    --eui-c-bg: var(--eui-bc-neutral-2);
+    --eui-c-text: var(--eui-bc-neutral-100);
+
+    --eui-c-focus-visible: var(--eui-bc-primary-100);
+    --eui-c-focus: var(--eui-bc-primary-20);
+
+    --eui-c-hover: var(--eui-bc-primary-5);
+    --eui-c-hover-disabled: var(--eui-bc-neutral-10);
+    --eui-c-active: var(--eui-bc-primary-10);
+    --eui-c-disabled: var(--eui-bc-neutral-60);
+
+    @each $color, $shades in $eui-base-context-colors {
+        @each $shade, $value in $shades {
+            $base-color: $color;
+
+            @if $shade == base {
+                --eui-c-#{$color}: var(--eui-bc-#{$base-color + '-' + $value});
+                --eui-c-#{$color}-contrast: var(--eui-bc-#{$base-color + '-' + $value}-contrast);
+            } @else {
+                --eui-c-#{$color + '-' + $shade}: var(--eui-bc-#{$base-color + '-' + $value});
+                --eui-c-#{$color + '-' + $shade}-contrast: var(--eui-bc-#{$base-color + '-' + $value}-contrast);
+            }
+        }
+    }
+}

package/dist/base/03-vars/colors/theme-ecl-eu-base.scss

@@ -0,0 +1,9 @@
+html.eui-t-ecl-eu {
+    // COLOR SHADES
+    @each $color, $shades in $eui-base-tokens-colors-ecl-eu {
+        @each $shade, $value in $shades {
+            --eui-bc-#{$color + '-' + $shade}: #{$value};
+            --eui-bc-#{$color + '-' + $shade}-contrast: #{getContrast($value)};
+        }
+    }
+}

package/dist/base/03-vars/colors/theme-eui-legacy-base.scss

@@ -0,0 +1,9 @@
+html.eui-t-eui-legacy {
+    // COLOR SHADES
+    @each $color, $shades in $eui-base-tokens-colors-eui-legacy {
+        @each $shade, $value in $shades {
+            --eui-bc-#{$color + '-' + $shade}: #{$value};
+            --eui-bc-#{$color + '-' + $shade}-contrast: #{getContrast($value)};
+        }
+    }
+}

package/dist/base/03-vars/colors/theme-eui-legacy-context.scss

@@ -0,0 +1,23 @@
+html.eui-t-eui-legacy {
+    --eui-c-focus-visible: var(--eui-bc-accent-100);
+    --eui-c-focus: var(--eui-bc-primary-40);
+
+    --eui-c-hover: var(--eui-bc-primary-5);
+    --eui-c-hover-disabled: var(--eui-bc-dark-10);
+    --eui-c-active: var(--eui-bc-primary-10);
+    --eui-c-disabled: var(--eui-bc-dark-60);
+
+    @each $color, $shades in $eui-base-context-colors-eui-legacy {
+        @each $shade, $value in $shades {
+            $base-color: $color;
+
+            @if $shade == base {
+                --eui-c-#{$color}: var(--eui-bc-#{$base-color + '-' + $value});
+                --eui-c-#{$color}-contrast: var(--eui-bc-#{$base-color + '-' + $value}-contrast);
+            } @else {
+                --eui-c-#{$color + '-' + $shade}: var(--eui-bc-#{$base-color + '-' + $value});
+                --eui-c-#{$color + '-' + $shade}-contrast: var(--eui-bc-#{$base-color + '-' + $value}-contrast);
+            }
+        }
+    }
+}

package/dist/base/03-vars/colors/theme-eui-legacy-hc-base.scss

@@ -0,0 +1,9 @@
+html.eui-t-eui-legacy.eui-t-high-contrast {
+    // COLOR SHADES
+    @each $color, $shades in $eui-base-tokens-colors-high-contrast-eui-legacy {
+        @each $shade, $value in $shades {
+            --eui-bc-#{$color + '-' + $shade}: #{$value};
+            --eui-bc-#{$color + '-' + $shade}-contrast: #{getContrast($value)};
+        }
+    }
+}

package/dist/base/03-vars/layout/theme-default-base.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $bp, $value in $eui-base-tokens-breakpoints {
+        --eui-bbp-#{$bp}: #{$value};
+    }
+}

package/dist/base/03-vars/layout/theme-default-context.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $bp, $bbp in $eui-base-context-breakpoints {
+        --eui-bp-#{$bp}: var(--eui-bbp-#{$bbp});
+    }
+}

package/dist/base/03-vars/shadows/theme-default-base.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $sh, $value in $eui-base-tokens-shadows {
+        --eui-bsh-#{$sh}: #{$value};
+    }
+}

package/dist/base/03-vars/shadows/theme-default-context.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $sh, $value in $eui-base-tokens-shadows {
+        --eui-sh-#{$sh}: var(--eui-bsh-#{$sh});
+    }
+}

package/dist/base/03-vars/spacings/theme-default-base.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $spacing, $value in $eui-base-tokens-spacings {
+        --eui-bs-#{$spacing}: #{$value};
+    }
+}

package/dist/base/03-vars/spacings/theme-default-context.scss

@@ -0,0 +1,5 @@
+:root {
+    @each $spacing, $value in $eui-base-context-spacings {
+        --eui-s-#{$spacing}: var(--eui-bs-#{$spacing});
+    }
+}

package/dist/base/03-vars/spacings/theme-ecl-eu-base.scss

@@ -0,0 +1,5 @@
+html.eui-t-ecl-eu {
+    @each $spacing, $value in $eui-base-tokens-spacings-ecl-eu {
+        --eui-bs-#{$spacing}: #{$value};
+    }
+}

package/dist/base/03-vars/typography/theme-default-base.scss

@@ -0,0 +1,9 @@
+:root {
+    @each $size, $def in $eui-base-tokens-fonts {
+        --eui-bf-#{$size}: #{$def};
+    }
+
+    @each $size, $def in $eui-base-tokens-font-sizes {
+        --eui-bf-size-#{$size}: #{$def};
+    }
+}

package/dist/base/03-vars/typography/theme-default-context.scss

@@ -0,0 +1,24 @@
+:root {
+    // FONTS DEFINITIONS
+    --eui-f-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+    // --eui-f-family: 'Source Sans Pro', sans-serif;  <link href="https://fonts.cdnfonts.com/css/source-sans-pro" rel="stylesheet">
+    // --eui-f-family: 'Roboto', sans-serif;  <link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet">
+    --eui-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+
+    // BASE FONT SIZE
+    --eui-f-size-base: 16px;
+
+    // FONTS VARIANTS
+    @each $font, $def in $eui-base-context-fonts {
+        --eui-f-#{$font}: var(--eui-bf-#{$def});
+    }
+
+    // FONTS VARIANTS
+    @each $font, $def in $eui-base-context-font-sizes {
+        --eui-f-size-#{$font}: var(--eui-bf-size-#{$def});
+    }
+
+    // ALIASES
+    --eui-f: var(--eui-bf-m);
+    --eui-f-bold: var(--eui-bf-m-b);
+}

package/dist/base/03-vars/typography/theme-ecl-eu-base.scss

@@ -0,0 +1,9 @@
+html.eui-t-ecl-eu {
+    @each $size, $def in $eui-base-tokens-fonts-ecl-eu {
+        --eui-bf-#{$size}: #{$def};
+    }
+
+    @each $size, $def in $eui-base-tokens-font-sizes-ecl-eu {
+        --eui-bf-size-#{$size}: #{$def};
+    }
+}

package/dist/base/03-vars/typography/theme-ecl-eu-context.scss

@@ -0,0 +1,15 @@
+html.eui-t-ecl-eu {
+    // FONTS VARIANTS
+    @each $font, $def in $eui-base-context-fonts-ecl-eu {
+        --eui-f-#{$font}: var(--eui-bf-#{$def});
+    }
+
+    // FONTS VARIANTS
+    @each $font, $def in $eui-base-context-font-sizes-ecl-eu {
+        --eui-f-size-#{$font}: var(--eui-bf-size-#{$def});
+    }
+
+    // ALIASES
+    --eui-f: var(--eui-bf-m);
+    --eui-f-bold: var(--eui-bf-m-b);
+}

package/dist/base/04-elements/_body.scss

@@ -0,0 +1,16 @@
+body {
+    background-color: var(--eui-c-bg);
+    color: var(--eui-c-text);
+    font-family: var(--eui-f-family);
+    font-feature-settings: 'liga';
+    font-size: var(--eui-f-size-base);
+    -moz-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
+    font-style: normal;
+    font-weight: normal;
+    height: 100%;
+    line-height: var(--eui-base-line-height);
+    margin: 0;
+    text-align: start;
+    text-rendering: optimizeLegibility;
+}

package/dist/base/04-elements/_html.scss

@@ -0,0 +1,6 @@
+html {
+    display: block;
+    height: 100%;
+    font-size: var(--eui-f-size-base);
+    line-height: var(--eui-base-line-height);
+}

package/dist/base/04-elements/_module.scss

@@ -0,0 +1,3 @@
+@import 'html';
+@import 'body';
+@import 'shared';

package/dist/base/04-elements/_shared.scss

@@ -0,0 +1,82 @@
+// Make viewport responsive
+//
+// @viewport is needed because IE 10+ doesn't honor <meta name="viewport"> in
+// some cases. See https://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/.
+// Eventually @viewport will replace <meta name="viewport">.
+//
+// However, `device-width` is broken on IE 10 on Windows (Phone) 8,
+// (see https://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497)
+// and the fix for that involves a snippet of JavaScript to sniff the user agent
+// and apply some conditional CSS.
+//
+// See https://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack.
+//
+// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g.,
+// `.class-name { @import "bootstrap"; }`).
+@at-root {
+    @-ms-viewport {
+        width: device-width;
+    }
+}
+
+/* ==========================================================================
+   #BOX-SIZING
+   ========================================================================== */
+
+/**
+ * More sensible default box-sizing:
+ * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+ */
+
+html {
+    box-sizing: border-box;
+}
+
+* {
+    &::before,
+    &::after,
+    & {
+        box-sizing: inherit;
+    }
+}
+
+// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+//
+// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
+// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
+// However, they DO support removing the click delay via `touch-action: manipulation`.
+// See:
+// * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
+// * http://caniuse.com/#feat=css-touch-action
+// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+
+a,
+area,
+button,
+[role="button"],
+input,
+label,
+select,
+summary,
+textarea {
+    touch-action: manipulation;
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+[hidden] {
+    display: none !important;
+}
+
+// NORMALIZE reset alignements (see 00-reset)
+p,
+label,
+blockquote,
+abbr,
+mark,
+del {
+    font-size: v(eui-f-size-base);
+}
+
+b, strong {
+    font-weight: bold !important;
+}

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

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

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

@@ -0,0 +1 @@
+@import 'icons-svg/module';

package/dist/base/05-assets/flags/_icons-generics.scss

@@ -0,0 +1,87 @@
+$ratio-4x3: 1.33333333;
+
+.eui-flag-icon {
+    align-items: center;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: inline-flex !important;
+    height: calc(0.83333333 * #{v(eui-s-l)});
+    min-width: v(eui-s-l);
+    position: relative;
+    width: v(eui-s-l);
+    box-shadow: v(eui-sh-1);
+
+    &::before {
+        content: "\00a0";
+    }
+
+    &-rounded,
+    &--rounded {
+        background-size: cover !important;
+        border-radius: 50%;
+        height: calc(#{v(eui-s-m)} + #{v(eui-s-2xs)});
+        min-width: calc(#{v(eui-s-m)} + #{v(eui-s-2xs)});
+        width: calc(#{v(eui-s-m)} + #{v(eui-s-2xs)}) !important;
+    }
+
+    &-squared {
+        height: calc(#{v(eui-s-m)} + #{v(eui-s-2xs)});
+        min-width: calc(#{v(eui-s-m)} + #{v(eui-s-2xs)});
+        width: calc(#{v(eui-s-m)} + #{v(eui-s-2xs)}) !important;
+    }
+
+    &-rounded,
+    &--rounded,
+    &-squared {
+        &.eui-flag-icon-1dot5x {
+            height: calc(0.875 * #{v(eui-s-l)});
+            width: calc(0.875 * #{v(eui-s-l)}) !important;
+        }
+
+        &.eui-flag-icon-2x {
+            height: calc(1 * #{v(eui-s-l)});
+            width: calc(1 * #{v(eui-s-l)}) !important;
+        }
+
+        &.eui-flag-icon-3x {
+            height: calc(1.5 * #{v(eui-s-l)});
+            width: calc(1.5 * #{v(eui-s-l)}) !important;
+        }
+
+        &.eui-flag-icon-4x {
+            height: calc(2 * #{v(eui-s-l)});
+            width: calc(2 * #{v(eui-s-l)}) !important;
+        }
+
+        &.eui-flag-icon-5x {
+            height: calc(2.5 * #{v(eui-s-l)});
+            width: calc(2.5 * #{v(eui-s-l)}) !important;
+        }
+    }
+
+    &-1dot5x {
+        height: calc(0.875 * #{v(eui-s-l)});
+        width: calc(#{$ratio-4x3} * 0.875 * #{v(eui-s-l)}) !important;
+    }
+
+    &-2x {
+        height: calc(1 * #{v(eui-s-l)});
+        width: calc(#{$ratio-4x3} * 1 * #{v(eui-s-l)}) !important;
+    }
+
+    &-3x {
+        height: calc(1.5 * #{v(eui-s-l)});
+        width: calc(#{$ratio-4x3} * 1.5 * #{v(eui-s-l)}) !important;
+    }
+
+    &-4x {
+        height: calc(2 * #{v(eui-s-l)});
+        width: calc(#{$ratio-4x3} * 2 * #{v(eui-s-l)}) !important;
+    }
+
+    &-5x {
+        height: calc(2.5 * #{v(eui-s-l)});
+        width: calc(#{$ratio-4x3} * 2.5 * #{v(eui-s-l)}) !important;
+    }
+}