@eui/eds-styles 22.0.0-alpha.45 → 22.0.0-alpha.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -170,9 +170,9 @@ $default-feature: "min-width";
|
|
|
170
170
|
// Disabled
|
|
171
171
|
&:disabled:not([readonly]),
|
|
172
172
|
&--disabled:not([readonly]) {
|
|
173
|
-
background-color: var(--eds-c-
|
|
173
|
+
background-color: var(--eds-c-surface-disabled-subtle);
|
|
174
174
|
border-color: var(--eds-c-border-disabled);
|
|
175
|
-
color: var(--eds-c-foreground-
|
|
175
|
+
color: var(--eds-c-foreground-disabled);
|
|
176
176
|
pointer-events: none;
|
|
177
177
|
}
|
|
178
178
|
|
package/dist/eds-vars.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/colors.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/colors-dark-theme.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/typography.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/01-base/mixins.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/others.scss"],"names":[],"mappings":"AAEA;EAEQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACFR;EAEQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACGR;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEI;EAGA;EACA;EAGI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGA;EAAA;EAAA;EAAA;EAAA;EAKA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AC3BJ;EDDR;IAuCoB;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;;;ACtCZ;EDDR;IAoDoB;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;;;;AEvEpB;EACI;EAMI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAOJ;EAEI;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","sourcesContent":["@use '../02-tokens/colors-semantic' as semantic;\n\n:root {\n @each $color, $value in semantic.$color-semantic-map {\n --eds-c-#{$color}: #{$value};\n }\n}","@use '../02-tokens/colors-semantic-dark-theme' as semantic;\n\nhtml.eui-t-dark {\n @each $color, $value in semantic.$color-semantic-map {\n --eds-c-#{$color}: #{$value};\n }\n}","@use 'sass:map';\n@use '../01-base' as base;\n@use '../02-tokens/dimensions-semantic' as dimensions-semantic;\n@use '../02-tokens/maps' as maps;\n@use '../02-tokens/typography-primitive' as typography-primitive;\n@use '../02-tokens/typography-semantic' as typography-semantic;\n\n@font-face {\n font-family: 'Inter';\n src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');\n font-weight: 100 900;\n font-style: normal;\n font-display: block;\n}\n\n@font-face {\n font-family: 'Inter';\n src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable-Italic.woff2') format('woff2');\n font-weight: 100 900;\n font-display: block;\n font-style: italic;\n}\n\n:root {\n // base font size\n --eds-f-s-base: 16px;\n \n // font families\n --eds-f-family: 'Inter', arial, sans-serif;\n --eds-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace; \n\n @each $size, $def in typography-primitive.$font-size-map {\n --eds-f-s-#{$size}: #{$def};\n }\n @each $size, $def in typography-primitive.$font-line-height-map {\n --eds-f-lh-#{$size}: #{$def};\n }\n @each $size, $def in typography-primitive.$font-weight-map {\n --eds-f-w-#{$size}: #{$def};\n }\n\n // EDS raw vars\n @each $size, $def in typography-primitive.$font-size-letter-spacing-map {\n --eds-f-ls-#{$size}: #{$def};\n } \n\n // EDS typography\n // Weightless `font` shorthand: `font-size / line-height font-family`.\n // Apply weight separately at the call site via `--eds-f-w-<weight>`.\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {\n @each $size, $sizeDef in $typeDef {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n\n @include base.media(maps.$eds-bkp-tablet) {\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {\n $desktopTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'desktop'), $type);\n @each $size, $sizeDef in $typeDef {\n $desktopSizeDef: map.get($desktopTypeDef, $size);\n // Only emit override if size or line-height differs from desktop\n @if map.get($sizeDef, 'size') != map.get($desktopSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($desktopSizeDef, 'line-height') {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n } \n }\n\n @include base.media(maps.$eds-bkp-mobile) {\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {\n $tabletTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'tablet'), $type);\n @each $size, $sizeDef in $typeDef {\n $tabletSizeDef: map.get($tabletTypeDef, $size);\n // Only emit override if size or line-height differs from tablet\n @if map.get($sizeDef, 'size') != map.get($tabletSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($tabletSizeDef, 'line-height') {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n } \n } \n}\n","@use 'sass:map';\n@use 'sass:list';\n\n$default-feature: \"min-width\";\n@mixin media($query: $feature $value $columns) {\n @if list.length($query) == 1 {\n @media screen and ($default-feature: list.nth($query, 1)) {\n @content;\n }\n }\n @else {\n $loop-to: list.length($query);\n $media-query: \"screen and \";\n @if is-not(is-even(list.length($query))) {\n $loop-to: $loop-to - 1;\n }\n $i: 1;\n @while $i <=$loop-to {\n $media-query: $media-query + \"(\" + list.nth($query, $i) + \": \" + list.nth($query, $i + 1) + \") \";\n @if ($i + 1) != $loop-to {\n $media-query: $media-query + \"and \";\n }\n $i: $i+2;\n }\n @media #{$media-query} {\n @content;\n }\n }\n}\n\n@mixin eds-ellipsis() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@mixin eds-focus-visible($offset: -2px, $size: 2px) {\n &:focus-visible:not([readonly]) {\n outline: $size solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n transition: none;\n }\n}\n@mixin eds-focus-visible-critical($offset: -2px, $size: 2px) {\n &:focus-visible:not([readonly]) {\n outline: $size solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n transition: none;\n }\n}\n\n@mixin eds-focus-ring($offset: 2px) {\n &:focus:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n@mixin eds-focus-ring-critical($offset: 2px) {\n &:focus:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n\n@mixin eds-focus-visible-ring($offset: 2px) {\n &:focus-visible:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n@mixin eds-focus-visible-ring-critical($offset: 2px) {\n &:focus-visible:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n\n@mixin loading-indicator() {\n align-items: center;\n display: flex;\n\n &::after,\n &::before {\n content: '';\n height: var(--eds-sp-l);\n position: absolute;\n right: var(--eds-sp-s);\n width: var(--eds-sp-l);\n }\n\n &::before {\n border: var(--eds-sp-3xs) solid rgba(0, 0, 0, 0.35);\n border-radius: 100%;\n }\n\n &::after {\n animation: loading 0.6s linear;\n animation-iteration-count: infinite;\n border-color: var(--eui-c-white) transparent transparent;\n border-radius: 100%;\n border-style: solid;\n border-width: var(--eds-sp-3xs);\n box-shadow: 0 0 0 1px transparent;\n }\n\n &--sm::after,\n &--sm::before {\n height: var(--eds-sp-m);\n width: var(--eds-sp-m);\n }\n\n @keyframes loading {\n to { transform: rotate(360deg); }\n }\n}\n\n// EDS Input mixin — common styles for text inputs, textareas, selects.\n//\n// Size is parametrized through private custom properties that default to the\n// `m` size. Components reflect a `size` host attribute and override these\n// privates per `:host([size=\"s\"])` / `:host([size=\"l\"])` (see eds-input-size()).\n@mixin eds-input() {\n // Size-driven privates (defaults = `m`)\n --_eds-input-height: var(--eds-si-4xl);\n --_eds-input-pad-v: var(--eds-sp-xs);\n --_eds-input-pad-h: var(--eds-sp-s);\n --_eds-input-font: var(--eds-f-paragraph-m);\n --_eds-input-font-weight: var(--eds-f-w-regular);\n --_eds-input-placeholder-font: var(--eds-f-placeholder-m);\n --_eds-input-placeholder-font-weight: var(--eds-f-w-light);\n\n font: var(--_eds-input-font);\n font-weight: var(--_eds-input-font-weight);\n appearance: none;\n background-color: var(--eds-c-surface-elevation);\n border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n border-radius: var(--eds-br-s);\n box-shadow: none;\n color: var(--eds-c-foreground-default);\n height: var(--_eds-input-height);\n padding: var(--_eds-input-pad-v) var(--_eds-input-pad-h);\n width: 100%;\n @include eds-focus-visible-ring();\n\n &:not([hidden]) {\n display: block;\n }\n\n &::placeholder {\n color: var(--eds-c-foreground-placeholder);\n font: var(--_eds-input-placeholder-font);\n font-weight: var(--_eds-input-placeholder-font-weight);\n opacity: 1;\n }\n\n // Readonly\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n padding-left: 0;\n padding-right: 0;\n pointer-events: none;\n }\n\n // Disabled\n &:disabled:not([readonly]),\n &--disabled:not([readonly]) {\n background-color: var(--eds-c-suface-disabled);\n border-color: var(--eds-c-border-disabled);\n color: var(--eds-c-foreground-subtler);\n pointer-events: none;\n }\n\n // Invalid\n &[invalid] {\n border-color: var(--eds-c-border-critical);\n @include eds-focus-visible-ring-critical();\n }\n\n &--loading {\n padding-right: var(--eds-sp-7xl);\n\n &-icon {\n @include loading-indicator();\n }\n } \n}\n\n// EDS Input size overrides — applies the `s` / `l` size privates.\n// Call inside a component's `:host` scope (after `eds-input()`); it emits the\n// `[input-size=\"s\"]` / `[input-size=\"l\"]` branches. The size variant is\n// reflected as the `input-size` host attribute (NOT `size`, which is reserved\n// for the native `<select size>` / `<input size>` DOM attribute). The `m` size\n// is the default already set by `eds-input()`, so no `[input-size=\"m\"]` branch\n// is needed.\n@mixin eds-input-size() {\n &[input-size=\"s\"] {\n --_eds-input-height: calc(var(--eds-si-3xl) + var(--eds-si-2xs)); // 36px\n --_eds-input-pad-v: var(--eds-sp-2xs);\n --_eds-input-pad-h: var(--eds-sp-s);\n }\n\n &[input-size=\"l\"] {\n --_eds-input-height: var(--eds-si-6xl); // 48px\n --_eds-input-pad-v: var(--eds-sp-s);\n --_eds-input-pad-h: var(--eds-sp-m);\n }\n}\n\n@mixin eds-input-hover() {\n &:hover:not([aria-disabled=\"true\"]):not(:disabled) {\n box-shadow: var(--eds-sh-1);\n\n &:not([aria-disabled=\"true\"]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=\"true\"]):not([invalid=\"true\"]) {\n border-color: var(--eds-c-border-neutral--hover);\n }\n\n // checkbox\n &.eds-checkbox {\n &:checked:not([readonly]):not([invalid=\"true\"]),\n &[checked=\"true\"]:not([readonly]):not([invalid=\"true\"]),\n &[indeterminate=\"true\"]:not([readonly]) {\n background-color: var(--eds-c-surface-primary--hover);\n }\n }\n\n //radio\n &.eds-radio {\n &:checked:not([readonly]):not([invalid=\"true\"]) {\n background-color: var(--eds-c-surface-elevation);\n border-color: var(--eds-c-border-primary--hover);\n }\n }\n }\n}","@use 'sass:map';\n@use '../02-tokens/dimensions-semantic' as dimensions-semantic;\n@use '../02-tokens/maps' as maps;\n\n:root {\n --eds-base-line-height: 1.5rem;\n\n // SPACING - eds-sp\n // ---------------\n\n @each $spacing, $value in dimensions-semantic.$spacing-semantic-map {\n --eds-sp-#{$spacing}: #{$value};\n }\n @each $sizing, $value in dimensions-semantic.$sizing-semantic-map {\n --eds-si-#{$sizing}: #{$value};\n }\n\n \n // BORDER RADIUS - eds-br\n // ----------------------\n\n @each $br, $value in maps.$border-radius-map {\n --eds-br-#{$br}: #{$value};\n }\n\n\n // BREAKPOINTS - eds-bp\n // ---------------------------\n\n @each $bp, $value in maps.$breakpoint-size-map {\n --eds-bp-#{$bp}: #{$value};\n }\n\n\n // BORDER WIDTH - eds-bw\n // ---------------------\n\n @each $br, $value in maps.$border-width-map {\n --eds-bw-#{$br}: #{$value};\n }\n\n\n // BOX-SHADOWS - eds-sh\n // --------------------\n\n --eds-sh-none: none;\n @each $sh, $shDef in maps.$shadow-map {\n --eds-sh-#{$sh}: #{map.get($shDef, 'offset-x') map.get($shDef, 'offset-y') map.get($shDef, 'blur') map.get($shDef, 'spread') map.get($shDef, 'color')};\n }\n\n\n // ICON-SIZES - eds-is\n // -------------------\n\n @each $icon-size, $value in dimensions-semantic.$icon-sizing-semantic-map {\n --eds-is-#{$icon-size}: #{$value};\n }\n\n\n // OPACITY - eds-op\n // ----------------\n\n @each $idx, $value in maps.$opacity-map {\n --eds-op-#{$idx}: #{$value};\n }\n}"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/colors.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/colors-dark-theme.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/typography.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/01-base/mixins.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/others.scss"],"names":[],"mappings":"AAEA;EAEQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACFR;EAEQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACGR;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EAEI;EAGA;EACA;EAGI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGA;EAAA;EAAA;EAAA;EAAA;EAKA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AC3BJ;EDDR;IAuCoB;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;;;ACtCZ;EDDR;IAoDoB;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;;;;AEvEpB;EACI;EAMI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAGA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAOJ;EAEI;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAQA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","sourcesContent":["@use '../02-tokens/colors-semantic' as semantic;\n\n:root {\n @each $color, $value in semantic.$color-semantic-map {\n --eds-c-#{$color}: #{$value};\n }\n}","@use '../02-tokens/colors-semantic-dark-theme' as semantic;\n\nhtml.eui-t-dark {\n @each $color, $value in semantic.$color-semantic-map {\n --eds-c-#{$color}: #{$value};\n }\n}","@use 'sass:map';\n@use '../01-base' as base;\n@use '../02-tokens/dimensions-semantic' as dimensions-semantic;\n@use '../02-tokens/maps' as maps;\n@use '../02-tokens/typography-primitive' as typography-primitive;\n@use '../02-tokens/typography-semantic' as typography-semantic;\n\n@font-face {\n font-family: 'Inter';\n src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');\n font-weight: 100 900;\n font-style: normal;\n font-display: block;\n}\n\n@font-face {\n font-family: 'Inter';\n src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable-Italic.woff2') format('woff2');\n font-weight: 100 900;\n font-display: block;\n font-style: italic;\n}\n\n:root {\n // base font size\n --eds-f-s-base: 16px;\n \n // font families\n --eds-f-family: 'Inter', arial, sans-serif;\n --eds-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace; \n\n @each $size, $def in typography-primitive.$font-size-map {\n --eds-f-s-#{$size}: #{$def};\n }\n @each $size, $def in typography-primitive.$font-line-height-map {\n --eds-f-lh-#{$size}: #{$def};\n }\n @each $size, $def in typography-primitive.$font-weight-map {\n --eds-f-w-#{$size}: #{$def};\n }\n\n // EDS raw vars\n @each $size, $def in typography-primitive.$font-size-letter-spacing-map {\n --eds-f-ls-#{$size}: #{$def};\n } \n\n // EDS typography\n // Weightless `font` shorthand: `font-size / line-height font-family`.\n // Apply weight separately at the call site via `--eds-f-w-<weight>`.\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {\n @each $size, $sizeDef in $typeDef {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n\n @include base.media(maps.$eds-bkp-tablet) {\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {\n $desktopTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'desktop'), $type);\n @each $size, $sizeDef in $typeDef {\n $desktopSizeDef: map.get($desktopTypeDef, $size);\n // Only emit override if size or line-height differs from desktop\n @if map.get($sizeDef, 'size') != map.get($desktopSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($desktopSizeDef, 'line-height') {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n } \n }\n\n @include base.media(maps.$eds-bkp-mobile) {\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {\n $tabletTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'tablet'), $type);\n @each $size, $sizeDef in $typeDef {\n $tabletSizeDef: map.get($tabletTypeDef, $size);\n // Only emit override if size or line-height differs from tablet\n @if map.get($sizeDef, 'size') != map.get($tabletSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($tabletSizeDef, 'line-height') {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n } \n } \n}\n","@use 'sass:map';\n@use 'sass:list';\n\n$default-feature: \"min-width\";\n@mixin media($query: $feature $value $columns) {\n @if list.length($query) == 1 {\n @media screen and ($default-feature: list.nth($query, 1)) {\n @content;\n }\n }\n @else {\n $loop-to: list.length($query);\n $media-query: \"screen and \";\n @if is-not(is-even(list.length($query))) {\n $loop-to: $loop-to - 1;\n }\n $i: 1;\n @while $i <=$loop-to {\n $media-query: $media-query + \"(\" + list.nth($query, $i) + \": \" + list.nth($query, $i + 1) + \") \";\n @if ($i + 1) != $loop-to {\n $media-query: $media-query + \"and \";\n }\n $i: $i+2;\n }\n @media #{$media-query} {\n @content;\n }\n }\n}\n\n@mixin eds-ellipsis() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@mixin eds-focus-visible($offset: -2px, $size: 2px) {\n &:focus-visible:not([readonly]) {\n outline: $size solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n transition: none;\n }\n}\n@mixin eds-focus-visible-critical($offset: -2px, $size: 2px) {\n &:focus-visible:not([readonly]) {\n outline: $size solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n transition: none;\n }\n}\n\n@mixin eds-focus-ring($offset: 2px) {\n &:focus:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n@mixin eds-focus-ring-critical($offset: 2px) {\n &:focus:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n\n@mixin eds-focus-visible-ring($offset: 2px) {\n &:focus-visible:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n@mixin eds-focus-visible-ring-critical($offset: 2px) {\n &:focus-visible:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n\n@mixin loading-indicator() {\n align-items: center;\n display: flex;\n\n &::after,\n &::before {\n content: '';\n height: var(--eds-sp-l);\n position: absolute;\n right: var(--eds-sp-s);\n width: var(--eds-sp-l);\n }\n\n &::before {\n border: var(--eds-sp-3xs) solid rgba(0, 0, 0, 0.35);\n border-radius: 100%;\n }\n\n &::after {\n animation: loading 0.6s linear;\n animation-iteration-count: infinite;\n border-color: var(--eui-c-white) transparent transparent;\n border-radius: 100%;\n border-style: solid;\n border-width: var(--eds-sp-3xs);\n box-shadow: 0 0 0 1px transparent;\n }\n\n &--sm::after,\n &--sm::before {\n height: var(--eds-sp-m);\n width: var(--eds-sp-m);\n }\n\n @keyframes loading {\n to { transform: rotate(360deg); }\n }\n}\n\n// EDS Input mixin — common styles for text inputs, textareas, selects.\n//\n// Size is parametrized through private custom properties that default to the\n// `m` size. Components reflect a `size` host attribute and override these\n// privates per `:host([size=\"s\"])` / `:host([size=\"l\"])` (see eds-input-size()).\n@mixin eds-input() {\n // Size-driven privates (defaults = `m`)\n --_eds-input-height: var(--eds-si-4xl);\n --_eds-input-pad-v: var(--eds-sp-xs);\n --_eds-input-pad-h: var(--eds-sp-s);\n --_eds-input-font: var(--eds-f-paragraph-m);\n --_eds-input-font-weight: var(--eds-f-w-regular);\n --_eds-input-placeholder-font: var(--eds-f-placeholder-m);\n --_eds-input-placeholder-font-weight: var(--eds-f-w-light);\n\n font: var(--_eds-input-font);\n font-weight: var(--_eds-input-font-weight);\n appearance: none;\n background-color: var(--eds-c-surface-elevation);\n border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n border-radius: var(--eds-br-s);\n box-shadow: none;\n color: var(--eds-c-foreground-default);\n height: var(--_eds-input-height);\n padding: var(--_eds-input-pad-v) var(--_eds-input-pad-h);\n width: 100%;\n @include eds-focus-visible-ring();\n\n &:not([hidden]) {\n display: block;\n }\n\n &::placeholder {\n color: var(--eds-c-foreground-placeholder);\n font: var(--_eds-input-placeholder-font);\n font-weight: var(--_eds-input-placeholder-font-weight);\n opacity: 1;\n }\n\n // Readonly\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n padding-left: 0;\n padding-right: 0;\n pointer-events: none;\n }\n\n // Disabled\n &:disabled:not([readonly]),\n &--disabled:not([readonly]) {\n background-color: var(--eds-c-surface-disabled-subtle);\n border-color: var(--eds-c-border-disabled);\n color: var(--eds-c-foreground-disabled);\n pointer-events: none;\n }\n\n // Invalid\n &[invalid] {\n border-color: var(--eds-c-border-critical);\n @include eds-focus-visible-ring-critical();\n }\n\n &--loading {\n padding-right: var(--eds-sp-7xl);\n\n &-icon {\n @include loading-indicator();\n }\n } \n}\n\n// EDS Input size overrides — applies the `s` / `l` size privates.\n// Call inside a component's `:host` scope (after `eds-input()`); it emits the\n// `[input-size=\"s\"]` / `[input-size=\"l\"]` branches. The size variant is\n// reflected as the `input-size` host attribute (NOT `size`, which is reserved\n// for the native `<select size>` / `<input size>` DOM attribute). The `m` size\n// is the default already set by `eds-input()`, so no `[input-size=\"m\"]` branch\n// is needed.\n@mixin eds-input-size() {\n &[input-size=\"s\"] {\n --_eds-input-height: calc(var(--eds-si-3xl) + var(--eds-si-2xs)); // 36px\n --_eds-input-pad-v: var(--eds-sp-2xs);\n --_eds-input-pad-h: var(--eds-sp-s);\n }\n\n &[input-size=\"l\"] {\n --_eds-input-height: var(--eds-si-6xl); // 48px\n --_eds-input-pad-v: var(--eds-sp-s);\n --_eds-input-pad-h: var(--eds-sp-m);\n }\n}\n\n@mixin eds-input-hover() {\n &:hover:not([aria-disabled=\"true\"]):not(:disabled) {\n box-shadow: var(--eds-sh-1);\n\n &:not([aria-disabled=\"true\"]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=\"true\"]):not([invalid=\"true\"]) {\n border-color: var(--eds-c-border-neutral--hover);\n }\n\n // checkbox\n &.eds-checkbox {\n &:checked:not([readonly]):not([invalid=\"true\"]),\n &[checked=\"true\"]:not([readonly]):not([invalid=\"true\"]),\n &[indeterminate=\"true\"]:not([readonly]) {\n background-color: var(--eds-c-surface-primary--hover);\n }\n }\n\n //radio\n &.eds-radio {\n &:checked:not([readonly]):not([invalid=\"true\"]) {\n background-color: var(--eds-c-surface-elevation);\n border-color: var(--eds-c-border-primary--hover);\n }\n }\n }\n}","@use 'sass:map';\n@use '../02-tokens/dimensions-semantic' as dimensions-semantic;\n@use '../02-tokens/maps' as maps;\n\n:root {\n --eds-base-line-height: 1.5rem;\n\n // SPACING - eds-sp\n // ---------------\n\n @each $spacing, $value in dimensions-semantic.$spacing-semantic-map {\n --eds-sp-#{$spacing}: #{$value};\n }\n @each $sizing, $value in dimensions-semantic.$sizing-semantic-map {\n --eds-si-#{$sizing}: #{$value};\n }\n\n \n // BORDER RADIUS - eds-br\n // ----------------------\n\n @each $br, $value in maps.$border-radius-map {\n --eds-br-#{$br}: #{$value};\n }\n\n\n // BREAKPOINTS - eds-bp\n // ---------------------------\n\n @each $bp, $value in maps.$breakpoint-size-map {\n --eds-bp-#{$bp}: #{$value};\n }\n\n\n // BORDER WIDTH - eds-bw\n // ---------------------\n\n @each $br, $value in maps.$border-width-map {\n --eds-bw-#{$br}: #{$value};\n }\n\n\n // BOX-SHADOWS - eds-sh\n // --------------------\n\n --eds-sh-none: none;\n @each $sh, $shDef in maps.$shadow-map {\n --eds-sh-#{$sh}: #{map.get($shDef, 'offset-x') map.get($shDef, 'offset-y') map.get($shDef, 'blur') map.get($shDef, 'spread') map.get($shDef, 'color')};\n }\n\n\n // ICON-SIZES - eds-is\n // -------------------\n\n @each $icon-size, $value in dimensions-semantic.$icon-sizing-semantic-map {\n --eds-is-#{$icon-size}: #{$value};\n }\n\n\n // OPACITY - eds-op\n // ----------------\n\n @each $idx, $value in maps.$opacity-map {\n --eds-op-#{$idx}: #{$value};\n }\n}"]}
|
package/dist/eds.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/00-reset/index.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/colors.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/colors-dark-theme.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/typography.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/01-base/mixins.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/others.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/04-elements/html-body.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/04-elements/table.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/06-shared/animations.scss"],"names":[],"mappings":";AAAA;AAEA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;ACXF;EAEQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACFR;EAEQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;E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","sourcesContent":["/*! EDS Reset — minimal reset for evergreen browsers with encapsulated components */\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n}\n\n[hidden] {\n display: none;\n}\n","@use '../02-tokens/colors-semantic' as semantic;\n\n:root {\n @each $color, $value in semantic.$color-semantic-map {\n --eds-c-#{$color}: #{$value};\n }\n}","@use '../02-tokens/colors-semantic-dark-theme' as semantic;\n\nhtml.eui-t-dark {\n @each $color, $value in semantic.$color-semantic-map {\n --eds-c-#{$color}: #{$value};\n }\n}","@use 'sass:map';\n@use '../01-base' as base;\n@use '../02-tokens/dimensions-semantic' as dimensions-semantic;\n@use '../02-tokens/maps' as maps;\n@use '../02-tokens/typography-primitive' as typography-primitive;\n@use '../02-tokens/typography-semantic' as typography-semantic;\n\n@font-face {\n font-family: 'Inter';\n src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');\n font-weight: 100 900;\n font-style: normal;\n font-display: block;\n}\n\n@font-face {\n font-family: 'Inter';\n src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable-Italic.woff2') format('woff2');\n font-weight: 100 900;\n font-display: block;\n font-style: italic;\n}\n\n:root {\n // base font size\n --eds-f-s-base: 16px;\n \n // font families\n --eds-f-family: 'Inter', arial, sans-serif;\n --eds-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace; \n\n @each $size, $def in typography-primitive.$font-size-map {\n --eds-f-s-#{$size}: #{$def};\n }\n @each $size, $def in typography-primitive.$font-line-height-map {\n --eds-f-lh-#{$size}: #{$def};\n }\n @each $size, $def in typography-primitive.$font-weight-map {\n --eds-f-w-#{$size}: #{$def};\n }\n\n // EDS raw vars\n @each $size, $def in typography-primitive.$font-size-letter-spacing-map {\n --eds-f-ls-#{$size}: #{$def};\n } \n\n // EDS typography\n // Weightless `font` shorthand: `font-size / line-height font-family`.\n // Apply weight separately at the call site via `--eds-f-w-<weight>`.\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {\n @each $size, $sizeDef in $typeDef {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n\n @include base.media(maps.$eds-bkp-tablet) {\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {\n $desktopTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'desktop'), $type);\n @each $size, $sizeDef in $typeDef {\n $desktopSizeDef: map.get($desktopTypeDef, $size);\n // Only emit override if size or line-height differs from desktop\n @if map.get($sizeDef, 'size') != map.get($desktopSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($desktopSizeDef, 'line-height') {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n } \n }\n\n @include base.media(maps.$eds-bkp-mobile) {\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {\n $tabletTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'tablet'), $type);\n @each $size, $sizeDef in $typeDef {\n $tabletSizeDef: map.get($tabletTypeDef, $size);\n // Only emit override if size or line-height differs from tablet\n @if map.get($sizeDef, 'size') != map.get($tabletSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($tabletSizeDef, 'line-height') {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n } \n } \n}\n","@use 'sass:map';\n@use 'sass:list';\n\n$default-feature: \"min-width\";\n@mixin media($query: $feature $value $columns) {\n @if list.length($query) == 1 {\n @media screen and ($default-feature: list.nth($query, 1)) {\n @content;\n }\n }\n @else {\n $loop-to: list.length($query);\n $media-query: \"screen and \";\n @if is-not(is-even(list.length($query))) {\n $loop-to: $loop-to - 1;\n }\n $i: 1;\n @while $i <=$loop-to {\n $media-query: $media-query + \"(\" + list.nth($query, $i) + \": \" + list.nth($query, $i + 1) + \") \";\n @if ($i + 1) != $loop-to {\n $media-query: $media-query + \"and \";\n }\n $i: $i+2;\n }\n @media #{$media-query} {\n @content;\n }\n }\n}\n\n@mixin eds-ellipsis() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@mixin eds-focus-visible($offset: -2px, $size: 2px) {\n &:focus-visible:not([readonly]) {\n outline: $size solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n transition: none;\n }\n}\n@mixin eds-focus-visible-critical($offset: -2px, $size: 2px) {\n &:focus-visible:not([readonly]) {\n outline: $size solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n transition: none;\n }\n}\n\n@mixin eds-focus-ring($offset: 2px) {\n &:focus:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n@mixin eds-focus-ring-critical($offset: 2px) {\n &:focus:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n\n@mixin eds-focus-visible-ring($offset: 2px) {\n &:focus-visible:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n@mixin eds-focus-visible-ring-critical($offset: 2px) {\n &:focus-visible:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n\n@mixin loading-indicator() {\n align-items: center;\n display: flex;\n\n &::after,\n &::before {\n content: '';\n height: var(--eds-sp-l);\n position: absolute;\n right: var(--eds-sp-s);\n width: var(--eds-sp-l);\n }\n\n &::before {\n border: var(--eds-sp-3xs) solid rgba(0, 0, 0, 0.35);\n border-radius: 100%;\n }\n\n &::after {\n animation: loading 0.6s linear;\n animation-iteration-count: infinite;\n border-color: var(--eui-c-white) transparent transparent;\n border-radius: 100%;\n border-style: solid;\n border-width: var(--eds-sp-3xs);\n box-shadow: 0 0 0 1px transparent;\n }\n\n &--sm::after,\n &--sm::before {\n height: var(--eds-sp-m);\n width: var(--eds-sp-m);\n }\n\n @keyframes loading {\n to { transform: rotate(360deg); }\n }\n}\n\n// EDS Input mixin — common styles for text inputs, textareas, selects.\n//\n// Size is parametrized through private custom properties that default to the\n// `m` size. Components reflect a `size` host attribute and override these\n// privates per `:host([size=\"s\"])` / `:host([size=\"l\"])` (see eds-input-size()).\n@mixin eds-input() {\n // Size-driven privates (defaults = `m`)\n --_eds-input-height: var(--eds-si-4xl);\n --_eds-input-pad-v: var(--eds-sp-xs);\n --_eds-input-pad-h: var(--eds-sp-s);\n --_eds-input-font: var(--eds-f-paragraph-m);\n --_eds-input-font-weight: var(--eds-f-w-regular);\n --_eds-input-placeholder-font: var(--eds-f-placeholder-m);\n --_eds-input-placeholder-font-weight: var(--eds-f-w-light);\n\n font: var(--_eds-input-font);\n font-weight: var(--_eds-input-font-weight);\n appearance: none;\n background-color: var(--eds-c-surface-elevation);\n border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n border-radius: var(--eds-br-s);\n box-shadow: none;\n color: var(--eds-c-foreground-default);\n height: var(--_eds-input-height);\n padding: var(--_eds-input-pad-v) var(--_eds-input-pad-h);\n width: 100%;\n @include eds-focus-visible-ring();\n\n &:not([hidden]) {\n display: block;\n }\n\n &::placeholder {\n color: var(--eds-c-foreground-placeholder);\n font: var(--_eds-input-placeholder-font);\n font-weight: var(--_eds-input-placeholder-font-weight);\n opacity: 1;\n }\n\n // Readonly\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n padding-left: 0;\n padding-right: 0;\n pointer-events: none;\n }\n\n // Disabled\n &:disabled:not([readonly]),\n &--disabled:not([readonly]) {\n background-color: var(--eds-c-suface-disabled);\n border-color: var(--eds-c-border-disabled);\n color: var(--eds-c-foreground-subtler);\n pointer-events: none;\n }\n\n // Invalid\n &[invalid] {\n border-color: var(--eds-c-border-critical);\n @include eds-focus-visible-ring-critical();\n }\n\n &--loading {\n padding-right: var(--eds-sp-7xl);\n\n &-icon {\n @include loading-indicator();\n }\n } \n}\n\n// EDS Input size overrides — applies the `s` / `l` size privates.\n// Call inside a component's `:host` scope (after `eds-input()`); it emits the\n// `[input-size=\"s\"]` / `[input-size=\"l\"]` branches. The size variant is\n// reflected as the `input-size` host attribute (NOT `size`, which is reserved\n// for the native `<select size>` / `<input size>` DOM attribute). The `m` size\n// is the default already set by `eds-input()`, so no `[input-size=\"m\"]` branch\n// is needed.\n@mixin eds-input-size() {\n &[input-size=\"s\"] {\n --_eds-input-height: calc(var(--eds-si-3xl) + var(--eds-si-2xs)); // 36px\n --_eds-input-pad-v: var(--eds-sp-2xs);\n --_eds-input-pad-h: var(--eds-sp-s);\n }\n\n &[input-size=\"l\"] {\n --_eds-input-height: var(--eds-si-6xl); // 48px\n --_eds-input-pad-v: var(--eds-sp-s);\n --_eds-input-pad-h: var(--eds-sp-m);\n }\n}\n\n@mixin eds-input-hover() {\n &:hover:not([aria-disabled=\"true\"]):not(:disabled) {\n box-shadow: var(--eds-sh-1);\n\n &:not([aria-disabled=\"true\"]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=\"true\"]):not([invalid=\"true\"]) {\n border-color: var(--eds-c-border-neutral--hover);\n }\n\n // checkbox\n &.eds-checkbox {\n &:checked:not([readonly]):not([invalid=\"true\"]),\n &[checked=\"true\"]:not([readonly]):not([invalid=\"true\"]),\n &[indeterminate=\"true\"]:not([readonly]) {\n background-color: var(--eds-c-surface-primary--hover);\n }\n }\n\n //radio\n &.eds-radio {\n &:checked:not([readonly]):not([invalid=\"true\"]) {\n background-color: var(--eds-c-surface-elevation);\n border-color: var(--eds-c-border-primary--hover);\n }\n }\n }\n}","@use 'sass:map';\n@use '../02-tokens/dimensions-semantic' as dimensions-semantic;\n@use '../02-tokens/maps' as maps;\n\n:root {\n --eds-base-line-height: 1.5rem;\n\n // SPACING - eds-sp\n // ---------------\n\n @each $spacing, $value in dimensions-semantic.$spacing-semantic-map {\n --eds-sp-#{$spacing}: #{$value};\n }\n @each $sizing, $value in dimensions-semantic.$sizing-semantic-map {\n --eds-si-#{$sizing}: #{$value};\n }\n\n \n // BORDER RADIUS - eds-br\n // ----------------------\n\n @each $br, $value in maps.$border-radius-map {\n --eds-br-#{$br}: #{$value};\n }\n\n\n // BREAKPOINTS - eds-bp\n // ---------------------------\n\n @each $bp, $value in maps.$breakpoint-size-map {\n --eds-bp-#{$bp}: #{$value};\n }\n\n\n // BORDER WIDTH - eds-bw\n // ---------------------\n\n @each $br, $value in maps.$border-width-map {\n --eds-bw-#{$br}: #{$value};\n }\n\n\n // BOX-SHADOWS - eds-sh\n // --------------------\n\n --eds-sh-none: none;\n @each $sh, $shDef in maps.$shadow-map {\n --eds-sh-#{$sh}: #{map.get($shDef, 'offset-x') map.get($shDef, 'offset-y') map.get($shDef, 'blur') map.get($shDef, 'spread') map.get($shDef, 'color')};\n }\n\n\n // ICON-SIZES - eds-is\n // -------------------\n\n @each $icon-size, $value in dimensions-semantic.$icon-sizing-semantic-map {\n --eds-is-#{$icon-size}: #{$value};\n }\n\n\n // OPACITY - eds-op\n // ----------------\n\n @each $idx, $value in maps.$opacity-map {\n --eds-op-#{$idx}: #{$value};\n }\n}","@use '../01-base' as base;\n\nhtml {\n display: block;\n height: 100%;\n font-size: var(--eds-f-s-base);\n line-height: var(--eds-base-line-height);\n // @include base.eui-scrollbars();\n}\n\nbody {\n background-color: var(--eds-c-surface-elevation);\n color: var(--eds-c-foreground);\n font-family: var(--eds-f-family);\n font-feature-settings: 'liga';\n font-size: var(--eds-f-s-base);\n -moz-font-smoothing: antialiased;\n -webkit-font-smoothing: antialiased;\n font-style: normal;\n font-weight: normal;\n height: 100%;\n line-height: var(--eds-base-line-height);\n margin: 0;\n text-align: start;\n text-rendering: optimizeLegibility;\n}\n",".eui-21 {\n table.eds-table-default {\n background-color: transparent;\n border-collapse: collapse;\n border-spacing: 0;\n color: var(--eds-c-foreground);\n max-width: 100%;\n overflow: auto;\n position: relative;\n\n th,\n td {\n &:first-child {\n border-left: 0;\n }\n\n &:last-child {\n border-right: 0;\n }\n }\n\n // Overall settings (default)\n thead > tr > th,\n tbody > tr > td,\n tfoot > tr > td {\n vertical-align: middle;\n }\n\n tr > th,\n tr > td {\n padding: var(--eds-sp-s);\n text-align: left;\n }\n\n thead {\n th {\n color: var(--eds-c-foreground-default);\n padding: var(--eds-sp-m) var(--eds-sp-s);\n vertical-align: middle;\n font: var(--eds-f-label-m);\n font-weight: var(--eds-f-w-semibold);\n }\n\n tr {\n border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n border-top: 0;\n background: var(--eds-c-surface-elevation);\n }\n }\n\n // Striped & hovered tables by default\n tbody {\n tr:nth-of-type(odd) {\n background-color: transparent;\n\n &:hover {\n background-color: var(--eds-c-surface-hover);\n }\n }\n\n tr:nth-of-type(even) {\n background-color: var(--eds-c-surface-elevation);\n\n &:hover {\n background-color: var(--eds-c-surface-hover);\n }\n }\n }\n\n tfoot {\n tr {\n background: var(--eds-c-surface-elevation);\n }\n }\n\n tr {\n border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n display: table-row;\n }\n\n &--no-zebra {\n tbody {\n tr:nth-of-type(odd) {\n background-color: transparent;\n }\n\n tr:nth-of-type(even) {\n background-color: transparent;\n }\n }\n }\n\n // Compact table\n &--compact {\n thead {\n th {\n padding: var(--eds-sp-xs) var(--eds-sp-s);\n }\n }\n\n tr > td {\n padding: var(--eds-sp-3xs) var(--eds-sp-s);\n }\n }\n\n // Responsive table\n &--responsive {\n display: table;\n width: 100%;\n\n &--bordered {\n border: 0;\n }\n }\n\n // NoWrap table content\n &--nowrap {\n white-space: nowrap;\n\n thead > tr > th,\n tbody > tr > td,\n tfoot > tr > td {\n white-space: nowrap;\n }\n }\n\n // Centered table\n &--centered {\n display: table;\n margin: 0 auto;\n width: auto;\n }\n\n // Middle aligned cells content\n &--align-middle {\n thead > tr > th,\n tbody > tr > td,\n tfoot > tr > td {\n vertical-align: middle;\n }\n }\n }\n}\n","@keyframes eds-spin {\n from {\n transform: translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateY(-50%) rotate(360deg);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/00-reset/index.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/colors.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/colors-dark-theme.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/typography.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/01-base/mixins.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/03-vars/others.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/04-elements/html-body.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/04-elements/table.scss","file:///builds/csdr/eui/eui/packages/eds-styles/dist/tmp/base/06-shared/animations.scss"],"names":[],"mappings":";AAAA;AAEA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;ACXF;EAEQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACFR;EAEQ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;E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","sourcesContent":["/*! EDS Reset — minimal reset for evergreen browsers with encapsulated components */\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n}\n\n[hidden] {\n display: none;\n}\n","@use '../02-tokens/colors-semantic' as semantic;\n\n:root {\n @each $color, $value in semantic.$color-semantic-map {\n --eds-c-#{$color}: #{$value};\n }\n}","@use '../02-tokens/colors-semantic-dark-theme' as semantic;\n\nhtml.eui-t-dark {\n @each $color, $value in semantic.$color-semantic-map {\n --eds-c-#{$color}: #{$value};\n }\n}","@use 'sass:map';\n@use '../01-base' as base;\n@use '../02-tokens/dimensions-semantic' as dimensions-semantic;\n@use '../02-tokens/maps' as maps;\n@use '../02-tokens/typography-primitive' as typography-primitive;\n@use '../02-tokens/typography-semantic' as typography-semantic;\n\n@font-face {\n font-family: 'Inter';\n src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable.woff2') format('woff2');\n font-weight: 100 900;\n font-style: normal;\n font-display: block;\n}\n\n@font-face {\n font-family: 'Inter';\n src: url('#{base.$eds-assets-base-path}/fonts/inter/InterVariable-Italic.woff2') format('woff2');\n font-weight: 100 900;\n font-display: block;\n font-style: italic;\n}\n\n:root {\n // base font size\n --eds-f-s-base: 16px;\n \n // font families\n --eds-f-family: 'Inter', arial, sans-serif;\n --eds-f-family-monospace: 'Consolas', 'Liberation Mono', 'Courier New', monospace; \n\n @each $size, $def in typography-primitive.$font-size-map {\n --eds-f-s-#{$size}: #{$def};\n }\n @each $size, $def in typography-primitive.$font-line-height-map {\n --eds-f-lh-#{$size}: #{$def};\n }\n @each $size, $def in typography-primitive.$font-weight-map {\n --eds-f-w-#{$size}: #{$def};\n }\n\n // EDS raw vars\n @each $size, $def in typography-primitive.$font-size-letter-spacing-map {\n --eds-f-ls-#{$size}: #{$def};\n } \n\n // EDS typography\n // Weightless `font` shorthand: `font-size / line-height font-family`.\n // Apply weight separately at the call site via `--eds-f-w-<weight>`.\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'desktop') {\n @each $size, $sizeDef in $typeDef {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n\n @include base.media(maps.$eds-bkp-tablet) {\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'tablet') {\n $desktopTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'desktop'), $type);\n @each $size, $sizeDef in $typeDef {\n $desktopSizeDef: map.get($desktopTypeDef, $size);\n // Only emit override if size or line-height differs from desktop\n @if map.get($sizeDef, 'size') != map.get($desktopSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($desktopSizeDef, 'line-height') {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n } \n }\n\n @include base.media(maps.$eds-bkp-mobile) {\n @each $type, $typeDef in map.get(typography-semantic.$typography-semantic-map, 'mobile') {\n $tabletTypeDef: map.get(map.get(typography-semantic.$typography-semantic-map, 'tablet'), $type);\n @each $size, $sizeDef in $typeDef {\n $tabletSizeDef: map.get($tabletTypeDef, $size);\n // Only emit override if size or line-height differs from tablet\n @if map.get($sizeDef, 'size') != map.get($tabletSizeDef, 'size') or map.get($sizeDef, 'line-height') != map.get($tabletSizeDef, 'line-height') {\n --eds-f-#{$type}-#{$size}: var(--eds-f-s-#{map.get($sizeDef, 'size')})/var(--eds-f-lh-#{map.get($sizeDef, 'line-height')}) var(--eds-f-family);\n }\n }\n } \n } \n}\n","@use 'sass:map';\n@use 'sass:list';\n\n$default-feature: \"min-width\";\n@mixin media($query: $feature $value $columns) {\n @if list.length($query) == 1 {\n @media screen and ($default-feature: list.nth($query, 1)) {\n @content;\n }\n }\n @else {\n $loop-to: list.length($query);\n $media-query: \"screen and \";\n @if is-not(is-even(list.length($query))) {\n $loop-to: $loop-to - 1;\n }\n $i: 1;\n @while $i <=$loop-to {\n $media-query: $media-query + \"(\" + list.nth($query, $i) + \": \" + list.nth($query, $i + 1) + \") \";\n @if ($i + 1) != $loop-to {\n $media-query: $media-query + \"and \";\n }\n $i: $i+2;\n }\n @media #{$media-query} {\n @content;\n }\n }\n}\n\n@mixin eds-ellipsis() {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@mixin eds-focus-visible($offset: -2px, $size: 2px) {\n &:focus-visible:not([readonly]) {\n outline: $size solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n transition: none;\n }\n}\n@mixin eds-focus-visible-critical($offset: -2px, $size: 2px) {\n &:focus-visible:not([readonly]) {\n outline: $size solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n transition: none;\n }\n}\n\n@mixin eds-focus-ring($offset: 2px) {\n &:focus:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n@mixin eds-focus-ring-critical($offset: 2px) {\n &:focus:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n\n@mixin eds-focus-visible-ring($offset: 2px) {\n &:focus-visible:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-primary) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n@mixin eds-focus-visible-ring-critical($offset: 2px) {\n &:focus-visible:not([readonly]) {\n outline: var(--eds-bw-s) solid var(--eds-c-border-critical) !important;\n outline-offset: $offset !important;\n // border-radius: var(--eds-br-xs) !important;\n }\n}\n\n@mixin loading-indicator() {\n align-items: center;\n display: flex;\n\n &::after,\n &::before {\n content: '';\n height: var(--eds-sp-l);\n position: absolute;\n right: var(--eds-sp-s);\n width: var(--eds-sp-l);\n }\n\n &::before {\n border: var(--eds-sp-3xs) solid rgba(0, 0, 0, 0.35);\n border-radius: 100%;\n }\n\n &::after {\n animation: loading 0.6s linear;\n animation-iteration-count: infinite;\n border-color: var(--eui-c-white) transparent transparent;\n border-radius: 100%;\n border-style: solid;\n border-width: var(--eds-sp-3xs);\n box-shadow: 0 0 0 1px transparent;\n }\n\n &--sm::after,\n &--sm::before {\n height: var(--eds-sp-m);\n width: var(--eds-sp-m);\n }\n\n @keyframes loading {\n to { transform: rotate(360deg); }\n }\n}\n\n// EDS Input mixin — common styles for text inputs, textareas, selects.\n//\n// Size is parametrized through private custom properties that default to the\n// `m` size. Components reflect a `size` host attribute and override these\n// privates per `:host([size=\"s\"])` / `:host([size=\"l\"])` (see eds-input-size()).\n@mixin eds-input() {\n // Size-driven privates (defaults = `m`)\n --_eds-input-height: var(--eds-si-4xl);\n --_eds-input-pad-v: var(--eds-sp-xs);\n --_eds-input-pad-h: var(--eds-sp-s);\n --_eds-input-font: var(--eds-f-paragraph-m);\n --_eds-input-font-weight: var(--eds-f-w-regular);\n --_eds-input-placeholder-font: var(--eds-f-placeholder-m);\n --_eds-input-placeholder-font-weight: var(--eds-f-w-light);\n\n font: var(--_eds-input-font);\n font-weight: var(--_eds-input-font-weight);\n appearance: none;\n background-color: var(--eds-c-surface-elevation);\n border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);\n border-radius: var(--eds-br-s);\n box-shadow: none;\n color: var(--eds-c-foreground-default);\n height: var(--_eds-input-height);\n padding: var(--_eds-input-pad-v) var(--_eds-input-pad-h);\n width: 100%;\n @include eds-focus-visible-ring();\n\n &:not([hidden]) {\n display: block;\n }\n\n &::placeholder {\n color: var(--eds-c-foreground-placeholder);\n font: var(--_eds-input-placeholder-font);\n font-weight: var(--_eds-input-placeholder-font-weight);\n opacity: 1;\n }\n\n // Readonly\n &[readonly] {\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n padding-left: 0;\n padding-right: 0;\n pointer-events: none;\n }\n\n // Disabled\n &:disabled:not([readonly]),\n &--disabled:not([readonly]) {\n background-color: var(--eds-c-surface-disabled-subtle);\n border-color: var(--eds-c-border-disabled);\n color: var(--eds-c-foreground-disabled);\n pointer-events: none;\n }\n\n // Invalid\n &[invalid] {\n border-color: var(--eds-c-border-critical);\n @include eds-focus-visible-ring-critical();\n }\n\n &--loading {\n padding-right: var(--eds-sp-7xl);\n\n &-icon {\n @include loading-indicator();\n }\n } \n}\n\n// EDS Input size overrides — applies the `s` / `l` size privates.\n// Call inside a component's `:host` scope (after `eds-input()`); it emits the\n// `[input-size=\"s\"]` / `[input-size=\"l\"]` branches. The size variant is\n// reflected as the `input-size` host attribute (NOT `size`, which is reserved\n// for the native `<select size>` / `<input size>` DOM attribute). The `m` size\n// is the default already set by `eds-input()`, so no `[input-size=\"m\"]` branch\n// is needed.\n@mixin eds-input-size() {\n &[input-size=\"s\"] {\n --_eds-input-height: calc(var(--eds-si-3xl) + var(--eds-si-2xs)); // 36px\n --_eds-input-pad-v: var(--eds-sp-2xs);\n --_eds-input-pad-h: var(--eds-sp-s);\n }\n\n &[input-size=\"l\"] {\n --_eds-input-height: var(--eds-si-6xl); // 48px\n --_eds-input-pad-v: var(--eds-sp-s);\n --_eds-input-pad-h: var(--eds-sp-m);\n }\n}\n\n@mixin eds-input-hover() {\n &:hover:not([aria-disabled=\"true\"]):not(:disabled) {\n box-shadow: var(--eds-sh-1);\n\n &:not([aria-disabled=\"true\"]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=\"true\"]):not([invalid=\"true\"]) {\n border-color: var(--eds-c-border-neutral--hover);\n }\n\n // checkbox\n &.eds-checkbox {\n &:checked:not([readonly]):not([invalid=\"true\"]),\n &[checked=\"true\"]:not([readonly]):not([invalid=\"true\"]),\n &[indeterminate=\"true\"]:not([readonly]) {\n background-color: var(--eds-c-surface-primary--hover);\n }\n }\n\n //radio\n &.eds-radio {\n &:checked:not([readonly]):not([invalid=\"true\"]) {\n background-color: var(--eds-c-surface-elevation);\n border-color: var(--eds-c-border-primary--hover);\n }\n }\n }\n}","@use 'sass:map';\n@use '../02-tokens/dimensions-semantic' as dimensions-semantic;\n@use '../02-tokens/maps' as maps;\n\n:root {\n --eds-base-line-height: 1.5rem;\n\n // SPACING - eds-sp\n // ---------------\n\n @each $spacing, $value in dimensions-semantic.$spacing-semantic-map {\n --eds-sp-#{$spacing}: #{$value};\n }\n @each $sizing, $value in dimensions-semantic.$sizing-semantic-map {\n --eds-si-#{$sizing}: #{$value};\n }\n\n \n // BORDER RADIUS - eds-br\n // ----------------------\n\n @each $br, $value in maps.$border-radius-map {\n --eds-br-#{$br}: #{$value};\n }\n\n\n // BREAKPOINTS - eds-bp\n // ---------------------------\n\n @each $bp, $value in maps.$breakpoint-size-map {\n --eds-bp-#{$bp}: #{$value};\n }\n\n\n // BORDER WIDTH - eds-bw\n // ---------------------\n\n @each $br, $value in maps.$border-width-map {\n --eds-bw-#{$br}: #{$value};\n }\n\n\n // BOX-SHADOWS - eds-sh\n // --------------------\n\n --eds-sh-none: none;\n @each $sh, $shDef in maps.$shadow-map {\n --eds-sh-#{$sh}: #{map.get($shDef, 'offset-x') map.get($shDef, 'offset-y') map.get($shDef, 'blur') map.get($shDef, 'spread') map.get($shDef, 'color')};\n }\n\n\n // ICON-SIZES - eds-is\n // -------------------\n\n @each $icon-size, $value in dimensions-semantic.$icon-sizing-semantic-map {\n --eds-is-#{$icon-size}: #{$value};\n }\n\n\n // OPACITY - eds-op\n // ----------------\n\n @each $idx, $value in maps.$opacity-map {\n --eds-op-#{$idx}: #{$value};\n }\n}","@use '../01-base' as base;\n\nhtml {\n display: block;\n height: 100%;\n font-size: var(--eds-f-s-base);\n line-height: var(--eds-base-line-height);\n // @include base.eui-scrollbars();\n}\n\nbody {\n background-color: var(--eds-c-surface-elevation);\n color: var(--eds-c-foreground);\n font-family: var(--eds-f-family);\n font-feature-settings: 'liga';\n font-size: var(--eds-f-s-base);\n -moz-font-smoothing: antialiased;\n -webkit-font-smoothing: antialiased;\n font-style: normal;\n font-weight: normal;\n height: 100%;\n line-height: var(--eds-base-line-height);\n margin: 0;\n text-align: start;\n text-rendering: optimizeLegibility;\n}\n",".eui-21 {\n table.eds-table-default {\n background-color: transparent;\n border-collapse: collapse;\n border-spacing: 0;\n color: var(--eds-c-foreground);\n max-width: 100%;\n overflow: auto;\n position: relative;\n\n th,\n td {\n &:first-child {\n border-left: 0;\n }\n\n &:last-child {\n border-right: 0;\n }\n }\n\n // Overall settings (default)\n thead > tr > th,\n tbody > tr > td,\n tfoot > tr > td {\n vertical-align: middle;\n }\n\n tr > th,\n tr > td {\n padding: var(--eds-sp-s);\n text-align: left;\n }\n\n thead {\n th {\n color: var(--eds-c-foreground-default);\n padding: var(--eds-sp-m) var(--eds-sp-s);\n vertical-align: middle;\n font: var(--eds-f-label-m);\n font-weight: var(--eds-f-w-semibold);\n }\n\n tr {\n border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n border-top: 0;\n background: var(--eds-c-surface-elevation);\n }\n }\n\n // Striped & hovered tables by default\n tbody {\n tr:nth-of-type(odd) {\n background-color: transparent;\n\n &:hover {\n background-color: var(--eds-c-surface-hover);\n }\n }\n\n tr:nth-of-type(even) {\n background-color: var(--eds-c-surface-elevation);\n\n &:hover {\n background-color: var(--eds-c-surface-hover);\n }\n }\n }\n\n tfoot {\n tr {\n background: var(--eds-c-surface-elevation);\n }\n }\n\n tr {\n border-bottom: var(--eds-bw-xs) solid var(--eds-c-border-divider);\n display: table-row;\n }\n\n &--no-zebra {\n tbody {\n tr:nth-of-type(odd) {\n background-color: transparent;\n }\n\n tr:nth-of-type(even) {\n background-color: transparent;\n }\n }\n }\n\n // Compact table\n &--compact {\n thead {\n th {\n padding: var(--eds-sp-xs) var(--eds-sp-s);\n }\n }\n\n tr > td {\n padding: var(--eds-sp-3xs) var(--eds-sp-s);\n }\n }\n\n // Responsive table\n &--responsive {\n display: table;\n width: 100%;\n\n &--bordered {\n border: 0;\n }\n }\n\n // NoWrap table content\n &--nowrap {\n white-space: nowrap;\n\n thead > tr > th,\n tbody > tr > td,\n tfoot > tr > td {\n white-space: nowrap;\n }\n }\n\n // Centered table\n &--centered {\n display: table;\n margin: 0 auto;\n width: auto;\n }\n\n // Middle aligned cells content\n &--align-middle {\n thead > tr > th,\n tbody > tr > td,\n tfoot > tr > td {\n vertical-align: middle;\n }\n }\n }\n}\n","@keyframes eds-spin {\n from {\n transform: translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateY(-50%) rotate(360deg);\n }\n}\n"]}
|